/* hero.jsx — §1 synthesizer hero, 3 live variants + headline treatments.
   Uses: ACore, Shards, BrandMark, Arrow, Callout (from depth.jsx). */

/* shared hook: subscribe to a media query, sync first-render so no flash */
function useMediaQuery(query){
  const get = () => typeof window!=='undefined' && window.matchMedia && window.matchMedia(query).matches;
  const [matches, setMatches] = React.useState(get);
  React.useEffect(()=>{
    if(typeof window==='undefined' || !window.matchMedia) return;
    const mql = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);
    if(mql.addEventListener) mql.addEventListener('change', handler);
    else mql.addListener(handler);
    setMatches(mql.matches);
    return ()=>{
      if(mql.removeEventListener) mql.removeEventListener('change', handler);
      else mql.removeListener(handler);
    };
  },[query]);
  return matches;
}

function HeroNav(){
  return (
    <div className="nav3">
      <a className="brand3" href="/"><BrandMark size={24}/><span>Arbiter<span className="dot">.</span></span></a>
      <div className="navlinks">
        <a href="#network-teaser">Arbiter Network</a>
        <a href="#resources">Resources</a>
        <a className="ncta" href="#schedule">Book a call</a>
      </div>
    </div>
  );
}

function HeroCopy(){
  return (
    <React.Fragment>
      <h1 className="h-extrude-teal">Add <span className="under-bright">millions</span> to your bottom line. Every year.</h1>
      <p className="hero-sub">Strategies you can implement this quarter, without touching sales or headcount.</p>
      <div className="hero-ctas">
        <a className="btn-primary" href="#schedule"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><rect x="2" y="3" width="12" height="11" rx="2"/><path d="M2 6h12M6 2v2M10 2v2"/></svg>Book a call</a>
        <a className="btn-secondary" href="#how-it-works"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M5 3.5v9l8-4.5z"/></svg>See how it works</a>
      </div>
      <div className="trust">
        <div className="kick"><span className="live-dot"></span>Network Preview</div>
        <div className="stats">
          <span>1,200+ competitive PEO bids delivered</span><span className="d"></span>
          <span>$2B+ recovered in tax credits</span><span className="d"></span>
          <span>5th largest captive manager in the US</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function HeroShell({children, coreSize=92, inflowSeed=11, inflowCount=16}){
  return (
    <div className="ag ag-dark ag-tex hero3">
      {/* ambient far shards across whole hero */}
      <Shards seed={inflowSeed+50} count={12} zone="full" intensity={60}/>
      <HeroNav/>
      {/* left chaos inflow */}
      <div className="synth-in"><Shards seed={inflowSeed} count={inflowCount} zone="inflow" region={[0,12,72,76]} intensity={64}/></div>
      {/* horizontal stream */}
      <div className="synth-stream" style={{top:'42%'}}></div>
      {/* right output (variant-specific) */}
      {children}
      {/* centered message */}
      <div className="hero3-col">
        <div style={{marginBottom:'.2rem'}}><ACore size={coreSize}/></div>
        <HeroCopy/>
      </div>
    </div>
  );
}

/* ---------- Variant 1 · CONSTELLATION (primary) — gravity river + savings nodes ---------- */
const RIVER_C={lanes:11, perLane:12, sizeMin:10, sizeMax:40, speed:0.58, seed:14, weight:'mid'};
const HNODES=[
  {x:60,y:17, t:'R&D Tax Credits Recovered', v:'$1.5M'},
  {x:67,y:33, t:'Health Ins. Premiums Reduction', v:'\u221215%'},
  {x:63,y:50, t:'Hospital + Surgery Bill Repricing', v:'\u221234%'},
  {x:67,y:67, t:'Payroll Tax Reduction', v:'$750/PEPY'},
  {x:60,y:83, t:'Workers Comp Reduction', v:'\u221225%'},
];
const HFIN={x:87,y:50};
const HSX=v=>v*1.72;   // viewBox 172×100 keeps the blip packets round

/* dispatcher — phone gets HeroConstellationMobile, everything else gets desktop */
function HeroConstellation(){
  const isMobile = useMediaQuery('(max-width: 768px)');
  return isMobile ? <HeroConstellationMobile/> : <HeroConstellationDesktop/>;
}

function HeroConstellationMobile(){
  return (
    <div className="ag ag-dark ag-tex" style={{position:'relative',padding:'4.5rem 1.1rem 3rem',minHeight:'100vh',display:'flex',flexDirection:'column',alignItems:'center',gap:'1.4rem',overflow:'hidden',textAlign:'center'}}>
      <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'1rem',marginTop:'1.5rem',position:'relative',zIndex:5,width:'100%'}}>
        <h1 className="h-extrude-teal" style={{fontSize:'2.35rem',lineHeight:1.05,textAlign:'center',margin:0}}>Add <span className="under-bright">millions</span> to your bottom line. Every year.</h1>
        <p style={{fontSize:'1rem',color:'rgba(238,242,241,.8)',maxWidth:'30ch',lineHeight:1.45,margin:0}}>Strategies you can implement this quarter. Savings you can count on every year.</p>
        <div style={{display:'flex',gap:'.65rem',flexWrap:'wrap',justifyContent:'center',marginTop:'.3rem'}}>
          <a className="btn-teal" href="#schedule"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><rect x="2" y="3" width="12" height="11" rx="2"/><path d="M2 6h12M6 2v2M10 2v2"/></svg>Book a call</a>
          <a className="btn-secondary" href="#how-it-works"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M5 3.5v9l8-4.5z"/></svg>See how it works</a>
        </div>
      </div>
      <div style={{margin:'.6rem 0 .2rem',position:'relative',zIndex:4}}><ACore size={68} depth={5}/></div>
      <div style={{display:'flex',flexDirection:'column',gap:'.55rem',width:'100%',maxWidth:'380px',position:'relative',zIndex:4}}>
        {HNODES.map((n,i)=>(
          <div key={i} className="lg-dark no-sheen" style={{position:'relative',padding:'.7rem .95rem .7rem 1.5rem',borderRadius:'11px',display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:'.6rem',textAlign:'left'}}>
            <span style={{position:'absolute',left:'.55rem',top:'50%',transform:'translateY(-50%)',width:'8px',height:'8px',borderRadius:'50%',background:'var(--teal-bright)',boxShadow:'0 0 9px var(--teal-bright)'}}></span>
            <div style={{fontFamily:"'Geist Mono',monospace",fontSize:'.6rem',letterSpacing:'.03em',textTransform:'uppercase',color:'var(--teal-bright)',lineHeight:1.3,flex:1,paddingRight:'.5rem'}}>{n.t}</div>
            <div style={{fontSize:'1.05rem',fontWeight:600,color:'#f4f7f6',letterSpacing:'-.01em',fontVariantNumeric:'tabular-nums',lineHeight:1,flexShrink:0}}>{n.v}</div>
          </div>
        ))}
      </div>
      <div className="lg-dark no-sheen" style={{position:'relative',width:'100%',maxWidth:'380px',padding:'1.25rem 1.4rem',borderRadius:'15px',display:'flex',flexDirection:'column',alignItems:'center',gap:'.32rem',zIndex:4,boxShadow:'0 18px 50px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(180,255,240,.34),inset 0 -12px 30px -14px rgba(31,195,167,.34),0 0 0 1px rgba(31,195,167,.4)'}}>
        <div style={{fontFamily:"'Geist Mono',monospace",fontSize:'.62rem',letterSpacing:'.05em',textTransform:'uppercase',color:'var(--teal-bright)'}}>Projected Year 1 Savings</div>
        <div style={{fontSize:'2.4rem',fontWeight:700,color:'#f4f7f6',letterSpacing:'-.02em',fontVariantNumeric:'tabular-nums',lineHeight:1}}>$8.64M</div>
        <div style={{fontFamily:"'Geist Mono',monospace",fontSize:'.56rem',color:'rgba(238,242,241,.55)',marginTop:'.15rem'}}>four strategies, compounded</div>
      </div>
    </div>
  );
}

function HeroConstellationDesktop(){
  const hub={x:46,y:50};
  return (
    <div className="ag ag-dark ag-tex hero3 hero3-grav">
      <HeroNav/>
      <GravityRiver {...RIVER_C} apex={[hub.x,hub.y]}/>

      <svg className="netfield" viewBox="0 0 172 100" preserveAspectRatio="none">
        {HNODES.map((n,i)=>(<line key={'a'+i} x1={HSX(hub.x)} y1={hub.y} x2={HSX(n.x)} y2={n.y} stroke="#1a8f7e" strokeWidth="1" opacity="0.4" vectorEffect="non-scaling-stroke"/>))}
        {HNODES.map((n,i)=>(<line key={'f'+i} x1={HSX(n.x)} y1={n.y} x2={HSX(HFIN.x)} y2={HFIN.y} stroke="#1a8f7e" strokeWidth="1" opacity="0.26" vectorEffect="non-scaling-stroke"/>))}
        {/* one continuous glowing streak (reads as the line brightening): A -> node -> final */}
        {HNODES.map((n,i)=>(
          <g key={'pk'+i} style={{filter:'drop-shadow(0 0 2.6px #1fc3a7)'}}>
            <rect x="-1.05" y="-0.12" width="2.1" height="0.24" rx="0.12" fill="#dffff8"/>
            <animateMotion dur="5.5s" repeatCount="indefinite" begin="0s" rotate="auto" path={`M${HSX(hub.x)} ${hub.y} L${HSX(n.x)} ${n.y} L${HSX(HFIN.x)} ${HFIN.y}`}/>
          </g>
        ))}
      </svg>

      <div className="hero-hub"><div className="gring"></div><div className="gring r2"></div><ACore size={104}/></div>

      {HNODES.map((n,i)=>(
        <div key={'n'+i} className="snode lg-dark no-sheen" style={{left:`${n.x}%`,top:`${n.y}%`}}>
          <span className="snode-dot"></span><div className="st">{n.t}</div><div className="sv">{n.v}</div>
        </div>
      ))}
      <div className="sfinal lg-dark no-sheen" style={{left:`${HFIN.x}%`,top:`${HFIN.y}%`}}>
        <div className="st">Projected Year 1 Savings</div><div className="sv">$8.64M</div>
      </div>

      <div className="hero-left">
        <h1 className="h-extrude-teal">Add <span className="under-bright">millions</span> to your bottom line. Every year.</h1>
        <p className="hero-sub">Strategies you can implement this quarter. Savings you can count on every year.</p>
        <div className="hero-ctas">
          <a className="btn-teal" href="#schedule"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><rect x="2" y="3" width="12" height="11" rx="2"/><path d="M2 6h12M6 2v2M10 2v2"/></svg>Book a call</a>
          <a className="btn-secondary" href="#how-it-works"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M5 3.5v9l8-4.5z"/></svg>See how it works</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Variant 2 · BANNER-LITERAL (grid output) ---------- */
function HeroBanner(){
  const cells=Array.from({length:30});
  return (
    <HeroShell inflowSeed={21} inflowCount={12}>
      <div className="synth-out">
        <div className="ogrid">
          {cells.map((_,i)=>(<div key={i} className="ocell" style={{animationDelay:`${(i%5)*0.12+Math.floor(i/5)*0.06}s`}}></div>))}
        </div>
        <Callout label="Output" value="Ordered" sub="taxes · insurance · payroll" style={{right:'9%',top:'13%',transform:'scale(.9)'}}/>
      </div>
    </HeroShell>
  );
}

/* ---------- Variant 3 · ABSTRACT BEAM ---------- */
function HeroBeam(){
  return (
    <HeroShell inflowSeed={31} inflowCount={11}>
      <div className="synth-out">
        <svg viewBox="0 0 400 500" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
          <defs>
            <linearGradient id="beamg" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stopColor="#1fc3a7" stopOpacity="0"/><stop offset="1" stopColor="#6ff0d8" stopOpacity="1"/></linearGradient>
          </defs>
          {/* main beam */}
          <rect x="20" y="247" width="360" height="6" rx="3" fill="url(#beamg)" style={{filter:'drop-shadow(0 0 12px rgba(31,195,167,.7))'}}/>
          {/* fan of diverging lines on the right */}
          {[-120,-60,0,60,120].map((dy,i)=>(
            <line key={i} x1="250" y1="250" x2="400" y2={250+dy} stroke="#1a8f7e" strokeWidth="1" opacity="0.4"/>
          ))}
          {/* traveling glow packets along the beam */}
          {[0,1,2].map(i=>(
            <circle key={i} r="4.5" fill="#bdfff0" style={{filter:'drop-shadow(0 0 6px #1fc3a7)'}}>
              <animateMotion dur="2.4s" repeatCount="indefinite" begin={`${-i*0.8}s`} path="M20 250 L380 250"/>
            </circle>
          ))}
          {[-120,-60,0,60,120].map((dy,i)=>(
            <circle key={'f'+i} r="2.4" fill="#bdfff0">
              <animateMotion dur={`${1.8+i*0.3}s`} repeatCount="indefinite" begin={`${-i*0.3}s`} path={`M250 250 L400 ${250+dy}`}/>
            </circle>
          ))}
        </svg>
        <Callout label="Clarity" value="Teal output" style={{right:'10%',top:'15%',transform:'scale(.86)'}}/>
      </div>
    </HeroShell>
  );
}

/* ---------- Headline treatment options ---------- */
function HeadlineTreatments(){
  return (
    <div className="ag ag-dark ag-tex htreat">
      <div className="hopt">
        <span className="tlabel">A · Teal letterpress extrude (recommended for hero)</span>
        <h1 className="h-extrude-teal">Add <span className="under-bright">millions</span> to your bottom line.</h1>
      </div>
      <div className="hopt">
        <span className="tlabel">B · Gradient fill across letterforms</span>
        <h1 className="h-gradient">Add millions to your bottom line.</h1>
      </div>
      <div className="hopt htreat-outline">
        <span className="tlabel">C · Outline + filled keyword</span>
        <h1>Add <span className="tw">millions</span> to your bottom line.</h1>
      </div>
    </div>
  );
}

Object.assign(window,{useMediaQuery,HeroConstellation,HeroConstellationDesktop,HeroConstellationMobile,HeroBanner,HeroBeam,HeadlineTreatments});