/* sec23.jsx — §2 Methodology (A/B) + §3 Network (A/B).
   Reading sections: paper atmosphere, medium parallax shards, dimensional surfaces. */

function SecHead({num, title, lead, dark}){
  return (
    <div className="sec-head">
      <h2 className={dark?'h-gradient':null}>{title}</h2>
      {lead&&<p className="lead" style={dark?{color:'rgba(238,242,241,.7)'}:null}>{lead}</p>}
    </div>
  );
}

/* icons */
const IcoProfile=()=>(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.6"/><path d="M5 21c0-3.9 3.1-6.5 7-6.5s7 2.6 7 6.5"/></svg>);
const IcoNet=()=>(<svg viewBox="0 0 24 24" fill="none"><line x1="6" y1="6" x2="18" y2="9" stroke="currentColor" strokeWidth="1.3" opacity=".7"/><line x1="18" y1="9" x2="8" y2="18" stroke="currentColor" strokeWidth="1.3" opacity=".7"/><line x1="8" y1="18" x2="6" y2="6" stroke="currentColor" strokeWidth="1.3" opacity=".7"/><circle cx="6" cy="6" r="2.3" fill="currentColor"/><circle cx="18" cy="9" r="2.3" fill="currentColor"/><circle cx="8" cy="18" r="2.3" fill="currentColor"/><circle cx="19" cy="19" r="1.7" fill="currentColor"/></svg>);
const IcoDoc=()=>(<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 16l2.5-2.5 2 2 3-3.5"/></svg>);

function Clink(){
  return (
    <div className="clink" aria-hidden="true">
      <svg viewBox="0 0 60 44" preserveAspectRatio="none">
        <line className="cline" x1="2" y1="22" x2="58" y2="22"/>
        <circle className="cpacket-glow" r="5"><animateMotion dur="2.4s" repeatCount="indefinite" path="M2 22 L58 22"/></circle>
        <circle className="cpacket" r="2.6"><animateMotion dur="2.4s" repeatCount="indefinite" path="M2 22 L58 22"/></circle>
      </svg>
    </div>
  );
}

/* ---------- §2 A · horizontal circuit ---------- */
function MethodologyCircuit(){
  return (
    <div className="ag ag-paper-soft ag-tex-dark sec">
      <Shards seed={42} count={6} zone="full" region={[68,8,30,84]} intensity={42}/>
      <SecHead num="§ 02 · Methodology" title="Three steps to discover where your company is leaving millions on the table." lead="Most of it hides in two places: taxes and insurance."/>
      <div className="circuit">
        <div className="cnode">
          <div className="cico"><IcoProfile/></div>
          <span className="cstep">Step one</span>
          <h3>Build your profile</h3>
          <p>Spend 20 minutes with an advisor identifying your fixed costs.</p>
        </div>
        <Clink/>
        <div className="cnode">
          <div className="cico"><IcoNet/></div>
          <span className="cstep">Step two</span>
          <h3>Unlock the Network</h3>
          <p>Based on your opportunity profile, your information is securely routed through our industry-leading partner network.</p>
        </div>
        <Clink/>
        <div className="cnode">
          <div className="cico"><IcoDoc/></div>
          <span className="cstep">Step three</span>
          <h3>Findings</h3>
          <p>Research findings are consolidated into one report with real profitability increase projections.</p>
        </div>
      </div>
      <div className="sec-cta"><a className="btn-primary" href="#schedule">Build your profile <Arrow/></a></div>
    </div>
  );
}

/* ---------- §2 B · vertical descending signal ---------- */
function MethodologyDescend(){
  const steps=[
    {n:'01',t:'Create Opportunity Profile',b:'Spend 20 minutes with an advisor identifying your fixed costs.',ico:<IcoProfile/>},
    {n:'02',t:'Unlock the Network',b:'Based on your opportunity profile, your information is securely routed through our industry-leading partner network for further review.',ico:<IcoNet/>},
    {n:'03',t:'Findings',b:'Research findings are consolidated into one report that includes your projected profitability increase.',ico:<IcoDoc/>},
  ];
  return (
    <div className="ag ag-paper-soft ag-tex-dark sec">
      <Shards seed={43} count={6} zone="full" region={[68,8,30,84]} intensity={42}/>
      <SecHead num="§ 02 · Methodology" title="Stop leaving millions on the table." lead="Three steps required for your first savings projection"/>
      <div className="descend">
        <div className="desc-inner">
          <div className="desc-rail"><span className="desc-pk"></span></div>
          {steps.map((s,i)=>(
            <div className="dlayer" key={i}>
              <span className="dnum">{s.n}</span>
              <div className="cico" style={{flex:'0 0 auto'}}>{s.ico}</div>
              <div><h3>{s.t}</h3><p>{s.b}</p></div>
            </div>
          ))}
        </div>
      </div>
      <div className="sec-cta" style={{textAlign:'center'}}><a className="btn-primary" href="#schedule">Start your profile <Arrow/></a></div>
    </div>
  );
}

/* ---------- §3 partner data ----------
   Front-of-card stat = credibility (what gives them authority — scannable).
   Details popover body = SAVINGS BULLETS ONLY (what the visitor came for, easy to scan).
   Voice-rule compliant: past-tense / typical-average framing, never forward-promising. */
const PARTNERS=[
  {slug:'synrgy',  name:'Powered by Synrgy Health',              dom:'Hospital indemnity + preventative care',
   stat:'First AI-powered plan in the U.S.',
   body:[
     '$600 to $800 payroll tax savings per employee per year',
     '15 to 17% workers’ comp reduction',
     '5 to 10% major medical utilization drop',
   ]},
  {slug:'bestfit', name:'Powered by BestFit Solutions',           dom:'PEO + Payroll/HR',
   stat:'1,200+ competitive bids delivered',
   body:[
     '$4,500 average annual savings per employee for clients who switched PEOs',
     'Savings span admin, payroll taxes, and insurance lines',
   ]},
  {slug:'rma',     name:'Powered by Risk Management Advisors',    dom:'Insurance + claims management',
   stat:'5th largest captive manager in the U.S.',
   body:[
     '~20% reduction in premium costs',
     '40 to 70% reduction on large claims via advanced billing strategies',
   ]},
  {slug:'aia',     name:'Powered by American Incentive Advisors', dom:'Tax credits + tax strategy',
   stat:'$2B+ in tax credits recovered',
   body:[
     'R&D tax credits: typical recovery 6 to 10% of qualified research expenses',
     'Cost segregation savings on real estate (accelerated depreciation)',
     'Energy deductions (179D / 45L) where eligible',
   ]},
];

/* ---------- §3 dispatcher — phone gets stack, desktop gets constellation ---------- */
function NetworkConstellation(){
  const isMobile = useMediaQuery('(max-width: 768px)');
  return isMobile ? <NetworkConstellationMobile/> : <NetworkConstellationDesktop/>;
}

/* ---------- §3 mobile · stacked partner cards with savings bullets visible ---------- */
function NetworkConstellationMobile(){
  return (
    <div className="ag ag-dark sec ag-tex" style={{position:'relative',padding:'2.4rem 1.1rem 2.6rem'}}>
      <SecHead num="§ 03 · The Network" title="The Engine." lead="Skip the guesswork. Get straight to the savings." dark={true}/>
      <div style={{display:'flex',flexDirection:'column',gap:'.85rem',marginTop:'.4rem'}}>
        {PARTNERS.map((p,i)=>(
          <a key={i} href={`#schedule-${p.slug}`} style={{textDecoration:'none',display:'block'}}>
            <div className="pcard-mini lg-dark" style={{padding:'1.15rem 1.2rem 1.05rem',textAlign:'left',borderRadius:'13px',display:'flex',flexDirection:'column',gap:'.55rem',position:'relative'}}>
              <div style={{position:'relative',zIndex:2,fontFamily:"'Geist Mono',monospace",fontSize:'.62rem',color:'var(--teal-bright)',letterSpacing:'.04em',textTransform:'uppercase',fontWeight:600,display:'flex',alignItems:'center'}}>
                <span style={{display:'inline-block',width:'6px',height:'6px',borderRadius:'50%',background:'var(--teal-bright)',boxShadow:'0 0 5px rgba(31,195,167,.6)',marginRight:'.45rem',flexShrink:0}}></span>
                {p.name}
              </div>
              <div style={{position:'relative',zIndex:2,fontSize:'.74rem',color:'rgba(238,242,241,.62)',fontStyle:'italic'}}>{p.dom}</div>
              <div style={{position:'relative',zIndex:2,fontSize:'1.02rem',fontWeight:600,color:'#eafdf8',lineHeight:1.3,letterSpacing:'-.01em'}}>{p.stat}</div>
              {p.body && p.body.length>0 && (
                <ul style={{position:'relative',zIndex:2,margin:'.25rem 0 0',padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:'.4rem'}}>
                  {p.body.map((b,j)=>(
                    <li key={j} style={{display:'flex',gap:'.55rem',alignItems:'flex-start',fontSize:'.82rem',lineHeight:1.45,color:'rgba(238,242,241,.82)'}}>
                      <span style={{color:'var(--teal-bright)',fontWeight:700,flexShrink:0,marginTop:'-.02rem'}}>•</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              )}
              <div style={{position:'relative',zIndex:2,fontFamily:"'Geist Mono',monospace",fontSize:'.6rem',color:'var(--teal-bright)',letterSpacing:'.06em',textTransform:'uppercase',marginTop:'.4rem',display:'flex',alignItems:'center',gap:'.3rem',opacity:.85}}>
                Speak to an expert <span aria-hidden="true">→</span>
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="sec-cta" style={{textAlign:'center',marginTop:'1.4rem'}}>
        <a className="btn-primary" href="#schedule">Speak to an expert <Arrow/></a>
      </div>
    </div>
  );
}

/* ---------- §3 A · constellation (dark canvas, desktop) ---------- */
function NetworkConstellationDesktop(){
  // node anchor points (% of canvas) for the 4 partners around a central hub
  const pos=[{x:30,y:31},{x:70,y:30},{x:72,y:69},{x:28,y:70}];
  // push each tile OUT just enough that its inner corner meets the connector node
  const TF=['translate(-86%,-76%)','translate(-14%,-76%)','translate(-14%,-24%)','translate(-86%,-24%)'];
  return (
    <div className="ag ag-paper sec ag-tex-dark">
      <SecHead num="§ 03 · The Network" title="The Engine." lead="Skip the guesswork. Get straight to the savings."/>
      <div className="netcanvas">
        <svg className="nsvg" viewBox="0 0 1000 460" preserveAspectRatio="none">
          {pos.map((p,i)=>{const f=0.8;const ex=500+f*(p.x*10-500);const ey=230+f*(p.y*4.6-230);return(<line key={i} className="glink" x1="500" y1="230" x2={ex} y2={ey}/>);})}
          {/* packets synced: all leave the A together and reach the line ends together */}
          {pos.map((p,i)=>{const f=0.8;const ex=500+f*(p.x*10-500);const ey=230+f*(p.y*4.6-230);return(
            <g key={'pk'+i} style={{filter:'drop-shadow(0 0 3px #1fc3a7)'}}>
              <rect x="-4.5" y="-0.6" width="9" height="1.2" rx="0.6" fill="#dffff8"/>
              <animateMotion dur="5s" repeatCount="indefinite" begin="0s" rotate="auto" path={`M500 230 L${ex} ${ey}`}/>
            </g>
          );})}
        </svg>
        <div className="hubnode"><ACore size={62} depth={6}/></div>
        {PARTNERS.map((p,i)=>(
          <div className={'pnode'+(pos[i].y>50?' pbottom':'')} key={i} tabIndex={0} style={{left:`${pos[i].x}%`,top:`${pos[i].y}%`,transform:TF[i]}}>
            <div className="pcard-mini lg-dark" style={{textAlign:'left',padding:'.95rem 1.1rem'}}>
              <div className="pname" style={{position:'relative',zIndex:2,marginBottom:'.3rem'}}><span className="pbull"></span>{p.name}</div>
              <div className="pdom" style={{position:'relative',zIndex:2,marginBottom:'.5rem'}}>{p.dom}</div>
              <div className="pstat">{p.stat}</div>
              {p.body && <a className="pmore" href={`#schedule-${p.slug}`}>Details <span aria-hidden="true">+</span></a>}
            </div>
            {p.body && p.body.length>0 && (
              <div className="pinfo">
                <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:'.45rem'}}>
                  {p.body.map((b,i)=>(
                    <li key={i} style={{display:'flex',gap:'.55rem',alignItems:'flex-start',fontSize:'.82rem',lineHeight:1.45}}>
                      <span style={{color:'var(--teal)',fontWeight:700,flexShrink:0,marginTop:'-.05rem'}}>•</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        ))}
      </div>
      <div className="sec-cta" style={{textAlign:'center',marginTop:'.5rem'}}><a className="btn-primary" href="#schedule">Speak to an expert <Arrow/></a></div>
    </div>
  );
}

/* ---------- §3 B · live control panel (glass modules + connectors) ---------- */
function NetworkPanel(){
  return (
    <div className="ag ag-paper-glow sec ag-tex-dark">
      <Shards seed={52} count={7} zone="full" intensity={50}/>
      <SecHead num="§ 03 · The Network" title="The Engine." lead="Skip the guesswork. We only bring the best."/>
      <div style={{flex:1,position:'relative'}}>
        {/* connector lines behind modules */}
        <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',zIndex:1}} viewBox="0 0 100 100" preserveAspectRatio="none">
          <line x1="50" y1="50" x2="26" y2="26" stroke="var(--teal)" strokeWidth="0.25" opacity="0.4"/>
          <line x1="50" y1="50" x2="74" y2="26" stroke="var(--teal)" strokeWidth="0.25" opacity="0.4"/>
          <line x1="50" y1="50" x2="26" y2="74" stroke="var(--teal)" strokeWidth="0.25" opacity="0.4"/>
          <line x1="50" y1="50" x2="74" y2="74" stroke="var(--teal)" strokeWidth="0.25" opacity="0.4"/>
          <circle cx="50" cy="50" r="1.1" fill="var(--teal)"/>
        </svg>
        <div className="panelgrid">
          {PARTNERS.map((p,i)=>(
            <div className="pmod lg" key={i}>
              <div className="spark">{[0,1,2,3].map(b=>(<i key={b} style={{animationDelay:`${b*0.18+i*0.1}s`}}></i>))}</div>
              <span className="powered-by" style={{position:'relative',zIndex:2}}>{p.name}</span>
              <div className="pdom" style={{position:'relative',zIndex:2}}>{p.dom}</div>
              <p style={{position:'relative',zIndex:2}}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="sec-cta" style={{textAlign:'center'}}><a className="btn-link" href="#cascade">See it in action <Arrow w={13}/></a></div>
    </div>
  );
}

Object.assign(window,{SecHead,MethodologyCircuit,MethodologyDescend,NetworkConstellation,NetworkConstellationDesktop,NetworkConstellationMobile,NetworkPanel,PARTNERS,Arrow});