// ---- Mabel landing — section components (Hero, HowItWorks, WhyDifferent, Footer) ----
// Built on the token sheet + .btn/.input/.badge classes from landing.css.
const { useState, useEffect, useRef } = React;

// Where the installed desktop app lives. Points at the app build so it's
// clickable in the prototype; swap for the real app URL on the live site.
// Point this at the installed desktop-app URL before launch.
const APP_URL = 'https://app.mabelinbox.com'; /* TODO: confirm real app URL */

function TopBar() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`topbar ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap">
        <img className="wm" src="assets/logo-wordmark.svg" alt="Mabel" />
        <span className="spacer" />
        <a className="open-app" href={APP_URL}>Open the app <Icon name="arrow-up-right" /></a>
        <span className="badge special"><Icon name="lock" />Private beta</span>
      </div>
    </div>
  );
}

function InboxVignette() {
  return (
    <div className="vignette" aria-hidden="true">
      <div className="vg-top">
        <span className="vg-search"><Icon name="search" />home insurance</span>
        <span className="vg-meta">found instantly</span>
      </div>
      <div className="vg-list">
        <div className="vg-row found">
          <span className="vg-icon"><Icon name="shield-check" /></span>
          <div className="vg-body">
            <span className="vg-who">State Farm</span>
            <span className="vg-subj">Your Homeowners Policy — renewal &amp; coverage summary</span>
          </div>
          <span className="vg-badge">Insurance</span>
        </div>
        <div className="vg-row muted">
          <span className="vg-icon"><Icon name="newspaper" /></span>
          <div className="vg-body"><span className="vg-who">Medium Daily Digest</span><span className="vg-subj">Stories for you this week</span></div>
        </div>
        <div className="vg-row muted">
          <span className="vg-icon"><Icon name="tag" /></span>
          <div className="vg-body"><span className="vg-who">Groupon</span><span className="vg-subj">⚡ 70% off near you — today only</span></div>
        </div>
        <div className="vg-row muted">
          <span className="vg-icon"><Icon name="bell" /></span>
          <div className="vg-body"><span className="vg-who">LinkedIn</span><span className="vg-subj">9 new notifications</span></div>
        </div>
      </div>
    </div>
  );
}

function Hero({ onJoin }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="inner">
            <div className="eyebrow rise">A note from the person who built it</div>
            <h1 className="display rise d1">My mom couldn't find who insured her house — and her inbox was no help.</h1>
            <div className="story rise d2">
              <p>An electrical surge wrecked her appliances and she had to file a claim — but she had no idea who insured her, and even searching her email, neither could I.</p>
              <p className="kick">So I built <strong>Mabel</strong> — a desktop app that organizes your email <em>for</em> you, without it ever leaving your computer.</p>
            </div>
            <div className="signoff rise d2">
              <img src="assets/mark.svg" alt="" />
              <span className="by">— <b>Jamie</b>, building Mabel</span>
            </div>
            <div className="cta-row rise d3">
              <button className="btn primary lg" onClick={onJoin}>Become a beta tester</button>
              <a className="seehow" href="#how">See how it works <Icon name="arrow-down" /></a>
            </div>
          </div>
          <div className="hero-visual rise d2">
            <span className="hv-cap">What Mabel surfaces — the one that mattered, out of the noise.</span>
            <InboxVignette />
          </div>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: '1', icon: 'folder-tree', h: 'It sorts.',
    body: <>Mabel loads a batch of your Gmail and groups it into tidy buckets — receipts, orders, deliveries, newsletters, and any you invent. <em>All processing happens locally, on your machine.</em></> },
  { n: '2', icon: 'list-checks', h: 'You review.',
    body: <>Before Mabel changes a single thing, you see every label, archive, and delete recommendation — one by one, in a console built to fly through. You're always in control.</> },
  { n: '3', icon: 'check-check', h: 'You clean up.',
    body: <>Approve in bulk with one click. Everything's reversible in Gmail for 30 days. Nothing is ever sent to a server.</> },
];

function HowItWorks() {
  return (
    <div className="band-surface">
      <section className="howitworks wrap" id="how" data-screen-label="How it works">
        <div className="section-head">
          <div className="eyebrow">How it works</div>
          <h2 className="h-section">Three steps. You stay in control the whole way.</h2>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className="step" key={s.n}>
              <span className="num">{s.n} · {s.h}</span>
              <div className="stepicon"><Icon name={s.icon} /></div>
              <h3>{s.h}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
        <div className="reassure">
          <div className="rm"><Icon name="shield-check" /></div>
          <p>Your email never leaves your computer. We only read metadata, and we never store your mail.</p>
        </div>
      </section>
    </div>
  );
}

const FEATURES = [
  { feature: true, icon: 'keyboard', h: 'A review console built for speed.',
    body: 'Gmail-style keyboard shortcuts. Triage hundreds of emails in minutes without touching the mouse.',
    keys: [['j','/','k','move'],['e','archive'],['#','trash'],['v','move'],['l','label']] },
  { icon: 'sparkles', h: 'Smart sorting that learns.',
    body: 'Move one email and Mabel offers to update its own rules — so it gets sharper the more you use it. No regex required.' },
  { icon: 'layers', h: 'One-click bulk cleanup.',
    body: 'Archive, trash, label, or unsubscribe a whole bucket at once — always after you\u2019ve reviewed it.' },
  { icon: 'mail-x', h: 'Unsubscribe, handled.',
    body: 'Mabel surfaces unsubscribe links, then offers to clear out the senders you just left.' },
  { privacy: true, icon: 'shield-check', h: 'Nothing leaves your machine.',
    body: 'Local processing, metadata-only, no inbox stored anywhere.' },
  { icon: 'rotate-ccw', h: 'Undo anything.',
    body: 'Full action history with one-click undo, plus Gmail\u2019s own 30-day safety net.' },
  { icon: 'sliders-horizontal', h: 'Yours, your way.',
    body: 'Rules sync across your browsers, split buckets by date or sender, light and dark mode.' },
];

function KeyCap({ k }) {
  if (k === '/' ) return <span style={{ color: 'var(--color-text-tertiary)' }}>/</span>;
  if (['move','archive','trash','label'].includes(k)) return <span style={{ marginLeft: 2 }}>{k}</span>;
  return <span className="kbd">{k}</span>;
}

function WhyDifferent() {
  return (
    <section className="why wrap" data-screen-label="Why it's different">
      <div className="section-head">
        <div className="eyebrow">Why it's different</div>
        <h2 className="h-section">Most cleaners run in the cloud. Mabel runs for you, on your machine.</h2>
      </div>
      <div className="grid">
        {FEATURES.map((f, i) => (
          <div className={`fcard ${f.feature ? 'feature' : ''} ${f.privacy ? 'privacy-card' : ''}`} key={i}>
            {f.feature ? (
              <>
                <div className="fc-main">
                  <div className="ficon"><Icon name={f.icon} /></div>
                  <h3>{f.h}</h3>
                  <p>{f.body}</p>
                </div>
                <div className="fc-keys">
                  {f.keys.map((row, j) => (
                    <div className="keyrow" key={j}>
                      {row.map((k, l) => <KeyCap key={l} k={k} />)}
                    </div>
                  ))}
                </div>
              </>
            ) : (
              <>
                <div className="ficon"><Icon name={f.icon} /></div>
                <h3>{f.h}</h3>
                <p>{f.body}</p>
              </>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="wrap">
        <div className="foot-brand">
          <img className="wm" src="assets/logo-wordmark.svg" alt="Mabel" />
          <span className="tag">Your email, looked after.</span>
        </div>
        <nav className="foot-links">
          <a href={APP_URL}>Open the app <Icon name="arrow-up-right" /></a>
          <a href="privacy.html">Privacy</a>
          <a href="terms.html">Terms</a>
        </nav>
        <span className="note">A desktop app, currently in private beta. Built by Jamie.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Hero, HowItWorks, WhyDifferent, Footer });