// Footer — three columns on --bg-elevated, hairline top. Bottom strip
// carries the single copyright line.
function Footer() {
  return (
    <footer
      style={{
        background: "var(--bg-elevated)",
        borderTop: "1px solid var(--line)",
        marginTop: 0,
        padding: "clamp(3rem, 6vh, 5rem) 0 clamp(1.5rem, 3vh, 2.5rem)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max)",
          margin: "0 auto",
          padding: "0 var(--container-pad)",
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)",
          gap: "clamp(2rem, 5vw, 5rem)",
        }}
      >
        {/* Identity */}
        <div>
          <div
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 400,
              fontSize: "clamp(1.25rem, 1.8vw, 1.5rem)",
              letterSpacing: "-0.01em",
              color: "var(--ink)",
            }}
          >
            Riveros | Torres <em style={{ fontStyle: "italic" }}>&amp; Cía.</em>
          </div>
          <p
            style={{
              margin: "16px 0 0",
              fontFamily: "var(--font-ui)",
              fontSize: 13,
              lineHeight: 1.65,
              color: "var(--ink-muted)",
              maxWidth: "40ch",
            }}
          >
            Riveros, Torres y Compañía Limitada
            <br />
            RUT 78.418.315-7
          </p>
          <p
            style={{
              margin: "12px 0 0",
              fontFamily: "var(--font-ui)",
              fontSize: 12,
              letterSpacing: "0.04em",
              color: "var(--ink-subtle)",
            }}
          >
            Constituido en mayo de 2026 · Santiago de Chile
          </p>
        </div>

        <FooterCol
          title="Navegación"
          links={[
            ["Estudio", "#estudio"],
            ["Equipo", "#equipo"],
            ["Áreas", "#practica"],
            ["Enfoque", "#metodo"],
            ["Contacto", "#contacto"],
            ["Preguntas frecuentes", "#faq"],
          ]}
        />

        <FooterCol
          title="Legal & redes"
          links={[
            ["Política de privacidad", "#"],
            ["Términos", "#"],
            ["LinkedIn · Ignacio Riveros", "https://www.linkedin.com/in/ignacio-riveros-mu%C3%B1oz-00751b35/"],
            ["LinkedIn · Macarena Torres", "#"],
            ["Instagram", "#"],
          ]}
        />
      </div>

      <div
        style={{
          maxWidth: "var(--container-max)",
          margin: "clamp(3rem, 5vh, 4rem) auto 0",
          padding: "20px var(--container-pad) 0",
          borderTop: "1px solid var(--line)",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 12,
          fontFamily: "var(--font-ui)",
          fontSize: 12,
          color: "var(--ink-subtle)",
          letterSpacing: "0.04em",
        }}
      >
        <span>© 2026 Riveros | Torres &amp; Cía. · Santiago de Chile</span>
        <span>contacto@riverostorresycia.cl</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--font-ui)",
          fontWeight: 500,
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--ink-subtle)",
          marginBottom: 18,
        }}
      >
        {title}
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(([label, href]) => (
          <li key={label}>
            <a
              href={href}
              style={{
                fontFamily: "var(--font-ui)",
                fontSize: 14,
                color: "var(--ink)",
                textDecoration: "none",
                borderBottom: "1px solid transparent",
                paddingBottom: 1,
                transition: "border-color 250ms var(--ease-std), color 250ms var(--ease-std)",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderBottomColor = "var(--accent)";
                e.currentTarget.style.color = "var(--accent)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderBottomColor = "transparent";
                e.currentTarget.style.color = "var(--ink)";
              }}
            >
              {label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Footer });