/* GCCReady — /about (founder + team bios) and /press (media room) */

const GR_FOUNDERS = [
  { init:'MW', name:'Mayank Wadhera',  title:'Founder & CEO',
    bio:'CA + practice strategist. Building GCCReady to channel India\'s commerce talent into the 1,800+ Global Capability Centres that pay 2× the IT-services entry CTC.',
    accent:'#F59E0B', linkedin:'https://www.linkedin.com/' },
  { init:'AM', name:'Anita Manocha',   title:'Co-founder & Head of Programs',
    bio:'Two-decade L&D veteran. Designed the Skill Badge framework and the 22-role-pod curriculum from scratch.',
    accent:'#0891B2', linkedin:'https://www.linkedin.com/' },
  { init:'RA', name:'Rakesh Anita',    title:'Head of Engineering',
    bio:'Former Big-Tech engineer. Built GCCReady\'s data platform, Skill Badge engine, and the 13-tool calculator suite.',
    accent:'#22C55E', linkedin:'https://www.linkedin.com/' },
];

const GR_TEAM = [
  { init:'SR', name:'Dr. Shalini Roy',   role:'Head, Campus Partnerships',     team:'TPO desk' },
  { init:'AJ', name:'Arjun Menon',       role:'Head, Employer Partnerships',   team:'Hire desk' },
  { init:'KS', name:'Kriti Sharma',      role:'Head, Communications',          team:'Comms / press' },
  { init:'PR', name:'Priya Ranganathan', role:'Lead Faculty — US CPA / EA',    team:'Cert pods' },
  { init:'RM', name:'Ravi Manjarekar',   role:'Lead Faculty — US CMA / FP&A',  team:'Cert pods' },
  { init:'AS', name:'Ananya Suresh',     role:'Lead Faculty — CFA / Risk',     team:'Cert pods' },
  { init:'NK', name:'Nikhil Kapoor',     role:'Mentor Network Lead',           team:'Mentor desk' },
  { init:'LD', name:'Leena D\'Costa',    role:'Operations + Sprint Coordinator', team:'Cohort ops' },
];

function AboutPage() {
  return (
    <>
      <PageHead
        title="About GCCReady — Built in India for India's GCC Generation"
        description="GCCReady is built by CAs, ex-Big-Tech engineers and L&D veterans to channel India's commerce talent into the 1,800+ Global Capability Centres. Meet the team."
        canonical="/about"
        schema={[
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'About',href:'/about'}]),
          { '@context':'https://schema.org','@type':'AboutPage','name':'About GCCReady','url':'https://gccready.com/about' },
        ]}
      />
      <HeroDark>
        <div style={{maxWidth:880}}>
          <Pill tone="dark" icon="building-2">About</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:14, fontSize:60, lineHeight:1.05}}>
            Built in India.<br/>
            <span style={{color:'#F59E0B'}}>For India's GCC generation.</span>
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:680}}>
            Bharat produces 1.5 million commerce + finance graduates each year. Fewer than 8% are interview-ready for the GCCs that pay ₹9.2L median entry CTC. GCCReady is the bridge — Skill Badge, role pods, certifications, mentor network, placement support — built so every Bharat student gets a fair shot at the global stage.
          </p>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Why we exist" title="The 92% problem"
            sub="India has the talent. India has the demand. The gap is preparation. Indian colleges teach theory; GCCs hire for tools, communication, and case-style thinking. We close that gap — without making students re-learn what they already know."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            {[
              { stat:'1,800+', label:'GCCs in India hiring continuously' },
              { stat:'1.5M', label:'Commerce + finance graduates per year' },
              { stat:'8%', label:'Currently interview-ready for GCC roles' },
            ].map((s) => (
              <div key={s.label} className="gr-card" style={{padding:28}}>
                <div style={{font:'800 44px/1 "DM Sans"', color:'var(--gr-navy)', letterSpacing:'-0.025em'}}>{s.stat}</div>
                <div style={{font:'600 14px/1.5 Inter', color:'var(--gr-fg-2)', marginTop:10}}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Founders" title="Built by people who lived the problem" sub="A CA who ran his own practice. An L&D veteran who placed 4,000+ students. An engineer who shipped products at Big Tech."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            {GR_FOUNDERS.map((f) => (
              <div key={f.name} className="gr-card" style={{padding:28, display:'flex', flexDirection:'column', gap:14}}>
                <div style={{display:'flex', alignItems:'center', gap:14}}>
                  <div style={{
                    width:64, height:64, borderRadius:16,
                    background: f.accent + '22', color: f.accent,
                    display:'grid', placeItems:'center',
                    font:'800 22px/1 "DM Sans"',
                  }}>{f.init}</div>
                  <div>
                    <div style={{font:'800 17px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{f.name}</div>
                    <div style={{font:'600 13px/1.4 Inter', color: f.accent, marginTop:3}}>{f.title}</div>
                  </div>
                </div>
                <p style={{font:'500 14px/1.6 Inter', color:'var(--gr-fg-2)', margin:0}}>{f.bio}</p>
                <a href={f.linkedin} target="_blank" rel="noopener noreferrer" className="gr-btn gr-btn-ghost" style={{marginTop:'auto', justifyContent:'center'}}>
                  <Icon name="linkedin" size={14}/> LinkedIn
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Team" title="The desks behind every conversation" sub="Eight team leads across faculty, partnerships, mentor desk, and cohort ops. Reach the right desk through Contact."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {GR_TEAM.map((t) => (
              <div key={t.name} className="gr-card" style={{padding:22, display:'flex', flexDirection:'column', gap:10}}>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <div style={{
                    width:46, height:46, borderRadius:13,
                    background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                    display:'grid', placeItems:'center',
                    font:'800 16px/1 "DM Sans"',
                  }}>{t.init}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{font:'700 14px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{t.name}</div>
                    <div style={{font:'500 11.5px/1.3 Inter', color:'var(--gr-fg-3)', marginTop:3}}>{t.role}</div>
                  </div>
                </div>
                <span style={{font:'600 11px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.10em', textTransform:'uppercase'}}>{t.team}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Backed by" title="The hands building this thing"/>
          <LogoStrip preset="hero" speed={50} size="md" browseLabel="Browse our 80+ partner GCCs"/>
        </div>
      </section>

      <CTABand title="Want to join the team?" sub="We hire from our own Sprint cohorts. Take the Skill Badge first." primaryLabel="Get your Skill Badge" primaryHref="#/skill-badge/take" secondaryLabel="See open roles" secondaryHref="#/contact?intent=careers"/>
    </>
  );
}

/* ============================================================================
 * Press / media room
 * ========================================================================== */
const PRESS_COVERAGE = [
  { outlet:'YourStory',         date:'Apr 2026', title:'How GCCReady is rewiring Bharat\'s commerce-to-GCC pipeline', logo:'yourstory.com' },
  { outlet:'Inc42',             date:'Mar 2026', title:'India\'s 1,800-strong GCC ecosystem gets a dedicated career platform', logo:'inc42.com' },
  { outlet:'Economic Times',    date:'Feb 2026', title:'GCCReady raises seed to scale Skill Badge across 40+ campuses', logo:'economictimes.com' },
  { outlet:'Business Standard', date:'Jan 2026', title:'Bharat\'s next 2.1M GCC professionals: where will they come from?', logo:'business-standard.com' },
  { outlet:'Mint',              date:'Dec 2025', title:'New Delhi to Hyderabad: the rise of the captive workforce', logo:'livemint.com' },
  { outlet:'Forbes India',      date:'Nov 2025', title:'Why CA + GCCReady is becoming the gold-standard combo', logo:'forbesindia.com' },
];

function PressPage() {
  return (
    <>
      <PageHead
        title="Press & Media — GCCReady"
        description="Press kit, media coverage, and contacts. GCCReady is India's career platform for the 1,800+ GCC ecosystem."
        canonical="/press"
        schema={[schemaBreadcrumb([{label:'Home',href:'/'},{label:'Press',href:'/press'}])]}
      />
      <HeroDark>
        <div style={{maxWidth:780}}>
          <Pill tone="dark" icon="file-text">Press &amp; media</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:14, fontSize:54}}>Press room.</h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:14, maxWidth:680}}>
            Coverage, brand assets, founder bios, and direct contact for journalists. Email <strong style={{color:'#FBBF24'}}>info@gccready.com</strong> for embargoed/exclusive stories.
          </p>
        </div>
      </HeroDark>

      <section className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Coverage" title="GCCReady in the press"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14}}>
            {PRESS_COVERAGE.map((p) => (
              <div key={p.title} className="gr-card" style={{padding:22, display:'flex', alignItems:'center', gap:18}}>
                <div style={{
                  width:64, height:64, borderRadius:13,
                  background:'#fff', border:'1px solid var(--gr-border-soft)',
                  display:'grid', placeItems:'center', overflow:'hidden', padding:8, flexShrink:0,
                }}>
                  <img src={grLogoUrl(p.logo, 128)} alt={p.outlet}
                    onError={(ev)=>{ ev.target.src = grLogoFallback(p.logo, 128); ev.target.onerror=null; }}
                    style={{maxWidth:'100%', maxHeight:'100%', objectFit:'contain'}}/>
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{display:'flex', alignItems:'center', gap:10}}>
                    <span style={{font:'700 14px/1.2 "DM Sans"', color:'var(--gr-navy)'}}>{p.outlet}</span>
                    <span style={{font:'500 11.5px/1 Inter', color:'var(--gr-fg-3)'}}>· {p.date}</span>
                  </div>
                  <h4 style={{font:'600 14.5px/1.45 Inter', color:'var(--gr-fg-1)', margin:'6px 0 0'}}>{p.title}</h4>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="Press kit" title="Brand assets for journalists"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
            {[
              { i:'download', t:'Brand logo pack',         body:'Wordmark + symbol · light + dark · SVG + PNG.', cta:'Download .zip' },
              { i:'file-text', t:'Founder bios + photos',  body:'High-res photos and short/long bios for Mayank Wadhera, Anita Manocha, Rakesh Anita.', cta:'Download .zip' },
              { i:'bar-chart', t:'GCC industry one-pager', body:'1,800+ GCCs · 2.1M professionals · ₹9.2L median CTC · sector breakdown.', cta:'Download PDF' },
            ].map((k) => (
              <div key={k.t} className="gr-card" style={{padding:24, display:'flex', flexDirection:'column', gap:12}}>
                <div style={{
                  width:46, height:46, borderRadius:13,
                  background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                  display:'grid', placeItems:'center',
                }}><Icon name={k.i} size={20}/></div>
                <h4 className="gr-h4" style={{fontSize:18, marginTop:4}}>{k.t}</h4>
                <p className="gr-p" style={{fontSize:13.5, margin:0}}>{k.body}</p>
                <a href="#/contact?intent=press" className="gr-btn gr-btn-gold" style={{marginTop:'auto', justifyContent:'center'}}>
                  {k.cta} <Icon name="download" size={13}/>
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="gr-section">
        <div className="gr-container">
          <div className="gr-card" style={{padding:32, display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:24}}>
            <div>
              <div className="gr-eyebrow" style={{color:'var(--gr-gold-700)'}}>Press contact</div>
              <h3 className="gr-h3" style={{fontSize:24, marginTop:8}}>Kriti Sharma · Head of Communications</h3>
              <p className="gr-p" style={{marginTop:10}}>
                Email <a href="mailto:info@gccready.com" style={{color:'var(--gr-gold-700)', fontWeight:700}}>info@gccready.com</a> with a one-line subject and a brief paragraph on your story angle. We respond to embargo / exclusive requests within 24 hours.
              </p>
              <p className="gr-p" style={{marginTop:6, fontSize:13.5, color:'var(--gr-fg-3)'}}>
                For interviews with founders, please CC the founder name in the subject and we'll route accordingly.
              </p>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <a href="mailto:info@gccready.com" className="gr-btn gr-btn-gold gr-btn-lg" style={{justifyContent:'center'}}>Email info@gccready.com</a>
              <a href="#/contact?intent=press" className="gr-btn gr-btn-ghost gr-btn-lg" style={{justifyContent:'center'}}>Use contact form</a>
              <a href="#/about" className="gr-btn gr-btn-ghost gr-btn-lg" style={{justifyContent:'center'}}>Founder profiles</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { AboutPage, PressPage, GR_FOUNDERS, GR_TEAM });