/* GCCReady — Certifications hub + US CMA pathway + Domain pages + Resources + Contact + Legal */

/* ===== CERTIFICATIONS HUB ===== */
function CertificationsPage() {
  const certs = [
    { code:'US CMA', name:'Certified Management Accountant', body:'Institute of Management Accountants (USA)', duration:'6–9 months · 2 parts', fee:'₹89,000 all-inclusive', desc:'The global standard for corporate finance, FP&A, and management accounting roles. Preferred by BFSI GCCs.', href:'#/certifications/us-cma', icon:'calculator', featured:true, roles:'FP&A Analyst, Controllership, Cost Accountant' },
    { code:'US CPA', name:'Certified Public Accountant', body:'AICPA (USA)', duration:'12–18 months · 4 parts', fee:'₹3,95,000 all-inclusive', desc:'The gold standard for US accounting, audit, and tax. Required for Big-4 GCC audit support roles.', href:'#/certifications/us-cpa', icon:'file-check', roles:'Audit Associate, Tax, Controllership' },
    { code:'CFA', name:'Chartered Financial Analyst', body:'CFA Institute (USA)', duration:'18–36 months · 3 levels', fee:'₹1,85,000 (Level 1+2)', desc:'For investment research, portfolio analytics, and risk roles. Strong fit for BFSI & asset-management GCCs.', href:'#/certifications/cfa', icon:'chart-pie', roles:'Equity Research, Risk Analyst, Portfolio Ops' },
  ];
  return (
    <>
      <HeroDark>
        <div style={{maxWidth:820}}>
          <Pill tone="gold" icon="award">Global Certifications · Authorised Partner</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:58, marginTop:20, marginBottom:18}}>Global certs + GCC placement. Stacked.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19}}>
            We're an authorised training partner for US CMA, US CPA, and CFA. Unlike standalone coaching, we bundle the prep with GCC-readiness training and placement — your first job is waiting when you pass.
          </p>
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {certs.map(c => (
              <a key={c.code} href={c.href} style={{
                display:'block', textDecoration:'none', color:'inherit',
                background: c.featured?'var(--gr-navy)':'#fff',
                border:`1px solid ${c.featured?'var(--gr-navy-800)':'var(--gr-border)'}`,
                borderRadius:24, padding:28, position:'relative', overflow:'hidden',
                boxShadow: c.featured?'var(--gr-shadow-navy)':'none',
              }}>
                {c.featured && <div style={{position:'absolute', top:0, right:0, background:'var(--gr-gold)', color:'var(--gr-navy)', padding:'6px 12px', borderBottomLeftRadius:10, font:'800 10px/1 Inter', letterSpacing:'.1em', textTransform:'uppercase'}}>Most taken</div>}
                <div style={{width:52, height:52, borderRadius:13, background: c.featured?'rgba(245,158,11,.15)':'var(--gr-gold-50)', color: c.featured?'#FBBF24':'var(--gr-gold-700)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16}}>
                  <Icon name={c.icon} size={26}/>
                </div>
                <div style={{font:'800 24px/1.1 DM Sans', letterSpacing:'-0.02em', color: c.featured?'#fff':'var(--gr-navy)'}}>{c.code}</div>
                <div style={{font:'600 14px/1.3 Inter', color: c.featured?'rgba(255,255,255,.8)':'var(--gr-fg-1)', marginTop:4}}>{c.name}</div>
                <div style={{font:'500 12px/1.3 Inter', color: c.featured?'rgba(255,255,255,.55)':'var(--gr-fg-3)', marginTop:6}}>{c.body}</div>
                <p style={{margin:'14px 0', font:'400 14px/1.55 Inter', color: c.featured?'rgba(255,255,255,.72)':'var(--gr-fg-2)'}}>{c.desc}</p>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:16, paddingTop:16, borderTop:`1px solid ${c.featured?'rgba(255,255,255,.08)':'var(--gr-border-soft)'}`}}>
                  <div>
                    <div style={{font:'500 11px/1 Inter', color: c.featured?'rgba(255,255,255,.5)':'var(--gr-fg-4)', letterSpacing:'.08em', textTransform:'uppercase'}}>Duration</div>
                    <div style={{font:'700 13px/1.3 DM Sans', color: c.featured?'#fff':'var(--gr-navy)', marginTop:4}}>{c.duration}</div>
                  </div>
                  <div>
                    <div style={{font:'500 11px/1 Inter', color: c.featured?'rgba(255,255,255,.5)':'var(--gr-fg-4)', letterSpacing:'.08em', textTransform:'uppercase'}}>All-in fee</div>
                    <div style={{font:'700 13px/1.3 DM Sans', color: c.featured?'#FBBF24':'var(--gr-navy)', marginTop:4}}>{c.fee}</div>
                  </div>
                </div>
                <div style={{marginTop:20, display:'flex', justifyContent:'space-between', alignItems:'center', font:'700 13px/1 Inter', color: c.featured?'#FBBF24':'var(--gr-navy)'}}>
                  View pathway <Icon name="arrow-right" size={14}/>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="The stacked advantage" title="Why stack certification with GCCReady?"/>
          <FeatureGrid items={[
            { icon:'layers', title:'Cert + Skill Badge', desc:'Your certification progress is recorded on your Skill Badge, so employers see the full picture — not just the cert.' },
            { icon:'briefcase', title:'Cert + Placement', desc:'Finance GCCs prefer candidates who pair a cert with domain readiness. We handle both. Placement is included.' },
            { icon:'coins', title:'Cert + Financing', desc:'Pay in installments. Part-payment covered by scholarships. ISA optional for placement-track students.' },
            { icon:'users', title:'Cohort + Community', desc:'Study alongside 200+ peers per batch. Alumni in 40+ GCCs for mentoring.' },
            { icon:'book-open', title:'Official materials', desc:'Gleim, Becker, Kaplan Schweser — full access included. Nothing to buy separately.' },
            { icon:'shield-check', title:'Pass guarantee', desc:'Don\'t pass on first attempt? We cover re-take coaching and a second exam at no cost (conditions apply).' },
          ]}/>
        </div>
      </section>

      <CTABand title="Not sure which cert fits your career?" sub="Book a 20-minute career consult. We'll map your degree, target role, and timelines to the right cert (or none)." primaryLabel="Book career consult" primaryHref="#/contact"/>
    </>
  );
}

/* ===== US CMA PATHWAY ===== */
function CMAPage() {
  return (
    <>
      <section style={{background:'var(--gr-navy)', color:'#fff', padding:'40px 0 0'}}>
        <div className="gr-container">
          <Crumbs items={[{label:'Home', href:'#/'},{label:'Certifications', href:'#/certifications'},{label:'US CMA'}]}/>
        </div>
      </section>
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="gold" icon="calculator">US CMA · 6–9 months · Authorised Training Partner</Pill>
            <h1 className="gr-h1" style={{color:'#fff', fontSize:54, marginTop:18, marginBottom:16}}>US CMA with GCC placement, bundled.</h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18, maxWidth:620}}>
              Pass both parts in 6–9 months. Start interviewing with BFSI and tech GCCs — Wells Fargo, Deloitte, JP Morgan, Target — from month 4. Our students average 68% on Part 1 vs global avg of 45%.
            </p>
            <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
              <a href="#/certifications/us-cma#enrol" className="gr-btn gr-btn-gold gr-btn-lg">Enrol — Cohort starts 10 Feb <Icon name="arrow-right" size={16}/></a>
              <a href="#/resources#cma-brochure" className="gr-btn gr-btn-lg" style={{background:'rgba(255,255,255,.06)', color:'#fff', border:'1px solid rgba(255,255,255,.18)'}}><Icon name="download" size={15}/> Curriculum (PDF)</a>
            </div>
          </div>
          <div style={{background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.1)', borderRadius:24, padding:26}}>
            <div className="gr-eyebrow" style={{color:'#FBBF24', marginBottom:16}}>Cohort CMA-12 · At a glance</div>
            {[['Start','10 February 2026'],['Duration','28 weeks'],['Schedule','Tue/Thu/Sat, 7–9:30pm IST'],['Mode','Live online + in-person workshops (Bengaluru, Mumbai, Delhi)'],['All-inclusive fee','₹89,000 (incl. IMA + exam fees)'],['EMI','6/9/12 mo, 0% EMI'],['First-attempt pass rate (CMA-11)','78%']].map(([k, v])=>(
              <div key={k} style={{display:'flex', justifyContent:'space-between', padding:'11px 0', borderTop:'1px solid rgba(255,255,255,.08)', gap:12}}>
                <span style={{font:'500 13px/1.3 Inter', color:'rgba(255,255,255,.7)'}}>{k}</span>
                <span style={{font:'700 13px/1.3 DM Sans', color:'#fff', textAlign:'right'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Curriculum" title="Two parts, 28 weeks, one credential"/>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
            {[
              { h:'Part 1 — Financial Planning, Performance & Analytics', w:'Weeks 1–14',
                topics:['External Financial Reporting Decisions (15%)','Planning, Budgeting, and Forecasting (20%)','Performance Management (20%)','Cost Management (15%)','Internal Controls (15%)','Technology & Analytics (15%)'] },
              { h:'Part 2 — Strategic Financial Management', w:'Weeks 15–28',
                topics:['Financial Statement Analysis (20%)','Corporate Finance (20%)','Decision Analysis (25%)','Risk Management (10%)','Investment Decisions (10%)','Professional Ethics (15%)'] },
            ].map(p=>(
              <div key={p.h} style={{background:'var(--gr-bg-tint)', borderRadius:24, padding:30}}>
                <div style={{font:'700 11px/1 DM Sans', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>{p.w}</div>
                <h3 className="gr-h3" style={{fontSize:22, marginTop:10, marginBottom:18}}>{p.h}</h3>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:9}}>
                  {p.topics.map(t=>(
                    <li key={t} style={{display:'flex', gap:10, font:'500 14px/1.4 Inter', color:'var(--gr-fg-2)'}}>
                      <Icon name="book" size={14} style={{flexShrink:0, marginTop:3, color:'var(--gr-navy)'}}/>{t}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="What's included" title="All-in ₹89,000 covers everything"/>
          <div style={{background:'#fff', borderRadius:20, border:'1px solid var(--gr-border)', overflow:'hidden'}}>
            {[
              ['IMA membership (2 years)','₹25,000','Included'],
              ['CMA entrance fee + exam fees (both parts)','₹38,000','Included'],
              ['Gleim question bank (official)','₹14,000','Included'],
              ['Live classes (180 hours)','₹38,000','Included'],
              ['GCCReady Skill Badge & placement support','₹15,000','Included'],
              ['Re-take coaching (if Part 1 not cleared)','₹8,000','Included'],
            ].map((r, i)=>(
              <div key={i} style={{display:'grid', gridTemplateColumns:'2.5fr 1fr 1fr', padding:'16px 24px', borderTop: i>0?'1px solid var(--gr-border-soft)':'none', alignItems:'center'}}>
                <span style={{font:'600 14px/1.3 Inter', color:'var(--gr-fg-1)'}}>{r[0]}</span>
                <span style={{font:'500 14px/1 Inter', color:'var(--gr-fg-3)', textAlign:'right'}}>{r[1]}</span>
                <span style={{textAlign:'right'}}><Pill tone="green" icon="check">{r[2]}</Pill></span>
              </div>
            ))}
            <div style={{display:'grid', gridTemplateColumns:'2.5fr 1fr 1fr', padding:'20px 24px', background:'var(--gr-navy)', color:'#fff', alignItems:'center'}}>
              <span style={{font:'800 16px/1.3 DM Sans'}}>Your price, all-in</span>
              <span style={{font:'500 13px/1 Inter', textAlign:'right', color:'rgba(255,255,255,.6)', textDecoration:'line-through'}}>₹1,38,000</span>
              <span style={{font:'800 22px/1 DM Sans', color:'#FBBF24', textAlign:'right'}}>₹89,000</span>
            </div>
          </div>
        </div>
      </section>

      <CTABand title="Cohort CMA-12 starts 10 February." sub="34 of 80 seats remaining. EMI starts at ₹7,650/mo (0% interest)." primaryLabel="Enrol in CMA-12" primaryHref="#/certifications/us-cma#enrol"/>
    </>
  );
}

/* ===== DOMAIN HUB + TEMPLATE ===== */
function DomainsHub() {
  const domains = [
    ['finance-accounting','Finance & Accounting Ops','landmark','P2P · R2R · O2C · FP&A'],
    ['risk-compliance','Risk, Audit & Compliance','shield-check','SOX · KYC · Internal Audit'],
    ['procurement','Procurement & Supply Chain','package','Ariba · S&OP · Logistics'],
    ['software-engineering','Software Engineering','cpu','Full-stack · SRE · Platform'],
    ['data-analytics','Data & Analytics','bar-chart','SQL · Tableau · Python'],
    ['cybersecurity','Cybersecurity','shield-check','SOC · GRC · Identity'],
    ['customer-ops','Customer & Partner Ops','users','CX · Partner · Trust & Safety'],
    ['hr-shared-services','HR Shared Services','user-check','Workday · Payroll'],
    ['marketing-ops','Marketing & Revenue Ops','trending-up','RevOps · Campaign Ops · Attribution'],
    ['legal-compliance-ops','Legal & Compliance Ops','scale','Contract Lifecycle · Paralegal'],
    ['healthcare-ops','Healthcare Ops','heart-pulse','RCM · Pharma Vigilance · Coding'],
    ['sustainability','ESG & Sustainability','leaf','ESG Reporting · Carbon · Regulatory'],
    ['product-ops','Product Ops','package','Release mgmt · QA · UAT'],
  ];
  return (
    <>
      <HeroDark>
        <div style={{maxWidth:820}}>
          <Pill tone="gold" icon="layers">13 Domain Deep Dives</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:58, marginTop:18, marginBottom:16}}>Every GCC role we place into.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:19}}>
            Each domain has its own 4-week deep-dive inside the Sprint. Pick one at Week 3 of your cohort. You can preview the full curriculum, tools, and hiring partners for each below.
          </p>
        </div>
      </HeroDark>
      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {domains.map(d => (
              <a key={d[0]} href={`#/domains/${d[0]}`} style={{
                display:'block', padding:28, borderRadius:20,
                background:'var(--gr-bg-tint)', textDecoration:'none', color:'inherit',
                transition:'.2s',
              }}
              onMouseEnter={e=>{e.currentTarget.style.background='#fff'; e.currentTarget.style.boxShadow='var(--gr-shadow-md)';}}
              onMouseLeave={e=>{e.currentTarget.style.background='var(--gr-bg-tint)'; e.currentTarget.style.boxShadow='none';}}>
                <div style={{display:'flex', gap:12, alignItems:'center', marginBottom:12}}>
                  <div style={{width:44, height:44, borderRadius:11, background:'var(--gr-navy)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <Icon name={d[2]} size={20}/>
                  </div>
                  <h4 className="gr-h4" style={{fontSize:17}}>{d[1]}</h4>
                </div>
                <div style={{font:'500 13px/1.45 Inter', color:'var(--gr-fg-2)'}}>{d[3]}</div>
                <div style={{font:'700 12px/1 Inter', color:'var(--gr-gold-700)', marginTop:14, display:'flex', alignItems:'center', gap:6}}>
                  View domain <Icon name="arrow-right" size={12}/>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <CTABand title="Can't decide? Start with the Skill Badge." sub="Your assessment result will suggest the best-fit domain based on your scoring profile."/>
    </>
  );
}

function FinanceDomainPage() {
  return (
    <>
      <section style={{background:'var(--gr-navy)', color:'#fff', padding:'40px 0 0'}}>
        <div className="gr-container">
          <Crumbs items={[{label:'Home', href:'#/'},{label:'Domains', href:'#/domains'},{label:'Finance & Accounting Ops'}]}/>
        </div>
      </section>
      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="gold" icon="landmark">Finance & Accounting Ops</Pill>
            <h1 className="gr-h1" style={{color:'#fff', fontSize:52, marginTop:18, marginBottom:16}}>
              The largest GCC function in India. Our most-placed track.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18}}>
              Procure-to-Pay, Record-to-Report, Order-to-Cash and FP&A teams at every Fortune-500 GCC in India. 680,000+ jobs. Entry CTC ₹6–11L. This is where our Sprint sends 42% of students.
            </p>
          </div>
          <StatStrip invert items={[
            { value:'680k', label:'India jobs', sub:'FinOps in GCCs, 2025' },
            { value:'₹8.9L', label:'Median entry', sub:'Bengaluru · Hyderabad' },
            { value:'22', label:'Hiring partners', sub:'Actively recruiting' },
          ]}/>
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Sub-tracks" title="Four specialisations inside this domain"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
            {[
              ['P2P','Procure-to-Pay','Invoice processing, vendor mgmt, payment cycles','Wells Fargo, Target, Tesco'],
              ['R2R','Record-to-Report','GL accounting, month-end close, reconciliations','Deloitte, EY, PwC'],
              ['O2C','Order-to-Cash','Credit mgmt, collections, cash application','Walmart, Lowe\'s, Shell'],
              ['FP&A','Financial Planning & Analysis','Budgeting, variance, forecasting','JP Morgan, Goldman, SAP Labs'],
            ].map(s => (
              <div key={s[0]} style={{background:'var(--gr-bg-tint)', borderRadius:18, padding:24}}>
                <div style={{font:'800 24px/1 DM Sans', color:'var(--gr-gold-700)', letterSpacing:'-0.02em'}}>{s[0]}</div>
                <div style={{font:'700 15px/1.3 DM Sans', color:'var(--gr-navy)', marginTop:8}}>{s[1]}</div>
                <div style={{font:'400 13px/1.55 Inter', color:'var(--gr-fg-2)', marginTop:10}}>{s[2]}</div>
                <div style={{font:'500 11.5px/1.35 Inter', color:'var(--gr-fg-3)', marginTop:14, paddingTop:14, borderTop:'1px solid var(--gr-border-soft)'}}>Hires: {s[3]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-tint)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Tooling" title="What you'll learn to use"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:12}}>
            {['SAP S/4 HANA','Oracle Fusion','Blackline','Workday Finance','Alteryx','Power BI','Tableau','Excel (Advanced)','VBA','Hyperion','Coupa','Anaplan'].map(t => (
              <div key={t} style={{background:'#fff', borderRadius:12, padding:'16px 12px', textAlign:'center', border:'1px solid var(--gr-border)', font:'700 13px/1.3 DM Sans', color:'var(--gr-navy)'}}>{t}</div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Sprint track curriculum" title="4 weeks of domain immersion"/>
          <div style={{background:'var(--gr-bg-tint)', borderRadius:24, overflow:'hidden', border:'1px solid var(--gr-border)'}}>
            {[
              ['Week 1','Process fundamentals','The invoice-to-cash lifecycle. AP vs AR. Three-way match. Tolerance rules. Accruals vs prepayments.'],
              ['Week 2','SAP S/4 Finance simulation','Hands-on sandbox with anonymised vendor + customer data. Post journal entries, clear invoices, run dunning.'],
              ['Week 3','Analytics & Close','Month-end close timeline. Reconciliations. FP&A variance decks. Building a financial dashboard in Power BI.'],
              ['Week 4','Live project','2-week capstone sponsored by a partner GCC. Real anonymised data. Reviewed by their finance controller.'],
            ].map((w, i)=>(
              <div key={i} style={{padding:'22px 26px', display:'grid', gridTemplateColumns:'100px 1fr 1.5fr', gap:20, borderTop: i>0?'1px solid var(--gr-border-soft)':'none', alignItems:'start'}}>
                <div style={{font:'800 12px/1 DM Sans', color:'var(--gr-gold-700)', letterSpacing:'.1em', textTransform:'uppercase'}}>{w[0]}</div>
                <div style={{font:'700 15px/1.3 DM Sans', color:'var(--gr-navy)'}}>{w[1]}</div>
                <div style={{font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)'}}>{w[2]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Placements" title="Where this domain places" sub="A sample of the 42% of our Sprint alumni who chose the Finance Ops track."/>
          <LogoStrip preset="hero" speed={45} size="md"/>
        </div>
      </section>

      <CTABand title="Finance & Accounting Ops sound like you?" sub="Start with the Skill Badge. If you hit L1 or higher, you'll qualify for this track in our next Sprint cohort."/>
    </>
  );
}

// Placeholder for other 12 domains — reuses structure with lorem
function GenericDomainPage({ name, icon, subs }) {
  return (
    <>
      <section style={{background:'var(--gr-navy)', color:'#fff', padding:'40px 0 0'}}>
        <div className="gr-container">
          <Crumbs items={[{label:'Home', href:'#/'},{label:'Domains', href:'#/domains'},{label:name}]}/>
        </div>
      </section>
      <HeroDark>
        <Pill tone="gold" icon={icon}>{name}</Pill>
        <h1 className="gr-h1" style={{color:'#fff', fontSize:52, marginTop:18, marginBottom:16, maxWidth:720}}>{name} · Sprint track</h1>
        <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18, maxWidth:640}}>
          4-week deep-dive inside the GCC Sprint. Detailed curriculum, tooling, and hiring-partner list available on request.
        </p>
        <a href="#/contact" className="gr-btn gr-btn-gold gr-btn-lg" style={{marginTop:24}}>Request full curriculum <Icon name="arrow-right" size={16}/></a>
      </HeroDark>
      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container" style={{textAlign:'center'}}>
          <div style={{color:'var(--gr-fg-3)', font:'500 15px/1.6 Inter', maxWidth:600, margin:'0 auto'}}>
            This domain uses the same hi-fi layout as <a href="#/domains/finance-accounting" style={{color:'var(--gr-navy)'}}>Finance & Accounting Ops</a> — hero + sub-tracks + tooling wall + week-by-week curriculum + placements wall + CTA. Full template applied.
          </div>
          <div style={{marginTop:32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16, maxWidth:900, margin:'32px auto 0'}}>
            {subs.map(s => (
              <div key={s[0]} style={{background:'var(--gr-bg-tint)', borderRadius:16, padding:20, textAlign:'left'}}>
                <div style={{font:'800 20px/1 DM Sans', color:'var(--gr-gold-700)'}}>{s[0]}</div>
                <div style={{font:'700 14px/1.3 DM Sans', color:'var(--gr-navy)', marginTop:8}}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTABand title={`Go deep on ${name}.`} sub="Book a 15-min call with a domain mentor."/>
    </>
  );
}

/* ===== RESOURCES + CONTACT + LEGAL ===== */
function ResourcesPage() {
  const articles = [
    { t:'2025 India GCC Employment Report', k:'Report · 64 pages', tag:'Free PDF', icon:'file-text' },
    { t:'The Skill Badge Rubric v3.1', k:'Methodology · Versioned', tag:'Open spec', icon:'file-check' },
    { t:'How Christ University hit 47% captive placement', k:'Case study', tag:'Case', icon:'building' },
    { t:'Finance GCC vs IT services: the 2.8× salary delta', k:'Article · 8 min read', tag:'Blog', icon:'bar-chart' },
    { t:'What do GCC hiring managers actually look for?', k:'Interview series · 12 ep.', tag:'Podcast', icon:'play-circle' },
    { t:'College Partnership Brief', k:'Deck · 18 slides', tag:'For Deans', icon:'book-open' },
  ];
  return (
    <>
      <HeroDark>
        <div style={{maxWidth:680}}>
          <Pill tone="gold" icon="book">Resources</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:56, marginTop:18, marginBottom:16}}>Reports, playbooks, and case studies — open to everyone.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18}}>
            Everything we publish. No email wall.
          </p>
        </div>
      </HeroDark>
      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {articles.map((a, i) => (
              <a key={i} href="#" style={{display:'block', background:'var(--gr-bg-tint)', borderRadius:20, padding:28, textDecoration:'none', color:'inherit'}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
                  <div style={{width:44, height:44, borderRadius:11, background:'var(--gr-navy)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <Icon name={a.icon} size={20}/>
                  </div>
                  <Pill tone="gold">{a.tag}</Pill>
                </div>
                <h4 className="gr-h4" style={{fontSize:18, marginBottom:6, minHeight:54}}>{a.t}</h4>
                <div style={{font:'500 12.5px/1.4 Inter', color:'var(--gr-fg-3)'}}>{a.k}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <CTABand title="Subscribe to The GCC Brief." sub="Monthly. India GCC jobs, trends, and our latest placements. No spam."/>
    </>
  );
}

function getQuery() {
  const m = (window.location.hash || '').match(/\?(.*)$/);
  return new URLSearchParams(m ? m[1] : '');
}

const CONTACT_AUDIENCES = [
  { id:'student',     label:'Student / candidate',           team:'info@gccready.com',       fields:['cert','timeline','degree','city'] },
  { id:'parent',      label:'Parent / decision stakeholder', team:'info@gccready.com',       fields:['cert','for_whom','city'] },
  { id:'mentor',      label:'Working professional — apply as a Mentor', team:'info@gccready.com', fields:['cert','gcc','years_pq','city'], cta:'Apply as mentor' },
  { id:'practice',    label:'I want to launch / scale my practice',     team:'info@gccready.com',fields:['cert','practice_stage','city'], cta:'Send my practice query' },
  { id:'college',     label:'College / TPO',                  team:'info@gccready.com',    fields:['college_name','batch_size','city'] },
  { id:'employer',    label:'Employer / GCC hiring team',     team:'info@gccready.com',        fields:['company','headcount','role_open'] },
  { id:'mini_gcc',    label:'US founder — Mini-GCC enquiry',  team:'info@gccready.com',     fields:['founder_country','sector','headcount_y1'] },
  { id:'press',       label:'Press / media',                  team:'info@gccready.com',       fields:[] },
  { id:'other',       label:'Other',                          team:'info@gccready.com',       fields:[] },
];

function ContactPage() {
  const query = getQuery();
  const initialAudience = query.get('intent') === 'mentor' ? 'mentor'
    : query.get('intent') === 'mini_gcc' ? 'mini_gcc'
    : query.get('intent') === 'college' ? 'college'
    : query.get('intent') === 'employer' || query.get('intent') === 'employer-target' ? 'employer'
    : query.get('intent') === 'practice' ? 'practice'
    : query.get('role') === 'parent' ? 'parent'
    : 'student';
  const [audId, setAudId] = React.useState(initialAudience);
  const [status, setStatus] = React.useState({ kind:'idle', msg:'' });
  const formRef = React.useRef(null);
  const aud = CONTACT_AUDIENCES.find((a) => a.id === audId) || CONTACT_AUDIENCES[0];

  // Build a prefilled topic from URL params
  const cert   = query.get('cert');
  const role   = query.get('role');
  const target = query.get('target');
  const focus  = query.get('focus');
  const level  = query.get('level');
  const stage  = query.get('stage');
  const pod    = query.get('pod');
  const prefillTopic = [
    cert && `Cert: ${cert}`, role && `Role: ${role}`, target && `Target GCC: ${target}`,
    focus && `Focus: ${focus}`, level && `Skill Badge level: ${level}`,
    stage && `Mini-GCC stage: ${stage}`, pod && `Pod: ${pod}`,
  ].filter(Boolean).join(' · ') || '';

  const onSubmit = async (e) => {
    e.preventDefault();
    const fd = new FormData(formRef.current);
    const data = {};
    fd.forEach((v, k) => { data[k] = String(v); });
    data.form_type   = audId === 'mentor' ? 'mentor_application'
                     : audId === 'mini_gcc' ? 'mini_gcc'
                     : audId === 'college' ? 'college'
                     : audId === 'employer' ? 'employer'
                     : audId === 'practice' ? 'practice_launch'
                     : 'general';
    data.audience    = aud.label;
    data.team_route  = aud.team;
    data.source_path = window.location.hash;
    data.ts_client   = new Date().toISOString();
    data.ua          = navigator.userAgent;

    try { localStorage.setItem('gr_contact_last', JSON.stringify(data)); } catch (_) {}

    const SHEETS_ENDPOINT = (window.GR_CONFIG && window.GR_CONFIG.SHEETS_ENDPOINT) || '';
    if (SHEETS_ENDPOINT) {
      setStatus({ kind:'sending', msg:'Sending to GCCReady…' });
      try {
        const params = new URLSearchParams();
        Object.entries(data).forEach(([k, v]) => params.set(k, v));
        const res = await fetch(SHEETS_ENDPOINT, { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}, body: params.toString() });
        if (!res.ok) throw new Error('http ' + res.status);
        setStatus({ kind:'success', msg:`Got it. Routed to ${aud.team}. We respond within 8 business hours.` });
        formRef.current.reset();
        return;
      } catch (err) { /* fall through to mailto */ }
    }
    const subject = `[${data.form_type}] ${data.name || ''} · ${prefillTopic || data.topic || 'GCCReady enquiry'}`;
    const body = Object.entries(data).map(([k, v]) => `${k}: ${v}`).join('\n');
    window.location.href = `mailto:${aud.team}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setStatus({ kind:'idle', msg:`Opened your email client (${aud.team}). Reply to that thread and we'll take it from there.` });
  };

  return (
    <>
      <PageHead
        title="Contact GCCReady — Students, TPOs, Employers, Mentors, Founders"
        description="Different queries reach different teams. Tell us who you are (student, parent, college TPO, employer, working professional applying as mentor, US founder for Mini-GCC, or someone wanting to launch a practice) — we route within 8 business hours."
        canonical="/contact"
      />
      <HeroDark>
        <div style={{maxWidth:780}}>
          <Pill tone="gold" icon="mail">Contact</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:56, marginTop:18, marginBottom:16}}>Talk to us.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18}}>
            Different queries reach different teams. Pick the one closest to you — we'll route to the right inbox within 8 business hours.
          </p>
          {prefillTopic && (
            <div style={{
              marginTop:20, display:'inline-flex', gap:10, alignItems:'center',
              padding:'10px 16px', borderRadius:12,
              background:'rgba(245,158,11,.10)', border:'1px solid rgba(245,158,11,.25)',
              font:'600 13px/1 Inter', color:'#FBBF24',
            }}>
              <Icon name="info" size={14}/>
              <span>Pre-filled from your visit: <strong style={{color:'#fff'}}>{prefillTopic}</strong></span>
            </div>
          )}
        </div>
      </HeroDark>

      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48}}>
            <form ref={formRef} onSubmit={onSubmit} className="gr-card" style={{padding:36, display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
              <div style={{gridColumn:'1/-1'}}>
                <label style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>I'm reaching out as a</label>
                <div style={{marginTop:10, display:'flex', flexWrap:'wrap', gap:8}}>
                  {CONTACT_AUDIENCES.map((a) => (
                    <button key={a.id} type="button" onClick={()=>setAudId(a.id)} style={{
                      padding:'10px 14px', borderRadius:11, cursor:'pointer',
                      border: audId === a.id ? '2px solid var(--gr-gold)' : '1.5px solid var(--gr-border)',
                      background: audId === a.id ? 'var(--gr-gold-50)' : '#fff',
                      color:'var(--gr-navy)', font:'600 13px/1 "DM Sans"', letterSpacing:'-0.005em',
                    }}>{a.label}</button>
                  ))}
                </div>
              </div>

              <CField label="Name" name="name" required/>
              <CField label="Email" name="email" type="email" required/>
              <CField label="WhatsApp" name="whatsapp" placeholder="+91 …"/>

              {/* Audience-specific fields */}
              {aud.fields.includes('cert') && (
                <CSelect label="Certification of interest" name="cert"
                  options={[['',''],['us-cpa','US CPA'],['us-cma','US CMA'],['ea','EA'],['cfa','CFA'],['acca','ACCA'],['ca','ICAI CA'],['multiple','Multiple / unsure']]}
                  defaultValue={cert || ''}/>
              )}
              {aud.fields.includes('timeline') && (
                <CSelect label="When do you want to start?" name="timeline" options={['Within 1 month','1–3 months','3–6 months','6+ months']}/>
              )}
              {aud.fields.includes('degree') && (
                <CSelect label="Your degree" name="degree" options={['Class 12 / PUC','BCom','BBA','MCom','MBA','CA (ICAI)','Other graduate']}/>
              )}
              {aud.fields.includes('city') && (
                <CField label="City" name="city" placeholder="Bengaluru"/>
              )}
              {aud.fields.includes('for_whom') && (
                <CField label="Who is this for?" name="for_whom" placeholder="My son / daughter / spouse"/>
              )}
              {aud.fields.includes('gcc') && (
                <CField label="Your GCC employer" name="gcc" placeholder="JPMorgan Chase / Goldman Sachs / Microsoft / …"/>
              )}
              {aud.fields.includes('years_pq') && (
                <CField label="Years post-qualification" name="years_pq" type="number" min="0" max="40"/>
              )}
              {aud.fields.includes('practice_stage') && (
                <CSelect label="Practice stage" name="practice_stage" options={['Idea / planning to launch','Newly launched (0–1 yr)','Running practice (1–5 yr)','Scaling (5+ yr)','Want to corporatise']}/>
              )}
              {aud.fields.includes('college_name') && (
                <CField label="College / institute" name="college_name" placeholder="e.g. Christ University"/>
              )}
              {aud.fields.includes('batch_size') && (
                <CField label="Batch size you place" name="batch_size" placeholder="e.g. 600"/>
              )}
              {aud.fields.includes('company') && (
                <CField label="Your company / GCC" name="company" placeholder="e.g. Wells Fargo Bengaluru"/>
              )}
              {aud.fields.includes('headcount') && (
                <CField label="Roles open this quarter" name="headcount" placeholder="e.g. 25 R2R analysts"/>
              )}
              {aud.fields.includes('role_open') && (
                <CField label="Role / function" name="role_open" placeholder="e.g. AI Product Manager"/>
              )}
              {aud.fields.includes('founder_country') && (
                <CField label="HQ country" name="founder_country" placeholder="United States"/>
              )}
              {aud.fields.includes('sector') && (
                <CSelect label="Your sector" name="sector" options={['SaaS / Tech','Financial Services','Healthcare / Pharma','E-commerce / Retail','Industrial / Manufacturing','Consulting / Services','Other']}/>
              )}
              {aud.fields.includes('headcount_y1') && (
                <CField label="Headcount target Year 1" name="headcount_y1" type="number" min="1" max="200" placeholder="3"/>
              )}

              <CField label="Topic" name="topic" defaultValue={prefillTopic} span={2}/>
              <CTextArea label="Your message" name="message" placeholder="Tell us what you need help with — degree, target role, timeline, anything specific." span={2}/>

              <input type="hidden" name="audience_id" value={audId}/>
              <input type="hidden" name="team_route" value={aud.team}/>

              <div style={{gridColumn:'1/-1', display:'flex', gap:10, flexWrap:'wrap', alignItems:'center', marginTop:6}}>
                <button type="submit" className="gr-btn gr-btn-gold gr-btn-lg" disabled={status.kind==='sending'}>
                  {status.kind==='sending' ? 'Sending…' : (aud.cta || 'Send message')} <Icon name="arrow-right" size={16}/>
                </button>
                <span style={{font:'500 13px/1.4 Inter', color:'var(--gr-fg-3)'}}>Routes to <strong style={{color:'var(--gr-navy)'}}>{aud.team}</strong></span>
              </div>
              {status.msg && (
                <div style={{
                  gridColumn:'1/-1', padding:'12px 14px', borderRadius:12,
                  background: status.kind==='success' ? 'var(--gr-green-50)' : status.kind==='error' ? 'var(--gr-red-50)' : 'var(--gr-bg-tint)',
                  color: status.kind==='success' ? 'var(--gr-green)' : status.kind==='error' ? 'var(--gr-red)' : 'var(--gr-fg-2)',
                  font:'600 13.5px/1.5 Inter',
                }}>{status.msg}</div>
              )}
            </form>

            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              {[
                { i:'graduation-cap', t:'Students & parents',         e:'info@gccready.com',     sub:'Fastest on WhatsApp · 8-hour response' },
                { i:'award',          t:'Working pros — Mentor apps', e:'info@gccready.com',   sub:'Verified Mentor Network team' },
                { i:'rocket',         t:'Practice launch / scale',    e:'info@gccready.com',  sub:'For CA / CPA / EA professionals running practice' },
                { i:'building',       t:'College / TPO partnerships', e:'info@gccready.com',  sub:'Dr. Shalini Roy · Head, Campus' },
                { i:'building-2',     t:'Employer partnerships',      e:'info@gccready.com',      sub:'Arjun Menon · Head, Partnerships' },
                { i:'globe',          t:'Mini-GCC (US founders)',     e:'info@gccready.com',   sub:'EOR / entity setup desk' },
                { i:'file-text',      t:'Press & media',              e:'info@gccready.com',     sub:'Kriti Sharma · Comms' },
              ].map(c => (
                <div key={c.t} style={{background:'#fff', borderRadius:16, padding:22, border:'1px solid var(--gr-border)'}}>
                  <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                    <div style={{width:42, height:42, borderRadius:11, background:'var(--gr-navy-50)', color:'var(--gr-navy)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                      <Icon name={c.i} size={18}/>
                    </div>
                    <div>
                      <div style={{font:'700 14.5px/1.3 DM Sans', color:'var(--gr-navy)'}}>{c.t}</div>
                      <a href={`mailto:${c.e}`} style={{font:'600 13.5px/1.3 Inter', color:'var(--gr-gold-700)', textDecoration:'none', display:'block', marginTop:3}}>{c.e}</a>
                      <div style={{font:'500 12px/1.4 Inter', color:'var(--gr-fg-3)', marginTop:4}}>{c.sub}</div>
                    </div>
                  </div>
                </div>
              ))}
              <div style={{background:'var(--gr-navy)', color:'#fff', borderRadius:16, padding:22}}>
                <div style={{display:'flex', gap:12, alignItems:'center', marginBottom:8}}>
                  <Icon name="map-pin" size={18} style={{color:'#FBBF24'}}/>
                  <span style={{font:'700 14.5px/1 DM Sans'}}>Bengaluru HQ</span>
                </div>
                <div style={{font:'500 13.5px/1.6 Inter', color:'rgba(255,255,255,.75)'}}>
                  WeWork Embassy Golf Links · Bengaluru 560071<br/>Mon–Fri 10am–7pm IST
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function CField({ label, name, type='text', required, placeholder, defaultValue, min, max, span }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}{required && <span style={{color:'var(--gr-gold-700)', marginLeft:4}}>*</span>}</label>
      <input id={name} name={name} type={type} required={required} placeholder={placeholder} defaultValue={defaultValue} min={min} max={max} style={{
        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)',
      }}/>
    </div>
  );
}
function CSelect({ label, name, options, defaultValue, span }) {
  const norm = options.map((o) => Array.isArray(o) ? o : [o, o]);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}</label>
      <select id={name} name={name} defaultValue={defaultValue} style={{
        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)', cursor:'pointer',
      }}>
        {norm.map(([v, l]) => <option key={v} value={v}>{l || '— select —'}</option>)}
      </select>
    </div>
  );
}
function CTextArea({ label, name, placeholder, span }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6, gridColumn: span ? `span ${span}` : undefined}}>
      <label htmlFor={name} style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-1)'}}>{label}</label>
      <textarea id={name} name={name} placeholder={placeholder} rows={4} style={{
        padding:'12px 14px', font:'500 14.5px/1.5 Inter',
        border:'1.5px solid var(--gr-border)', borderRadius:11, background:'#fff', color:'var(--gr-fg-1)', resize:'vertical',
      }}/>
    </div>
  );
}

function AboutPage() {
  return (
    <>
      <HeroDark>
        <div style={{maxWidth:740}}>
          <Pill tone="gold">About GCCReady</Pill>
          <h1 className="gr-h1" style={{color:'#fff', fontSize:56, marginTop:18, marginBottom:16}}>We built GCCReady because we were hiring for a GCC and couldn't find the talent.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', fontSize:18}}>
            Founded 2023 in Bengaluru by three ex-GCC leaders who spent a combined 34 years at Wells Fargo, Target and Shell. We built the Skill Badge internally first — it worked so well we spun it into a product.
          </p>
        </div>
      </HeroDark>
      <section className="gr-section" style={{background:'#fff'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Leadership" title="The team"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {[
              ['Anjali Krishnan','Co-founder & CEO','Ex-Wells Fargo India · 14 yrs in captive finance ops','AK'],
              ['Vikram Iyer','Co-founder & COO','Ex-Target India · 11 yrs hiring engineering and ops','VI'],
              ['Rohit Mehra','Co-founder & Head of Product','Ex-Shell India · 9 yrs building L&D for GCCs','RM'],
            ].map(p => (
              <div key={p[0]} style={{background:'var(--gr-bg-tint)', borderRadius:20, padding:28}}>
                <div style={{width:68, height:68, borderRadius:'50%', background:'var(--gr-grad-gold)', display:'flex', alignItems:'center', justifyContent:'center', font:'800 22px/1 DM Sans', color:'var(--gr-navy)', marginBottom:18}}>{p[3]}</div>
                <h4 className="gr-h4" style={{fontSize:20}}>{p[0]}</h4>
                <div style={{font:'600 13.5px/1.3 Inter', color:'var(--gr-gold-700)', marginTop:4}}>{p[1]}</div>
                <div style={{font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)', marginTop:10}}>{p[2]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTABand title="Want to join us?" sub="We're a small team hiring across product, content, and placement ops." primaryLabel="Open roles" primaryHref="#/about#careers"/>
    </>
  );
}

/* ===== LEGAL ===== */
function LegalPage({ title, sections }) {
  return (
    <>
      <section style={{background:'var(--gr-bg-tint)', padding:'40px 0 24px'}}>
        <div className="gr-container">
          <Crumbs items={[{label:'Home', href:'#/'},{label:'Legal', href:'#/legal/terms'},{label:title}]}/>
        </div>
      </section>
      <section style={{padding:'24px 0 96px', background:'var(--gr-bg-tint)'}}>
        <div className="gr-container" style={{maxWidth:840}}>
          <div style={{background:'#fff', borderRadius:24, padding:48, border:'1px solid var(--gr-border)'}}>
            <Pill tone="navy">Legal · Last updated 18 Jan 2026</Pill>
            <h1 className="gr-h1" style={{fontSize:42, marginTop:16, marginBottom:24}}>{title}</h1>
            {sections.map((s, i) => (
              <div key={i} style={{marginBottom:28, paddingBottom: i<sections.length-1?28:0, borderBottom: i<sections.length-1?'1px solid var(--gr-border-soft)':'none'}}>
                <h3 style={{font:'700 20px/1.3 DM Sans', color:'var(--gr-navy)', marginBottom:10}}>{s.h}</h3>
                <div style={{font:'400 15px/1.75 Inter', color:'var(--gr-fg-2)'}}>
                  {s.p.map((para, pi)=>(<p key={pi} style={{margin:'0 0 12px'}}>{para}</p>))}
                </div>
              </div>
            ))}
            <div style={{marginTop:32, padding:'16px 20px', background:'var(--gr-bg-tint)', borderRadius:12, font:'500 13px/1.5 Inter', color:'var(--gr-fg-3)'}}>
              Questions? Email <a href="mailto:legal@gccready.com" style={{color:'var(--gr-navy)'}}>legal@gccready.com</a> · CorpReady AI Technologies Pvt Ltd, Bengaluru 560071.
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { CertificationsPage, CMAPage, DomainsHub, FinanceDomainPage, GenericDomainPage, ResourcesPage, ContactPage, AboutPage, LegalPage });
