// Hero.jsx — propaganda-poster style hero
function Hero() {
  return (
    <section id="top" style={{ position: "relative", overflow: "hidden", background: "var(--gm-paper)" }}>
      {/* sunburst behind — full width, below header, above-the-ticker only */}
      <div className="sunburst" style={{
        position: "absolute", top: 0, left: 0, right: 0, bottom: 0,
        pointerEvents: "none", opacity: .9
      }}></div>

      <div className="wrap" style={{ position: "relative", paddingTop: 56, paddingBottom: 72 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.18fr .82fr", gap: 56, alignItems: "center" }} className="hero-grid">
          <div>
            <Kicker>Fractional Marketing Leadership</Kicker>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
              fontSize: "clamp(2.7rem, 5.4vw, 4.9rem)", lineHeight: .9, letterSpacing: "-.01em",
              color: "var(--gm-ink)", margin: "18px 0 0", textWrap: "balance"
            }}>
              I help companies grow on purpose,<br/>
              <span style={{ color: "var(--gm-orange)" }}>not by accident.</span>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 520, margin: "24px 0 0" }}>
              Marketing leadership for companies at the moments that matter most.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", margin: "16px 0 0" }}>
              {["A launch.", "A reset.", "A growth plateau."].map(t => (
                <span key={t} style={{
                  fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase",
                  fontSize: 15, letterSpacing: ".03em", color: "var(--gm-ink)", whiteSpace: "nowrap",
                  borderBottom: "2.5px solid var(--gm-orange)", paddingBottom: 2
                }}>{t}</span>
              ))}
            </div>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 520, margin: "18px 0 0" }}>
              I build the strategy, run the execution, and attribute investment back to
              <strong style={{ color: "var(--gm-ink)" }}> revenue.</strong>
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
              <Btn variant="primary" href="#contact" icon="lightning">Let's Grow</Btn>
            </div>
          </div>

          {/* framed poster */}
          <div style={{ position: "relative" }} className="hero-poster">
            <div className="card" style={{ boxShadow: "var(--shadow-block-lg)", lineHeight: 0, transform: "rotate(-1.5deg)" }}>
              <img src="assets/poster-building-growth.png" alt="Growth, on purpose" style={{ display: "block", width: "100%" }} />
            </div>
            <div style={{
              position: "absolute", bottom: -18, left: -18, background: "var(--gm-yellow)",
              border: "var(--stroke) solid var(--gm-ink)", padding: "8px 14px", transform: "rotate(-3deg)",
              fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", fontSize: 15
            }}>~15 years in the seat</div>
          </div>
        </div>
      </div>

      {/* ticker strip */}
      <div style={{ position: "relative", zIndex: 1, background: "var(--gm-ink)", color: "var(--gm-paper)", borderTop: "var(--stroke) solid var(--gm-ink)", overflow: "hidden" }}>
        <div className="gm-ticker" style={{ display: "flex", gap: 0, whiteSpace: "nowrap", padding: "12px 0" }}>
          {Array.from({ length: 2 }).map((_, g) => (
            <div key={g} style={{ display: "flex", alignItems: "center" }}>
              {["Strategy", "Paid Media", "Brand & Positioning", "Websites & Getting Found", "Growth You Can Measure"].map((t, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 22, padding: "0 22px",
                  fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", fontSize: 17, letterSpacing: ".04em" }}>
                  {t}<i className="ph-fill ph-asterisk" style={{ color: "var(--gm-orange)", fontSize: 13 }}></i>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });