/* GCCReady — Mentor Network. For working CFA / US CPA / US CMA / EA / ACCA professionals
 * already employed at India's GCCs to apply, get verified, and earn while mentoring students.
 */

const MENTOR_TIERS = [
  { name:'Verified Mentor', icon:'check-circle',
    eligibility:'1+ years at a GCC + 1 of CFA / US CPA / US CMA / EA / ACCA / CA',
    earn:'₹1,500 / 30-min session',
    perks:['LinkedIn-shareable Verified Mentor Badge','Listed on /mentors with profile + GCC','Direct messages from matched students','Quarterly mentor cohort + exclusive Slack'],
    cta:'Apply to mentor',
  },
  { name:'Senior Mentor', icon:'star',
    eligibility:'3+ years at a Big 4 GDS / BFSI GCC, OR managed a 5+ person team',
    earn:'₹2,500 / 30-min · ₹4,000 / 60-min',
    perks:['Everything in Verified, plus:','Matched to GCCReady Sprint cohorts (group sessions)','Speaking slots on the GCC Brief podcast','Co-author rights on published Library articles','Priority for paid corporate workshops'],
    cta:'Apply as Senior Mentor',
    featured: true,
  },
  { name:'Faculty / Lead Mentor', icon:'graduation-cap',
    eligibility:'7+ years post-qualification, currently a Manager / Director at a named GCC',
    earn:'₹6,000 / 60-min · ₹40,000+ / Sprint cohort series',
    perks:['Everything in Senior, plus:','Curriculum review + signature endorsement','Featured on /placements + cert pillar pages','Equity-style profit-share on the Sprint pod you co-lead','Annual Mentor of the Year recognition'],
    cta:'Apply as Faculty Mentor',
  },
];

const MENTOR_GCC_OPTIONS = [
  'JPMorgan Chase','Goldman Sachs','Morgan Stanley','Wells Fargo','Bank of America','Citi','Deutsche Bank','HSBC','Barclays','UBS','Standard Chartered','BlackRock','Fidelity','State Street','BNY Mellon','Northern Trust',
  'Microsoft','Google','Amazon','Meta','Apple','Adobe','Oracle','Salesforce','IBM','Intel','NVIDIA','Cisco','VMware','ServiceNow',
  'Novartis','Pfizer','AstraZeneca','Sanofi','GSK','Roche','Eli Lilly','UnitedHealth / Optum','CVS Health','Cigna / Evernorth',
  'GE','Siemens','Bosch','Honeywell','Caterpillar','ABB','Schneider Electric','3M','Cummins','Boeing','Airbus','Mercedes-Benz R&D','BMW Tech','Volvo','Continental','Ford GBS',
  'Deloitte USI','EY GDS','KPMG GDC','PwC AC','McKinsey Knowledge','BCG India X','Bain CTS',
  'Walmart Global Tech','Target','Lowe\'s','Tesco','IKEA',
  'Shell','BP','ExxonMobil','SLB','Maersk','DHL','Ericsson','Nokia','Qualcomm','Texas Instruments',
  'Other (specify in message)',
];

function MentorNetworkPage() {
  return (
    <>
      <PageHead
        title="Become a GCCReady Mentor — Earn ₹1,500–6,000 / Session"
        description="If you're a CFA / US CPA / US CMA / EA / ACCA professional already working at an India GCC, mentor the next batch of students. Verified Mentor Badge, LinkedIn-shareable. ₹1,500–6,000 per session."
        canonical="/mentors"
        schema={[
          schemaService({
            name:'GCCReady Mentor Network',
            description:'Verified mentor network of CFA, US CPA, US CMA, EA, ACCA professionals at India GCCs.',
            slug:'/mentors',
            serviceType:'EducationalService',
          }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Mentors',href:'/mentors'}]),
          schemaFAQ([
            { q:'Who can apply to be a GCCReady mentor?', a:'Working professionals with at least 1 year of experience at a named GCC in India AND one of: CFA, US CPA, US CMA, EA, ACCA, ICAI CA. Senior tiers require 3+ or 7+ years.' },
            { q:'How much do GCCReady mentors earn?', a:'Verified Mentors: ₹1,500 per 30-minute session. Senior Mentors: ₹2,500–4,000 per session. Faculty / Lead Mentors: ₹6,000 per 60-minute session, plus ₹40,000+ per Sprint cohort series.' },
            { q:'How many sessions per month is required?', a:'Minimum 2 sessions per month to retain Verified status. Maximum is up to you; many of our top mentors take 8–12 sessions per month and use it as a structured side-income.' },
            { q:'What is the Verified Mentor Badge?', a:'A LinkedIn-shareable digital badge issued by GCCReady after verification of your GCC + certification. The badge links to your public mentor profile on gccready.com/mentors. Used by hiring managers as a senior signal.' },
            { q:'Do I need to disclose my employer to GCCReady?', a:'Yes — your employing GCC is verified at application (via official email or LinkedIn proof). It is shown on your public profile only with your explicit consent.' },
            { q:'Can I mentor students from outside my company?', a:'Yes, by default. We never assign you students from companies your employer prohibits you from engaging (we maintain a do-not-mentor list per your request).' },
            { q:'How are sessions scheduled?', a:'Through our scheduling partner — students book 30 / 60-min slots from your published availability. You set the calendar; we handle the rest.' },
            { q:'How am I paid?', a:'Monthly bank transfer, INR. We deduct a 20% platform fee + applicable GST.' },
          ]),
        ]}
      />

      <HeroDark>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <Pill tone="dark" icon="award">Mentor network · Live</Pill>
            <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:60, lineHeight:1.04}}>
              Already at a GCC?<br/>
              <span style={{color:'#F59E0B'}}>Pay it forward.</span> Earn while you do.
            </h1>
            <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:580}}>
              If you're a CFA, US CPA, US CMA, EA, or ACCA professional working at an India GCC, you've already done the hardest work. Now help the next cohort. Verified Mentor Badge. ₹1,500–6,000 per session. 2 sessions a month.
            </p>
            <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
              <a href="#mentor-apply" className="gr-btn gr-btn-gold gr-btn-lg">
                Apply to mentor <Icon name="arrow-right" size={16}/>
              </a>
              <a href="#mentor-tiers" className="gr-btn gr-btn-lg" style={{
                background:'rgba(255,255,255,.1)', color:'#fff',
                border:'1px solid rgba(255,255,255,.18)',
              }}>See tiers + pay</a>
            </div>
          </div>
          <div style={{padding:32, borderRadius:24, background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)'}}>
            <div className="gr-eyebrow" style={{color:'#FBBF24', marginBottom:14}}>What you get</div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                'LinkedIn-shareable Verified Mentor Badge',
                'Listed on /mentors with your GCC + cert',
                '₹1,500–6,000 per 30/60-min session',
                'Quarterly mentor cohort + exclusive Slack',
                'Speaking slots on the GCC Brief podcast',
                'Annual "Mentor of the Year" recognition',
              ].map((it, i) => (
                <div key={i} style={{display:'flex', alignItems:'flex-start', gap:10, color:'rgba(255,255,255,.88)', font:'500 14px/1.5 Inter'}}>
                  <Icon name="check" size={16} style={{color:'#22C55E', flexShrink:0, marginTop:1}}/>{it}
                </div>
              ))}
            </div>
          </div>
        </div>
      </HeroDark>

      {/* Trust strip — auto-scrolling logo marquee with 38 named GCCs */}
      <section style={{padding:'48px 0 24px'}}>
        <div className="gr-container">
          <p style={{font:'700 12.5px/1 Inter', color:'var(--gr-fg-3)', textAlign:'center', letterSpacing:'.14em', textTransform:'uppercase', marginBottom:20}}>
            Our mentor network includes professionals from
          </p>
          <LogoStrip preset="mentors" speed={50} size="md"/>
          <p style={{font:'500 12px/1.5 Inter', color:'var(--gr-fg-4)', textAlign:'center', marginTop:14}}>
            Logos indicate the GCCs where Verified Mentors currently work. Use does not imply formal partnership or endorsement.
          </p>
        </div>
      </section>

      {/* 3-tier mentor cards */}
      <section id="mentor-tiers" className="gr-section">
        <div className="gr-container">
          <SectionTitle eyebrow="Three tiers" title="Pick the level that fits your seniority" sub="Mentors are upgraded based on student ratings and tenure. Most start at Verified."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
            {MENTOR_TIERS.map((t) => (
              <div key={t.name} className="gr-card" style={{
                padding:32,
                position:'relative', overflow:'hidden',
                ...(t.featured && {
                  border:'2px solid var(--gr-gold)',
                  boxShadow:'var(--gr-shadow-gold)',
                  transform:'scale(1.02)',
                }),
              }}>
                {t.featured && (
                  <div style={{
                    position:'absolute', top:14, right:14,
                    padding:'5px 11px', borderRadius:999,
                    background:'var(--gr-gold)', color:'var(--gr-navy)',
                    font:'800 10.5px/1 Inter', letterSpacing:'.1em', textTransform:'uppercase',
                  }}>Most chosen</div>
                )}
                <div style={{
                  width:46, height:46, borderRadius:13,
                  background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
                  display:'grid', placeItems:'center', marginBottom:16,
                }}><Icon name={t.icon} size={20}/></div>
                <h3 className="gr-h3" style={{fontSize:22}}>{t.name}</h3>
                <div style={{
                  marginTop:10, padding:'12px 16px',
                  background:'var(--gr-bg-cream)', borderRadius:11,
                  font:'800 18px/1.2 "DM Sans"', color:'var(--gr-navy)',
                  letterSpacing:'-0.01em',
                }}>{t.earn}</div>
                <div style={{marginTop:14, font:'500 13px/1.45 Inter', color:'var(--gr-fg-3)'}}>
                  <strong style={{color:'var(--gr-navy)'}}>Eligibility:</strong> {t.eligibility}
                </div>
                <ul style={{listStyle:'none', padding:0, margin:'18px 0 0', display:'flex', flexDirection:'column', gap:8}}>
                  {t.perks.map((p, i) => (
                    <li key={i} style={{display:'flex', gap:10, font:'500 13.5px/1.5 Inter', color:'var(--gr-fg-1)'}}>
                      <Icon name="check" size={14} style={{flexShrink:0, marginTop:3, color:'var(--gr-green)'}}/>{p}
                    </li>
                  ))}
                </ul>
                <a href="#mentor-apply" className={`gr-btn ${t.featured ? 'gr-btn-gold' : 'gr-btn-ghost'}`} style={{marginTop:22, width:'100%', justifyContent:'center'}}>
                  {t.cta} <Icon name="arrow-right" size={14}/>
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="How it works" title="From application to your first paid session in 9 days"/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {[
              { d:'Day 1', t:'Apply', body:'5-min form with cert + GCC + role + city. Submit your LinkedIn for verification.' },
              { d:'Day 2–3', t:'Verify', body:'We confirm your GCC employment via official email or LinkedIn. Quick 15-min call.' },
              { d:'Day 4', t:'Onboard', body:'Verified Mentor Badge issued. Calendar synced. Mentor handbook + sample first-session script shared.' },
              { d:'Day 5–9', t:'First sessions', body:'Students browse and book your slots. We pay monthly via bank transfer.' },
            ].map((s, i) => (
              <div key={i} className="gr-card" style={{padding:24}}>
                <div style={{font:'700 11px/1 Inter', color:'var(--gr-gold-700)', letterSpacing:'.14em', textTransform:'uppercase'}}>{s.d}</div>
                <h4 className="gr-h4" style={{fontSize:19, marginTop:8}}>{s.t}</h4>
                <p style={{font:'500 13.5px/1.55 Inter', color:'var(--gr-fg-2)', margin:'8px 0 0'}}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Application form */}
      <section id="mentor-apply" className="gr-section">
        <div className="gr-container" style={{maxWidth:840}}>
          <SectionTitle eyebrow="Apply now" title="Mentor application" sub="5 minutes. We respond within 2 business days."/>
          <MentorApplyForm/>
        </div>
      </section>

      {/* FAQ */}
      <section className="gr-section" style={{background:'var(--gr-bg-cream)'}}>
        <div className="gr-container">
          <SectionTitle eyebrow="FAQ" title="What mentors ask before applying"/>
          <Accordion items={[
            { q:'Who can apply to be a GCCReady mentor?', a:'Working professionals with at least 1 year at a named GCC in India AND one of: CFA, US CPA, US CMA, EA, ACCA, ICAI CA. Senior tiers require 3+ or 7+ years.' },
            { q:'How much do mentors earn?', a:'Verified: ₹1,500 / 30-min. Senior: ₹2,500–4,000 / session. Faculty: ₹6,000 / 60-min + ₹40,000+ per Sprint cohort.' },
            { q:'Minimum time commitment?', a:'2 sessions per month (1 hour total) to retain Verified status. Most top mentors take 8–12 sessions monthly.' },
            { q:'How is my employer involved?', a:'They aren\'t — we verify your employment, but the mentoring relationship is between you and GCCReady. We do not contact your employer.' },
            { q:'What if my employer prohibits external engagements?', a:'Many GCCs allow educational engagements with disclosure. We help you draft a disclosure note. Some GCCs require a side-letter; we can help with that too.' },
            { q:'How is payment handled?', a:'Monthly INR bank transfer. We deduct a 20% platform fee + GST. You can opt for invoiced payments to register as a service provider.' },
            { q:'What if I want to step down?', a:'Just notify us; your slots stop accepting bookings within 24 hours. No notice period required.' },
          ]}/>
        </div>
      </section>

      <CTABand
        title="Your seniority is the most valuable thing you have."
        sub="Apply once. Build a side-income that compounds. Help the next cohort of Bharat reach the global stage."
        primaryLabel="Apply to mentor"
        primaryHref="#mentor-apply"
        secondaryLabel="Talk to the team"
        secondaryHref="#/contact?intent=mentor"
      />
    </>
  );
}

function MentorApplyForm() {
  const [status, setStatus] = React.useState({ kind:'idle', msg:'' });
  const formRef = React.useRef(null);

  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 = 'mentor_application';
    data.audience = 'Working professional / mentor applicant';
    data.source_path = window.location.hash;
    data.ts_client = new Date().toISOString();

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

    setStatus({ kind:'sending', msg:'Submitting your application…' });
    // Same Apps Script endpoint as other forms
    const SHEETS_ENDPOINT = (window.GR_CONFIG && window.GR_CONFIG.SHEETS_ENDPOINT) || '';
    if (SHEETS_ENDPOINT) {
      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. We respond within 2 business days. If your GCC + cert check out, you\'ll hear from us via email + WhatsApp.' });
        formRef.current.reset();
        return;
      } catch (err) { /* fall through */ }
    }
    const subject = `Mentor application — ${data.name || ''} · ${data.cert || ''} · ${data.gcc || ''}`;
    const body = Object.entries(data).map(([k,v])=>`${k}: ${v}`).join('\n');
    window.location.href = `mailto:info@gccready.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setStatus({ kind:'idle', msg:'Opened your email client. Reply to that thread and we\'ll take it from there.' });
  };

  return (
    <form ref={formRef} onSubmit={onSubmit} className="gr-card" style={{padding:36, display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
      <MField label="Your name" name="name" required/>
      <MField label="Personal email" name="email" type="email" required/>
      <MField label="WhatsApp" name="whatsapp" placeholder="+91 …" required/>
      <MField label="LinkedIn URL" name="linkedin" placeholder="linkedin.com/in/…" required/>

      <MSelect label="Your certification" name="cert"
        options={['CFA','US CPA','US CMA','EA','ACCA','ICAI CA','Multiple (specify in message)','None — but I have 5+ yrs experience']}/>
      <MSelect label="Tier you're applying for" name="tier"
        options={[['verified','Verified Mentor (1+ yrs)'],['senior','Senior Mentor (3+ yrs)'],['faculty','Faculty / Lead Mentor (7+ yrs)'],['advise','Not sure — advise me']]}/>

      <MSelect label="Current GCC employer" name="gcc" options={MENTOR_GCC_OPTIONS}/>
      <MField label="Your role / title" name="role_title" placeholder="e.g. Senior Tax Associate, US Audit"/>

      <MField label="Years post-qualification" name="years_pq" type="number" min="0" max="40"/>
      <MField label="City (work)" name="city" placeholder="Bengaluru"/>

      <MSelect label="Sessions per month you can commit" name="commit"
        options={['2–4 (minimum)','5–8','9–12','13+ (treating this as side-income)']} span={2}/>

      <MTextArea label="Anything else? (optional)" name="message" placeholder="Tell us a 2-line story about your GCC journey, OR any disclosure constraints, OR which student profile you'd love to mentor." span={2}/>

      <div style={{gridColumn:'1/-1', display:'flex', gap:10, flexWrap:'wrap', alignItems:'center'}}>
        <button type="submit" className="gr-btn gr-btn-gold gr-btn-lg" disabled={status.kind==='sending'}>
          {status.kind==='sending' ? 'Submitting…' : 'Submit mentor application'} <Icon name="arrow-right" size={16}/>
        </button>
        <span style={{font:'500 13px/1.4 Inter', color:'var(--gr-fg-3)'}}>2 business days response · No spam</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>
  );
}

function MField({ label, name, type='text', required, placeholder, 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} 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 MSelect({ label, name, options, 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} 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}</option>)}
      </select>
    </div>
  );
}
function MTextArea({ 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>
  );
}

Object.assign(window, { MentorNetworkPage, MentorApplyForm });
