// About page — origin story, thesis, what we're not.

const AboutHero = () => (
  <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 className="container" style={{position:'relative'}}>
      <Chip>About Kenosa</Chip>
      <h1 className="display" style={{marginTop:22, marginBottom:24, maxWidth:1040}}>
        A company built by analysts, <span className="accent">for a market that ran out of them</span>.
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        We started Kenosa because the work we did as intelligence analysts — taking messy evidence, weighing sources, and producing a defensible claim — is exactly the work federal procurement has no scalable way to do. So we built the substrate for it.
      </p>
    </div>
  </section>
);

const AboutThesis = () => (
  <Section tint>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:72, alignItems:'start'}}>
      <div>
        <div className="reveal"><Eyebrow>Thesis</Eyebrow></div>
        <h2 className="h2-display reveal delay-1" style={{marginTop:14, fontSize:'clamp(32px, 3.8vw, 48px)'}}>
          The market does not need <span className="accent">another dashboard</span>.
        </h2>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:20, fontSize:17, lineHeight:1.65, color:'var(--slate-700)'}}>
        <p className="reveal">The federal procurement information market is saturated with tools that retrieve, filter, and display. Most of them solve the wrong problem — they help a user find a haystack. The substrate exists underneath those tools.</p>
        <p className="reveal delay-1">FPDS is the layer that weighs evidence across sources, tracks how a signal evolves over time, and produces a calibrated claim. It is the thing dashboards sit on top of, not the dashboard itself.</p>
        <p className="reveal delay-2">That's an unusual position to occupy, and it's the only position where a durable moat is possible. Tools are commodities. Substrates accumulate.</p>
      </div>
    </div>
  </Section>
);

const AboutWhatWeAreNot = () => (
  <Section>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>Positioning</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>What we are, and <span className="accent">what we are not</span>.</h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
      <div className="reveal" style={{border:'1px solid var(--slate-200)', borderRadius:16, padding:'32px 30px', background:'#fff'}}>
        <div className="mono-label" style={{color:'#EF4444', fontSize:10, marginBottom:18}}>WE ARE NOT</div>
        <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:14}}>
          {['A proposal-writing tool','An opportunity alert feed','A BD CRM','A replacement for capture teams','A competitor to GovWin or GovTribe','A generalist analytics vendor'].map(x=>(
            <li key={x} style={{display:'flex', gap:12, alignItems:'center', color:'var(--slate-700)', fontSize:15}}>
              <Icon name="x" size={16} style={{color:'#EF4444', flex:'none'}}/>{x}
            </li>
          ))}
        </ul>
      </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 className="mono-label" style={{color:'#000080', fontSize:10, marginBottom:18}}>WE ARE</div>
        <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:14}}>
          {['The intelligence substrate GovCon platforms embed','A calibrated evidence engine for agencies','Analysts who built an arithmetic version of our own tradecraft','ICD-203 disciplined','Defensible by accumulation, not feature count','A small team with a narrow scope'].map(x=>(
            <li key={x} style={{display:'flex', gap:12, alignItems:'center', color:'var(--slate-700)', fontSize:15}}>
              <Icon name="check" size={16} style={{color:'#16A34A', flex:'none'}}/>{x}
            </li>
          ))}
        </ul>
      </div>
    </div>
  </Section>
);

const AboutPrinciples = () => (
  <Section dark grid>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow dark>Operating Principles</Eyebrow></div>
      <h2 className="h2-display dark reveal delay-1" style={{marginTop:14}}>Four rules we don't break.</h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
      {[
        {n:'01', title:'Evidence before narrative', body:'A claim without traceable evidence is not a claim — it is a guess with formatting. Every output from the substrate carries its evidence chain.'},
        {n:'02', title:'Calibrated uncertainty', body:'"High confidence" means something reproducible. We publish our calibration; we do not hide behind hedging language.'},
        {n:'03', title:'Narrow scope, deep build', body:'We do not expand into adjacent markets to look larger. The substrate is the product. Expansion is depth, not breadth.'},
        {n:'04', title:'Partner-first distribution', body:'Platforms, not agencies, are the largest distribution channel. We build to be embedded, not to compete with our customers.'},
      ].map((p,i)=>(
        <div key={p.n} className={`reveal delay-${(i%3)+1}`} style={{background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:12, padding:'28px 28px'}}>
          <div className="mono-label" style={{color:'#60A5FA', fontSize:10, marginBottom:12}}>PRINCIPLE {p.n}</div>
          <h3 style={{color:'#fff', fontSize:22, fontWeight:700, margin:'0 0 12px'}}>{p.title}</h3>
          <p style={{color:'#94A3B8', fontSize:14.5, lineHeight:1.6, margin:0}}>{p.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

window.AboutHero = AboutHero;
window.AboutThesis = AboutThesis;
window.AboutWhatWeAreNot = AboutWhatWeAreNot;
window.AboutPrinciples = AboutPrinciples;
