// AdOpsify homepage hero — CTV / programmatic / media buying
const Hero = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap) return;
    const els = ref.current.querySelectorAll("[data-reveal]");
    window.gsap.from(els, {
      y: 40, opacity: 0, duration: 1.1, stagger: 0.08,
      ease: "expo.out", delay: 0.15,
    });
  }, []);

  return (
    <section ref={ref} style={{
      minHeight: "100vh", padding: "clamp(116px, 14vw, 140px) clamp(16px, 4vw, 48px) clamp(64px, 8vw, 96px)",
      position: "relative", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center",
    }}>
      {/* Background gradient blobs */}
      <div aria-hidden style={{
        position: "absolute", top: -100, right: -240,
        width: 820, height: 820,
        background: "radial-gradient(closest-side, color-mix(in oklab, var(--brand-violet) 22%, transparent), transparent 70%)",
        filter: "blur(50px)", pointerEvents: "none",
      }}/>
      <div aria-hidden style={{
        position: "absolute", top: 200, left: -300,
        width: 740, height: 740,
        background: "radial-gradient(closest-side, color-mix(in oklab, var(--brand-cobalt) 22%, transparent), transparent 70%)",
        filter: "blur(50px)", pointerEvents: "none",
      }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", width: "100%", position: "relative" }}>
        <div data-reveal style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "8px 14px",
          border: "1px solid var(--border-strong)",
          borderRadius: 9999,
          background: "rgba(255,255,255,0.6)",
          backdropFilter: "blur(8px)",
          fontSize: 13, color: "var(--ink-700)",
          fontFamily: "var(--font-mono)", letterSpacing: "0.04em",
          marginBottom: 32,
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: "50%",
            background: "var(--brand-cobalt)",
            boxShadow: "0 0 0 4px color-mix(in oklab, var(--brand-cobalt) 25%, transparent)",
          }}/>
          AdOpsify LLC · Performance ad ops & engineering
        </div>

        <h1 data-reveal style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(64px, 9vw, 152px)",
          lineHeight: 0.96, letterSpacing: "-0.035em", margin: 0,
          maxWidth: 1280,
        }}>
          Buy media that <br/>
          <span className="brand-grad-text" style={{ fontStyle: "italic" }}>actually performs.</span>
        </h1>

        <p data-reveal style={{
          maxWidth: 620, marginTop: 30, fontSize: "clamp(16px, 2.4vw, 21px)", lineHeight: 1.5,
          color: "var(--fg-muted)",
        }}>
          AdOpsify plans, buys, and operates programmatic, CTV, and cross-channel
          campaigns for brands that measure outcomes — not impressions. Senior team,
          transparent fees, real-time dashboards.
        </p>

        <div data-reveal style={{ marginTop: 48, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <a href="https://calendly.com/shoaib-adopsify/30min" target="_blank" rel="noopener noreferrer" style={{
            background: "var(--brand-gradient)", color: "var(--paper)",
            padding: "16px 26px", borderRadius: 9999,
            fontSize: 15, fontWeight: 600, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 10,
            boxShadow: "0 8px 24px rgba(46,91,255,0.30)",
            transition: "transform 200ms, box-shadow 200ms",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 14px 32px rgba(46,91,255,0.40)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 24px rgba(46,91,255,0.30)"; }}
          >
            Plan a campaign
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 8h10M9 4l4 4-4 4"/>
            </svg>
          </a>
          <a href="services.html" style={{
            color: "var(--ink-900)", fontSize: 15, fontWeight: 600,
            padding: "16px 22px",
            border: "1px solid var(--border-strong)",
            background: "var(--paper-raised)",
            borderRadius: 9999,
            textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            See our services
          </a>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 13,
            color: "var(--fg-muted)", marginLeft: 0,
          }}>
            Free media audit · 48-hour turnaround
          </span>
        </div>

      </div>
    </section>
  );
};
window.Hero = Hero;