/* Pricing — 1-week free trial, four-tier subscription ladder,
 * positioning around defensible, traceable Shared Value intelligence. */
const Pricing = ({ setRoute }) => {
  const [activeTier, activateTier] = useTier();

  const tierLandingPage = {
    free:       'explore',
    analyst:    'explore',
    pro:        'compare',
    enterprise: 'about',
  };

  const startTier = (key) => {
    activateTier(key);
    setRoute({ page: tierLandingPage[key] || 'explore' });
  };

  const tiers = [
    {
      n:'01', key:'free', label:'Free', price:'£0', cadence:'forever',
      audience:'Students · curiosity',
      lede:'Read-only access to aggregate classification and the public explorer.',
      features:[
        'Aggregate dataset (≈16k passages)',
        'Global distribution + year trend',
        'Read-only company scorecards',
      ],
      cta:'Start free', ctaType:'ghost',
    },
    {
      n:'02', key:'analyst', label:'Analyst', price:'£49', cadence:'per month',
      audience:'Dissertation-level · individual analysts',
      lede:'Full passage-level access, filters, and source-linked evidence for deep work.',
      features:[
        'Everything in Free',
        'Full passage-level explorer + filters',
        'Source citations (page, quote, report)',
        'CSV export, up to 5k rows / month',
      ],
      cta:'Start 1-week free trial', ctaType:'primary', highlight:true,
      trialNote:'No card required for the first 7 days.',
    },
    {
      n:'03', key:'pro', label:'Pro', price:'£129', cadence:'per month',
      audience:'Consultants · ESG advisors',
      lede:'Client-ready comparisons, higher export limits, and methodology appendix.',
      features:[
        'Everything in Analyst',
        'Multi-company compare + leader flags',
        'Unlimited CSV export',
        'Branded methodology appendix (PDF)',
        'Email support, 2-day response',
      ],
      cta:'Start 1-week free trial', ctaType:'primary',
    },
    {
      n:'04', key:'enterprise', label:'Enterprise', price:'£500+', cadence:'per month',
      audience:'Firms · internal ESG / audit teams',
      lede:'Team seats, API access, and regulatory-aligned reporting workflows (coming soon).',
      features:[
        'Everything in Pro',
        'Team seats (5+), SSO',
        'API access to classified passages',
        'Regulatory evidence packs (coming soon)',
        'Dedicated methodology review',
      ],
      cta:'Talk to us', ctaType:'ghost',
    },
  ];

  const valueProps = [
    { k:'Replaces hours of report reading',
      v:'Every passage is pre-classified against the four-criterion bar, with the source quote one click away.' },
    { k:'Creates defensible ESG insight',
      v:'Every classification is sourced to the report passage, page, and Kestrel version — auditable, quotable, and ready to cite.' },
    { k:'Regulatory relevance (coming soon)',
      v:'Built to align with the evidence standard expected under emerging sustainability reporting directives.' },
  ];

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

        <h1 style={{fontSize:64,lineHeight:'70px',fontWeight:600,letterSpacing:'-0.03em',maxWidth:900}}>
          Start free for a week.<br/>
          <span className="serif-moment" style={{fontSize:64,lineHeight:'70px'}}>Pay only when the evidence earns its keep.</span>
        </h1>

        <p className="lede" style={{marginTop:28,maxWidth:640}}>
          Every tier gives you the same traceable classification — from the first passage to the last citation.
          The paid tiers unlock depth, volume, and the workflow plumbing that teams need.
        </p>

        {/* Trial ribbon */}
        <Reveal>
          <div className="pricing-trial" style={{
            marginTop:48, padding:'22px 28px',
            border:'1px solid var(--moss)',
            borderRadius:14,
            background:'linear-gradient(135deg, var(--sage-tint) 0%, var(--canvas) 120%)',
            display:'flex', alignItems:'center', justifyContent:'space-between',
            flexWrap:'wrap', gap:16,
          }}>
            <div style={{display:'flex',alignItems:'center',gap:16,flexWrap:'wrap'}}>
              <span className="chip" data-class="true" style={{height:26,fontSize:11,letterSpacing:'0.06em'}}>
                1 WEEK FREE
              </span>
              <div style={{fontSize:15,color:'var(--ink)',fontWeight:500,letterSpacing:'-0.01em'}}>
                Full Analyst access, no card required for the first 7 days.
              </div>
            </div>
            <button className="btn btn-primary" onClick={()=>startTier('analyst')}>
              Start free trial <Icon name="arrow-right" size={14} style={{marginLeft:4}} className="arrow"/>
            </button>
          </div>
        </Reveal>

        {/* Tier grid */}
        <Reveal delay={80}>
          <div className="pricing-grid" style={{
            marginTop:64,
            display:'grid',
            gridTemplateColumns:'repeat(4, 1fr)',
            gap:20,
          }}>
            {tiers.map(t => {
              const isCurrent = activeTier === t.key;
              return (
              <div key={t.key} className={`pricing-card ${t.highlight?'is-highlight':''} ${isCurrent?'is-current':''}`} style={{
                position:'relative',
                padding:'32px 28px',
                border:`1px solid ${isCurrent ? 'var(--moss-deep)' : (t.highlight?'var(--moss)':'var(--line)')}`,
                borderRadius:16,
                background: t.highlight
                  ? 'linear-gradient(135deg, var(--sage-tint) 0%, var(--canvas) 100%)'
                  : 'var(--canvas)',
                display:'flex', flexDirection:'column', gap:20,
                boxShadow: isCurrent
                  ? '0 0 0 2px var(--moss-deep), 0 18px 36px -24px rgba(62,92,46,0.3)'
                  : (t.highlight ? '0 0 0 1px var(--moss), 0 18px 36px -24px rgba(107,122,90,0.25)' : 'none'),
              }}>
                {isCurrent && (
                  <span style={{
                    position:'absolute', top:12, right:12,
                    padding:'4px 10px', fontSize:10, fontWeight:600,
                    letterSpacing:'0.08em', textTransform:'uppercase',
                    color:'#fff', background:'var(--moss-deep)', borderRadius:999,
                  }}>
                    Current plan
                  </span>
                )}
                {t.highlight && !isCurrent && (
                  <span style={{
                    position:'absolute', top:12, right:12,
                    padding:'4px 10px', fontSize:10, fontWeight:600,
                    letterSpacing:'0.08em', textTransform:'uppercase',
                    color:'#fff', background:'var(--moss-deep)', borderRadius:999,
                  }}>
                    Most popular
                  </span>
                )}
                <div>
                  <div className="eyebrow tabular" style={{color:'var(--moss)'}}>{t.n}</div>
                  <div style={{fontSize:20,fontWeight:600,letterSpacing:'-0.015em',marginTop:10,color:'var(--ink)'}}>
                    {t.label}
                  </div>
                  <div style={{fontSize:12,color:'var(--ink-3)',marginTop:6,letterSpacing:'0.02em'}}>
                    {t.audience}
                  </div>
                </div>

                <div className="pricing-price" style={{display:'flex',alignItems:'baseline',gap:8}}>
                  <span className="tabular" style={{fontSize:44,fontWeight:600,letterSpacing:'-0.03em',color:'var(--ink)',lineHeight:1}}>
                    {t.price}
                  </span>
                  <span style={{fontSize:12,color:'var(--ink-3)'}}>{t.cadence}</span>
                </div>

                <p style={{fontSize:13,lineHeight:'20px',color:'var(--ink-2)',margin:0}}>
                  {t.lede}
                </p>

                <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
                  {t.features.map(f => (
                    <li key={f} style={{
                      display:'flex',alignItems:'flex-start',gap:10,
                      fontSize:13,lineHeight:'20px',color:'var(--ink-2)',
                    }}>
                      <span aria-hidden="true" style={{
                        flex:'0 0 auto', marginTop:6,
                        width:5, height:5, borderRadius:999,
                        background:'var(--moss)',
                      }}/>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <div style={{marginTop:'auto',paddingTop:8}}>
                  <button
                    className={`btn ${isCurrent ? 'btn-ghost' : (t.ctaType==='primary'?'btn-primary':'btn-ghost')}`}
                    style={{width:'100%',justifyContent:'center'}}
                    disabled={isCurrent}
                    onClick={()=>startTier(t.key)}>
                    {isCurrent ? 'Active on your account' : t.cta}
                  </button>
                  {t.trialNote && !isCurrent && (
                    <div style={{marginTop:10,fontSize:11,color:'var(--ink-3)',textAlign:'center',letterSpacing:'0.02em'}}>
                      {t.trialNote}
                    </div>
                  )}
                </div>
              </div>
            );})}
          </div>
        </Reveal>

        {/* Positioning line */}
        <Reveal delay={120}>
          <div style={{
            marginTop:96, paddingTop:48, borderTop:'1px solid var(--line)',
            display:'grid', gridTemplateColumns:'1fr 1fr', gap:64,
          }} className="pricing-position">
            <div>
              <div className="eyebrow" style={{marginBottom:16}}>Why it earns its price</div>
              <div className="serif-moment" style={{fontSize:36,lineHeight:'44px',color:'var(--ink)',maxWidth:480}}>
                Defensible Shared Value intelligence, traceable to source evidence.
              </div>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:24}}>
              {valueProps.map(p => (
                <div key={p.k}>
                  <div style={{fontSize:15,fontWeight:600,letterSpacing:'-0.01em',color:'var(--ink)'}}>{p.k}</div>
                  <p style={{marginTop:6,fontSize:14,lineHeight:'22px',color:'var(--ink-2)'}}>{p.v}</p>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Closing CTA */}
        <Reveal delay={80}>
          <div style={{marginTop:96,display:'flex',gap:16,flexWrap:'wrap',alignItems:'center'}}>
            <button className="btn btn-primary btn-lg" onClick={()=>startTier('analyst')}>
              Start 1-week free trial <Icon name="arrow-right" size={16} style={{marginLeft:4}} className="arrow"/>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={()=>setRoute({page:'method'})}>
              Read the method
            </button>
          </div>
          <p style={{marginTop:32,fontSize:13,color:'var(--ink-3)',maxWidth:640}}>
            Prices in GBP, excluding VAT. Billed monthly. Cancel any time during the trial and you won&rsquo;t be charged.
          </p>
        </Reveal>
      </div>
    </section>
  );
};
window.Pricing = Pricing;