/* About — origin, method-in-brief, the four-criterion bar, traceability */
const About = ({ setRoute }) => {
  const criteria = [
    { n:'01', k:'A clear business benefit',
      v:'Measurable value returned to the firm — cost avoided, productivity gained, risk retired, or revenue opened.' },
    { n:'02', k:'A clear social or environmental benefit',
      v:'Value delivered outside the firm — to communities, workers, ecosystems — with scope and beneficiary defined.' },
    { n:'03', k:'An explicit causal link between the two',
      v:'The disclosure states how the business activity produces the social/environmental outcome, not just that both exist.' },
    { n:'04', k:'Measurable or demonstrable outcomes',
      v:'Figures, baselines, units, or methods — not intentions or targets.' },
  ];

  const microcopy = [
    'Every insight is traceable',
    'From disclosure to evidence',
    '1.1% is not a rounding error',
  ];

  /* Title animation — split into word chunks and stagger their reveal. The
   * second clause ("using evidence, not narrative.") arrives a beat later
   * so the reading rhythm is: statement → pause → sharp clarification. */
  const titleWords = [
    { t:'Kestrel',  cls:'' },
    { t:'evaluates', cls:'' },
    { t:'how',       cls:'' },
    { t:'mining',    cls:'' },
    { t:'companies', cls:'' },
    { t:'create',    cls:'' },
    { t:'Shared',    cls:'serif-moment about-title-accent' },
    { t:'Value',     cls:'serif-moment about-title-accent' },
    { t:'—',         cls:'about-title-dash' },
    { t:'using',     cls:'about-title-tail' },
    { t:'evidence,', cls:'about-title-tail' },
    { t:'not',       cls:'about-title-tail' },
    { t:'narrative.',cls:'about-title-tail' },
  ];

  return (
    <section className="section first about-section">
      <div className="site-wrap">
        <EyebrowRow label="About"/>

        <h1 className="about-title" style={{fontSize:64,lineHeight:'70px',fontWeight:600,letterSpacing:'-0.03em',maxWidth:900}}>
          {titleWords.map((w,i) => (
            <React.Fragment key={i}>
              <span className={`about-title-word ${w.cls}`} style={{animationDelay:`${80 + i*55}ms`}}>{w.t}</span>
              {i < titleWords.length - 1 ? ' ' : ''}
            </React.Fragment>
          ))}
        </h1>

        {/* Stacked intro — problem → approach, no side-by-side */}
        <div className="about-intro" style={{marginTop:48,maxWidth:720,display:'flex',flexDirection:'column',gap:12}}>
          <p className="lede about-fade-up" style={{animationDelay:'900ms'}}>
            Sustainability reporting has become extensive, but not necessarily reliable. Disclosures are often qualitative, inconsistent, and shaped by aspirational language. &ldquo;Shared Value&rdquo; is widely referenced, yet rarely defined rigorously or supported by measurable outcomes.
          </p>
          <div className="about-intro-rule about-fade-up" style={{animationDelay:'1050ms'}} aria-hidden="true"/>
          <p className="lede about-fade-up" style={{color:'var(--ink-2)',animationDelay:'1200ms'}}>
            Kestrel addresses this gap through a strict, evidence-based framework. It analyses company reports at the passage level and classifies each disclosure against four criteria.
          </p>
        </div>

        {/* Four-criterion bar */}
        <Reveal>
          <div style={{marginTop:96,borderTop:'1px solid var(--line)'}} className="about-criteria">
            <div className="eyebrow" style={{marginTop:28,marginBottom:8}}>The four-criterion bar</div>
            <h2 style={{maxWidth:820,marginTop:4}}>Only disclosures that meet all four are classified as true Shared Value.</h2>
            <div style={{marginTop:48,display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,borderTop:'1px solid var(--line)'}} className="about-criteria-grid">
              {criteria.map((c,i)=>(
                <div key={c.n} className="about-criteria-card" style={{
                  padding:'40px 28px 40px 0',
                  paddingLeft: i===0 ? 0 : 28,
                  borderRight: i<3 ? '1px solid var(--line)' : 'none',
                  animationDelay:`${i * 130}ms`,
                }}>
                  <div className="eyebrow tabular about-criteria-num" style={{color:'var(--moss)'}}>{c.n}</div>
                  <div style={{fontSize:18,fontWeight:500,color:'var(--ink)',marginTop:12,letterSpacing:'-0.015em',lineHeight:'26px'}}>{c.k}</div>
                  <p style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)',marginTop:12}}>{c.v}</p>
                </div>
              ))}
            </div>
            <p style={{marginTop:32,fontSize:14,lineHeight:'24px',color:'var(--ink-2)',maxWidth:700}}>
              Everything else is filtered as ambiguous, transactional, or non-initiative — and kept out of the Shared Value count.
            </p>
          </div>
        </Reveal>

        {/* Headline stat */}
        <Reveal>
          <div className="about-stat about-stat-card" style={{marginTop:96}}>
            <div className="about-stat-value-wrap">
              <div className="about-stat-value">
                <AnimatedNumber value={1.1} decimals={1} duration={1400}/>
                <span className="about-stat-pct">%</span>
              </div>
              <div className="about-stat-bar" aria-hidden="true">
                <div className="about-stat-bar-fill"/>
              </div>
            </div>
            <div className="about-stat-text">
              <div className="serif-moment" style={{fontSize:32,lineHeight:'40px',color:'var(--ink)',maxWidth:460}}>
                of disclosures, across{' '}
                <span className="tabular" style={{color:'var(--ink)',fontWeight:500}}>
                  <AnimatedNumber value={97} decimals={0} duration={1400}/>
                </span>
                {' '}mining reports, met all four criteria.
              </div>
              <p style={{marginTop:20,fontSize:14,lineHeight:'22px',color:'var(--ink-2)',maxWidth:520}}>
                1.1% is not a rounding error — it is the distance between claimed impact and evidenced impact in industry disclosure.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Traceability + origin, two columns */}
        <Reveal delay={120}>
          <div style={{marginTop:96,display:'grid',gridTemplateColumns:'1fr 1fr',gap:64}} className="about-pair">
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>Traceability</div>
              <h3 style={{fontSize:28,lineHeight:'36px',fontWeight:500,letterSpacing:'-0.02em'}}>
                Every result is linked directly to its source.
              </h3>
              <p style={{marginTop:20,fontSize:15,lineHeight:'24px',color:'var(--ink-2)'}}>
                Each classification traces back to the original report, the page number, and the exact quoted passage. That shifts the work from interpretation to verification — you can check Kestrel&rsquo;s call against the source, line by line.
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>Origin & guidance</div>
              <h3 style={{fontSize:28,lineHeight:'36px',fontWeight:500,letterSpacing:'-0.02em'}}>
                Built at Camborne School of Mines. Guided by Sazani Associates.
              </h3>
              <p style={{marginTop:20,fontSize:15,lineHeight:'24px',color:'var(--ink-2)'}}>
                Kestrel was developed by a Camborne School of Mines (CSM) student after identifying a systemic lack of ESG disclosures supported by verifiable evidence. Its methodology has been guided and supported by social value specialists at Sazani Associates.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Microcopy row — staggered serif moments */}
        <Reveal delay={80}>
          <div style={{marginTop:96,borderTop:'1px solid var(--line)',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0}} className="about-microcopy">
            {microcopy.map((line,i)=>(
              <div key={line} className="about-microcopy-cell" style={{
                padding:'40px 32px 40px 0',
                paddingLeft: i===0 ? 0 : 32,
                borderRight: i<2 ? '1px solid var(--line)' : 'none',
                animationDelay:`${i * 160}ms`,
              }}>
                <div className="serif-moment" style={{fontSize:26,lineHeight:'34px',color:'var(--ink)'}}>
                  {line}
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Closing CTA */}
        <Reveal delay={60}>
          <div style={{marginTop:96,display:'flex',gap:16,flexWrap:'wrap',alignItems:'center'}} className="about-cta">
            <button className="btn btn-primary btn-lg" onClick={()=>setRoute({page:'method'})}>
              How the method works <Icon name="arrow-right" size={16} style={{marginLeft:4}} className="arrow"/>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={()=>setRoute({page:'explore'})}>
              Explore the data
            </button>
          </div>

          <p style={{marginTop:56,fontSize:14,lineHeight:'24px',color:'var(--ink-2)',maxWidth:720}}>
            By grounding ESG analysis in traceable data, Kestrel enables more credible assessment of corporate impact — supporting better decision-making, accountability, and long-term trust.
          </p>
        </Reveal>
      </div>
    </section>
  );
};
window.About = About;