/* WhyCSV — explains Creating Shared Value and what Kestrel filters for.
   Lives on the home page between Coverage and Key Finding. Built on the same
   primitives as Methodology / WhyItMatters: .section, EyebrowRow, .serif-moment,
   grid-2, numbered blocks. */

const WhyCSV = ({ setRoute }) => {
  const shift = [
    { k: 'Materiality', v: 'Reporting is moving toward what actually matters to the business and its stakeholders — not broad coverage of every topic.' },
    { k: 'Impact',      v: 'Outcomes take priority over intentions. Targets, commitments and aspirations are not disclosures of action.' },
    { k: 'Evidence',    v: 'Alignment with a framework is not evidence of practice. Figures need baselines, methods, and boundaries to count.' },
  ];

  const requires = [
    { n: '01', k: 'Dual benefit',      v: 'Both business value and social or environmental value — measured, not asserted.' },
    { n: '02', k: 'Causal linkage',    v: 'The two benefits must arise from the same activity, with the mechanism explicit or quantified.' },
    { n: '03', k: 'Measurable outcome',v: 'Outputs, beneficiaries and baselines are named. Narrative alone is filtered out.' },
  ];

  return (
    <section className="section">
      <div className="site-wrap">
        <EyebrowRow label="Context"/>
        <h2 style={{maxWidth:860,fontSize:40,lineHeight:'48px',fontWeight:500,letterSpacing:'-0.025em'}}>
          Cut through ESG noise. Identify real shared value.
        </h2>
        <p className="lede" style={{marginTop:20,maxWidth:680,color:'var(--ink-2)'}}>
          Kestrel isolates genuine Creating Shared Value in mining disclosures &mdash; distinguishing measurable impact from narrative, commitments, and compliance language.
        </p>
        <p style={{marginTop:12,maxWidth:680,fontSize:14,lineHeight:'22px',color:'var(--ink-3)',fontStyle:'italic'}}>
          Built for a world moving beyond voluntary ESG toward verifiable, decision-useful insight.
        </p>

        {/* ── The signal problem ─────────────────────────────────────── */}
        <Reveal>
          <div style={{marginTop:80,display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:80,alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:14}}>The signal problem</div>
              <p style={{fontSize:17,lineHeight:'28px',color:'var(--ink)',marginBottom:14}}>
                Most sustainability reporting fails a simple test &mdash; and the industry knows it.
              </p>
              <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)',marginBottom:10}}>
                Disclosures are saturated with broad commitments, policy alignment, and impact claims without evidence. Stakeholders can no longer reliably distinguish real value creation from well-written reporting.
              </p>
              <div style={{display:'flex',gap:8,flexWrap:'wrap',marginTop:20}}>
                <Chip compact>Broad commitments</Chip>
                <Chip compact>Policy alignment</Chip>
                <Chip compact>Unverified claims</Chip>
                <Chip compact>Target-only language</Chip>
              </div>
            </div>
            <div className="serif-moment" style={{fontSize:40,lineHeight:'50px',color:'var(--ink)',maxWidth:560}}>
              &ldquo;Does this create measurable value for both the business and society?&rdquo;
            </div>
          </div>
        </Reveal>

        {/* ── The shift ──────────────────────────────────────────────── */}
        <Reveal delay={80}>
          <div style={{marginTop:96}}>
            <div className="eyebrow" style={{marginBottom:14}}>The shift</div>
            <h3 style={{fontSize:24,lineHeight:'32px',fontWeight:500,letterSpacing:'-0.02em',maxWidth:640,color:'var(--ink)'}}>
              Frameworks like CSRD and the ESRS are pushing reporting past narrative into evidence.
            </h3>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0,marginTop:40,borderTop:'1px solid var(--line)'}}>
              {shift.map((s,i)=>(
                <div key={s.k} style={{
                  padding:'36px 28px 36px 0',
                  paddingLeft: i===0 ? 0 : 28,
                  borderRight: i<2 ? '1px solid var(--line)' : 'none',
                  borderBottom:'1px solid var(--line)',
                }}>
                  <div className="eyebrow tabular" style={{color:'var(--moss)'}}>0{i+1}</div>
                  <div style={{fontSize:20,fontWeight:500,color:'var(--ink)',marginTop:12,letterSpacing:'-0.015em'}}>
                    {s.k} <span style={{color:'var(--ink-3)',fontWeight:400}}>over {s.k === 'Materiality' ? 'messaging' : s.k === 'Impact' ? 'intention' : 'alignment'}</span>
                  </div>
                  <p style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)',marginTop:12,maxWidth:320}}>{s.v}</p>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* ── Where CSV fits ─────────────────────────────────────────── */}
        <Reveal delay={120}>
          <div style={{marginTop:96,padding:'56px 64px',background:'var(--sage-tint)',borderRadius:16,display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:64,alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{color:'var(--moss-deep)',marginBottom:14}}>Where shared value fits</div>
              <p style={{fontSize:15,lineHeight:'24px',color:'var(--ink)',marginBottom:14}}>
                The concept of Creating Shared Value, developed by <span style={{fontWeight:500}}>Michael Porter</span> and <span style={{fontWeight:500}}>Mark Kramer</span>, provides the missing lens.
              </p>
              <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)'}}>
                In practice, CSV is loosely defined, inconsistently applied, and frequently overstated &mdash; which is why a strict, structured rubric matters.
              </p>
            </div>
            <div className="serif-moment" style={{fontSize:32,lineHeight:'42px',color:'var(--ink)',maxWidth:560,fontStyle:'italic'}}>
              Real sustainability is not about external responsibility alone &mdash; it is about integrating social and environmental value into core business performance.
            </div>
          </div>
        </Reveal>

        {/* ── What Kestrel requires ─────────────────────────────────── */}
        <Reveal delay={160}>
          <div style={{marginTop:96}}>
            <div className="eyebrow" style={{marginBottom:14}}>What Kestrel does differently</div>
            <h3 style={{fontSize:24,lineHeight:'32px',fontWeight:500,letterSpacing:'-0.02em',maxWidth:720,color:'var(--ink)'}}>
              One question, asked of every passage: <span style={{fontStyle:'italic',fontFamily:'var(--font-serif)'}}>is this genuinely creating shared value &mdash; or not?</span>
            </h3>
            <p style={{marginTop:16,maxWidth:680,fontSize:14,lineHeight:'22px',color:'var(--ink-2)'}}>
              Reports are broken into passage-level evidence and scored against hard classification criteria &mdash; not narrative interpretation. Anything that doesn&rsquo;t clear the bar is filtered out.
            </p>
            <div style={{marginTop:40,display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
              {requires.map(r=>(
                <div key={r.n} style={{
                  padding:'28px 28px 32px',
                  border:'1px solid var(--line)',
                  borderRadius:14,
                  background:'var(--canvas)',
                }} className="lift">
                  <div className="tabular" style={{fontSize:18,fontWeight:600,color:'var(--moss)',letterSpacing:'-0.01em'}}>{r.n}</div>
                  <div style={{fontSize:18,fontWeight:500,color:'var(--ink)',marginTop:12,letterSpacing:'-0.015em'}}>{r.k}</div>
                  <p style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)',marginTop:10}}>{r.v}</p>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* ── The result ─────────────────────────────────────────────── */}
        <Reveal delay={200}>
          <div style={{marginTop:96,display:'grid',gridTemplateColumns:'1fr 1fr',gap:80,alignItems:'start'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:14}}>The result</div>
              <p style={{fontSize:17,lineHeight:'28px',color:'var(--ink)'}}>
                Instead of pages of ESG narrative, you get a defensible basis for investment, regulatory, and strategic decisions.
              </p>
            </div>
            <div style={{borderTop:'1px solid var(--line)'}}>
              {[
                'A clear signal of true shared value',
                'A breakdown of what is real, ambiguous, or unsupported',
                'A defensible basis for investment, regulatory, and strategic assessment',
              ].map((r,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'32px 1fr',gap:16,padding:'18px 0',borderBottom:'1px solid var(--line)',alignItems:'flex-start'}}>
                  <div className="tabular" style={{fontSize:13,fontWeight:600,color:'var(--moss)',paddingTop:2}}>→</div>
                  <div style={{fontSize:14,lineHeight:'22px',color:'var(--ink)'}}>{r}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* ── CTA ───────────────────────────────────────────────────── */}
        <div style={{marginTop:80,paddingTop:40,borderTop:'1px solid var(--line)',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:24}}>
          <div className="serif-moment" style={{fontSize:28,lineHeight:'36px',color:'var(--ink)',maxWidth:520}}>
            See what companies actually deliver &mdash; not just what they say.
          </div>
          <div style={{display:'flex',gap:12}}>
            <button className="btn btn-primary" onClick={()=>setRoute({page:'explore'})}>
              Explore the data <Icon name="arrow-right" size={14} style={{marginLeft:4}} className="arrow"/>
            </button>
            <button className="btn btn-ghost" onClick={()=>setRoute({page:'method'})}>How it works</button>
          </div>
        </div>
      </div>
    </section>
  );
};
window.WhyCSV = WhyCSV;
