// Footer — assinatura do casal
window.Footer = function Footer() {
  const C = window.CONFIG;
  return (
    <footer className="footer" id="footer">
      <div className="footer-inner">
        <img src="assets/selo.png" alt="Selo" className="footer-selo" />
        <img src="assets/nome-casal.png" alt={`${C.noivo1} & ${C.noivo2}`} className="footer-names-img" />
        <p className="footer-date">
          <span className="footer-date-part">11</span>
          <span className="footer-date-de">de</span>
          <span className="footer-date-part">JULHO</span>
          <span className="footer-date-de">de</span>
          <span className="footer-date-part footer-date-year">2026</span>
        </p>
        <Ornament width={100} />
        <p className="footer-quote">
          Feito com amor para o dia mais especial das nossas vidas.
        </p>
        <p className="footer-meta">
          <a href="#hero">Topo</a>
          <span aria-hidden="true">·</span>
          <a href="#evento">O Evento</a>
          <span aria-hidden="true">·</span>
          <a href="#galeria">Galeria</a>
          <span aria-hidden="true">·</span>
          <a href="#presentes">Presentes</a>
        </p>
      </div>

      <style>{`
        .footer {
          background: #ffffff;
          color: #5C3D2E;
          padding: 56px 24px 44px;
          text-align: center;
          border-top: 1px solid rgba(184,134,11,0.25);
        }
        .footer-divider {
          width: 60px;
          height: 2px;
          background: #711312;
          border-radius: 2px;
          margin: 8px 0;
        }
        .footer-selo {
          width: clamp(90px, 12vw, 110px);
          height: auto;
          margin-bottom: 12px;
        }
        .footer-names-img {
          width: clamp(250px, 35vw, 400px);
          height: auto;
          margin: 4px 0 6px;
        }
        .footer-inner { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
        .footer-names {
          font-family: 'Great Vibes', cursive;
          font-size: 38px; color: #ffffff;
          margin: 4px 0 6px; font-weight: 400;
        }
        .footer-date {
          display: flex;
          align-items: baseline;
          gap: 8px;
          margin: 4px 0;
        }
        .footer-date-part {
          font-family: 'Augustus', serif;
          font-size: clamp(14px, 2vw, 18px);
          font-weight: 700;
          color: #711312;
          letter-spacing: 2px;
          text-transform: uppercase;
        }
        .footer-date-de {
          font-family: 'Didot', 'Cormorant Garamond', serif;
          font-size: clamp(12px, 1.5vw, 15px);
          font-weight: 300;
          font-style: italic;
          color: #711312;
          letter-spacing: 1px;
        }
        .footer-date-year {
          font-family: 'TrajanPro', serif;
        }
        .footer-quote {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 14px;
          color: #5C3D2E; margin-top: 4px; line-height: 1.5;
          max-width: 380px;
        }
        .footer-meta {
          margin-top: 24px;
          display: flex; gap: 12px; align-items: center;
          flex-wrap: wrap; justify-content: center;
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 2px; text-transform: uppercase;
          color: #ADADAD;
        }
        .footer-meta a {
          color: #711312; opacity: 0.85;
          border-bottom: 1px solid transparent;
          padding-bottom: 2px; transition: border-color 0.2s ease, opacity 0.2s ease;
        }
        .footer-meta a:hover { border-color: #ADADAD; opacity: 1; }
      `}</style>
    </footer>
  );
};