// Personas as reader letters
const Personas = () => (
  <section className="section" id="for">
    <div className="section-eyebrow reveal"><span>IX · Who EvenMonth is for</span></div>
    <h2 className="section-title reveal">Three questions.<br/><em>Three Hazels.</em></h2>
    <p className="section-dek reveal">
      EvenMonth ships one app. It answers different questions for different lives. The reward
      is the same — money has jobs again — but the daily ritual is yours.
    </p>
    <div className="letters reveal">
      {[
        {
          stamp: 'Primary · The Strategist',
          name: 'Quinn, 31',
          bio: 'Senior engineer · $165k · YNAB veteran',
          q: '“I want the Sunday feeling back — without the categorize-every-receipt grind that took it away.”',
          a: 'Three things Sunday morning. Two are obvious accepts. Days-ahead goes up. The $20k card balance goes down, weekly. The high, without the chore.',
        },
        {
          stamp: 'Secondary · The Volume Spender',
          name: 'Marisol, 38',
          bio: 'Operations · partner, two kids · 320/mo',
          q: '“I’m not the bookkeeper. I’m the parent. Show me what to decide and put it away.”',
          a: '92% auto-categorized on import. The other 8% arrives in three-card batches you do at a stoplight. A Kid Activities view that aggregates school + sports + gear. Twenty minutes a week.',
        },
        {
          stamp: 'Tertiary · The Survivor',
          name: 'Noor, 27',
          bio: 'Barista + DoorDash · $42k · variable',
          q: '“Don’t tell me where it went. Tell me whether I can afford this coffee.”',
          a: '“Safe to spend today” as a single number on the home screen. Subscription audit day one. Push at $20 of safe-to-spend, not after. A cushion that wasn’t there in March.',
        },
      ].map((p) => (
        <article className="letter" key={p.name}>
          <span className="letter-stamp">{p.stamp}</span>
          <div className="caps" style={{ marginTop: 6, color: 'var(--ink-soft)' }}>From the reader</div>
          <h3 className="letter-name">{p.name}</h3>
          <div className="letter-bio">{p.bio}</div>
          <p className="letter-quote">{p.q}</p>
          <div className="letter-answer">
            <span className="caps-lbl">— Hazel answers</span>
            {p.a}
          </div>
        </article>
      ))}
    </div>

    <div className="reveal" style={{ marginTop: 48, textAlign: 'center' }}>
      <div className="caps" style={{ marginBottom: 10, color: 'var(--ink-soft)' }}>Also worth saying</div>
      <p className="body-i" style={{ fontSize: 18, color: 'var(--ink-mid)', maxWidth: 720, margin: '0 auto', lineHeight: 1.4 }}>
        EvenMonth is not the right tool for the passive tracker, or the maximizer who has tried
        every system. We respect both. We are not building for them.
      </p>
    </div>
  </section>
);

// Pricing — three tiers, dark slab
const TIERS = [
  {
    name: 'Trial',
    price: '$0',
    unit: 'for 30 days',
    tag: 'Open the app on three Sundays. If the feeling isn’t back, walk away.',
    cta: 'Start free',
    features: [
      'Hazel writes The Daily for you, every morning',
      'Up to 5 linked accounts via Plaid',
      'Three things today, fully unlimited',
      'iOS, Android, and the web app',
      'No card required',
    ],
  },
  {
    name: 'Subscriber',
    price: '$8',
    unit: '/ month',
    badge: 'Most readers',
    featured: true,
    tag: 'The whole product. Pay monthly. Cancel any Sunday.',
    cta: 'Start 30-day trial',
    features: [
      'Unlimited accounts, banks, cards',
      'Hazel’s push at the swipe — iOS, Android, browser',
      'Zero-touch weeks when you need to opt out',
      'CSV exports, your data, any time',
      'Priority help — actual humans, not a bot',
    ],
  },
  {
    name: 'Annual',
    price: '$72',
    unit: '/ year',
    tag: 'Two months free if you commit. We hope you regret it never.',
    cta: 'Choose annual',
    features: [
      'Everything in Subscriber',
      '$72 / year — equivalent to $6 / month',
      'Locked at this price for as long as you stay',
      'Early access to multi-user when it ships',
      'A printed Vol. I · No. 1 mailed to your door',
    ],
  },
];

const Pricing = () => (
  <section className="section dark" id="pricing">
    <div className="section-eyebrow reveal"><span style={{ color: 'rgba(244,239,230,0.7)' }}>X · The terms</span></div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
      <div className="reveal">
        <div className="caps" style={{ color: 'var(--hazel)', marginBottom: 10 }}>One product · three ways to pay</div>
        <h2 className="price-h" style={{ color: 'var(--paper)' }}>
          Simple <em>terms,</em><br/>like everything else.
        </h2>
      </div>
      <p className="price-dek reveal" style={{ color: 'rgba(244,239,230,0.78)', marginBottom: 6 }}>
        We charge for the work Hazel does — pulling, categorizing, writing every morning, holding
        your ledger for as long as you want us to. Not your data. Not your attention. Not your guilt.
      </p>
    </div>

    <div className="tiers reveal">
      {TIERS.map((t) => (
        <div className={'tier' + (t.featured ? ' featured' : '')} key={t.name}>
          {t.badge && <span className="tier-badge">{t.badge}</span>}
          <div>
            <div className="tier-name">{t.name}</div>
            <div className="tier-price">{t.price}<em>{t.unit}</em></div>
            <div className="tier-tag">{t.tag}</div>
          </div>
          <ul className="tier-list">
            {t.features.map((f, i) => (
              <li key={i}><span className="check">i.</span><span>{f}</span></li>
            ))}
          </ul>
          <a className="tier-cta" href="#cta">{t.cta} →</a>
        </div>
      ))}
    </div>

    <p className="reveal" style={{
      marginTop: 28, textAlign: 'center', color: 'rgba(244,239,230,0.6)',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: '0.16em', textTransform: 'uppercase',
    }}>
      SOC 2 Type II · 256-bit at rest · TLS 1.3 in transit · Read-only bank access via Plaid
    </p>
  </section>
);

// FAQ — scrubbed of local-first references
const FAQ = () => {
  const items = [
    {
      q: 'Is EvenMonth another YNAB?',
      a: 'It uses envelope budgeting, which YNAB popularized. The difference is the bookkeeper — Hazel does the categorize-and-move-money work that took you out of YNAB. Three things today, not three hundred.',
    },
    {
      q: 'Where does my data live?',
      a: 'On servers we operate in the US, encrypted at rest with 256-bit AES and in transit with TLS 1.3. We hold a SOC 2 Type II. You can export the whole ledger to CSV at any time — your data is yours.',
    },
    {
      q: 'How does the bank link work?',
      a: 'Plaid handles authentication. EvenMonth receives transactions and balances; we never see your bank password. You can revoke a connection from the settings page in two taps.',
    },
    {
      q: 'Does Hazel ever move my money?',
      a: 'Never. EvenMonth is a ledger, not a bank. Hazel proposes; you apply. Even at 99% confidence on a category, it stays a proposal until you press the button.',
    },
    {
      q: 'What if I miss a month?',
      a: 'Welcome back. Nothing’s broken. There is no behind state in EvenMonth — that is rule three of the doctrine. Hazel kept working while you were gone, and the Sunday after you open it again looks like every other Sunday.',
    },
    {
      q: 'What devices are supported?',
      a: 'iOS, Android, and the web app — anywhere a browser opens. Push notifications work on all three. Real-time card-swipe alerts work on iOS and Android today; the browser extension is in beta.',
    },
    {
      q: 'What about my partner?',
      a: 'EvenMonth is single-user in v1. Annual subscribers get early access when multi-user ships — we’re building it the way Hazel works: propose, approve, never silent.',
    },
    {
      q: 'Can I cancel any time?',
      a: 'Yes. Any Sunday, any other day. Your ledger stays exportable for ninety days after, so you can pull a full CSV and move on. No retention dialogues. No “are you sure.”',
    },
  ];
  return (
    <section className="section" id="faq">
      <div className="section-eyebrow reveal"><span>XI · The fine print</span></div>
      <h2 className="section-title reveal">Questions, in print.</h2>
      <div className="faq-grid reveal">
        {items.map((it, i) => (
          <div className="faq-item" key={i}>
            <h3 className="faq-q">{it.q}</h3>
            <p className="faq-a">{it.a}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// Final CTA — dark, with email capture
const FinalCTA = () => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setDone(true);
  };
  return (
    <section className="section dark" id="cta">
      <div className="final-cta">
        <div className="caps reveal" style={{ color: 'var(--hazel)', marginBottom: 14, justifyContent: 'center', display: 'inline-flex', gap: 10, alignItems: 'center' }}>
          <HazelMark size={18} color="var(--hazel)" />
          <span>An offer, from Hazel</span>
        </div>
        <h2 className="final-cta-h reveal">
          Give your dollars<br/><em>jobs again.</em>
        </h2>
        <p className="final-cta-dek reveal">
          Thirty days, free. Setup is four minutes. The first Sunday is five.
          Cancel any time — your ledger was always yours.
        </p>

        <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginTop: 8 }}>
          {done ? (
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '13px 18px', border: '1px solid var(--hazel)', color: 'var(--hazel)', fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              <HazelMark size={16} color="var(--hazel)" />
              On the list. The next Daily lands at 7:02.
            </div>
          ) : (
            <form className="email-form dark" onSubmit={submit}>
              <input
                type="email"
                placeholder="you@somewhere.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                aria-label="Email address"
              />
              <button type="submit">Start trial <ArrowSm /></button>
            </form>
          )}
        </div>

        <p className="reveal" style={{
          marginTop: 22, fontSize: 12,
          fontFamily: 'IBM Plex Mono, monospace', letterSpacing: '0.16em',
          textTransform: 'uppercase', opacity: 0.55,
        }}>
          No card required · iOS · Android · Web · Read-only bank access via Plaid
        </p>

        <p className="body-i reveal" style={{ marginTop: 36, fontSize: 13, opacity: 0.6, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.55 }}>
          Or, if you’re not ready — drop your email and we’ll send a sample Daily, the kind Hazel
          writes, so you can decide before you install anything.
        </p>
      </div>
    </section>
  );
};

// Colophon footer
const Colophon = () => (
  <footer className="colophon">
    <div>
      <div className="colophon-col-h">Colophon</div>
      <p className="colophon-body">
        <em>EvenMonth</em> is set in <strong>Instrument Serif</strong>, <strong>Newsreader</strong>, and{' '}
        <strong>IBM Plex Mono</strong>. Written by humans in Brooklyn, Portland, and Lisbon.
        Filed each morning at 7:02. Vol. I · No. 47.
      </p>
      <p className="colophon-body" style={{ marginTop: 14 }}>
        <em>Hazel apologizes when she’s wrong.</em>
      </p>
    </div>
    <div>
      <div className="colophon-col-h">The product</div>
      <a href="#how">How it works</a><br/>
      <a href="#hazel">Meet Hazel</a><br/>
      <a href="#daily">The Daily</a><br/>
      <a href="#doctrine">Doctrine</a><br/>
      <a href="#pricing">Pricing</a><br/>
      <a href="#readers">Readers</a>
    </div>
    <div>
      <div className="colophon-col-h">Writing</div>
      <a href="#">The doctrine, expanded</a><br/>
      <a href="#">Why we don’t use streaks</a><br/>
      <a href="#">Hazel’s style guide</a><br/>
      <a href="#">Release notes</a><br/>
      <a href="#">The newsroom</a>
    </div>
    <div>
      <div className="colophon-col-h">The company</div>
      <a href="#">hello@evenmonth.com</a><br/>
      <a href="#">Status</a><br/>
      <a href="#">Privacy (short)</a><br/>
      <a href="#">Terms (shorter)</a><br/>
      <a href="#">Security · SOC 2</a><br/>
      <a href="#">Careers</a>
    </div>
    <div className="colophon-bottom" style={{ gridColumn: '1 / -1' }}>
      <span>© 2026 Shockley Consulting Limited · 228 Broome St, Brooklyn NY · made in three cities</span>
      <span>EvenMonth is a ledger, not a bank.</span>
    </div>
  </footer>
);

// Floating CTA + scroll observer + section TOC
const PageEffects = () => {
  const [showFloat, setShowFloat] = React.useState(false);

  // reveal-on-scroll — with immediate-in-view + safety fallback so nothing stays hidden
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    // Immediately reveal anything already in the viewport at mount
    els.forEach((el) => {
      if (el.getBoundingClientRect().top < window.innerHeight) {
        el.classList.add('in');
      }
    });
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => obs.observe(el));
    // Safety net: if the observer hasn't fired for any element after 1.2s, reveal them.
    const fallback = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => el.classList.add('in'));
    }, 1200);
    return () => { obs.disconnect(); clearTimeout(fallback); };
  }, []);

  // floating CTA after hero
  React.useEffect(() => {
    const onScroll = () => {
      setShowFloat(window.scrollY > window.innerHeight * 0.9 && window.scrollY < (document.body.scrollHeight - window.innerHeight - 600));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <a className={'float-cta' + (showFloat ? ' visible' : '')} href="#cta">
        <span className="hazel-dot"></span>
        Start 30-day trial <ArrowSm />
      </a>
      <div className="grain" aria-hidden></div>
    </>
  );
};

Object.assign(window, { Personas, Pricing, FAQ, FinalCTA, Colophon, PageEffects });
