// hush-web-kit.jsx — shared marketing-site primitives.
// Depends on globals: W, T (hush-tokens), Lockup (hush-brand), Icon* (hush-icons), Star (hush-tokens).

const { useState, useEffect, useRef } = React;

// ── Reveal-on-scroll wrapper ─────────────────────────────────
function Reveal({ children, delay = 0, className = '', style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { setTimeout(() => e.target.classList.add('in'), delay); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={`reveal ${className}`} style={style}>{children}</div>;
}

// ── Google Play badge (live) ─────────────────────────────────
function PlayBadge({ dark = false, href = 'https://play.google.com/store/apps/details?id=ca.mapleelegance.hush' }) {
  return (
    <a href={href} target="_blank" rel="noopener" className="play-badge" style={dark ? { background: '#fff', color: W.ink } : {}}>
      <svg width="22" height="24" viewBox="0 0 24 26" aria-hidden="true">
        <path d="M2 2.5 L2 13 L13 13 Z" fill="#00A0FF"/>
        <path d="M2 13 L2 23.5 L13 13 Z" fill="#00DE76"/>
        <path d="M2 2.5 L13 13 L21.5 13 Z" fill="#FFD600"/>
        <path d="M2 23.5 L13 13 L21.5 13 Z" fill="#FF3D44"/>
      </svg>
      <span>
        <small>Get it on</small>
        <strong>Google Play</strong>
      </span>
    </a>
  );
}

// ── App Store badge (coming soon — intentionally inert) ──────
function AppStoreBadge({ dark = false }) {
  return (
    <span className={`store-soon${dark ? ' on-dark' : ''}`} role="img" aria-label="Coming soon to the Apple App Store" title="Coming to the App Store later in 2026">
      <svg width="22" height="24" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
        <path d="M16.37 1.43c0 1.14-.49 2.27-1.18 3.08-.74.9-1.99 1.57-2.99 1.57-.12 0-.23-.02-.3-.03-.01-.06-.04-.22-.04-.39 0-1.15.57-2.27 1.21-2.98C13.88 1.74 15.22 1.04 16.33 1c.03.13.04.28.04.43zM20.93 17.14c-.03.07-.46 1.58-1.52 3.12-.94 1.34-1.94 2.71-3.43 2.74-1.5.03-1.98-.89-3.7-.89-1.71 0-2.24.86-3.66.92-1.51.06-2.62-1.48-3.57-2.83-1.95-2.76-3.42-7.85-1.4-11.32.97-1.72 2.71-2.81 4.6-2.84 1.46-.03 2.84.99 3.73.99.89 0 2.56-1.22 4.32-1.04.73.03 2.78.3 4.1 2.22-.11.07-2.45 1.43-2.42 4.27.03 3.39 2.96 4.52 3 4.53z"/>
      </svg>
      <span>
        <small>Coming soon to</small>
        <strong>App Store</strong>
      </span>
      <em className="store-soon-pill">2026</em>
    </span>
  );
}

// Pair of store badges, used in hero + CTA
function StoreBadges({ dark = false, style = {} }) {
  return (
    <div className="store-row" style={style}>
      <PlayBadge dark={dark} />
      <AppStoreBadge dark={dark} />
    </div>
  );
}

// ── Nav ──────────────────────────────────────────────────────
function Nav({ links = true, cta = 'Get Hush — free' }) {
  return (
    <nav className="nav">
      <div className="wrap nav-in">
        <a href="index.html" aria-label="Hush home">
          <Lockup markSize={30} wordSize={30} color={W.ink} accent={W.sage} />
        </a>
        {links && (
          <div className="nav-links">
            <a className="nav-link" href="index.html#features">Features</a>
            <a className="nav-link" href="index.html#privacy">Privacy</a>
            <a className="nav-link" href="index.html#pricing">Pricing</a>
            <a className="nav-link" href="index.html#faq">FAQ</a>
          </div>
        )}
        <div className="nav-cta-wrap">
          <a className="btn btn-primary btn-sm" href="index.html#download">{cta}</a>
        </div>
      </div>
    </nav>
  );
}

// ── Eyebrow ──────────────────────────────────────────────────
function Eyebrow2({ children, color = W.sage }) {
  return (
    <div className="eyebrow" style={{ color }}>
      <span className="rule" /> {children}
    </div>
  );
}

// ── Trust chips strip ────────────────────────────────────────
function TrustStrip({ items }) {
  return (
    <div className="chips" style={{ justifyContent: 'center' }}>
      {items.map((it, i) => (
        <span key={i} className="chip" style={{ color: it.color || W.ink }}>
          {it.icon}{it.label}
        </span>
      ))}
    </div>
  );
}

// ── Check bullet ─────────────────────────────────────────────
function Tick({ color = W.sage, check = '#fff' }) {
  return (
    <span style={{
      flexShrink: 0, width: 24, height: 24, borderRadius: 8, marginTop: 1,
      background: color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <IconCheck size={15} color={check} />
    </span>
  );
}

// ── Decorative twinkle stars over a region ───────────────────
function Stars({ field = [] }) {
  return <>{field.map((s, i) => (
    <span key={i} className="star-deco" style={{ top: s.t, left: s.l, right: s.r, animationDelay: `${s.d || 0}s` }}>
      <Star size={s.s || 13} color={s.c || W.butter} />
    </span>
  ))}</>;
}

// ── Pricing block ────────────────────────────────────────────
function Pricing() {
  return (
    <div className="price-grid">
      <Reveal>
        <div className="price-card">
          <Eyebrow2 color={W.sage}>Free, forever</Eyebrow2>
          <div className="price-amt">$0<small> / your first child</small></div>
          <ul className="price-list">
            {['Two-tap logging — feeds, naps & diapers', 'Pure-black 3am night mode', '1 child + 1 shared caregiver', 'End-to-end encrypted by default'].map((t, i) => (
              <li key={i}><Tick />{t}</li>
            ))}
          </ul>
          <a className="btn btn-ghost" href="#download" style={{ width: '100%' }}>Start free</a>
          <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, fontWeight: 600, color: W.inkMute }}>
            30-day history · supported by non-personalized ads
          </div>
        </div>
      </Reveal>
      <Reveal delay={90}>
        <div className="price-card feature">
          <div style={{
            position: 'absolute', top: 26, right: 26, ...T.lbl, fontWeight: 700,
            background: 'rgba(255,255,255,0.18)', color: '#fff', padding: '6px 12px', borderRadius: 999,
            fontSize: 12, letterSpacing: '0.08em',
          }}>14-DAY FREE TRIAL</div>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}><span className="rule" /> Premium</div>
          <div className="price-amt">$4.99<small> / month</small></div>
          <div style={{ marginTop: 8, fontSize: 15, fontWeight: 600, color: 'rgba(255,255,255,0.85)' }}>
            or $39.99 / year — save 33% · $129 lifetime
          </div>
          <div style={{ marginTop: 22, marginBottom: 2, fontWeight: 700, fontSize: 15, color: 'rgba(255,255,255,0.92)' }}>Everything in Free, plus:</div>
          <ul className="price-list" style={{ margin: '12px 0 28px' }}>
            {['No ads — removed entirely', 'Unlimited children & caregivers', 'Gentle insights & pattern trends', 'Doctor-ready PDF export, one tap', 'Full history, kept forever'].map((t, i) => (
              <li key={i}><Tick color="#fff" check="#557e68" />{t}</li>
            ))}
          </ul>
          <a className="btn btn-light" href="#download" style={{ width: '100%' }}>Try Premium free</a>
          <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.8)' }}>
            14-day free trial on yearly · Cancel anytime
          </div>
        </div>
      </Reveal>
    </div>
  );
}

// ── FAQ ──────────────────────────────────────────────────────
function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            {it.q}
            <span className="faq-plus"><IconPlus size={22} color={W.sage} /></span>
          </button>
          <div className="faq-a"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

const FAQ_ITEMS = [
  { q: 'Is Hush really end-to-end encrypted?', a: 'Yes. Your log is encrypted on your device with a key only you (and the caregivers you invite) hold. Our servers store ciphertext we genuinely cannot read — so there is nothing to sell, leak, or hand over.' },
  { q: 'How is this different from Flo, Ovia or Huckleberry?', a: 'Those apps make money by selling your data. Hush charges for the app instead, so you are the customer — never the product. We never sell or share your data, and we can’t: it’s end-to-end encrypted.' },
  { q: 'How does Drift predict naps?', a: 'Drift blends published pediatric sleep research (Weissbluth, AASM, AAP Bright Futures and more — all cited in-app) with your baby’s own logged naps, then shows its work with a wake-window dial and a projected day timeline. It’s a transparent model, not a black box — and it runs entirely on your phone, against your decrypted data. The prediction math never touches the network.' },
  { q: 'Does the free version have ads?', a: 'The free tier shows non-personalized ads — they are never built from your baby’s data, which stays encrypted and out of reach of any ad SDK. Premium removes ads entirely.' },
  { q: 'How much is Premium?', a: '$4.99/month, or $39.99/year (save 33%), with a 14-day free trial on the yearly plan. There’s also a $129 lifetime option. Premium adds unlimited children & caregivers, insights, doctor-ready export — and removes ads. Cancel anytime in Google Play.' },
  { q: 'Can the whole family use one account?', a: 'Yes. Invite co-parents, grandparents or a nanny and everyone sees one shared, real-time timeline — so nobody asks “did you already feed her?” again. One Premium covers your whole family.' },
  { q: 'Is Hush on iPhone?', a: 'Hush is live now on Google Play for Android. An iOS version is coming later in 2026 — your end-to-end encrypted vault will sync across both.' },
  { q: 'Will it keep me up at night?', a: 'The opposite. Night mode is pure black with dim type and no glare, logging is two taps one-handed, and there are no streaks, badges or nudges. Calm by design.' },
];

// ── Footer ───────────────────────────────────────────────────
function Footer({ dark = false }) {
  const ink = dark ? '#F3F0FA' : W.ink;
  const mute = dark ? '#8E879E' : W.inkMute;
  const soft = dark ? '#B8B2C8' : W.inkSoft;
  const border = dark ? 'rgba(255,255,255,0.10)' : 'rgba(43,38,32,0.08)';
  const linkStyle = { color: soft };
  return (
    <footer className="foot" style={{ background: dark ? '#16131f' : 'transparent', borderTopColor: border }}>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <Lockup markSize={28} wordSize={28} color={ink} accent={W.sage} />
            <p style={{ ...T.bL, color: mute, maxWidth: '32ch', marginTop: 16 }}>
              A baby tracker that exhales. Calm by design, private by default. Live now on Google Play — iOS coming later in 2026.
            </p>
          </div>
          <div>
            <h5 style={{ color: mute }}>Product</h5>
            <a style={linkStyle} href="index.html#features">Features</a>
            <a style={linkStyle} href="index.html#privacy">Privacy</a>
            <a style={linkStyle} href="index.html#pricing">Pricing</a>
            <a style={linkStyle} href="index.html#faq">FAQ</a>
          </div>
          <div>
            <h5 style={{ color: mute }}>Get the app</h5>
            <a style={linkStyle} href="https://play.google.com/store/apps/details?id=ca.mapleelegance.hush" target="_blank" rel="noopener">Download on Google Play</a>
            <a style={linkStyle} href="index.html#pricing">Plans &amp; pricing</a>
            <a style={linkStyle} href="index.html#privacy">How encryption works</a>
          </div>
          <div>
            <h5 style={{ color: mute }}>Company &amp; legal</h5>
            <a style={linkStyle} href="mailto:support@mapleelegance.ca">Support</a>
            <a style={linkStyle} href="mailto:security@mapleelegance.ca">Security</a>
            <a style={linkStyle} href="privacy.html">Privacy policy</a>
            <a style={linkStyle} href="terms.html">Terms of service</a>
          </div>
        </div>
        <div className="foot-base" style={{ borderTopColor: border, color: mute }}>
          <span>© 2026 Hush, a product of Maple Elegance Marketing Inc.</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <IconLock size={15} color={mute} /> End-to-end encrypted
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Reveal, PlayBadge, AppStoreBadge, StoreBadges, Nav, Eyebrow2, TrustStrip, Tick, Stars,
  Pricing, FAQ, FAQ_ITEMS, Footer,
});