/* Hero.jsx — above-the-fold (monolith composition).
 * Centered mountain mark + wordmark + lead + EST. line + manifesto link.
 */

function ManifestoLink() {
  const onClick = (e) => {
    e.preventDefault();
    const el = document.getElementById("manifesto");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <a href="#manifesto" onClick={onClick}
       style={{ fontFamily: "var(--title)", fontSize: 11, letterSpacing: "0.28em",
                color: "var(--ink)", textTransform: "uppercase", textDecoration: "none",
                borderBottom: "1px solid var(--ink)", paddingBottom: 4,
                display: "inline-block", transition: "color .15s, border-color .15s" }}
       onMouseEnter={(e) => { e.currentTarget.style.color = "var(--terra-deep)";
                              e.currentTarget.style.borderColor = "var(--terra-deep)"; }}
       onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink)";
                              e.currentTarget.style.borderColor = "var(--ink)"; }}>
      Read the manifesto ↓
    </a>
  );
}

function ContactLink() {
  const onClick = (e) => {
    e.preventDefault();
    const el = document.getElementById("contact");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <a href="#contact" onClick={onClick}
       style={{ fontFamily: "var(--title)", fontSize: 11, letterSpacing: "0.24em",
                color: "var(--ink)", textTransform: "uppercase", textDecoration: "none",
                background: "transparent", border: "1px solid transparent",
                padding: "10px 16px", display: "inline-block",
                transition: "background .15s, color .15s, border-color .15s" }}
       onMouseEnter={(e) => { e.currentTarget.style.background = "var(--terra-deep)";
                              e.currentTarget.style.color = "var(--paper)";
                              e.currentTarget.style.borderColor = "var(--terra-deep)"; }}
       onMouseLeave={(e) => { e.currentTarget.style.background = "transparent";
                              e.currentTarget.style.color = "var(--ink)";
                              e.currentTarget.style.borderColor = "transparent"; }}>
      Contact us
    </a>
  );
}

function HeroEditorial() {
  return (
    <section style={{ position: "relative", minHeight: 620,
                      background: "var(--paper)", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, padding: "152px 96px 24px",
                    display: "flex", flexDirection: "column", alignItems: "center",
                    justifyContent: "center", gap: 28, zIndex: 2, textAlign: "center" }}>
        <MountainMark size={120} strokeWidth={1.6} />
        <Wordmark size={88} />
        <p style={{ fontFamily: "var(--display)", fontWeight: 400, fontSize: 22,
                    lineHeight: 1.5, color: "var(--ink)", maxWidth: 560,
                    textWrap: "pretty", margin: 0 }}>
          Zonda Markets is the joint R&amp;D arm of Pol Finance and Aligned.
          We research and ship infrastructure for Ethereum: settlement, ordering,
          and on-chain credit.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <ManifestoLink />
          <ContactLink />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroEditorial, ManifestoLink, ContactLink });