// pages/Training.jsx — CCP Training (ISACA / Verigo ATP Edition)

const TPURPLE = '#4B4FD9';
const TORANGE = '#E8622A';
const TDARK   = '#1E1E2E';
const TFONT   = "'DM Sans', system-ui, sans-serif";
const TMONO   = "'JetBrains Mono', monospace";
const PRICE_V = '$2,995';
const PRICE_S = '$1,765';

/* ── DATES ───────────────────────────────────────────────── */
const TP_DATES = [
  { id:'d1', label:'Jul 15–17, 2026', sub:'Tue–Thu · 9 AM–5 PM ET', seats:8 },
  { id:'d2', label:'Aug 11–13, 2026', sub:'Tue–Thu · 9 AM–5 PM ET', seats:12 },
  { id:'d3', label:'Sep 22–24, 2026', sub:'Mon–Wed · 9 AM–5 PM ET', seats:5 },
  { id:'d4', label:'Oct 13–15, 2026', sub:'Tue–Thu · 9 AM–5 PM ET', seats:14 },
  { id:'d5', label:'Nov 10–12, 2026', sub:'Tue–Thu · 9 AM–5 PM ET', seats:6 },
  { id:'d6', label:'Dec 8–10, 2026',  sub:'Tue–Thu · 9 AM–5 PM ET', seats:9 },
];

/* ── 6 ISACA CCP DOMAINS ─────────────────────────────────── */
const TP_DOMAINS = [
  { id:'dom1', num:'01', title:'CMMC Ecosystem & Governance',
    items:['DoD supply chain structure and Defense Industrial Base obligations','ISACA as CAICO — roles, responsibilities, and credentialing authority','CyberAB Marketplace, C3PAO structure, and RPO/CCP/CCA roles','DFARS 252.204-7012 and 32 CFR Part 170 regulatory context'] },
  { id:'dom2', num:'02', title:'Ethics & Professional Conduct',
    items:['ISACA Code of Professional Conduct for CMMC practitioners','CoPC obligations for CCPs, CCAs, and assessment team members','Conflict of interest identification, disclosure, and management','Professional accountability under DoD and ISACA standards'] },
  { id:'dom3', num:'03', title:'CMMC Model Construct',
    items:['Federal Contract Information (FCI) and Controlled Unclassified Information (CUI)','CMMC Levels 1, 2, and 3 — structure, thresholds, and applicability','110 practices across 14 security domains and scoring methodology','Self-assessment vs. third-party C3PAO assessment criteria'] },
  { id:'dom4', num:'04', title:'Practices & Assessment Criteria',
    items:['NIST SP 800-171 Rev 2 — all 14 security requirement families','Practice-to-requirement mapping and implementation analysis','Examination, interview, and test-based assessment methods','Evidence quality, location, collection, and sufficiency analysis'] },
  { id:'dom5', num:'05', title:'CMMC Assessment Process',
    items:['Phase 1 — Plan and Prepare Assessment (assessment plan development)','Phase 2 — Conduct Assessment (CCP team member responsibilities)','Phase 3 — Report Assessment Results (findings, scoring, documentation)','Phase 4 — Evaluate POA&M Outstanding Items (adjudication and follow-up)'] },
  { id:'dom6', num:'06', title:'Scoping & System Boundaries',
    items:['Asset categorization: in-scope, out-of-scope, and specialized assets','CUI data flows and system boundary documentation','External service providers, cloud services, and enclave scoping','System Security Plan (SSP) structure and OSC readiness preparation'] },
];

/* ── LEARNING OBJECTIVES ─────────────────────────────────── */
const TP_OBJECTIVES = [
  'Explain the CMMC 2.0 framework — levels, practice domains, and DoD regulatory context',
  'Identify and correctly handle FCI and CUI under DFARS and NIST SP 800-171',
  'Describe ISACA\'s role as CAICO and the CCP\'s position in the assessment ecosystem',
  'Map all 14 NIST SP 800-171 practice families to real organizational environments',
  'Define system scope and boundaries for CMMC Level 2 assessments accurately',
  'Execute all four phases of the CMMC Assessment Process as a team member',
  'Evaluate evidence packages against CMMC Level 1 and Level 2 assessment criteria',
  'Apply the ISACA Code of Professional Conduct in assessment and advisory contexts',
  'Identify compliance gaps and develop actionable Plans of Action & Milestones (POA&Ms)',
  'Pass the ISACA CCP exam — 170 questions across 6 domains via PSI proctoring',
];

/* ── AUDIENCE ────────────────────────────────────────────── */
const TP_AUDIENCE = [
  { title:'IT & Security Professionals',  desc:'Supporting DoD prime contractors and subcontractors in CMMC-scoped environments' },
  { title:'Compliance Consultants',        desc:'Advising Defense Industrial Base organizations through the CMMC compliance lifecycle' },
  { title:'Risk & Compliance Officers',   desc:'Managing government contract cybersecurity requirements and organizational risk posture' },
  { title:'IT Managers & Administrators', desc:'Responsible for systems and networks within the CMMC assessment boundary' },
  { title:'Aspiring CMMC Practitioners',  desc:'Seeking CCP credentials to enter the CMMC advisory and assessment ecosystem' },
  { title:'Auditors & Assessors',          desc:'Building foundational CMMC knowledge to support C3PAO-led assessments' },
];

/* ── DELIVERABLES ────────────────────────────────────────── */
const TP_DELIVERABLES = [
  'Official ISACA CCP study guide — all 6 domains',
  '170-question practice exam bank with full rationales',
  'CMMC assessment templates and evidence checklists',
  'CUI scoping and system boundary worksheets',
  'ISACA certification application checklist',
  'Certificate of ATP-recognized completion',
  'ISACA exam voucher via PSI testing centers (virtual only)',
  'Live instructor Q&A across all 3 days (virtual only)',
  '12-month rolling access to all updated materials',
];

/* ── FAQ ─────────────────────────────────────────────────── */
const TP_FAQ_CATS = [
  { id:'cat1', label:'The CCP Credential', faqs:[
    { id:'f1', q:'What is the Certified CMMC Professional (CCP) credential?',
      a:'The CCP is the foundational certification for professionals entering the CMMC ecosystem. It validates knowledge of the CMMC framework, NIST SP 800-171, assessment methodology, and ISACA ethical standards. CCP holders can support organizations pursuing compliance and serve on formal assessment teams under lead assessor supervision.' },
    { id:'f2', q:'Who now administers the CCP credential?',
      a:'As of April 2026, ISACA administers the CCP as the CMMC Assessor & Instructor Certification Organization (CAICO). The exam is delivered through PSI testing centers globally and via remote online proctoring. ISACA manages all exam registration, scoring, and certification issuance.' },
    { id:'f3', q:'What is the difference between CCP and CCA?',
      a:'The CCP validates foundational CMMC knowledge and qualifies you to participate on assessment teams under supervision — you cannot make final determinations. The CCA (Certified CMMC Assessor) is the advanced credential required to lead formal CMMC Level 2 assessments. The CCP is a hard prerequisite for the CCA.' },
    { id:'f4', q:'Is Verigo an Authorized Training Provider (ATP)?',
      a:'Yes. Verigo Global is a CyberAB Registered Provider Organization (RPO) and ISACA-recognized Authorized Training Provider. Our training program is built in full alignment with the official ISACA CCP exam content outline. Completion satisfies the mandatory ATP training requirement for CCP exam eligibility.' },
  ]},
  { id:'cat2', label:'Prerequisites & Eligibility', faqs:[
    { id:'f5', q:'Are there prerequisites to attend this training?',
      a:'No formal prerequisites for enrollment. However, ISACA requires CCP certification candidates to hold a college degree in a cyber or IT field, or 2+ years of related experience (including military service) in cyber, IT, or assessment. Foundational cybersecurity knowledge is strongly recommended.' },
    { id:'f6', q:'What else is required to earn the full CCP certification?',
      a:'Beyond passing the exam: (1) meet ISACA\'s education/experience requirements, (2) complete mandatory ATP training, (3) pay ISACA\'s $200 certification application fee, and (4) attain a positively adjudicated Tier 3 background investigation. Candidates have five years from the pass date to complete the application.' },
  ]},
  { id:'cat3', label:'The Training Program', faqs:[
    { id:'f7', q:'What is the difference between Self-Study and Live Virtual Class?',
      a:`Both cover the full ISACA CCP curriculum across all 6 domains. Self-Study (${PRICE_S}) provides 12-month on-demand access to course materials, study guide, and 170-question practice bank. The Live Virtual Class (${PRICE_V}) adds three days of live instructor-led instruction, real-time Q&A, group exercises, and the ISACA/PSI exam voucher.` },
    { id:'f8', q:'How long is the live virtual class and what platform is used?',
      a:'The live class runs three consecutive days, 9 AM – 5 PM Eastern Time (approx. 24 instruction hours), delivered via Zoom. Enrolled participants receive login details within 24 hours of enrollment.' },
    { id:'f9', q:'How long do I have access to course materials?',
      a:'All participants receive 12 months of rolling access from enrollment — including all domain content, the study guide, the practice bank, and any material updates released during your access period.' },
    { id:'f10', q:'Are CPE credits available?',
      a:'Yes. The Live Virtual Class qualifies for up to 24 CPE credits applicable toward CISSP, CISM, CISA, and Security+. ISACA requires 20 CPE hours annually and 120 hours over the 3-year CCP maintenance cycle. CPE documentation is issued on request.' },
  ]},
  { id:'cat4', label:'The ISACA CCP Examination', faqs:[
    { id:'f11', q:'Is the ISACA exam voucher included?',
      a:`The ISACA/PSI exam voucher is included in the Live Virtual Class (${PRICE_V}). Self-Study enrollees (${PRICE_S}) purchase exam registration directly through ISACA. Verify current pricing at isaca.org/credentialing/ccp.` },
    { id:'f12', q:'What is the format of the CCP examination?',
      a:'The ISACA CCP exam consists of 170 multiple-choice and scenario-based questions across 6 job practice domains. It uses scaled scoring (200–800) with a passing score of 450. Exams are administered at PSI testing centers worldwide and via remote online proctoring. Candidates have six months from registration to sit the exam.' },
    { id:'f13', q:"What if I don't pass on my first attempt?",
      a:'You may retake the exam after the ISACA-specified waiting period with a separate registration fee. Your 12-month access to all course materials and the 170-question practice bank remains fully available for retake preparation.' },
  ]},
  { id:'cat5', label:'Logistics & Payment', faqs:[
    { id:'f15', q:'What is the refund and cancellation policy?',
      a:'We offer a 30-day satisfaction guarantee. For live class participants, cancellations more than 14 days before the session start date receive a full refund or complimentary transfer. Cancellations within 14 days may transfer to a future session or receive a 50% refund.' },
    { id:'f16', q:'Do you offer group or team pricing?',
      a:'Yes. Volume discounts are available for three or more participants. Contact training@verigoglobal.com with your participant count and preferred session dates for a custom quote.' },
    { id:'f17', q:'Can my organization pay by invoice or purchase order?',
      a:'Yes. Contact training@verigoglobal.com before enrolling. We issue invoices with Net 30 terms for qualifying organizations.' },
  ]},
];

/* ── HELPERS ─────────────────────────────────────────────── */
const ChkIcon = ({ color = TPURPLE }) => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" style={{ flexShrink:0, marginTop:2 }}>
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

/* ── BOOKING MODAL ───────────────────────────────────────── */
const TrainingBookingModal = ({ onClose, selectedOption, selectedDate }) => {
  const [step, setStep] = React.useState('register');
  const [form, setForm] = React.useState({ firstName:'', lastName:'', email:'', company:'', jobTitle:'' });
  const [payError, setPayError] = React.useState('');
  const isSelf = selectedOption === 'self-study';
  const price = isSelf ? PRICE_S : PRICE_V;
  const dateLabel = TP_DATES.find(d => d.id === selectedDate)?.label || '';
  const summary = isSelf ? 'Self-Study' : `Live Virtual — ${dateLabel}`;
  const set = k => e => setForm(f => ({ ...f, [k]:e.target.value }));
  const iSt = { width:'100%', padding:'10px 12px', border:'1px solid #dcdce8', borderRadius:8, fontSize:14, color:'#0a0a0a', background:'#fff', fontFamily:TFONT, boxSizing:'border-box' };
  const lSt = { fontSize:12, fontWeight:600, color:'#3a3a4a', display:'block', marginBottom:5 };
  return (
    <div onClick={e => { if (e.target===e.currentTarget) onClose(); }}
      style={{ position:'fixed', inset:0, background:'rgba(10,10,10,0.72)', zIndex:1000, display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
      <div style={{ background:'#fff', borderRadius:16, width:'100%', maxWidth:500, maxHeight:'90vh', overflowY:'auto', boxShadow:'0 24px 80px rgba(0,0,0,0.35)' }}>
        <div style={{ padding:'22px 28px 16px', borderBottom:'1px solid #ededf5', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12 }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#7a7a8a', marginBottom:3 }}>
              {step==='register'?'Step 1 of 2 — Details':step==='payment'?'Step 2 of 2 — Payment':'Enrollment Confirmed'}
            </div>
            <h3 style={{ fontSize:18, fontWeight:700, color:'#0a0a0a', margin:0 }}>
              {step==='register'?'Complete Your Enrollment':step==='payment'?'Payment Details':"You're Enrolled"}
            </h3>
          </div>
          <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', color:'#9a9aaa', padding:4 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div style={{ padding:'20px 28px 28px' }}>
          {step!=='confirm' && (
            <div style={{ background:'#f5f5f7', borderRadius:9, padding:'12px 16px', marginBottom:18, display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
              <div>
                <div style={{ fontSize:13, fontWeight:600, color:'#0a0a0a' }}>{summary}</div>
                <div style={{ fontSize:11, color:'#7a7a8a', marginTop:2 }}>Certified CMMC Professional Training</div>
              </div>
              <div style={{ fontSize:17, fontWeight:800, color:TPURPLE, flexShrink:0 }}>{price}</div>
            </div>
          )}
          {step==='register' && (
            <>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:12 }}>
                <div><label style={lSt}>First Name</label><input style={iSt} placeholder="Jane" value={form.firstName} onChange={set('firstName')} /></div>
                <div><label style={lSt}>Last Name</label><input style={iSt} placeholder="Smith" value={form.lastName} onChange={set('lastName')} /></div>
              </div>
              <div style={{ marginBottom:12 }}><label style={lSt}>Work Email</label><input type="email" style={iSt} placeholder="jane@company.com" value={form.email} onChange={set('email')} /></div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:20 }}>
                <div><label style={lSt}>Organization</label><input style={iSt} placeholder="Acme Defense LLC" value={form.company} onChange={set('company')} /></div>
                <div><label style={lSt}>Job Title</label><input style={iSt} placeholder="IT Security Manager" value={form.jobTitle} onChange={set('jobTitle')} /></div>
              </div>
              <button onClick={() => setStep('payment')} style={{ width:'100%', fontFamily:TFONT, fontSize:15, fontWeight:700, padding:14, borderRadius:9, cursor:'pointer', background:TPURPLE, color:'#fff', border:'none' }}>Continue to Payment</button>
            </>
          )}
          {step==='payment' && (
            <>
              <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:16, fontSize:12, color:'#7a7a8a' }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                Paid securely via PayPal — no card details are stored on this site.
              </div>
              {payError && <p style={{ fontSize:12.5, color:'#D93B3B', background:'#FDEAEA', border:'1px solid #F5C2C2', borderRadius:8, padding:'9px 12px', margin:'0 0 14px' }}>{payError}</p>}
              <window.PayPalCheckout
                itemType="training"
                itemKey={isSelf ? 'self-study' : 'live-virtual'}
                customer={{ name: `${form.firstName} ${form.lastName}`.trim(), email: form.email, company: form.company }}
                disabled={!form.firstName || !form.email}
                disabledReason="Go back and fill in your name and email to pay."
                onSuccess={() => setStep('confirm')}
                onError={() => setPayError('Payment could not be completed. Please try again.')}
              />
            </>
          )}
          {step==='confirm' && (
            <div style={{ textAlign:'center', padding:'8px 0 4px' }}>
              <div style={{ width:56, height:56, borderRadius:'50%', background:'#e6f7ef', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1a9e5a" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <h3 style={{ fontSize:20, fontWeight:800, color:'#0a0a0a', margin:'0 0 8px' }}>Enrollment Confirmed</h3>
              <p style={{ fontSize:14, color:'#5a5a6a', lineHeight:1.65, margin:'0 0 20px' }}>A confirmation has been sent to <strong style={{ color:'#0a0a0a' }}>{form.email||'your email'}</strong>. Access instructions will arrive within one business day.</p>
              <button onClick={onClose} style={{ fontFamily:TFONT, fontSize:14, fontWeight:600, padding:'10px 26px', borderRadius:8, cursor:'pointer', background:'#f5f5f7', color:'#0a0a0a', border:'1px solid #dcdce8' }}>Back to Course Page</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

/* ── MAIN PAGE ───────────────────────────────────────────── */
const TrainingPage = ({ onNav }) => {
  const [sel, setSel] = React.useState(null);
  const [date, setDate] = React.useState(null);
  const [openD, setOpenD] = React.useState(new Set(['dom1']));
  const [openF, setOpenF] = React.useState(new Set());
  const [modal, setModal] = React.useState(false);
  const [brochureModal, setBrochureModal] = React.useState(false);
  const [intDone, setIntDone] = React.useState(false);
  const [intF, setIntF] = React.useState({ name:'', email:'', company:'', mode:'', message:'' });

  const isSelf = sel==='self-study', isLive = sel==='live-class';
  const canBook = isSelf || (isLive && !!date);
  const scrollTo = id => { const el=document.getElementById(id); if(el) window.scrollTo({ top:el.getBoundingClientRect().top+window.pageYOffset-72, behavior:'smooth' }); };
  const togD = id => setOpenD(s=>{ const n=new Set(s); n.has(id)?n.delete(id):n.add(id); return n; });
  const togF = id => setOpenF(s=>{ const n=new Set(s); n.has(id)?n.delete(id):n.add(id); return n; });
  const setIF = k => e => setIntF(f=>({ ...f, [k]:e.target.value }));

  const SEC = { maxWidth:1280, margin:'0 auto', padding:'0 32px' };
  const OL  = { fontSize:12, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:TORANGE, marginBottom:10, fontFamily:TFONT };
  const H2s = { fontSize:36, fontWeight:800, color:'#0a0a0a', margin:'0 0 10px', fontFamily:TFONT, letterSpacing:'-0.02em' };

  const bookLabel = !sel ? 'Choose a learning path above'
    : isSelf ? `Enroll Now — ${PRICE_S}`
    : !date  ? 'Select a session date to continue'
    : `Enroll Now — ${PRICE_V}`;

  return (
    <div style={{ fontFamily:TFONT }}>

      {/* ── HERO ── */}
      <section style={{ background:TDARK, padding:'80px 0 68px', position:'relative', overflow:'hidden' }}>
        <svg style={{ position:'absolute', top:0, right:0, width:'46%', height:'100%', pointerEvents:'none', opacity:0.055 }} viewBox="0 0 600 520" fill="none" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          {[100,200,300,400].map(y=><line key={y} x1="0" y1={y} x2="600" y2={y} stroke="#9aa0f5" strokeWidth="1"/>)}
          {[100,200,300,400,500].map(x=><line key={x} x1={x} y1="0" x2={x} y2="520" stroke="#9aa0f5" strokeWidth="1"/>)}
          <path d="M370 60 L490 115 L490 255 C490 348 370 418 370 418 C370 418 250 348 250 255 L250 115 Z" stroke="#6e72e8" strokeWidth="2" fill="none"/>
          <circle cx="370" cy="240" r="58" stroke="#6e72e8" strokeWidth="1.5" fill="none" opacity="0.8"/>
          <circle cx="370" cy="240" r="7" fill="#e8622a"/>
        </svg>
        <div style={{ ...SEC, position:'relative', zIndex:1 }}>
          <div style={{ display:'flex', gap:9, alignItems:'center', marginBottom:22, flexWrap:'wrap' }}>
            {[
              ['CMMC Training', TORANGE, 'rgba(232,98,42,0.14)', 'rgba(232,98,42,0.3)'],
              ['Authorized ATP', 'rgba(255,255,255,0.45)', 'rgba(255,255,255,0.07)', 'rgba(255,255,255,0.14)'],
              ['ISACA Exam Prep', 'rgba(255,255,255,0.45)', 'rgba(255,255,255,0.07)', 'rgba(255,255,255,0.14)'],
            ].map(([l,c,bg,brd])=>(
              <span key={l} style={{ fontSize:10, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:c, background:bg, border:`1px solid ${brd}`, padding:'4px 12px', borderRadius:9999 }}>{l}</span>
            ))}
          </div>
          <h1 className="vg-hero-title" style={{ fontSize:64, fontWeight:800, lineHeight:1.05, letterSpacing:'-0.03em', color:'#fff', margin:'0 0 20px', maxWidth:860 }}>
            Certified CMMC<br/><span style={{ color:'#6E72E8' }}>Professional</span> (CCP™)<br/>Training Program
          </h1>
          <p style={{ fontSize:17, color:'rgba(255,255,255,0.58)', lineHeight:1.65, margin:'0 0 34px', maxWidth:520 }}>
            Prepare for the ISACA CCP™ exam — 170 questions across 6 domains — with expert-led instruction in CMMC 2.0, NIST SP 800-171, and the full assessment lifecycle.
          </p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginBottom:40 }}>
            <button onClick={()=>scrollTo('tp-options')} style={{ fontFamily:TFONT, fontSize:14, fontWeight:700, padding:'13px 28px', borderRadius:7, cursor:'pointer', background:TPURPLE, color:'#fff', border:'none' }}>Enroll Now</button>
            <button onClick={()=>setBrochureModal(true)} style={{ fontFamily:TFONT, fontSize:14, fontWeight:600, padding:'12px 24px', borderRadius:7, cursor:'pointer', background:'transparent', color:'rgba(255,255,255,0.88)', border:'1.5px solid rgba(255,255,255,0.2)', display:'flex', alignItems:'center', gap:7 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Download Brochure
            </button>
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:22 }}>
            {['6 ISACA exam domains','Virtual & self-study options','Exam voucher included (virtual)','170-question practice bank'].map(t=>(
              <div key={t} style={{ display:'flex', alignItems:'center', gap:7, fontSize:13, color:'rgba(255,255,255,0.44)' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6e72e8" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>{t}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── ISACA BADGE BAR ── */}
      <div style={{ background:'#f0f0f8', borderBottom:'1px solid #dcdce8', padding:'12px 0' }}>
        <div style={{ ...SEC, display:'flex', alignItems:'center', gap:20, flexWrap:'wrap', justifyContent:'space-between' }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <div style={{ background:'#0e3f7e', borderRadius:5, padding:'5px 12px' }}>
              <span style={{ fontSize:12, fontWeight:800, color:'#fff', letterSpacing:'0.06em' }}>ISACA</span>
            </div>
            <span style={{ fontSize:13, color:'#3a3a4a', fontWeight:500 }}>Exam administered by ISACA as CAICO — the official CMMC credentialing authority since April 2026</span>
          </div>
          <a href="https://www.isaca.org/credentialing/ccp" target="_blank" rel="noopener noreferrer"
            style={{ fontSize:12, color:TPURPLE, fontWeight:600, display:'flex', alignItems:'center', gap:5, textDecoration:'none' }}>
            isaca.org/credentialing/ccp
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          </a>
        </div>
      </div>

      {/* ── COURSE OPTIONS ── */}
      <section id="tp-options" style={{ background:'#f5f5f7', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ textAlign:'center', marginBottom:40 }}>
            <div style={OL}>Choose Your Path</div>
            <h2 style={H2s}>Two Ways to Prepare</h2>
            <p style={{ fontSize:15, color:'#5a5a6a', maxWidth:420, margin:'0 auto', lineHeight:1.6 }}>Both options cover the full ISACA CCP curriculum. Choose the format that fits your schedule.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, maxWidth:840, margin:'0 auto 28px' }}>
            {/* Self-Study Card */}
            <div onClick={()=>setSel('self-study')} style={{ background:isSelf?'#ebebfa':'#fff', border:isSelf?`2px solid ${TPURPLE}`:'1px solid #dcdce8', borderRadius:11, padding:'26px 24px', cursor:'pointer' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14 }}>
                <div>
                  <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'#7a7a8a', marginBottom:5 }}>Self-Study</div>
                  <div style={{ fontSize:28, fontWeight:800, color:'#0a0a0a', letterSpacing:'-0.02em' }}>{PRICE_S}</div>
                </div>
                <div style={{ width:40, height:40, borderRadius:8, background:'#ebebfa', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="1.8"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
                </div>
              </div>
              <p style={{ fontSize:13, color:'#5a5a6a', lineHeight:1.6, margin:'0 0 14px' }}>On-demand access to all materials. Study at your own pace, on your schedule.</p>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {['12-month rolling materials access','170-question practice exam bank','All 6 domain study guides','Assessment templates & checklists'].map(t=>(
                  <div key={t} style={{ display:'flex', alignItems:'flex-start', gap:8, fontSize:13, color:'#3a3a4a' }}><ChkIcon/>{t}</div>
                ))}
              </div>
            </div>
            {/* Live Virtual Card */}
            <div onClick={()=>setSel('live-class')} style={{ background:isLive?'#ebebfa':'#fff', border:isLive?`2px solid ${TPURPLE}`:'1px solid #dcdce8', borderRadius:11, padding:'26px 24px', cursor:'pointer', position:'relative' }}>
              <div style={{ position:'absolute', top:-1, left:'50%', transform:'translateX(-50%)', background:TPURPLE, color:'#fff', fontSize:9, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', padding:'3px 12px', borderRadius:'0 0 7px 7px', whiteSpace:'nowrap' }}>Most Popular</div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14, marginTop:12 }}>
                <div>
                  <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'#7a7a8a', marginBottom:5 }}>Live Virtual Class</div>
                  <div style={{ fontSize:28, fontWeight:800, color:'#0a0a0a', letterSpacing:'-0.02em' }}>{PRICE_V}</div>
                </div>
                <div style={{ width:40, height:40, borderRadius:8, background:'#ebebfa', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="1.8"><path d="M15 10l4.553-2.069A1 1 0 0121 8.82v6.36a1 1 0 01-1.447.889L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-4 4v8a2 2 0 002 2z"/></svg>
                </div>
              </div>
              <p style={{ fontSize:13, color:'#5a5a6a', lineHeight:1.6, margin:'0 0 14px' }}>Instructor-led 3-day virtual training. All self-study materials, plus:</p>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {['All self-study materials included','ISACA/PSI exam voucher included','Live instructor Q&A — all 3 days','Group exercises & case studies'].map(t=>(
                  <div key={t} style={{ display:'flex', alignItems:'flex-start', gap:8, fontSize:13, color:'#3a3a4a' }}><ChkIcon color={TORANGE}/>{t}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Date picker */}
          {isLive && (
            <div style={{ maxWidth:840, margin:'0 auto 26px' }}>
              <div style={{ background:'#fff', borderRadius:11, border:'1px solid #dcdce8', padding:'22px 22px 18px' }}>
                <h3 style={{ fontSize:15, fontWeight:700, color:'#0a0a0a', margin:'0 0 3px' }}>Select a Session</h3>
                <p style={{ fontSize:12, color:'#7a7a8a', margin:'0 0 16px' }}>All sessions run 9 AM – 5 PM Eastern Time via Zoom. Up to 24 CPE credits available.</p>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:9 }}>
                  {TP_DATES.map(d=>(
                    <div key={d.id} onClick={()=>setDate(d.id)} style={{ background:d.id===date?'#ebebfa':'#fff', border:d.id===date?`2px solid ${TPURPLE}`:'1px solid #dcdce8', borderRadius:8, padding:'13px 15px', cursor:'pointer' }}>
                      <div style={{ fontSize:13, fontWeight:700, color:'#0a0a0a', marginBottom:2 }}>{d.label}</div>
                      <div style={{ fontSize:11, color:'#7a7a8a', marginBottom:8 }}>{d.sub}</div>
                      <span style={{ display:'inline-flex', alignItems:'center', gap:4, padding:'2px 8px', borderRadius:9999, fontSize:10, fontWeight:600, background:d.seats<=5?'#fdeaea':'#f0f0f5', color:d.seats<=5?'#d93b3b':'#5a5a6a' }}>
                        {d.seats<=5?`${d.seats} seats left`:`${d.seats} available`}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          <div style={{ textAlign:'center', maxWidth:840, margin:'0 auto' }}>
            <button onClick={()=>canBook&&setModal(true)} style={{ fontFamily:TFONT, fontSize:15, fontWeight:700, padding:'13px 40px', borderRadius:9, cursor:canBook?'pointer':'default', background:canBook?TPURPLE:'#c0c0cc', color:'#fff', border:'none', opacity:canBook?1:0.55 }}>{bookLabel}</button>
            <div style={{ fontSize:12, color:'#9a9aaa', marginTop:9 }}>30-day satisfaction guarantee · Secure checkout</div>
          </div>
        </div>
      </section>

      {/* ── ABOUT ── */}
      <section style={{ background:'#fff', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center' }}>
            <div>
              <div style={OL}>About the Program</div>
              <h2 style={{ ...H2s, fontSize:34, lineHeight:1.15 }}>Definitive CCP Exam Preparation</h2>
              <p style={{ fontSize:15, color:'#5a5a6a', lineHeight:1.7, margin:'0 0 12px' }}>The CMMC Certified Professional (CCP™) is the foundational credential for professionals entering the CMMC assessment ecosystem — now fully administered by ISACA as the official CAICO since April 2026.</p>
              <p style={{ fontSize:15, color:'#5a5a6a', lineHeight:1.7, margin:'0 0 26px' }}>This program aligns to the official ISACA exam content outline: all six job practice domains, NIST SP 800-171 control mapping, assessment methodology, scoping, and the full DIB regulatory context.</p>
              <div style={{ display:'flex', gap:28 }}>
                {[['6','ISACA domains'],['170','Exam questions'],['24h','Instruction']].map(([v,l])=>(
                  <div key={l}>
                    <div style={{ fontSize:34, fontWeight:800, color:TPURPLE, letterSpacing:'-0.03em', lineHeight:1 }}>{v}</div>
                    <div style={{ fontSize:12, color:'#7a7a8a', marginTop:4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background:'#f5f5f7', borderRadius:12, padding:26 }}>
              <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'#7a7a8a', marginBottom:13 }}>Frameworks & Standards Covered</div>
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {[
                  ['CMMC','CMMC 2.0','DoD Cybersecurity Maturity Model Certification',TPURPLE,'#ebebfa'],
                  ['NIST','NIST SP 800-171 Rev 2','Protecting CUI in Non-Federal Systems',TPURPLE,'#ebebfa'],
                  ['FAR','FAR / DFARS Clauses','Federal Acquisition Regulations for DIB',TPURPLE,'#ebebfa'],
                  ['CUI','CUI Registry','NARA CUI categories and handling standards',TORANGE,'#fdf0ea'],
                  ['ISACA','ISACA CoPC','Professional conduct and ethics standards','#0e3f7e','#e8eef8'],
                ].map(([id,title,sub,color,bg])=>(
                  <div key={id} style={{ display:'flex', alignItems:'center', gap:11, padding:'11px 13px', background:'#fff', borderRadius:8, border:'1px solid #dcdce8' }}>
                    <div style={{ width:34, height:34, borderRadius:7, background:bg, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:800, color, textAlign:'center', lineHeight:1.1 }}>{id}</div>
                    <div>
                      <div style={{ fontSize:13, fontWeight:600, color:'#0a0a0a' }}>{title}</div>
                      <div style={{ fontSize:11, color:'#7a7a8a' }}>{sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── OBJECTIVES ── */}
      <section style={{ background:'#f5f5f7', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ textAlign:'center', marginBottom:38 }}>
            <div style={OL}>Learning Objectives</div>
            <h2 style={H2s}>What You Will Be Able To Do</h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9, maxWidth:1020, margin:'0 auto' }}>
            {TP_OBJECTIVES.map((text,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:13, background:'#fff', border:'1px solid #dcdce8', borderRadius:9, padding:'14px 17px' }}>
                <span style={{ fontSize:18, fontWeight:800, color:'#dcdce8', flexShrink:0, lineHeight:1.25, letterSpacing:'-0.02em', minWidth:26 }}>{String(i+1).padStart(2,'0')}</span>
                <span style={{ fontSize:13.5, color:'#3a3a4a', lineHeight:1.6 }}>{text}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 6 DOMAINS ── */}
      <section style={{ background:'#fff', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ display:'grid', gridTemplateColumns:'260px 1fr', gap:60, alignItems:'flex-start' }}>
            <div style={{ position:'sticky', top:88 }}>
              <div style={OL}>Exam Coverage</div>
              <h2 style={{ ...H2s, fontSize:32, lineHeight:1.15, margin:'0 0 10px' }}>6 ISACA Domains</h2>
              <p style={{ fontSize:13, color:'#7a7a8a', lineHeight:1.65, margin:'0 0 14px' }}>Every topic tested on the ISACA CCP exam — aligned to the official exam content outline.</p>
              <div style={{ display:'flex', alignItems:'center', gap:5, fontSize:12, color:'#5a5a6a' }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                Click any domain to expand
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {TP_DOMAINS.map(m=>{
                const open=openD.has(m.id);
                return (
                  <div key={m.id} style={{ border:'1px solid #dcdce8', borderRadius:9, overflow:'hidden' }}>
                    <button onClick={()=>togD(m.id)} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'15px 20px', background:'#fff', border:'none', cursor:'pointer', textAlign:'left', fontFamily:TFONT }}>
                      <div style={{ display:'flex', alignItems:'center', gap:11 }}>
                        <span style={{ fontSize:10, fontWeight:700, color:TPURPLE, letterSpacing:'0.08em', flexShrink:0, fontFamily:TMONO }}>{m.num}</span>
                        <span style={{ fontSize:14, fontWeight:600, color:'#0a0a0a', lineHeight:1.3 }}>{m.title}</span>
                      </div>
                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={open?TPURPLE:'#9a9aaa'} strokeWidth="2" style={{ flexShrink:0 }}>
                        {open?<polyline points="18 15 12 9 6 15"/>:<polyline points="6 9 12 15 18 9"/>}
                      </svg>
                    </button>
                    {open && (
                      <div style={{ borderTop:'1px solid #ededf5', background:'#fafafa', padding:'3px 20px 16px' }}>
                        {m.items.map((item,j)=>(
                          <div key={j} style={{ display:'flex', alignItems:'flex-start', gap:8, padding:'9px 0', borderBottom:j<m.items.length-1?'1px solid #ededf5':'none' }}>
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="2.5" style={{ flexShrink:0, marginTop:3 }}><polyline points="20 6 9 17 4 12"/></svg>
                            <span style={{ fontSize:13, color:'#5a5a6a', lineHeight:1.55 }}>{item}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* ── AUDIENCE ── */}
      <section style={{ background:'#f5f5f7', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ textAlign:'center', marginBottom:38 }}>
            <div style={OL}>Who Should Attend</div>
            <h2 style={H2s}>Built for These Professionals</h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:13 }}>
            {TP_AUDIENCE.map(a=>(
              <div key={a.title} style={{ background:'#fff', border:'1px solid #dcdce8', borderRadius:9, padding:'20px 20px' }}>
                <div style={{ width:34, height:34, borderRadius:7, background:'#ebebfa', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:12 }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="1.8"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                <div style={{ fontSize:14, fontWeight:700, color:'#0a0a0a', marginBottom:6 }}>{a.title}</div>
                <div style={{ fontSize:12.5, color:'#7a7a8a', lineHeight:1.6 }}>{a.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── DELIVERABLES ── */}
      <section style={{ background:TDARK, padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ textAlign:'center', marginBottom:38 }}>
            <div style={OL}>What You Receive</div>
            <h2 style={{ ...H2s, color:'#fff', margin:'0 0 8px' }}>Course Deliverables</h2>
            <p style={{ fontSize:15, color:'rgba(255,255,255,0.42)', maxWidth:380, margin:'0 auto' }}>Everything needed to prepare, practice, and pass.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:11, maxWidth:940, margin:'0 auto 44px' }}>
            {TP_DELIVERABLES.map(t=>(
              <div key={t} style={{ display:'flex', alignItems:'flex-start', gap:10, background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:8, padding:'14px 16px' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6e72e8" strokeWidth="2.5" style={{ flexShrink:0, marginTop:2 }}><polyline points="20 6 9 17 4 12"/></svg>
                <span style={{ fontSize:12.5, fontWeight:500, color:'rgba(255,255,255,0.78)', lineHeight:1.55 }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ textAlign:'center' }}>
            <button onClick={()=>scrollTo('tp-options')} style={{ fontFamily:TFONT, fontSize:14, fontWeight:700, padding:'13px 38px', borderRadius:8, cursor:'pointer', background:TPURPLE, color:'#fff', border:'none', marginBottom:11 }}>Choose Your Learning Path</button>
            <div style={{ fontSize:12, color:'rgba(255,255,255,0.28)' }}>Questions? training@verigoglobal.com</div>
          </div>
        </div>
      </section>

      {/* ── INTEREST FORM ── */}
      <section id="tp-interest" style={{ background:'#fff', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'center', maxWidth:1040, margin:'0 auto' }}>
            <div>
              <div style={OL}>Get Started</div>
              <h2 style={{ ...H2s, fontSize:34, lineHeight:1.15 }}>Register Your Interest</h2>
              <p style={{ fontSize:15, color:'#5a5a6a', lineHeight:1.7, margin:'0 0 22px' }}>Not ready to enroll today? Share your details and a training advisor will reach out — no commitment required.</p>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                {[
                  ['No commitment required','We follow up on your timeline, not ours'],
                  ['Group & team pricing','Discounts available for 3 or more participants'],
                  ['Custom private cohorts','Available for organizations of 8 or more'],
                ].map(([t,d])=>(
                  <div key={t} style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
                    <div style={{ width:20, height:20, borderRadius:4, background:'#ebebfa', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={TPURPLE} strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div>
                      <div style={{ fontSize:14, fontWeight:600, color:'#0a0a0a' }}>{t}</div>
                      <div style={{ fontSize:12.5, color:'#7a7a8a', marginTop:2 }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              {intDone ? (
                <div style={{ background:'#f5f5f7', borderRadius:12, padding:36, textAlign:'center', border:'1px solid #dcdce8' }}>
                  <div style={{ width:52, height:52, borderRadius:'50%', background:'#e6f7ef', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px' }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1a9e5a" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <h3 style={{ fontSize:18, fontWeight:800, color:'#0a0a0a', margin:'0 0 8px' }}>Thank You</h3>
                  <p style={{ fontSize:14, color:'#5a5a6a', lineHeight:1.65, margin:0 }}>A Verigo training advisor will be in touch within one business day.</p>
                </div>
              ) : (
                <div style={{ background:'#f5f5f7', borderRadius:12, border:'1px solid #dcdce8', padding:'26px 26px 22px' }}>
                  <h3 style={{ fontSize:15, fontWeight:700, color:'#0a0a0a', margin:'0 0 16px' }}>Tell us about yourself</h3>
                  {[
                    { key:'name', label:'Full name', type:'text', placeholder:'Jane Smith', half:true },
                    { key:'email', label:'Work email', type:'email', placeholder:'jane@company.com', half:true },
                    { key:'company', label:'Organization', type:'text', placeholder:'Acme Defense LLC', half:true },
                  ].reduce((acc,f,i,arr)=>{
                    // pair up half-width inputs
                    if(f.half && arr[i+1]?.half) {
                      if(i%2===0) acc.push(
                        <div key={f.key} style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                          {[arr[i],arr[i+1]].map(ff=>(
                            <div key={ff.key}>
                              <label style={{ fontSize:11.5, fontWeight:600, color:'#3a3a4a', display:'block', marginBottom:5 }}>{ff.label}</label>
                              <input type={ff.type} value={intF[ff.key]} onChange={setIF(ff.key)} placeholder={ff.placeholder}
                                style={{ width:'100%', padding:'9px 11px', border:'1px solid #dcdce8', borderRadius:7, fontSize:13, fontFamily:TFONT, color:'#0a0a0a', background:'#fff', boxSizing:'border-box' }} />
                            </div>
                          ))}
                        </div>
                      );
                    } else if(!f.half || i%2===0) {
                      acc.push(
                        <div key={f.key}>
                          <label style={{ fontSize:11.5, fontWeight:600, color:'#3a3a4a', display:'block', marginBottom:5 }}>{f.label}</label>
                          <input type={f.type} value={intF[f.key]} onChange={setIF(f.key)} placeholder={f.placeholder}
                            style={{ width:'100%', padding:'9px 11px', border:'1px solid #dcdce8', borderRadius:7, fontSize:13, fontFamily:TFONT, color:'#0a0a0a', background:'#fff', boxSizing:'border-box' }} />
                        </div>
                      );
                    }
                    return acc;
                  }, [])}
                  <div style={{ display:'flex', flexDirection:'column', gap:11, marginTop:4 }}>
                    <div>
                      <label style={{ fontSize:11.5, fontWeight:600, color:'#3a3a4a', display:'block', marginBottom:5 }}>Preferred mode</label>
                      <select value={intF.mode} onChange={setIF('mode')} style={{ width:'100%', padding:'9px 11px', border:'1px solid #dcdce8', borderRadius:7, fontSize:13, fontFamily:TFONT, color:'#0a0a0a', background:'#fff' }}>
                        <option value="">Select...</option>
                        <option value="virtual">Live Virtual Class — {PRICE_V}</option>
                        <option value="self">Self-Study — {PRICE_S}</option>
                        <option value="unsure">Not sure yet</option>
                      </select>
                    </div>
                    <div>
                      <label style={{ fontSize:11.5, fontWeight:600, color:'#3a3a4a', display:'block', marginBottom:5 }}>Message (optional)</label>
                      <textarea value={intF.message} onChange={setIF('message')} placeholder="Questions, timeline, team size..." rows={3}
                        style={{ width:'100%', padding:'9px 11px', border:'1px solid #dcdce8', borderRadius:7, fontSize:13, fontFamily:TFONT, color:'#0a0a0a', background:'#fff', resize:'vertical', boxSizing:'border-box' }} />
                    </div>
                    <button onClick={()=>{ if(intF.name&&intF.email) setIntDone(true); }}
                      style={{ fontFamily:TFONT, fontSize:14, fontWeight:700, padding:'12px', borderRadius:7, cursor:'pointer', background:TPURPLE, color:'#fff', border:'none', width:'100%' }}>
                      Send My Details →
                    </button>
                    <p style={{ fontSize:11, color:'#9a9aaa', margin:0, textAlign:'center', lineHeight:1.5 }}>No spam. Your details are used only to follow up about training.</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section style={{ background:'#f5f5f7', padding:'64px 0' }}>
        <div style={SEC}>
          <div style={{ textAlign:'center', marginBottom:44 }}>
            <div style={OL}>FAQ</div>
            <h2 style={H2s}>Frequently Asked Questions</h2>
            <p style={{ fontSize:15, color:'#5a5a6a', maxWidth:440, margin:'0 auto', lineHeight:1.65 }}>Everything you need to know before enrolling.</p>
          </div>
          <div style={{ maxWidth:800, margin:'0 auto' }}>
            {TP_FAQ_CATS.map(cat=>(
              <div key={cat.id} style={{ marginBottom:36 }}>
                <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:TPURPLE, paddingBottom:9, borderBottom:`2px solid #ebebfa`, marginBottom:2 }}>{cat.label}</div>
                {cat.faqs.map(faq=>{
                  const open=openF.has(faq.id);
                  return (
                    <div key={faq.id} style={{ borderBottom:'1px solid #dcdce8' }}>
                      <button onClick={()=>togF(faq.id)} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'14px 0', background:'transparent', border:'none', cursor:'pointer', textAlign:'left', fontFamily:TFONT }}>
                        <span style={{ fontSize:14, fontWeight:600, color:'#0a0a0a', lineHeight:1.4 }}>{faq.q}</span>
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={open?TPURPLE:'#9a9aaa'} strokeWidth="2" style={{ flexShrink:0 }}>
                          {open?<polyline points="18 15 12 9 6 15"/>:<polyline points="6 9 12 15 18 9"/>}
                        </svg>
                      </button>
                      {open && <div style={{ paddingBottom:16 }}><p style={{ fontSize:13.5, color:'#5a5a6a', lineHeight:1.75, margin:0 }}>{faq.a}</p></div>}
                    </div>
                  );
                })}
              </div>
            ))}
            <div style={{ marginTop:6, padding:'22px 26px', background:'#fff', border:'1px solid #dcdce8', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'space-between', gap:14, flexWrap:'wrap' }}>
              <p style={{ fontSize:14, color:'#5a5a6a', margin:0 }}>Still have questions? We are here to help.</p>
              <a href="mailto:training@verigoglobal.com" style={{ fontFamily:TFONT, fontSize:13, fontWeight:700, padding:'10px 22px', borderRadius:7, background:TPURPLE, color:'#fff', display:'inline-block', textDecoration:'none' }}>training@verigoglobal.com</a>
            </div>
          </div>
        </div>
      </section>

      {modal && <TrainingBookingModal onClose={()=>setModal(false)} selectedOption={sel} selectedDate={date} />}
      {brochureModal && (
        <window.LeadCaptureModal
          icon="doc"
          eyebrow="CCP Training Program"
          heading="Download the Course Brochure"
          intro="Get the full program overview, pricing, ISACA exam details, and curriculum in one document."
          cta="Download Brochure"
          onClose={()=>setBrochureModal(false)}
          onSubmit={(form)=>{
            window.submitInquiry && window.submitInquiry({
              form_type: 'training-brochure',
              name: form.name, email: form.email, company: form.company, phone: form.phone,
              framework: 'CCP Training',
            });
            setBrochureModal(false);
            window.open('CCP Brochure.html','_blank');
          }}
        />
      )}
    </div>
  );
};

Object.assign(window, { TrainingPage });
