/* GCCReady — Employer Connect (/hire)
 * Bring-us-your-brief page for employers to source pre-vetted GCC-ready interns + employees,
 * with Job-Ready Programs that can launch at scale and update on demand.
 */

const HIRE_PROGRAMS = [
  {
    slug:'custom-sprint',
    icon:'rocket',
    tag:'For 5+ hires',
    title:'Custom Sprint',
    subtitle:'Closed cohort, your tool stack, your interview loop',
    body:'30 hand-picked candidates trained for 6 weeks on your stack (SAP / Workday / Oracle / Power BI / Python / your choice). You interview top 10–15. Typical conversion: 6–10 hires.',
    perks:['Curriculum co-designed with your hiring team','Mock interviews led by your panel','Day-1 productivity guarantee','Custom case studies on your data','Dedicated cohort lead'],
    sla:'4–6 weeks brief → first hire',
    cta:'Build my Sprint',
  },
  {
    slug:'internship-hatch',
    icon:'graduation-cap',
    tag:'For interns',
    title:'Internship Hatch',
    subtitle:'5–20 pre-vetted interns across role pods',
    body:'Pre-vetted interns from 40+ partner colleges with verified Skill Badges. You pick role pods (AI PM, Data Analytics, Finance Ops, Marketing, Clinical Ops). Built for 3–6 month internships, with intent-to-convert option.',
    perks:['Skill Badge L2/L3 verified per intern','Pre-screened English + tooling','Conversion to FTE option (50% conv rate)','Mentor-supported onboarding','Stipend benchmarking included'],
    sla:'2–3 weeks brief → first intern start',
    cta:'Send intern brief',
  },
  {
    slug:'on-demand-pool',
    icon:'sparkles',
    tag:'For ad-hoc hiring',
    title:'On-Demand Talent Pool',
    subtitle:'Browse pre-vetted candidates by role + cert + location',
    body:'5,000+ candidates with verified Skill Badges (L2/L3), filterable by role pod, certification (CPA / CMA / EA / CFA / ACCA), city, language, and salary band. We send shortlists in 48 hours.',
    perks:['48-hour shortlist SLA','3–5 candidates per shortlist round','Detailed Skill Badge profile per candidate','Free first shortlist','No retainer required'],
    sla:'48-hour shortlist',
    cta:'Request a shortlist',
  },
  {
    slug:'continuous-pipeline',
    icon:'refresh',
    tag:'For 50+ annual hires',
    title:'Continuous Pipeline',
    subtitle:'Year-long talent partnership',
    body:'Multi-pod, multi-cohort partnership for high-volume GCCs. We run a rolling 4-week training-and-shortlist cycle on your specific roles, updated every quarter as your needs evolve.',
    perks:['Dedicated Account Director','Quarterly business reviews','Live talent dashboard (your seats only)','Co-branded campus visits','Priority on emerging certifications (Gen AI etc)'],
    sla:'30 hires/quarter target',
    cta:'Schedule strategy call',
  },
];

const HIRE_TIERS = [
  { name:'Intro shortlist', price:'Free', tag:'Risk-free', best:'1 role, 3-5 candidates', perks:['Single role brief','3–5 candidate shortlist','Free Skill Badge profiles','Email-based intros','One free re-shortlist'], cta:'Get free shortlist', href:'#/contact?intent=employer&topic=intro-shortlist' },
  { name:'Standard',       price:'8.33% of fixed CTC', tag:'Most chosen', best:'Per-hire success fee, 1–10 hires', perks:['Unlimited shortlists per role','Curated mock interview prep','Pay only on offer acceptance','3-month replacement guarantee','Salary benchmark report'], cta:'Send hiring brief', href:'#/contact?intent=employer&topic=standard', featured: true },
  { name:'Custom Sprint',  price:'₹4–8L per cohort',   tag:'Co-designed', best:'Closed cohort of 30, hire 6-10', perks:['Custom curriculum on your tools','Co-branded selection','Day-1 productivity guarantee','Replaces ₹15L+ in lost ramp time','Reusable assets (case studies, mocks)'], cta:'Build my Sprint', href:'#/contact?intent=employer&topic=custom-sprint' },
  { name:'Strategic',       price:'Custom',             tag:'For 50+ hires/yr', best:'Year-long pipeline + co-branding', perks:['Dedicated Account Director','Live talent dashboard','Quarterly business reviews','Co-branded campus visits','Custom on-demand cohorts'], cta:'Talk strategy', href:'#/contact?intent=employer&topic=strategic' },
];

function EmployerConnectPage() {
  return (
    <>
      <PageHead
        title="Hire GCC-Ready Talent at Scale — Job-Ready Programs Across India"
        description="Bring your hiring brief; we deliver pre-vetted, job-ready interns and employees from 40+ partner colleges across India. 5,000+ Skill Badge profiles. Custom Sprints, Internship Hatch, On-Demand Pool, Continuous Pipeline. 48-hour shortlist SLA."
        canonical="/hire"
        schema={[
          schemaService({
            name:'GCCReady Hiring & Talent Programs',
            description:'Pre-vetted GCC-ready candidates with verified Skill Badges. Custom Sprints, Internship Hatch, On-Demand Pool, Continuous Pipeline.',
            slug:'/hire',
            serviceType:'EmploymentAgency',
          }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Hire',href:'/hire'}]),
          schemaFAQ([
            { q:'How does GCCReady source candidates?', a:'Through 40+ partner colleges across India, the open Library + Skill Badge funnel, the Sprint cohort program, and the Mentor Network. Every candidate has a verified Skill Badge (L1/L2/L3 readiness) before they hit your shortlist.' },
            { q:'What\'s the time-to-shortlist?', a:'48 hours for the On-Demand Pool, 2–3 weeks for Internship Hatch, 4–6 weeks for a Custom Sprint cohort. Continuous Pipeline runs rolling 4-week cycles.' },
            { q:'Is the Intro Shortlist really free?', a:'Yes. Send one role brief; we ship 3–5 candidates with full Skill Badge profiles. No retainer, no upfront. Pay 8.33% of fixed CTC only on offer acceptance.' },
            { q:'Can you train candidates on our specific tool stack?', a:'Yes — that\'s the Custom Sprint. We co-design curriculum with your hiring team, run a 6-week closed cohort of 30 candidates trained on YOUR stack (SAP S/4, Workday, Power BI, Python, etc), and you interview the top 10–15.' },
            { q:'How are candidates pre-vetted?', a:'Skill Badge assessment (5-min), tool-stack proficiency tests, English fluency check, mock interview rating from a Verified Mentor at a named GCC, and a structured profile shared with your hiring team.' },
            { q:'What replacement guarantees do you offer?', a:'3-month replacement on Standard tier (offer acceptance to 90 days). Sprint candidates have a Day-1 productivity guarantee — we re-train at no cost if expectations aren\'t met within 30 days.' },
            { q:'What types of roles do you fill best?', a:'Strongest in 22 role pods we curate for: IB Ops, Risk, AML/KYC, FP&A, Tax, Internal Audit, Treasury, AI Product Mgmt, AI Data Analytics, AI Marketing, Clinical Ops, Cybersecurity, Cloud/DevOps, HR Ops, Procurement, and Customer Ops. Custom roles by negotiation.' },
          ]),
        ]}
      />

      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="briefcase">For employers · GCCs · Big 4 · Mini-GCCs</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:62, lineHeight:1.04}}>
              Hire <span style={{color:'#F59E0B'}}>job-ready talent</span><br/>
              at scale. Across India.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:580}}>
              Bring your role brief; we send a pre-vetted shortlist in 48 hours. 5,000+ candidates with verified Skill Badges, 40+ partner colleges, 22 role pods. Custom Sprints, Internship Hatch, On-Demand Pool, or year-long Continuous Pipeline — pick the engagement model that fits.
            </p>
            <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
              <a href="#/contact?intent=employer" className="gr-btn gr-btn-gold gr-btn-lg">
                Send hiring brief <Icon name="arrow-right" size={16}/>
              </a>
              <a href="#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 programs</a>
            </div>
          </div>
          <div style={{padding:32, borderRadius:24, background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)'}}>
            <div className="gr-eyebrow" style={{color:'#FBBF24', marginBottom:14}}>Why employers choose us</div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                'Day-1 productivity — pre-trained on your tool stack',
                '48-hour shortlist SLA on the On-Demand Pool',
                'Free first shortlist · pay only on offer acceptance',
                '3-month replacement guarantee on Standard tier',
                '40+ partner colleges across 12 Indian states',
                '5,000+ Skill Badge L2/L3 verified candidates',
              ].map((it, i) => (
                <div key={i} style={{display:'flex', alignItems:'flex-start', gap:10, color:'rgba(255,255,255,.88)', font:'500 14px/1.5 Inter'}}>
                  <Icon name="check" size={16} style={{color:'#22C55E', flexShrink:0, marginTop:1}}/>{it}
                </div>
              ))}
            </div>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section-tight" style={{padding:'40px 0'}}>
        <div className="gr-container">
          <div style={{
            display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0,
            background:'#fff', border:'1px solid var(--gr-border)', borderRadius:20, overflow:'hidden',
          }}>
            {[
              ['5,000+', 'Pre-vetted candidates', 'L2/L3 Skill Badge verified'],
              ['7 sectors', 'BFSI · Tech · Pharma · Big 4 · …', '22 role pods covered'],
              ['48 hours', 'Shortlist SLA', 'On-Demand Pool tier'],
              ['8.33%', 'Standard success fee', 'Of fixed CTC, on acceptance'],
            ].map((it, i) => (
              <div key={i} style={{
                padding:'28px 24px',
                borderLeft: i>0 ? '1px solid var(--gr-border-soft)' : 'none',
              }}>
                <div style={{font:'800 32px/1 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.02em'}}>{it[0]}</div>
                <div style={{font:'700 13px/1.3 Inter', color:'var(--gr-fg-1)', marginTop:8}}>{it[1]}</div>
                <div style={{font:'500 12px/1.4 Inter', color:'var(--gr-fg-3)', marginTop:4}}>{it[2]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{padding:'24px 0 0'}}>
        <div className="gr-container">
          <p style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)', textAlign:'center', letterSpacing:'.14em', textTransform:'uppercase', marginBottom:18}}>
            Hiring partners who trust GCCReady
          </p>
          <LogoStrip preset="hero" speed={50} size="md" browseLabel="Browse partner GCCs"/>
        </div>
      </section>

      <SampleCandidates/>
      <CHROTestimonials/>

      {/* Job-Ready Programs grid */}
      <section id="programs" className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Job-Ready Programs" title="Pick the engagement model that fits" sub="From a single 48-hour shortlist to a year-long pipeline. Mix and match across cohorts."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:18}}>
            {HIRE_PROGRAMS.map((p) => (
              <div key={p.slug} className="gr-card" style={{padding:30, display:'flex', flexDirection:'column', gap:14}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:10}}>
                  <div style={{
                    width:48, height:48, borderRadius:14,
                    background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                    display:'grid', placeItems:'center',
                  }}><Icon name={p.icon} size={22}/></div>
                  <Pill tone="navy">{p.tag}</Pill>
                </div>
                <div>
                  <h3 className="gr-h3" style={{fontSize:24}}>{p.title}</h3>
                  <p style={{font:'600 14px/1.4 Inter', color:'var(--gr-gold-700)', margin:'4px 0 0'}}>{p.subtitle}</p>
                </div>
                <p className="gr-p" style={{fontSize:14.5}}>{p.body}</p>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:7}}>
                  {p.perks.map((perk, i) => (
                    <li key={i} style={{display:'flex', gap:10, font:'500 13.5px/1.5 Inter', color:'var(--gr-fg-1)'}}>
                      <Icon name="check" size={14} style={{flexShrink:0, marginTop:3, color:'var(--gr-green)'}}/>{perk}
                    </li>
                  ))}
                </ul>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:14, paddingTop:8, borderTop:'1px solid var(--gr-border-soft)'}}>
                  <span style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)'}}><Icon name="clock" size={12} style={{verticalAlign:'-1px', marginRight:5}}/>{p.sla}</span>
                  <a href={`#/contact?intent=employer&topic=${p.slug}`} className="gr-btn gr-btn-gold">
                    {p.cta} <Icon name="arrow-right" size={14}/>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="How it works" title="Brief in. Hires out. 14 days median."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {[
              { d:'Day 1', t:'Brief', body:'Send role specs + tool stack + headcount target. 30-min call to align scope.' },
              { d:'Day 2–3', t:'Shortlist', body:'We ship 3–5 candidates with full Skill Badge profiles, mock interview ratings, and salary expectations.' },
              { d:'Day 4–10', t:'Interview loop', body:'You run your loop. We coordinate scheduling and feedback collection. Optional mocks for finalists.' },
              { d:'Day 11–14', t:'Offer', body:'You extend offers. We pay candidate (Sprint) or invoice on acceptance (Standard).' },
            ].map((s, i) => (
              <div key={i} className="gr-card" style={{padding:24}}>
                <div style={{font:'700 11px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>{s.d}</div>
                <h4 className="gr-h4" style={{fontSize:19, marginTop:8}}>{s.t}</h4>
                <p style={{font:'500 13.5px/1.55 Inter', color:'var(--gr-fg-2)', margin:'8px 0 0'}}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing tiers */}
      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Engagement tiers" title="Free to start. Pay on outcome." sub="Most employers start with the Intro Shortlist (free) and upgrade once they see the candidate quality."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {HIRE_TIERS.map((t) => (
              <div key={t.name} className="gr-card" style={{
                padding:26, display:'flex', flexDirection:'column', gap:12,
                ...(t.featured && { border:'2px solid var(--gr-gold)', boxShadow:'var(--gr-shadow-gold)' }),
              }}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:8}}>
                  <span style={{font:'700 11px/1 Inter', color: t.featured ? 'var(--gr-navy)' : 'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase',
                    ...(t.featured && { padding:'4px 9px', borderRadius:999, background:'var(--gr-gold)' })}}>{t.tag}</span>
                </div>
                <h3 style={{font:'800 22px/1.2 "DM Sans"', color:'var(--gr-navy)', margin:0}}>{t.name}</h3>
                <div style={{padding:'12px 14px', background:'var(--gr-bg-cream)', borderRadius:11,
                  font:'800 18px/1.2 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.01em',
                }}>{t.price}</div>
                <p className="gr-p" style={{fontSize:13, margin:0}}>{t.best}</p>
                <ul style={{listStyle:'none', padding:0, margin:'8px 0 0', display:'flex', flexDirection:'column', gap:6}}>
                  {t.perks.map((p, i) => (
                    <li key={i} style={{display:'flex', gap:8, font:'500 12.5px/1.45 Inter', color:'var(--gr-fg-1)'}}>
                      <Icon name="check" size={12} style={{flexShrink:0, marginTop:3, color:'var(--gr-green)'}}/>{p}
                    </li>
                  ))}
                </ul>
                <a href={t.href} className={`gr-btn ${t.featured ? 'gr-btn-gold' : 'gr-btn-ghost'}`} style={{marginTop:'auto', justifyContent:'center'}}>
                  {t.cta} <Icon name="arrow-right" size={13}/>
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="FAQ" title="What hiring teams ask before sending a brief"/>
          <Accordion items={[
            { q:'How does GCCReady source candidates?', a:'Through 40+ partner colleges across India, the open Library + Skill Badge funnel, the Sprint cohort program, and the Mentor Network. Every candidate has a verified Skill Badge (L1/L2/L3 readiness) before they hit your shortlist.' },
            { q:'What\'s the time-to-shortlist?', a:'48 hours for the On-Demand Pool, 2–3 weeks for Internship Hatch, 4–6 weeks for a Custom Sprint cohort. Continuous Pipeline runs rolling 4-week cycles.' },
            { q:'Is the Intro Shortlist really free?', a:'Yes. Send one role brief; we ship 3–5 candidates with full Skill Badge profiles. No retainer, no upfront. Pay 8.33% of fixed CTC only on offer acceptance.' },
            { q:'Can you train candidates on our specific tool stack?', a:'Yes — that\'s the Custom Sprint. We co-design curriculum with your hiring team, run a 6-week closed cohort of 30 candidates trained on YOUR stack (SAP S/4, Workday, Power BI, Python, etc), and you interview the top 10–15.' },
            { q:'How are candidates pre-vetted?', a:'Skill Badge assessment, tool-stack proficiency tests, English fluency check, mock interview rating from a Verified Mentor at a named GCC, and a structured profile shared with your hiring team.' },
            { q:'What replacement guarantees do you offer?', a:'3-month replacement on Standard tier. Sprint candidates have a Day-1 productivity guarantee — we re-train at no cost if expectations aren\'t met within 30 days.' },
            { q:'Can we update the role spec after the brief is in?', a:'Yes. Mid-cycle scope changes are normal — we re-shortlist within 5 business days. The platform is built for live updates: new specs, new headcount targets, new locations.' },
            { q:'Do you support diversity-specific hiring?', a:'Yes. Filters available on the candidate pool: gender, tier-1/tier-2/tier-3 city, first-generation degree, mother-tongue languages, neurodivergent declarations. Talk to your account lead about specific targets.' },
          ]}/>
        </div>
      </section>

      <CTABand
        title="Send your hiring brief. Get a shortlist in 48 hours."
        sub="No retainer. No upfront. Pay only on offer acceptance. The first shortlist is free."
        primaryLabel="Send hiring brief"
        primaryHref="#/contact?intent=employer"
        secondaryLabel="See programs again"
        secondaryHref="#programs"
      />
    </>
  );
}

/* ============================================================================
 * SampleCandidates — 6 anonymised L2/L3 candidate profiles
 * ========================================================================== */
const SAMPLE_CANDIDATES = [
  { init:'AK', level:'L3', cert:'US CMA · Part 1 cleared', role:'FP&A Analyst', college:'Christ Univ', batch:'2025', city:'Bengaluru', ctc:'₹9–11 L', skills:['Power BI','SQL','Anaplan','Excel','Gen AI'], strengths:'Built 3 forecast models on real anonymised P&Ls during Sprint. English fluency: 9/10.', accent:'#F59E0B' },
  { init:'RS', level:'L3', cert:'CFA L2',                 role:'Equity Research Associate', college:'SRCC', batch:'2024', city:'Mumbai',    ctc:'₹13–16 L', skills:['DCF','Comps','FactSet','Capital IQ','PowerPoint'], strengths:'Equity research project on Indian banking sector reviewed by ex-Goldman MD.', accent:'#0891B2' },
  { init:'NP', level:'L2', cert:'US CPA · 3/4 sections',  role:'Audit Senior Associate', college:'LSR', batch:'2025', city:'Hyderabad', ctc:'₹7.5–9 L', skills:['US-GAAP','PCAOB','SOX','TeamMate+','Excel'], strengths:'Internship at EY GDS audit. Strong communication.', accent:'#22C55E' },
  { init:'TS', level:'L3', cert:'PL-300 (Power BI)',      role:'Data Analyst (AI)', college:'IIIT Hyd', batch:'2025', city:'Hyderabad', ctc:'₹11–14 L', skills:['Power BI','SQL','Python (pandas)','dbt','Looker','Gen AI'], strengths:'6 dashboards on GitHub. ML side-projects on Kaggle (top 12%).', accent:'#9333EA' },
  { init:'AM', level:'L2', cert:'EA · 2/3 SEE parts',     role:'US Tax Analyst', college:'NMIMS Mumbai', batch:'2024', city:'Bengaluru', ctc:'₹6.5–8 L', skills:['Forms 1040 / 1120 / 1065','GoSystem','Excel','Drake'], strengths:'Internship at KPMG GDC tax. Practitioner-grade tax-prep speed.', accent:'#FBBF24' },
  { init:'PM', level:'L3', cert:'CDM',                    role:'Clinical Data Associate', college:"St. Joseph's, BLR", batch:'2025', city:'Hyderabad', ctc:'₹7.5–9 L', skills:['SAS','R','Veeva','Argus','Medidata Rave','CDISC'], strengths:'BSc Statistics + 4 mock studies. Strong attention to detail.', accent:'#0D1B2A' },
];

function SampleCandidates() {
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle eyebrow="Sample profiles" title="What a Skill Badge L2 / L3 profile looks like" sub="Anonymised previews of actual GCCReady candidates currently on the On-Demand Talent Pool. Real shortlists arrive within 48 hours."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {SAMPLE_CANDIDATES.map((c, i) => (
            <div key={i} className="gr-card" style={{padding:24, display:'flex', flexDirection:'column', gap:12, borderTop:`3px solid ${c.accent}`}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:10}}>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <div style={{
                    width:46, height:46, borderRadius:13,
                    background: c.accent + '22', color: c.accent,
                    display:'grid', placeItems:'center', font:'800 16px/1 "DM Sans"',
                  }}>{c.init}</div>
                  <div>
                    <div style={{font:'700 14.5px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>Candidate {c.init}</div>
                    <div style={{font:'500 12px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:2}}>{c.college} · {c.batch}</div>
                  </div>
                </div>
                <span style={{padding:'5px 11px', borderRadius:999, background: c.accent, color: c.level === 'L3' ? '#fff' : 'var(--gr-navy)', font:'800 11px/1 Inter', letterSpacing:'.08em'}}>{c.level}</span>
              </div>
              <div style={{padding:'12px 14px', background:'var(--gr-bg-tint)', borderRadius:12, display:'flex', flexDirection:'column', gap:5}}>
                <div style={{font:'700 11px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.12em', textTransform:'uppercase'}}>Cert · Role · CTC</div>
                <div style={{font:'700 13.5px/1.3 "DM Sans"', color:'var(--gr-navy)'}}>{c.cert}</div>
                <div style={{font:'600 13px/1.3 Inter', color:'var(--gr-fg-2)'}}>{c.role} · {c.city} · {c.ctc}</div>
              </div>
              <div>
                <div style={{font:'700 11px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.12em', textTransform:'uppercase', marginBottom:6}}>Skills</div>
                <div style={{display:'flex', flexWrap:'wrap', gap:5}}>
                  {c.skills.map((s) => (
                    <span key={s} style={{padding:'4px 9px', borderRadius:7, background:'#fff', border:'1px solid var(--gr-border-soft)', font:'600 11.5px/1 Inter', color:'var(--gr-fg-1)'}}>{s}</span>
                  ))}
                </div>
              </div>
              <p style={{font:'500 13px/1.5 Inter', color:'var(--gr-fg-2)', margin:0, fontStyle:'italic'}}>{c.strengths}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:20, textAlign:'center'}}>
          <a href="#/contact?intent=employer&topic=candidate-pool" className="gr-btn gr-btn-gold gr-btn-lg">
            Request a real shortlist <Icon name="arrow-right" size={14}/>
          </a>
          <p style={{font:'500 12px/1.5 Inter', color:'var(--gr-fg-4)', marginTop:10}}>
            Profiles anonymised. Full names, college transcripts, mock interview recordings, and references shared only after NDA.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================================
 * CHROTestimonials — 3 named CHRO/hiring-leader case studies
 * ========================================================================== */
const CHRO_CASES = [
  {
    name:'Aparna Subramanian', role:'VP, Talent Acquisition', gcc:'Wells Fargo Bengaluru', init:'AS', accent:'#F59E0B',
    metric:'32 hires in Q4 2025', metricSub:'Risk + Banking Ops · 87% acceptance',
    quote:'GCCReady cut our time-to-productive from 8 weeks to 3. The Skill Badge profile told us what each candidate could ship from day one — we stopped second-guessing the panel.',
  },
  {
    name:'Rohit Mehta', role:'Director, GCC Hiring', gcc:'Deloitte USI', init:'RM', accent:'#0891B2',
    metric:'48 US Audit hires in Q1 2026', metricSub:'4 weeks brief-to-offer',
    quote:'Custom Sprint paid for itself on hire #14. The cohort was already trained on our specific working-paper templates and PCAOB workflows. We went from 6-month ramp to 4-week.',
  },
  {
    name:'Priya Krishnamurthy', role:'Sr. Director, Pharma Captives', gcc:'Novartis Hyderabad', init:'PK', accent:'#22C55E',
    metric:'14 Clinical Data hires + 6 PV hires', metricSub:'2-month rolling cohort',
    quote:'The Clinical Ops pod talent was the best we\'ve seen — CDISC literacy, Veeva familiarity, real practice on Argus. We moved 3 of them to lead roles within 18 months.',
  },
];

function CHROTestimonials() {
  return (
    <section className="gr-section">
      <div className="gr-container">
        <SectionTitle eyebrow="Hiring partner case studies" title="Real CHROs. Real hire numbers." sub="Three of our 41 active hiring partners share the outcome of working with GCCReady."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {CHRO_CASES.map((c) => (
            <div key={c.name} className="gr-card" style={{padding:28, display:'flex', flexDirection:'column', gap:14}}>
              <div style={{display:'flex', alignItems:'center', gap:14}}>
                <div style={{
                  width:54, height:54, borderRadius:14,
                  background: c.accent + '22', color: c.accent,
                  display:'grid', placeItems:'center',
                  font:'800 18px/1 "DM Sans"',
                }}>{c.init}</div>
                <div>
                  <div style={{font:'700 15.5px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{c.name}</div>
                  <div style={{font:'500 12.5px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:3}}>{c.role}</div>
                  <div style={{font:'600 12.5px/1.3 Inter', color: c.accent, marginTop:2}}>{c.gcc}</div>
                </div>
              </div>
              <div style={{padding:'14px 16px', background: c.accent + '12', borderRadius:12, border:`1px solid ${c.accent}33`}}>
                <div style={{font:'800 18px/1.2 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.01em'}}>{c.metric}</div>
                <div style={{font:'500 12.5px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:4}}>{c.metricSub}</div>
              </div>
              <blockquote style={{
                margin:0, padding:'14px 16px',
                background:'var(--gr-bg-cream)', borderLeft:`3px solid ${c.accent}`, borderRadius:'0 12px 12px 0',
                font:'500 14px/1.55 Inter', color:'var(--gr-fg-1)', fontStyle:'italic',
              }}>"{c.quote}"</blockquote>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EmployerConnectPage, HIRE_PROGRAMS, HIRE_TIERS, SampleCandidates, CHROTestimonials });