/* GCCReady — GCC Universe (sectors hub, sector page, employer detail) */

function LogoTile({ slug, employer, size='md' }) {
  const e = employer;
  const dim = size === 'lg' ? 96 : size === 'sm' ? 56 : 72;
  const onErr = (ev) => {
    const img = ev.target;
    if (img.dataset.fallback === '1') {
      const span = document.createElement('span');
      span.textContent = e.name;
      span.style.cssText = 'font:800 13px/1.2 "DM Sans"; color:var(--gr-navy); text-align:center; padding:0 8px';
      img.replaceWith(span);
      return;
    }
    img.dataset.fallback = '1';
    img.src = grLogoFallback(e.domain, 128);
  };
  return (
    <a href={`#/gcc/${slug}`} style={{
      display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:10,
      padding:'18px 14px', background:'#fff',
      border:'1px solid var(--gr-border)', borderRadius:18,
      textDecoration:'none', color:'var(--gr-fg-1)',
      transition:'all .2s ease', boxShadow:'var(--gr-shadow-xs)',
    }}
    onMouseEnter={(ev)=>{ ev.currentTarget.style.transform='translateY(-2px)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-md)'; ev.currentTarget.style.borderColor='var(--gr-gold-200)'; }}
    onMouseLeave={(ev)=>{ ev.currentTarget.style.transform='none'; ev.currentTarget.style.boxShadow='var(--gr-shadow-xs)'; ev.currentTarget.style.borderColor='var(--gr-border)'; }}
    >
      <div style={{
        width:dim, height:dim,
        display:'grid', placeItems:'center',
        background:'#fff', borderRadius:14, border:'1px solid var(--gr-border-soft)',
        overflow:'hidden', padding:'6px 8px',
      }}>
        <img src={grLogoUrl(e.domain, 128)} alt={`${e.name} logo`} loading="lazy"
          onError={onErr}
          style={{ maxWidth:'100%', maxHeight:'100%', objectFit:'contain', filter:'grayscale(0.18)' }} />
      </div>
      <div style={{font:'700 13.5px/1.25 "DM Sans"', letterSpacing:'-0.005em', color:'var(--gr-navy)'}}>{e.name}</div>
      <div style={{font:'500 11.5px/1.3 Inter', color:'var(--gr-fg-3)'}}>{e.cities.slice(0,2).join(' · ')}</div>
    </a>
  );
}

function SectorTabs({ activeSlug }) {
  return (
    <div style={{
      display:'flex', flexWrap:'wrap', gap:8, padding:8,
      background:'var(--gr-bg-tint)', border:'1px solid var(--gr-border-soft)',
      borderRadius:18,
    }}>
      <a href="#/gcc-employers" style={{
        padding:'10px 16px', borderRadius:12, textDecoration:'none',
        font:'700 13px/1 Inter', letterSpacing:'-0.005em',
        background: !activeSlug ? '#fff' : 'transparent',
        color: !activeSlug ? 'var(--gr-navy)' : 'var(--gr-fg-2)',
        boxShadow: !activeSlug ? 'var(--gr-shadow-sm)' : 'none',
      }}>All sectors</a>
      {GR_SECTORS.map((s) => (
        <a key={s.slug} href={`#/gcc-employers/${s.slug}`} style={{
          padding:'10px 16px', borderRadius:12, textDecoration:'none',
          font:'700 13px/1 Inter', letterSpacing:'-0.005em',
          background: activeSlug === s.slug ? '#fff' : 'transparent',
          color: activeSlug === s.slug ? 'var(--gr-navy)' : 'var(--gr-fg-2)',
          boxShadow: activeSlug === s.slug ? 'var(--gr-shadow-sm)' : 'none',
        }}>{s.short}</a>
      ))}
    </div>
  );
}

function GCCUniversePage() {
  const sectorItems = GR_SECTORS.map((s) => ({ name: s.label, url: `/gcc-employers/${s.slug}` }));
  return (
    <>
      <PageHead
        title="GCCs in India — 1,800+ Global Capability Centres across 7 sectors"
        description="Browse 80+ named GCCs across BFSI, Big Tech, Pharma, Industrial, Consulting, Retail and Energy. India hosts 1,800+ GCCs employing 2.1M professionals. Map your degree to the right employer."
        canonical="/gcc-employers"
        schema={[
          schemaOrganization(),
          schemaWebSite(),
          schemaCollection({ name:'GCC Employer Universe', description:'Named GCCs in India by sector', url:'/gcc-employers', items: sectorItems }),
          schemaBreadcrumb([{ label:'Home', href:'/' }, { label:'GCCs', href:'/gcc-employers' }]),
        ]}
      />
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="building-2">India's GCC universe</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:64, lineHeight:1.04}}>
              {GR_GCC_STATS.total_gccs} GCCs.<br/>
              <span style={{color:'#F59E0B'}}>One platform</span> to reach them.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:560}}>
              Global Capability Centres are India-based captives of Fortune-500 companies — not IT services. They hire across finance, analytics, AI, ops, audit, tax, marketing, clinical and engineering. We map you to the right role.
            </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="#/roles" className="gr-btn gr-btn-lg" style={{
                background:'rgba(255,255,255,.1)', color:'#fff',
                border:'1px solid rgba(255,255,255,.18)',
              }}>Browse 22 role pods</a>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            {[
              { v: GR_GCC_STATS.total_gccs, l:'GCCs in India', s:'Across 15+ tier-1 and tier-2 cities' },
              { v: GR_GCC_STATS.professionals, l:'Professionals employed', s:`Growing ${GR_GCC_STATS.growth_yoy} YoY` },
              { v: GR_GCC_STATS.median_ctc, l:'Median entry CTC', s:'vs ~₹4.5L in IT services' },
              { v:'80+', l:'Featured employers', s:'Across 7 sectors below' },
            ].map((it, i) => (
              <div key={i} style={{
                padding:24, borderRadius:18,
                background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)',
              }}>
                <div style={{font:'800 32px/1 "DM Sans"', letterSpacing:'-0.02em', color:'#F59E0B'}}>{it.v}</div>
                <div style={{font:'700 13px/1.3 Inter', color:'rgba(255,255,255,.92)', marginTop:8}}>{it.l}</div>
                <div style={{font:'500 11.5px/1.4 Inter', color:'rgba(255,255,255,.55)', marginTop:4}}>{it.s}</div>
              </div>
            ))}
          </div>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Featured employers" title="Seven sectors. The names you've heard of." sub="Click any sector to see the GCCs hiring there, the roles in demand, and the certifications and tools that move the needle." />

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
            {GR_SECTORS.map((s) => (
              <a key={s.slug} href={`#/gcc-employers/${s.slug}`} className="gr-card" style={{
                padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
                display:'flex', flexDirection:'column', gap:14,
                transition:'all .2s ease',
              }}
              onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-gold-200)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-md)'; }}
              onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-xs)'; }}
              >
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <div style={{
                    width:44, height:44, borderRadius:12,
                    background:'var(--gr-navy-50)', color:'var(--gr-navy)',
                    display:'grid', placeItems:'center',
                  }}>
                    <Icon name={s.icon} size={20}/>
                  </div>
                  <div>
                    <div style={{font:'700 11.5px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>Sector</div>
                    <h3 className="gr-h4" style={{marginTop:4, fontSize:19}}>{s.label}</h3>
                  </div>
                </div>
                <p className="gr-p" style={{fontSize:14.5, lineHeight:1.55}}>{s.blurb}</p>
                <div style={{display:'flex', gap:8, flexWrap:'wrap', marginTop:'auto'}}>
                  {s.employers.slice(0, 6).map((slug) => GR_EMPLOYERS[slug] && (
                    <div key={slug} style={{
                      width:32, height:32, borderRadius:9,
                      background:'#fff', border:'1px solid var(--gr-border-soft)',
                      display:'grid', placeItems:'center', overflow:'hidden', padding:3,
                    }}>
                      <img src={grLogoUrl(GR_EMPLOYERS[slug].domain, 64)} alt="" loading="lazy"
                        onError={(ev)=>{ ev.target.src = grLogoFallback(GR_EMPLOYERS[slug].domain, 64); ev.target.onerror=null; }}
                        style={{maxWidth:'100%', maxHeight:'100%', objectFit:'contain'}} />
                    </div>
                  ))}
                  <div style={{
                    padding:'8px 12px', borderRadius:9,
                    background:'var(--gr-navy-50)', color:'var(--gr-navy)',
                    font:'700 12px/1 Inter',
                  }}>+{s.employers.length - 6} more</div>
                </div>
                <div style={{
                  font:'700 13px/1 Inter', color:'var(--gr-gold-700)',
                  marginTop:6, display:'flex', alignItems:'center', gap:6,
                }}>
                  Open sector <Icon name="arrow-right" size={13}/>
                </div>
              </a>
            ))}
          </div>

          <div style={{marginTop:18, font:'500 12px/1.5 Inter', color:'var(--gr-fg-4)', textAlign:'center'}}>
            Logos indicate sectors GCCReady prepares talent for. Use does not imply formal partnership or endorsement.
          </div>
        </div>
      </section>

      <CTABand
        title="Pick your target. We'll map the path."
        sub="Two minutes of inputs and we'll show you the GCCs hiring for your profile, the certifications worth doing, and the role pod that gets you placed."
        primaryLabel="Get your Skill Badge"
        primaryHref="#/skill-badge"
      />
    </>
  );
}

function SectorPage({ slug }) {
  const s = GR_SECTORS.find((x) => x.slug === slug);
  if (!s) return <GCCUniversePage/>;
  const matchingRoles = GR_ROLES.filter((r) => r.employers.some((e) => s.employers.includes(e))).slice(0, 6);
  const items = s.employers.map((sl) => GR_EMPLOYERS[sl]).filter(Boolean).map((e) => ({ name: e.name, url: `/gcc/${Object.keys(GR_EMPLOYERS).find((k) => GR_EMPLOYERS[k] === e)}` }));

  return (
    <>
      <PageHead
        title={`${s.short} GCCs in India — Named Employers, Roles & Pathways`}
        description={`${s.employers.length} named ${s.short} GCCs in India: ${s.employers.slice(0,8).map((sl) => GR_EMPLOYERS[sl] && GR_EMPLOYERS[sl].name).filter(Boolean).join(', ')}. ${s.blurb}`}
        canonical={`/gcc-employers/${s.slug}`}
        schema={[
          schemaCollection({ name:`${s.label} — GCCs in India`, description: s.blurb, url:`/gcc-employers/${s.slug}`, items }),
          schemaBreadcrumb([{ label:'Home', href:'/' }, { label:'GCCs', href:'/gcc-employers' }, { label: s.short, href:`/gcc-employers/${s.slug}` }]),
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:980}}>
          <Crumbs items={[
            { label:'GCCs', href:'#/gcc-employers' },
            { label: s.short },
          ]}/>
          <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={s.icon} size={28}/>
            </div>
            <div>
              <Pill tone="dark">Sector</Pill>
            </div>
          </div>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:14, fontSize:60}}>{s.label}</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:14, maxWidth:760}}>{s.blurb}</p>
          <div style={{display:'flex', gap:8, flexWrap:'wrap', marginTop:22}}>
            {s.headline_roles.map((r, i) => (
              <span key={i} style={{
                padding:'7px 13px', borderRadius:999,
                background:'rgba(255,255,255,.08)', color:'#fff',
                border:'1px solid rgba(255,255,255,.14)',
                font:'700 12.5px/1 Inter',
              }}>{r}</span>
            ))}
          </div>
        </div>
      </HeroDark>

      <section className="gr-section-tight" style={{paddingTop:48}}>
        <div className="gr-container">
          <SectorTabs activeSlug={slug}/>
        </div>
      </section>

      <section style={{padding:'24px 0 80px'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Featured employers" title={`${s.employers.length} named GCCs in ${s.short}`} sub="Click any logo for India locations and the role pods that fit." />
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))', gap:14}}>
            {s.employers.map((slug) => GR_EMPLOYERS[slug] && (
              <LogoTile key={slug} slug={slug} employer={GR_EMPLOYERS[slug]}/>
            ))}
          </div>
          <div style={{marginTop:14, font:'500 12px/1.5 Inter', color:'var(--gr-fg-4)'}}>
            Logos indicate sectors GCCReady prepares talent for. Use does not imply formal partnership or endorsement.
          </div>
        </div>
      </section>

      {matchingRoles.length > 0 && (
        <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
          <div className="gr-container">
            <SectionTitle eyebrow="Roles that fit" title={`Top role pods in ${s.short}`} sub="Each pod ships with the tool stack, certification path, and the named employers hiring."/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:18}}>
              {matchingRoles.map((r) => (
                <a key={r.slug} href={`#/role/${r.slug}`} className="gr-card" style={{
                  padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
                  display:'flex', flexDirection:'column', gap:12,
                }}>
                  <div style={{display:'flex', alignItems:'center', gap:12}}>
                    <div style={{
                      width:40, height:40, borderRadius:11,
                      background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                      display:'grid', placeItems:'center',
                    }}><Icon name={r.icon} size={18}/></div>
                    <div><Pill tone="navy">{r.family}</Pill></div>
                  </div>
                  <h3 className="gr-h4" style={{fontSize:19, marginTop:4}}>{r.title}</h3>
                  <p className="gr-p" style={{fontSize:14.5}}>{r.does}</p>
                  <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
                    <span style={{font:'700 13.5px/1 "DM Sans"', color:'var(--gr-navy)'}}>{r.salary}</span>
                    <span style={{font:'500 12px/1 Inter', color:'var(--gr-fg-3)'}}>· {r.certs.slice(0,2).join(' · ')}</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <CTABand title={`Target a ${s.short} GCC.`} sub="We'll map your degree and timeline to the role pods, certifications, and named employers that fit."/>
    </>
  );
}

function EmployerPage({ slug }) {
  const e = GR_EMPLOYERS[slug];
  if (!e) return <GCCUniversePage/>;
  const sector = GR_SECTORS.find((s) => s.employers.includes(slug));
  const matchingRoles = GR_ROLES.filter((r) => r.employers.includes(slug)).slice(0, 6);

  return (
    <>
      <PageHead
        title={`${e.name} GCC India — Hiring Roles, Locations & Pathway`}
        description={`${e.name} hires ${e.roles.join(', ')} in India across ${e.cities.join(', ')}. GCCReady prepares you for these roles with role-specific pods, certifications and mock interviews.`}
        canonical={`/gcc/${slug}`}
        schema={[
          { '@context':'https://schema.org','@type':'WebPage','name':`${e.name} — GCC India hiring guide`,'url':`${SITE_ORIGIN}/gcc/${slug}`,'description':`India hub of ${e.name} across ${e.cities.join(', ')}.`,'about':{'@type':'Organization','name':e.name,'url':`https://${e.domain}`} },
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'GCCs',href:'/gcc-employers'},sector ? {label: sector.short, href:`/gcc-employers/${sector.slug}`} : null,{label: e.name, href:`/gcc/${slug}`}].filter(Boolean)),
        ]}
      />
      <HeroDark>
        <div>
          <Crumbs items={[
            { label:'GCCs', href:'#/gcc-employers' },
            sector ? { label: sector.short, href:`#/gcc-employers/${sector.slug}` } : null,
            { label: e.name },
          ].filter(Boolean)}/>
          <div style={{marginTop:24, display:'flex', alignItems:'center', gap:24, flexWrap:'wrap'}}>
            <div style={{
              width:120, height:120, borderRadius:20,
              background:'#fff', display:'grid', placeItems:'center',
              padding:18, boxShadow:'var(--gr-shadow-lg)',
            }}>
              <img src={grLogoUrl(e.domain, 256)} alt={`${e.name} logo`}
                onError={(ev)=>{ ev.target.src = grLogoFallback(e.domain, 192); ev.target.onerror=null; }}
                style={{maxWidth:'100%', maxHeight:'100%', objectFit:'contain'}} />
            </div>
            <div style={{flex:1, minWidth:280}}>
              <h1 className="gr-h1" style={{color:'#fff', fontSize:54}}>{e.name}</h1>
              <p style={{color:'rgba(255,255,255,.72)', font:'500 16px/1.5 Inter', margin:'10px 0 0'}}>
                <Icon name="map-pin" size={14} style={{verticalAlign:'-2px', marginRight:6, opacity:.65}}/>
                {e.cities.join(' · ')}
              </p>
              <div style={{display:'flex', gap:10, flexWrap:'wrap', marginTop:18}}>
                {e.roles.map((r, i) => (
                  <span key={i} style={{
                    padding:'6px 11px', borderRadius:999,
                    background:'rgba(245,158,11,.12)', color:'#FBBF24',
                    border:'1px solid rgba(245,158,11,.25)',
                    font:'700 12px/1 Inter',
                  }}>{r}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          {matchingRoles.length > 0 && (
            <>
              <SectionTitle eyebrow="GCCReady role pods" title={`Pods that prepare you for ${e.name}`} sub="Each pod ships with tool stack, certification path, simulations, and mock interviews. Outcomes-tracked." />
              <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
                {matchingRoles.map((r) => (
                  <a key={r.slug} href={`#/role/${r.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={r.icon} size={18}/></div>
                    <Pill tone="navy">{r.family}</Pill>
                    <h3 className="gr-h4" style={{fontSize:18, marginTop:4}}>{r.title}</h3>
                    <p style={{font:'500 13.5px/1.55 Inter', color:'var(--gr-fg-2)', margin:0}}>{r.does}</p>
                    <div style={{font:'700 13px/1 "DM Sans"', color:'var(--gr-navy)', marginTop:6}}>{r.salary}</div>
                  </a>
                ))}
              </div>
            </>
          )}

          <div style={{marginTop:36, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href={`#/contact?intent=target&target=${slug}`} className="gr-btn gr-btn-gold gr-btn-lg">
              Target {e.name} — get my plan <Icon name="arrow-right" size={16}/>
            </a>
            <a href={sector ? `#/gcc-employers/${sector.slug}` : '#/gcc-employers'} className="gr-btn gr-btn-ghost gr-btn-lg">
              Back to {sector ? sector.short : 'all sectors'}
            </a>
          </div>
        </div>
      </section>

      <CTABand title="Get hired by names that matter." sub="GCCReady prepares you for the actual roles GCCs hire for — not generic 'IT services' tracks." />
    </>
  );
}

Object.assign(window, { GCCUniversePage, SectorPage, EmployerPage, LogoTile, SectorTabs });