// Kit detail page — full feature breakdown for the $9 Starter Kit, with primary buy button.

function KitPage({ p }) {
  const features = [
    {
      tag: '01 · TEMPLATES',
      title: '8 plug-and-play traffic assets',
      body: 'A weekend reply template, a follow-up kit, an ROI calculator, a teardown, and four more — drop in your niche and ship.',
      items: ['Tutoring reply template', 'Cleaning quote follow-up', 'Salon rebook prompt', 'ROI calculator shell'],
    },
    {
      tag: '02 · PACKAGING',
      title: 'How to wrap your first $9 product',
      body: 'The exact shape of a shovel that sells: title, hero promise, deliverables list, FAQ, refund note.',
      items: ['Buyer-pain prompt scaffold', 'Naming + pricing rules', 'Refund + delivery copy', 'Async-audit upsell'],
    },
    {
      tag: '03 · FULFILMENT',
      title: 'No-code Stripe → email pipeline',
      body: 'Stripe payment link, Resend or Gmail delivery, Notion as your CMS. Setup in one sitting, $0/month.',
      items: ['Stripe link recipe', 'Email delivery template', 'Notion folder structure', 'Refund flow checklist'],
    },
    {
      tag: '04 · TEARDOWN',
      title: 'A real $487 / mo example',
      body: 'A line-by-line tour of one boring traffic asset, the kit it sells, and the exact automation behind it.',
      items: ['Page-by-page walkthrough', 'Traffic source breakdown', 'Email sequence shown', 'What we would change'],
    },
  ];

  return (
    <>
      
      <SubHeader p={p} kicker="Starter Kit · $9" title="AI Side Business Starter Kit"/>

      <section style={{ padding: '28px 22px 22px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: '-30% -10% auto -10%', height: 320, zIndex: 0,
          background: `radial-gradient(60% 60% at 50% 30%, ${p.accent}1c 0%, transparent 70%)`,
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Reveal>
            <Chip p={p} accent>Everything you get</Chip>
            <h1 style={{
              margin: '14px 0 8px',
              fontFamily: PELLEX_FONTS.display,
              color: p.text, fontSize: 38, lineHeight: 1.0, letterSpacing: -0.7,
              fontWeight: 700, textWrap: 'balance',
            }}>
              The boring, useful kit you wish existed.
            </h1>
            <p style={{ margin: 0, color: p.textMute, fontSize: 15, lineHeight: 1.5, textWrap: 'pretty' }}>
              Templates, packaging, fulfilment and a real teardown — bundled into one tiny weekend-shippable kit.
            </p>
          </Reveal>

          <Reveal delay={120}>
            <div style={{
              marginTop: 22, padding: 18, borderRadius: 18,
              background: p.bgElev, border: `1.5px solid ${p.accent}`,
              boxShadow: `0 18px 60px -20px ${p.accent}40`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
                <span style={{
                  fontFamily: PELLEX_FONTS.display, fontSize: 22, color: p.textDim,
                  textDecoration: 'line-through', fontWeight: 600,
                }}>$49</span>
                <span style={{
                  fontFamily: PELLEX_FONTS.display, fontSize: 52, lineHeight: 1,
                  color: p.accent, letterSpacing: -1.2, fontWeight: 700,
                }}>$9</span>
                <span style={{ color: p.textMute, fontSize: 12, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>
                  one-time
                </span>
              </div>
              <PrimaryCTA p={p} full sub="Continue to secure checkout"
                onClick={() => window.pellexNav('checkout')}>
                Buy the kit
              </PrimaryCTA>
              <div style={{
                marginTop: 12, display: 'flex', justifyContent: 'center', gap: 14,
                color: p.textDim, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3,
              }}>
                <span>Stripe · Apple Pay</span><span>·</span>
                <span>14-day refund</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '22px 22px 8px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {features.map((f, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{
                padding: 20, borderRadius: 18,
                background: p.bgElev, border: `1px solid ${p.border}`,
              }}>
                <div style={{ color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 10, letterSpacing: 0.6, marginBottom: 8 }}>
                  {f.tag}
                </div>
                <h3 style={{
                  margin: '0 0 8px',
                  fontFamily: PELLEX_FONTS.display, fontSize: 22, lineHeight: 1.1,
                  color: p.text, letterSpacing: -0.3, fontWeight: 600,
                }}>{f.title}</h3>
                <p style={{ margin: '0 0 12px', color: p.textMute, fontSize: 14, lineHeight: 1.5 }}>
                  {f.body}
                </p>
                <div style={{
                  padding: 12, borderRadius: 10,
                  background: p.bgCard, border: `1px solid ${p.border}`,
                  display: 'flex', flexDirection: 'column', gap: 6,
                }}>
                  {f.items.map((it, j) => (
                    <div key={j} style={{
                      display: 'flex', alignItems: 'center', gap: 8,
                      color: p.text, fontSize: 13,
                    }}>
                      <span style={{ color: p.accent, display: 'inline-flex' }}><Icon.check/></span>
                      {it}
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{ padding: '28px 22px 8px' }}>
        <Reveal>
          <div style={{
            padding: 22, borderRadius: 18,
            background: `linear-gradient(180deg, ${p.bgCard} 0%, ${p.bgElev} 100%)`,
            border: `1px solid ${p.border}`,
          }}>
            <Chip p={p}>Refund honesty</Chip>
            <p style={{
              margin: '14px 0 0',
              color: p.text, fontSize: 16, lineHeight: 1.5,
              fontFamily: PELLEX_FONTS.body, fontWeight: 500,
            }}>
              If the kit doesn't help you ship in 14 days, reply to the receipt and we'll refund you. $9 should never be a stressful purchase.
            </p>
          </div>
        </Reveal>
      </section>

      <section style={{ padding: '28px 22px 8px' }}>
        <PrimaryCTA p={p} full sub="$9 · Stripe · Apple Pay"
          onClick={() => window.pellexNav('checkout')}>
          Get the kit
        </PrimaryCTA>
      </section>

      <PageFooter p={p}/>
    </>
  );
}

window.KitPage = KitPage;