// ===== Pricing — Plasma v3 =====

const PRICING = [
  {
    name: 'Starter',
    desc: 'For sole traders, freelancers, and brand-new businesses who just need a clean web presence.',
    from: 'R8,500', suffix: 'once-off', timeline: '1 week turnaround',
    bullets: ['2 pages (Home + Contact)', 'Custom design', 'Mobile-responsive', 'Contact form', '2 rounds of revisions', 'Free deployment to your hosting'],
    notIncluded: ['SEO campaigns', 'Online store / checkout'],
    cta: 'Get started',
    featured: false,
  },
  {
    name: 'Professional',
    desc: 'For small businesses ready to look the part. Everything you need to turn visitors into customers.',
    from: 'R14,500', suffix: 'once-off', timeline: '2 weeks turnaround',
    bullets: ['4–5 pages (Home, Services, About, Portfolio/Work, Contact)', 'Custom design', 'Mobile-responsive', 'Contact form + WhatsApp integration', 'Basic on-page optimization', '3 rounds of revisions', 'Free deployment to your hosting'],
    notIncluded: ['Online store / checkout'],
    cta: 'Get started',
    featured: true,
  },
  {
    name: 'Enterprise',
    desc: 'For established businesses that need a full website with everything dialled in. Built to grow with you.',
    from: 'R19,500', suffix: 'once-off', timeline: '3 weeks turnaround',
    bullets: ['Unlimited pages (within reason)', 'Fully custom design and animations', 'Mobile-responsive', 'Advanced contact forms, integrations, and bookings', 'Content upload included (you send the files)', '5 rounds of revisions', 'Free deployment', '1 month of post-launch support included'],
    notIncluded: [],
    cta: 'Get started',
    featured: false,
  },
];

const COMPARE = [
  { row: 'Pages', a: '2', b: '4–5', c: 'Unlimited' },
  { row: 'Custom design', a: '✓', b: '✓', c: '✓ + animations' },
  { row: 'Mobile-responsive', a: '✓', b: '✓', c: '✓' },
  { row: 'Contact form', a: '✓', b: '✓ + WhatsApp', c: 'Advanced forms' },
  { row: 'Bookings & integrations', a: '—', b: '—', c: '✓' },
  { row: 'Basic on-page optimization', a: '—', b: '✓', c: '✓' },
  { row: 'Rounds of revisions', a: '2', b: '3', c: '5' },
  { row: 'Content upload included', a: '—', b: '—', c: '✓' },
  { row: 'Turnaround', a: '1 week', b: '2 weeks', c: '3 weeks' },
  { row: 'Post-launch support', a: '—', b: '—', c: '1 month' },
];

const CARE_PLANS = [
  { name: 'Basic Care', price: 'R169', desc: 'Hosting + uptime monitoring + small text edits.' },
  { name: 'Standard Care', price: 'R349', desc: 'Everything in Basic + monthly updates, backups, and up to 1 hour of changes.' },
  { name: 'Premium Care', price: 'R649', desc: 'Everything in Standard + priority response, 2 hours of monthly changes, and quarterly performance reviews.' },
];

const EXTRAS = [
  ['Copywriting', 'from R349 per page'],
  ['Logo design', 'from R1,099'],
  ['Full branding package (logo, colours, typography, guidelines)', 'from R3,599'],
  ['Content upload (text + images, per page)', 'from R169'],
  ['Professional email setup (per address)', 'from R349'],
  ['Domain registration', 'at cost + R169 admin'],
];

function PricingPage() {
  return (
    <Page>
      <PageIntro
        eyebrow="Pricing"
        title={<>Straightforward pricing. <span className="grad-text">No surprises.</span></>}
        sub="No retainers required, no surprise fees. All prices in South African Rand (ZAR)."
      />

      <section className="section-sm">
        <div className="wrap">
          <div className="grid grid-3" style={{ alignItems: 'stretch' }}>
            {PRICING.map(p => (
              <div key={p.name} className={'card price-card ' + (p.featured ? 'featured' : '')} style={{ position: 'relative' }}>
                {p.featured && (
                  <div className="pill" style={{ position: 'absolute', top: 18, right: 18, background: 'rgba(200,166,255,0.15)', borderColor: 'rgba(200,166,255,0.4)' }}>
                    <span className="dot" /> Most popular
                  </div>
                )}
                <div>
                  <div className="name">{p.name}</div>
                  <div className="text-muted" style={{ fontSize: 13.5, marginTop: 6, maxWidth: '38ch' }}>{p.desc}</div>
                </div>
                <div className="amount" style={{ marginTop: 24 }}>
                  <span className={'num ' + (p.featured ? 'grad-text' : '')}>{p.from}</span>
                  {p.suffix && <span className="suffix">{p.suffix}</span>}
                </div>
                <div className="row" style={{ gap: 14, fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '0.1em', paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
                  <span>{p.timeline}</span>
                </div>
                <ul>
                  {p.bullets.map(b => <li key={b}><Icon.Check /> {b}</li>)}
                </ul>
                {p.notIncluded.length > 0 && (
                  <ul style={{ marginTop: -8 }}>
                    {p.notIncluded.map(b => (
                      <li key={b} style={{ color: 'var(--text-faint)' }}>
                        <span style={{ width: 14, display: 'inline-flex', justifyContent: 'center', color: 'var(--text-faint)', marginTop: 4 }}>—</span> {b}
                      </li>
                    ))}
                  </ul>
                )}
                <Link to="/contact" className={'btn ' + (p.featured ? 'btn-grad' : 'btn-ghost')} style={{ marginTop: 'auto' }}>{p.cta} <Icon.Arr /></Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="card" style={{ padding: 36, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">Web applications</span>
              <h3 style={{ marginTop: 16 }}>Custom quote, scoped per project.</h3>
              <p style={{ fontSize: 15, marginTop: 14 }}>Web apps vary too much to put a single price on. Tell us what you want to build and we'll send a quote with scope and timeline.</p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <Link to="/contact" className="btn btn-grad btn-lg">Request a quote <Icon.Arr /></Link>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead eyebrow="Compare" title="What's included where." />
          <div className="card" style={{ overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', background: 'rgba(255,255,255,0.02)', borderBottom: '1px solid var(--line)' }}>
              <div style={{ padding: '18px 24px' }} className="label">What you get</div>
              {['Starter', 'Professional', 'Enterprise'].map((c, i) => (
                <div key={c} style={{ padding: '18px 24px', fontSize: 15, fontWeight: 500, color: i === 1 ? 'var(--violet)' : 'var(--text)' }}>{c}</div>
              ))}
            </div>
            {COMPARE.map((row, i) => (
              <div key={row.row} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', borderTop: i > 0 ? '1px solid var(--line)' : 0 }}>
                <div style={{ padding: '14px 24px', fontSize: 14 }}>{row.row}</div>
                <div style={{ padding: '14px 24px', fontSize: 13.5, color: 'var(--text-dim)' }}>{row.a}</div>
                <div style={{ padding: '14px 24px', fontSize: 13.5, color: 'var(--text-dim)', background: 'rgba(200,166,255,0.04)' }}>{row.b}</div>
                <div style={{ padding: '14px 24px', fontSize: 13.5, color: 'var(--text-dim)' }}>{row.c}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead
            eyebrow="Hosting & Maintenance"
            title="Monthly care plans."
            sub="Optional retainers to keep your site online, updated, and secure. Cancel anytime."
          />
          <div className="grid grid-3">
            {CARE_PLANS.map(p => (
              <div key={p.name} className="card" style={{ padding: 28 }}>
                <h4 style={{ fontSize: 18 }}>{p.name}</h4>
                <div className="amount" style={{ marginTop: 14, marginBottom: 18 }}>
                  <span className="num grad-text" style={{ fontSize: 40 }}>{p.price}</span>
                  <span className="suffix">/ month</span>
                </div>
                <p style={{ fontSize: 14 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead
            eyebrow="One-off extras"
            title="The little things."
            sub="All quoted separately. Reach out and we'll bundle them with your project."
          />
          <div className="card" style={{ overflow: 'hidden' }}>
            {EXTRAS.map((row, i) => (
              <div key={row[0]} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', borderTop: i > 0 ? '1px solid var(--line)' : 0 }}>
                <div style={{ padding: '16px 24px', fontSize: 14 }}>{row[0]}</div>
                <div style={{ padding: '16px 24px', fontSize: 14, color: 'var(--text-dim)', textAlign: 'right' }} className="mono">{row[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <SectionHead eyebrow="The fine print" title="What to expect." />
          <div className="grid grid-3">
            {[
              ['All prices in ZAR.', "We can invoice in other currencies on request, but the listed numbers are South African Rand."],
              ['50/50 payment.', "50% deposit to start, 50% on completion. We accept international transfers and EFT."],
              ["You own the site.", "Once the final invoice is paid, the site is yours — code, design, everything. No lock-in."],
            ].map(it => (
              <div key={it[0]} className="card" style={{ padding: 24 }}>
                <h4 style={{ fontSize: 17 }}>{it[0]}</h4>
                <p style={{ fontSize: 13.5, marginTop: 10 }}>{it[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaTail />
    </Page>
  );
}

Object.assign(window, { PricingPage });