// toolkit-iso42001-extras.jsx — Verigo Global: ISO 42001 toolkit pricing, purchase CTAs, evaluation promo
const { V: X2V, MAXW: X2MW, FONT: X2FT } = window;

/* ── PRICING ─────────────────────────────────────────────── */
const T2Pricing = ({ onNav }) => {
  const TIERS = window.TK_ISO42001.TIERS;
  const fmt = window.TK_ISO42001.fmtPrice;
  return (
    <section id="pricing" style={{ background: '#fff', padding: '84px 0', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: X2MW, margin: '0 auto', padding: '0 32px' }}>
        <window.SectionHeader overline="Packages" align="center"
          title="Buy the toolkit, or the whole journey"
          sub="Start with the ready-made document set and scale up to fully managed implementation. Every package is a fixed scope with a clear price — no surprises." maxSub={640} />
        <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${X2V.g200}`, alignItems: 'stretch' }}>
          {TIERS.map((t, i) => {
            const pop = !!t.popular;
            return (
              <div key={t.id} style={{ position: 'relative', display: 'flex', flexDirection: 'column', padding: '34px 30px 32px', background: pop ? X2V.g50 : '#fff', borderLeft: i ? `1px solid ${X2V.g200}` : 'none', outline: pop ? `2px solid ${X2V.purple}` : 'none', outlineOffset: -1, zIndex: pop ? 2 : 1 }}>
                {pop && (
                  <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%,-50%)', background: X2V.purple, color: '#fff', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 14px', whiteSpace: 'nowrap' }}>Most popular</div>
                )}
                <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: pop ? X2V.purple : X2V.g500 }}>{t.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '14px 0 4px' }}>
                  {t.priceNote && <span style={{ fontSize: 14, fontWeight: 600, color: X2V.g400 }}>{t.priceNote}</span>}
                  <span style={{ fontSize: 42, fontWeight: 800, color: X2V.black, letterSpacing: '-0.03em', fontFamily: X2FT, lineHeight: 1 }}>{fmt(t.price)}</span>
                </div>
                <p style={{ fontSize: 14, color: X2V.g600, lineHeight: 1.5, margin: '0 0 4px', minHeight: 42 }}>{t.tagline}</p>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: X2V.g400, paddingBottom: 20, marginBottom: 20, borderBottom: `1px solid ${X2V.g200}` }}>{t.forWho}</div>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11, flex: 1 }}>
                  {t.features.map((f, fi) => (
                    <li key={fi} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: X2V.g700, lineHeight: 1.45 }}>
                      <span style={{ color: X2V.purple, flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={16} color={X2V.purple} /></span>
                      {f}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 26 }}>
                  <window.Btn kind={pop ? 'primary' : 'ghostBrand'} onClick={() => onNav('checkout:' + t.id)} style={{ width: '100%', justifyContent: 'center' }}>
                    Choose {t.name} <window.Icon name="arrow" size={16} color={pop ? '#fff' : X2V.purple} />
                  </window.Btn>
                </div>
              </div>
            );
          })}
        </div>
        <p style={{ textAlign: 'center', fontSize: 13, color: X2V.g400, marginTop: 16 }}>
          Prices shown are indicative. Add implementation support, pre-audit prep, and more when you configure your package.
        </p>
      </div>
    </section>
  );
};

/* ── ACTION BAND — download standard / customize ─────────── */
const T2ActionBand = ({ onDownloadStandard, onNav }) => {
  const card = { background: '#fff', border: `1px solid ${X2V.g200}`, padding: '34px 32px', display: 'flex', flexDirection: 'column' };
  return (
    <window.Section bg={X2V.g50} pad="0 0 84px">
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div style={card}>
          <div style={{ width: 52, height: 52, background: X2V.purpleSubtle, color: X2V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <window.Icon name="doc" size={26} />
          </div>
          <h3 style={{ fontSize: 23, fontWeight: 800, color: X2V.black, margin: '0 0 8px', fontFamily: X2FT, letterSpacing: '-0.02em' }}>Take the standard package</h3>
          <p style={{ fontSize: 15, color: X2V.g600, lineHeight: 1.6, margin: '0 0 24px', flex: 1 }}>
            Grab the complete, ready-made toolkit as-is — 72 documents across policies, procedures, and all 38 Annex A controls. Download the full index now.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="primary" onClick={onDownloadStandard}><window.Icon name="arrow" size={16} color="#fff" /> Download standard package</window.Btn>
            <window.Btn kind="ghost" onClick={() => onNav('checkout:starter')}>Buy Starter</window.Btn>
          </div>
        </div>
        <div style={card}>
          <div style={{ width: 52, height: 52, background: X2V.orangeSubtle, color: X2V.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <window.Icon name="compass" size={26} />
          </div>
          <h3 style={{ fontSize: 23, fontWeight: 800, color: X2V.black, margin: '0 0 8px', fontFamily: X2FT, letterSpacing: '-0.02em' }}>Customize your package</h3>
          <p style={{ fontSize: 15, color: X2V.g600, lineHeight: 1.6, margin: '0 0 24px', flex: 1 }}>
            Build exactly what your AI program needs — start from any tier, then add implementation support, pre-audit prep, internal audit, and more. See your total update live.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="accent" onClick={() => onNav('checkout:professional')}>Customize package <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={() => onNav('contact')}>Talk to a practitioner</window.Btn>
          </div>
        </div>
      </div>
    </window.Section>
  );
};

/* ── ONLINE EVALUATION PROMO (provisioned) ───────────────── */
const T2Evaluation = ({ onNav }) => {
  const steps = [
    ['target', 'Answer ~28 questions', 'Scoped to the ISO 42001 clauses and Annex A objectives — about 10 minutes.'],
    ['gauge', 'Get your readiness score', 'An instant maturity score with a gap heat-map across your AI governance themes.'],
    ['flag', 'See your next steps', 'A prioritized action plan showing exactly which toolkit documents close each gap.'],
  ];
  return (
    <section style={{ position: 'relative', background: X2V.purpleDark, overflow: 'hidden' }}>
      <window.GeoWatermark color={X2V.orange} style={{ top: -40, right: 40, width: 360, height: 340, opacity: 0.18 }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: X2MW, margin: '0 auto', padding: '80px 32px' }}>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.12)', color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '6px 13px', marginBottom: 20 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: X2V.orange }}></span> Online evaluation · ~10 minutes
            </div>
            <h2 className="vg-section-title" style={{ fontSize: 40, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 16px', fontFamily: X2FT }}>
              Know where you stand before you start.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.66)', lineHeight: 1.65, margin: '0 0 28px', maxWidth: 520 }}>
              Our online ISO 42001 readiness evaluation measures your current AI governance maturity and maps every gap straight to the toolkit documents that close it. Get your score in about ten minutes.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <window.Btn kind="accent" onClick={() => onNav('evaluation')}>Start the evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
              <window.Btn kind="ghostLight" onClick={() => onNav('evaluation')}>See how it works</window.Btn>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {steps.map(([ic, t, d], i) => (
              <div key={i} style={{ display: 'flex', gap: 16, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', padding: '20px 22px' }}>
                <div style={{ width: 44, height: 44, background: 'rgba(255,255,255,0.1)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={22} color="#fff" />
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: X2V.orange }}>{String(i + 1).padStart(2, '0')}</span>
                    <h3 style={{ fontSize: 16.5, fontWeight: 700, color: '#fff', margin: 0, fontFamily: X2FT, letterSpacing: '-0.01em' }}>{t}</h3>
                  </div>
                  <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, margin: 0 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { T2Pricing, T2ActionBand, T2Evaluation });