// Pellex landing — part B sections: Pricing, Testimonials, Founder, FAQ, FinalCTA, Footer, StickyCTA
// Continuation of pellex-sections.jsx — same React/global env.

// ─────────────────────────────────────────────────────────────
// Section: Pricing ladder
// ─────────────────────────────────────────────────────────────
function Pricing({ p, pricingDisplay }) {
  const showStrike = pricingDisplay === 'strike' || pricingDisplay === 'urgency';
  const showUrgency = pricingDisplay === 'urgency';
  return (
    <section id="offers" className="pricing-section desktop-section" style={{ padding: '40px 22px', background: p.bgElev, borderTop: `1px solid ${p.border}` }}>
      <Reveal>
        <Chip p={p} accent>Offer ladder</Chip>
        <h2 style={{
          margin: '14px 0 6px',
          fontFamily: PELLEX_FONTS.display,
          color: p.text, fontSize: 32, lineHeight: 1.05, letterSpacing: -0.6,
          fontWeight: 600, textWrap: 'balance',
        }}>
          Start free. <span style={{ color: p.accent, fontWeight: 700 }}>Upgrade only when you want the shortcut.</span>
        </h2>
        <p style={{ color: p.textMute, fontSize: 14, lineHeight: 1.5, margin: '0 0 24px' }}>
          No subscriptions. No upsells. One small payment, lifetime access, every future update included.
        </p>
      </Reveal>

      <div className="pricing-grid" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Free tier */}
        <Reveal>
          <div style={{
            padding: 22, borderRadius: 18,
            background: p.bgCard, border: `1px solid ${p.border}`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <div>
                <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 4 }}>Free</div>
                <h3 style={{
                  margin: 0,
                  fontFamily: PELLEX_FONTS.display, fontSize: 22, lineHeight: 1.1,
                  color: p.text, letterSpacing: -0.3, fontWeight: 600,
                }}>The 0→1 AI side-business map</h3>
              </div>
              <div style={{
                fontFamily: PELLEX_FONTS.display, fontSize: 34, lineHeight: 1,
                color: p.text, letterSpacing: -0.5,
              }}>$0</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
              {['Beginner-safe route map', 'Niche idea picker', 'Free traffic asset formula', 'First-product checklist'].map((f, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, color: p.textMute, fontSize: 13 }}>
                  <span style={{ color: p.accent, display: 'inline-flex' }}><Icon.check/></span>
                  {f}
                </div>
              ))}
            </div>
            <GhostCTA p={p} full onClick={() => window.pellexNav('map')}>Use the map</GhostCTA>
          </div>
        </Reveal>

        {/* Paid tier - featured */}
        <Reveal delay={120}>
          <div style={{
            position: 'relative', padding: 22, borderRadius: 18,
            background: `linear-gradient(180deg, ${p.bgCard} 0%, ${p.bgElev} 100%)`,
            border: `1.5px solid ${p.accent}`,
            boxShadow: `0 18px 60px -20px ${p.accent}40, inset 0 1px 0 ${p.accent}30`,
            overflow: 'hidden',
          }}>
            {/* corner badge */}
            <div style={{
              position: 'absolute', top: 14, right: 14,
              padding: '4px 10px', borderRadius: 99,
              background: p.accent, color: p.accentInk,
              fontFamily: PELLEX_FONTS.mono, fontSize: 10, fontWeight: 600, letterSpacing: 0.5,
            }}>MOST POPULAR</div>

            <div style={{ marginBottom: 16 }}>
              <div style={{ color: p.accent, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 4 }}>The Shortcut</div>
              <h3 style={{
                margin: 0,
                fontFamily: PELLEX_FONTS.display, fontSize: 24, lineHeight: 1.1,
                color: p.text, letterSpacing: -0.4, fontWeight: 600,
              }}>AI Side Business Starter Kit</h3>
            </div>

            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 18,
              paddingBottom: 18, borderBottom: `1px dashed ${p.border}`,
            }}>
              {showStrike && (
                <span style={{
                  fontFamily: PELLEX_FONTS.display, fontSize: 26, color: p.textDim,
                  textDecoration: 'line-through', textDecorationColor: p.danger,
                   letterSpacing: -0.5,
                }}>$49</span>
              )}
              <span style={{
                fontFamily: PELLEX_FONTS.display, fontSize: 52, color: p.accent,
                 letterSpacing: -1.2, lineHeight: 1,
              }}>$9</span>
              <span style={{ color: p.textMute, fontSize: 12, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>
                one-time
              </span>
            </div>

            {showUrgency && (
              <div style={{
                marginBottom: 14, padding: '8px 12px', borderRadius: 10,
                background: `${p.danger}15`, border: `1px solid ${p.danger}40`,
                color: p.danger, fontFamily: PELLEX_FONTS.mono, fontSize: 11, letterSpacing: 0.3,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span>● LAUNCH PRICE</span>
                <span>14 of 50 left</span>
              </div>
            )}

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
              {[
                '8 plug-and-play traffic asset templates',
                'Prompt + product packaging guide',
                'No-code fulfilment setup (Stripe → Email)',
                'Real teardown of a $487 / mo example',
                'Lifetime updates as the playbook evolves',
                'A friendly chat when you get stuck',
              ].map((f, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, color: p.text, fontSize: 13.5, lineHeight: 1.4 }}>
                  <span style={{ color: p.accent, display: 'inline-flex', marginTop: 2 }}><Icon.check/></span>
                  {f}
                </div>
              ))}
            </div>

            <PrimaryCTA p={p} full sub="One-time $9 · Refund if it doesn't help"
              onClick={() => window.pellexNav('checkout')}>
              Get the Starter Kit
            </PrimaryCTA>

            <div style={{
              marginTop: 14, 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: Testimonials
// ─────────────────────────────────────────────────────────────
function Testimonials({ p }) {
  const items = [
    {
      name: 'Sara M.',
      role: 'Tutor, Manchester',
      quote: "I run my tutoring business part-time. Pellex's weekend reply template paid for itself in one Sunday. I made $34 from a follow-up I would never have written.",
      stat: 'First $34 in 6 days',
    },
    {
      name: 'David Y.',
      role: 'Cleaner → digital seller',
      quote: "I always thought I needed to build an audience first. The shovels-not-mines idea unblocked me. Sold 11 quote-follow-up kits in my first month.",
      stat: '$99 month one',
    },
    {
      name: 'Priya K.',
      role: 'Salon owner',
      quote: "Honestly, I bought it because it was $9 and I was curious. The fulfilment setup alone saved me hours a week on client follow-ups.",
      stat: '5 hrs / week back',
    },
  ];

  const [idx, setIdx] = useState(0);
  return (
    <section className="testimonials-section desktop-section" style={{ padding: '36px 22px' }}>
      <Reveal>
        <Chip p={p}>From people who shipped</Chip>
        <h2 style={{
          margin: '14px 0 22px',
          fontFamily: PELLEX_FONTS.display,
          color: p.text, fontSize: 30, lineHeight: 1.05, letterSpacing: -0.5,
          fontWeight: 600, textWrap: 'balance',
        }}>
          Beginners. Not gurus. <span style={{ color: p.accent, fontWeight: 700 }}>Real first sales.</span>
        </h2>
      </Reveal>

      <Reveal>
        <div style={{
          padding: 22, borderRadius: 18,
          background: p.bgElev, border: `1px solid ${p.border}`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -8, left: 14,
            fontFamily: PELLEX_FONTS.display, fontSize: 110, lineHeight: 1,
            color: p.accent, opacity: 0.18, 
            pointerEvents: 'none',
          }}>"</div>

          <p style={{
            margin: '8px 0 18px', position: 'relative',
            color: p.text, fontSize: 16, lineHeight: 1.45,
            fontFamily: PELLEX_FONTS.body, fontWeight: 400, textWrap: 'pretty',
          }}>{items[idx].quote}</p>

          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            paddingTop: 14, borderTop: `1px solid ${p.border}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 99,
                background: `linear-gradient(135deg, ${p.accent} 0%, ${p.accent2} 100%)`,
                color: p.accentInk,
                display: 'grid', placeItems: 'center',
                fontFamily: PELLEX_FONTS.display, fontSize: 16, fontWeight: 600,
              }}>{items[idx].name[0]}</div>
              <div>
                <div style={{ color: p.text, fontSize: 13, fontWeight: 500 }}>{items[idx].name}</div>
                <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>{items[idx].role}</div>
              </div>
            </div>
            <div style={{
              padding: '5px 10px', borderRadius: 99,
              background: p.bgChip,
              color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 10, letterSpacing: 0.4,
            }}>{items[idx].stat}</div>
          </div>
        </div>
      </Reveal>

      <div style={{
        display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8,
        marginTop: 16,
      }}>
        {items.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{
            width: i === idx ? 20 : 6, height: 6, borderRadius: 99,
            background: i === idx ? p.accent : p.border,
            transition: 'all 240ms ease', border: 'none', cursor: 'pointer', padding: 0,
          }}/>
        ))}
      </div>
      <p style={{
        textAlign: 'center', marginTop: 12, color: p.textDim, fontSize: 11,
        fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3,
      }}>
        Names changed · written with permission · placeholder until verified
      </p>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Founder note
// ─────────────────────────────────────────────────────────────
function FounderNote({ p }) {
  return (
    <Reveal>
      <section className="founder-section desktop-section" style={{ padding: '32px 22px' }}>
        <div style={{
          padding: 24, borderRadius: 20,
          background: `radial-gradient(120% 80% at 0% 0%, ${p.accent}10 0%, transparent 50%), ${p.bgElev}`,
          border: `1px solid ${p.border}`,
        }}>
          <Chip p={p}>A note from the maker</Chip>
          <p style={{
            margin: '16px 0 0',
            color: p.text, fontSize: 18, lineHeight: 1.45,
            fontFamily: PELLEX_FONTS.display, fontWeight: 600, letterSpacing: -0.2,
            textWrap: 'pretty',
          }}>
            I built Pellex because every "AI side-business" guide I tried felt like
            <span style={{ color: p.accent, fontWeight: 700 }}> someone selling me a course about selling courses</span>.
            This is the boring, useful version I wish I'd found. Help first. Tiny products. Real automation. That's it.
          </p>
          <div style={{
            marginTop: 18, paddingTop: 14, borderTop: `1px solid ${p.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 99,
                background: p.bgCard, border: `1px solid ${p.border}`,
                display: 'grid', placeItems: 'center',
                fontFamily: PELLEX_FONTS.display, 
                fontSize: 16, color: p.accent,
              }}>P</div>
              <div>
                <div style={{ color: p.text, fontSize: 13 }}>Pellex</div>
                <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono }}>Independent · since 2025</div>
              </div>
            </div>
            <span style={{
              color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono,
              letterSpacing: 0.3,
            }}>built in public</span>
          </div>
        </div>
      </section>
    </Reveal>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: FAQ
// ─────────────────────────────────────────────────────────────
function FAQ({ p }) {
  const items = [
    {
      q: "Will this actually make me money?",
      a: "Honestly? It depends on what you ship. Pellex hands you the format — a tiny niche, a useful free page, a small paid product, automated delivery. That format works. Whether you do the work is on you. We'd rather under-promise.",
    },
    {
      q: "I can't code. Is that a problem?",
      a: "No. Everything in the Starter Kit runs on no-code tools you probably already know: a Stripe payment link, email through Resend or Gmail, content in Notion or a Google Doc. We avoid custom software on purpose.",
    },
    {
      q: "How long until my first sale?",
      a: "Most people who actually ship the free page see their first $9–49 sale within 2–4 weeks. The bottleneck is publishing, not the kit. The kit shortens the publishing step from weeks to a weekend.",
    },
    {
      q: "What if I hate it?",
      a: "Email us within 14 days, full refund, no awkward form. $9 should not be a stressful purchase. If the kit doesn't help you ship, we don't deserve to keep it.",
    },
    {
      q: "Is this 'passive income'?",
      a: "No. Setup takes a weekend, then you tune your content and refresh your assets — call it ~2 hours a week. The 'passive' part is that you stop trading hours one-to-one. Big difference.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="faq-section desktop-section" style={{ padding: '36px 22px', background: p.bgElev, borderTop: `1px solid ${p.border}` }}>
      <Reveal>
        <Chip p={p}>Honest answers</Chip>
        <h2 style={{
          margin: '14px 0 22px',
          fontFamily: PELLEX_FONTS.display,
          color: p.text, fontSize: 30, lineHeight: 1.05, letterSpacing: -0.5,
          fontWeight: 600,
        }}>
          The questions you'd ask a friend over coffee.
        </h2>
      </Reveal>
      <div style={{
        background: p.bgCard, borderRadius: 16,
        border: `1px solid ${p.border}`, overflow: 'hidden',
      }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: i < items.length - 1 ? `1px solid ${p.border}` : 'none' }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', background: 'transparent', border: 'none',
                padding: '16px 18px', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                textAlign: 'left',
              }}>
                <span style={{
                  color: p.text, fontSize: 14.5, fontWeight: 500,
                  fontFamily: PELLEX_FONTS.body, letterSpacing: -0.1,
                }}>{it.q}</span>
                <span style={{
                  width: 22, height: 22, borderRadius: 99,
                  background: isOpen ? p.accent : p.bgChip,
                  color: isOpen ? p.accentInk : p.textMute,
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                  transition: 'all 200ms ease',
                }}>{isOpen ? <Icon.minus/> : <Icon.plus/>}</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 220 : 0, overflow: 'hidden',
                transition: 'max-height 280ms cubic-bezier(.22,.61,.36,1)',
              }}>
                <p style={{
                  margin: 0, padding: '0 18px 18px',
                  color: p.textMute, fontSize: 13.5, lineHeight: 1.55,
                }}>{it.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Final CTA
// ─────────────────────────────────────────────────────────────
function FinalCTA({ p }) {
  return (
    <Reveal>
      <section className="final-cta-section desktop-section" style={{ padding: '52px 22px 36px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: '-30% -10% auto -10%', height: 320,
          background: `radial-gradient(60% 60% at 50% 40%, ${p.accent}1f 0%, transparent 70%)`,
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative' }}>
          <Chip p={p} accent>Your turn</Chip>
          <h2 style={{
            margin: '16px auto 14px',
            fontFamily: PELLEX_FONTS.display,
            color: p.text, fontSize: 40, lineHeight: 1.0, letterSpacing: -0.8,
            fontWeight: 600, textWrap: 'balance', maxWidth: 320,
          }}>
            Your first $9 sale<br/>
            <span style={{ color: p.accent, fontWeight: 700 }}>is closer than you think.</span>
          </h2>
          <p style={{
            color: p.textMute, fontSize: 14, lineHeight: 1.5,
            margin: '0 auto 24px', maxWidth: 320,
          }}>
            Take the free map first. If you want the shortcut, the kit is right there. No pressure either way.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <PrimaryCTA p={p} full sub="Free · No card · ~5 min read"
              onClick={() => window.pellexNav('map')}>
              Send me the 0→1 map
            </PrimaryCTA>
            <GhostCTA p={p} full onClick={() => window.pellexNav('kit')}>Skip ahead — get the $9 kit</GhostCTA>
          </div>
        </div>
      </section>
    </Reveal>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Footer
// ─────────────────────────────────────────────────────────────
function Footer({ p }) {
  return (
    <footer className="site-footer" style={{
      padding: '24px 22px 100px',
      borderTop: `1px solid ${p.border}`,
      background: p.bg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6,
          background: p.accent, color: p.accentInk,
          display: 'grid', placeItems: 'center',
          fontFamily: PELLEX_FONTS.display, fontSize: 16,  lineHeight: 1,
        }}>P</div>
        <span style={{ color: p.text, fontFamily: PELLEX_FONTS.display, fontSize: 17, letterSpacing: -0.2 }}>Pellex</span>
      </div>
      <p style={{
        margin: '0 0 18px', color: p.textMute, fontSize: 12.5, lineHeight: 1.5, maxWidth: 320,
      }}>
        Build assets · Sell shovels · Automate fulfilment. A practical guide for beginners using AI to start something small.
      </p>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 18,
      }}>
        {[
          { l: 'Playbook',         go: 'landing' },
          { l: 'Resources',        go: 'resource' },
          { l: 'Starter Kit',      go: 'kit' },
          { l: 'Pellex Business',  go: 'business' },
          { l: 'Refund policy',    go: 'landing' },
          { l: 'Contact',          go: 'landing' },
        ].map((it, i) => (
          <a key={i} href={`#${it.go}`} onClick={(e) => { e.preventDefault(); window.pellexNav(it.go); }} style={{
            color: p.textMute, fontSize: 12.5, textDecoration: 'none',
            padding: '6px 0', fontFamily: PELLEX_FONTS.body,
          }}>{it.l}</a>
        ))}
      </div>
      <div style={{
        paddingTop: 14, borderTop: `1px solid ${p.border}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{ color: p.textDim, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>
          © 2026 Pellex
        </span>
        <span style={{ color: p.textDim, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>
          v2 · redesign
        </span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// Section: Sticky bottom CTA bar (appears on scroll)
// ─────────────────────────────────────────────────────────────
function StickyCTA({ p, scrollRef, enabled }) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    if (!enabled) { setShow(false); return; }
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      setShow(el.scrollTop > 320 && el.scrollTop < el.scrollHeight - el.clientHeight - 200);
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, [scrollRef, enabled]);

  return (
    <div style={{
      position: 'fixed', left: '50%', bottom: 'calc(12px + env(safe-area-inset-bottom))', zIndex: 80,
      width: 'calc(100% - 20px)', maxWidth: 410,
      transform: show ? 'translate(-50%, 0)' : 'translate(-50%, 120%)',
      opacity: show ? 1 : 0,
      transition: 'transform 320ms cubic-bezier(.22,.61,.36,1), opacity 240ms ease',
      pointerEvents: show ? 'auto' : 'none',
    }}>
      <div style={{
        padding: '10px 10px 10px 16px', borderRadius: 18,
        background: `${p.bgElev}ee`,
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: `1px solid ${p.borderStrong}`,
        boxShadow: `0 12px 40px ${p.bg}cc, 0 1px 0 ${p.borderStrong}`,
        display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between',
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ color: p.text, fontSize: 13, fontWeight: 500, lineHeight: 1.1, marginBottom: 2 }}>
            Starter Kit — $9
          </div>
          <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            14-day refund · lifetime access
          </div>
        </div>
        <button onClick={() => window.pellexNav('kit')} style={{
          appearance: 'none', border: 'none', cursor: 'pointer',
          padding: '10px 14px', borderRadius: 12,
          background: p.accent, color: p.accentInk,
          fontFamily: PELLEX_FONTS.body, fontWeight: 700, fontSize: 13.5,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          flexShrink: 0,
        }}>
          Get it <Icon.arrow/>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  Pricing, Testimonials, FounderNote, FAQ, FinalCTA, Footer, StickyCTA,
});