// hush-web-landings.jsx — focused, single-angle campaign landing pages.
// One per winning ad creative. Depends on globals from:
//   hush-tokens, hush-brand, hush-icons, hush-phone, hush-web-kit.

function Landing({ cfg }) {
  const dark = cfg.dark;
  const fd = cfg.fullDark;

  return (
    <div style={{ background: fd ? '#16131f' : undefined }}>
      {/* minimal nav: logo + single CTA */}
      <nav className="nav" style={fd ? { background: 'rgba(22,19,31,0.72)', borderBottomColor: 'rgba(255,255,255,0.08)' } : {}}>
        <div className="wrap nav-in">
          <a href="index.html" aria-label="Hush home"><Lockup markSize={30} wordSize={30} color={fd ? '#F3F0FA' : W.ink} accent={W.sage} /></a>
          <div className="nav-cta-wrap">
            <a className="btn btn-primary btn-sm" href="#get">Get Hush — free</a>
          </div>
        </div>
      </nav>

      {/* ── HERO ─────────────────────────────────────────── */}
      <header className="hero sec" style={{ background: cfg.heroBg, padding: '64px 0 64px', marginBottom: 0 }}>
        {cfg.glow && <div className="glow" style={cfg.glow} />}
        {cfg.stars && <Stars field={cfg.stars} />}
        <div className="wrap hero-grid" style={{ position: 'relative', zIndex: 2 }}>
          <div>
            <Eyebrow2 color={cfg.accent}>{cfg.eyebrow}</Eyebrow2>
            <h1 className="display" style={{ color: cfg.headInk }}>{cfg.headline}</h1>
            <p className="hero-sub" style={{ color: cfg.subInk, maxWidth: '34ch' }}>{cfg.sub}</p>
            <div className="hero-actions">
              <StoreBadges dark={dark} />
            </div>
            <div style={{ ...T.bL, color: cfg.noteInk, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 18 }}>
              <IconCheck size={16} color={cfg.accent} /> {cfg.note}
            </div>
          </div>
          <div className="hero-stage">
            <div className="glow" style={{ width: 320, height: 320, background: cfg.phoneGlow }} />
            <PhoneShot src={cfg.phoneSrc} alt={cfg.phoneAlt} width={cfg.phoneW || 312} tilt={cfg.tilt || -3} float style={{ position: 'relative', zIndex: 2 }} />
          </div>
        </div>
      </header>

      {/* ── PROOF (3 reasons) ────────────────────────────── */}
      <section className="sec" style={{ padding: '76px 0 76px' }}>
        <div className="wrap">
          <Reveal>
            <div className="sec-head center" style={{ marginBottom: 40 }}>
              <h2 className="display" style={{ color: fd ? '#F3F0FA' : undefined }}>{cfg.proofTitle}</h2>
            </div>
          </Reveal>
          <div className="cards">
            {cfg.proof.map((c, i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="card" style={fd ? { background: '#221d31', boxShadow: '0 18px 40px -22px rgba(0,0,0,0.6)' } : {}}>
                  <div className="ic" style={{ background: c.tint }}><c.Icon size={28} color={c.fg} /></div>
                  <h4 className="display" style={fd ? { color: '#F3F0FA' } : {}}>{c.h}</h4>
                  <p style={fd ? { color: '#B8B2C8' } : {}}>{c.p}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* ── CTA BAND ─────────────────────────────────────── */}
      <section id="get" className="sec" style={{ padding: '50px 0 90px' }}>
        <div className="wrap">
          <Reveal>
            <div className="cta-band" style={{ background: cfg.ctaBg, textAlign: 'center' }}>
              <div className="glow" style={{ width: 360, height: 360, top: -120, left: '14%', background: 'rgba(255,255,255,0.18)' }} />
              <div style={{ position: 'relative', zIndex: 2 }}>
                <h2 style={{ color: cfg.ctaInk }}>{cfg.ctaHead}</h2>
                <p style={{ color: cfg.ctaSub, fontSize: 20, fontWeight: 500, maxWidth: '34ch', margin: '18px auto 0' }}>{cfg.ctaText}</p>
                <StoreBadges dark={cfg.ctaDarkBadge} style={{ justifyContent: 'center', marginTop: 32 }} />
                <div style={{ marginTop: 16, color: cfg.ctaSub, fontSize: 14, fontWeight: 600 }}>Live now on Google Play · iOS coming later in 2026</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer dark={fd} />
    </div>);
}

// ── Config 1 — PRIVACY ("you're not the product") ────────────
function LandingPrivacy() {
  return <Landing cfg={{
    dark: true, accent: '#8FB3A4', tilt: 3,
    heroBg: 'linear-gradient(150deg, #2F4A40 0%, #1E322A 60%, #16261F 100%)',
    glow: { width: 480, height: 480, top: '6%', right: '-8%', background: 'rgba(143,179,164,0.30)' },
    phoneGlow: 'rgba(143,179,164,0.26)',
    eyebrow: 'End-to-end encrypted',
    headline: <>You're not<br />the <span style={{ color: '#8FB3A4' }}>product.</span></>,
    headInk: '#EAF2EC', subInk: '#B7C9BF', noteInk: '#9DB3A7',
    sub: "Every other baby app sells your family's data. We built Hush so we literally can't.",
    note: 'Your key, never our servers',
    phoneSrc: 'img/screen-privacy.png', phoneAlt: 'Hush privacy report — 0 trackers, 0 bytes of baby data sent',
    proofTitle: 'Privacy you can actually verify.',
    proof: [
    { Icon: IconLock, tint: W.sageMist, fg: W.sage, h: 'Encrypted end-to-end', p: 'Your log is sealed on your device with a key our servers never see. We store ciphertext we genuinely cannot read.' },
    { Icon: IconHeart, tint: W.coralSoft, fg: W.coral, h: 'We never sell data', p: 'We don’t sell or share your data with advertisers, employers or brokers — and we can’t. Your baby’s data is encrypted and never touches an ad SDK.' },
    { Icon: IconCheck, tint: W.peachMist, fg: W.peach, h: 'You\u2019re the customer', p: 'We charge a few dollars for the app instead of mining your family. The incentives finally point the right way.' }],
    ctaBg: 'linear-gradient(150deg, #2F4A40 0%, #1E322A 70%)', ctaInk: '#EAF2EC', ctaSub: 'rgba(183,201,191,0.92)', ctaDarkBadge: true,
    ctaHead: <>Keep it<br />between you.</>,
    ctaText: 'The private baby tracker the whole family can share. Free for your first child.'
  }} />;
}

// ── Config 2 — CALM / 3AM ────────────────────────────────────
function LandingCalm() {
  return <Landing cfg={{
    dark: true, fullDark: true, accent: '#C3B6E0', tilt: 3,
    heroBg: 'linear-gradient(160deg, #242034 0%, #16131f 78%)',
    glow: { width: 460, height: 460, top: '8%', right: '-6%', background: 'rgba(184,168,212,0.26)' },
    phoneGlow: 'rgba(184,168,212,0.24)',
    stars: [{ t: '20%', l: '8%', s: 13, c: '#C3B6E0', d: 0 }, { t: '66%', l: '14%', s: 10, c: '#8FB3A4', d: 1 }, { t: '30%', r: '16%', s: 12, c: '#C3B6E0', d: .5 }],
    eyebrow: 'The 3am feed',
    headline: <>Made for<br /><span style={{ color: '#C3B6E0' }}>the 3am feed.</span></>,
    headInk: '#F3F0FA', subInk: '#B8B2C8', noteInk: '#9089A6',
    sub: 'Pure-black, dim type, no glare. Log the 3am feed in two taps — without waking anyone.',
    note: 'Two taps, one hand, half asleep',
    phoneSrc: 'img/screen-3am.png', phoneAlt: 'Hush 3am night mode — pure black with one giant Log feed button',
    proofTitle: 'Built for the quietest hour.',
    proof: [
    { Icon: IconNight, tint: W.lavSoft, fg: W.lavender, h: 'No glare at 3am', p: 'True-black night mode with dim type. No screen-burn to the eyes, no light spilling across the nursery.' },
    { Icon: IconBolt, tint: W.sageMist, fg: W.sage, h: 'Two taps, done', p: 'Open, tap the bottle, tap the side. Big touch targets designed for one hand and a half-asleep brain.' },
    { Icon: IconHeart, tint: W.peachMist, fg: W.peach, h: 'No streaks to protect', p: 'No badges, no nudges, no guilt. Log it, put the phone down, and get straight back to sleep.' }],
    ctaBg: 'linear-gradient(160deg, #242034 0%, #16131f 78%)', ctaInk: '#F3F0FA', ctaSub: 'rgba(184,178,200,0.92)', ctaDarkBadge: true,
    ctaHead: <>Tonight will be<br />a little calmer.</>,
    ctaText: 'The calm baby tracker that doesn\u2019t make you work for it. Free for your first child.'
  }} />;
}

// ── Config 3 — FAMILY ────────────────────────────────────────
function LandingFamily() {
  return <Landing cfg={{
    dark: false, accent: W.sky, tilt: -3,
    heroBg: `radial-gradient(ellipse 90% 60% at 80% 0%, ${W.skySoft} 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 0% 100%, ${W.sageMist} 0%, transparent 60%), linear-gradient(180deg, #FBF5EA 0%, #F5EAD6 100%)`,
    glow: { width: 420, height: 420, top: '10%', right: '-4%', background: 'rgba(136,181,213,0.28)' },
    phoneGlow: 'rgba(136,181,213,0.30)',
    stars: [{ t: '18%', l: '6%', s: 13, c: W.sky, d: 0 }, { t: '72%', l: '3%', s: 11, c: W.sage, d: 1.2 }],
    eyebrow: 'For the whole family',
    headline: <>The whole family,<br /><span style={{ color: W.sky }}>one timeline.</span></>,
    headInk: W.ink, subInk: W.inkSoft, noteInk: W.inkMute,
    sub: 'Invite co-parents, grandparents and your nanny. Everyone sees who logged what, in real time.',
    note: 'No more “did you already feed her?”',
    phoneSrc: 'img/screen-family.png', phoneAlt: 'Hush family screen — one shared encrypted vault with roles for every caregiver',
    proofTitle: 'One source of truth for everyone.',
    proof: [
    { Icon: IconFamily, tint: W.skySoft, fg: W.sky, h: 'Shared in real time', p: 'Every caregiver logs into one timeline and sees updates the instant they happen — across every phone.' },
    { Icon: IconSettings, tint: W.sageMist, fg: W.sage, h: 'Roles you control', p: 'Owner, co-parent, helper. Decide who can log, edit and invite — and change it any time.' },
    { Icon: IconLock, tint: W.lavSoft, fg: W.lavender, h: 'Encrypted for all', p: 'One shared, end-to-end encrypted vault. Private for the whole family, not just for you.' }],
    ctaBg: 'linear-gradient(150deg, #88B5D5 0%, #6B97b8 100%)', ctaInk: '#fff', ctaSub: 'rgba(255,255,255,0.9)', ctaDarkBadge: true,
    ctaHead: <>Get everyone<br />on the same page.</>,
    ctaText: 'Invite the whole family to one calm, private timeline. Free for your first child.'
  }} />;
}

Object.assign(window, { Landing, LandingPrivacy, LandingCalm, LandingFamily });