// home-proof.jsx — testimonials + stats / "EvenMonth by the numbers" + comparison table

// Animated stat — uses the useCountUp hook from home-top
const StatCell = ({ label, target, prefix = '', suffix = '', decimals = 0, sub, formatter }) => {
  const [ref, val] = useCountUp(target, { decimals });
  const display = formatter ? formatter(val) : (typeof val === 'number' ? val.toLocaleString() : val);
  return (
    <div className="stat reveal">
      <div className="stat-label">{label}</div>
      <div className="stat-value" ref={ref}>{prefix}{display}{suffix}</div>
      <div className="stat-sub">{sub}</div>
    </div>
  );
};

const StatsByNumbers = () => (
  <section className="section deep" id="numbers">
    <div className="section-eyebrow reveal"><span>VII · EvenMonth, by the numbers</span></div>
    <h2 className="section-title reveal">A few <em>honest</em> tallies.</h2>
    <p className="section-dek reveal">
      We don't publish vanity charts. These are the numbers we'd want to read if we were
      considering signing up. Updated each Monday morning — Hazel insists on it.
    </p>
    <div className="stats">
      <StatCell
        label="Subscribers"
        target={47219}
        sub="Active readers of The Daily"
      />
      <StatCell
        label="Reconciled"
        target={2.84}
        decimals={2}
        prefix="$"
        suffix="B"
        sub="Lifetime transactions cleared by Hazel"
      />
      <StatCell
        label="Card debt killed"
        target={18.6}
        decimals={1}
        prefix="$"
        suffix="M"
        sub="Reader-wide, this quarter"
      />
      <StatCell
        label="Silent moves"
        target={0}
        sub="The number we are proudest of"
      />
    </div>
  </section>
);

// Testimonials — short, voicey, no smiley headshots
const TESTIMONIALS = [
  {
    initial: 'Q',
    quote: 'I went from opening YNAB on the second Sunday of every month to opening EvenMonth on the first one. The Sunday feeling is back. The grind is gone.',
    name: 'Quinn H.',
    meta: 'Software engineer · 8 months in',
  },
  {
    initial: 'M',
    quote: 'I do my budget at the school pickup line now. Twelve transactions, three taps, away. Hazel got it right four out of five. The fifth she fixed before I noticed.',
    name: 'Marisol P.',
    meta: 'Operations manager · 11 months in',
  },
  {
    initial: 'N',
    quote: 'I knew I could afford the coffee. That had not been true for a long time. The number on the home screen is the whole product, for me.',
    name: 'Noor C.',
    meta: 'Barista · 6 months in',
  },
];

const Testimonials = () => (
  <section className="section" id="readers">
    <div className="section-eyebrow reveal"><span>VIII · Letters from readers</span></div>
    <h2 className="section-title reveal">Three subscribers.<br/><em>Same Hazel.</em></h2>
    <p className="section-dek reveal">
      EvenMonth reads differently depending on who is opening it. These are three readers
      whose Sunday it changed.
    </p>
    <div className="testimonials reveal">
      {TESTIMONIALS.map((t, i) => (
        <div className="testimonial" key={i}>
          <span className="testimonial-mark">"</span>
          <p className="testimonial-quote">{t.quote}</p>
          <div className="testimonial-attr">
            <span className="testimonial-attr-mark">{t.initial}</span>
            <div>
              <div className="testimonial-attr-name">{t.name}</div>
              <div className="testimonial-attr-meta">{t.meta}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

// "Table of contemporaries" — EvenMonth vs YNAB / Mint / Rocket Money
const COMPETITORS = [
  { name: 'EvenMonth', meta: 'Hazel + ledger', key: 'evenmonth' },
  { name: 'YNAB',   meta: 'Envelopes, no bookkeeper' },
  { name: 'Mint',   meta: 'Closed; remembered fondly' },
  { name: 'Rocket Money', meta: 'Subscription canceller' },
];

const COMPARE_ROWS = [
  {
    crit: 'A bookkeeper on payroll.',
    cells: [
      { tone: 'evenmonth', mark: 'Yes.', text: 'Hazel categorizes, proposes moves, writes a one-paragraph note every morning at 7:02.' },
      { tone: 'no',  mark: 'No.',  text: 'You do the categorizing. You do the moving. You do the writing.' },
      { tone: 'partial', mark: 'Sort of.',  text: 'Auto-categorizes, but does not act, suggest, or follow up.' },
      { tone: 'partial', mark: 'For subs.',  text: 'Finds recurring charges. Does not run your budget.' },
    ],
  },
  {
    crit: 'Three things today, not three hundred.',
    cells: [
      { tone: 'evenmonth', mark: 'Yes.', text: 'The Rule of 3 is enforced in the UI. Fifty pending becomes three surfaced.' },
      { tone: 'no', mark: 'No.', text: 'The full queue is the queue. Triage is on you.' },
      { tone: 'no', mark: 'No.', text: 'Dashboard, not decisions.' },
      { tone: 'partial', mark: 'Kind of.', text: 'Surfaces flagged charges; the queue itself is unbounded.' },
    ],
  },
  {
    crit: 'No "behind" state, ever.',
    cells: [
      { tone: 'evenmonth', mark: 'Yes.', text: 'Open after thirty quiet days — "Welcome back. Nothing\'s broken."' },
      { tone: 'no', mark: 'No.', text: 'Open after a missed week and the app tells you, in red, that you fell off.' },
      { tone: 'partial', mark: 'N/A.', text: 'Tracker — there is no behind because there is no commitment.' },
      { tone: 'partial', mark: 'N/A.', text: 'Same.' },
    ],
  },
  {
    crit: 'Propose, never act.',
    cells: [
      { tone: 'evenmonth', mark: 'Always.', text: 'Even at 99% confidence, a categorization stays a proposal until you press the button.' },
      { tone: 'partial', mark: 'Mostly.', text: 'No silent moves — but no one is offering them either.' },
      { tone: 'partial', mark: 'Mixed.', text: 'Categorizes silently; you reclassify after the fact.' },
      { tone: 'no', mark: 'No.', text: 'Will cancel subscriptions on your behalf if you ask. Different model.' },
    ],
  },
  {
    crit: 'One number for tomorrow.',
    cells: [
      { tone: 'evenmonth', mark: 'Yes.', text: '"Safe to spend today: $X" on the home screen — for the Survivor reader especially.' },
      { tone: 'partial', mark: 'Indirectly.', text: 'You build it from categories. Power, but assembly required.' },
      { tone: 'no', mark: 'No.', text: 'Net-worth, breakdowns, trends. Past tense, mostly.' },
      { tone: 'no', mark: 'No.', text: 'A subscription scoreboard, not a today number.' },
    ],
  },
  {
    crit: 'What it costs.',
    cells: [
      { tone: 'evenmonth', mark: '$8 / mo', text: '$72 a year if you commit. 30 days free, no card. Cancel any Sunday.' },
      { tone: 'partial', mark: '$15 / mo', text: '$109 a year. 34-day trial.' },
      { tone: 'no', mark: '—', text: 'Mint closed in 2024. Credit Karma is the successor.' },
      { tone: 'partial', mark: '~$6–12 / mo', text: 'Premium tier required for most actions. Tiers vary.' },
    ],
  },
];

const Comparison = () => (
  <section className="section" id="compare">
    <div className="section-eyebrow reveal"><span>VI · A table of contemporaries</span></div>
    <h2 className="section-title reveal">EvenMonth, <em>read against</em><br/>the alternatives.</h2>
    <p className="section-dek reveal">
      We are not trying to be everything. There are tools that do other things well; some of
      them are linked below for the reader who wants a tracker, or a sub canceller, or a class.
      What follows is the honest map.
    </p>

    <div className="compare reveal">
      <div className="compare-row head">
        <div className="compare-cell">
          <span className="caps" style={{ color: 'var(--ink-soft)' }}>The question →</span>
        </div>
        {COMPETITORS.map((c, i) => (
          <div className={'compare-cell' + (c.key === 'evenmonth' ? ' evenmonth' : '')} key={i}>
            <div className="compare-head-name">{c.name}</div>
            <div className="compare-head-meta">{c.meta}</div>
          </div>
        ))}
      </div>

      {COMPARE_ROWS.map((r, ri) => (
        <div className="compare-row" key={ri}>
          <div className="compare-cell">
            <div className="compare-criterion">{r.crit}</div>
          </div>
          {r.cells.map((cell, ci) => (
            <div className={'compare-cell ' + cell.tone} key={ci}>
              <div className="compare-cell-mark">{cell.mark}</div>
              <div className="compare-cell-text">{cell.text}</div>
            </div>
          ))}
        </div>
      ))}
    </div>

    <p className="reveal" style={{
      marginTop: 26, fontFamily: 'Newsreader, serif', fontStyle: 'italic',
      fontSize: 13, color: 'var(--ink-mid)', textAlign: 'center', maxWidth: 720, margin: '26px auto 0',
    }}>
      Pricing as of May 2026. We will update this table the day any of it changes — and tell
      you on the masthead when we do.
    </p>
  </section>
);

Object.assign(window, { StatsByNumbers, Testimonials, Comparison });