/* PeptideKit — AI showcase, pricing, FAQ, footer */
const { useState: useState2 } = React;

function AIShowcase() {
  return (
    <section className="section" style={{ position: 'relative' }}>
      <div className="container" style={{ display: 'grid', gap: 120 }}>

        {/* Row 1 — Kit */}
        <Reveal>
          <div className="ai-row">
            <div className="ai-phone-wrap">
              <IPhoneFrame width={300} tilt={-2} glow="cyan">
                <KitScreen/>
              </IPhoneFrame>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16, color: '#7DD3FC' }}>Meet Kit</div>
              <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: '0 0 20px' }}>
                On-device.<br/>
                Confidential.<br/>
                <span className="gradient-text">Smart.</span>
              </h3>
              <p style={{ color: 'var(--ink-70)', fontSize: 17, lineHeight: 1.65, margin: '0 0 24px', maxWidth: 520 }}>
                Kit lives inside the app and reads your dose log, stack, and weight trend on your device.
                Ask "when did I last take BPC-157?" or "what's my weight trend?" and Kit answers from your real data —
                never a generic search result. Five free questions a day. Unlimited with Pro.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                <Bullet>On-device data access</Bullet>
                <Bullet>Tool-use grounded answers</Bullet>
                <Bullet>No medical advice — observation, not prescription</Bullet>
              </ul>
            </div>
          </div>
        </Reveal>

        {/* Row 2 — Coach */}
        <Reveal>
          <div className="ai-row reverse">
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <span style={{
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.2em',
                  padding: '4px 10px', borderRadius: 999,
                  background: 'linear-gradient(90deg, rgba(139,92,246,0.20), rgba(0,217,255,0.20))',
                  border: '1px solid rgba(139,92,246,0.40)',
                  color: '#C4B5FD',
                }}>PRO</span>
                <span className="eyebrow" style={{ color: '#C4B5FD' }}>Premium · Live AI Avatar</span>
              </div>
              <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: '0 0 20px' }}>
                Coach.<br/>
                <span className="gradient-text">Face-to-face with a peptide expert.</span>
              </h3>
              <p style={{ color: 'var(--ink-70)', fontSize: 17, lineHeight: 1.65, margin: '0 0 24px', maxWidth: 520 }}>
                Coach is a live video chat with an AI avatar trained on a curated peptide knowledge base.
                Talk through your protocol, side effects, and titration in real time — voice and video,
                not just text. Available exclusively on PeptideKit Pro.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                <Bullet>Live AI avatar — voice and video</Bullet>
                <Bullet>Trained on curated peptide research</Bullet>
                <Bullet>Pro subscribers only</Bullet>
              </ul>
            </div>
            <div className="ai-phone-wrap">
              <IPhoneFrame width={300} tilt={2} glow="violet">
                <CoachScreen/>
              </IPhoneFrame>
            </div>
          </div>
        </Reveal>

      </div>
    </section>
  );
}

function Bullet({ children }) {
  return (
    <li style={{ display: 'flex', alignItems: 'flex-start', gap: 12, color: 'var(--ink)' }}>
      <span style={{
        flex: '0 0 22px', width: 22, height: 22, borderRadius: 99,
        background: 'rgba(0,217,255,0.12)', border: '1px solid rgba(0,217,255,0.40)',
        color: '#7DD3FC', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        marginTop: 2,
      }}>
        <Icon name="check" size={13}/>
      </span>
      <span style={{ fontSize: 15, color: 'var(--ink-70)', lineHeight: 1.55 }}>{children}</span>
    </li>
  );
}

/* Stylized Coach phone — original placeholder mock */
function CoachPhone() {
  return (
    <div className="phone-glow" style={{ width: 300, transform: 'rotate(2deg)' }}>
      <div style={{
        position: 'relative',
        aspectRatio: '300 / 620',
        borderRadius: 44,
        padding: 8,
        background: 'linear-gradient(180deg, #1a1d35 0%, #0a0c1a 100%)',
        boxShadow: '0 30px 60px rgba(0,0,0,0.6), 0 0 30px rgba(109,40,217,0.30), inset 0 0 0 1px rgba(255,255,255,0.06)',
      }}>
        {/* notch */}
        <div style={{
          position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 24, borderRadius: 99, background: '#000', zIndex: 2,
        }}/>
        <div style={{
          width: '100%', height: '100%',
          borderRadius: 36,
          background: 'radial-gradient(120% 70% at 50% 0%, #1c1145 0%, #0a0c1a 60%)',
          padding: '60px 18px 18px',
          display: 'flex', flexDirection: 'column', gap: 12,
          overflow: 'hidden',
        }}>
          {/* header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
            <CoachAvatar/>
            <div>
              <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600 }}>Coach</div>
              <div style={{ fontSize: 10, color: '#7DD3FC' }}>● Online · Pro</div>
            </div>
          </div>

          {/* messages */}
          <ChatBubble side="left">
            What's a typical retatrutide titration schedule, and when do most users plateau?
          </ChatBubble>
          <ChatBubble side="right" coach>
            Most clinical protocols start at 2&nbsp;mg weekly for 4 weeks, then step to 4&nbsp;mg, 8&nbsp;mg, and 12&nbsp;mg in 4-week intervals.
            Plateaus typically appear around weeks 16–20 — but that's protocol-dependent.
          </ChatBubble>
          <ChatBubble side="left">Side-effect management at the 8 mg step?</ChatBubble>
          <CoachTyping/>

          {/* input */}
          <div style={{
            marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8,
            padding: '10px 12px', borderRadius: 14,
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
          }}>
            <div style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>Ask Coach…</div>
            <div style={{
              width: 24, height: 24, borderRadius: 99,
              background: 'linear-gradient(135deg, #8B5CF6, #00D9FF)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#0a0c1a" strokeWidth="3" strokeLinecap="round">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
function CoachAvatar() {
  return (
    <div style={{
      width: 32, height: 32, borderRadius: 99,
      background: 'radial-gradient(circle at 30% 30%, #C4B5FD 0%, #8B5CF6 40%, #3B82F6 80%)',
      boxShadow: '0 0 16px rgba(139,92,246,0.6), inset 0 0 8px rgba(255,255,255,0.30)',
    }}/>
  );
}
function ChatBubble({ side, coach, children }) {
  const isLeft = side === 'left';
  return (
    <div style={{
      alignSelf: isLeft ? 'flex-start' : 'flex-end',
      maxWidth: '85%',
      padding: '8px 12px',
      borderRadius: 14,
      borderTopLeftRadius: isLeft ? 4 : 14,
      borderTopRightRadius: isLeft ? 14 : 4,
      fontSize: 11, lineHeight: 1.45,
      color: isLeft ? 'rgba(255,255,255,0.85)' : '#fff',
      background: isLeft
        ? 'rgba(255,255,255,0.06)'
        : (coach ? 'linear-gradient(135deg, rgba(139,92,246,0.40), rgba(59,130,246,0.40))' : 'rgba(59,130,246,0.30)'),
      border: isLeft ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(139,92,246,0.40)',
    }}>{children}</div>
  );
}
function CoachTyping() {
  return (
    <div style={{
      alignSelf: 'flex-end', display: 'flex', gap: 4, padding: '10px 14px',
      borderRadius: 14, background: 'rgba(139,92,246,0.20)', border: '1px solid rgba(139,92,246,0.30)',
    }}>
      {[0,1,2].map(i => (
        <span key={i} style={{
          width: 5, height: 5, borderRadius: 99, background: '#C4B5FD',
          animation: 'pulse 1.2s ease-in-out infinite',
          animationDelay: `${i * 0.15}s`,
        }}/>
      ))}
    </div>
  );
}

/* ---------- Pricing ---------- */
function Pricing() {
  const plans = [
    { name: 'Monthly', price: '$9.99', cadence: '/month', sub: 'Full access. Cancel anytime.', cta: 'Start Monthly' },
    { name: 'Yearly',  price: '$99.99', cadence: '/year', under: '$8.33/month, billed yearly', sub: 'Most popular for serious users.', cta: 'Start Yearly', highlight: true },
    { name: 'Lifetime', price: '$199.99', cadence: 'once', sub: 'Pay once. Use forever.', cta: 'Get Lifetime', extra: 'All future features included' },
  ];
  return (
    <section id="pricing" className="section" style={{ position: 'relative' }}>
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: '20%', transform: 'translateX(-50%)',
        width: 600, height: 400, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(109,40,217,0.30), transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }}/>
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 60 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Pricing</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', margin: '0 0 16px' }}>
              Simple. <span className="gradient-text">Transparent.</span>
            </h2>
            <p style={{ color: 'var(--ink-70)', fontSize: 17, maxWidth: 520, margin: '0 auto' }}>
              Free to start. Pro unlocks unlimited Kit and Coach.
            </p>
          </div>
        </Reveal>

        <div className="pricing-grid">
          {plans.map((p, i) => (
            <Reveal key={p.name} delay={i * 80}>
              <PriceCard plan={p}/>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <p style={{
            marginTop: 40, textAlign: 'center', color: 'var(--ink-50)', fontSize: 13, maxWidth: 700, margin: '40px auto 0',
          }}>
            Free tier: 5 Kit messages per day, full tracker and calculator. Pro tier unlocks unlimited Kit + Coach AI.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function PriceCard({ plan }) {
  const isHi = plan.highlight;
  return (
    <div style={{ position: 'relative' }}>
      {isHi && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          padding: '6px 14px', borderRadius: 99,
          background: 'linear-gradient(90deg, #8B5CF6, #00D9FF)',
          color: '#0a0c1a', fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
          boxShadow: '0 10px 30px rgba(0,217,255,0.30)',
          zIndex: 2,
        }}>BEST VALUE</div>
      )}
      <div className="glass" style={{
        padding: 32,
        height: '100%',
        position: 'relative',
        background: isHi
          ? 'linear-gradient(180deg, rgba(139,92,246,0.10) 0%, rgba(0,217,255,0.04) 100%)'
          : undefined,
        border: isHi ? '1px solid transparent' : undefined,
        backgroundClip: isHi ? 'padding-box' : undefined,
      }}>
        {isHi && <GradientBorder/>}
        <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: 'var(--ink-70)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 16 }}>
          {plan.name}
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
          <span className="display" style={{ fontSize: 44, fontWeight: 700 }}>{plan.price}</span>
          <span style={{ color: 'var(--ink-50)', fontSize: 15 }}>{plan.cadence}</span>
        </div>
        {plan.under && <div style={{ color: '#7DD3FC', fontSize: 13, marginBottom: 4 }}>{plan.under}</div>}
        <div style={{ color: 'var(--ink-70)', fontSize: 14, marginBottom: 24, minHeight: 20 }}>{plan.sub}</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'grid', gap: 10 }}>
          <Bullet>Unlimited Kit chat</Bullet>
          <Bullet>Coach AI access</Bullet>
          <Bullet>Vial scan</Bullet>
          <Bullet>All future features</Bullet>
          {plan.extra && <Bullet>{plan.extra}</Bullet>}
        </ul>
        <a href="#" className={isHi ? 'btn btn-primary' : 'btn btn-ghost'} style={{
          width: '100%', justifyContent: 'center',
          background: isHi ? 'linear-gradient(90deg, #fff, #E0F2FE)' : undefined,
        }}>
          {plan.cta}
        </a>
      </div>
    </div>
  );
}
function GradientBorder() {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, borderRadius: 20, padding: 1,
      background: 'linear-gradient(135deg, #8B5CF6, #00D9FF)',
      WebkitMask: 'linear-gradient(#000, #000) content-box, linear-gradient(#000, #000)',
      WebkitMaskComposite: 'xor', maskComposite: 'exclude',
      pointerEvents: 'none',
    }}/>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    { q: 'Is PeptideKit medical advice?',
      a: 'No. PeptideKit is an informational tracking utility. It does not give medical advice, dose recommendations, or replace your healthcare provider. The Kit assistant is descriptive ("3 days since last dose"), never prescriptive.' },
    { q: 'Where does my data live?',
      a: 'On your iPhone. PeptideKit uses Apple CloudKit private database — your data is end-to-end encrypted and synced across your own devices via iCloud. We never see it.' },
    { q: 'Does the AI know my data?',
      a: 'Kit reads your local stack and dose log on-device when you ask a question. The AI provider only sees the question and any relevant tool results — never your raw history. Coach uses a separate curated peptide knowledge base.' },
    { q: 'What peptides does it support?',
      a: "Any peptide you log — GLP-1 agonists (semaglutide, tirzepatide, retatrutide), BPC-157, TB-500, growth hormone analogs, and more. PeptideKit doesn't sell peptides or recommend sources." },
    { q: 'How do I cancel?',
      a: 'Subscriptions cancel through your iPhone Settings → Apple ID → Subscriptions. Lifetime is non-refundable but never expires.' },
    { q: 'Is it on Android?',
      a: 'Not yet. iPhone and iPad only.' },
  ];
  const [open, setOpen] = useState2(0);
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 820 }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>FAQ</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', margin: 0 }}>
              Questions, answered.
            </h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gap: 12 }}>
          {items.map((it, i) => (
            <Reveal key={it.q} delay={i * 40}>
              <FAQItem item={it} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div className="glass" style={{ padding: 0, overflow: 'hidden' }}>
      <button onClick={onToggle} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, padding: '22px 24px', textAlign: 'left',
      }}>
        <span style={{ fontFamily: 'Geist', fontSize: 17, fontWeight: 500, color: '#fff' }}>{item.q}</span>
        <span style={{
          flex: '0 0 32px', width: 32, height: 32, borderRadius: 99,
          background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.10)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform 250ms ease, background 250ms ease',
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
          color: 'var(--ink-70)',
        }}>
          <Icon name="chevron" size={16}/>
        </span>
      </button>
      <div style={{
        maxHeight: isOpen ? 400 : 0,
        overflow: 'hidden',
        transition: 'max-height 350ms ease',
      }}>
        <div style={{
          padding: '0 24px 24px',
          color: 'var(--ink-70)', fontSize: 15, lineHeight: 1.6,
        }}>{item.a}</div>
      </div>
    </div>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="section" style={{ position: 'relative' }}>
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 800, height: 500,
        background: 'radial-gradient(50% 50% at 50% 50%, rgba(109,40,217,0.45) 0%, rgba(59,130,246,0.20) 40%, transparent 70%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }}/>
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 800 }}>
        <Reveal>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', margin: '0 0 20px' }}>
            Your stack, <span className="gradient-text">finally organized.</span>
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <p style={{ color: 'var(--ink-70)', fontSize: 18, margin: '0 0 36px' }}>
            Free to start. No credit card. No spreadsheets.
          </p>
        </Reveal>
        <Reveal delay={180}>
          <AppStoreBadge size="lg"/>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 56, paddingBottom: 40 }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }} className="footer-grid">
        <div>
          <Logo/>
          <p style={{ marginTop: 18, color: 'var(--ink-50)', fontSize: 13, lineHeight: 1.6, maxWidth: 360 }}>
            PeptideKit is for informational purposes only. Not medical advice. Consult your clinician for medical decisions.
            <br/><br/>
            © 2026 AISupplyGuy.
          </p>
        </div>
        <FooterCol title="Product">
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </FooterCol>
        <FooterCol title="Company">
          <a href="privacy.html">Privacy</a>
          <a href="#">Terms</a>
          <a href="mailto:support@peptidekit.app">Support</a>
        </FooterCol>
        <FooterCol title="Get the app">
          <AppStoreBadge/>
        </FooterCol>
      </div>
    </footer>
  );
}
function FooterCol({ title, children }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-70)', marginBottom: 16 }}>
        {title}
      </div>
      <div style={{ display: 'grid', gap: 10, fontSize: 14, color: 'var(--ink-70)' }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { AIShowcase, Pricing, FAQ, FinalCTA, Footer });