const { useState } = React;

const PricingPage = ({ navigate }) => {
  const packages = () => [
    {
      num: '01', id: 'basic', name: S.pr_b_n,
      price: 'CHF 149', badge: null, hot: false, variant: 'secondary',
      who: S.pr_b_who, tagline: S.pr_b_tag,
      modules: ['SYSTEM_OVERVIEW.md', 'ARCHITECTURE_SKETCH.md', 'ARK_GAPS_REPORT.md'],
      notIncluded: [S.pr_cf_sec, S.pr_cf_data, S.pr_cf_run, S.pr_cf_emg],
      cta: S.pr_b_cta,
    },
    {
      num: '02', id: 'core', name: S.pr_c_n,
      price: 'CHF 349', badge: S.pr_c_badge, hot: true, variant: 'primary',
      who: S.pr_c_who, tagline: S.pr_c_tag,
      modules: ['SYSTEM_OVERVIEW.md', 'ARCHITECTURE_SKETCH.md', S.pr_cf_sec, S.pr_cf_data, 'ACCESS_AND_ROLES.md', 'BACKUP_RESTORE_PLAN.md', 'RELEASE_CHECKLIST.md', 'ARK_GAPS_REPORT.md'],
      notIncluded: [S.pr_cf_run, S.pr_cf_emg],
      cta: S.pr_c_cta,
    },
    {
      num: '03', id: 'plus', name: S.pr_p_n,
      price: 'CHF 549', badge: null, hot: false, variant: 'outline',
      who: S.pr_p_who, tagline: S.pr_p_tag,
      modules: ['All Core modules', S.pr_cf_run, S.pr_cf_emg, S.pr_cf_del],
      notIncluded: [],
      cta: S.pr_p_cta,
    },
  ];

  const comparison = () => [
    { feature: S.pr_cf_mods,         basic: '3',          core: '8',            plus: '12+' },
    { feature: S.pr_cf_sys,          basic: '\u2713',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_arch,         basic: '\u2713',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_sec,          basic: '\u2014',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_data,         basic: '\u2014',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_run,          basic: '\u2014',     core: '\u2014',       plus: '\u2713' },
    { feature: S.pr_cf_emg,          basic: '\u2014',     core: '\u2014',       plus: '\u2713' },
    { feature: S.pr_cf_gaps,         basic: '\u2713',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_del,          basic: 'on request', core: 'on request',   plus: '\u2713' },
    { feature: S.pr_cf_fmt,          basic: 'Markdown bundle', core: 'Markdown bundle', plus: 'Markdown bundle' },
    { feature: S.pr_cf_rev,          basic: '\u2713',     core: '\u2713',       plus: '\u2713' },
    { feature: S.pr_cf_pay,          basic: S.pr_pay_no,  core: S.pr_pay_no,    plus: S.pr_pay_no },
  ];

  return (
    <div>
      {/* Header */}
      <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 40px' }}>
          <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.accent, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>
            {S.pr_label}
          </div>
          <h1 style={{ fontFamily: T.sans, fontSize: 44, fontWeight: 700, color: T.text, letterSpacing: '-0.03em', margin: '0 0 16px', maxWidth: 620 }}>
            {S.pr_h1}
          </h1>
          <p style={{ fontFamily: T.sans, fontSize: 15.5, color: T.muted, lineHeight: 1.7, maxWidth: 560, margin: '0 0 20px' }}>
            {S.pr_sub}
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 5, background: T.warningSubtle, border: `1px solid ${T.warning}22`, fontFamily: T.mono, fontSize: 11, color: T.warning, letterSpacing: '0.04em' }}>
            {S.pr_pilot}
          </div>
        </div>
      </section>

      {/* Package cards */}
      <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 40px' }}>
          <div className="ark-pkg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'start' }}>
            {packages().map((pkg, i) => (
              <PkgCard key={i} pkg={pkg} navigate={navigate} />
            ))}
          </div>
          <div style={{ marginTop: 24, fontFamily: T.sans, fontSize: 12.5, color: T.dim, textAlign: 'center', lineHeight: 1.6 }}>
            {S.pr_all_note}
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 40px' }}>
          <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 24 }}>
            {S.pr_comp_label}
          </div>
          <div className="ark-table-scroll"><div style={{ border: `1px solid ${T.border}`, borderRadius: 10, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1.2fr 1fr', background: T.surfaceRaised, borderBottom: `1px solid ${T.border}` }}>              {[S.specs_col_feat || 'FEATURE', 'BASIC', 'CORE', 'PLUS'].map((h, i) => (
                <div key={i} style={{ padding: '12px 20px', fontFamily: T.mono, fontSize: 10.5, color: i === 2 ? T.accent : T.muted, fontWeight: 700, letterSpacing: '0.07em' }}>{h}</div>
              ))}
            </div>
            {comparison().map((row, ri) => (
              <div key={ri} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1.2fr 1fr', borderBottom: ri < comparison().length - 1 ? `1px solid ${T.border}` : 'none', background: ri % 2 === 0 ? T.bg : T.surface }}>
                <div style={{ padding: '13px 20px', fontFamily: T.sans, fontSize: 13.5, color: T.text }}>{row.feature}</div>
                <div style={{ padding: '13px 20px', fontFamily: T.mono, fontSize: 12.5, color: row.basic === '\u2713' ? T.muted : T.dim }}>{row.basic}</div>
                <div style={{ padding: '13px 20px', fontFamily: T.mono, fontSize: 12.5, color: row.core === '\u2713' ? T.accent : T.dim, fontWeight: row.core === '\u2713' ? 700 : 400 }}>{row.core}</div>
                <div style={{ padding: '13px 20px', fontFamily: T.mono, fontSize: 12.5, color: row.plus === '\u2713' ? T.muted : T.dim }}>{row.plus}</div>
              </div>
            ))}
          </div></div>{/* end ark-table-scroll */}
        </div>
      </section>
      <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 40px' }}>
          <div className="ark-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              { icon: '\uD83C\uDFD7', title: S.pr_bn1_t, body: S.pr_bn1_b },
              { icon: '\uD83D\uDEE1', title: S.pr_bn2_t, body: S.pr_bn2_b },
            ].map((c, i) => (
              <div key={i} style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 10, padding: '28px 28px 28px 24px', display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: T.accentSubtle, border: `1px solid ${T.accentDim}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flexShrink: 0 }}>
                  {c.icon}
                </div>
                <div>
                  <h3 style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.text, margin: '0 0 8px' }}>{c.title}</h3>
                  <p style={{ fontFamily: T.sans, fontSize: 13.5, color: T.muted, lineHeight: 1.68, margin: 0 }}>{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

const PkgCard = ({ pkg, navigate }) => {
  const [hov, setHov] = useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: T.bg, borderRadius: 12, overflow: 'hidden', border: `1px solid ${pkg.hot ? T.accent : T.border}`, transition: 'box-shadow 0.15s', boxShadow: hov && pkg.hot ? `0 0 0 3px ${T.accentSubtle}` : 'none' }}>
      {pkg.badge && (
        <div style={{ background: T.accent, padding: '5px 0', textAlign: 'center', fontFamily: T.mono, fontSize: 9.5, fontWeight: 700, color: 'white', letterSpacing: '0.06em' }}>
          {pkg.badge}
        </div>
      )}
      <div style={{ padding: 28 }}>
        <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, letterSpacing: '0.07em', marginBottom: 6 }}>{pkg.num} // LAUNCH ARK {pkg.name.toUpperCase()}</div>
        <div style={{ fontFamily: T.sans, fontSize: 20, fontWeight: 700, color: T.text, marginBottom: 4 }}>{pkg.name}</div>
        <div style={{ marginBottom: 4 }}>
          <span style={{ fontFamily: T.mono, fontSize: 32, fontWeight: 700, color: T.text, letterSpacing: '-0.02em' }}>{pkg.price}</span>
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 10, color: T.warning, letterSpacing: '0.04em', marginBottom: 8 }}>{S.pr_price_note}</div>
        <p style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.6, margin: '0 0 6px' }}>{pkg.tagline}</p>
        <p style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.6, margin: '0 0 18px' }}>{pkg.who}</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
          {pkg.modules.map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ color: T.accent, fontSize: 10, flexShrink: 0 }}>●</span>
              <span style={{ fontFamily: T.mono, fontSize: 11, color: T.text }}>{m}</span>
            </div>
          ))}
          {pkg.notIncluded.map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ color: T.dim, fontSize: 10, flexShrink: 0 }}>○</span>
              <span style={{ fontFamily: T.mono, fontSize: 11, color: T.dim }}>{m}</span>
            </div>
          ))}
        </div>
        <button onClick={() => navigate('order')} style={{
          width: '100%', padding: '10px 0',
          background: pkg.variant === 'primary' ? T.text : pkg.variant === 'outline' ? 'transparent' : T.surface,
          color: pkg.variant === 'primary' ? T.bg : T.muted,
          border: pkg.variant !== 'primary' ? `1px solid ${T.border}` : 'none',
          borderRadius: 6, cursor: 'pointer', fontFamily: T.mono, fontSize: 11.5, fontWeight: 700, letterSpacing: '0.05em', transition: 'all 0.14s',
        }}>
          {pkg.cta}
        </button>
      </div>
    </div>
  );
};

window.PricingPage = PricingPage;