// hush-web-home.jsx — the Hush marketing homepage (production).
// Real app screenshots via <PhoneShot>. Depends on globals from:
//   hush-tokens, hush-brand, hush-icons, hush-phone, hush-web-kit.

function SiteHome() {
  return (
    <div>
      <Nav />

      {/* ── HERO ─────────────────────────────────────────── */}
      <header className="hero sec">
        <div className="glow" style={{ width: 520, height: 520, top: -140, right: -120, background: 'rgba(124,169,137,0.28)' }} />
        <div className="glow" style={{ width: 420, height: 420, bottom: -160, left: -140, background: 'rgba(240,168,126,0.20)' }} />
        <Stars field={[
          { t: '14%', l: '6%', s: 14, c: W.butter, d: 0 },
          { t: '64%', l: '2%', s: 11, c: W.peach, d: 1.2 },
          { t: '22%', r: '4%', s: 12, c: W.lavender, d: 0.6 },
          { t: '78%', r: '10%', s: 15, c: W.sage, d: 1.8 },
        ]} />
        <div className="wrap hero-grid" style={{ position: 'relative', zIndex: 2 }}>
          <div>
            <Eyebrow2 color={W.sage}>The calm baby tracker</Eyebrow2>
            <h1 className="display">A baby tracker<br />that <span style={{ color: W.sage }}>exhales.</span></h1>
            <p className="hero-sub">Log feeds, naps and diapers in two taps — even at 3am, one-handed. Private by default, shared with the whole family.</p>
            <div className="hero-actions">
              <StoreBadges />
            </div>
            <div className="hero-note"><IconLock size={16} color={W.inkMute} /> End-to-end encrypted · Free for your first child · <a href="#features" style={{ color: W.sage, fontWeight: 700 }}>See how it works ↓</a></div>
          </div>
          <div className="hero-stage">
            <div className="glow" style={{ width: 360, height: 360, background: 'rgba(184,168,212,0.25)', zIndex: 0 }} />
            <PhoneShot src="img/screen-home.png" alt="Hush home screen — since last feed, quick logging and today's story" width={328} tilt={-3} float style={{ position: 'relative', zIndex: 2 }} />
          </div>
        </div>
      </header>

      {/* ── TRUST STRIP ──────────────────────────────────── */}
      <section className="sec" style={{ padding: '20px 0 10px' }}>
        <div className="wrap">
          <TrustStrip items={[
            { icon: <IconLock size={17} color={W.sage} />, label: 'End-to-end encrypted', color: W.sage },
            { icon: <IconHeart size={17} color={W.coral} />, label: 'We never sell your data', color: W.coral },
            { icon: <IconFamily size={17} color={W.sky} />, label: 'Built for the whole family', color: W.sky },
            { icon: <IconNight size={17} color={W.lavender} />, label: 'Made for the 3am feed', color: W.lavender },
          ]} />
        </div>
      </section>

      {/* ── FEATURES HEADER ──────────────────────────────── */}
      <section id="features" className="sec" style={{ padding: '74px 0 30px' }}>
        <div className="wrap">
          <Reveal>
            <div className="sec-head center">
              <Eyebrow2 color={W.peach}>What it feels like</Eyebrow2>
              <h2 className="display">Less tracking. More breathing.</h2>
              <p>Every screen does one thing, calmly. No streaks, no badges, no wall of numbers — just the gentle record of your days together.</p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── FEATURE: Two taps ────────────────────────────── */}
      <section className="sec" style={{ padding: '40px 0' }}>
        <div className="wrap">
          <Reveal>
            <div className="feat">
              <div className="feat-media">
                <div className="glow" style={{ width: 300, height: 300, background: 'rgba(124,169,137,0.22)' }} />
                <PhoneShot src="img/screen-feed.png" alt="Log a feed — bottle, breast or pump in two taps" width={292} tilt={-3} style={{ position: 'relative', zIndex: 2 }} />
              </div>
              <div className="feat-body">
                <Eyebrow2 color={W.sage}>Two-tap logging</Eyebrow2>
                <h3 className="display">Feed logged before<br />you're fully awake.</h3>
                <p>Open Hush, tap the bottle, tap the amount. Done. Every logger is thumb-reachable and back-datable, so logging never costs you a moment of rest.</p>
                <ul className="feat-list">
                  <li><Tick />Feeds, naps, diapers, solids, meds, symptoms, growth & handoff notes — eight loggers, all ≤2 taps</li>
                  <li><Tick />A glanceable “Now” screen: next nap, recent logs, time since last feed</li>
                  <li><Tick />Pin your favourites, back-date anything — nothing to set up, no streak to protect</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── FEATURE: Drift — on-device nap predictor (flagship) ── */}
      <section className="sec" style={{ padding: '80px 0', margin: '40px 0', background: 'linear-gradient(160deg, #F0EBF6 0%, #FBF5EA 72%)', overflow: 'hidden' }}>
        <div className="glow" style={{ width: 420, height: 420, top: '-8%', left: '-6%', background: 'rgba(184,168,212,0.30)' }} />
        <Stars field={[
          { t: '16%', r: '8%', s: 13, c: W.lavender, d: 0 },
          { t: '68%', r: '14%', s: 11, c: W.sage, d: 1.1 },
        ]} />
        <div className="wrap">
          <Reveal>
            <div className="feat flip" style={{ position: 'relative', zIndex: 2 }}>
              <div className="feat-media">
                <div className="glow" style={{ width: 320, height: 320, background: 'rgba(184,168,212,0.26)' }} />
                <PhoneShot src="img/screen-drift.png" alt="Drift — recommended nap schedule with the next nap window and a predicted day timeline" width={292} tilt={3} style={{ position: 'relative', zIndex: 2 }} />
              </div>
              <div className="feat-body">
                <Eyebrow2 color={W.lavender}>Drift · on-device predictor</Eyebrow2>
                <h3 className="display">Catch the nap before<br />the meltdown.</h3>
                <p>Drift predicts the next nap window so you can start winding down in time. It blends published pediatric sleep research with your baby’s own logged naps — and shows its work. No black box, no cloud: the prediction math runs entirely on your phone.</p>
                <ul className="feat-list">
                  <li><Tick color={W.lavender} />Wake-window dial + a projected day timeline, bedtime included</li>
                  <li><Tick color={W.lavender} />Feed & diaper rhythms too — research-backed intervals tuned to your logs</li>
                  <li><Tick color={W.lavender} />Every source cited in-app · 100% on-device, against your decrypted data</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── FEATURE: 3am night mode (DARK BAND) ──────────── */}
      <section className="sec" style={{ padding: '80px 0', margin: '40px 0', background: 'linear-gradient(160deg, #242034 0%, #16131f 78%)', overflow: 'hidden' }}>
        <Stars field={[
          { t: '18%', l: '8%', s: 12, c: '#C3B6E0', d: 0 },
          { t: '70%', l: '14%', s: 10, c: '#8FB3A4', d: 1 },
          { t: '30%', r: '12%', s: 13, c: '#C3B6E0', d: 0.5 },
        ]} />
        <div className="wrap">
          <Reveal>
            <div className="feat" style={{ position: 'relative', zIndex: 2 }}>
              <div className="feat-media">
                <div className="glow" style={{ width: 320, height: 320, background: 'rgba(184,168,212,0.22)' }} />
                <PhoneShot src="img/screen-3am.png" alt="3am night mode — pure black, one giant Log feed button" width={292} tilt={3} style={{ position: 'relative', zIndex: 2 }} />
              </div>
              <div className="feat-body">
                <Eyebrow2 color="#C3B6E0">Night mode</Eyebrow2>
                <h3 className="display" style={{ color: '#F3F0FA' }}>Made for the<br />3am feed.</h3>
                <p style={{ color: '#B8B2C8' }}>Pure-black, dim type, zero glare. One giant button logs the night feed without waking the baby, your partner, or your own brain — then sink straight back to sleep.</p>
                <ul className="feat-list">
                  <li><Tick color={W.lavender} /><span style={{ color: '#CFC9DE' }}>True black for OLED — barely any light</span></li>
                  <li><Tick color={W.lavender} /><span style={{ color: '#CFC9DE' }}>One-tap feed, big touch targets</span></li>
                  <li><Tick color={W.lavender} /><span style={{ color: '#CFC9DE' }}>Pull down to exit — no bright screen, ever</span></li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── FEATURE: Family timeline ─────────────────────── */}
      <section className="sec" style={{ padding: '40px 0' }}>
        <div className="wrap">
          <Reveal>
            <div className="feat flip">
              <div className="feat-media">
                <div className="glow" style={{ width: 300, height: 300, background: 'rgba(136,181,213,0.24)' }} />
                <PhoneShot src="img/screen-family.png" alt="Family — one shared, encrypted vault with roles for every caregiver" width={292} tilt={-3} style={{ position: 'relative', zIndex: 2 }} />
              </div>
              <div className="feat-body">
                <Eyebrow2 color={W.sky}>One shared timeline</Eyebrow2>
                <h3 className="display">The whole family,<br />finally in sync.</h3>
                <p>Invite co-parents, grandparents and your nanny into one encrypted vault — scan a QR to join, revoke with a tap. Everyone sees who logged what, in real time, so “did you already feed her?” simply disappears.</p>
                <ul className="feat-list">
                  <li><Tick color={W.sky} />Real-time shared log — co-parents, grandparents, nannies & daycare</li>
                  <li><Tick color={W.sky} />Invite by QR code or a private magic link · owner approves new joiners</li>
                  <li><Tick color={W.sky} />Per-caregiver permissions — who can log, edit, invite & export</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── THREE CARDS: insights / doctor / keepsake ────── */}
      <section className="sec" style={{ padding: '60px 0 30px' }}>
        <div className="wrap">
          <Reveal>
            <div className="sec-head" style={{ marginBottom: 36 }}>
              <Eyebrow2 color={W.butter}>And quietly, in the background</Eyebrow2>
              <h2 className="display">It notices, so you don't have to.</h2>
            </div>
          </Reveal>
          <div className="cards">
            {[
              { Icon: IconHeart, tint: W.lavSoft, fg: W.lavender, h: 'Milestones', p: 'Hush quietly notices the firsts — first giggle, slept through the night — and saves them. A keepsake, not a chore.' },
              { Icon: IconSymptom, tint: W.coralSoft, fg: W.coral, h: 'Sick mode', p: 'One toggle pins meds + symptoms, tracks the fever curve and wet-diaper hydration, and exports a doctor report scoped to the illness.' },
              { Icon: IconTimeline, tint: W.butterSoft, fg: '#D7A53F', h: 'Gentle stats', p: 'Feeds, sleep and diapers grouped and graphed — the rhythm forming, without a stressful wall of numbers.' },
              { Icon: IconExport, tint: W.sageMist, fg: W.sage, h: 'Doctor-ready PDF', p: 'Hand the pediatrician a clean, printable history of feeds, sleep, meds and fevers — in a single tap.' },
              { Icon: IconLock, tint: W.skySoft, fg: W.sky, h: 'Your data, yours', p: 'Encrypted backups to a file or your own Drive, plus a printable Emergency Kit with your recovery phrase. Delete everything, anytime.' },
              { Icon: IconNow, tint: W.peachMist, fg: W.peach, h: 'Calm & offline', p: 'Works fully offline. Quiet, opt-in notifications and home-screen widgets — last-fed at a glance, one-tap quick-log. Nothing nags.' },
            ].map((c, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="card">
                  <div className="ic" style={{ background: c.tint }}><c.Icon size={28} color={c.fg} /></div>
                  <h4 className="display">{c.h}</h4>
                  <p>{c.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRIVACY MANIFESTO (DARK SAGE) ────────────────── */}
      <section id="privacy" className="sec" style={{ padding: '90px 0', margin: '50px 0 0', background: 'linear-gradient(150deg, #2F4A40 0%, #1E322A 60%, #16261F 100%)', overflow: 'hidden' }}>
        <div className="glow" style={{ width: 460, height: 460, top: '20%', right: '-6%', background: 'rgba(143,179,164,0.30)' }} />
        <div className="wrap">
          <div className="feat" style={{ position: 'relative', zIndex: 2 }}>
            <div className="feat-body">
              <Eyebrow2 color="#8FB3A4">Private by design</Eyebrow2>
              <h3 className="display" style={{ color: '#EAF2EC', fontSize: 'clamp(32px, 4.4vw, 52px)' }}>You're not the<br />product.</h3>
              <p style={{ color: '#B7C9BF', fontSize: 19 }}>Other baby apps sell your family's data to advertisers, employers and brokers. We built Hush so we literally can't — your log is encrypted with a key our servers never see.</p>
              <ul className="feat-list" style={{ marginTop: 28 }}>
                <li><Tick color="#8FB3A4" /><span style={{ color: '#CFE0D6' }}>End-to-end encrypted — we store ciphertext we can't read</span></li>
                <li><Tick color="#8FB3A4" /><span style={{ color: '#CFE0D6' }}>We never sell or share your data — ever</span></li>
                <li><Tick color="#8FB3A4" /><span style={{ color: '#CFE0D6' }}>We charge for the app, not for you</span></li>
              </ul>
              <div style={{ marginTop: 34 }}>
                <a className="btn btn-light" href="lp-privacy.html">Why privacy matters →</a>
              </div>
            </div>
            <div className="feat-media">
              <PhoneShot src="img/screen-privacy.png" alt="Hush privacy report — 0 trackers, 0 bytes of baby data sent" width={292} tilt={3} style={{ position: 'relative', zIndex: 2 }} />
            </div>
          </div>
        </div>
      </section>

      {/* ── PRICING ──────────────────────────────────────── */}
      <section id="pricing" className="sec" style={{ padding: '90px 0 30px' }}>
        <div className="wrap">
          <Reveal>
            <div className="sec-head center" style={{ marginBottom: 44 }}>
              <Eyebrow2 color={W.sage}>Honest pricing</Eyebrow2>
              <h2 className="display">Free for your first child. Always.</h2>
              <p>No data to sell means a simple, honest price. Start free and upgrade only if you want the whole family and the extras.</p>
            </div>
          </Reveal>
          <Pricing />
        </div>
      </section>

      {/* ── FAQ ──────────────────────────────────────────── */}
      <section id="faq" className="sec" style={{ padding: '80px 0 30px' }}>
        <div className="wrap">
          <Reveal>
            <div className="sec-head center" style={{ marginBottom: 40 }}>
              <Eyebrow2 color={W.peach}>Questions, answered</Eyebrow2>
              <h2 className="display">The quiet details.</h2>
            </div>
          </Reveal>
          <FAQ items={FAQ_ITEMS} />
        </div>
      </section>

      {/* ── CTA BAND ─────────────────────────────────────── */}
      <section id="download" className="sec" style={{ padding: '70px 0 90px' }}>
        <div className="wrap">
          <Reveal>
            <div className="cta-band" style={{ background: 'linear-gradient(150deg, #7CA989 0%, #5a8870 100%)', textAlign: 'center' }}>
              <div className="glow" style={{ width: 360, height: 360, top: -120, left: '12%', background: 'rgba(255,255,255,0.18)' }} />
              <Stars field={[{ t: '20%', l: '10%', s: 13, c: '#fff', d: 0 }, { t: '60%', r: '12%', s: 11, c: '#fff', d: 1 }]} />
              <div style={{ position: 'relative', zIndex: 2 }}>
                <h2 style={{ color: '#fff' }}>Start tonight.<br />Sleep a little easier.</h2>
                <p style={{ color: 'rgba(255,255,255,0.88)', fontSize: 20, fontWeight: 500, maxWidth: '34ch', margin: '20px auto 0' }}>
                  Free for your first child, forever. The calm, private baby tracker the whole family can share.
                </p>
                <StoreBadges dark style={{ justifyContent: 'center', marginTop: 34 }} />
                <div style={{ marginTop: 18, color: 'rgba(255,255,255,0.82)', fontSize: 14, fontWeight: 600 }}>
                  Live now on Google Play · iOS coming later in 2026
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { SiteHome });