// Hero — type IS the hero (no image, no shape, no illustration).
// Verbatim headline per the prototype brief; orchestrated page-load reveal.
function Hero() {
  return (
    <section
      id="top"
      style={{
        maxWidth: "var(--container-max)",
        margin: "0 auto",
        padding: "clamp(4rem, 10vh, 8rem) var(--container-pad) clamp(5rem, 12vh, 9rem)",
        position: "relative",
      }}
    >
      <div
        className="reveal"
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          marginBottom: 36,
          "--d": 0,
        }}
      >
        <span
          style={{
            width: 24,
            height: 1,
            background: "var(--accent)",
          }}
        />
        <span
          style={{
            fontFamily: "var(--font-ui)",
            fontWeight: 500,
            fontSize: 13,
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
          }}
        >
          Est. Santiago · 2026
        </span>
      </div>

      <h1
        className="reveal"
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: "clamp(2.25rem, 5.4vw, 4.5rem)",
          lineHeight: 1.12,
          letterSpacing: "-0.025em",
          color: "var(--ink)",
          margin: 0,
          maxWidth: "22ch",
          paddingBottom: "0.1em",
          "--d": 100,
        }}
      >
        El ejercicio del derecho puede ser cercano y humano sin renunciar a la
        eficiencia ni al rigor técnico.
      </h1>

      <div
        style={{
          marginTop: "clamp(2.5rem, 5vh, 4rem)",
          display: "grid",
          gridTemplateColumns: "minmax(0, 7fr) minmax(0, 5fr)",
          gap: "clamp(2rem, 5vw, 4rem)",
          alignItems: "start",
        }}
      >
        <p
          className="reveal"
          style={{
            margin: 0,
            fontFamily: "var(--font-ui)",
            fontSize: "clamp(1.0625rem, 1.4vw, 1.1875rem)",
            lineHeight: 1.55,
            color: "var(--ink-muted)",
            maxWidth: "48ch",
            "--d": 250,
          }}
        >
          Estudio jurídico boutique. Litigación civil, penal, familia, laboral,
          consumidor y administrativo.
        </p>

        <div
          className="reveal"
          style={{
            display: "flex",
            gap: "1.5rem",
            alignItems: "center",
            flexWrap: "wrap",
            justifyContent: "flex-end",
            "--d": 400,
          }}
        >
          <a href="#contacto" className="btn-primary">
            Agendar consulta
            <ArrowRight width={16} height={16} />
          </a>
          <a
            href="https://wa.me/56978901234"
            className="btn-secondary"
            style={{ borderBottomColor: "var(--accent)", color: "var(--accent)" }}
          >
            <span>Urgencia penal — contacto inmediato</span>
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });