/* global React, RevealLines, MagneticButton, Marquee, HeroBackground, ArrowRight, Rise */

const CAPABILITIES = [
  "AI Strategy", "Build & Deployment", "Pricing & Packaging",
  "Go-to-Market", "Workshops & Speaking", "AI Agents",
];

function Hero() {
  const initialMode = (typeof window !== "undefined" && window.__heroMode) || "lattice";
  return (
    <section id="top" style={{ position: "relative", display: "flex", flexDirection: "column",
      justifyContent: "center", minHeight: "94vh", overflow: "hidden", paddingTop: 92 }}>
      <HeroBackground mode={initialMode} />

      {/* canvas vignette → seats the field into the page, protects contrast */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(120% 80% at 18% 42%, rgba(8,9,13,.92), rgba(8,9,13,.4) 46%, transparent 72%), linear-gradient(to bottom, transparent 60%, var(--ink-950))" }} />
      {/* off-axis accent halo */}
      <div aria-hidden="true" style={{ position: "absolute", right: "-22%", top: "-26%", height: "72vh", width: "72vh",
        borderRadius: "50%", opacity: 0.5, filter: "blur(70px)",
        background: "radial-gradient(closest-side, rgba(79,124,255,.16), transparent 70%)", pointerEvents: "none" }} />
      {/* left guide line */}
      <div aria-hidden="true" className="hero-guide" style={{ position: "absolute", insetBlock: 0, left: 28, width: 1,
        background: "linear-gradient(to bottom, transparent, rgba(255,255,255,.07), transparent)", pointerEvents: "none" }} />

      <div style={{ position: "relative", zIndex: 10, margin: "0 auto", width: "100%", maxWidth: "var(--max-wide)", padding: "0 28px" }}>
        {/* Meta row */}
        <Rise style={{ marginBottom: 38, display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px 16px" }}>
          <span className="kicker" style={{ fontSize: 11, color: "var(--accent)" }}>AI Strategy &amp; Build</span>
        </Rise>

        {/* Oversized headline */}
        <RevealLines as="h1" stagger={90}
          className="hero-h1"
          lines={[
            <>Stop circling AI.</>,
            <>Pick the moves</>,
            <>that pay off,</>,
            <span className="em">and ship them.</span>,
          ]} />

        {/* Support row */}
        <div className="hero-support" style={{ marginTop: 46, display: "grid", gap: 38, alignItems: "end" }}>
          <Rise delay={0.45} className="hero-ctas" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
            <MagneticButton as="a" href="#contact" className="btn-primary focus-ring" style={{ textDecoration: "none" }}>
              Book a call
              <span className="arr" style={{ display: "inline-flex" }}><ArrowRight size={16} sw={2} /></span>
            </MagneticButton>
            <a href="#services" className="focus-ring link-underline"
              style={{ padding: "8px 4px", fontSize: 15, fontWeight: 500, color: "var(--text-body)", textDecoration: "none", transition: "color .2s" }}>
              See how we help
            </a>
          </Rise>

          <Rise delay={0.55} as="p" className="hero-sub" style={{ maxWidth: "36rem", fontSize: "var(--fluid-base)", lineHeight: 1.6, color: "var(--text-body-2)", margin: 0 }}>
            Most teams know AI matters but stall on where to begin, or how to make
            it real. We find where AI actually earns its keep, then build and
            ship it with you. Fast.
          </Rise>
        </div>
      </div>

      {/* Capability ticker */}
      <Rise delay={0.65} style={{ position: "relative", zIndex: 10, marginTop: 72, borderTop: "1px solid rgba(255,255,255,.06)", paddingBlock: 20 }}>
        <Marquee items={CAPABILITIES} />
      </Rise>
    </section>
  );
}

window.Hero = Hero;