// Pricing — three packages, builder-y receipts at the bottom
const PACKAGES = [
  {
    n: '01',
    name: 'the launch',
    price: '$450',
    sub: 'fixed price · live in 14 days',
    body: 'one beautifully-written page that turns the right strangers into clients. for when you\'re tired of saying "here\'s my linktree."',
    inc: ['1 page · custom-designed', 'words written for you', 'edit it yourself, anytime', 'tracking + a real test', '30 days of fixes'],
    best: false,
  },
  {
    n: '02',
    name: 'the engine',
    price: '$1,400',
    sub: 'fixed price · live in 21 days',
    body: 'a full website AND one system that runs your back-office for you. for when you want to stop being the bottleneck in your own business.',
    inc: ['up to 5 pages', 'consistent brand', 'one system, fully automated', 'training in plain english', '60 days of support'],
    best: true,
  },
  {
    n: '03',
    name: 'the partner',
    price: 'from $750/mo',
    sub: 'monthly · pause anytime',
    body: 'i\'m on your team part-time. site updates, new automations, fresh ideas, fixes when things break. like having a senior teammate without the salary.',
    inc: ['~30 hrs of work / month', 'priority replies', 'monthly strategy session', 'site + systems both covered', 'pause anytime, keep it all'],
    best: false,
  },
];

function Pricing() {
  return (
    <section id="pricing" className="section" style={{ background: 'var(--bg-2)' }}>
      <SectionHead
        id="the.investment"
        kicker="founder pricing"
        title='honest rates.<br/><span class="italic-em">starter prices.</span>'
        lede="i'm new to freelancing, so i'm pricing myself like a junior — even though the work isn't. you get senior-level builds at starter rates while i collect the case studies. you don't pay until you see it working, and if you're not thrilled, you don't pay at all."
      />

      <div className="container pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 20, alignItems: 'stretch' }}>
        {PACKAGES.map((p, i) => (
          <Reveal key={p.n} delay={(i % 3) + 1}>
            <Package p={p} />
          </Reveal>
        ))}
      </div>

      <div className="container pricing-note" style={{
        marginTop: 56, padding: '24px 28px',
        border: '1px dashed var(--line-2)',
        borderRadius: 12,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, flexWrap: 'wrap',
        fontFamily: 'var(--mono)',
        fontSize: 13,
        color: 'var(--ink-2)',
      }}>
        <div>
          <span style={{ color: 'var(--accent)', fontWeight: 700 }}>// based in algeria? ask about local pricing.</span>
          <span style={{ marginLeft: 12 }}>same work, fair rate for the local market.</span>
        </div>
        <a href="#booking" className="link">let's talk →</a>
      </div>
    </section>
  );
}

function Package({ p }) {
  const featured = p.best;
  return (
    <article className="card" style={{
      padding: 28,
      display: 'flex', flexDirection: 'column',
      height: '100%',
      minHeight: 480,
      background: featured ? 'var(--ink)' : 'var(--bg)',
      color: featured ? 'var(--bg)' : 'var(--ink)',
      borderColor: featured ? 'var(--ink)' : 'var(--line-2)',
      position: 'relative',
    }}>
      {featured && (
        <span style={{
          position: 'absolute', top: -10, left: 28,
          fontFamily: 'var(--mono)', fontSize: 11,
          padding: '4px 10px', borderRadius: 999,
          background: 'var(--accent)', color: 'var(--accent-ink)',
        }}>most picked</span>
      )}
      <div className="label" style={{ color: featured ? '#a8a394' : 'var(--ink-3)' }}>package · {p.n}</div>
      <h3 className="serif" style={{ fontSize: 30, margin: '8px 0 4px', letterSpacing: '-0.02em', fontWeight: 400 }}>{p.name}</h3>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="serif" style={{ fontSize: 42, letterSpacing: '-0.03em' }}>{p.price}</span>
      </div>
      <div className="mono" style={{ fontSize: 12, color: featured ? '#a8a394' : 'var(--ink-3)', marginBottom: 20 }}>{p.sub}</div>
      <p style={{ margin: '0 0 24px', fontSize: 15, lineHeight: 1.55, color: featured ? '#d8d3c2' : 'var(--ink-2)', textWrap: 'pretty' }}>{p.body}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, flex: 1 }}>
        {p.inc.map(x => (
          <li key={x} className="mono" style={{ fontSize: 12, display: 'flex', gap: 10, color: featured ? '#d8d3c2' : 'var(--ink-2)' }}>
            <span style={{ color: 'var(--accent)' }}>✓</span>{x}
          </li>
        ))}
      </ul>
      <a href="#booking" className="btn" style={{
        marginTop: 24,
        background: featured ? 'var(--accent)' : 'var(--ink)',
        color: featured ? 'var(--accent-ink)' : 'var(--bg)',
        borderColor: featured ? 'var(--accent)' : 'var(--ink)',
        justifyContent: 'center',
      }}>
        start here →
      </a>
    </article>
  );
}

Object.assign(window, { Pricing });