/* GCCReady — Home Page */

function HomeHero() {
  return (
    <HeroDark>
      <div style={{display:'grid', gridTemplateColumns:'1.15fr 1fr', gap:60, alignItems:'center'}}>
        <div>
          <Pill tone="gold" icon="sparkles">Now placing Batch 7 · Bengaluru · Hyderabad · Pune</Pill>
          <h1 className="gr-h1" style={{
            color:'#fff', fontSize:68, marginTop:20, marginBottom:20,
          }}>
            Your degree got you in the room. <span style={{
              background:'linear-gradient(135deg,#FBBF24,#F59E0B)',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
              backgroundClip:'text',
            }}>We get you the job.</span>
          </h1>
          <p className="gr-lead" style={{
            color:'rgba(255,255,255,.78)', fontSize:20, maxWidth:580,
          }}>
            GCCReady is the bridge between your campus and India's 1,800+ Global Capability Centres.
            Six weeks. One Skill Badge. Interview-ready in the domain of your choice.
          </p>
          <div style={{display:'flex', gap:12, marginTop:32, flexWrap:'wrap'}}>
            <a href="#/skill-badge" className="gr-btn gr-btn-gold gr-btn-lg">
              Get your Skill Badge <Icon name="arrow-right" size={16}/>
            </a>
            <a href="#/programs" 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="play-circle" size={16}/> How it works (2 min)
            </a>
          </div>
          <div style={{
            marginTop:40, display:'flex', gap:32, flexWrap:'wrap',
            color:'rgba(255,255,255,.55)', font:'500 13px/1.4 Inter',
          }}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <Icon name="check-circle" size={16} style={{color:'#10B981'}}/> Free Skill Badge assessment
            </div>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <Icon name="check-circle" size={16} style={{color:'#10B981'}}/> Pay only if you get placed
            </div>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <Icon name="check-circle" size={16} style={{color:'#10B981'}}/> Built with 40+ GCCs
            </div>
          </div>
        </div>
        {/* Hero graphic: layered Skill Badge + live placement feed */}
        <HeroGraphic/>
      </div>
    </HeroDark>
  );
}

function HeroGraphic() {
  return (
    <div style={{position:'relative', height:520}}>
      {/* Back card — Placement pulse */}
      <div style={{
        position:'absolute', top:40, right:-20, width:280,
        background:'rgba(255,255,255,.06)', backdropFilter:'blur(16px)',
        border:'1px solid rgba(255,255,255,.1)', borderRadius:20, padding:18,
        transform:'rotate(4deg)', boxShadow:'var(--gr-shadow-xl)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:12}}>
          <div style={{width:8, height:8, borderRadius:'50%', background:'#10B981', animation:'grPulse 2s infinite'}}/>
          <span style={{font:'700 11px/1 Inter', color:'rgba(255,255,255,.85)', textTransform:'uppercase', letterSpacing:'.1em'}}>Live placements</span>
        </div>
        {[
          ['Aarti K.','Wells Fargo','Risk Analyst'],
          ['Rohan S.','Target','Supply Ops'],
          ['Meera J.','Deloitte','Audit Support'],
        ].map((p, i) => (
          <div key={i} style={{
            display:'flex', alignItems:'center', gap:10,
            padding:'10px 0', borderTop: i>0 ? '1px solid rgba(255,255,255,.06)' : 'none',
          }}>
            <div style={{
              width:32, height:32, borderRadius:'50%',
              background:`linear-gradient(135deg, #F59E0B, #0891B2)`,
              display:'flex', alignItems:'center', justifyContent:'center',
              font:'700 12px/1 Inter', color:'#fff',
            }}>{p[0][0]}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{font:'600 12.5px/1.2 Inter', color:'#fff'}}>{p[0]}</div>
              <div style={{font:'500 11px/1.3 Inter', color:'rgba(255,255,255,.55)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p[2]} · {p[1]}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Front — The Skill Badge (mini) */}
      <div style={{
        position:'absolute', top:80, left:0, width:340, height:210,
        background:'var(--gr-grad-skillbadge)',
        borderRadius:20, padding:24, color:'#fff',
        boxShadow:'0 32px 64px -16px rgba(0,0,0,.4), 0 0 0 1px rgba(245,158,11,.15)',
        border:'1px solid rgba(245,158,11,.3)',
        position:'absolute', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', top:-40, right:-40, width:180, height:180,
          background:'radial-gradient(circle, rgba(245,158,11,.35) 0%, transparent 65%)',
        }}/>
        <div style={{display:'flex', justifyContent:'space-between', position:'relative'}}>
          <div>
            <div style={{font:'700 10px/1 Inter', color:'#F59E0B', textTransform:'uppercase', letterSpacing:'.16em'}}>GCC Skill Badge</div>
            <div style={{font:'800 22px/1.1 DM Sans', marginTop:8, letterSpacing:'-0.02em'}}>Priya Sharma</div>
            <div style={{font:'500 12px/1.3 Inter', color:'rgba(255,255,255,.6)', marginTop:2}}>B.Com · Christ Univ. · 2025</div>
          </div>
          <div style={{
            width:44, height:44, borderRadius:10,
            background:'rgba(255,255,255,.1)',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="qr" size={22}/>
          </div>
        </div>
        <div style={{position:'absolute', bottom:20, left:24, right:24, display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
          <div>
            <div style={{font:'500 10px/1 Inter', color:'rgba(255,255,255,.5)', textTransform:'uppercase', letterSpacing:'.1em'}}>Readiness Level</div>
            <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:6}}>
              <span style={{font:'800 28px/1 DM Sans', color:'#F59E0B', letterSpacing:'-0.02em'}}>L2</span>
              <span style={{font:'600 12px/1 Inter', color:'rgba(255,255,255,.7)'}}>Finance Ops Ready</span>
            </div>
          </div>
          <div style={{display:'flex', gap:4}}>
            {[1,1,0].map((f,i)=>(
              <div key={i} style={{
                width:8, height:22, borderRadius:2,
                background: f ? '#F59E0B' : 'rgba(255,255,255,.15)',
              }}/>
            ))}
          </div>
        </div>
      </div>
      {/* Floating badge */}
      <div style={{
        position:'absolute', bottom:60, right:40, width:220,
        background:'#fff', borderRadius:16, padding:16,
        boxShadow:'0 20px 40px -12px rgba(0,0,0,.3)',
        transform:'rotate(-3deg)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{
            width:38, height:38, borderRadius:10,
            background:'var(--gr-green-50)', color:'var(--gr-green)',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="trending-up" size={18}/>
          </div>
          <div>
            <div style={{font:'800 20px/1 DM Sans', color:'var(--gr-navy)', letterSpacing:'-0.02em'}}>73%</div>
            <div style={{font:'500 11px/1.3 Inter', color:'var(--gr-fg-3)'}}>placed within<br/>90 days</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function GCCLandscape() {
  return (
    <section className="gr-section" style={{background:'#fff'}}>
      <div className="gr-container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:60, alignItems:'center'}}>
          <div>
            <div className="gr-eyebrow" style={{marginBottom:14}}>The GCC opportunity</div>
            <h2 className="gr-h2">India is the world's GCC capital.<br/>Most students don't know.</h2>
            <p className="gr-lead" style={{marginTop:18}}>
              Global Capability Centres are captive offices of Fortune-500 companies — Wells Fargo, Target, Walmart, Shell, JP Morgan — that hire engineers, accountants, analysts and ops talent <em>directly from India</em>. They pay more than IT services, hire year-round, and don't care where you went to college. They care whether you can do the work on day one.
            </p>
            <a href="#/resources#gcc-report" className="gr-btn gr-btn-ghost" style={{marginTop:24}}>
              Download the 2025 GCC Employment Report <Icon name="download" size={15}/>
            </a>
          </div>
          <StatStrip items={[
            { value:'1,850+', label:'GCCs in India', sub:'Across 8 tier-1 and tier-2 cities' },
            { value:'2.1M', label:'Professionals employed', sub:'Growing at 15% YoY' },
            { value:'₹9.2L', label:'Median entry CTC', sub:'vs ₹4.5L in IT services' },
          ]}/>
        </div>
        <div style={{marginTop:56}}>
          <div style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)', marginBottom:20, textAlign:'center', letterSpacing:'.14em', textTransform:'uppercase'}}>
            Our students have joined entry & early-career roles at
          </div>
          <LogoStrip preset="hero" speed={45} size="md"/>
          <p style={{font:'500 12px/1.5 Inter', color:'var(--gr-fg-4)', textAlign:'center', marginTop:14}}>
            Logos indicate sectors GCCReady prepares talent for. Use does not imply formal partnership or endorsement.
          </p>
        </div>
      </div>
    </section>
  );
}

function TheGap() {
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="The real problem"
          title="A degree is no longer the credential. Readiness is."
          sub="Indian colleges produce ~1.5M commerce & non-CS engineering graduates every year. Fewer than 8% are considered interview-ready by GCC hiring managers. This is the gap we close."
          align="center"
        />
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
          <div style={{
            background:'#fff', borderRadius:24, padding:36,
            border:'1px solid var(--gr-border)',
          }}>
            <div style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'5px 10px', borderRadius:999,
              background:'var(--gr-red-50)', color:'var(--gr-red)',
              font:'700 11.5px/1 Inter', letterSpacing:'.06em', textTransform:'uppercase',
              marginBottom:18,
            }}>Without GCCReady</div>
            <h3 className="gr-h3" style={{marginBottom:20}}>The default path</h3>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14}}>
              {[
                '3-year degree covers theory, not tooling',
                'No exposure to SAP, Workday, Excel modelling, or GCC process flows',
                '"Off-campus applications" to 300 JDs, 2 callbacks',
                'First job: BPO voice process, ₹3.8L, no growth ladder',
              ].map((l,i)=>(
                <li key={i} style={{display:'flex', gap:12, font:'500 15px/1.5 Inter', color:'var(--gr-fg-2)'}}>
                  <Icon name="x" size={16} style={{color:'var(--gr-red)', flexShrink:0, marginTop:3}}/>
                  {l}
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            background:'var(--gr-navy)', borderRadius:24, padding:36, color:'#fff',
            border:'1px solid var(--gr-navy-800)',
            boxShadow:'var(--gr-shadow-navy)',
          }}>
            <div style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'5px 10px', borderRadius:999,
              background:'var(--gr-gold)', color:'var(--gr-navy)',
              font:'700 11.5px/1 Inter', letterSpacing:'.06em', textTransform:'uppercase',
              marginBottom:18,
            }}>With GCCReady</div>
            <h3 className="gr-h3" style={{marginBottom:20, color:'#fff'}}>The GCCReady path</h3>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14}}>
              {[
                'Pick a domain in week 1 — Finance Ops, Risk, Data, SWE, or 9 more',
                'Learn on the actual tools: SAP S/4, Alteryx, Tableau, Workday, Python',
                'Skill Badge is shared directly with 40+ GCC hiring partners',
                'First job: GCC analyst role, ₹7–11L, direct ladder to senior track',
              ].map((l,i)=>(
                <li key={i} style={{display:'flex', gap:12, font:'500 15px/1.5 Inter', color:'rgba(255,255,255,.88)'}}>
                  <Icon name="check" size={16} style={{color:'#FBBF24', flexShrink:0, marginTop:3}}/>
                  {l}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:'01', title:'Take the Skill Badge Assessment', desc:'Free, 45 minutes, online. We benchmark you on aptitude, communication, domain fit, and digital fluency.', icon:'qr' },
    { n:'02', title:'Get your GCC Readiness Level', desc:'L0 (starter) → L3 (hire-ready). You\'ll see exactly which roles you qualify for today and what gets you to the next level.', icon:'bar-chart' },
    { n:'03', title:'Pick your pathway', desc:'6-week Crash Course, 12-week Sprint, or a Domain Deep-Dive with a global certification (US CMA, CPA, CFA).', icon:'target' },
    { n:'04', title:'Get interview-ready & placed', desc:'Live projects from actual GCCs, mock interviews with hiring managers, and introductions to 40+ partner employers.', icon:'briefcase' },
  ];
  return (
    <section className="gr-section" style={{background:'#fff'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="How it works"
          title="Four steps. Six weeks. One outcome."
          align="center"
        />
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20,
          position:'relative',
        }}>
          <div style={{
            position:'absolute', top:40, left:60, right:60, height:2,
            background:'repeating-linear-gradient(90deg, var(--gr-border) 0 8px, transparent 8px 16px)',
            zIndex:0,
          }}/>
          {steps.map((s, i) => (
            <div key={i} style={{position:'relative', zIndex:1}}>
              <div style={{
                width:80, height:80, borderRadius:20,
                background:'#fff', border:'2px solid var(--gr-navy)',
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'var(--gr-navy)', marginBottom:16,
                boxShadow:'var(--gr-shadow-md)',
              }}>
                <Icon name={s.icon} size={30}/>
              </div>
              <div style={{
                font:'800 11px/1 DM Sans', color:'var(--gr-gold-700)',
                letterSpacing:'.16em', textTransform:'uppercase', marginBottom:8,
              }}>Step {s.n}</div>
              <h4 className="gr-h4" style={{fontSize:18, marginBottom:6}}>{s.title}</h4>
              <p style={{margin:0, font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)'}}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProgramsOverview() {
  const programs = [
    {
      tag:'Free · 45 min', title:'Skill Badge', tone:'gold',
      price:'Free', priceSub:'Always',
      desc:'Your free GCC readiness passport. Assesses 6 dimensions, gives you a Level (L0–L3), and shares it with our 40+ partner GCCs. Re-takeable quarterly.',
      bullets:['Aptitude + comms + domain + digital + English + behaviour','PDF + digital card with QR','Re-take anytime','Visible to 40+ GCC recruiters'],
      cta:['Get your Skill Badge', '#/skill-badge'],
      icon:'qr',
    },
    {
      tag:'6 weeks · Self-paced', title:'Crash Course — GCC Fundamentals',
      price:'₹7,999', priceSub:'one-time',
      desc:'The vocabulary and playbooks every GCC hire is expected to know. Process flows, tools, workplace English, stakeholder comms, and simulated on-the-job scenarios.',
      bullets:['40 hrs live + 60 hrs project','Taught by GCC senior managers','Skill Badge bump to L1 guaranteed','3 mock interviews included'],
      cta:['Enrol in Crash Course', '#/programs#crash'],
      icon:'zap',
    },
    {
      tag:'12 weeks · Cohort', title:'GCC Sprint', tone:'navy', featured:true,
      price:'₹34,999', priceSub:'or pay 0 upfront · 15% of first-year CTC',
      desc:'Our flagship outcomes program. You pick a domain, we pair you with a mentor from that GCC vertical, and you build a portfolio of 3 live projects reviewed by actual hiring managers.',
      bullets:['One-on-one mentor from partner GCC','3 live projects + domain certification','Interview prep with 40+ employers','Placement guarantee or refund'],
      cta:['Apply to next Sprint cohort', '#/sprint'],
      icon:'rocket',
    },
    {
      tag:'3–18 months · Certified', title:'Global Certifications',
      price:'From ₹89,000', priceSub:'incl. exam fees',
      desc:'For finance students who want global portability. We\'re an authorised partner for US CMA, US CPA, and CFA — paired with our domain training and GCC placement layer.',
      bullets:['US CMA · US CPA · CFA','Live classes + question banks','Skill Badge stays valid through cert','Placement into finance GCCs'],
      cta:['Explore Certifications', '#/certifications'],
      icon:'award',
    },
  ];
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="The pathway"
          title="Four programs. Pick where you are."
          sub="Start free with a Skill Badge. Layer on training and certifications as you go. Every step is transcripted on your card — employers see your full journey."
        />
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
          {programs.map((p, i) => (
            <ProgramCard key={i} p={p}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProgramCard({ p }) {
  const featured = p.featured;
  return (
    <div style={{
      background: featured ? 'var(--gr-navy)' : '#fff',
      border: `1px solid ${featured ? 'var(--gr-navy-800)' : 'var(--gr-border)'}`,
      borderRadius:24, padding:32, color: featured ? '#fff' : 'var(--gr-fg-1)',
      position:'relative', overflow:'hidden',
      boxShadow: featured ? 'var(--gr-shadow-navy)' : 'var(--gr-shadow-xs)',
    }}>
      {featured && (
        <div style={{
          position:'absolute', top:0, right:0,
          background:'var(--gr-gold)', color:'var(--gr-navy)',
          font:'800 11px/1 DM Sans', letterSpacing:'.08em', textTransform:'uppercase',
          padding:'8px 14px', borderBottomLeftRadius:12,
        }}>Flagship</div>
      )}
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:20}}>
        <div style={{
          width:56, height:56, borderRadius:14,
          background: featured ? 'rgba(245,158,11,.15)' : 'var(--gr-gold-50)',
          color: featured ? '#FBBF24' : 'var(--gr-gold-700)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon name={p.icon} size={26}/>
        </div>
        <span style={{
          font:'700 11.5px/1 Inter',
          color: featured ? 'rgba(255,255,255,.7)' : 'var(--gr-fg-3)',
          letterSpacing:'.08em', textTransform:'uppercase',
          padding:'5px 10px', borderRadius:999,
          background: featured ? 'rgba(255,255,255,.06)' : 'var(--gr-bg-tint)',
        }}>{p.tag}</span>
      </div>
      <h3 className="gr-h3" style={{color: featured?'#fff':'var(--gr-navy)'}}>{p.title}</h3>
      <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:12, marginBottom:16}}>
        <span style={{font:'800 28px/1 DM Sans', letterSpacing:'-0.02em', color: featured?'#FBBF24':'var(--gr-navy)'}}>{p.price}</span>
        <span style={{font:'500 13px/1 Inter', color: featured?'rgba(255,255,255,.55)':'var(--gr-fg-3)'}}>{p.priceSub}</span>
      </div>
      <p style={{
        margin:'0 0 20px', font:'400 15px/1.6 Inter',
        color: featured ? 'rgba(255,255,255,.72)' : 'var(--gr-fg-2)',
      }}>{p.desc}</p>
      <ul style={{listStyle:'none', padding:0, margin:'0 0 24px', display:'flex', flexDirection:'column', gap:10}}>
        {p.bullets.map(b => (
          <li key={b} style={{display:'flex', gap:10, font:'500 14px/1.4 Inter', color: featured?'rgba(255,255,255,.82)':'var(--gr-fg-2)'}}>
            <Icon name="check-circle" size={16} style={{flexShrink:0, color: featured?'#FBBF24':'var(--gr-green)', marginTop:1}}/>
            {b}
          </li>
        ))}
      </ul>
      <a href={p.cta[1]} className="gr-btn" style={{
        background: featured?'var(--gr-gold)':'var(--gr-navy)',
        color: featured?'var(--gr-navy)':'#fff',
        width:'100%',
      }}>{p.cta[0]} <Icon name="arrow-right" size={15}/></a>
    </div>
  );
}

function DomainsTease() {
  const domains = [
    { t:'Finance & Accounting Ops',    s:'P2P · R2R · O2C · FP&A', icon:'landmark', h:'#/domains/finance-accounting' },
    { t:'Risk, Audit & Compliance',    s:'SOX · KYC · Internal audit', icon:'shield-check', h:'#/domains/risk-compliance' },
    { t:'Software Engineering',        s:'Full-stack · SRE · Platform', icon:'cpu', h:'#/domains/software-engineering' },
    { t:'Data & Analytics',            s:'Power BI · SQL · Python', icon:'bar-chart', h:'#/domains/data-analytics' },
    { t:'Procurement & Supply Chain',  s:'SAP Ariba · Logistics · S&OP', icon:'package', h:'#/domains/procurement' },
    { t:'Customer & Partner Ops',      s:'CX · Partner mgmt · Trust & Safety', icon:'users', h:'#/domains/customer-ops' },
    { t:'HR Shared Services',          s:'Workday · Payroll · People analytics', icon:'user-check', h:'#/domains/hr-shared-services' },
    { t:'Cybersecurity',               s:'SOC · GRC · Identity', icon:'shield-check', h:'#/domains/cybersecurity' },
  ];
  return (
    <section className="gr-section" style={{background:'#fff'}}>
      <div className="gr-container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:32}}>
          <div>
            <div className="gr-eyebrow" style={{marginBottom:14}}>13 domains · 200+ role maps</div>
            <h2 className="gr-h2">Pick the domain. We'll build the path.</h2>
          </div>
          <a href="#/domains" className="gr-btn gr-btn-ghost">See all 13 domains <Icon name="arrow-right" size={15}/></a>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          {domains.map(d => (
            <a key={d.t} href={d.h} style={{
              display:'block', background:'#fff', padding:22,
              border:'1px solid var(--gr-border)', borderRadius:18,
              textDecoration:'none', color:'inherit',
              transition:'.2s', position:'relative',
            }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--gr-navy)'; e.currentTarget.style.transform='translateY(-2px)';}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--gr-border)'; e.currentTarget.style.transform='none';}}
            >
              <div style={{
                width:42, height:42, borderRadius:10,
                background:'var(--gr-navy-50)', color:'var(--gr-navy)',
                display:'flex', alignItems:'center', justifyContent:'center', marginBottom:14,
              }}>
                <Icon name={d.icon} size={20}/>
              </div>
              <div style={{font:'700 15.5px/1.25 DM Sans', color:'var(--gr-navy)'}}>{d.t}</div>
              <div style={{font:'500 12.5px/1.4 Inter', color:'var(--gr-fg-3)', marginTop:6}}>{d.s}</div>
              <Icon name="arrow-up-right" size={14} style={{position:'absolute', top:22, right:22, color:'var(--gr-fg-4)'}}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { q:'I graduated from a Tier-3 college in Nashik. Six weeks later I was a P2P analyst at Wells Fargo, Hyderabad. My Skill Badge did more for me than my entire resume.', n:'Aarti Kulkarni', r:'P2P Analyst · Wells Fargo India', img:'AK' },
    { q:'Our campus used to see 12% placement into captives. We partnered with GCCReady in Sem 5 — last year we crossed 47%. It changed the economics of our commerce program.', n:'Dr. Suresh Menon', r:'Dean, Christ Institute of Management', img:'SM' },
    { q:'Their Skill Badge became our pre-screen. Every resume that comes in with an L2 or higher gets an interview, period. Cut our time-to-hire by 22 days.', n:'Reema Baig', r:'Head of Early Careers · Lowe\'s India', img:'RB' },
  ];
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="Proof, not promises"
          title="Students, deans, and hiring managers on GCCReady"
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
          {items.map((t, i) => (
            <div key={i} style={{
              background:'#fff', borderRadius:24, padding:32,
              border:'1px solid var(--gr-border)',
              display:'flex', flexDirection:'column',
            }}>
              <div style={{display:'flex', gap:2, marginBottom:16, color:'#F59E0B'}}>
                {[0,1,2,3,4].map(s=> <Icon key={s} name="star" size={16} style={{fill:'#F59E0B'}}/>)}
              </div>
              <blockquote style={{
                margin:0, font:'500 17px/1.55 DM Sans', color:'var(--gr-navy)',
                letterSpacing:'-0.01em', flex:1,
              }}>"{t.q}"</blockquote>
              <div style={{marginTop:24, display:'flex', alignItems:'center', gap:12, paddingTop:20, borderTop:'1px solid var(--gr-border-soft)'}}>
                <div style={{
                  width:44, height:44, borderRadius:'50%',
                  background:'var(--gr-grad-gold)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  font:'800 14px/1 DM Sans', color:'var(--gr-navy)',
                }}>{t.img}</div>
                <div>
                  <div style={{font:'700 14.5px/1.2 Inter', color:'var(--gr-navy)'}}>{t.n}</div>
                  <div style={{font:'500 12.5px/1.2 Inter', color:'var(--gr-fg-3)', marginTop:2}}>{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <PageHead
        title="GCCReady — Get GCC-Ready. Get Hired by India's 1,800+ Global Capability Centres"
        description="GCCReady is the bridge between Bharat's campuses and India's 1,800+ Global Capability Centres. Skill Badge, role pods, US CPA / CMA / EA / CFA / ACCA pathways, and Mini-GCC setup for US founders."
        canonical="/"
        schema={[
          schemaOrganization(),
          schemaWebSite(),
          {
            '@context':'https://schema.org','@type':'WebPage',
            'name':'GCCReady — Career platform for India\'s GCCs',
            'description':'India\'s career platform for Global Capability Centres.',
            'url': SITE_ORIGIN,
            'isPartOf': { '@type':'WebSite', 'url': SITE_ORIGIN },
          },
          schemaFAQ([
            { q:'What is a GCC (Global Capability Centre)?', a:'A Global Capability Centre is an India-based captive office of a multinational. GCCs hire across finance, analytics, AI, ops, audit, tax, marketing, clinical and engineering — not just IT services. India has 1,800+ GCCs employing 2.1M professionals.' },
            { q:'Who is GCCReady for?', a:'Three audiences: (1) Bharat\'s commerce, finance and AI-curious students preparing for GCC roles; (2) college Training & Placement Officers placing batches into named GCCs; (3) US founders and CFOs setting up Mini-GCCs in India via EOR or own subsidiary.' },
            { q:'What certifications does GCCReady prepare students for?', a:'US CPA, US CMA, EA (Enrolled Agent), CFA — live now. ACCA — upcoming. Plus tool credentials (Power BI, ESG, AFP FP&A) and AI-augmented role pods.' },
            { q:'What is the Skill Badge?', a:'A 5–10 minute self-assessment that maps your degree, target role and timeline to the right certification path, role pod and named GCCs hiring for your profile. Free.' },
            { q:'Does GCCReady guarantee placement?', a:'The Sprint cohort program includes a placement guarantee subject to attendance and interview-acceptance criteria — see Refund Policy for full terms.' },
          ]),
        ]}
      />
      <CohortStrip variant="home"/>
      <HomeHero/>
      <GCCLandscape/>
      <StakeholderRouter/>
      <TheGap/>
      <HowItWorks/>
      <ProgramsOverview/>
      <DomainsTease/>
      <Testimonials/>
      <CTABand
        title="Ready to see where you stand?"
        sub="The Skill Badge is free and takes 45 minutes. You'll get a level, a pathway, and a list of GCCs hiring for your profile — by tomorrow."
      />
    </>
  );
}

/* ============================================================================
 * StakeholderRouter — six entry points for distinct buyers.
 * Visible above the fold on the home page so first-time visitors of every type
 * find their door immediately.
 * ========================================================================== */
function StakeholderRouter() {
  const routes = [
    { id:'student',   icon:'graduation-cap', tag:'Student / candidate',
      title:'I want to land a GCC job',
      body:'Take the Skill Badge → get a personalised pathway, role pod, and named GCCs hiring for your profile.',
      cta:'Get your Skill Badge', href:'#/skill-badge', accent:'#F59E0B' },
    { id:'parent',    icon:'users', tag:'Parent / stakeholder',
      title:'My child is choosing a path',
      body:'See real placements, ROI numbers by city, and side-by-side cert comparisons before you commit ₹.',
      cta:'See placements + ROI', href:'#/placements', accent:'#0891B2' },
    { id:'mentor',    icon:'award', tag:'Working professional',
      title:'I\'m at a GCC — apply to mentor',
      body:'Earn ₹1,500–6,000 per session. Verified Mentor Badge for LinkedIn. 2 sessions/month minimum.',
      cta:'Apply to mentor', href:'#/mentors', accent:'#FBBF24' },
    { id:'tpo',       icon:'building', tag:'TPO / college',
      title:'Place my batch into named GCCs',
      body:'Free Pilot for 30 students, NAAC/NEP evidence pack, recruiter outreach toolkit, batch readiness dashboard.',
      cta:'TPO partnership', href:'#/tpo', accent:'#22C55E' },
    { id:'employer',  icon:'briefcase', tag:'Employer / GCC hiring',
      title:'Hire job-ready talent at scale',
      body:'48-hour shortlist · 4 Job-Ready Programs (Custom Sprint, Internship Hatch, On-Demand Pool, Continuous Pipeline).',
      cta:'Send hiring brief', href:'#/hire', accent:'#0D1B2A' },
    { id:'founder',   icon:'rocket', tag:'US founder / CFO',
      title:'Set up a Mini-GCC in India',
      body:'EOR pilot in 21 days. Built-in path to your own subsidiary. Live TCO calculator + decision matrix.',
      cta:'Mini-GCC setup', href:'#/mini-gcc', accent:'#9333EA' },
  ];

  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle eyebrow="Pick your door" title="Six paths into GCCReady" sub="Different stakeholders, different starting points. Pick the one closest to your situation — we route you to the right team and the right tool."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {routes.map((r) => (
            <a key={r.id} href={r.href} className="gr-card" style={{
              padding:28, textDecoration:'none', color:'var(--gr-fg-1)',
              display:'flex', flexDirection:'column', gap:14,
              transition:'all .2s ease',
              borderTop:`3px solid ${r.accent}`,
            }}
            onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor=r.accent; ev.currentTarget.style.boxShadow='var(--gr-shadow-md)'; ev.currentTarget.style.transform='translateY(-3px)'; }}
            onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border)'; ev.currentTarget.style.borderTopColor=r.accent; ev.currentTarget.style.boxShadow='var(--gr-shadow-xs)'; ev.currentTarget.style.transform='none'; }}
            >
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:10}}>
                <div style={{
                  width:44, height:44, borderRadius:12,
                  background:`${r.accent}14`, color: r.accent,
                  display:'grid', placeItems:'center',
                }}><Icon name={r.icon} size={20}/></div>
                <span style={{font:'700 11px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.14em', textTransform:'uppercase'}}>{r.tag}</span>
              </div>
              <h3 style={{font:'800 20px/1.25 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.01em', margin:0}}>{r.title}</h3>
              <p className="gr-p" style={{fontSize:14, margin:0}}>{r.body}</p>
              <div style={{marginTop:'auto', paddingTop:8, font:'700 13.5px/1 Inter', color: r.accent, display:'inline-flex', alignItems:'center', gap:6}}>
                {r.cta} <Icon name="arrow-right" size={13}/>
              </div>
            </a>
          ))}
        </div>
        <div style={{marginTop:24, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap', font:'600 13px/1 Inter', color:'var(--gr-fg-3)'}}>
          <span>Also see:</span>
          <a href="#/skill-readiness" style={hLink}>Skill Readiness (30 programmes)</a>·
          <a href="#/tools" style={hLink}>13 free tools</a>·
          <a href="#/resources/library" style={hLink}>301-article Library</a>·
          <a href="#/gcc-employers" style={hLink}>80+ named GCCs</a>·
          <a href="#/roles" style={hLink}>22 role pods</a>
        </div>
      </div>
    </section>
  );
}

const hLink = { color:'var(--gr-gold-700)', textDecoration:'none', fontWeight:700 };

Object.assign(window, { HomePage, StakeholderRouter });