/* GCCReady — Roles (matrix + drill-down) */

function RolesPage() {
  const families = [...new Set(GR_ROLES.map((r) => r.family))];
  const roleItems = GR_ROLES.map((r) => ({ name: r.title, url: `/role/${r.slug}` }));

  return (
    <>
      <PageHead
        title="22 GCC Role Pods — Tools, Certifications, Salary Bands"
        description="The 22 actual job families GCCs hire for: IB Ops, FP&A, Tax, Internal Audit, AI Product Mgmt, AI Data Analytics, Pharma R&D, Cybersecurity and more. Each pod with tool stack, recommended certs, named GCCs hiring."
        canonical="/roles"
        schema={[
          schemaCollection({ name:'GCC Role Pods', description:'22 role families that GCCs in India hire for', url:'/roles', items: roleItems }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Roles',href:'/roles'}]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Pill tone="dark" icon="briefcase">22 role pods</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:64, lineHeight:1.04}}>
            The <span style={{color:'#F59E0B'}}>actual jobs</span><br/>
            GCCs hire for.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:680}}>
            Not a generic skills list. 22 role pods with the real tool stack, the certifications recruiters care about, the named GCCs that hire for it, and the salary band you should expect.
          </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 matched to a role <Icon name="arrow-right" size={16}/>
            </a>
            <a href="#/gcc-employers" className="gr-btn gr-btn-lg" style={{
              background:'rgba(255,255,255,.1)', color:'#fff',
              border:'1px solid rgba(255,255,255,.18)',
            }}>Browse GCCs first</a>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="The matrix" title="22 role families · tools · certifications · salary"
            sub="Click any row for the full role pod: what they do, sample titles, named employers hiring, and the GCCReady program that prepares you."/>

          <div style={{
            background:'#fff', border:'1px solid var(--gr-border)',
            borderRadius:20, overflow:'hidden', boxShadow:'var(--gr-shadow-sm)',
          }}>
            <table style={{width:'100%', borderCollapse:'collapse'}}>
              <thead>
                <tr style={{background:'var(--gr-bg-tint)'}}>
                  <th style={thStyle}>Role</th>
                  <th style={thStyle}>Family</th>
                  <th style={thStyle}>Top tools</th>
                  <th style={thStyle}>Recommended certs</th>
                  <th style={thStyle}>Salary signal</th>
                  <th style={thStyle}></th>
                </tr>
              </thead>
              <tbody>
                {GR_ROLES.map((r, i) => (
                  <tr key={r.slug} style={{
                    borderTop: i>0 ? '1px solid var(--gr-border-soft)' : 'none',
                    cursor:'pointer',
                  }}
                  onClick={()=>{ window.location.hash = `#/role/${r.slug}`; }}
                  onMouseEnter={(ev)=>{ ev.currentTarget.style.background='var(--gr-bg-tint)'; }}
                  onMouseLeave={(ev)=>{ ev.currentTarget.style.background='transparent'; }}
                  >
                    <td style={tdStyle}>
                      <div style={{display:'flex', alignItems:'center', gap:12}}>
                        <div style={{
                          width:36, height:36, borderRadius:10,
                          background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                          display:'grid', placeItems:'center', flexShrink:0,
                        }}><Icon name={r.icon} size={16}/></div>
                        <div>
                          <div style={{font:'700 14px/1.3 "DM Sans"', color:'var(--gr-navy)'}}>{r.title}</div>
                          <div style={{font:'500 12px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:2}}>{r.titles[0]}</div>
                        </div>
                      </div>
                    </td>
                    <td style={tdStyle}><Pill tone={r.family.includes('BFSI')?'navy':r.family.includes('Pharma')?'green':r.family.includes('Big Tech')?'teal':'gold'}>{r.family}</Pill></td>
                    <td style={tdStyle}>
                      <div style={{font:'500 12.5px/1.4 Inter', color:'var(--gr-fg-2)'}}>{r.tools.slice(0, 4).join(' · ')}</div>
                    </td>
                    <td style={tdStyle}>
                      <div style={{font:'500 12.5px/1.4 Inter', color:'var(--gr-fg-2)'}}>{r.certs.slice(0, 3).join(' · ')}</div>
                    </td>
                    <td style={tdStyle}>
                      <div style={{font:'700 13.5px/1 "DM Sans"', color:'var(--gr-navy)'}}>{r.salary}</div>
                    </td>
                    <td style={{...tdStyle, textAlign:'right'}}>
                      <Icon name="arrow-right" size={16} style={{color:'var(--gr-gold-700)'}}/>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="By family" title="Prefer to browse by domain?" sub="The same 22 pods, regrouped by industry/family for quicker scanning."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            {families.map((f) => {
              const fRoles = GR_ROLES.filter((r) => r.family === f);
              return (
                <div key={f} className="gr-card" style={{padding:24}}>
                  <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Family</div>
                  <h3 className="gr-h4" style={{marginTop:6, fontSize:20}}>{f}</h3>
                  <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:8}}>
                    {fRoles.map((r) => (
                      <a key={r.slug} href={`#/role/${r.slug}`} style={{
                        padding:'10px 12px', borderRadius:11,
                        background:'#fff', border:'1px solid var(--gr-border-soft)',
                        textDecoration:'none', color:'var(--gr-fg-1)',
                        display:'flex', alignItems:'center', justifyContent:'space-between', gap:10,
                        font:'600 13px/1.3 Inter',
                      }}
                      onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-gold-200)'; }}
                      onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border-soft)'; }}
                      >
                        <span><Icon name={r.icon} size={14} style={{verticalAlign:'-2px', marginRight:8, color:'var(--gr-gold-700)'}}/>{r.title}</span>
                        <span style={{font:'700 12px/1 "DM Sans"', color:'var(--gr-navy)'}}>{r.salary}</span>
                      </a>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <CTABand title="One assessment. The right role." sub="The Skill Badge maps your strengths and degree to the right pod, the certifications worth doing, and the GCCs hiring for you." primaryLabel="Get your Skill Badge" primaryHref="#/skill-badge"/>
    </>
  );
}

const thStyle = { padding:'14px 16px', textAlign:'left', font:'700 11px/1.2 Inter', letterSpacing:'.10em', textTransform:'uppercase', color:'var(--gr-fg-3)' };
const tdStyle = { padding:'16px', verticalAlign:'middle' };

const CERT_NAME_TO_SLUG = {
  'US CPA':'us-cpa', 'US CMA':'us-cma',
  'EA':'ea', 'CFA':'cfa', 'ACCA':'acca',
  'CIMA':null, 'CA(I)':null, 'FRM':null, 'PRM':null, 'CAIA':null,
  'AICPA':null, 'AIPMM AIPM':null,
};

const ROLE_TOPIC = {
  'us-cpa':'US CPA', 'us-cma':'US CMA', 'ea':'EA', 'cfa':'CFA', 'acca':'ACCA',
};

function RoleDetailPage({ slug }) {
  const r = GR_ROLES.find((x) => x.slug === slug);
  if (!r) return <RolesPage/>;
  const employers = r.employers.filter((s) => GR_EMPLOYERS[s]).slice(0, 9);
  const namedEmployers = employers.map((s) => GR_EMPLOYERS[s].name);

  // Pull articles relevant to this role: try each recommended cert
  const [articles, setArticles] = React.useState([]);
  React.useEffect(() => {
    fetch('./articles.json').then((rr) => rr.json()).then((m) => {
      const topics = r.certs
        .map((c) => CERT_NAME_TO_SLUG[c])
        .filter(Boolean)
        .map((s) => ROLE_TOPIC[s])
        .filter(Boolean);
      const all = (m.articles || []).filter((a) => topics.includes(a.topic));
      setArticles(all.slice(0, 6));
    }).catch(() => {});
  }, [slug]);

  const relatedRoles = GR_ROLES
    .filter((x) => x.slug !== r.slug && (x.family === r.family || x.certs.some((c) => r.certs.includes(c))))
    .slice(0, 3);

  return (
    <>
      <PageHead
        title={`${r.title} jobs at India GCCs — Tools, Certs, Salary`}
        description={`${r.title} in India GCCs: ${r.does} Tool stack: ${r.tools.slice(0,5).join(', ')}. Recommended certifications: ${r.certs.join(', ')}. Hiring at ${namedEmployers.slice(0,5).join(', ')}. Salary ${r.salary}.`}
        canonical={`/role/${r.slug}`}
        schema={[
          schemaCourse({ name: r.program, description: r.does, slug:`/role/${r.slug}`, credential: r.title }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Roles',href:'/roles'},{label: r.title, href:`/role/${r.slug}`}]),
          schemaFAQ([
            { q:`What does a ${r.title} do at an India GCC?`, a: r.does },
            { q:`What is the salary for ${r.title} in India GCCs?`, a:`Entry-to-mid roles range ${r.salary}.` },
            { q:`Which GCCs hire for ${r.title}?`, a:`Featured employers include ${namedEmployers.slice(0,6).join(', ')}.` },
            { q:`What certifications are recommended for ${r.title}?`, a: r.certs.join(', ') + '.' },
            { q:`What tools should I learn for ${r.title}?`, a: r.tools.join(', ') + '.' },
          ]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Crumbs items={[
            { label:'Roles', href:'#/roles' },
            { label: r.title },
          ]}/>
          <div style={{marginTop:18, display:'flex', alignItems:'center', gap:14}}>
            <div style={{
              width:64, height:64, borderRadius:16,
              background:'rgba(245,158,11,.12)', color:'#F59E0B',
              display:'grid', placeItems:'center',
              border:'1px solid rgba(245,158,11,.25)',
            }}>
              <Icon name={r.icon} size={28}/>
            </div>
            <Pill tone="dark">{r.family}</Pill>
          </div>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:14, fontSize:60}}>{r.title}</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:14, maxWidth:760}}>{r.does}</p>
          <div style={{
            display:'inline-flex', alignItems:'baseline', gap:10, marginTop:24,
            padding:'14px 22px', borderRadius:14,
            background:'rgba(245,158,11,.10)', border:'1px solid rgba(245,158,11,.25)',
          }}>
            <span style={{font:'500 12px/1 Inter', color:'rgba(255,255,255,.65)', textTransform:'uppercase', letterSpacing:'.12em'}}>Salary signal</span>
            <span style={{font:'800 24px/1 "DM Sans"', color:'#F59E0B', letterSpacing:'-0.01em'}}>{r.salary}</span>
            <span style={{font:'500 13px/1 Inter', color:'rgba(255,255,255,.6)'}}>· India GCC entry-to-mid</span>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            <div className="gr-card" style={{padding:24}}>
              <div style={{
                width:44, height:44, borderRadius:12,
                background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                display:'grid', placeItems:'center', marginBottom:16,
              }}><Icon name="cpu" size={20}/></div>
              <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Tools</div>
              <h3 className="gr-h4" style={{marginTop:6, fontSize:20}}>Core stack</h3>
              <div style={{marginTop:12, display:'flex', flexWrap:'wrap', gap:6}}>
                {r.tools.map((t, i) => (
                  <span key={i} style={{
                    padding:'6px 10px', borderRadius:8,
                    background:'var(--gr-bg-tint)', color:'var(--gr-fg-1)',
                    font:'600 12px/1 Inter',
                  }}>{t}</span>
                ))}
              </div>
            </div>
            <div className="gr-card" style={{padding:24}}>
              <div style={{
                width:44, height:44, borderRadius:12,
                background:'var(--gr-navy-50)', color:'var(--gr-navy)',
                display:'grid', placeItems:'center', marginBottom:16,
              }}><Icon name="award" size={20}/></div>
              <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Certifications</div>
              <h3 className="gr-h4" style={{marginTop:6, fontSize:20}}>Recommended path</h3>
              <div style={{marginTop:12, display:'flex', flexDirection:'column', gap:8}}>
                {r.certs.map((c, i) => {
                  const certSlug = CERT_NAME_TO_SLUG[c];
                  const inner = (
                    <>
                      <Icon name="check-circle" size={14} style={{color:'var(--gr-green)'}}/>
                      <span>{c}</span>
                      {certSlug && <Icon name="arrow-up-right" size={12} style={{color:'var(--gr-gold-700)', marginLeft:'auto'}}/>}
                    </>
                  );
                  const cardStyle = {
                    padding:'10px 12px', borderRadius:10,
                    background:'#fff', border:'1px solid var(--gr-border-soft)',
                    font:'700 13px/1.3 Inter', color:'var(--gr-navy)',
                    display:'flex', alignItems:'center', gap:10,
                    textDecoration:'none',
                    transition:'border-color .15s ease',
                  };
                  return certSlug ? (
                    <a key={i} href={`#/certifications/${certSlug}`} style={cardStyle}
                      onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-gold-200)'; }}
                      onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border-soft)'; }}
                    >{inner}</a>
                  ) : (
                    <div key={i} style={cardStyle}>{inner}</div>
                  );
                })}
              </div>
            </div>
            <div className="gr-card" style={{padding:24}}>
              <div style={{
                width:44, height:44, borderRadius:12,
                background:'#ECFEFF', color:'var(--gr-teal-600)',
                display:'grid', placeItems:'center', marginBottom:16,
              }}><Icon name="briefcase" size={20}/></div>
              <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Sample titles</div>
              <h3 className="gr-h4" style={{marginTop:6, fontSize:20}}>What recruiters call this</h3>
              <div style={{marginTop:12, display:'flex', flexDirection:'column', gap:6}}>
                {r.titles.map((t, i) => (
                  <div key={i} style={{
                    font:'600 13px/1.5 Inter', color:'var(--gr-fg-1)',
                    paddingLeft:12, borderLeft:'2px solid var(--gr-gold-200)',
                  }}>{t}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {employers.length > 0 && (
        <section className="gr-section" style={{background:'var(--gr-bg-cream)', paddingTop:64, paddingBottom:64}}>
          <div className="gr-container">
            <SectionTitle eyebrow="Named employers" title={`GCCs hiring for ${r.title}`} sub="Click any logo for India locations and the role pods that fit. Featured set; the actual hiring universe is much larger."/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))', gap:14}}>
              {employers.map((slug) => (
                <LogoTile key={slug} slug={slug} employer={GR_EMPLOYERS[slug]}/>
              ))}
            </div>
          </div>
        </section>
      )}

      {articles.length > 0 && (
        <section className="gr-section">
          <div className="gr-container">
            <SectionTitle eyebrow="Read deeper" title={`Top articles for ${r.title}`} sub="Long-form pieces from the Library that map directly to this role pod."/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:16}}>
              {articles.map((a) => <ArticleCard key={a.slug} a={a}/>)}
            </div>
            <div style={{marginTop:18}}>
              <a href="#/resources/library" className="gr-btn gr-btn-ghost">Open the Library <Icon name="arrow-right" size={14}/></a>
            </div>
          </div>
        </section>
      )}

      <NextReadRail topic={ROLE_TOPIC[CERT_NAME_TO_SLUG[r.certs[0]]] || 'GCC Job Readiness'} roleSlug={r.slug}/>

      {relatedRoles.length > 0 && (
        <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
          <div className="gr-container">
            <SectionTitle eyebrow="Adjacent roles" title="If this fits, these might too" sub="Same family or overlapping certifications."/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:18}}>
              {relatedRoles.map((rr) => (
                <a key={rr.slug} href={`#/role/${rr.slug}`} className="gr-card" style={{
                  padding:22, textDecoration:'none', color:'var(--gr-fg-1)',
                  display:'flex', flexDirection:'column', gap:10,
                }}>
                  <div style={{
                    width:40, height:40, borderRadius:11,
                    background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                    display:'grid', placeItems:'center',
                  }}><Icon name={rr.icon} size={18}/></div>
                  <Pill tone="navy">{rr.family}</Pill>
                  <h3 className="gr-h4" style={{fontSize:18, marginTop:4}}>{rr.title}</h3>
                  <p style={{font:'500 13.5px/1.55 Inter', color:'var(--gr-fg-2)', margin:0}}>{rr.does}</p>
                  <div style={{font:'700 13px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:4}}>{rr.salary}</div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="gr-section" style={{
        background:'var(--gr-grad-hero)', color:'#fff',
        position:'relative', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', right:-100, top:-100, width:500, height:500,
          background:'radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 60%)',
        }}/>
        <div className="gr-container" style={{position:'relative'}}>
          <div style={{
            display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center',
          }}>
            <div>
              <Pill tone="dark" icon="rocket">GCCReady program</Pill>
              <h2 className="gr-h2" style={{color:'#fff', marginTop:14, fontSize:42}}>{r.program}</h2>
              <p style={{color:'rgba(255,255,255,.78)', font:'400 17px/1.6 Inter', marginTop:12, maxWidth:560}}>
                An AI-augmented role pod — tools, simulations, mock interviews on the actual stack {r.title.split(' ')[0]} teams use. Outcomes-tracked, with placement support across {employers.length}+ named employers.
              </p>
              <div style={{display:'flex', gap:10, marginTop:24, flexWrap:'wrap'}}>
                <a href={`#/contact?intent=role&role=${r.slug}`} className="gr-btn gr-btn-gold gr-btn-lg">
                  Enquire — {r.title.split(' ')[0]} pod <Icon name="arrow-right" size={16}/>
                </a>
                <a href="#/roles" className="gr-btn gr-btn-lg" style={{
                  background:'rgba(255,255,255,.1)', color:'#fff',
                  border:'1px solid rgba(255,255,255,.18)',
                }}>All 22 roles</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>
              <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:14}}>
                {[
                  'Hands-on simulations on the actual stack',
                  'Cert prep + exam coaching where applicable',
                  'Resume + LinkedIn rebuild for GCC recruiters',
                  '5+ mock interviews across BFSI/Tech/Big 4',
                  'Placement intros to named employers',
                  'AI tooling baseline (Copilot / ChatGPT)',
                ].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>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { RolesPage, RoleDetailPage });