/* PeptideKit landing — sections */
const { useEffect, useState } = React;

function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all 250ms ease',
      backdropFilter: 'blur(18px) saturate(140%)',
      WebkitBackdropFilter: 'blur(18px) saturate(140%)',
      background: scrolled ? 'rgba(7,9,26,0.78)' : 'rgba(7,9,26,0.30)',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.08)' : '1px solid transparent',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64,
      }}>
        <Logo/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="nav-links">
          <a href="#features" style={navLink}>Features</a>
          <a href="#pricing" style={navLink}>Pricing</a>
          <a href="#faq" style={navLink}>FAQ</a>
          <a href="#" className="btn btn-primary" style={{ padding: '9px 16px', fontSize: 13, whiteSpace: 'nowrap' }}>
            <svg width="14" height="14" viewBox="0 0 384 512" fill="currentColor" aria-hidden style={{ marginRight: 2 }}>
              <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
            </svg>
            App Store
          </a>
        </div>
      </div>
    </nav>
  );
}
const navLink = { fontSize: 14, color: 'var(--ink-70)', fontWeight: 500, transition: 'color 200ms' };

function Hero() {
  return (
    <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 80, overflow: 'hidden' }}>
      {/* Hero radial glow */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: 'radial-gradient(50% 50% at 50% 45%, rgba(109,40,217,0.45) 0%, rgba(59,130,246,0.30) 30%, rgba(0,217,255,0.10) 55%, transparent 75%)',
      }}/>
      <Bokeh count={18}/>
      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 24 }}>iOS · iPhone &amp; iPad</div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="display" style={{
            fontSize: 'clamp(48px, 7.5vw, 96px)',
            margin: '0 0 24px',
            maxWidth: 1000, marginInline: 'auto',
          }}>
            Track your stack.<br/>
            <span className="gradient-text">Transform your body.</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)',
            color: 'var(--ink-70)',
            maxWidth: 660, margin: '0 auto 36px',
            lineHeight: 1.6,
          }}>
            PeptideKit is the modern way to log doses, calculate reconstitution math,
            and get instant AI answers about your protocol — all on your iPhone.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <AppStoreBadge size="lg"/>
            <a href="#features" className="btn btn-ghost" style={{ padding: '14px 22px' }}>
              See features <Icon name="chevron" size={16}/>
            </a>
          </div>
        </Reveal>

        {/* Hero phone */}
        <Reveal delay={300}>
          <div style={{ marginTop: 64, display: 'flex', justifyContent: 'center' }}>
            <div className="phone-float">
              <IPhoneFrame width={320} tilt={-2} glow="cyan">
                <TodayScreen/>
              </IPhoneFrame>
            </div>
          </div>
        </Reveal>

        <Reveal delay={420}>
          <div style={{
            marginTop: 48, display: 'flex', flexWrap: 'wrap', justifyContent: 'center',
            gap: 28, color: 'var(--ink-50)', fontSize: 13, fontWeight: 500,
          }}>
            <TrustItem>Built for peptide users</TrustItem>
            <TrustDot/>
            <TrustItem>No medical advice</TrustItem>
            <TrustDot/>
            <TrustItem>Your data stays on your device</TrustItem>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
function TrustItem({ children }) {
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>{children}</span>;
}
function TrustDot() {
  return <span style={{ width: 4, height: 4, borderRadius: 99, background: 'var(--ink-30)' }}/>;
}

function Features() {
  const items = [
    { icon: 'layers',  title: 'Stack tracking',         body: 'Every peptide, every dose, every cycle. One organized stack.' },
    { icon: 'bell',    title: 'Smart reminders',         body: 'Know when your next dose is due. No more spreadsheet.' },
    { icon: 'calc',    title: 'Reconstitution calculator', body: 'Vial mg + BAC water → exact units to draw on your syringe.' },
    { icon: 'scan',    title: 'Vial scan',               body: 'Point your camera at a vial label. Brand, peptide, dose, lot, expiry — extracted instantly.' },
    { icon: 'trend',   title: 'Weight + insights',       body: 'Trends, milestones, weekly averages. Real data, real progress.' },
    { icon: 'sparkles',title: 'Kit AI assistant',        body: 'Ask anything about your stack. Kit reads your data on-device and answers.' },
  ];
  return (
    <section id="features" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Built for the work</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', margin: 0 }}>
              Everything your stack needs.<br/>
              <span className="gradient-text">Nothing it doesn't.</span>
            </h2>
          </div>
        </Reveal>
        <div className="feature-grid">
          {items.map((f, i) => (
            <Reveal key={f.title} delay={i * 60}>
              <FeatureCard {...f}/>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ icon, title, body }) {
  return (
    <div className="glass" style={{
      padding: 28, height: '100%',
      transition: 'transform 300ms ease, border-color 300ms ease',
    }}
      onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(0,217,255,0.30)'}
      onMouseLeave={e => e.currentTarget.style.borderColor = ''}
    >
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: 'linear-gradient(135deg, rgba(59,130,246,0.18), rgba(0,217,255,0.10))',
        border: '1px solid rgba(0,217,255,0.30)',
        color: '#7DD3FC',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 20,
        boxShadow: '0 0 20px rgba(0,217,255,0.20), inset 0 0 12px rgba(0,217,255,0.08)',
      }}>
        <Icon name={icon} size={22}/>
      </div>
      <div style={{ fontFamily: 'Geist', fontSize: 19, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em' }}>
        {title}
      </div>
      <div style={{ color: 'var(--ink-70)', fontSize: 15, lineHeight: 1.55 }}>
        {body}
      </div>
    </div>
  );
}

Object.assign(window, { Navbar, Hero, Features });