// Interactive "Three things today" demo

const THREE_THINGS = [
  {
    id: 't1',
    eyebrow: 'Cover the red',
    h: 'Dining is $114 over. Cover from Hobbies ($80) and Entertainment ($34).',
    body: 'Hobbies finishes at $0, Entertainment at $6 — both at what you actually spent. Two taps, the red is gone.',
    primary: 'Apply both · $114',
    secondary: 'Edit',
  },
  {
    id: 't2',
    eyebrow: 'Categorize',
    h: 'Three Trader Joe’s charges arrived overnight. They look like Groceries.',
    body: 'Same merchant, same shape as the last sixty. 0.97 confidence. Approve the batch or tap any line to split.',
    primary: 'Approve 3',
    secondary: 'Split one',
  },
  {
    id: 't3',
    eyebrow: 'Heads up',
    h: 'Rent autopays Friday. Safe-to-spend is $186 after.',
    body: 'No action needed unless you were planning something big. I’ll nudge again at $20 of safe-to-spend.',
    primary: 'Got it',
    secondary: 'Snooze',
  },
];

const DemoThreeThings = () => {
  const [removed, setRemoved] = React.useState({});
  const [exiting, setExiting] = React.useState({});

  const dismiss = (id) => {
    setExiting((e) => ({ ...e, [id]: true }));
    setTimeout(() => {
      setRemoved((r) => ({ ...r, [id]: true }));
      setExiting((e) => {
        const n = { ...e };
        delete n[id];
        return n;
      });
    }, 400);
  };

  const reset = () => {
    setRemoved({});
    setExiting({});
  };

  const remaining = THREE_THINGS.filter((t) => !removed[t.id]);
  const empty = remaining.length === 0;

  return (
    <section className="section" id="demo">
      <div className="section-eyebrow reveal"><span>II · The daily ritual</span></div>
      <div className="demo-wrap">
        <div className="reveal">
          <h2 className="section-title">Three things today.<br/><em>Nothing tomorrow.</em></h2>
          <p className="section-dek">
            However many transactions cleared overnight — three, thirty, three hundred — Hazel
            surfaces three. The rest wait in the inbox and re-rank. The queue is bounded by your
            attention, not by the bank’s.
          </p>
          <p className="section-dek" style={{ marginBottom: 0 }}>
            On a quiet day she surfaces zero, and that is the whole feature.
            <em> No streak. No counter. No “you did it.”</em> The reward is the absence of the chore.
          </p>
          <div style={{ marginTop: 30 }}>
            <a className="btn btn-ghost" href="#doctrine">Read the doctrine <ArrowSm /></a>
          </div>
        </div>

        <div className="demo-card reveal" aria-live="polite">
          <div className="demo-card-head">
            <h3 className="demo-card-h">Today’s <em>three.</em></h3>
            <span className="caps" style={{ color: empty ? 'var(--good)' : 'var(--ink-soft)' }}>
              {empty ? '✓ Inbox clear' : `${remaining.length} pending`}
            </span>
          </div>

          {empty ? (
            <div className="demo-empty">
              Nothing pending.<br/>See you tomorrow.
              <span className="small">— Hazel, 7:02 AM</span>
              <div>
                <button className="demo-reset" onClick={reset}>↺ Reset demo</button>
              </div>
            </div>
          ) : (
            <>
              {remaining.map((t, i) => (
                <div
                  className={'demo-item' + (exiting[t.id] ? ' removing' : '')}
                  key={t.id}
                >
                  <div>
                    <div className="caps" style={{ color: 'var(--hazel)' }}>
                      <span className="demo-item-num">{['i','ii','iii'][THREE_THINGS.indexOf(t)]}.</span> {t.eyebrow}
                    </div>
                    <h4 className="demo-item-h">{t.h}</h4>
                    <p className="demo-item-body">— Hazel</p>
                  </div>
                  <div className="demo-item-actions">
                    <button className="mini-btn primary" onClick={() => dismiss(t.id)}>{t.primary}</button>
                    <button className="mini-btn" onClick={() => dismiss(t.id)}>{t.secondary}</button>
                  </div>
                </div>
              ))}
              <button className="demo-reset" onClick={reset}>↺ Reset demo</button>
            </>
          )}
        </div>
      </div>
    </section>
  );
};

// Hazel — meet the bookkeeper
const MeetHazel = () => (
  <section className="section deep" id="hazel">
    <div className="section-eyebrow reveal"><span>III · The bookkeeper</span></div>
    <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'start' }}>
      <div className="reveal">
        <h2 className="section-title">A bookkeeper <em>on payroll.</em><br/>Not an algorithm at large.</h2>
        <p className="section-dek">
          Hazel runs at 7 a.m. She categorizes, flags weird charges, proposes moves between envelopes,
          and writes a one-paragraph note. Then she stops. Every action lands as a proposal you apply,
          edit, or dismiss. <strong>She proposes. You approve.</strong>
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--ink)', marginTop: 28 }}>
          {[
            { l: 'Categorize a charge', v: 'Propose', n: 'Even at 99%, it stays a proposal.' },
            { l: 'Move between envelopes', v: 'Propose', n: 'Hazel suggests. You apply.' },
            { l: 'Add a new rule', v: 'Propose', n: 'She never edits silently.' },
            { l: 'Send the morning Daily', v: 'Yes', n: 'She writes. You read.' },
            { l: 'Push at a swipe', v: 'Yes', n: 'Within hours you opted into.' },
            { l: 'Move real money', v: 'Never', n: 'EvenMonth is a ledger, not a bank.' },
          ].map((r, i) => (
            <div key={i} style={{
              padding: '14px 16px',
              borderLeft: i % 2 ? '1px solid var(--rule)' : 'none',
              borderTop: i > 1 ? '1px solid var(--rule)' : 'none',
            }}>
              <div className="caps" style={{ fontSize: 9.5, color: 'var(--ink-soft)' }}>{r.l}</div>
              <div className="disp" style={{
                fontSize: 22,
                marginTop: 4,
                color: r.v === 'Never' ? 'var(--trouble)' : r.v === 'Yes' ? 'var(--good)' : 'var(--hazel)',
                fontFamily: 'Instrument Serif, serif',
                fontStyle: 'italic',
              }}>{r.v}.</div>
              <div className="body-i" style={{ fontSize: 12, color: 'var(--ink-mid)', marginTop: 4 }}>{r.n}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="reveal">
        <div className="caps" style={{ marginBottom: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
          <HazelMark size={20} />
          <span>Hazel’s voice — yes / no</span>
        </div>
        <div className="voice-table">
          {[
            ['$280 to the Apple Card on Friday. Eleven weeks like this and that card is gone.',
             'Great job! 🎉 Way to crush your debt goal!'],
            ['You’re 12 days ahead this month. That’s 4 more than last.',
             'Streak: 23 days! Don’t break the chain!'],
            ['I miscategorized that. Fixed.',
             'User must verify all AI-generated category assignments.'],
            ['Rent autopays Friday and safe-to-spend is $12. Skip lunch out, you’re fine.',
             'You are at risk of overdraft. Please assign funds to Rent immediately.'],
          ].map(([yes, no], i) => (
            <React.Fragment key={i}>
              <div className="voice-cell yes">
                <div className="voice-label">Yes — Hazel</div>
                <p className="voice-text">“{yes}”</p>
              </div>
              <div className="voice-cell no">
                <div className="voice-label">No — not Hazel</div>
                <p className="voice-text">“{no}”</p>
              </div>
            </React.Fragment>
          ))}
        </div>
        <p className="body-i" style={{ fontSize: 13, color: 'var(--ink-mid)', marginTop: 14, lineHeight: 1.5 }}>
          When Hazel gets it wrong, she fixes it and says so. Misses are normal, not exceptional.
          The voice is <em>“Sorry — fixed that,”</em> not <em>“user must verify.”</em>
        </p>
      </div>
    </div>
  </section>
);

window.Components2 = { DemoThreeThings, MeetHazel };
Object.assign(window, { DemoThreeThings, MeetHazel });