/* GCCReady — Skill Badge page (the money page) */

function SkillBadgeHero() {
  return (
    <HeroDark>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center'}}>
        <div>
          <Pill tone="gold" icon="qr">The GCC Skill Badge · Free</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:60, marginTop:20, marginBottom:20}}>
            One card. Every GCC recruiter sees it.
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19}}>
            The Skill Badge is a standardised, employer-backed readiness score — benchmarked across aptitude, communication, domain fit, and digital fluency. It replaces the resume for your first GCC job.
          </p>
          <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
            <a href="#/skill-badge#start" className="gr-btn gr-btn-gold gr-btn-lg">
              Start my assessment <Icon name="arrow-right" size={16}/>
            </a>
            <a href="#/skill-badge#sample" className="gr-btn gr-btn-lg" style={{
              background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)',
            }}>See a sample card</a>
          </div>
          <div style={{marginTop:36, display:'flex', gap:28, color:'rgba(255,255,255,.6)', font:'500 13px/1.4 Inter'}}>
            <span><Icon name="clock" size={14}/> 45 min</span>
            <span><Icon name="shield-check" size={14}/> No camera proctoring for free tier</span>
            <span><Icon name="refresh" size={14}/> Re-take quarterly</span>
          </div>
        </div>
        <BigSkillBadge/>
      </div>
    </HeroDark>
  );
}

function BigSkillBadge() {
  return (
    <div style={{position:'relative', height:440}}>
      <div style={{
        width:'100%', maxWidth:460, aspectRatio:'1.58/1',
        background:'var(--gr-grad-skillbadge)',
        borderRadius:24, padding:28, color:'#fff',
        boxShadow:'0 48px 96px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.2)',
        position:'relative', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', top:-60, right:-60, width:240, height:240,
          background:'radial-gradient(circle, rgba(245,158,11,.3) 0%, transparent 65%)',
        }}/>
        <div style={{position:'relative', display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
          <div>
            <Logo size="sm" inverted/>
          </div>
          <span style={{font:'700 10px/1 Inter', color:'#F59E0B', letterSpacing:'.18em', textTransform:'uppercase'}}>GCC · Skill Badge</span>
        </div>
        <div style={{position:'absolute', top:90, left:28, right:28}}>
          <div style={{font:'800 30px/1.05 DM Sans', letterSpacing:'-0.025em'}}>Priya R. Sharma</div>
          <div style={{font:'500 13px/1.3 Inter', color:'rgba(255,255,255,.65)', marginTop:4}}>
            B.Com (Hons) · Christ University · 2025 · Bengaluru
          </div>
        </div>
        <div style={{position:'absolute', bottom:22, left:28, right:28, display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
          <div>
            <div style={{font:'600 10px/1 Inter', color:'rgba(255,255,255,.5)', letterSpacing:'.12em', textTransform:'uppercase'}}>Readiness Level</div>
            <div style={{display:'flex', alignItems:'baseline', gap:10, marginTop:6}}>
              <span style={{font:'800 44px/1 DM Sans', color:'#FBBF24', letterSpacing:'-0.03em'}}>L2</span>
              <span style={{font:'700 14px/1 Inter', color:'#fff'}}>Finance Ops Ready</span>
            </div>
            <div style={{font:'500 11.5px/1.4 Inter', color:'rgba(255,255,255,.5)', marginTop:6}}>
              Card #GR-2025-0891 · Valid through Oct 2026
            </div>
          </div>
          <div style={{
            width:68, height:68, borderRadius:10,
            background:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="qr" size={48} style={{color:'var(--gr-navy)'}}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReadinessLevels() {
  const levels = [
    {
      lvl:'L0', name:'Starter', tone:'#CBD5E1',
      desc:'Foundations still forming. We\'ll recommend a 6-week pathway and re-assess.',
      roles:['Internship roles','Trainee programs'],
      pct:'0–39%',
    },
    {
      lvl:'L1', name:'Ready for Training', tone:'#60A5FA',
      desc:'Clear aptitude. Lacks domain-specific tooling. Perfect candidate for the Crash Course.',
      roles:['Process Associate','Ops Trainee','Junior Analyst'],
      pct:'40–64%',
    },
    {
      lvl:'L2', name:'Interview Ready', tone:'#F59E0B', featured:true,
      desc:'Benchmarked at-or-above GCC entry standards. Directly shared with hiring partners.',
      roles:['Analyst I','Associate (Risk/Ops/Finance)','Engineer I'],
      pct:'65–84%',
    },
    {
      lvl:'L3', name:'Hire Priority', tone:'#10B981',
      desc:'Exceptional. Fast-tracked to hiring manager screen at partner GCCs. Eligible for premium cohorts.',
      roles:['Senior Analyst','Associate II','Tech Lead Track'],
      pct:'85–100%',
    },
  ];
  return (
    <section className="gr-section" style={{background:'#fff'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="How you're scored"
          title="Four levels. Every GCC recruiter uses the same scale."
          sub="Levels are calculated from 6 weighted dimensions, validated against 40+ partner GCC hiring rubrics. The rubric is public and versioned — there's no mystery."
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          {levels.map(l => (
            <div key={l.lvl} style={{
              background: l.featured ? 'var(--gr-navy)' : '#fff',
              color: l.featured ? '#fff' : 'inherit',
              border: `1px solid ${l.featured?'var(--gr-navy-800)':'var(--gr-border)'}`,
              borderRadius:20, padding:28, position:'relative',
              boxShadow: l.featured ? 'var(--gr-shadow-navy)' : 'none',
            }}>
              {l.featured && (
                <div style={{
                  position:'absolute', top:-10, left:20,
                  background:'var(--gr-gold)', color:'var(--gr-navy)',
                  font:'800 10px/1 Inter', letterSpacing:'.1em', textTransform:'uppercase',
                  padding:'6px 10px', borderRadius:6,
                }}>Median student</div>
              )}
              <div style={{display:'flex', alignItems:'baseline', gap:8}}>
                <span style={{font:'800 40px/1 DM Sans', letterSpacing:'-0.03em', color: l.tone}}>{l.lvl}</span>
                <span style={{font:'600 12px/1 Inter', color: l.featured?'rgba(255,255,255,.5)':'var(--gr-fg-3)'}}>{l.pct}</span>
              </div>
              <div style={{font:'700 16px/1.3 DM Sans', marginTop:8, color: l.featured?'#fff':'var(--gr-navy)'}}>{l.name}</div>
              <p style={{margin:'10px 0 16px', font:'400 13.5px/1.55 Inter', color: l.featured?'rgba(255,255,255,.7)':'var(--gr-fg-2)'}}>{l.desc}</p>
              <div style={{font:'700 11px/1 Inter', color: l.featured?'#FBBF24':'var(--gr-gold-700)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom:8}}>Unlocks</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:6}}>
                {l.roles.map(r => (
                  <li key={r} style={{display:'flex', gap:8, font:'500 13px/1.4 Inter', color: l.featured?'rgba(255,255,255,.82)':'var(--gr-fg-2)'}}>
                    <Icon name="check" size={13} style={{marginTop:3, color: l.featured?'#FBBF24':'var(--gr-green)'}}/> {r}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CardAnatomy() {
  const dims = [
    { t:'Quantitative Aptitude', w:'20%', you:82, avg:68, icon:'calculator' },
    { t:'English & Business Comms', w:'20%', you:76, avg:62, icon:'book-open' },
    { t:'Domain Fit (chosen track)', w:'25%', you:71, avg:55, icon:'target' },
    { t:'Digital & Tools Fluency', w:'15%', you:58, avg:48, icon:'cpu' },
    { t:'Behavioural / Workplace', w:'10%', you:88, avg:70, icon:'users' },
    { t:'Learning Velocity (longitudinal)', w:'10%', you:72, avg:60, icon:'trending-up' },
  ];
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
      <div className="gr-container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:56, alignItems:'center'}}>
          <div>
            <SectionTitle
              eyebrow="The six dimensions"
              title="What we actually measure"
              sub="Every weighting is published in our Rubric v3.1. Students can see their individual scores, and so can recruiters who you've shared with."
            />
            <div style={{display:'flex', gap:14, marginTop:8}}>
              <a href="#/resources#rubric" className="gr-btn gr-btn-ghost">
                Read Rubric v3.1 <Icon name="arrow-right" size={14}/>
              </a>
              <a href="#/skill-badge#start" className="gr-btn gr-btn-primary">Take the assessment</a>
            </div>
          </div>
          <div style={{background:'#fff', borderRadius:24, padding:32, border:'1px solid var(--gr-border)'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
              <div style={{font:'700 14px/1 DM Sans', color:'var(--gr-navy)'}}>Priya's score breakdown</div>
              <div style={{display:'flex', gap:16, font:'500 11px/1 Inter', color:'var(--gr-fg-3)'}}>
                <span><span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:'var(--gr-gold)', marginRight:6}}/>You</span>
                <span><span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:'var(--gr-navy-200)', marginRight:6}}/>Peer avg</span>
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {dims.map(d => (
                <div key={d.t}>
                  <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
                    <div style={{display:'flex', alignItems:'center', gap:8}}>
                      <Icon name={d.icon} size={14} style={{color:'var(--gr-navy-400)'}}/>
                      <span style={{font:'600 13px/1 Inter', color:'var(--gr-navy)'}}>{d.t}</span>
                      <span style={{font:'500 11px/1 Inter', color:'var(--gr-fg-4)'}}>· {d.w}</span>
                    </div>
                    <span style={{font:'700 13px/1 DM Sans', color:'var(--gr-gold-700)'}}>{d.you}</span>
                  </div>
                  <div style={{position:'relative', height:8, background:'var(--gr-bg-tint)', borderRadius:999}}>
                    <div style={{position:'absolute', left:0, top:0, height:8, width:`${d.avg}%`, background:'var(--gr-navy-200)', borderRadius:999}}/>
                    <div style={{position:'absolute', left:0, top:0, height:8, width:`${d.you}%`, background:'var(--gr-gold)', borderRadius:999}}/>
                  </div>
                </div>
              ))}
            </div>
            <div style={{marginTop:20, padding:14, background:'var(--gr-gold-50)', borderRadius:12, border:'1px solid var(--gr-gold-100)', display:'flex', gap:10, alignItems:'flex-start'}}>
              <Icon name="lightbulb" size={16} style={{color:'var(--gr-gold-700)', marginTop:2}}/>
              <div style={{font:'500 13px/1.55 Inter', color:'var(--gr-fg-1)'}}>
                <strong>Next-level tip:</strong> Bring Digital Fluency from 58 → 70 with the Crash Course tools module and you move to L3.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowCardUsed() {
  return (
    <section className="gr-section" style={{background:'#fff'}}>
      <div className="gr-container">
        <SectionTitle
          eyebrow="Where your card travels"
          title="One assessment. Every GCC in our network sees it."
          align="center"
        />
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
        }}>
          {[
            { i:'building-2', t:'Partner GCC Recruiters', d:'40+ hiring teams see your card when roles open for your Level. You control visibility — turn it off anytime.' },
            { i:'building',   t:'College Placement Cells', d:'Your institution (if partnered) can benchmark you against peers and trigger mentoring where needed.' },
            { i:'graduation-cap', t:'You, Forever', d:'Your card stays on your profile for life. Re-take quarterly to keep the score current as you grow.' },
          ].map(x => (
            <div key={x.t} style={{background:'var(--gr-bg-tint)', borderRadius:20, padding:28}}>
              <div style={{
                width:48, height:48, borderRadius:12,
                background:'#fff', border:'1px solid var(--gr-border)',
                color:'var(--gr-navy)',
                display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16,
              }}>
                <Icon name={x.i} size={22}/>
              </div>
              <h4 className="gr-h4" style={{fontSize:18, marginBottom:6}}>{x.t}</h4>
              <p style={{margin:0, font:'400 14.5px/1.6 Inter', color:'var(--gr-fg-2)'}}>{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SkillBadgeFAQ() {
  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container" style={{maxWidth:820}}>
        <SectionTitle eyebrow="FAQ" title="Common questions" align="center"/>
        <Accordion items={[
          { q:'Is the Skill Badge really free?', a:'Yes — the standard assessment is permanently free. We charge only for paid programs (Crash Course, Sprint, Certifications). Proctored retakes during an active paid cohort are free. Additional proctored retakes outside a cohort are ₹499.' },
          { q:'How is this different from Aspiring Minds / AMCAT?', a:'The Skill Badge is co-designed with GCC hiring managers, not generic aptitude publishers. Our rubric is versioned publicly. And crucially, the card is shared directly with 40+ GCC employers who interview on it — there is no resume middleman.' },
          { q:'What if I score L0 or L1?', a:'No judgment — most first-time takers score L1. You\'ll get a personalised pathway, free study materials for weak areas, and a retake window. The card only gets shared with recruiters once you hit L2, and only with your explicit consent.' },
          { q:'Who sees my score?', a:'By default: only you. You can turn on recruiter-sharing for one or multiple partner GCCs. You can turn it off anytime. Your college can only see your score if your campus is a GCCReady Partner Institution.' },
          { q:'Can I re-take if I\'m unhappy?', a:'Yes. You can re-take the full assessment quarterly (every 90 days). We use the latest score. No penalty for re-takes.' },
          { q:'What does the QR code on the card do?', a:'It opens your live profile — certifications, project portfolio, cohort alumni status, and mentor endorsements. Interviewers scan it at on-sites.' },
        ]}/>
      </div>
    </section>
  );
}

function SkillBadgePage() {
  return (
    <>
      <SkillBadgeHero/>
      <ReadinessLevels/>
      <CardAnatomy/>
      <HowCardUsed/>
      <SkillBadgeShareSection/>
      <SkillBadgeFAQ/>
      <CTABand
        title="Free. 45 minutes. No commitment."
        sub="The hardest part of the GCC job hunt is getting the interview. The Skill Badge is the fastest way to get seen."
        primaryLabel="Start my Skill Badge"
        primaryHref="/tools-static/credential-selector-quiz.html"
      />
    </>
  );
}

/* ============================================================================
 * SkillBadgeShareSection — share your badge to LinkedIn, WhatsApp (parent), email
 * ========================================================================== */
function SkillBadgeShareSection() {
  const baseUrl = (typeof SITE_ORIGIN !== 'undefined' ? SITE_ORIGIN : 'https://gccready.com') + '/skill-badge';
  const linkedinPost = encodeURIComponent(
`Just earned my GCCReady Skill Badge — verified readiness for India's Global Capability Centres.

GCCReady benchmarks aptitude, communication, domain fit and digital fluency, then maps me to the right cert path (US CPA / CMA / EA / CFA / ACCA) and role pod, with a list of named GCCs hiring for my profile.

If you're a college student or early-career professional in commerce, finance or analytics — take the free Skill Badge:

`);
  const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(baseUrl)}`;
  const linkedinComposeUrl = `https://www.linkedin.com/feed/?shareActive=true&text=${linkedinPost}${encodeURIComponent(baseUrl)}`;
  const waMsg = encodeURIComponent(
`Hi! I want to take the GCCReady Skill Badge — it's a free 45-minute assessment that maps your degree to the right global certification (US CPA / CMA / EA / CFA / ACCA) and the GCCs hiring for that profile. Could you take a look at this with me? ${baseUrl}`);
  const waUrl = `https://wa.me/?text=${waMsg}`;
  const emailUrl = `mailto:?subject=${encodeURIComponent('GCCReady Skill Badge — free assessment')}&body=${encodeURIComponent('I want to take the GCCReady Skill Badge — it benchmarks GCC readiness and recommends the right certification path. Free, 45 minutes. ' + baseUrl)}`;

  const copyLink = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(baseUrl).then(() => {
        const btn = document.getElementById('gr-copy-link-btn');
        if (btn) { const old = btn.textContent; btn.textContent = 'Copied ✓'; setTimeout(() => { btn.textContent = old; }, 1500); }
      });
    }
  };

  return (
    <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <SectionTitle eyebrow="Share your Skill Badge" title="Pass it on. Bring a parent, a friend, a recruiter into the loop." sub="The badge unlocks more value when it's seen. Three one-click ways to share."/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          <ShareCard
            icon="linkedin"
            title="Share on LinkedIn"
            body="Pre-formatted post that announces your readiness level and GCC fit. Hiring managers actually read these."
            cta="Open LinkedIn"
            href={linkedinComposeUrl}
            color="#0A66C2"
          />
          <ShareCard
            icon="whatsapp"
            title="Send to a parent"
            body="One-tap WhatsApp message in plain language explaining what GCCReady is and why it's free."
            cta="Open WhatsApp"
            href={waUrl}
            color="#25D366"
          />
          <ShareCard
            icon="mail"
            title="Email the link"
            body="Send to a college TPO, a senior at work, or an alum who can refer you. Simple subject line."
            cta="Compose email"
            href={emailUrl}
            color="#0D1B2A"
          />
          <div className="gr-card" style={{padding:24, display:'flex', flexDirection:'column', gap:14}}>
            <div style={{
              width:46, height:46, borderRadius:13,
              background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
              display:'grid', placeItems:'center',
            }}><Icon name="globe" size={20}/></div>
            <h4 className="gr-h4" style={{fontSize:18, marginTop:4}}>Copy public link</h4>
            <p className="gr-p" style={{fontSize:13.5, margin:0}}>For sharing in any channel — Slack, internal docs, college WhatsApp groups, alumni networks.</p>
            <button id="gr-copy-link-btn" onClick={copyLink} className="gr-btn gr-btn-ghost" style={{justifyContent:'space-between', marginTop:'auto'}}>
              gccready.com/skill-badge <Icon name="check" size={13}/>
            </button>
          </div>
        </div>

        <div className="gr-card" style={{
          marginTop:24, padding:28,
          background:'var(--gr-grad-hero)', color:'#fff',
          display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:24, alignItems:'center',
          position:'relative', overflow:'hidden',
        }}>
          <div style={{
            position:'absolute', right:-80, top:-80, width:280, height:280,
            background:'radial-gradient(circle, rgba(245,158,11,.20) 0%, transparent 65%)',
          }}/>
          <div style={{position:'relative'}}>
            <Pill tone="dark" icon="award">Verified Mentor Badge</Pill>
            <h3 className="gr-h3" style={{color:'#fff', marginTop:14, fontSize:26}}>Already at a GCC? Apply to mentor — and add a Verified Mentor Badge to your LinkedIn.</h3>
            <p style={{font:'400 15px/1.55 Inter', color:'rgba(255,255,255,.78)', marginTop:10}}>
              CFA / US CPA / US CMA / EA / ACCA professionals at India GCCs can earn ₹1,500–6,000 per session AND showcase a public LinkedIn-shareable Mentor Badge.
            </p>
          </div>
          <div style={{position:'relative', display:'flex', flexDirection:'column', gap:10}}>
            <a href="#/mentors" className="gr-btn gr-btn-gold gr-btn-lg" style={{justifyContent:'center'}}>Apply to mentor <Icon name="arrow-right" size={14}/></a>
            <a href="#/mentors#mentor-tiers" className="gr-btn gr-btn-lg" style={{justifyContent:'center', background:'rgba(255,255,255,.08)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}>See pay tiers</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ShareCard({ icon, title, body, cta, href, color }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" 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=color; 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={{
        width:46, height:46, borderRadius:13,
        background: color + '14',
        color: color,
        display:'grid', placeItems:'center',
      }}><Icon name={icon} size={20}/></div>
      <h4 className="gr-h4" style={{fontSize:18, marginTop:4}}>{title}</h4>
      <p className="gr-p" style={{fontSize:13.5, margin:0}}>{body}</p>
      <div style={{marginTop:'auto', font:'700 13px/1 Inter', color, display:'inline-flex', alignItems:'center', gap:6, paddingTop:6}}>
        {cta} <Icon name="arrow-up-right" size={12}/>
      </div>
    </a>
  );
}

Object.assign(window, { SkillBadgePage, SkillBadgeShareSection, ShareCard });