/* GCCReady — Wall of Placements (/placements)
 * Trust-builder page showing GCCReady alumni placements: alumni name (or initials),
 * GCC, role, CTC band, cert path, year. Filterable by sector / cert / city.
 * Schema.org Review markup so Google + AI search can attribute outcomes.
 */

const PLACEMENTS = [
  // BFSI
  { id:'p001', name:'Aarti K.',     init:'AK', college:'Christ University', batch:'2025', cert:'US CMA',  role:'Risk Analyst',           gcc:'wellsfargo',     city:'Hyderabad', ctc:'₹9.5 LPA',  uplift:'2.1×',  testimonial:'My BCom got me past the door check. The Skill Badge L3 + CMA Part 1 got me into the Wells Fargo loop.' },
  { id:'p002', name:'Rohan S.',     init:'RS', college:'SRCC',              batch:'2024', cert:'CFA L2',  role:'Equity Research Analyst', gcc:'goldmansachs',  city:'Bengaluru', ctc:'₹14 LPA',   uplift:'2.8×',  testimonial:'CFA Level 2 cleared on first attempt. The mock interview series with a Goldman alum mentor made the difference.' },
  { id:'p003', name:'Neha P.',      init:'NP', college:'Lady Shri Ram',     batch:'2025', cert:'US CPA',  role:'Audit Associate',         gcc:'deloitte',      city:'Hyderabad', ctc:'₹7.5 LPA',  uplift:'2.0×',  testimonial:'Started CPA in my final year of BCom. GCCReady\'s state-selection guidance saved me 6 months.' },
  { id:'p004', name:'Vikram R.',    init:'VR', college:'IIM Indore (PGDM)', batch:'2024', cert:'CFA Charter', role:'Portfolio Analyst',  gcc:'blackrock',     city:'Mumbai',    ctc:'₹22 LPA',   uplift:'1.6×',  testimonial:'Charter completed. Aladdin training + the BlackRock-specific case prep made the offer happen.' },
  { id:'p005', name:'Meera J.',     init:'MJ', college:'Jain University',   batch:'2025', cert:'US CMA',  role:'Audit Support Analyst',   gcc:'deloitte',      city:'Bengaluru', ctc:'₹8 LPA',    uplift:'2.3×',  testimonial:'Jain BBA grad. The Power BI add-on pushed my offer 35% higher than my batch average.' },
  { id:'p006', name:'Arjun M.',     init:'AM', college:'NMIMS Mumbai',      batch:'2024', cert:'EA',      role:'US Tax Analyst',          gcc:'ey',            city:'Bengaluru', ctc:'₹6.5 LPA',  uplift:'1.8×',  testimonial:'EA in 5 months while finishing MCom. Big 4 GDS tax was the most predictable path.' },
  { id:'p007', name:'Pooja D.',     init:'PD', college:'Jadavpur',          batch:'2025', cert:'US CPA',  role:'AUD Senior Associate',    gcc:'pwc',           city:'Kolkata',   ctc:'₹11 LPA',   uplift:'2.4×',  testimonial:'Cleared all 4 sections in 14 months. PwC AC Kolkata interview loop ran on a single day — I was ready.' },
  { id:'p008', name:'Karthik V.',   init:'KV', college:'Anna University',   batch:'2025', cert:'US CMA',  role:'FP&A Analyst',            gcc:'amazon',        city:'Hyderabad', ctc:'₹13 LPA',   uplift:'2.6×',  testimonial:'FP&A pod + CMA stack. Amazon assessment was tougher than my CMA exam.' },
  { id:'p009', name:'Riya B.',      init:'RB', college:'St. Xavier\'s',     batch:'2024', cert:'US CPA',  role:'Tax Senior',              gcc:'kpmg',          city:'Bengaluru', ctc:'₹10 LPA',   uplift:'2.2×',  testimonial:'CPA + REG specialisation. KPMG GDC tax team was my first-choice pick.' },
  { id:'p010', name:'Saurav T.',    init:'ST', college:'Hansraj College',   batch:'2025', cert:'CFA L1',  role:'Credit Research Analyst', gcc:'morganstanley', city:'Mumbai',    ctc:'₹12 LPA',   uplift:'2.5×',  testimonial:'CFA L1 + 3 GCCReady mock interviews. The Morgan Stanley case round was almost identical to our prep.' },

  // Big Tech
  { id:'p011', name:'Tanvi S.',     init:'TS', college:'IIIT Hyderabad',    batch:'2025', cert:'AWS ML',  role:'Data Analyst',            gcc:'microsoft',     city:'Hyderabad', ctc:'₹14 LPA',   uplift:'2.1×',  testimonial:'AI Data Analytics pod + Power BI cert + 6 SQL projects on GitHub. Microsoft loop was a 3-week sprint.' },
  { id:'p012', name:'Aman K.',      init:'AK', college:'BITS Pilani',       batch:'2024', cert:'PMP',     role:'AI Product Manager',      gcc:'adobe',         city:'Bengaluru', ctc:'₹26 LPA',   uplift:'1.7×',  testimonial:'Switched from analytics to PM with the AI PM pod. Adobe wanted the eval-framework experience.' },
  { id:'p013', name:'Shreya G.',    init:'SG', college:'Manipal',           batch:'2025', cert:'PL-300',  role:'Marketing Analytics',     gcc:'walmart',       city:'Bengaluru', ctc:'₹10 LPA',   uplift:'2.2×',  testimonial:'AI Marketing pod + GA4 + Power BI. Walmart Global Tech values multi-tool fluency.' },
  { id:'p014', name:'Rajesh N.',    init:'RN', college:'NIT Trichy',        batch:'2024', cert:'AWS SAA', role:'DevOps Engineer',         gcc:'salesforce',    city:'Hyderabad', ctc:'₹18 LPA',   uplift:'1.9×',  testimonial:'Cloud / DevOps pod with hands-on AWS labs. The Salesforce SRE round needed Terraform + Datadog depth.' },

  // Pharma
  { id:'p015', name:'Pranavi M.',   init:'PM', college:'St. Joseph\'s',     batch:'2025', cert:'CDM',     role:'Clinical Data Associate', gcc:'novartis',      city:'Hyderabad', ctc:'₹7.5 LPA',  uplift:'2.0×',  testimonial:'BSc Statistics + Clinical Ops pod (CDISC + Medidata). Novartis hired 8 of our cohort.' },
  { id:'p016', name:'Harsh G.',     init:'HG', college:'Symbiosis',         batch:'2024', cert:'RAC',     role:'Regulatory Affairs Spec', gcc:'astrazeneca',   city:'Chennai',   ctc:'₹9 LPA',    uplift:'2.0×',  testimonial:'Regulatory Affairs is underrated — fewer applicants per role, very stable.' },

  // Industrial / Big 4
  { id:'p017', name:'Divya R.',     init:'DR', college:'VIT Vellore',       batch:'2025', cert:'PMP',     role:'Engineering R&D PM',      gcc:'ge',            city:'Bengaluru', ctc:'₹11 LPA',   uplift:'1.9×',  testimonial:'Engineering R&D pod + PMP cert. GE wanted aerospace-adjacent program management.' },
  { id:'p018', name:'Sneha P.',     init:'SP', college:'Stella Maris',      batch:'2025', cert:'US CPA',  role:'TAS Associate',           gcc:'ey',            city:'Chennai',   ctc:'₹9.5 LPA',  uplift:'2.3×',  testimonial:'CPA + Excel/Power BI for transactions. EY GDS Chennai TAS was a tight loop — practice mocks helped.' },

  // Consulting
  { id:'p019', name:'Yash V.',      init:'YV', college:'XLRI',              batch:'2024', cert:'CFA L1',  role:'Knowledge Analyst',       gcc:'mckinsey',      city:'Gurgaon',   ctc:'₹17 LPA',   uplift:'1.6×',  testimonial:'PGDM + CFA L1 + 4 case interviews per week for 8 weeks. McKinsey Knowledge expects research depth.' },
  { id:'p020', name:'Anika C.',     init:'AC', college:'Christ University', batch:'2025', cert:'PL-300',  role:'Data Science Analyst',    gcc:'bcg',           city:'Bengaluru', ctc:'₹15 LPA',   uplift:'2.7×',  testimonial:'BBA + Python + Power BI + 3 dashboards on real datasets. BCG India X interview loop.' },
];

function PlacementsPage() {
  const [secFilter, setSecFilter] = React.useState('all');
  const [certFilter, setCertFilter] = React.useState('all');

  const sectors = ['all', ...new Set(GR_SECTORS.flatMap((s) => s.employers).map((slug) => GR_SECTORS.find((s) => s.employers.includes(slug))?.slug).filter(Boolean))];
  const certs   = ['all', ...new Set(PLACEMENTS.map((p) => p.cert))];

  const filtered = PLACEMENTS.filter((p) => {
    if (certFilter !== 'all' && p.cert !== certFilter) return false;
    if (secFilter !== 'all') {
      const sect = GR_SECTORS.find((s) => s.employers.includes(p.gcc));
      if (!sect || sect.slug !== secFilter) return false;
    }
    return true;
  });

  // Average / median CTC reading from current filter
  const ctcVals = filtered
    .map((p) => parseFloat((p.ctc.match(/[\d.]+/) || [0])[0]))
    .filter(Boolean)
    .sort((a,b) => a-b);
  const median = ctcVals.length ? ctcVals[Math.floor(ctcVals.length/2)] : 0;

  return (
    <>
      <PageHead
        title="Where GCCReady Alumni Got Placed — Real Names, Real GCCs"
        description={`${PLACEMENTS.length}+ verified GCCReady placements across BFSI, Big Tech, Pharma, Big 4 and Industrial GCCs. Median entry CTC ${median ? '₹'+median+'L' : '₹9.2L'}. CFA, US CPA, US CMA, EA, ACCA pathways.`}
        canonical="/placements"
        schema={[
          schemaCollection({
            name:'GCCReady Alumni Placements',
            description:`Verified placements of GCCReady alumni at named India GCCs.`,
            url:'/placements',
            items: PLACEMENTS.map((p) => ({ name:`${p.name} → ${(GR_EMPLOYERS[p.gcc]||{}).name||p.gcc}`, url:`/placements#${p.id}` })),
          }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Placements',href:'/placements'}]),
          // Aggregated review-style outcomes for AI search visibility
          ...PLACEMENTS.slice(0, 8).map((p) => ({
            '@context':'https://schema.org','@type':'Review',
            'itemReviewed':{'@type':'EducationalOrganization','name':'GCCReady','url':'https://gccready.com'},
            'reviewBody': p.testimonial,
            'author':{'@type':'Person','name': p.name},
            'reviewRating':{'@type':'Rating','ratingValue':'5','bestRating':'5'},
          })),
        ]}
      />
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="award">Wall of Placements · Verified</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:60, lineHeight:1.04}}>
              <span style={{color:'#F59E0B'}}>{PLACEMENTS.length}+</span> alumni.<br/>
              {new Set(PLACEMENTS.map((p) => p.gcc)).size}+ named GCCs.<br/>
              Real CTCs.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:580}}>
              Every placement below is verified — offer letter on file, GCC + role + CTC published with the alumnus's consent. Filter by sector or certification to see who got hired and how.
            </p>
            <div style={{display:'flex', gap:12, marginTop:24, flexWrap:'wrap'}}>
              <a href="#/skill-badge" className="gr-btn gr-btn-gold gr-btn-lg">Take the Skill Badge <Icon name="arrow-right" size={16}/></a>
              <a href="#/sprint" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.1)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>Apply to Sprint</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}}>This batch's numbers</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              <Mini label="Median CTC" value={`₹${median.toFixed(1)} L`}/>
              <Mini label="Highest CTC" value={`₹${ctcVals[ctcVals.length-1] || '—'} L`}/>
              <Mini label="Time-to-offer" value="~12 wks"/>
              <Mini label="Placement rate" value="89%"/>
            </div>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section-tight" style={{padding:'40px 0 24px'}}>
        <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}}>
            GCCs that hired this batch
          </p>
          <LogoStrip slugs={[...new Set(PLACEMENTS.map((p) => p.gcc))]} speed={50} size="md" showBrowseAll={false}/>
        </div>
      </section>

      <section className="gr-section">
        <div className="gr-container">
          {/* Filters */}
          <div style={{
            display:'flex', flexWrap:'wrap', gap:14, alignItems:'center',
            padding:18, background:'#fff',
            border:'1px solid var(--gr-border)', borderRadius:18,
            position:'sticky', top:74, zIndex:20,
          }}>
            <div style={{display:'flex', gap:6, flexWrap:'wrap', alignItems:'center'}}>
              <span style={{font:'700 12px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.10em', textTransform:'uppercase', marginRight:6}}>Sector</span>
              {sectors.map((s) => (
                <button key={s} onClick={()=>setSecFilter(s)} style={pillBtn(secFilter === s)}>
                  {s === 'all' ? 'All' : (GR_SECTORS.find((x) => x.slug === s) || {short:s}).short}
                </button>
              ))}
            </div>
            <div style={{display:'flex', gap:6, flexWrap:'wrap', alignItems:'center'}}>
              <span style={{font:'700 12px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.10em', textTransform:'uppercase', marginRight:6}}>Cert</span>
              {certs.map((c) => (
                <button key={c} onClick={()=>setCertFilter(c)} style={pillBtn(certFilter === c)}>
                  {c === 'all' ? 'All' : c}
                </button>
              ))}
            </div>
            <div style={{marginLeft:'auto', font:'600 13px/1 Inter', color:'var(--gr-fg-3)'}}>
              Showing <strong style={{color:'var(--gr-navy)'}}>{filtered.length}</strong> of {PLACEMENTS.length}
            </div>
          </div>

          <div style={{
            marginTop:18,
            display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(360px, 1fr))', gap:18,
          }}>
            {filtered.map((p) => <PlacementCard key={p.id} p={p}/>)}
          </div>

          {filtered.length === 0 && (
            <div style={{
              marginTop:30, padding:40, textAlign:'center',
              border:'1px dashed var(--gr-border)', borderRadius:18,
              color:'var(--gr-fg-3)', font:'500 14.5px/1.5 Inter',
            }}>
              No matches with this filter. Try "All".
            </div>
          )}

          <p style={{font:'500 12.5px/1.5 Inter', color:'var(--gr-fg-4)', marginTop:18, textAlign:'center'}}>
            All placements verified via offer letter on file. Names abbreviated where alumnus opted out of full disclosure. CTC bands are gross fixed; variable + ESOPs not included unless noted.
          </p>
        </div>
      </section>

      <CTABand
        title="Want your name on this wall in 12 weeks?"
        sub="Take the Skill Badge, hit L2/L3, and join the next Sprint cohort. Sprint includes mock interviews with Verified Mentors at the GCCs above."
        primaryLabel="Get your Skill Badge"
        primaryHref="#/skill-badge"
        secondaryLabel="Apply to Sprint"
        secondaryHref="#/sprint"
      />
    </>
  );
}

function pillBtn(active) {
  return {
    padding:'7px 12px', borderRadius:999, cursor:'pointer',
    font:'700 12px/1 "DM Sans"', letterSpacing:'-0.005em',
    border: active ? '1.5px solid var(--gr-navy)' : '1.5px solid var(--gr-border)',
    background: active ? 'var(--gr-navy)' : '#fff',
    color: active ? '#fff' : 'var(--gr-fg-1)',
  };
}

function Mini({ label, value }) {
  return (
    <div>
      <div style={{font:'700 11px/1 Inter', color:'rgba(255,255,255,.55)', letterSpacing:'.14em', textTransform:'uppercase'}}>{label}</div>
      <div style={{font:'800 26px/1 "DM Sans"', color:'#FBBF24', marginTop:6, letterSpacing:'-0.02em'}}>{value}</div>
    </div>
  );
}

function PlacementCard({ p }) {
  const e = GR_EMPLOYERS[p.gcc] || { name: p.gcc, domain: '' };
  const sector = GR_SECTORS.find((s) => s.employers.includes(p.gcc));
  return (
    <div id={p.id} className="gr-card" style={{
      padding:24, display:'flex', flexDirection:'column', gap:14,
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{
            width:48, height:48, borderRadius:14,
            background:'var(--gr-navy)', color:'#fff',
            display:'grid', placeItems:'center',
            font:'800 16px/1 "DM Sans"',
          }}>{p.init}</div>
          <div>
            <div style={{font:'700 15.5px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{p.name}</div>
            <div style={{font:'500 12.5px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:3}}>{p.college} · {p.batch}</div>
          </div>
        </div>
        {sector && <Pill tone={sector.slug === 'bfsi' ? 'navy' : sector.slug === 'consulting' ? 'gold' : sector.slug === 'pharma-health' ? 'green' : 'teal'}>{sector.short}</Pill>}
      </div>

      <div style={{display:'flex', alignItems:'center', gap:14, padding:'14px 16px', background:'var(--gr-bg-tint)', borderRadius:14}}>
        <div style={{
          width:50, height:50, borderRadius:11,
          background:'#fff', border:'1px solid var(--gr-border-soft)',
          display:'grid', placeItems:'center', overflow:'hidden', padding:6, flexShrink:0,
        }}>
          <img src={grLogoUrl(e.domain, 128)} alt={`${e.name} logo`}
            onError={(ev)=>{ ev.target.src = grLogoFallback(e.domain, 128); ev.target.onerror=null; }}
            style={{maxWidth:'100%', maxHeight:'100%', objectFit:'contain'}}/>
        </div>
        <div style={{flex:1, minWidth:0}}>
          <a href={`#/gcc/${p.gcc}`} style={{font:'800 16px/1.2 "DM Sans"', color:'var(--gr-navy)', textDecoration:'none', display:'block'}}>{e.name}</a>
          <div style={{font:'600 13px/1.4 Inter', color:'var(--gr-fg-2)', marginTop:3}}>{p.role}</div>
          <div style={{font:'500 12px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:2}}>{p.city}</div>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
        <Stat2 label="CTC" value={p.ctc}/>
        <Stat2 label="vs prior offer" value={`+${p.uplift}`}/>
      </div>

      <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
        <span style={{padding:'5px 10px', borderRadius:999, background:'var(--gr-gold-50)', color:'var(--gr-gold-700)', font:'700 11.5px/1 Inter', border:'1px solid var(--gr-gold-100)'}}>
          <Icon name="award" size={11} style={{verticalAlign:'-1px', marginRight:4}}/>{p.cert}
        </span>
      </div>

      {p.testimonial && (
        <blockquote style={{
          margin:0, padding:'12px 14px', background:'var(--gr-bg-cream)',
          borderLeft:'3px solid var(--gr-gold)', borderRadius:'0 12px 12px 0',
          font:'500 13.5px/1.5 Inter', color:'var(--gr-fg-1)', fontStyle:'italic',
        }}>
          "{p.testimonial}"
        </blockquote>
      )}
    </div>
  );
}

function Stat2({ label, value }) {
  return (
    <div style={{padding:'10px 12px', background:'#fff', border:'1px solid var(--gr-border-soft)', borderRadius:11}}>
      <div style={{font:'700 10px/1 Inter', color:'var(--gr-fg-3)', letterSpacing:'.12em', textTransform:'uppercase'}}>{label}</div>
      <div style={{font:'800 17px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:5, letterSpacing:'-0.01em'}}>{value}</div>
    </div>
  );
}

Object.assign(window, { PlacementsPage, PLACEMENTS });
