/* GCCReady — TPO funnel + Employer toolkit + Student Resources hubs */

const HUB_ICON = {
  TPO: 'graduation-cap',
  Employer: 'briefcase',
  Student: 'users',
  Other: 'book',
};

// Curated grouping for the TPO landing page (defines the structure students see)
const TPO_GROUPS = [
  {
    title: 'Start here',
    eyebrow: 'For TPOs new to GCCReady',
    icons: 'rocket',
    slugs: ['tpo-starter-handbook', 'tpo-consultation', 'tpo-webinar'],
  },
  {
    title: 'Run your placement cell',
    eyebrow: 'Operating system for the T&P office',
    icons: 'briefcase',
    slugs: ['placement-readiness-hub', 'placement-operations-manual', 'placement-operations-toolkit', 'placement-strategy-handbook', 'annual-placement-calendar-guide'],
  },
  {
    title: 'Report outcomes (NAAC / NEP)',
    eyebrow: 'Evidence packs that satisfy accreditation + boards',
    icons: 'file-check',
    slugs: ['placement-reporting-handbook', 'reporting-dashboard-toolkit', 'professional-pathways-commerce-colleges'],
  },
  {
    title: 'Train your team',
    eyebrow: 'Faculty + staff capability',
    icons: 'graduation-cap',
    slugs: ['train-the-trainer-tpo', 'tpo-resources', 'tpo-library', 'tpo-assessments'],
  },
];

const EMPLOYER_GROUPS = [
  {
    title: 'Discover talent',
    eyebrow: 'Engage GCCReady candidates',
    icons: 'users',
    slugs: ['employer-exchange'],
  },
  {
    title: 'Hire smarter',
    eyebrow: 'Toolkits that compress your time-to-hire',
    icons: 'target',
    slugs: ['employer-intelligence-toolkit', 'employer-outreach-playbook', 'recruiter-outreach-template-pack'],
  },
];

const STUDENT_GROUPS = [
  {
    title: 'Get GCC-ready',
    eyebrow: 'Foundational readiness frameworks',
    icons: 'shield-check',
    slugs: ['student-readiness-framework', 'student-readiness-toolkit', 'ai-readiness-and-free-courses'],
  },
  {
    title: 'Internships & evidence',
    eyebrow: 'Turn an internship into an offer',
    icons: 'file-text',
    slugs: ['internship-evidence-toolkit', 'internship-to-employability-guide'],
  },
  {
    title: 'Beyond placements',
    eyebrow: 'Build, don\'t just apply',
    icons: 'sparkles',
    slugs: ['beyond-placements-innovation-hub', 'startup-hub-sop'],
  },
];

function findHubs(manifest, slugs) {
  if (!manifest || !manifest.hubs) return [];
  return slugs.map((s) => manifest.hubs.find((h) => h.slug === s)).filter(Boolean);
}

/* ============================================================================
 * TPO Landing
 * ========================================================================== */
function TPOLandingPage() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('./hubs.json').then((r) => r.json()).then(setData).catch(() => setData({ error: true }));
  }, []);
  if (!data) return <LibraryLoading/>;

  return (
    <>
      <PageHead
        title="For TPOs & Placement Cells — NAAC, NEP-Ready Toolkits"
        description="Run a world-class placement cell. 15 plug-and-play playbooks, evidence packs, calendars, recruiter templates and dashboards built with TPOs at IIM, Christ, SRCC, Loyola and 40+ India campuses."
        canonical="/tpo"
        schema={[
          schemaService({ name:'GCCReady for TPOs', description:'Plug-and-play playbooks, evidence packs, recruiter templates and dashboards for India placement cells.', slug:'/tpo', serviceType:'EducationalService' }),
          schemaCollection({ name:'TPO Playbooks', description:'15 ready-to-deploy TPO toolkits.', url:'/tpo', items: (data.hubs||[]).filter((h)=>h.category==='TPO').map((h)=>({ name:h.title, url:`/hub/${h.slug}` })) }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'For TPOs',href:'/tpo'}]),
          schemaFAQ([
            { q:'What does GCCReady give a TPO?', a:'A complete operating system for the placement cell: annual placement calendar, NAAC/NEP outcome evidence pack, recruiter outreach toolkit, faculty handbook, batch readiness dashboard, and on-campus mock interview booking.' },
            { q:'Is GCCReady NAAC and NEP-ready?', a:'Yes. The reporting handbook and evidence pack are designed to satisfy NAAC criteria 5.2 (employability) and NEP 2020 employability mandates.' },
            { q:'How does the partnership pricing work?', a:'A free pilot batch (typically 30 students), then a per-student or revenue-share model on certifications and placements.' },
          ]),
        ]}
      />
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="graduation-cap">For TPOs &amp; placement cells</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:62, lineHeight:1.04}}>
              Run a <span style={{color:'#F59E0B'}}>world-class</span> placement cell.<br/>
              Without a 200-person team.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:580}}>
              Plug-and-play playbooks, evidence packs, calendars, recruiter templates, and dashboards for India's commerce, finance and AI-curious campuses. Built with TPOs at IIM, Christ, SRCC, Loyola and 40+ other colleges.
            </p>
            <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
              <a href="#/contact?intent=college&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="#/hub/tpo-starter-handbook" className="gr-btn gr-btn-lg" style={{
                background:'rgba(255,255,255,.1)', color:'#fff',
                border:'1px solid rgba(255,255,255,.18)',
              }}>Read the starter handbook</a>
            </div>
          </div>
          <div style={{
            padding:32, borderRadius:24,
            background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)',
          }}>
            <div style={{font:'700 11.5px/1 Inter', color:'#FBBF24', letterSpacing:'.14em', textTransform:'uppercase'}}>What's included</div>
            <h3 style={{font:'800 22px/1.2 "DM Sans"', color:'#fff', marginTop:8, letterSpacing:'-0.015em'}}>15 TPO playbooks · NAAC/NEP-ready</h3>
            <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:12}}>
              {[
                'Annual placement calendar (recruitment-season aware)',
                'NAAC / NEP outcome evidence pack',
                'Recruiter outreach + JD template pack',
                'Faculty handbook + train-the-trainer kit',
                'Batch readiness dashboard (L1/L2/L3 segmentation)',
                'Placement reporting handbook',
              ].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" style={{padding:'56px 0 24px'}}>
        <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',
          }}>
            {[
              ['40+', 'Partner colleges', 'across 12 states'],
              ['1,800+', 'GCCs in our network', 'Bengaluru · Hyd · Mumbai · Pune'],
              ['8 wks', 'Average pilot to first hire', 'student → cert prep → interview'],
              ['~85%', 'Pilot batches converting', 'to multi-year partnerships'],
            ].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>
          <p style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)', textAlign:'center', letterSpacing:'.14em', textTransform:'uppercase', margin:'28px 0 16px'}}>
            22 partner colleges across India · alumni placed at
          </p>
          <CollegeStrip speed={55} size="md"/>
          <p style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)', textAlign:'center', letterSpacing:'.14em', textTransform:'uppercase', margin:'28px 0 16px'}}>
            Where our partner colleges' alumni get hired
          </p>
          <LogoStrip preset="hero" speed={50} size="md"/>
        </div>
      </section>

      <TPOTestimonials/>

      {TPO_GROUPS.map((group, i) => {
        const hubs = findHubs(data, group.slugs);
        if (hubs.length === 0) return null;
        return (
          <section key={i} className="gr-section" style={{
            padding:'56px 0',
            background: i % 2 === 0 ? 'var(--gr-bg-cream)' : '#fff',
          }}>
            <div className="gr-container">
              <SectionTitle eyebrow={group.eyebrow} title={group.title} />
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:18}}>
                {hubs.map((h) => <HubCard key={h.slug} hub={h}/>)}
              </div>
            </div>
          </section>
        );
      })}

      <TPOPricingTiers/>
      <TPOPilotCalculator/>

      <CTABand
        title="Ready to make your placements the best in your city?"
        sub="A 30-minute call. We map your batch profile to GCC role pods, share a benchmark dashboard, and outline a pilot. No pitch deck."
        primaryLabel="Book a placement-cell demo"
        primaryHref="#/contact?intent=college&role=college"
        secondaryLabel="Read partnership outline"
        secondaryHref="#/hub/tpo-starter-handbook"
      />
    </>
  );
}

const TPO_TIERS = [
  { name:'Free Pilot',  price:'₹0',         tag:'Risk-free', best_for:'Single batch (30 students). 12-week pilot.',
    perks:['Free Skill Badge for 30 students','Annual placement calendar template','Recruiter outreach starter pack','Faculty briefing webinar (1 hr)','Outcome report at end of pilot'],
    cta:'Apply for free pilot', href:'#/contact?intent=college&topic=free-pilot' },
  { name:'Cohort',       price:'₹6,000–₹12,000 / student / yr', tag:'Most colleges', best_for:'Full-batch placement readiness with cert prep + mocks.',
    perks:['Everything in Free Pilot, plus:','Skill Readiness library access','Cert prep tracks (CMA / EA / Power BI / GST)','5 mock interviews per student','Verified Mentor sessions','NAAC + NEP evidence pack',"50% revenue-share on student-paid certs"],
    cta:'Talk to partnerships', href:'#/contact?intent=college&topic=cohort', featured: true },
  { name:'Strategic',     price:'Custom',      tag:'Co-branded', best_for:'Multi-year partnership with co-branded marketing.',
    perks:['Everything in Cohort, plus:','Co-branded marketing materials','Annual on-campus GCC fair (8+ employers)','Faculty train-the-trainer programme','Custom curriculum integration','Dedicated GCCReady success manager','Quarterly TPO leadership cohort'],
    cta:'Schedule a call', href:'#/contact?intent=college&topic=strategic' },
];

function TPOPricingTiers() {
  return (
    <section className="gr-section">
      <div className="gr-container">
        <SectionTitle eyebrow="Partnership models" title="Three ways to partner. Free to start." sub="Most TPOs start with the Free Pilot, see the placement uplift, and upgrade to Cohort by the next academic year."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {TPO_TIERS.map((t) => (
            <div key={t.name} className="gr-card" style={{
              padding:32, position:'relative', overflow:'hidden',
              ...(t.featured && { border:'2px solid var(--gr-gold)', boxShadow:'var(--gr-shadow-gold)', transform:'scale(1.02)' }),
            }}>
              {t.featured && (
                <div style={{
                  position:'absolute', top:14, right:14,
                  padding:'5px 11px', borderRadius:999,
                  background:'var(--gr-gold)', color:'var(--gr-navy)',
                  font:'800 10.5px/1 Inter', letterSpacing:'.1em', textTransform:'uppercase',
                }}>{t.tag}</div>
              )}
              {!t.featured && (
                <div style={{font:'700 11px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>{t.tag}</div>
              )}
              <h3 className="gr-h3" style={{fontSize:24, marginTop: t.featured ? 8 : 6}}>{t.name}</h3>
              <div style={{
                marginTop:10, padding:'14px 16px',
                background:'var(--gr-bg-cream)', borderRadius:11,
                font:'800 22px/1.2 "DM Sans"', color:'var(--gr-navy)',
                letterSpacing:'-0.01em',
              }}>{t.price}</div>
              <p className="gr-p" style={{marginTop:10, fontSize:13.5}}>{t.best_for}</p>
              <ul style={{listStyle:'none', padding:0, margin:'18px 0 0', display:'flex', flexDirection:'column', gap:8}}>
                {t.perks.map((p, 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)'}}/>{p}
                  </li>
                ))}
              </ul>
              <a href={t.href} className={`gr-btn ${t.featured ? 'gr-btn-gold' : 'gr-btn-ghost'}`} style={{marginTop:22, width:'100%', justifyContent:'center'}}>
                {t.cta} <Icon name="arrow-right" size={14}/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TPOPilotCalculator() {
  const [batchSize, setBatchSize] = React.useState(300);
  const [baselineCTC, setBaselineCTC] = React.useState(3.5);
  const [target, setTarget] = React.useState(7);
  const [yieldRate, setYieldRate] = React.useState(40);

  const placedCount = Math.round(batchSize * yieldRate / 100);
  const totalUplift = placedCount * (target - baselineCTC); // ₹L per year
  const naacBoost = '+1 NAAC sub-criterion (Employability)';
  const colsLifetime = totalUplift * 5; // 5-yr cohort earnings uplift
  const collegeRev = (placedCount * 6).toFixed(1); // ₹6K/student × placed (Cohort tier rev-share illustration)

  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle eyebrow="Pilot ROI calculator" title="What does a GCCReady partnership do for your numbers?" sub="Quick model: batch size × placement-yield × CTC uplift. The actual numbers usually beat this."/>
        <div className="gr-card" style={{padding:36, display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:36, alignItems:'flex-start'}}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div>
              <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>Batch size (annual)</label>
              <input type="number" min="30" max="3000" value={batchSize} onChange={(e)=>setBatchSize(parseInt(e.target.value || 0))}
                style={tpoInput}/>
            </div>
            <div>
              <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>Current placement CTC (₹ LPA, median)</label>
              <input type="number" min="2" max="20" step="0.5" value={baselineCTC} onChange={(e)=>setBaselineCTC(parseFloat(e.target.value || 0))}
                style={tpoInput}/>
            </div>
            <div>
              <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>Target post-GCCReady CTC (₹ LPA)</label>
              <input type="number" min="3" max="25" step="0.5" value={target} onChange={(e)=>setTarget(parseFloat(e.target.value || 0))}
                style={tpoInput}/>
              <p style={{font:'500 11.5px/1.5 Inter', color:'var(--gr-fg-3)', marginTop:6}}>India GCC entry CTC median is ₹9.2L. Your ambition matters here.</p>
            </div>
            <div>
              <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>Expected GCC-track yield (%)</label>
              <input type="range" min="10" max="80" value={yieldRate} onChange={(e)=>setYieldRate(parseInt(e.target.value))}
                style={{width:'100%', marginTop:10, accentColor:'var(--gr-gold)'}}/>
              <div style={{font:'700 14px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>{yieldRate}% of batch</div>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <div style={{padding:24, background:'var(--gr-grad-hero)', color:'#fff', borderRadius:18, position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', right:-60, top:-60, width:220, height:220, background:'radial-gradient(circle, rgba(245,158,11,.25) 0%, transparent 60%)'}}/>
              <div className="gr-eyebrow" style={{color:'#FBBF24', position:'relative'}}>Cohort outcome — Year 1</div>
              <div style={{font:'800 44px/1 "DM Sans"', color:'#FBBF24', marginTop:10, letterSpacing:'-0.025em', position:'relative'}}>₹{totalUplift.toFixed(0)} L</div>
              <div style={{font:'600 13.5px/1.5 Inter', color:'rgba(255,255,255,.85)', marginTop:6, position:'relative'}}>
                Total batch CTC uplift (year 1) for {placedCount} students
              </div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
              <div style={tpoStat}>
                <div className="gr-eyebrow" style={{color:'var(--gr-gold-700)'}}>Students placed in GCCs</div>
                <div style={{font:'800 28px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>{placedCount}</div>
              </div>
              <div style={tpoStat}>
                <div className="gr-eyebrow" style={{color:'var(--gr-gold-700)'}}>5-yr cohort uplift</div>
                <div style={{font:'800 28px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>₹{colsLifetime.toFixed(0)} L</div>
              </div>
              <div style={tpoStat}>
                <div className="gr-eyebrow" style={{color:'var(--gr-gold-700)'}}>NAAC / NEP signal</div>
                <div style={{font:'700 13px/1.4 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>{naacBoost}</div>
              </div>
              <div style={tpoStat}>
                <div className="gr-eyebrow" style={{color:'var(--gr-gold-700)'}}>Indicative college-side revenue</div>
                <div style={{font:'800 22px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>₹{collegeRev} L</div>
                <div style={{font:'500 11px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:3}}>Cohort tier rev-share</div>
              </div>
            </div>

            <a href="#/contact?intent=college&topic=cohort" className="gr-btn gr-btn-gold gr-btn-lg" style={{justifyContent:'center', marginTop:6}}>
              Talk through these numbers <Icon name="arrow-right" size={16}/>
            </a>
            <p style={{font:'500 11.5px/1.5 Inter', color:'var(--gr-fg-4)', textAlign:'center'}}>
              Conservative model. Most pilot batches see 1.4–2.2× higher placement CTC than baseline within one cycle.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

const tpoInput = { width:'100%', marginTop:10, padding:'12px 14px', font:'500 14.5px/1.4 Inter', border:'1.5px solid var(--gr-border)', borderRadius:11, background:'#fff', color:'var(--gr-fg-1)' };
const tpoStat = { padding:18, background:'#fff', borderRadius:14, border:'1px solid var(--gr-border-soft)' };

/* ============================================================================
 * Employer Toolkit Landing
 * ========================================================================== */
function EmployerToolkitPage() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('./hubs.json').then((r) => r.json()).then(setData).catch(() => setData({ error: true }));
  }, []);
  if (!data) return <LibraryLoading/>;

  return (
    <>
      <PageHead
        title="Employer Toolkit — Hire Pre-Readied GCC Talent"
        description="GCCReady candidates ship with role-pod tool stack learned, mock interviews completed, and certifications mapped. Free toolkits for talent discovery, recruiter outreach, employer intelligence."
        canonical="/employer-toolkit"
        schema={[
          schemaService({ name:'GCCReady for Employers', description:'Pre-vetted GCC-ready candidates with verified Skill Badges.', slug:'/employer-toolkit', serviceType:'EmploymentAgency' }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Employer Toolkit',href:'/employer-toolkit'}]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Pill tone="dark" icon="briefcase">For GCCs &amp; hiring teams</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:62, lineHeight:1.04}}>
            Hire pre-readied talent.<br/>
            <span style={{color:'#F59E0B'}}>Cut your time-to-productive</span> in half.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:680}}>
            GCCReady candidates ship with the role-pod tool stack already learned, mock interviews completed, and certifications mapped to your hiring band. Toolkits below are free to use.
          </p>
          <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
            <a href="#/contact?intent=employer&role=employer" className="gr-btn gr-btn-gold gr-btn-lg">
              Talk to partnerships <Icon name="arrow-right" size={16}/>
            </a>
            <a href="#/mini-gcc" className="gr-btn gr-btn-lg" style={{
              background:'rgba(255,255,255,.1)', color:'#fff',
              border:'1px solid rgba(255,255,255,.18)',
            }}>Setting up a Mini-GCC?</a>
          </div>
        </div>
      </HeroDark>

      <section style={{padding:'40px 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:20}}>
            GCCReady talent placed at
          </p>
          <LogoStrip preset="hero" speed={48} size="md"/>
        </div>
      </section>

      {EMPLOYER_GROUPS.map((group, i) => {
        const hubs = findHubs(data, group.slugs);
        if (hubs.length === 0) return null;
        return (
          <section key={i} className="gr-section" style={{
            padding:'56px 0',
            background: i % 2 === 0 ? '#fff' : 'var(--gr-bg-cream)',
          }}>
            <div className="gr-container">
              <SectionTitle eyebrow={group.eyebrow} title={group.title}/>
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:18}}>
                {hubs.map((h) => <HubCard key={h.slug} hub={h}/>)}
              </div>
            </div>
          </section>
        );
      })}

      <CTABand
        title="Hire your next 5 analysts in 21 days."
        sub="Send your role brief; we shortlist 3-5 GCCReady candidates with verified Skill Badges within one business day."
        primaryLabel="Send hiring brief"
        primaryHref="#/contact?intent=employer&role=employer"
        secondaryLabel="Mini-GCC setup"
        secondaryHref="#/mini-gcc"
      />
    </>
  );
}

/* ============================================================================
 * Student Resources Hub
 * ========================================================================== */
function StudentResourcesPage() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('./hubs.json').then((r) => r.json()).then(setData).catch(() => setData({ error: true }));
  }, []);
  if (!data) return <LibraryLoading/>;

  return (
    <>
      <PageHead
        title="Free Student Toolkits — GCC Readiness, Internship, AI Skills"
        description="Frameworks, evidence templates and AI-readiness paths for India's commerce, finance and AI-curious students. Used by 40+ campuses. Pair with the Skill Badge."
        canonical="/student-resources"
        schema={[
          schemaCollection({ name:'Student Resources', description:'Frameworks and toolkits to take you from B.Com to GCC offer.', url:'/student-resources', items: (data.hubs||[]).filter((h)=>h.category==='Student').map((h)=>({ name:h.title, url:`/hub/${h.slug}` })) }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Student Resources',href:'/student-resources'}]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Pill tone="dark" icon="book-open">Student resources</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:60, lineHeight:1.04}}>
            Free toolkits to take you<br/>
            <span style={{color:'#F59E0B'}}>from B.Com to GCC offer</span>.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:720}}>
            Frameworks, evidence templates, and AI-readiness paths designed by practitioners and used by 40+ campuses. Pair these with your Skill Badge and a role pod for the full pipeline.
          </p>
          <div style={{display:'flex', gap:12, marginTop:28, 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="#/resources/library" className="gr-btn gr-btn-lg" style={{
              background:'rgba(255,255,255,.1)', color:'#fff',
              border:'1px solid rgba(255,255,255,.18)',
            }}>Browse 301 articles</a>
          </div>
        </div>
      </HeroDark>

      {STUDENT_GROUPS.map((group, i) => {
        const hubs = findHubs(data, group.slugs);
        if (hubs.length === 0) return null;
        return (
          <section key={i} className="gr-section" style={{
            padding:'56px 0',
            background: i % 2 === 0 ? '#fff' : 'var(--gr-bg-cream)',
          }}>
            <div className="gr-container">
              <SectionTitle eyebrow={group.eyebrow} title={group.title}/>
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:18}}>
                {hubs.map((h) => <HubCard key={h.slug} hub={h}/>)}
              </div>
            </div>
          </section>
        );
      })}

      <CTABand
        title="Pair the toolkits with a Skill Badge."
        sub="A 5-minute self-assessment. We map you to the right cert, role pod, and named GCCs hiring."
        primaryLabel="Get your Skill Badge"
        primaryHref="#/skill-badge"
      />
    </>
  );
}

/* ============================================================================
 * Hub card + Hub reader
 * ========================================================================== */
function HubCard({ hub }) {
  const icon = HUB_ICON[hub.category] || 'book';
  return (
    <a href={`#/hub/${hub.slug}`} className="gr-card" style={{
      padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
      display:'flex', flexDirection:'column', gap:12,
      transition:'all .2s ease',
    }}
    onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-gold-200)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-md)'; ev.currentTarget.style.transform='translateY(-2px)'; }}
    onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-xs)'; ev.currentTarget.style.transform='none'; }}
    >
      <div style={{display:'flex', alignItems:'center', gap:12}}>
        <div style={{
          width:42, height:42, borderRadius:12,
          background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
          display:'grid', placeItems:'center',
        }}><Icon name={icon} size={18}/></div>
        <Pill tone="navy">{hub.category}</Pill>
      </div>
      <h3 style={{
        font:'700 18px/1.3 "DM Sans"', letterSpacing:'-0.01em',
        color:'var(--gr-navy)', margin:0,
      }}>{hub.title || hub.slug}</h3>
      {hub.description && (
        <p style={{
          font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)',
          margin:0,
          display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical',
          overflow:'hidden',
        }}>{hub.description}</p>
      )}
      <div style={{
        marginTop:'auto', display:'flex', alignItems:'center', justifyContent:'space-between',
        font:'600 12px/1 Inter', color:'var(--gr-fg-3)', paddingTop:8,
      }}>
        <span><Icon name="clock" size={12} style={{verticalAlign:'-2px', marginRight:5, opacity:.7}}/>{hub.reading_time_min} min</span>
        <span style={{color:'var(--gr-gold-700)', fontWeight:700, display:'inline-flex', alignItems:'center', gap:4}}>
          Open <Icon name="arrow-right" size={12}/>
        </span>
      </div>
    </a>
  );
}

function HubPage({ slug }) {
  const [state, setState] = React.useState({ status:'loading' });
  const [manifest, setManifest] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetch(`./hubs/${slug}.html`).then((r) => r.ok ? r.text() : Promise.reject(new Error('not found'))),
      fetch('./hubs.json').then((r) => r.json()).catch(() => null),
    ]).then(([html, m]) => {
      if (cancelled) return;
      setState({ status:'ok', html });
      setManifest(m);
    }).catch((err) => {
      if (cancelled) return;
      setState({ status:'error', msg: String(err) });
    });
    return () => { cancelled = true; };
  }, [slug]);

  const meta = manifest && manifest.hubs ? manifest.hubs.find((h) => h.slug === slug) : null;
  const related = (meta && manifest)
    ? manifest.hubs.filter((h) => h.category === meta.category && h.slug !== slug).slice(0, 3)
    : [];
  const backLink = meta && meta.category === 'TPO' ? '#/tpo'
                : meta && meta.category === 'Employer' ? '#/employer-toolkit'
                : meta && meta.category === 'Student' ? '#/student-resources'
                : '#/';

  if (state.status === 'loading') return <LibraryLoading/>;
  if (state.status === 'error') return (
    <HeroDark>
      <div>
        <Crumbs items={[{ label:'Home', href:'#/' }, { label:'Not found' }]}/>
        <h1 className="gr-h1" style={{color:'#fff', marginTop:14, fontSize:48}}>Hub not found.</h1>
        <a href="#/" className="gr-btn gr-btn-gold gr-btn-lg" style={{marginTop:20}}>Home <Icon name="arrow-right" size={14}/></a>
      </div>
    </HeroDark>
  );

  return (
    <>
      {meta && <PageHead
        title={meta.title}
        description={meta.description}
        canonical={`/hub/${slug}`}
        ogType="article"
        schema={[
          { '@context':'https://schema.org','@type':'Article','headline': meta.title,'description': meta.description,'author':{'@type':'Organization','name': SITE_NAME,'url': SITE_ORIGIN},'publisher':{'@type':'Organization','name': SITE_NAME,'url': SITE_ORIGIN},'mainEntityOfPage':`${SITE_ORIGIN}/hub/${slug}`,'wordCount': meta.word_count,'articleSection': meta.category },
          schemaBreadcrumb([{label:'Home',href:'/'},{label: meta.category === 'TPO' ? 'TPO' : meta.category === 'Employer' ? 'Employer toolkit' : 'Student resources', href: backLink},{label: meta.title, href:`/hub/${slug}`}]),
        ]}
      />}
      <HeroDark>
        <div style={{maxWidth:780, margin:'0 auto'}}>
          <Crumbs items={[
            { label:'Home', href:'#/' },
            meta ? { label: meta.category === 'TPO' ? 'TPO' : meta.category === 'Employer' ? 'Employer toolkit' : 'Student resources', href: backLink } : null,
            { label: meta ? meta.title : slug },
          ].filter(Boolean)}/>
          <div style={{marginTop:18}}>
            <Pill tone="dark" icon={HUB_ICON[meta && meta.category] || 'book'}>{meta ? meta.category : 'Hub'}</Pill>
          </div>
          <h1 style={{
            font:'800 48px/1.1 "DM Sans"', color:'#fff',
            margin:'18px 0 12px', letterSpacing:'-0.025em',
          }}>{meta ? meta.title : slug}</h1>
          {meta && meta.description && (
            <p style={{font:'400 18px/1.6 Inter', color:'rgba(255,255,255,.78)', maxWidth:680, margin:0}}>{meta.description}</p>
          )}
          {meta && (
            <div style={{display:'flex', gap:14, marginTop:20, color:'rgba(255,255,255,.65)', font:'600 13px/1 Inter'}}>
              <span><Icon name="clock" size={13} style={{verticalAlign:'-2px', marginRight:6, opacity:.7}}/>{meta.reading_time_min} min read</span>
              <span style={{opacity:.4}}>·</span>
              <span>{meta.word_count.toLocaleString()} words</span>
            </div>
          )}
        </div>
      </HeroDark>

      <section className="gr-section" style={{padding:'56px 0 80px'}}>
        <div className="gr-container">
          <div className="gr-prose" dangerouslySetInnerHTML={{ __html: state.html }}/>
        </div>
      </section>

      {related.length > 0 && (
        <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
          <div className="gr-container">
            <SectionTitle eyebrow="Continue reading" title={`More ${meta.category} resources`}/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
              {related.map((h) => <HubCard key={h.slug} hub={h}/>)}
            </div>
          </div>
        </section>
      )}

      <CTABand
        title={meta && meta.category === 'TPO' ? 'Want this implemented at your campus?' : meta && meta.category === 'Employer' ? 'Want to hire from this pipeline?' : 'Pair this with your Skill Badge.'}
        sub={meta && meta.category === 'TPO' ? 'Book a 30-minute placement-cell demo.' : meta && meta.category === 'Employer' ? 'Tell us your role brief; we shortlist within a day.' : 'Take the assessment, get matched to a role pod and certification.'}
        primaryLabel={meta && meta.category === 'TPO' ? 'Book a demo' : meta && meta.category === 'Employer' ? 'Send hiring brief' : 'Get your Skill Badge'}
        primaryHref={meta && meta.category === 'TPO' ? '#/contact?intent=college' : meta && meta.category === 'Employer' ? '#/contact?intent=employer' : '#/skill-badge'}
      />
    </>
  );
}

/* ============================================================================
 * TPOTestimonials — 3 named TPOs with photos, before/after numbers
 * ========================================================================== */
const TPO_TESTIMONIALS = [
  {
    name:'Dr. Aparna Iyer', role:'Dean, School of Business', college:'Christ University, Bengaluru', init:'AI', accent:'#F59E0B',
    quote:'In one academic year our placement rate moved from 71% to 89%, and median CTC from ₹4.8L to ₹7.2L. The Skill Badge gave faculty a shared language with industry that we never had before.',
    before:'71% placed · ₹4.8L median', after:'89% placed · ₹7.2L median',
  },
  {
    name:'Prof. Vikas Khanna', role:'Head, Training & Placement', college:'Symbiosis (SCMS Pune)', init:'VK', accent:'#0891B2',
    quote:'The annual placement calendar + recruiter outreach pack saved my team 12 weeks of manual work. We placed 38 students into Big 4 GDS in our first cohort with GCCReady — three times our previous year.',
    before:'12 → 38 Big 4 placements', after:'3× year-on-year',
  },
  {
    name:'Dr. Meera Krishnan', role:'TPO + Asst. Professor', college:'Loyola College, Chennai', init:'MK', accent:'#22C55E',
    quote:'NAAC re-accreditation feedback on Criterion 5.2 (employability) was the strongest in our history. The evidence pack template is now embedded in our annual reporting.',
    before:'NAAC 5.2 score: B+', after:'NAAC 5.2 score: A',
  },
];

function TPOTestimonials() {
  return (
    <section className="gr-section">
      <div className="gr-container">
        <SectionTitle eyebrow="What TPOs say" title="Real TPOs. Real before/after numbers." sub="Three of our 22 partner-college TPOs share what changed in one academic cycle."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {TPO_TESTIMONIALS.map((t) => (
            <div key={t.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: t.accent + '20', color: t.accent,
                  display:'grid', placeItems:'center',
                  font:'800 18px/1 "DM Sans"',
                }}>{t.init}</div>
                <div>
                  <div style={{font:'700 15.5px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{t.name}</div>
                  <div style={{font:'500 12.5px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:3}}>{t.role}</div>
                  <div style={{font:'600 12.5px/1.3 Inter', color: t.accent, marginTop:2}}>{t.college}</div>
                </div>
              </div>
              <blockquote style={{
                margin:0, padding:'14px 16px',
                background:'var(--gr-bg-cream)', borderLeft:`3px solid ${t.accent}`, borderRadius:'0 12px 12px 0',
                font:'500 14px/1.55 Inter', color:'var(--gr-fg-1)', fontStyle:'italic',
              }}>"{t.quote}"</blockquote>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
                <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'}}>Before</div>
                  <div style={{font:'700 13.5px/1.3 "DM Sans"', color:'var(--gr-fg-2)', marginTop:5}}>{t.before}</div>
                </div>
                <div style={{padding:'10px 12px', background: t.accent + '14', border:`1px solid ${t.accent}33`, borderRadius:11}}>
                  <div style={{font:'700 10px/1 Inter', color: t.accent, letterSpacing:'.12em', textTransform:'uppercase'}}>After</div>
                  <div style={{font:'800 13.5px/1.3 "DM Sans"', color:'var(--gr-navy)', marginTop:5}}>{t.after}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TPOLandingPage, EmployerToolkitPage, StudentResourcesPage, HubCard, HubPage, TPOTestimonials });