/* ========================================================
   Hero — with two background variants (grid | mesh)
   ======================================================== */

function HeroBgGrid() {
  return (
    <div className="hero-bg hero-bg--grid" aria-hidden>
      <div className="hero-grid"/>
      <div className="hero-dots">
        {/* A few glowing dots at grid intersections */}
        {[
          [18, 22], [42, 18], [70, 30], [28, 60], [82, 58], [12, 78], [58, 72], [90, 14]
        ].map(([x,y], i) => (
          <span key={i} className="hero-dot" style={{ left: `${x}%`, top: `${y}%`, animationDelay: `${i * 0.6}s` }}/>
        ))}
      </div>
      <div className="hero-vignette"/>
      <style>{`
        .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .hero-grid {
          position: absolute; inset: -1px;
          background-image:
            linear-gradient(to right, color-mix(in oklab, var(--text) 7%, transparent) 1px, transparent 1px),
            linear-gradient(to bottom, color-mix(in oklab, var(--text) 7%, transparent) 1px, transparent 1px);
          background-size: 64px 64px;
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 80%);
          opacity: 0.55;
        }
        .hero-dots { position: absolute; inset: 0; }
        .hero-dot {
          position: absolute;
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 10px var(--accent-glow), 0 0 24px var(--accent-glow);
          animation: dotPulse 3.6s ease-in-out infinite;
          opacity: 0.75;
        }
        @keyframes dotPulse {
          0%, 100% { transform: scale(0.6); opacity: 0.3; }
          50%      { transform: scale(1); opacity: 0.9; }
        }
        .hero-vignette {
          position: absolute; inset: 0;
          background:
            radial-gradient(ellipse 50% 40% at 20% 30%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%),
            linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
        }
      `}</style>
    </div>
  );
}

function HeroBgMesh() {
  return (
    <div className="hero-bg hero-bg--mesh" aria-hidden>
      <div className="mesh mesh-a"/>
      <div className="mesh mesh-b"/>
      <div className="mesh mesh-c"/>
      <div className="mesh-noise"/>
      <div className="hero-vignette2"/>
      <style>{`
        .hero-bg--mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .mesh {
          position: absolute; border-radius: 50%;
          filter: blur(80px);
          opacity: 0.5;
          mix-blend-mode: screen;
        }
        .mesh-a { width: 620px; height: 620px; left: -8%; top: -10%;
          background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
          animation: meshFloat 18s ease-in-out infinite; }
        .mesh-b { width: 540px; height: 540px; right: -8%; top: 10%;
          background: radial-gradient(circle, color-mix(in oklab, var(--accent) 60%, #5b21b6) 0%, transparent 60%);
          animation: meshFloat 22s ease-in-out infinite reverse; opacity: 0.35; }
        .mesh-c { width: 500px; height: 500px; left: 30%; bottom: -20%;
          background: radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, #0f766e) 0%, transparent 60%);
          animation: meshFloat 26s ease-in-out infinite; opacity: 0.3; }
        @keyframes meshFloat {
          0%, 100% { transform: translate(0,0) scale(1); }
          50%      { transform: translate(40px, -30px) scale(1.08); }
        }
        .mesh-noise {
          position: absolute; inset: 0;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
          opacity: 0.35; mix-blend-mode: overlay;
        }
        .hero-vignette2 {
          position: absolute; inset: 0;
          background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
        }
      `}</style>
    </div>
  );
}

function HeroStatusChip() {
  return (
    <div className="status-chip">
      <span className="live-dot"/>
      <span>Booking pilots — Q2 2026</span>
      <span className="divider"/>
      <span className="mono">3 slots</span>
      <style>{`
        .status-chip {
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 12.5px; color: var(--text-3);
          padding: 6px 12px 6px 10px;
          border: 1px solid var(--border-2);
          border-radius: 999px;
          background: color-mix(in oklab, var(--surface) 70%, transparent);
          backdrop-filter: blur(8px);
        }
        .live-dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 8px var(--accent-glow);
          position: relative;
        }
        .live-dot::after {
          content: ""; position: absolute; inset: -3px;
          border-radius: 50%;
          border: 1px solid var(--accent);
          animation: livePulse 1.8s ease-out infinite;
        }
        @keyframes livePulse {
          0%   { transform: scale(0.6); opacity: 0.8; }
          100% { transform: scale(1.8); opacity: 0; }
        }
        .divider { width: 1px; height: 10px; background: var(--border-2); }
        .status-chip .mono { font-size: 10.5px; letter-spacing: 0.1em; }
      `}</style>
    </div>
  );
}

/* A miniature terminal/architecture card shown to the right of the hero */
function HeroArtifact() {
  return (
    <div className="art-card reveal">
      <div className="art-head">
        <span className="art-dot"/>
        <span className="art-dot art-dot--y"/>
        <span className="art-dot art-dot--g"/>
        <span className="art-title mono">agent · orchestration.ts</span>
        <span className="art-badge mono">LIVE</span>
      </div>
      <div className="art-body">
        <div className="art-line"><span className="art-num">01</span><span className="art-kw">const</span> <span className="art-var">graph</span> = <span className="art-kw">new</span> <span className="art-cls">LangGraph</span>({'{'}</div>
        <div className="art-line"><span className="art-num">02</span>  <span className="art-var">name</span>: <span className="art-str">'incident-triage'</span>,</div>
        <div className="art-line"><span className="art-num">03</span>  <span className="art-var">nodes</span>: [<span className="art-str">'classify'</span>, <span className="art-str">'enrich'</span>, <span className="art-str">'route'</span>],</div>
        <div className="art-line"><span className="art-num">04</span>  <span className="art-var">tools</span>: [<span className="art-cls">Slack</span>, <span className="art-cls">PagerDuty</span>, <span className="art-cls">Pinecone</span>]</div>
        <div className="art-line"><span className="art-num">05</span>{'}'})</div>
        <div className="art-line art-line--dim"><span className="art-num">06</span></div>
        <div className="art-line"><span className="art-num">07</span><span className="art-cmt">// avg. resolution: 12m → 2m, p50</span></div>
      </div>
      <div className="art-foot">
        <span className="tag tag-dot">AGENT RUNNING</span>
        <span className="mono art-metric">p50 · 2.1s <span className="art-metric-sep">/</span> 99.2% task completion</span>
      </div>
      <style>{`
        .art-card {
          position: relative;
          background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
          border: 1px solid var(--border-2);
          border-radius: 14px;
          overflow: hidden;
          box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset;
        }
        .art-card::before {
          content: ""; position: absolute; inset: 0;
          background: linear-gradient(135deg, var(--accent-soft), transparent 40%);
          pointer-events: none;
        }
        .art-head {
          display: flex; align-items: center; gap: 8px;
          padding: 12px 16px;
          border-bottom: 1px solid var(--border);
        }
        .art-dot { width: 10px; height: 10px; border-radius: 50%; background: #3F3F46; }
        .art-dot--y { background: #52525b; }
        .art-dot--g { background: #52525b; }
        .art-title { margin-left: 8px; font-size: 11.5px; color: var(--text-3); }
        .art-badge {
          margin-left: auto;
          font-size: 10px; letter-spacing: 0.14em;
          color: var(--accent);
          padding: 3px 8px;
          border-radius: 4px;
          background: var(--accent-soft);
          border: 1px solid var(--accent-line);
        }
        .art-body {
          padding: 18px 16px;
          font-family: var(--font-mono);
          font-size: 12.5px;
          line-height: 1.9;
          color: var(--text-2);
        }
        .art-line { white-space: pre; }
        .art-line--dim { opacity: 0.4; }
        .art-num { display: inline-block; width: 28px; color: var(--text-4); user-select: none; }
        .art-kw { color: #c4b5fd; }
        .art-var { color: var(--text); }
        .art-cls { color: var(--accent); }
        .art-str { color: #fda4af; }
        .art-cmt { color: var(--text-4); font-style: italic; }
        .art-foot {
          display: flex; align-items: center; justify-content: space-between;
          gap: 12px; padding: 12px 16px;
          border-top: 1px solid var(--border);
          background: color-mix(in oklab, var(--bg) 60%, transparent);
        }
        .art-metric { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.06em; }
        .art-metric-sep { color: var(--border-3); margin: 0 4px; }
      `}</style>
    </div>
  );
}

function Hero({ bgVariant, headlineVariant }) {
  const headlines = {
    a: [<>We ship production AI.</>, <>Not prototypes.</>],
    b: [<>Agents that do the work.</>, <>Not demos.</>],
    c: [<>Senior engineers.</>, <>AI that actually ships.</>],
  };
  const h = headlines[headlineVariant] || headlines.a;

  return (
    <section className="hero" id="top" aria-label="Hero">
      {bgVariant === "mesh" ? <HeroBgMesh/> : <HeroBgGrid/>}
      <div className="container hero-inner">
        <div className="hero-left">
          <div className="reveal hero-chip-row">
            <HeroStatusChip/>
          </div>
          <div className="mono hero-eyebrow reveal"><span className="mono-accent">◆</span> AI-NATIVE DEVELOPMENT STUDIO</div>
          <h1 className="hero-h1 reveal">
            <span>{h[0]}</span>
            <span className="hero-h1-b">{h[1]}</span>
          </h1>
          <p className="hero-sub reveal">
            We build agents, RAG systems, and voice AI for US companies — designed for production, not pitch decks.
          </p>
          <div className="hero-ctas reveal">
            <a href="contact.html" className="btn btn-primary">
              Book a discovery call <I.Arrow/>
            </a>
            <a href="#work" className="btn btn-ghost">
              See our work <I.Arrow/>
            </a>
          </div>
          <div className="hero-meta reveal">
            <div>
              <div className="mono">BASED</div>
              <div className="hero-meta-v">Jersey City, NJ</div>
            </div>
            <div>
              <div className="mono">DELIVERY</div>
              <div className="hero-meta-v">Surat, India</div>
            </div>
            <div>
              <div className="mono">FOUNDED</div>
              <div className="hero-meta-v">2024</div>
            </div>
          </div>
        </div>
        <div className="hero-right">
          <HeroArtifact/>
        </div>
      </div>
      <a className="scroll-cue mono" href="#services" aria-label="Scroll to services">
        <span>01 — Services</span>
        <span className="scroll-arrow">↓</span>
      </a>
      <style>{`
        .hero {
          position: relative;
          min-height: 92vh;
          display: flex;
          align-items: center;
          padding-top: 48px;
          padding-bottom: 120px;
        }
        .hero-inner {
          position: relative; z-index: 2;
          display: grid;
          grid-template-columns: 1.15fr 0.85fr;
          gap: 72px;
          align-items: center;
          width: 100%;
        }
        .hero-chip-row { margin-bottom: 28px; }
        .hero-eyebrow { margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
        .hero-eyebrow .mono-accent { font-size: 9px; }
        .hero-h1 { display: flex; flex-direction: column; gap: 4px; }
        .hero-h1-b { color: var(--text-3); }
        .hero-sub {
          margin-top: 28px;
          font-size: clamp(17px, 1.5vw, 21px);
          line-height: 1.55;
          color: var(--text-2);
          max-width: 520px;
        }
        .hero-ctas {
          display: flex; gap: 12px; flex-wrap: wrap;
          margin-top: 36px;
        }
        .hero-meta {
          display: grid;
          grid-template-columns: repeat(3, auto);
          gap: 56px;
          margin-top: 72px;
          padding-top: 28px;
          border-top: 1px solid var(--border);
          max-width: 520px;
        }
        .hero-meta .mono { font-size: 10px; margin-bottom: 6px; }
        .hero-meta-v { font-size: 14.5px; color: var(--text); font-weight: 500; letter-spacing: -0.01em; }
        .hero-right { justify-self: end; width: 100%; max-width: 460px; }
        .scroll-cue {
          position: absolute; left: var(--pad-x); bottom: 32px; z-index: 2;
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 11px; color: var(--text-3);
        }
        .scroll-arrow {
          display: inline-block;
          animation: scrollBounce 2s ease-in-out infinite;
        }
        @keyframes scrollBounce {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(4px); }
        }
        @media (max-width: 960px) {
          .hero-inner { grid-template-columns: 1fr; gap: 56px; }
          .hero-right { justify-self: stretch; max-width: 100%; }
          .hero-meta { gap: 32px; }
        }
        @media (max-width: 540px) {
          .hero-meta { grid-template-columns: repeat(3, 1fr); gap: 16px; }
          .scroll-cue { display: none; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero });