// Website UI kit — Pricing tiers.
const { Card, Badge, Button } = window.TechSales110_c20112;

function Check({ children }) {
  return (
    <li style={{ padding: '7px 0 7px 28px', position: 'relative', fontSize: 15, color: 'var(--text-body)' }}>
      <span style={{ position: 'absolute', left: 0, color: 'var(--color-brand)', fontWeight: 900 }}>✓</span>
      {children}
    </li>
  );
}

function Pricing({ onJoin }) {
  const { SectionHead } = window;
  const h3 = { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, textTransform: 'uppercase', letterSpacing: '.01em', margin: 0, color: 'var(--text-strong)' };
  const price = { fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 48, margin: '6px 0', color: 'var(--text-strong)', lineHeight: 1 };
  const comingSoon = {
    display: 'block', width: '100%', padding: '13px 22px', borderRadius: 8,
    background: 'rgba(255,255,255,.08)', color: 'var(--text-muted)',
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
    textTransform: 'uppercase', letterSpacing: '.06em', textAlign: 'center',
    border: '1px solid rgba(255,255,255,.12)', cursor: 'default',
  };
  return (
    <section id="join" style={{ padding: '72px 0', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 22px' }}>
        <SectionHead eyebrow="Three Ways In" title="Start Free.  Go Pro.  Own It."
          sub="The teaching is free.  The membership gives you the tools.  The course gives you everything." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 44, textAlign: 'left' }} className="price-grid">

          {/* — Free — */}
          <Card>
            <h3 style={h3}>Free</h3>
            <div style={price}>$0</div>
            <ul style={{ listStyle: 'none', margin: '18px 0 24px', padding: 0 }}>
              <Check>All published YouTube lessons</Check>
              <Check>The Tech Sales 110 podcast</Check>
              <Check>Community comments &amp; updates</Check>
            </ul>
            <Button variant="secondary" as="a" href="https://www.youtube.com/@TechSales110" target="_blank" rel="noopener noreferrer">Subscribe on YouTube</Button>
          </Card>

          {/* — Membership — */}
          <Card featured style={{ overflow: 'hidden', paddingTop: 0 }}>
            <div style={{ background: 'var(--color-accent)', margin: '0 calc(-1 * var(--space-8)) 20px calc(-1 * var(--space-8))', padding: '8px 16px', textAlign: 'center' }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#fff' }}>Founder Offer · 250 Spots</span>
            </div>
            <h3 style={h3}>Membership</h3>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, margin: '6px 0' }}>
              <div style={{ ...price, color: 'var(--gold)' }}>FREE</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--text-muted)', textDecoration: 'line-through' }}>$5/mo</div>
            </div>
            <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: '0 0 6px', fontStyle: 'italic' }}>Free for the first 250 subscribers — price locks in forever.</p>
            <ul style={{ listStyle: 'none', margin: '14px 0 24px', padding: 0 }}>
              <Check><b>Weekly live stream</b> with Pierre</Check>
              <Check><b>AI prompt kit</b> for every hack</Check>
              <Check>Members-only community</Check>
              <Check>The <b>methodology framework</b></Check>
            </ul>
            <Button variant="primary" onClick={onJoin}>Join Free →</Button>
          </Card>

          {/* — Course — */}
          <Card>
            <h3 style={h3}>Course</h3>
            <div style={price}>$295<span style={{ fontSize: 16, color: 'var(--text-muted)', fontWeight: 600, fontFamily: 'var(--font-body)' }}> one-time</span></div>
            <ul style={{ listStyle: 'none', margin: '18px 0 24px', padding: 0 }}>
              <Check>All <b>52 lessons</b> — full curriculum</Check>
              <Check><b>AI prompt kit</b> + handouts</Check>
              <Check>Ebook (PDF)</Check>
              <Check>Markdown version of the book</Check>
              <Check>Methodology <b>Rosetta Stone</b></Check>
              <Check>Lifetime access</Check>
            </ul>
            <span style={comingSoon}>Coming Soon</span>
          </Card>

        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;