/* GCCReady — For Students, For Colleges, For Employers */

function ForStudentsPage() {
  return (
    <>
      <HeroDark>
        <div style={{maxWidth:760}}>
          <Pill tone="gold" icon="graduation-cap">For Students & Early-Career Professionals</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:60, marginTop:20, marginBottom:18}}>
            The career path your campus won't tell you about.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19, maxWidth:680}}>
            If you're a B.Com, BBA, B.Sc, or non-CS B.Tech student graduating in the next 18 months — this page is for you. GCCs hire 400,000+ graduates a year in India. We'll get you one of those seats.
          </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="#/sprint" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>See next Sprint cohort</a>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="The path" title="What the next 12 months could look like" sub="For a typical Commerce or non-CS Engineering student in their pre-final or final year."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {[
              { m:'Month 0', t:'Skill Badge', d:'Take the free assessment. Get your L0–L3 level and a personalised plan.', i:'qr' },
              { m:'Month 1–2', t:'Crash Course', d:'Learn the GCC vocabulary: tools, process flows, stakeholder English.', i:'zap' },
              { m:'Month 3–5', t:'Domain Sprint', d:'Pick Finance Ops, Data, Risk, or SWE. Build 3 portfolio projects.', i:'rocket' },
              { m:'Month 6', t:'Interviewing', d:'Direct intros to 40+ GCC hiring managers. Mock interviews. Offer.', i:'briefcase' },
            ].map((s,i) => (
              <div key={i} style={{background:'var(--gr-bg-tint)', borderRadius:20, padding:24}}>
                <div style={{font:'700 11px/1 DM Sans', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>{s.m}</div>
                <div style={{width:44, height:44, borderRadius:12, background:'#fff', color:'var(--gr-navy)', display:'flex', alignItems:'center', justifyContent:'center', margin:'12px 0'}}>
                  <Icon name={s.i} size={20}/>
                </div>
                <div style={{font:'700 17px/1.25 DM Sans', color:'var(--gr-navy)', marginBottom:6}}>{s.t}</div>
                <div style={{font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)'}}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Am I a fit?" title="Who GCCReady is (and isn't) for"/>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
            <div style={{background:'#fff', borderRadius:24, padding:32, border:'1px solid var(--gr-green-100)'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:16}}>
                <Icon name="check-circle" size={22} style={{color:'var(--gr-green)'}}/>
                <span style={{font:'700 13px/1 Inter', color:'var(--gr-green)', letterSpacing:'.1em', textTransform:'uppercase'}}>You'll thrive here</span>
              </div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12}}>
                {['B.Com / BBA / BBM / BMS graduating 2025–2027','Non-CS engineering (Mech, Civil, EEE, ECE) looking to pivot','B.Sc (Stats, Maths, Eco, CS) — any stream','Early-career (0–2 yrs) stuck in BPO, voice, or sales wanting to move up','Tier 2/3 college students not targeted by Day-1 campus placements'].map(x => (
                  <li key={x} style={{display:'flex', gap:10, font:'500 15px/1.5 Inter', color:'var(--gr-fg-1)'}}>
                    <Icon name="check" size={16} style={{marginTop:3, color:'var(--gr-green)'}}/> {x}
                  </li>
                ))}
              </ul>
            </div>
            <div style={{background:'#fff', borderRadius:24, padding:32, border:'1px solid var(--gr-border)'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:16}}>
                <Icon name="info" size={22} style={{color:'var(--gr-fg-3)'}}/>
                <span style={{font:'700 13px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.1em', textTransform:'uppercase'}}>Not the right fit</span>
              </div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12}}>
                {['Top-tier CS (IIT/NIT) targeting product startups — you have better options','3+ years of specialized domain experience wanting a lateral switch','Looking for government exam (UPSC/SSC) preparation','Wanting an MBA — our offering complements but doesn\'t replace'].map(x => (
                  <li key={x} style={{display:'flex', gap:10, font:'500 15px/1.5 Inter', color:'var(--gr-fg-2)'}}>
                    <Icon name="x" size={16} style={{marginTop:3, color:'var(--gr-fg-4)'}}/> {x}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}} id="placement">
        <div className="gr-container">
          <SectionTitle eyebrow="Placement outcomes" title="Where Batch 6 went" sub="172 students completed the Sprint in H1 2025. 126 accepted offers within 90 days. Here's the breakdown."/>
          <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'stretch'}}>
            <div style={{background:'var(--gr-navy)', borderRadius:24, padding:36, color:'#fff'}}>
              <div style={{fontSize:14, color:'rgba(255,255,255,.6)', marginBottom:16, font:'500 13px/1 Inter'}}>Offer CTC distribution · Batch 6</div>
              <div style={{display:'flex', flexDirection:'column', gap:14}}>
                {[
                  ['₹12L+',         18, '#FBBF24'],
                  ['₹9–12L',        34, '#F59E0B'],
                  ['₹6–9L',         51, '#0891B2'],
                  ['₹4.5–6L',       21, '#4D6382'],
                  ['< ₹4.5L',        2, '#64748B'],
                ].map(([b, n, c]) => (
                  <div key={b}>
                    <div style={{display:'flex', justifyContent:'space-between', font:'600 13px/1 Inter', marginBottom:6}}>
                      <span>{b}</span><span style={{color:'rgba(255,255,255,.6)'}}>{n} offers</span>
                    </div>
                    <div style={{height:10, background:'rgba(255,255,255,.08)', borderRadius:999}}>
                      <div style={{height:10, width:`${(n/51)*100}%`, background:c, borderRadius:999}}/>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{marginTop:24, paddingTop:20, borderTop:'1px solid rgba(255,255,255,.1)', display:'flex', justifyContent:'space-between', font:'500 13px/1 Inter', color:'rgba(255,255,255,.7)'}}>
                <span>Median offer: <strong style={{color:'#FBBF24'}}>₹8.2L</strong></span>
                <span>P75: <strong style={{color:'#fff'}}>₹11.4L</strong></span>
              </div>
            </div>
            <StatStrip items={[
              { value:'73%', label:'Placed in 90 days', sub:'Across all Sprint cohorts, 2023–25' },
              { value:'2.8×', label:'Median CTC lift', sub:'vs BPO/voice baseline' },
              { value:'41', label:'Hiring partners', sub:'Captive GCCs, active contracts' },
            ]}/>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}} id="early">
        <div className="gr-container">
          <SectionTitle eyebrow="For early-career professionals (0–2 yrs)" title="Stuck in the wrong first job? Let's fix that."
            sub="If you took a BPO or voice role out of college and want to move to a GCC analyst track, our 12-week evening Sprint is built for you."/>
          <FeatureGrid items={[
            { icon:'clock',    title:'Evenings + weekends', desc:'Live classes 7–10pm IST. No need to quit your job while training.' },
            { icon:'users',    title:'Peer cohort',         desc:'Average cohort age 23. Everyone in the same boat. Strong alumni network.' },
            { icon:'user-check', title:'Exit interview support', desc:'We help you negotiate the switch and manage notice period. It\'s a whole thing.' },
          ]}/>
        </div>
      </section>

      <CTABand title="Your next six months could look very different." sub="Free Skill Badge. 45 minutes. You'll see your level — and the roles you\'re already qualified for."/>
    </>
  );
}

function ForCollegesPage() {
  return (
    <>
      <section style={{background:'var(--gr-grad-colleges)', color:'#fff', padding:'72px 0 96px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)', backgroundSize:'48px 48px', maskImage:'radial-gradient(ellipse at top right, black 30%, transparent 75%)'}}/>
        <div className="gr-container" style={{position:'relative'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:60, alignItems:'center'}}>
            <div>
              <Pill tone="gold" icon="building">For Colleges & Universities</Pill>
              <h1 className="gr-h1" style={{color:'#fff', fontSize:58, marginTop:20, marginBottom:18}}>
                Turn your placement cell into a GCC pipeline.
              </h1>
              <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19, maxWidth:620}}>
                Partner with GCCReady to embed the Skill Badge into your degree programs. We handle training, assessment, and employer intros — you get transparent placement outcomes and a 3–5× lift in captive placements.
              </p>
              <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
                <a href="#/contact?role=college" className="gr-btn gr-btn-gold gr-btn-lg">Book a placement-cell demo <Icon name="arrow-right" size={16}/></a>
                <a href="#/resources#college-brief" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>
                  <Icon name="download" size={15}/> Partnership brief (PDF)
                </a>
              </div>
            </div>
            <div style={{background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.1)', borderRadius:24, padding:28, backdropFilter:'blur(14px)'}}>
              <div style={{font:'700 11px/1 Inter', color:'#FBBF24', letterSpacing:'.14em', textTransform:'uppercase', marginBottom:18}}>Partner institution snapshot</div>
              <div style={{font:'800 22px/1.2 DM Sans', color:'#fff', letterSpacing:'-0.02em', marginBottom:4}}>Christ Institute of Management</div>
              <div style={{font:'500 13px/1.4 Inter', color:'rgba(255,255,255,.55)', marginBottom:22}}>Bengaluru · Commerce stream · Partnered since 2023</div>
              {[['Captive placements', '12% → 47%'], ['Median offer CTC', '₹4.8L → ₹8.6L'], ['Skill Badge coverage', '100% of final-year cohort'], ['Drop-out from offers', '14% → 3%']].map(([l, v]) => (
                <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'12px 0', borderTop:'1px solid rgba(255,255,255,.08)'}}>
                  <span style={{font:'500 14px/1.3 Inter', color:'rgba(255,255,255,.7)'}}>{l}</span>
                  <span style={{font:'700 14px/1.3 DM Sans', color:'#FBBF24'}}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="How the partnership works" title="Three ways to integrate"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {[
              { i:'layers', t:'Embedded Curriculum', d:'We deliver a 6-week GCC-readiness module inside your degree program. Co-taught with your faculty. Credit-bearing optional.', price:'₹12L / year (unlimited students)' },
              { i:'qr', t:'Skill Badge Campus Licence', d:'All your final-year students get unlimited free Skill Badge access. Dashboard for placement cell, benchmarked against peer institutions.', price:'₹4L / year' },
              { i:'briefcase', t:'Placement Cell Extension', d:'White-label our GCC employer network. Your placement cell gets access to our 41 hiring partners, with dedicated liaison.', price:'Revenue share · No upfront' },
            ].map((p,i)=>(
              <div key={i} style={{background:'var(--gr-bg-tint)', borderRadius:24, padding:32}}>
                <div style={{width:52, height:52, borderRadius:13, background:'var(--gr-navy)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16}}>
                  <Icon name={p.i} size={24}/>
                </div>
                <h4 className="gr-h4" style={{fontSize:20, marginBottom:8}}>{p.t}</h4>
                <p style={{margin:'0 0 18px', font:'400 14.5px/1.6 Inter', color:'var(--gr-fg-2)'}}>{p.d}</p>
                <div style={{padding:'12px 14px', background:'#fff', borderRadius:10, font:'700 13px/1.3 DM Sans', color:'var(--gr-navy)'}}>{p.price}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Proof" title="Outcomes from 14 partner institutions"/>
          <StatStrip items={[
            { value:'47%', label:'Median captive placements', sub:'Up from 12% pre-partnership' },
            { value:'₹8.6L', label:'Median offer CTC', sub:'Across 14 colleges, 2024 batch' },
            { value:'93%', label:'Skill Badge completion', sub:'Final-year cohort' },
            { value:'14', label:'Partner colleges', sub:'Tier-1 through Tier-3, 6 states' },
          ]}/>
        </div>
      </section>

      <CTABand title="Bring GCC-readiness into your campus." sub="Our partnerships team will share cohort data from a comparable institution within 48 hours." primaryLabel="Book a demo" primaryHref="#/contact?role=college" secondaryLabel="Download partnership brief" secondaryHref="#/resources#college-brief"/>
    </>
  );
}

function ForEmployersPage() {
  return (
    <>
      <section style={{background:'var(--gr-grad-employers)', color:'#fff', padding:'72px 0 96px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)', backgroundSize:'48px 48px', maskImage:'radial-gradient(ellipse at top right, black 30%, transparent 75%)'}}/>
        <div className="gr-container" style={{position:'relative', maxWidth:920}}>
          <Pill tone="gold" icon="building-2">For GCCs & Employers</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:60, marginTop:20, marginBottom:18}}>
            Pre-screened, ready-to-hire talent from every tier.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19, maxWidth:760}}>
            Cut time-to-offer by 22 days. 4,200 L2+ candidates in the network. Integrate with your ATS. Pay only per joined hire — no subscription, no minimums.
          </p>
          <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
            <a href="#/contact?role=employer" className="gr-btn gr-btn-gold gr-btn-lg">Talk to partnerships <Icon name="arrow-right" size={16}/></a>
            <a href="#/resources#rubric" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>Review our rubric</a>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Why GCCs use us" title="Hire with confidence. Skip the resume theatre."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {[
              { i:'shield-check', t:'Every candidate is L2+', d:'We never forward a candidate below L2 (Interview Ready). Median starting point for you is 65%+ on our rubric — which is above typical entry-level GCC bar.' },
              { i:'file-check',   t:'Shared scoring rubric', d:'Our Rubric v3.1 is published. Your hiring managers calibrate to it in a 2-hour workshop. No more "what does this score mean?"' },
              { i:'zap',          t:'Launch in 14 days', d:'Connect to our talent API or use the recruiter dashboard. First interview slots filled within two weeks of kickoff.' },
              { i:'coins',        t:'Pay per joined hire', d:'No subscription. No per-interview fees. You pay 8% of first-year CTC on the day the candidate joins — not before.' },
              { i:'users',        t:'Diverse pipeline by design', d:'Our cohort is 54% female, 61% Tier 2/3 cities, 38% non-English medium schooling. You hit diversity targets without compromise.' },
              { i:'refresh',      t:'90-day replacement', d:'If a hire leaves within 90 days for any reason, we re-place you free.' },
            ].map((x,i)=>(
              <div key={i} style={{background:'var(--gr-bg-tint)', borderRadius:20, padding:28}}>
                <div style={{width:48, height:48, borderRadius:12, background:'#fff', color:'var(--gr-navy)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:14}}>
                  <Icon name={x.i} size={22}/>
                </div>
                <h4 className="gr-h4" style={{fontSize:18, marginBottom:6}}>{x.t}</h4>
                <p style={{margin:0, font:'400 14.5px/1.6 Inter', color:'var(--gr-fg-2)'}}>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Recruiter workflow" title="What the hiring manager actually sees"/>
          <div style={{background:'#fff', borderRadius:24, border:'1px solid var(--gr-border)', overflow:'hidden'}}>
            <div style={{padding:'16px 24px', borderBottom:'1px solid var(--gr-border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{width:28, height:28, borderRadius:6, background:'var(--gr-navy)'}}/>
                <span style={{font:'700 14px/1 DM Sans', color:'var(--gr-navy)'}}>GCCReady Recruiter · Wells Fargo</span>
              </div>
              <div style={{display:'flex', gap:10, font:'500 12px/1 Inter', color:'var(--gr-fg-3)'}}>
                <span>Role: P2P Analyst I</span><span>·</span><span>Open: 8</span>
              </div>
            </div>
            <div style={{padding:16, display:'grid', gap:8}}>
              {[
                ['Priya R. Sharma',    'B.Com · Christ',         'L2', '78', 'Finance Ops', 'Shortlisted'],
                ['Mohit A. Kulkarni',  'BBA · SP Jain',          'L3', '89', 'Finance Ops', 'Offer sent'],
                ['Ananya S. Rao',      'B.Sc Stats · Stella',    'L2', '71', 'Finance Ops', 'Interviewing'],
                ['Rehan M. Qureshi',   'B.Com · Symbiosis',      'L2', '74', 'Finance Ops', 'Shortlisted'],
              ].map((r,i)=>(
                <div key={i} style={{display:'grid', gridTemplateColumns:'2fr 2fr .8fr .8fr 1.2fr 1fr auto', gap:16, alignItems:'center', padding:'14px 16px', background:'var(--gr-bg-tint)', borderRadius:12}}>
                  <div>
                    <div style={{font:'700 14px/1.2 Inter', color:'var(--gr-navy)'}}>{r[0]}</div>
                    <div style={{font:'500 12px/1.2 Inter', color:'var(--gr-fg-3)', marginTop:2}}>{r[1]}</div>
                  </div>
                  <div style={{font:'500 13px/1 Inter', color:'var(--gr-fg-2)'}}>{r[1]}</div>
                  <div><Pill tone={r[2]==='L3'?'green':'gold'}>{r[2]}</Pill></div>
                  <div style={{font:'700 15px/1 DM Sans', color:'var(--gr-navy)'}}>{r[3]}</div>
                  <div style={{font:'500 12px/1 Inter', color:'var(--gr-fg-3)'}}>{r[4]}</div>
                  <div><Pill tone={r[5]==='Offer sent'?'green':r[5]==='Interviewing'?'teal':'navy'}>{r[5]}</Pill></div>
                  <Icon name="arrow-up-right" size={14} style={{color:'var(--gr-fg-4)'}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABand title="Stop screening 800 resumes for every 8 hires." sub="Our partnerships team can have your first candidate loop running in two weeks." primaryLabel="Talk to partnerships" primaryHref="#/contact?role=employer" secondaryLabel="See our scoring rubric" secondaryHref="#/resources#rubric"/>
    </>
  );
}

Object.assign(window, { ForStudentsPage, ForCollegesPage, ForEmployersPage });