// Pricing — bold variant. Same tiers & prices as the existing site:
// Foundation $499 / Accelerate $1,499 / Command $2,999 / Complete $4,999

const TIERS = [
  {
    name: 'Foundation',
    tag: 'SELF-SERVICE',
    price: '499',
    blurb: 'Platform access for teams ready to drive their own compliance program.',
    features: ['Full platform access', 'Policy & documentation library', 'Email support', 'CTRL Assist · 50 queries / mo'],
    cta: 'Start trial',
    featured: false,
    tint: '#94a3b8',
  },
  {
    name: 'Accelerate',
    tag: 'GUIDED',
    price: '1,499',
    blurb: 'Monthly reviews and implementation support to keep momentum.',
    features: ['Everything in Foundation', 'Monthly compliance review', 'Implementation support', 'Priority support', 'CTRL Assist · unlimited'],
    cta: 'Get started',
    featured: true,
    tint: '#38bdf8',
  },
  {
    name: 'Command',
    tag: 'MANAGED',
    price: '2,999',
    blurb: 'A dedicated analyst and hands-on policy development for growing orgs.',
    features: ['Everything in Accelerate', 'Dedicated compliance analyst', 'Policy development', 'Audit preparation', 'Quarterly executive reporting'],
    cta: 'Talk to sales',
    featured: false,
    tint: '#a855f7',
  },
  {
    name: 'Complete',
    tag: 'FULL-SERVICE',
    price: '4,999',
    blurb: 'Outsourced Privacy & Security Officer — we run the program end-to-end.',
    features: ['Everything in Command', 'Outsourced Privacy & Security Officer', 'Training & incident management', 'Audit representation', 'Board-level reporting'],
    cta: 'Talk to sales',
    featured: false,
    tint: '#f97316',
  },
];

const PriceCard = ({ t }) => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  return (
    <div style={{
      background: t.featured ? `linear-gradient(180deg, ${t.tint}14, #0b1220)` : '#0b1220',
      border: `1px solid ${t.featured ? t.tint + '88' : '#1e293b'}`,
      borderRadius: 12, padding: '28px 24px',
      position: 'relative',
      boxShadow: t.featured ? `0 30px 60px -30px ${t.tint}40` : 'none',
      display: 'flex', flexDirection: 'column',
    }}>
      {t.featured && (
        <div style={{
          position: 'absolute', top: -10, left: 24,
          ...mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.5,
          color: '#030712', background: t.tint,
          padding: '3px 10px', borderRadius: 4,
        }}>MOST POPULAR</div>
      )}

      <div style={{ ...mono, fontSize: 10, letterSpacing: 1.5, color: t.tint, marginBottom: 10 }}>
        {t.tag}
      </div>
      <div style={{ fontSize: 22, fontWeight: 700, color: '#f1f5f9', marginBottom: 8, letterSpacing: -0.3 }}>
        {t.name}
      </div>
      <div style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.5, marginBottom: 22, minHeight: 38 }}>
        {t.blurb}
      </div>

      <div style={{ marginBottom: 22, display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{ ...mono, fontSize: 10, color: '#64748b', letterSpacing: 1 }}>FROM $</span>
        <span style={{ fontSize: 38, fontWeight: 800, color: '#fff', letterSpacing: -1 }}>{t.price}</span>
        <span style={{ fontSize: 13, color: '#64748b' }}>/mo</span>
      </div>

      <div style={{ height: 1, background: '#1e293b', marginBottom: 20 }} />

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1, marginBottom: 22 }}>
        {t.features.map(f => (
          <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: '#cbd5e1', lineHeight: 1.5 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={t.tint} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}>
              <polyline points="20 6 9 17 4 12" />
            </svg>
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <button style={{
        ...mono, fontSize: 12, fontWeight: 700, letterSpacing: 1,
        background: t.featured ? t.tint : 'transparent',
        color: t.featured ? '#030712' : '#e2e8f0',
        border: `1px solid ${t.featured ? t.tint : '#334155'}`,
        borderRadius: 4, padding: '12px 16px', cursor: 'pointer',
        width: '100%',
      }}>{t.cta.toUpperCase()} →</button>
    </div>
  );
};

const PricingSection = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const { SectionLabel, SectionH, SectionSub } = window;
  return (
    <section id="pricing" style={{
      position: 'relative', background: '#05080f', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel n="04" label="PRICING" />
        <SectionH>Flat tiers, not <span style={{ color: '#64748b' }}>enterprise-pricing games.</span></SectionH>
        <SectionSub>
          Pricing scales with organization size — not seats. Save 10% with annual billing, plus 15% for qualifying rural healthcare orgs. Discounts stack.
        </SectionSub>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16, marginBottom: 40,
        }}>
          {TIERS.map(t => <PriceCard key={t.name} t={t} />)}
        </div>

        {/* Discount bar */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          <div style={{
            background: 'linear-gradient(135deg, rgba(56,189,248,0.08), #0b1220)',
            border: '1px solid rgba(56,189,248,0.3)', borderRadius: 10,
            padding: '20px 24px', display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 8, background: 'rgba(56,189,248,0.12)',
              border: '1px solid rgba(56,189,248,0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#38bdf8',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18" /><path d="M5 21V10l7-5 7 5v11" /><path d="M10 21v-6h4v6" /></svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#f1f5f9', marginBottom: 4 }}>
                Rural / CAH — 15% off
              </div>
              <div style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.6 }}>
                Critical Access Hospitals, Rural Health Clinics, rural FQHCs, and Sole Community Hospitals qualify.
              </div>
            </div>
          </div>

          <div style={{
            background: 'linear-gradient(135deg, rgba(168,85,247,0.08), #0b1220)',
            border: '1px solid rgba(168,85,247,0.3)', borderRadius: 10,
            padding: '20px 24px', display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 8, background: 'rgba(168,85,247,0.12)',
              border: '1px solid rgba(168,85,247,0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#a855f7',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="15" rx="2" /><line x1="3" y1="10" x2="21" y2="10" /></svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#f1f5f9', marginBottom: 4 }}>
                Annual billing — 10% off
              </div>
              <div style={{ fontSize: 12.5, color: '#94a3b8', lineHeight: 1.6 }}>
                Stackable with the rural discount. Annual terms include price-lock for the full year.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.PricingSection = PricingSection;