// The Daily — morning digest mock with persona tabs

const DAILY_CONTENT = {
  quinn: {
    name: 'Quinn',
    subtitle: 'The Strategist',
    lede: 'Good morning. The week is on plan. Dining is the only red mark — $114 over a $200 envelope. I drafted a cover using surplus from Hobbies and trimming Entertainment to what you actually spent. Two taps and the red is gone.',
    stats: [
      { l: 'Days ahead', v: '12' },
      { l: 'Runway', v: '3.4mo' },
      { l: 'Off the card', v: '$4,180' },
    ],
    closer: 'Eleven more weeks like this and the Sapphire is closed. — Hazel',
  },
  marisol: {
    name: 'Marisol',
    subtitle: 'The Volume Spender',
    lede: 'Good morning. Eighteen transactions cleared overnight — twelve at Target, three at the vet, two school payments, one mystery I’ve flagged. 92% I categorized for you. The other 8% is below, in three batches you can do at the stoplight.',
    stats: [
      { l: 'Auto-cat rate', v: '92%' },
      { l: 'Kid activities', v: '$340' },
      { l: 'Surprises next mo.', v: '0' },
    ],
    closer: 'October has the soccer fee — $185. I’m setting $46 aside weekly. — Hazel',
  },
  noor: {
    name: 'Noor',
    subtitle: 'The Survivor',
    lede: 'Good morning. Safe to spend today: $63. Tip night is Friday, so by Sunday you’re probably at $140. Three subscriptions I found last week (Adobe, two streaming) are $47/month — cancel links below. Your cushion is at $312, up from $0 in March.',
    stats: [
      { l: 'Safe today', v: '$63' },
      { l: 'Cushion', v: '$312' },
      { l: 'Overdrafts', v: '0' },
    ],
    closer: 'I’ll ping if safe-to-spend hits $20 before Friday. Not a moment later. — Hazel',
  },
};

const DailyDigest = () => {
  const [tab, setTab] = React.useState('quinn');
  const d = DAILY_CONTENT[tab];
  return (
    <section className="section" id="daily">
      <div className="section-eyebrow reveal"><span>IV · The morning paper</span></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <div className="reveal">
          <h2 className="section-title">A one-paragraph note,<br/><em>written by Hazel.</em></h2>
          <p className="section-dek">
            Every morning at 7:02, a single email lands. Three numbers across the top.
            One paragraph of plain English. A handful of decisions you can make in five
            minutes — or skip, because <em>nothing for you is also a feature.</em>
          </p>
          <p className="section-dek">
            What lands depends on who you are. Quinn wants the Sunday feeling back.
            Marisol wants the volume handled. Noor wants one number, today.
          </p>

          <div className="daily-tabs" style={{ margin: '20px 0' }}>
            {Object.entries(DAILY_CONTENT).map(([k, v]) => (
              <button
                key={k}
                className={'daily-tab' + (tab === k ? ' active' : '')}
                onClick={() => setTab(k)}
              >{v.name} · {v.subtitle}</button>
            ))}
          </div>

          <p className="body-i" style={{ fontSize: 13, color: 'var(--ink-mid)', lineHeight: 1.5 }}>
            The Daily is paper for the inbox. It is also what EvenMonth looks like inside,
            on Sunday morning, when you open the app.
          </p>
        </div>

        <div className="daily-mock reveal">
          <div className="daily-mock-head">
            <div className="caps" style={{ color: 'var(--ink-soft)', marginBottom: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
              <span>From hazel@evenmonth.com · 7:02 AM</span>
              <span className="live-dot" style={{ fontSize: 9 }}>Live</span>
            </div>
            <h3 className="daily-mock-title">The Daily</h3>
            <div className="daily-mock-meta">
              For {d.name} · Tuesday, May 31
            </div>
          </div>

          <div className="daily-stat-row">
            {d.stats.map((s, i) => (
              <div className="daily-stat" key={i}>
                <div className="daily-stat-label">{s.l}</div>
                <div className="daily-stat-value">{s.v}</div>
              </div>
            ))}
          </div>

          <p className="daily-mock-lede">{d.lede}</p>

          <div style={{
            borderTop: '1px solid var(--rule)',
            paddingTop: 14,
            marginTop: 14,
            display: 'flex',
            alignItems: 'center',
            gap: 12,
          }}>
            <HazelMark size={22} />
            <p className="body-i" style={{
              fontSize: 13.5, color: 'var(--ink-mid)', lineHeight: 1.45, margin: 0, flex: 1
            }}>{d.closer}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

// The Five Rules — doctrine
const Doctrine = () => {
  const rules = [
    {
      n: 'I',
      h: 'The Rule of Three.',
      body: 'Hazel surfaces three things today. Even if fifty are pending. The triage queue is bounded; the rest re-rank tomorrow.',
    },
    {
      n: 'II',
      h: 'Nothing for you is a feature.',
      body: '“Nothing pending. See you tomorrow” is success, not a void. No streak. No counter. The reward is the absence of the chore.',
    },
    {
      n: 'III',
      h: 'No catch-up required.',
      body: 'Open after thirty quiet days → “Welcome back. Nothing’s broken.” There is no behind state. Hazel kept working.',
    },
    {
      n: 'IV',
      h: 'Zero-touch mode.',
      body: 'One tap to let Hazel handle the week. She accepts everything ≥0.85, drafts the rest, surfaces nothing. You opt back in next week. No penalty.',
    },
    {
      n: 'V',
      h: 'Hazel apologizes.',
      body: 'When she gets it wrong she fixes it and says so. Misses are normal, not exceptional. The voice is sorry, not stern.',
    },
  ];
  return (
    <section className="section deep" id="doctrine">
      <div className="section-eyebrow reveal"><span>V · Doctrine</span></div>
      <h2 className="section-title reveal">Five rules.<br/>The whole <em>politics</em> of the app.</h2>
      <p className="section-dek reveal">
        You cannot fall behind in EvenMonth. These five rules earn the propose-then-approve loop
        and protect you from the failure modes that took you out of YNAB. They are not preferences.
        They are the contract.
      </p>
      <div className="rules reveal">
        {rules.map((r) => (
          <div className="rule-col" key={r.n}>
            <div className="rule-num">{r.n}</div>
            <h3 className="rule-h">{r.h}</h3>
            <p className="rule-body">{r.body}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--ink)' }}>
        <div style={{ padding: '20px 24px', background: 'var(--paper)' }}>
          <div className="caps" style={{ color: 'var(--good)', marginBottom: 8 }}>What EvenMonth is</div>
          <p className="body" style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink)' }}>
            An active money-management tool for people who want to <em>do</em>, not just to see.
            Envelopes. Proposals. A bookkeeper. The dollar-to-next-month feeling, recreated and
            protected.
          </p>
        </div>
        <div style={{ padding: '20px 24px', background: 'var(--paper)', borderLeft: '1px solid var(--rule-strong)' }}>
          <div className="caps" style={{ color: 'var(--trouble)', marginBottom: 8 }}>What EvenMonth is not</div>
          <p className="body" style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink)' }}>
            A tracker that emails you a pie chart on Sunday. A streak counter. A net-worth dashboard.
            A bot that moves your money. A class you are failing.
          </p>
        </div>
      </div>
    </section>
  );
};

window.Components3 = { DailyDigest, Doctrine };
Object.assign(window, { DailyDigest, Doctrine });