// toolkit-iso27001-extras.jsx — Verigo Global: ISO 27001 toolkit pricing, purchase CTAs, evaluation promo
const { V: XV, MAXW: XMW, FONT: XFT } = window;

/* ── PRICING ─────────────────────────────────────────────── */
const TPricing = ({ onNav }) => {
  const TIERS = window.TK_ISO.TIERS;
  const fmt = window.TK_ISO.fmtPrice;
  return (
    <section id="pricing" style={{ background: '#fff', padding: '84px 0', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: XMW, 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 ${XV.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 ? XV.g50 : '#fff', borderLeft: i ? `1px solid ${XV.g200}` : 'none', outline: pop ? `2px solid ${XV.purple}` : 'none', outlineOffset: -1, zIndex: pop ? 2 : 1 }}>
                {pop && (
                  <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%,-50%)', background: XV.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 ? XV.purple : XV.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: XV.g400 }}>{t.priceNote}</span>}
                  <span style={{ fontSize: 42, fontWeight: 800, color: XV.black, letterSpacing: '-0.03em', fontFamily: XFT, lineHeight: 1 }}>{fmt(t.price)}</span>
                </div>
                <p style={{ fontSize: 14, color: XV.g600, lineHeight: 1.5, margin: '0 0 4px', minHeight: 42 }}>{t.tagline}</p>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: XV.g400, paddingBottom: 20, marginBottom: 20, borderBottom: `1px solid ${XV.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: XV.g700, lineHeight: 1.45 }}>
                      <span style={{ color: XV.purple, flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={16} color={XV.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' : XV.purple} />
                  </window.Btn>
                </div>
              </div>
            );
          })}
        </div>
        <p style={{ textAlign: 'center', fontSize: 13, color: XV.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 TActionBand = ({ onDownloadStandard, onNav }) => {
  const card = { background: '#fff', border: `1px solid ${XV.g200}`, padding: '34px 32px', display: 'flex', flexDirection: 'column' };
  return (
    <window.Section bg={XV.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: XV.purpleSubtle, color: XV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <window.Icon name="doc" size={26} />
          </div>
          <h3 style={{ fontSize: 23, fontWeight: 800, color: XV.black, margin: '0 0 8px', fontFamily: XFT, letterSpacing: '-0.02em' }}>Take the standard package</h3>
          <p style={{ fontSize: 15, color: XV.g600, lineHeight: 1.6, margin: '0 0 24px', flex: 1 }}>
            Grab the complete, ready-made toolkit as-is — 137 documents across policies, procedures, and all 93 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: XV.orangeSubtle, color: XV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
            <window.Icon name="compass" size={26} />
          </div>
          <h3 style={{ fontSize: 23, fontWeight: 800, color: XV.black, margin: '0 0 8px', fontFamily: XFT, letterSpacing: '-0.02em' }}>Customize your package</h3>
          <p style={{ fontSize: 15, color: XV.g600, lineHeight: 1.6, margin: '0 0 24px', flex: 1 }}>
            Build exactly what your 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 TEvaluation = ({ onNav }) => {
  const steps = [
    ['target', 'Answer ~30 questions', 'Scoped to the ISO 27001 clauses and Annex A themes — about 10 minutes.'],
    ['gauge', 'Get your readiness score', 'An instant maturity score with a gap heat-map across all four control themes.'],
    ['flag', 'See your next steps', 'A prioritized action plan showing exactly which toolkit documents close each gap.'],
  ];
  return (
    <section style={{ position: 'relative', background: XV.purpleDark, overflow: 'hidden' }}>
      <window.GeoWatermark color={XV.orange} style={{ top: -40, right: 40, width: 360, height: 340, opacity: 0.18 }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: XMW, 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: XV.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: XFT }}>
              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 27001 readiness evaluation measures your current state against the standard 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: XV.orange }}>{String(i + 1).padStart(2, '0')}</span>
                    <h3 style={{ fontSize: 16.5, fontWeight: 700, color: '#fff', margin: 0, fontFamily: XFT, 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, { TPricing, TActionBand, TEvaluation });