// Technical Architecture page — the centerpiece. Block diagram, pipeline flow,
// NAICS-vs-FPDS comparison, system architecture, data corpora, roadmap.

const ArchHero = () => (
  <section style={{paddingTop:168, paddingBottom:80, background:'#fff', position:'relative', overflow:'hidden'}}>
    <div className="grid-pattern" style={{position:'absolute', inset:0, opacity:0.5}}/>
    <div style={{position:'absolute', top:'-10%', right:'-10%', width:600, height:600, background:'#EFF6FF', borderRadius:'50%', filter:'blur(120px)', opacity:0.6}}/>
    <div className="container" style={{position:'relative'}}>
      <div style={{display:'flex', gap:10, marginBottom:22}}>
        <Chip>Technical Architecture</Chip>
        <Chip live>v2.2 · Phase 1 training</Chip>
      </div>
      <h1 className="display" style={{maxWidth:1040, marginBottom:24}}>
        Under the hood of an <span className="accent">evidence substrate</span>.
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        FPDS is not a dashboard on top of USASpending. It's a purpose-built pipeline: three corpora, aligned on a shared embedding space, temporally modeled, and scored against calibrated evidence weights — end-to-end.
      </p>
      <div style={{marginTop:48, display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:24, paddingTop:32, borderTop:'1px solid var(--slate-200)'}}>
        {[
          {n:'3', l:'CORPORA'}, {n:'35', l:'DEPARTMENTS'}, {n:'1,501', l:'THEMES'}, {n:'10', l:'SIGNAL CLASSES'}, {n:'20yr', l:'LIFECYCLE DEPTH'},
        ].map(s=>(
          <div key={s.l}>
            <div className="mono-num" style={{fontSize:32, fontWeight:800, color:'var(--slate-900)', letterSpacing:'-0.02em'}}>{s.n}</div>
            <div className="mono-label" style={{fontSize:9, marginTop:6}}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Palantir-inspired wireframe 3D pipeline — perspective grid with floating nodes.
// Seven stages arranged along a vanishing-point grid, connected by flowing wires.
const PipelineDiagram = () => {
  const stages = [
    { label:'Ingest',      sub:'USASpending · SAM.gov · Agency web',          detail:'12.6M awards · 7.7M opportunities · 219K pages' },
    { label:'Clean',       sub:'Aho-Corasick · stop words · artifact strip',  detail:'50+ stop words · 25+ compound patterns' },
    { label:'Embed',       sub:'Qwen3-8B shared embedding space',             detail:'Cross-corpus alignment · GPU training' },
    { label:'Topic model', sub:'BERTopic per-corpus + semantic merging',      detail:'Coherence > 0.35 · Diversity > 0.50' },
    { label:'CATC',        sub:'Cross-agency temporal clustering',            detail:'10 signal classes · 20yr lifecycle' },
    { label:'Score',       sub:'Convergence · tiered evidence weights',       detail:'ICD 203 calibrated · 0.00–1.00' },
    { label:'Output',      sub:'Claims · evidence chains · briefs',           detail:'API · MCP · white-label · reports' },
  ];

  // 7 node positions on a perspective plane (x: 0-1 horizontal, z: 0-1 depth away)
  // We then project via simple perspective: y = baseY + z*depth, x scales toward center.
  const nodes = stages.map((s, i) => {
    const t = i / (stages.length - 1);        // 0 → 1 across pipeline
    return { ...s, t };
  });

  // Perspective projection — near the viewer is wide, far is narrow.
  // SVG viewBox: 1200 × 640. Vanishing point at x=600, y=180.
  const VX = 600;
  const NEAR_Y = 560, FAR_Y = 240;
  const NEAR_HALF = 560, FAR_HALF = 180;
  // Horizontal placement in pixel space (NOT multiplied by perspective halfW).
  // Linear march from x=180 to x=1020 across 7 stages + gentle sin sway in px.
  const project = (t) => {
    const y = NEAR_Y + (FAR_Y - NEAR_Y) * t;
    const xLinear = 180 + 840 * t;
    const sway = Math.sin(t * Math.PI * 1.2) * 80;  // ±80px S-sway
    const x = xLinear + sway;
    const scale = 1 - 0.55 * t;
    return { x, y, scale };
  };

  return (
    <section style={{background:'#05070F', color:'#E2E8F0', padding:'128px 0', position:'relative', overflow:'hidden'}}>
      {/* ambient */}
      <div style={{position:'absolute', top:'-10%', left:'50%', width:1200, height:600, transform:'translateX(-50%)', background:'radial-gradient(ellipse at center, rgba(59,130,246,0.18), transparent 65%)', pointerEvents:'none'}}/>
      <div className="grid-pattern-dark" style={{position:'absolute', inset:0, opacity:0.3, pointerEvents:'none'}}/>

      <div className="container" style={{position:'relative'}}>
        <div style={{maxWidth:820, marginBottom:56}}>
          <div className="reveal"><Eyebrow dark>Pipeline</Eyebrow></div>
          <h2 className="h2-display dark reveal delay-1" style={{marginTop:14}}>Raw federal data in. <span className="accent">Decision-ready intelligence out.</span></h2>
          <p className="lede dark reveal delay-2" style={{marginTop:18}}>Seven stages on a single plane. Every stage is independently testable, independently saleable, and ships a quality gate. This is the consolidated V2.2 pipeline running right now.</p>
        </div>

        <div className="reveal delay-3" style={{position:'relative', aspectRatio:'1200/640', width:'100%'}}>
          <svg viewBox="0 0 1200 640" style={{width:'100%', height:'100%', position:'absolute', inset:0}}>
            <defs>
              <linearGradient id="gridFade" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#475569" stopOpacity="0.08"/>
                <stop offset="0.6" stopColor="#475569" stopOpacity="0.55"/>
                <stop offset="1" stopColor="#64748B" stopOpacity="0.75"/>
              </linearGradient>
              <linearGradient id="wireGrad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stopColor="#3B82F6" stopOpacity="0.2"/>
                <stop offset="0.5" stopColor="#60A5FA" stopOpacity="0.9"/>
                <stop offset="1" stopColor="#93C5FD" stopOpacity="0.4"/>
              </linearGradient>
              <radialGradient id="nodeGlow">
                <stop offset="0" stopColor="#60A5FA" stopOpacity="0.7"/>
                <stop offset="1" stopColor="#60A5FA" stopOpacity="0"/>
              </radialGradient>
              <filter id="softGlow"><feGaussianBlur stdDeviation="3"/></filter>
            </defs>

            {/* Perspective grid plane */}
            <g stroke="url(#gridFade)" strokeWidth="1" fill="none">
              {/* Horizontal lines (recede toward vanishing point) */}
              {Array.from({length:12}).map((_,i)=>{
                const t = i / 11;
                const y = NEAR_Y + (FAR_Y - NEAR_Y) * t;
                const halfW = NEAR_HALF + (FAR_HALF - NEAR_HALF) * t;
                return <line key={`h${i}`} x1={VX-halfW} y1={y} x2={VX+halfW} y2={y} opacity={0.15 + 0.5*t}/>;
              })}
              {/* Vertical / radial lines converging to VP */}
              {Array.from({length:15}).map((_,i)=>{
                const t = (i - 7) / 7;   // -1 to 1
                const x1 = VX + t * NEAR_HALF;
                const x2 = VX + t * FAR_HALF;
                return <line key={`v${i}`} x1={x1} y1={NEAR_Y} x2={x2} y2={FAR_Y}/>;
              })}
            </g>

            {/* Horizon glow */}
            <rect x={VX - FAR_HALF - 40} y={FAR_Y - 2} width={(FAR_HALF+40)*2} height="2" fill="#3B82F6" opacity="0.4" filter="url(#softGlow)"/>
            <line x1={VX - FAR_HALF} y1={FAR_Y} x2={VX + FAR_HALF} y2={FAR_Y} stroke="#93C5FD" strokeWidth="0.6" opacity="0.6"/>

            {/* Connecting wires between nodes */}
            <g fill="none" strokeWidth="1.5">
              {nodes.map((n, i) => {
                if (i === nodes.length - 1) return null;
                const a = project(n.t);
                const b = project(nodes[i+1].t);
                const midX = (a.x + b.x) / 2;
                const midY = (a.y + b.y) / 2 - 20;
                return (
                  <path key={`wire${i}`}
                    d={`M ${a.x} ${a.y} Q ${midX} ${midY} ${b.x} ${b.y}`}
                    stroke="url(#wireGrad)"
                    strokeDasharray="3 3"
                    style={{animation:`flowLine 1.8s linear infinite`}}
                  />
                );
              })}
            </g>

            {/* Nodes */}
            {nodes.map((n, i) => {
              const p = project(n.t);
              const r = 10 * p.scale + 6;
              return (
                <g key={`node${i}`}>
                  {/* outer glow */}
                  <circle cx={p.x} cy={p.y} r={r*3} fill="url(#nodeGlow)" opacity="0.6"/>
                  {/* drop shadow on plane */}
                  <ellipse cx={p.x} cy={p.y + r*0.5} rx={r*1.4} ry={r*0.35} fill="#000" opacity="0.5"/>
                  {/* Hex node */}
                  <g transform={`translate(${p.x} ${p.y - r*0.6})`}>
                    <polygon
                      points={`0,${-r} ${r*0.87},${-r*0.5} ${r*0.87},${r*0.5} 0,${r} ${-r*0.87},${r*0.5} ${-r*0.87},${-r*0.5}`}
                      fill="#0B1222" stroke="#60A5FA" strokeWidth="1.5"/>
                    <polygon
                      points={`0,${-r*0.55} ${r*0.48},${-r*0.28} ${r*0.48},${r*0.28} 0,${r*0.55} ${-r*0.48},${r*0.28} ${-r*0.48},${-r*0.28}`}
                      fill="#60A5FA" opacity="0.9"/>
                  </g>
                </g>
              );
            })}
          </svg>

          {/* HTML labels overlaid on nodes — absolutely positioned via % */}
          {nodes.map((n, i) => {
            const p = project(n.t);
            const leftPct = (p.x / 1200) * 100;
            const topPct = (p.y / 640) * 100;
            const labelSide = i % 2 === 0 ? 'above' : 'below';
            const scale = 0.75 + 0.35 * (1 - n.t);
            // Leader line gap scales with node depth; further clearance than before.
            const gap = 48;
            const transY = labelSide==='above' ? `calc(-100% - ${gap}px)` : `${gap}px`;
            return (
              <div key={`lbl${i}`} style={{
                position:'absolute',
                left:`${leftPct}%`,
                top:`${topPct}%`,
                transform:`translate(-50%, ${transY}) scale(${scale})`,
                transformOrigin: labelSide==='above' ? 'center bottom' : 'center top',
                opacity: 0.55 + 0.45*(1-n.t),
                pointerEvents:'none',
                width:180, textAlign:'center',
              }}>
                <div className="mono-label" style={{color:'#60A5FA', fontSize:9, marginBottom:4}}>STAGE · {String(i+1).padStart(2,'0')}</div>
                <div style={{fontSize:15, fontWeight:700, color:'#fff', marginBottom:4, letterSpacing:'-0.01em'}}>{n.label}</div>
                <div style={{fontSize:10.5, color:'#94A3B8', lineHeight:1.4}}>{n.sub}</div>
              </div>
            );
          })}
        </div>

        {/* Detail strip below */}
        <div className="reveal delay-4" style={{marginTop:56, paddingTop:32, borderTop:'1px solid rgba(255,255,255,0.08)', display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:16}}>
          {stages.map((s,i)=>(
            <div key={i} style={{fontSize:10.5, lineHeight:1.55, color:'#64748B', fontFamily:'var(--font-mono)'}}>
              <div style={{color:'#60A5FA', marginBottom:6, letterSpacing:'0.15em'}}>{String(i+1).padStart(2,'0')}</div>
              {s.detail}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// NAICS vs FPDS comparison.
const NaicsComparison = () => (
  <Section>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>The Shift</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Stop relying on NAICS codes. <span className="accent">Start reading the work.</span></h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
      <div className="reveal" style={{border:'1px solid var(--slate-200)', borderRadius:16, padding:'32px 30px', background:'#fff'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
          <div className="mono-label" style={{color:'#EF4444', fontSize:10}}>LEGACY · NAICS-BASED SEARCH</div>
          <Icon name="x" size={18} style={{color:'#EF4444'}}/>
        </div>
        <h3 style={{fontSize:22, fontWeight:800, margin:'0 0 20px', letterSpacing:'-0.01em'}}>Find contracts under NAICS 541511</h3>
        <div style={{display:'flex', flexDirection:'column', gap:14, fontFamily:'var(--font-mono)', fontSize:12.5}}>
          {[
            {co:'541511', title:'IT infrastructure for DHS', tag:'Infrastructure'},
            {co:'541511', title:'Custom ML model training', tag:'AI/ML pilot'},
            {co:'541511', title:'Legacy system maintenance', tag:'Sustainment'},
            {co:'541511', title:'Operational AI integration', tag:'AI/ML production'},
            {co:'541511', title:'Mainframe migration', tag:'Modernization'},
          ].map((r,i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'80px 1fr 140px', gap:12, padding:'10px 0', borderTop:i>0?'1px solid var(--slate-100)':'none', alignItems:'center'}}>
              <span style={{color:'#94A3B8'}}>{r.co}</span>
              <span style={{color:'var(--slate-700)'}}>{r.title}</span>
              <span style={{fontSize:10, padding:'2px 8px', background:'var(--slate-100)', color:'var(--slate-500)', borderRadius:4, letterSpacing:'0.1em', justifySelf:'start'}}>{r.tag}</span>
            </div>
          ))}
        </div>
        <div style={{marginTop:24, padding:'16px 18px', background:'#FEF2F2', border:'1px solid #FECACA', borderRadius:10, color:'#B91C1C', fontSize:13, lineHeight:1.55}}>
          <strong>Result:</strong> Five programs, same code, completely different businesses. The Label Trap.
        </div>
      </div>
      <div className="reveal delay-1" style={{border:'1px solid #000080', borderRadius:16, padding:'32px 30px', background:'#fff', boxShadow:'0 30px 60px -24px rgba(0,0,128,0.18)'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
          <div className="mono-label" style={{color:'#000080', fontSize:10}}>FPDS · SEMANTIC CLUSTER</div>
          <Icon name="check" size={18} style={{color:'#16A34A'}}/>
        </div>
        <h3 style={{fontSize:22, fontWeight:800, margin:'0 0 20px', letterSpacing:'-0.01em'}}>Cluster 0412 · Operational AI/ML integration</h3>
        <div style={{display:'flex', flexDirection:'column', gap:14, fontFamily:'var(--font-mono)', fontSize:12.5}}>
          {[
            {co:'541511', title:'Operational AI integration', tag:'AI/ML production', match:0.94},
            {co:'541512', title:'ML platform operations', tag:'AI/ML production', match:0.91},
            {co:'541715', title:'R&D to ops transition', tag:'AI/ML production', match:0.87},
            {co:'541519', title:'Edge inference deployment', tag:'AI/ML production', match:0.83},
            {co:'611420', title:'MLOps enablement training', tag:'AI/ML production', match:0.79},
          ].map((r,i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'72px 1fr 50px', gap:12, padding:'10px 0', borderTop:i>0?'1px solid var(--slate-100)':'none', alignItems:'center'}}>
              <span style={{color:'#94A3B8', fontSize:11}}>{r.co}</span>
              <span style={{color:'var(--slate-700)'}}>{r.title}</span>
              <span style={{fontSize:11, color:'#000080', fontWeight:700, textAlign:'right'}}>{(r.match*100)|0}%</span>
            </div>
          ))}
        </div>
        <div style={{marginTop:24, padding:'16px 18px', background:'#EFF6FF', border:'1px solid #BFDBFE', borderRadius:10, color:'#1E3A8A', fontSize:13, lineHeight:1.55}}>
          <strong>Result:</strong> Five NAICS codes, one actual business. The work groups itself.
        </div>
      </div>
    </div>
  </Section>
);

window.ArchHero = ArchHero;
window.PipelineDiagram = PipelineDiagram;
window.NaicsComparison = NaicsComparison;