// M08 — Pricing + Checkout
const Pricing = ({ setPage }) => {
  const [billing, setBilling] = React.useState('monthly');
  const [plan, setPlan] = React.useState('studio');

  const tiers = [
    {
      id:'starter', name:'Starter', tag:'For solo founders',
      m:1500, y:14400, accent:'#7c9bff',
      headline:'A focused build, fixed scope.',
      desc:'A landing page, a marketing site, or a quick rebuild — scoped, designed, shipped in 2 weeks.',
      features:[
        ['Up to 5 pages', true],
        ['Design + build', true],
        ['Basic CMS setup', true],
        ['Stripe + Resend hookup', true],
        ['90-day support', true],
        ['Custom AI integration', false],
        ['Dedicated engineer', false],
        ['SLA', false],
      ]
    },
    {
      id:'studio', name:'Studio', tag:'For funded teams',
      m:6500, y:62400, accent:'#d4ff3a', featured:true,
      headline:'A real product build.',
      desc:'Web app, dashboard, or AI-native product. Dedicated team, two-week sprints, weekly demos.',
      features:[
        ['Everything in Starter', true],
        ['Web app / dashboard', true],
        ['Full CMS + admin', true],
        ['AI integration', true],
        ['Auth + payments', true],
        ['Dedicated engineer', true],
        ['12-month support', true],
        ['Custom SLA', false],
      ]
    },
    {
      id:'company', name:'Company', tag:'For scaling teams',
      m:18500, y:177600, accent:'#a78bfa',
      headline:'Embedded engineering team.',
      desc:'2–4 engineers dropped into your stack. Runs alongside your team for a quarter or longer.',
      features:[
        ['Everything in Studio', true],
        ['2–4 dedicated engineers', true],
        ['Embedded in your repo', true],
        ['Custom SLA (4h response)', true],
        ['Architecture review', true],
        ['Quarterly strategy', true],
        ['Code ownership transfer', true],
        ['On-call rotation', true],
      ]
    },
  ];

  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 40px', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div aria-hidden style={{position:'absolute', top:-200, left:'50%', transform:'translateX(-50%)', width:800, height:600, background:'radial-gradient(circle, rgba(212,255,58,0.05), transparent 60%)', filter:'blur(40px)', pointerEvents:'none'}}/>
        <div className="container" style={{position:'relative', textAlign:'center', maxWidth:880, margin:'0 auto'}}>
          <div className="eyebrow" style={{justifyContent:'center',marginBottom:24}}><span className="dot"/>Pricing · transparent, fixed-scope</div>
          <h1 style={{fontSize:'clamp(48px,7vw,96px)', lineHeight:0.95, letterSpacing:'-0.04em', fontWeight:500, marginBottom:24}}>
            Three ways to <span className="serif" style={{color:'var(--accent)'}}>work</span> together.
          </h1>
          <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', marginBottom:36}}>
            No hourly billing. No surprise invoices. Pick a tier, sign the scope, and we ship.
          </p>

          {/* Billing toggle */}
          <div style={{display:'inline-flex',padding:4,borderRadius:10,background:'var(--bg-2)',border:'1px solid var(--line)',gap:2}}>
            {['monthly','annual'].map(b => (
              <button key={b} onClick={()=>setBilling(b)} style={{
                padding:'8px 18px',borderRadius:8,fontSize:13,fontWeight:500,
                background: billing===b ? 'var(--accent)' : 'transparent',
                color: billing===b ? '#0a0a0a' : 'var(--ink-2)',
                textTransform:'capitalize',display:'flex',alignItems:'center',gap:8
              }}>{b}{b==='annual' && <span className="mono" style={{fontSize:9,padding:'2px 6px',background: billing===b ? 'rgba(10,10,10,0.15)' : 'var(--accent)',color: billing===b ? '#0a0a0a' : '#0a0a0a',borderRadius:4,letterSpacing:'0.04em'}}>−20%</span>}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing cards */}
      <section style={{padding:'60px 0 40px'}}>
        <div className="container" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18,alignItems:'start'}}>
          {tiers.map(t => (
            <div key={t.id} onClick={()=>setPlan(t.id)} className="clickable" style={{
              padding:'32px 32px 28px',
              borderRadius:'var(--radius)',
              border:'1px solid',
              borderColor: t.featured ? 'var(--accent)' : 'var(--line)',
              background: t.featured ? 'linear-gradient(180deg, rgba(212,255,58,0.06), var(--bg-2))' : 'var(--bg-2)',
              position:'relative',
              transform: t.featured ? 'translateY(-12px)' : 'none'
            }}>
              {t.featured && (
                <div style={{position:'absolute',top:-12,left:'50%',transform:'translateX(-50%)',padding:'4px 12px',borderRadius:999,background:'var(--accent)',color:'#0a0a0a',fontFamily:'var(--mono)',fontSize:10,fontWeight:600,letterSpacing:'0.06em'}}>
                  MOST POPULAR
                </div>
              )}
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:18}}>
                <div>
                  <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.015em',marginBottom:4}}>{t.name}</div>
                  <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{t.tag.toUpperCase()}</div>
                </div>
                <span style={{width:36,height:36,borderRadius:8,background:`${t.accent}22`,border:`1px solid ${t.accent}55`,display:'flex',alignItems:'center',justifyContent:'center',color:t.accent,fontFamily:'var(--mono)',fontSize:14,fontWeight:600}}>{t.name[0]}</span>
              </div>

              <div style={{marginBottom:18}}>
                <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:6}}>
                  <span style={{fontSize:42,fontWeight:500,letterSpacing:'-0.025em'}}>${(billing==='monthly' ? t.m : t.y/12).toLocaleString(undefined,{maximumFractionDigits:0})}</span>
                  <span style={{fontSize:14,color:'var(--ink-3)'}}>/ {billing==='monthly' ? 'project' : 'month'}</span>
                </div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>
                  {billing==='annual' ? `$${t.y.toLocaleString()} billed annually` : 'fixed-scope, paid 50/50'}
                </div>
              </div>

              <div style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.45,marginBottom:24,minHeight:60}}>{t.desc}</div>

              <button className={t.featured ? 'btn btn-primary' : 'btn btn-ghost'} style={{width:'100%',justifyContent:'center',marginBottom:24}}>
                Choose {t.name} {Icon.arrow()}
              </button>

              <div style={{paddingTop:20,borderTop:'1px solid var(--line)'}}>
                <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>{t.headline.toUpperCase()}</div>
                <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
                  {t.features.map(([l,on],i) => (
                    <li key={l} style={{display:'flex',alignItems:'center',gap:10,fontSize:13,color: on ? 'var(--ink-2)' : 'var(--ink-4)'}}>
                      <span style={{color: on ? 'var(--accent)' : 'var(--ink-4)',display:'flex',width:14}}>{on ? Icon.check() : '○'}</span>
                      <span style={{textDecoration: on ? 'none' : 'line-through'}}>{l}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Comparison table */}
      <section style={{padding:'60px 0', borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{textAlign:'center',marginBottom:40}}>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:12}}>Full comparison.</h2>
            <p style={{fontSize:15,color:'var(--ink-3)'}}>Everything in every tier, side-by-side.</p>
          </div>
          <div style={{border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',gap:0,padding:'14px 24px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.08em'}}>FEATURE</div>
              {tiers.map(t => (
                <div key={t.id} style={{fontSize:13,fontWeight:500,textAlign:'center'}}>{t.name}</div>
              ))}
            </div>
            {[
              ['Discovery workshop','30 min','2 hrs','2 days'],
              ['Design system','Light','Full','Full + tokens'],
              ['Pages / screens','Up to 5','Up to 25','Unlimited'],
              ['CMS','Basic','Full admin','Full + custom collections'],
              ['Auth & payments','—','Stripe + standard','Stripe Connect, multi-tenant'],
              ['AI integration','—','✓','✓ + custom evals'],
              ['Dedicated engineer','—','1','2–4'],
              ['Support window','90 days','12 months','Ongoing'],
              ['Response SLA','Best effort','24h','4h business hours'],
              ['Code handoff','✓','✓','✓ + training'],
            ].map((row,i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',gap:0,padding:'14px 24px',borderTop:'1px solid var(--line)',alignItems:'center'}}>
                <span style={{fontSize:13,color:'var(--ink-2)'}}>{row[0]}</span>
                {row.slice(1).map((v,j) => (
                  <span key={j} style={{fontSize:13,color: v==='—' ? 'var(--ink-4)' : v==='✓' ? 'var(--ok)' : 'var(--ink)',textAlign:'center'}}>{v}</span>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Checkout preview */}
      <section style={{padding:'60px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'start'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:14}}><span className="dot"/>Checkout · powered by Stripe</div>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:20,maxWidth:480}}>
                Pay, sign, kick off — in two minutes.
              </h2>
              <p style={{fontSize:16,color:'var(--ink-2)',lineHeight:1.55,marginBottom:24,maxWidth:480}}>
                Pick a tier, e-sign the SOW, pay the 50% deposit. The project kicks off the next business day with a calendar invite to your first standup.
              </p>
              <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:12}}>
                {[
                  '50% deposit at signing, 50% at handoff',
                  'Card, ACH, or wire — your choice',
                  'PCI Level 1 compliant via Stripe',
                  'Money-back if we miss the launch date',
                ].map(l => (
                  <li key={l} style={{display:'flex',alignItems:'center',gap:10,fontSize:14,color:'var(--ink-2)'}}>
                    <span style={{color:'var(--accent)'}}>{Icon.check()}</span>{l}
                  </li>
                ))}
              </ul>
            </div>

            {/* Checkout mockup */}
            <CheckoutMock tier={tiers.find(t=>t.id===plan) || tiers[1]} billing={billing}/>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48}}>
            <div className="eyebrow"><span className="dot"/>FAQ</div>
            <div style={{maxWidth:760}}>
              <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:24}}>Questions, answered.</h2>
              {[
                ['What if my project needs more than the tier covers?','We re-scope. We never let projects drift past the SOW — instead, we pause and write a Change Order with the new scope and new price. You approve before we proceed.'],
                ['Do you offer hourly contracts?','No. Fixed-scope only. Hourly billing aligns the wrong incentives — we get rewarded for slowness. Fixed-scope means we ship fast or we lose money.'],
                ['What happens after the project ships?','Every tier includes a support window (90 days / 12 months / ongoing). Bug fixes are free. New features are quoted separately.'],
                ['Can I pay in installments?','Yes — Starter & Studio are 50/50 by default. Company is monthly retainer. Custom arrangements via Stripe Invoicing if you need NET-30.'],
                ['Do you sign NDAs?','Yes, before discovery. We have a standard mutual NDA we can send, or sign yours.'],
              ].map(([q,a],i)=>(
                <details key={i} style={{padding:'18px 0',borderTop:'1px solid var(--line)'}}>
                  <summary style={{display:'flex',justifyContent:'space-between',alignItems:'center',cursor:'pointer',fontSize:17,fontWeight:500,letterSpacing:'-0.005em'}}>
                    {q} <span style={{color:'var(--ink-3)',fontSize:14}}>+</span>
                  </summary>
                  <p style={{marginTop:12,fontSize:14,color:'var(--ink-2)',lineHeight:1.6}}>{a}</p>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const CheckoutMock = ({ tier, billing }) => {
  const price = billing==='monthly' ? tier.m : tier.y/12;
  const subtotal = price;
  const tax = Math.round(price * 0.08);
  const total = subtotal + tax;
  return (
    <div className="card" style={{padding:0,overflow:'hidden'}}>
      <div style={{padding:'14px 18px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:10}}>
        <span style={{padding:'3px 8px',borderRadius:5,background:'#635bff22',border:'1px solid #635bff55',color:'#a4a0ff',fontFamily:'var(--mono)',fontSize:10,fontWeight:600,letterSpacing:'0.04em'}}>STRIPE</span>
        <span style={{fontSize:12,color:'var(--ink-3)'}}>Secure checkout · 256-bit TLS</span>
        <div style={{flex:1}}/>
        <span style={{color:'var(--ink-3)',fontSize:13}}>×</span>
      </div>

      <div style={{padding:'24px 28px',display:'flex',flexDirection:'column',gap:18}}>
        {/* Order */}
        <div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>Order</div>
          <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
            <div style={{display:'flex',justifyContent:'space-between',marginBottom:6}}>
              <div style={{fontSize:13,fontWeight:500}}>{tier.name} · {billing}</div>
              <div style={{fontSize:13}}>${price.toLocaleString(undefined,{maximumFractionDigits:0})}</div>
            </div>
            <div style={{fontSize:11,color:'var(--ink-3)'}}>{tier.tag}</div>
          </div>
        </div>

        {/* Card */}
        <div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>Card details</div>
          <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
            <span style={{fontFamily:'var(--mono)',fontSize:13,color:'var(--ink-3)',letterSpacing:'0.04em'}}>4242 4242 4242 4242</span>
            <div style={{flex:1}}/>
            <span style={{padding:'3px 8px',borderRadius:4,background:'#1a1f3c',color:'#fff',fontFamily:'var(--mono)',fontSize:9,fontWeight:700,letterSpacing:'0.04em'}}>VISA</span>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            <div style={{padding:'10px 14px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',fontFamily:'var(--mono)',fontSize:12,color:'var(--ink-3)'}}>12 / 28</div>
            <div style={{padding:'10px 14px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',fontFamily:'var(--mono)',fontSize:12,color:'var(--ink-3)'}}>•••</div>
          </div>
        </div>

        {/* Summary */}
        <div style={{paddingTop:14,borderTop:'1px solid var(--line)'}}>
          {[['Subtotal',subtotal],['Tax (8%)',tax]].map(([l,v]) => (
            <div key={l} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',fontSize:13,color:'var(--ink-3)'}}>
              <span>{l}</span><span>${v.toLocaleString()}</span>
            </div>
          ))}
          <div style={{display:'flex',justifyContent:'space-between',padding:'12px 0 6px',marginTop:8,borderTop:'1px solid var(--line)',fontSize:15,fontWeight:500}}>
            <span>Total due today</span>
            <span style={{color:'var(--accent)'}}>${Math.round(total*0.5).toLocaleString()}</span>
          </div>
          <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>50% deposit · remainder at handoff</div>
        </div>

        <button className="btn btn-primary" style={{width:'100%',justifyContent:'center',padding:'12px 16px'}}>
          Pay & sign SOW {Icon.arrow()}
        </button>
        <div style={{fontSize:11,color:'var(--ink-3)',textAlign:'center'}}>
          By continuing you agree to the SOW & terms.
        </div>
      </div>
    </div>
  );
};

window.Pricing = Pricing;