// The Model — buyer-facing ontology page.
// Public framing of the structured-meaning layer beneath FPDS.
// No technical jargon (no BFO, OWL, Turtle, embeddings, etc.) — explains the
// ontology in customer terms: a model of how federal procurement actually works.

const ModelHero = () => (
  <section style={{paddingTop:168, paddingBottom:80, background:'transparent', position:'relative', overflow:'hidden'}}>
    <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'}}>
      <Chip>The Model</Chip>
      <h1 className="display" style={{maxWidth:1040, marginTop:22, marginBottom:24}}>
        Federal procurement isn't a database. <span className="accent">It's a process.</span>
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        Intent becomes language. Language becomes solicitations. Solicitations become awards. Awards become outcomes. To answer real questions, you need a model of that process — not a dump of records.
      </p>
    </div>
  </section>
);

const ModelExplanation = () => (
  <Section tint>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:72, alignItems:'start'}}>
      <div>
        <div className="reveal"><Eyebrow>What we built</Eyebrow></div>
        <h2 className="h2-display reveal delay-1" style={{marginTop:14, fontSize:'clamp(32px, 3.6vw, 44px)'}}>
          A connected model of <span className="accent">how federal procurement actually works</span>.
        </h2>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:20, fontSize:17, lineHeight:1.65, color:'var(--slate-700)'}}>
        <p className="reveal">Every contractor, every contracting officer, every contract vehicle, every program, every agency, every solicitation — modeled as a connected entity in a shared structure.</p>
        <p className="reveal delay-1">Awards link to the officers who awarded them. Solicitations link to the forecasts that foreshadowed them. Programs link to the appropriations that fund them. Contractors link to their teaming partners and their competitive history.</p>
        <p className="reveal delay-2">When you ask a question, the answer doesn't come from one table. It traces a path through the model — from <strong style={{color:'var(--slate-900)'}}>policy</strong> to <strong style={{color:'var(--slate-900)'}}>plan</strong> to <strong style={{color:'var(--slate-900)'}}>purchase</strong> to <strong style={{color:'var(--slate-900)'}}>performer</strong> — and shows you the evidence at every step.</p>
      </div>
    </div>
  </Section>
);

// Visual: 4-stage flow showing how a question traces through the model.
const ModelFlow = () => {
  const stages = [
    { tag:'POLICY',    label:'Authorization & appropriation',  detail:'Where the money is real, durable, and intended to flow.' },
    { tag:'PLAN',      label:'Forecast & strategy',            detail:'What an agency has signaled it intends to buy.' },
    { tag:'PURCHASE',  label:'Solicitation & award',           detail:'What was actually requested, and what was awarded.' },
    { tag:'PERFORMER', label:'Vendors & officers',             detail:'Who delivered, who ran the deal, what came next.' },
  ];

  return (
    <Section>
      <div style={{maxWidth:820, marginBottom:56}}>
        <div className="reveal"><Eyebrow>The trace</Eyebrow></div>
        <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>
          A claim follows a path. <span className="accent">Every step has a receipt.</span>
        </h2>
        <p className="lede reveal delay-2" style={{marginTop:18}}>
          When the model produces an answer, you can walk it backward — from the conclusion all the way to the source documents. Other tools tell you what. This model shows you why.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, position:'relative'}}>
        {stages.map((s, i) => (
          <div key={s.tag} className={`reveal delay-${i+1}`} style={{
            background:'#fff',
            border:'1px solid var(--slate-200)',
            borderLeft: i === 0 ? '1px solid var(--slate-200)' : 'none',
            padding:'32px 28px',
            position:'relative',
          }}>
            <div className="mono-label" style={{color:'#000080', fontSize:10, marginBottom:14, fontWeight:700}}>
              0{i+1} · {s.tag}
            </div>
            <h4 style={{fontSize:18, fontWeight:700, margin:'0 0 12px', letterSpacing:'-0.01em', color:'var(--slate-900)'}}>{s.label}</h4>
            <p style={{fontSize:13.5, lineHeight:1.55, color:'var(--slate-600)', margin:0}}>{s.detail}</p>
            {i < stages.length - 1 && (
              <div style={{position:'absolute', top:'50%', right:-12, transform:'translateY(-50%)', zIndex:2, background:'#fff', width:24, height:24, borderRadius:999, border:'1px solid var(--slate-200)', display:'flex', alignItems:'center', justifyContent:'center', color:'#000080'}}>
                <Icon name="arrow" size={12}/>
              </div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
};

// What this enables — three concrete buyer outcomes the model unlocks.
const ModelOutcomes = () => (
  <Section tint>
    <div style={{maxWidth:820, marginBottom:56}}>
      <div className="reveal"><Eyebrow>What this enables</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>
        Questions that <span className="accent">no flat database can answer</span>.
      </h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
      {[
        {
          n:'01',
          title:'"Is this opportunity real?"',
          body:'Trace the program from a policy document, through agency forecasts, to a solicitation. If any link is missing or weak, the conviction is too. The model shows you which.',
        },
        {
          n:'02',
          title:'"Who really wins this work?"',
          body:'Look past the awarded prime — see the subcontractor graph, the contracting officer\'s historical preferences, and the past-performance signals that shaped the decision.',
        },
        {
          n:'03',
          title:'"How do these markets connect?"',
          body:'Two contracts under different agencies, different vehicles, and different NAICS codes can be the same underlying capability buy. The model makes that connection visible.',
        },
      ].map((o,i)=>(
        <div key={o.n} className={`reveal delay-${i+1}`} style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:14, padding:'28px 28px'}}>
          <div className="mono-label" style={{color:'#000080', fontSize:10, marginBottom:14}}>OUTCOME {o.n}</div>
          <h3 style={{fontSize:19, fontWeight:700, margin:'0 0 14px', letterSpacing:'-0.01em', color:'var(--slate-900)'}}>{o.title}</h3>
          <p style={{fontSize:14, lineHeight:1.6, color:'var(--slate-600)', margin:0}}>{o.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

// NAICS-vs-FPDS — kept from old Architecture page, simplified. Audit liked this.
const ModelVsCodes = () => (
  <Section>
    <div style={{maxWidth:860, marginBottom:48}}>
      <div className="reveal"><Eyebrow>Why NAICS isn't enough</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>
        Codes describe bureaucracy. <span className="accent">The model describes work.</span>
      </h2>
      <p className="lede reveal delay-2" style={{marginTop:18}}>
        Two contracts can share a NAICS code and be entirely different businesses. Two contracts can have different NAICS codes and be the same buy from a different angle. Codes were designed for census reporting, not for understanding what an agency is actually purchasing.
      </p>
    </div>

    <div className="reveal delay-3" style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:16, overflow:'hidden'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr'}}>
        <div style={{padding:'32px 32px', borderRight:'1px solid var(--slate-200)'}}>
          <div className="mono-label" style={{color:'var(--slate-500)', fontSize:10, marginBottom:16}}>NAICS / PSC LENS</div>
          <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:14, fontSize:14, lineHeight:1.55, color:'var(--slate-600)'}}>
            <li>One code per contract, picked by the contracting officer.</li>
            <li>Built for statistical census reporting, not market intelligence.</li>
            <li>Same code captures wildly different work; different codes mask shared work.</li>
            <li>Static. No relationships between codes, contracts, or programs.</li>
          </ul>
        </div>
        <div style={{padding:'32px 32px', background:'rgba(0,0,128,0.02)'}}>
          <div className="mono-label" style={{color:'#000080', fontSize:10, marginBottom:16}}>FPDS MODEL LENS</div>
          <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:14, fontSize:14, lineHeight:1.55, color:'var(--slate-700)'}}>
            <li>Every contract is connected to its program, vehicle, officer, and recipient.</li>
            <li>Built for reasoning across sources, not reporting up to one.</li>
            <li>Capability themes cluster contracts by what they actually buy.</li>
            <li>Temporal. Tracks how a market evolves, not just what it spent last year.</li>
          </ul>
        </div>
      </div>
    </div>
  </Section>
);

window.ModelHero = ModelHero;
window.ModelExplanation = ModelExplanation;
window.ModelFlow = ModelFlow;
window.ModelOutcomes = ModelOutcomes;
window.ModelVsCodes = ModelVsCodes;