/* GCCReady — Programs, Sprint, Pricing */

function ProgramsPage() {
  return (
    <>
      <PageHead
        title="Programs — Skill Badge · Crash Course · Sprint · Certifications"
        description="Four programs. One coherent pathway. Free Skill Badge assessment → 6-week Crash Course → 12-week Sprint with placement guarantee → stacked Certifications (US CPA / CMA / EA / CFA / ACCA). Every program feeds the next."
        canonical="/programs"
        schema={[
          schemaCollection({
            name:'GCCReady Programs',
            description:'Four-program pathway from Skill Badge to Certification.',
            url:'/programs',
            items:[{name:'Skill Badge',url:'/skill-badge'},{name:'Crash Course',url:'/programs#crash'},{name:'GCC Sprint',url:'/sprint'},{name:'Certifications',url:'/certifications'}],
          }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Programs',href:'/programs'}]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Pill tone="gold" icon="layers">Our Programs · Stack to save up to 35%</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:60, marginTop:20, marginBottom:18}}>
            Four programs.<br/>
            <span style={{color:'#F59E0B'}}>One coherent pathway.</span>
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19, maxWidth:760}}>
            Every program feeds the next. Skill Badge level determines where you start; stacking unlocks discounts at every step. Crash Course → 20% off Sprint. Sprint → 50% off your first Certification fee.
          </p>
          <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
            <a href="#/skill-badge" className="gr-btn gr-btn-gold gr-btn-lg">Start with the free Skill Badge <Icon name="arrow-right" size={16}/></a>
            <a href="#all-programs" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.1)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>See all 4 programs</a>
          </div>
        </div>
      </HeroDark>

      {/* Pathway visual: 4-step ladder */}
      <section className="gr-section" id="all-programs" style={{padding:'56px 0 24px'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="The pathway" title="Skill Badge → Crash Course → Sprint → Certification" sub="Stackable. Each step unlocks the next at a discount."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {[
              { n:'01', t:'Skill Badge', tag:'FREE · 5 min', body:'Self-assessment → L1/L2/L3 + cert recommendation + role pod + named GCCs hiring.', href:'#/skill-badge', accent:'#F59E0B' },
              { n:'02', t:'Crash Course', tag:'₹7,999 · 6 weeks', body:'GCC Fundamentals — vocabulary, tools, comms. Bridges L1→L2.', href:'#crash', accent:'#0891B2' },
              { n:'03', t:'GCC Sprint', tag:'₹34,999 · 12 weeks · placement guaranteed', body:'Domain deep-dive + 3 live projects + GCC mentor + placement support.', href:'#sprint', accent:'#FBBF24', featured:true },
              { n:'04', t:'Certifications', tag:'CPA / CMA / EA / CFA / ACCA', body:'Stack a globally-recognised credential. Sprint grads get 50% off first cert.', href:'#/certifications', accent:'#9333EA' },
            ].map((s) => (
              <a key={s.n} href={s.href} className="gr-card" style={{
                padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
                display:'flex', flexDirection:'column', gap:12,
                borderTop:`3px solid ${s.accent}`,
                ...(s.featured && { boxShadow:'var(--gr-shadow-gold)' }),
              }}>
                <div style={{font:'800 32px/1 "DM Sans"', color: s.accent, letterSpacing:'-0.02em'}}>{s.n}</div>
                <h3 style={{font:'800 20px/1.25 "DM Sans"', color:'var(--gr-navy)', margin:0}}>{s.t}</h3>
                <span style={{font:'700 11px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.10em', textTransform:'uppercase'}}>{s.tag}</span>
                <p style={{font:'500 13.5px/1.55 Inter', color:'var(--gr-fg-2)', margin:0}}>{s.body}</p>
                <div style={{marginTop:'auto', paddingTop:6, font:'700 13px/1 Inter', color: s.accent, display:'inline-flex', gap:6}}>
                  Open <Icon name="arrow-right" size={12}/>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Skill Badge card (free entry) */}
      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}} id="skill-badge">
        <div className="gr-container">
          <ProgramDetail
            tag="FREE · 5 minutes"
            title="Skill Badge — Free GCC readiness assessment"
            price="₹0" priceSub="free forever · re-take quarterly"
            desc="The starting point for every GCCReady journey. A 10-question branching self-assessment that produces a verified L1/L2/L3 readiness level + recommended certification + role pod + a list of named GCCs hiring for your profile. Shareable on LinkedIn."
            outcomes={['Verified readiness level (L1 / L2 / L3) recognised by 41 hiring partners', 'Personalised cert recommendation (CPA / CMA / EA / CFA / ACCA / Power BI)', 'One role pod from 22 we curate', 'List of 5 named GCCs hiring for your profile', 'LinkedIn-shareable digital badge with verifiable URL']}
            curriculum={[
              ['Q 1–3', 'Demographics', 'Degree, stream, year — establishes baseline.'],
              ['Q 4–6', 'Career intent', 'Target function, timeline, geography preference.'],
              ['Q 7–10', 'Skill snapshot', 'Tools known, English fluency, prior internships.'],
              ['Output', 'Skill Badge card + 3 next steps', 'Personalised PNG badge + saved plan + email-my-plan option.'],
            ]}
            ctaLabel="Start the assessment"
            ctaHref="#/skill-badge"
          />
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}} id="crash">
        <div className="gr-container">
          <ProgramDetail
            tag="6 weeks · Self-paced + live"
            title="Crash Course — GCC Fundamentals"
            price="₹7,999" priceSub="one-time · EMI available"
            desc="The vocabulary and playbooks every GCC hire is expected to know on day one. Designed as a stand-alone L1→L2 bridge, or as prep for the Sprint."
            outcomes={['Move from L1 to L2 on your Skill Badge', 'Understand the GCC operating model, SLA culture, shift patterns', '90 hrs of content: 40 hrs live, 50 hrs async projects', '3 mock interviews with GCC hiring managers']}
            curriculum={[
              ['Week 1', 'GCC 101 + Tools foundation', 'The captive model, typical orgcharts, how SLAs work. Primer on SAP, Workday, ServiceNow, Jira.'],
              ['Week 2', 'Business English for Workplace', 'Email, Slack, standups, status decks. Not grammar — tone, clarity, brevity. Taught by GCC senior managers.'],
              ['Week 3', 'Excel & Data Literacy', 'Pivot tables, VLOOKUP/XLOOKUP, Power Query, basic SQL, reading dashboards.'],
              ['Week 4', 'Process Thinking', 'Reading SOPs. Writing SOPs. RCA / 5-why. Escalation paths. Peer-review exercise.'],
              ['Week 5', 'Stakeholder & Cross-Cultural Comms', 'Working with US/EU counterparts. Time zones. Managing up. Giving & receiving feedback.'],
              ['Week 6', 'Simulation Week + Interviews', 'Live 2-day simulation of a real GCC issue. 3 mock interviews. Skill Badge re-take.'],
            ]}
            ctaLabel="Enrol in the next batch"
            ctaHref="#/pricing#crash"
          />
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}} id="sprint">
        <div className="gr-container">
          <ProgramDetail
            tag="12 weeks · Cohort · Placement-guaranteed"
            title="GCC Sprint — Domain Deep Dive"
            price="₹34,999" priceSub="or ISA: 0 upfront · 15% of first-year CTC, capped"
            desc="Our flagship outcomes program. You pick a domain — Finance Ops, Risk, Data, SWE, SupplyChain — and go deep. One-on-one mentor from a partner GCC. 3 live projects. Real employer intros."
            featured
            outcomes={['Placement guarantee: if no offer within 90 days of completion, full refund', 'One-on-one mentor from a partner GCC in your chosen domain', '3 portfolio projects reviewed by hiring managers', 'Priority access to 41 hiring partners', 'Skill Badge bump guaranteed to L3']}
            curriculum={[
              ['Weeks 1–2', 'Crash Course refresher (waived if completed)', 'Covers the L1→L2 fundamentals. Waived if you\'ve completed the Crash Course or assessed at L2+.'],
              ['Weeks 3–4', 'Domain deep-dive I', 'Process flows, tools, case studies in your chosen domain (e.g. P2P in Finance Ops, or SRE basics in SWE).'],
              ['Weeks 5–8', 'Live Project #1 + #2', 'Two consecutive 2-week projects sourced from partner GCCs. Anonymised real data. Reviewed by the sponsoring GCC\'s team lead.'],
              ['Weeks 9–10', 'Project #3 + Portfolio build', 'Capstone project + polished portfolio artefact. LinkedIn, GitHub/Drive, interview stories.'],
              ['Weeks 11–12', 'Placement Sprint', 'Company-specific interview prep. 6+ intros per student. Offer support.'],
            ]}
            ctaLabel="Apply to next cohort"
            ctaHref="#/sprint"
          />
        </div>
      </section>

      {/* Certifications stack (the 4th program) */}
      <section className="gr-section" id="certifications-stack">
        <div className="gr-container">
          <ProgramDetail
            tag="Stackable on Sprint · 50% off first cert"
            title="Certifications — Stack a globally-recognised credential"
            price="₹0.7 – 4 L" priceSub="varies by cert · see pillar pages for fees"
            desc="The fourth program in the pathway. Pick one of US CPA, US CMA, EA, CFA or ACCA — we run cert prep alongside or after Sprint, with EMI options, mentor support from a Verified Mentor at a named GCC, and placement support across our 41 hiring partners."
            outcomes={['Live now: US CPA · US CMA · EA · CFA · Power BI · ESG · AFP FP&A', 'Upcoming: ACCA (join waitlist for early-access pricing)', 'Sprint graduates: 50% off first certification fee', 'Verified Mentor sessions on the cert syllabus', 'Skill Badge upgraded to L3+ on cert pass', 'Direct intros to GCCs hiring for your cert path']}
            curriculum={[
              ['US CPA', 'Audit / Tax / Big 4 GDS · 12–24 mo · ₹3.5–5 L', 'AICPA — global gold standard for accounting.'],
              ['US CMA', 'FP&A / Finance Ops · 8–12 mo · ₹1.5–2 L', 'IMA — fastest path to FP&A roles.'],
              ['EA',     'US Tax · 4–8 mo · ₹0.7–1 L', 'IRS — fastest US-tax credential, no degree required.'],
              ['CFA',    'Investment / Risk / Portfolio · 2.5–4 yr · ₹3–4 L', 'CFA Institute — gold standard for buy/sell-side.'],
              ['ACCA',   'UK / ME finance · 1.5–3 yr · ₹2–3 L', 'ACCA UK — global mobility (upcoming).'],
            ]}
            ctaLabel="Browse all 5 cert pillars"
            ctaHref="#/certifications"
          />
        </div>
      </section>

      <CTABand title="Not sure which program to start with?" sub="Take the free Skill Badge. Your result page will recommend the right pathway." primaryLabel="Get your Skill Badge" primaryHref="#/skill-badge"/>
    </>
  );
}

function ProgramDetail({ tag, title, price, priceSub, desc, outcomes, curriculum, ctaLabel, ctaHref, featured }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'flex-start'}}>
      <div>
        <Pill tone={featured?'gold':'navy'}>{tag}</Pill>
        <h2 className="gr-h2" style={{marginTop:14, marginBottom:14}}>{title}</h2>
        <p className="gr-lead" style={{marginBottom:22}}>{desc}</p>
        <div style={{background: featured?'var(--gr-navy)':'#fff', color: featured?'#fff':'inherit', borderRadius:20, padding:24, border:`1px solid ${featured?'var(--gr-navy-800)':'var(--gr-border)'}`, marginBottom:24}}>
          <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:14}}>
            <span style={{font:'800 34px/1 DM Sans', letterSpacing:'-0.025em', color: featured?'#FBBF24':'var(--gr-navy)'}}>{price}</span>
            <span style={{font:'500 14px/1 Inter', color: featured?'rgba(255,255,255,.6)':'var(--gr-fg-3)'}}>{priceSub}</span>
          </div>
          <ul style={{listStyle:'none', padding:0, margin:'0 0 18px', display:'flex', flexDirection:'column', gap:10}}>
            {outcomes.map(o=>(
              <li key={o} style={{display:'flex', gap:10, font:'500 14px/1.5 Inter', color: featured?'rgba(255,255,255,.85)':'var(--gr-fg-2)'}}>
                <Icon name="check-circle" size={15} style={{color: featured?'#FBBF24':'var(--gr-green)', flexShrink:0, marginTop:2}}/>{o}
              </li>
            ))}
          </ul>
          <a href={ctaHref} className="gr-btn" style={{background: featured?'var(--gr-gold)':'var(--gr-navy)', color: featured?'var(--gr-navy)':'#fff', width:'100%'}}>{ctaLabel} <Icon name="arrow-right" size={15}/></a>
        </div>
      </div>
      <div>
        <div className="gr-eyebrow" style={{marginBottom:16}}>Curriculum at a glance</div>
        <div style={{background:'#fff', borderRadius:20, border:'1px solid var(--gr-border)', overflow:'hidden'}}>
          {curriculum.map((w, i)=>(
            <div key={i} style={{padding:'20px 22px', display:'grid', gridTemplateColumns:'100px 1fr', gap:16, borderTop: i>0 ? '1px solid var(--gr-border-soft)' : 'none'}}>
              <div style={{font:'800 12px/1 DM Sans', color:'var(--gr-gold-700)', letterSpacing:'.1em', textTransform:'uppercase', paddingTop:4}}>{w[0]}</div>
              <div>
                <div style={{font:'700 15px/1.3 DM Sans', color:'var(--gr-navy)', marginBottom:4}}>{w[1]}</div>
                <div style={{font:'400 13.5px/1.55 Inter', color:'var(--gr-fg-2)'}}>{w[2]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SprintPage() {
  return (
    <>
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="gold" icon="rocket">GCC Sprint · Cohort 08 · Starts 15 Feb 2026</Pill>
            <h1 className="gr-h1" style={{color:'#fff', fontSize:58, marginTop:20, marginBottom:18}}>12 weeks between you and a GCC offer.</h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19}}>
              The Sprint is our placement-guaranteed flagship. You pick a domain. We pair you with a mentor from a GCC in that domain. You build three live projects. Then we get you interviews.
            </p>
            <div style={{display:'flex', gap:12, marginTop:26, flexWrap:'wrap'}}>
              <a href="#/sprint#apply" className="gr-btn gr-btn-gold gr-btn-lg">Apply to Cohort 08 <Icon name="arrow-right" size={16}/></a>
              <a href="#/sprint#webinar" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>Free info session · Sat 10am</a>
            </div>
          </div>
          <div style={{background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.12)', borderRadius:24, padding:28}}>
            <div className="gr-eyebrow" style={{color:'#FBBF24', marginBottom:18}}>Cohort 08 · At a glance</div>
            {[['Start date','15 February 2026'],['Duration','12 weeks'],['Format','Evenings 7–10pm IST · Sat 10–2'],['Seats left','34 of 60'],['Placement guarantee','100% refund if no offer in 90 days'],['Median offer (Cohort 06)','₹8.2L']].map(([k, v])=>(
              <div key={k} style={{display:'flex', justifyContent:'space-between', padding:'12px 0', borderTop:'1px solid rgba(255,255,255,.08)'}}>
                <span style={{font:'500 13.5px/1.3 Inter', color:'rgba(255,255,255,.7)'}}>{k}</span>
                <span style={{font:'700 14px/1.3 DM Sans', color:'#fff'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Domain tracks" title="Pick your specialty at week 1" sub="Every Sprinter specialises into one track. We cap each track at 12 students so mentors have time for 1:1 coaching."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {[
              ['Finance & Accounting Ops','P2P, R2R, O2C, FP&A','landmark','Wells Fargo, Target, Tesco'],
              ['Risk, Audit & Compliance','SOX, KYC, ops risk','shield-check','JP Morgan, StanChart, Deloitte'],
              ['Data & Analytics','SQL, Power BI, Tableau, Python','bar-chart','Walmart, Shell, Cisco'],
              ['Software Engineering','Full-stack, SRE, platform','cpu','SAP Labs, Boeing, Mercedes'],
              ['Procurement & Supply Chain','Ariba, S&OP, logistics','package','Lowe\'s, Target, Philips'],
              ['Customer & Partner Ops','CX, trust & safety, partner ops','users','Meta, Google, Uber'],
            ].map(t=>(
              <div key={t[0]} style={{background:'var(--gr-bg-tint)', borderRadius:20, padding:24}}>
                <div style={{display:'flex', gap:12, alignItems:'center', marginBottom:14}}>
                  <div style={{width:40, height:40, borderRadius:10, background:'var(--gr-navy)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <Icon name={t[2]} size={18}/>
                  </div>
                  <h4 className="gr-h4" style={{fontSize:16}}>{t[0]}</h4>
                </div>
                <div style={{font:'500 13px/1.45 Inter', color:'var(--gr-fg-2)', marginBottom:12}}>{t[1]}</div>
                <div style={{font:'500 11.5px/1.4 Inter', color:'var(--gr-fg-3)'}}>Hiring: {t[3]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}} id="apply">
        <div className="gr-container" style={{maxWidth:720}}>
          <SectionTitle eyebrow="Application" title="Apply to Cohort 08" align="center" sub="Takes 10 minutes. You'll hear back within 3 working days. No application fee."/>
          <div style={{background:'#fff', borderRadius:24, border:'1px solid var(--gr-border)', padding:36}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:14}}>
              <LabeledInput label="Full name" placeholder="Priya Sharma"/>
              <LabeledInput label="Email" placeholder="priya@example.com"/>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:14}}>
              <LabeledInput label="WhatsApp" placeholder="+91 98xxx xxxxx"/>
              <LabeledInput label="Graduating year" placeholder="2026"/>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:14}}>
              <LabeledInput label="Current course" placeholder="B.Com Hons"/>
              <LabeledInput label="College / University" placeholder="Christ University"/>
            </div>
            <LabeledInput label="Which track interests you most?" placeholder="e.g. Finance & Accounting Ops" block/>
            <LabeledInput label="Why GCCReady? (2–3 sentences)" placeholder="I'm in my final year at a Tier-2 college..." textarea/>
            <div style={{display:'flex', gap:14, alignItems:'center', marginTop:22}}>
              <a href="#" className="gr-btn gr-btn-primary gr-btn-lg" style={{flex:1}}>Submit application <Icon name="arrow-right" size={16}/></a>
              <span style={{font:'500 12px/1.4 Inter', color:'var(--gr-fg-3)', flex:1}}>By applying you agree to our <a href="#/legal/terms" style={{color:'var(--gr-navy)'}}>Terms</a> & <a href="#/legal/privacy" style={{color:'var(--gr-navy)'}}>Privacy</a>.</span>
            </div>
          </div>
        </div>
      </section>

      <CTABand title="Can't make Cohort 08?" sub="Cohort 09 opens June 2026. Get on the waitlist and we'll send you info-session dates." primaryLabel="Join waitlist" primaryHref="#/contact"/>
    </>
  );
}

function LabeledInput({ label, placeholder, textarea, block }) {
  return (
    <div style={{gridColumn: block ? '1 / -1' : 'auto', marginBottom: textarea?14:0}}>
      <label style={{display:'block', font:'600 12.5px/1 Inter', color:'var(--gr-navy)', marginBottom:8, letterSpacing:'.02em'}}>{label}</label>
      {textarea ? (
        <textarea placeholder={placeholder} rows={4} style={{width:'100%', padding:'12px 14px', border:'1.5px solid var(--gr-border)', borderRadius:12, font:'400 14px/1.5 Inter', resize:'vertical'}}/>
      ) : (
        <input placeholder={placeholder} style={{width:'100%', padding:'12px 14px', border:'1.5px solid var(--gr-border)', borderRadius:12, font:'400 14px/1.5 Inter'}}/>
      )}
    </div>
  );
}

function PricingPage() {
  const plans = [
    { name:'Skill Badge', price:'Free', sub:'Forever', desc:'Our GCC readiness passport.', bullets:['Full assessment (45 min)','Digital card + QR','Quarterly retakes','Visible to 40+ GCCs (opt-in)','Personalised pathway recommendation'], cta:['Start assessment','#/skill-badge'], tone:'ghost' },
    { name:'Crash Course', price:'₹7,999', sub:'One-time · EMI 3/6/9 mo', desc:'6-week L1→L2 bridge.', bullets:['90 hrs (40 live + 50 async)','Taught by GCC seniors','L1→L2 Skill Badge bump','3 mock interviews','Completion certificate'], cta:['Enrol now','#/programs#crash'], tone:'ghost' },
    { name:'GCC Sprint', price:'₹34,999', sub:'or ISA: 0 upfront, 15% CTC (capped ₹60k)', desc:'12-week placement-guaranteed cohort.', bullets:['1:1 GCC mentor','3 live projects','Priority intros to 41 GCCs','Full refund if unplaced in 90 days','L3 Skill Badge bump'], cta:['Apply to cohort','#/sprint'], tone:'primary', featured:true },
    { name:'Certifications', price:'From ₹89k', sub:'incl. exam fees', desc:'US CMA · US CPA · CFA tracks.', bullets:['3–18 month study plans','Live classes + question banks','Official AICPA / IMA / CFA Institute materials','Placement into finance GCCs','GCCReady alumni community'], cta:['See all certifications','#/certifications'], tone:'ghost' },
  ];
  return (
    <>
      <HeroDark>
        <div style={{textAlign:'center', maxWidth:720, margin:'0 auto'}}>
          <Pill tone="gold" icon="coins">Pricing</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:58, marginTop:20, marginBottom:18}}>Transparent pricing. Skin-in-the-game guarantees.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19}}>
            Free to start. Pay only when you're ready. Placement guarantee on Sprint — if you don't get placed in 90 days, we refund 100%.
          </p>
        </div>
      </HeroDark>
      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {plans.map(p => (
              <div key={p.name} style={{
                background: p.featured?'var(--gr-navy)':'#fff',
                color: p.featured?'#fff':'inherit',
                border: `1px solid ${p.featured?'var(--gr-navy-800)':'var(--gr-border)'}`,
                borderRadius:20, padding:26, position:'relative',
                boxShadow: p.featured?'var(--gr-shadow-navy)':'none',
              }}>
                {p.featured && <div style={{position:'absolute', top:-10, left:20, background:'var(--gr-gold)', color:'var(--gr-navy)', font:'800 10px/1 Inter', letterSpacing:'.1em', textTransform:'uppercase', padding:'6px 10px', borderRadius:6}}>Most popular</div>}
                <h4 className="gr-h4" style={{color: p.featured?'#fff':'var(--gr-navy)', fontSize:18}}>{p.name}</h4>
                <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:10}}>
                  <span style={{font:'800 28px/1 DM Sans', letterSpacing:'-0.02em', color: p.featured?'#FBBF24':'var(--gr-navy)'}}>{p.price}</span>
                </div>
                <div style={{font:'500 12px/1.4 Inter', color: p.featured?'rgba(255,255,255,.55)':'var(--gr-fg-3)', marginTop:4, marginBottom:12}}>{p.sub}</div>
                <p style={{margin:'0 0 18px', font:'500 13.5px/1.55 Inter', color: p.featured?'rgba(255,255,255,.75)':'var(--gr-fg-2)'}}>{p.desc}</p>
                <ul style={{listStyle:'none', padding:0, margin:'0 0 20px', display:'flex', flexDirection:'column', gap:8}}>
                  {p.bullets.map(b=>(
                    <li key={b} style={{display:'flex', gap:8, font:'500 13px/1.4 Inter', color: p.featured?'rgba(255,255,255,.82)':'var(--gr-fg-2)'}}>
                      <Icon name="check" size={13} style={{flexShrink:0, marginTop:3, color: p.featured?'#FBBF24':'var(--gr-green)'}}/>{b}
                    </li>
                  ))}
                </ul>
                <a href={p.cta[1]} className="gr-btn" style={{width:'100%', background: p.featured?'var(--gr-gold)':p.tone==='primary'?'var(--gr-navy)':'transparent', color: p.featured?'var(--gr-navy)':p.tone==='primary'?'#fff':'var(--gr-navy)', border: p.featured||p.tone==='primary'?'none':'1.5px solid var(--gr-border-dark)'}}>{p.cta[0]}</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Scholarships" title="We fund students who can't pay" sub="If fees are the only barrier, we have a solution for you. 18% of our Sprint cohort is on full or partial scholarship."/>
          <FeatureGrid items={[
            { icon:'gift', title:'Diversity Scholarship (100% fee)', desc:'For first-generation college students from SC/ST/OBC backgrounds. 12 seats per Sprint cohort.' },
            { icon:'map-pin', title:'Tier-3 City Scholarship (50%)', desc:'If your college is outside the top 30 metros, you get half off the Sprint fee — no application.' },
            { icon:'heart-pulse', title:'ISA only, no upfront', desc:'Any Sprint applicant can opt for the ISA path. Pay 15% of first-year CTC after you join — capped at ₹60k.' },
          ]}/>
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container" style={{maxWidth:820}}>
          <SectionTitle eyebrow="Pricing FAQ" title="Common questions" align="center"/>
          <Accordion items={[
            { q:'Do I get a refund if I drop out?', a:'Full refund within 7 days of program start (Cooling-off window). After that, we refund 50% up to week 4, and 0% after. The Sprint placement guarantee is separate — if you complete the program and don\'t get placed, it\'s a full refund.' },
            { q:'What does ISA actually mean?', a:'Income Share Agreement. You pay ₹0 upfront for the Sprint. Once you join a GCC role paying >₹5L, you pay 15% of your first-year CTC (monthly, post-tax). The total is capped at ₹60k. If you don\'t cross ₹5L, you owe nothing.' },
            { q:'Can my employer pay for the Crash Course?', a:'Yes, we offer a B2B invoice and can structure as reimbursement. Several GCCs pay for high-potential early-career staff to take our Crash Course.' },
            { q:'Are certification exam fees included?', a:'For US CMA, yes (both parts). For US CPA, yes (all four sections + India-out-of-state evaluation). For CFA, yes (Level 1 + registration).' },
          ]}/>
        </div>
      </section>

      <CTABand title="Still have questions?" sub="Our advisors respond within 8 minutes on WhatsApp."/>
    </>
  );
}

Object.assign(window, { ProgramsPage, SprintPage, PricingPage });