function Footer() {
  const links = [
    ["About", "about"],
    ["Bridal Makeup", "bridal-makeup"],
    ["Makeup Team", "makeup-team"],
    ["Masterclasses", "masterclasses"],
  ];

  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <footer style={{ background: "var(--coffee)", color: "var(--ivory)", padding: "120px 0 40px", position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "center", marginBottom: 56 }}>
          <img
            src="assets/logo/isotipo-2.png"
            alt="Ana Paula Celis logo"
            style={{ width: 86, height: 86, objectFit: "contain", filter: "brightness(0) invert(1)" }}
          />
          <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", margin: 0, lineHeight: 1.05, textWrap: "balance" }}>
            Ana Paula Celis <span className="italic" style={{ color: "var(--rose-soft)" }}>Makeup Team</span>
          </h2>
        </div>

        <hr style={{ border: 0, borderTop: "1px solid rgba(234,232,226,0.2)", marginBottom: 46 }} />
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 50, marginBottom: 60 }}>
          <div>
            <p style={{ color: "var(--bridal)", fontSize: 14, marginTop: 24, lineHeight: 1.6, maxWidth: 320 }}>
              Experiencias de maquillaje para novias en todo el mundo.
              Reservas y cotizaciones por WhatsApp.
            </p>
            <a
              href="https://wa.me/523320126620"
              target="_blank"
              rel="noreferrer"
              className="btn btn-rose"
              style={{ marginTop: 16 }}
            >
              WhatsApp +52 33 2012 6620
            </a>
          </div>

          <div>
            <div className="eyebrow" style={{ color: "var(--marfil)", marginBottom: 20 }}>Navegación</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
              {links.map(([label, id]) => (
                <li key={id}>
                  <button onClick={() => go(id)} style={{ color: "var(--bridal)", fontSize: 14 }}>
                    {label}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div className="eyebrow" style={{ color: "var(--marfil)", marginBottom: 20 }}>Estudio</div>
            <p style={{ color: "var(--bridal)", fontSize: 14, lineHeight: 1.7, margin: 0 }}>
              Av. Pablo Neruda<br/>
              Providencia, GDL<br/>
              Jalisco · México
            </p>
            <p className="eyebrow" style={{ marginTop: 16, color: "var(--marfil)" }}>Cita previa únicamente</p>
          </div>

        </div>

        <hr style={{ border: 0, borderTop: "1px solid rgba(234,232,226,0.2)", marginBottom: 24 }} />

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11, color: "var(--marfil)", fontFamily: "var(--mono)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
          <span>© 2026 · Ana Paula Celis · Guadalajara, México</span>
          <span>Bridal Makeup Worldwide</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;