// Apple Bank × Liquid Data — Screens (S1, S2, S3–S8 student, P3–P8 parent)
// Each screen receives: { state, set, next, back, jump }
// `state` is the shared form state; `set(key, value)` mutates it.

const { useState: _us, useEffect: _ue, useMemo: _um, useRef: _ur } = React;

/* Data — schools, banks, etc. */
const SCHOOL_GROUPS = [
  { region: 'Manhattan', schools: ['NYU', 'Columbia University', 'Barnard College', 'Fordham (Lincoln Center)', 'CUNY Hunter', 'CUNY Baruch', 'CUNY City College', 'The New School', 'Cooper Union', 'Pratt Manhattan'] },
  { region: 'Outer Boroughs', schools: ['Pratt Institute (Brooklyn)', 'Brooklyn College', 'St. John’s University', 'Fordham (Rose Hill)', 'CUNY Brooklyn', 'CUNY Queens', 'CUNY City Tech', 'CUNY Lehman'] },
  { region: 'LI · Westchester · NJ', schools: ['Stony Brook University', 'Hofstra University', 'Adelphi University', 'Sarah Lawrence', 'Manhattanville', 'Stevens Institute', 'Rutgers (Newark)'] },
];
const ALL_SCHOOLS = SCHOOL_GROUPS.flatMap(g => g.schools);

const COMPETITOR_BANKS = ['Chase', 'Bank of America', 'Citi', 'Wells Fargo', 'Capital One', 'TD Bank', 'Venmo', 'Cash App', 'Zelle', 'Ally', 'Chime', 'SoFi', 'Discover', 'PNC', 'HSBC'];

const STUDENT_YEARS = ['Freshman', 'Sophomore', 'Junior', 'Senior', 'Grad', 'Other'];
const USAGE_PATTERNS = ['Daily — it’s my main account', 'Weekly — for bigger stuff', 'Rarely — mostly Venmo / Cash App'];
const AGE_BANDS = ['Under 18', '18–20', '21–24', '25+'];
const GRADES = ['HS Junior', 'HS Senior', 'Freshman', 'Sophomore', 'Junior', 'Senior', 'Grad'];
const FAMILY_ACCT_COUNT = ['Just one', '2', '3', '4+'];
const STATUS_529 = ['Have one', 'Looked into it', 'Haven’t yet'];
const TIMING = ['This weekend', 'Next week', 'Need to talk first'];
const DEPOSITS = ['$50', '$100', '$200', '$200+'];

window.AB_DATA = { SCHOOL_GROUPS, ALL_SCHOOLS, COMPETITOR_BANKS, STUDENT_YEARS, USAGE_PATTERNS, AGE_BANDS, GRADES, FAMILY_ACCT_COUNT, STATUS_529, TIMING, DEPOSITS };

/* ─────────── SHARED BITS ─────────── */

function Brand({ small }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <AppleIcon size={small ? 22 : 28} />
      <div style={{
        fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: small ? 16 : 18,
        letterSpacing: '-0.005em', color: 'var(--ab-ink)',
      }}>Apple Bank</div>
    </div>
  );
}

function ScreenTag({ id }) {
  return (
    <div className="ab-screen-tag" style={{
      position: 'absolute', top: 12, right: 16, zIndex: 60,
      fontFamily: 'var(--ab-mono)', fontSize: 10, fontWeight: 600,
      color: 'rgba(26,26,26,0.4)', letterSpacing: '0.1em',
    }}>{id}</div>
  );
}

/* ═══════════════════ S1 — LANDING ═══════════════════ */

function S1_Landing({ next }) {
  return (
    <div style={{ width: '100%', minHeight: '100%', flex: 1, background: 'var(--ab-cream)', display: 'flex', flexDirection: 'column' }}>
      <ScreenTag id="S1" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', padding: '8px 0 0' }}>
        <AppleDropHero animated={true} canSize={200} height={260} />
        <div style={{ padding: '4px 28px 0', textAlign: 'left' }}>
          <div className="t-eyebrow" style={{ color: 'var(--ab-red)', marginBottom: 14 }}>Liquid Data × Apple Bank</div>
          <h1 className="t-display" style={{ marginBottom: 12 }}>
            <span style={{ color: 'var(--ab-ink)' }}>Apple Bank has been </span>
            <em style={{ fontStyle: 'italic', color: 'var(--ab-red)' }}>Good For New York</em>
            <span style={{ color: 'var(--ab-ink)' }}> since 1863.</span>
          </h1>
          <p className="t-lead" style={{ marginTop: 14, marginBottom: 18 }}>
            162 years. 80 neighborhood branches. Bankers who live in the same area as our branches — your neighbors. Now we’re paying you to come say hi.
          </p>
          <div style={{
            background: 'var(--ab-paper)', border: '1px solid var(--ab-line)',
            borderRadius: 12, padding: '10px 14px',
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13, color: 'var(--ab-ink-soft)',
          }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--ab-leaf)' }} />
            Tap to find your nearest branch — 12 within a mile.
          </div>
        </div>
      </div>
      <div style={{ padding: '14px 24px 28px' }}>
        <Button onClick={() => next('S2')} icon>Let’s go</Button>
        <div style={{ textAlign: 'center', marginTop: 14, fontSize: 12, color: 'var(--ab-ink-mute)' }}>
          90 seconds · 14 quick taps · real prizes
        </div>
      </div>
    </div>
  );
}

/* ═══════════════════ S2 — FORK ═══════════════════ */

function S2_Fork({ next, set }) {
  function pick(path) {
    set('path', path);
    next(path === 'student' ? 'S3' : 'P3');
  }
  return (
    <ScreenShell step={1} label="Step 1 of 8">
      <ScreenTag id="S2" />
      <h1 className="t-h1" style={{ marginTop: 12, marginBottom: 8 }}>
        First — <em style={{ color: 'var(--ab-red)' }}>who’s this for?</em>
      </h1>
      <p className="t-small" style={{ marginBottom: 24 }}>
        We’ll tailor what you see next. Worst case, you win a year of tuition.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        <ForkCard
          onClick={() => pick('student')}
          tone="red"
          icon={<div style={{ fontSize: 36, lineHeight: 1 }}>🎓</div>}
          title="I’m a student"
          sub="$0 fee Checking is here if you want it — no rush. Win a year of tuition just for finishing this."
          chip="Most common"
        />
        <ForkCard
          onClick={() => pick('parent')}
          tone="cream"
          icon={<div style={{ fontSize: 32, lineHeight: 1 }}>👨‍👩‍👧</div>}
          title="I’m a parent opening this with my kid"
          sub="Win a year of tuition for the family. If they open later, we match their first $200. Sleep better."
        />
      </div>

      <div style={{ marginTop: 18, padding: '12px 14px', background: 'var(--ab-cream-2)', borderRadius: 12, fontSize: 13, color: 'var(--ab-ink-soft)', lineHeight: 1.45 }}>
        We won’t share what you tap. Apple Bank is privately held by the Stahl estate — no quarterly earnings calls, no marketing data sales.
      </div>
    </ScreenShell>
  );
}

function ForkCard({ onClick, icon, title, sub, tone, chip }) {
  const isRed = tone === 'red';
  return (
    <button onClick={onClick} style={{
      textAlign: 'left', cursor: 'pointer', width: '100%',
      background: isRed ? 'var(--ab-paper)' : 'var(--ab-paper)',
      border: isRed ? '1.5px solid var(--ab-red)' : '1.5px solid var(--ab-line)',
      borderRadius: 'var(--ab-r-card)',
      padding: '20px 18px',
      boxShadow: isRed ? '0 14px 30px -18px rgba(168, 32, 31, 0.35)' : 'var(--ab-shadow-card)',
      transition: 'transform .15s, box-shadow .2s',
      position: 'relative',
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
    >
      {chip && (
        <div style={{
          position: 'absolute', top: 14, right: 14,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--ab-red)', background: 'var(--ab-red-soft)',
          padding: '4px 8px', borderRadius: 999,
        }}>{chip}</div>
      )}
      <div style={{ marginBottom: 10 }}>{icon}</div>
      <div style={{ fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 20, lineHeight: 1.15, marginBottom: 6, color: 'var(--ab-ink)', letterSpacing: '-0.01em' }}>
        {title}
      </div>
      <div style={{ fontSize: 14, color: 'var(--ab-ink-soft)', lineHeight: 1.5 }}>{sub}</div>
    </button>
  );
}

/* ═══════════════════ S3 — SCHOOL PICKER ═══════════════════ */

function S3_School({ state, set, next, back }) {
  const [q, setQ] = _us('');
  const selected = state.school;
  const groups = _um(() => {
    if (!q) return SCHOOL_GROUPS;
    const Q = q.toLowerCase();
    return SCHOOL_GROUPS
      .map(g => ({ ...g, schools: g.schools.filter(s => s.toLowerCase().includes(Q)) }))
      .filter(g => g.schools.length > 0);
  }, [q]);
  return (
    <ScreenShell
      step={2}
      label="Student · 2 of 8"
      footer={<Button onClick={() => next('S4')} icon disabled={!selected}>Continue</Button>}
    >
      <ScreenTag id="S3" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Where are you in school?</h1>
      <p className="t-small" style={{ marginBottom: 14 }}>We have a branch within walking distance of most of these.</p>

      <div style={{ marginBottom: 12 }}>
        <Input value={q} onChange={setQ} placeholder="Search 25 NYC-area schools" icon={<IconSearch />} />
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingBottom: 8 }}>
        {groups.map(g => (
          <div key={g.region}>
            <div className="t-eyebrow" style={{ marginBottom: 8, color: 'var(--ab-ink-mute)' }}>{g.region}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {g.schools.map(s => (
                <Chip key={s} selected={selected === s} onClick={() => set('school', s)}>{s}</Chip>
              ))}
            </div>
          </div>
        ))}
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8, color: 'var(--ab-ink-mute)' }}>Other</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <Chip selected={selected === 'Other school'} onClick={() => set('school', 'Other school')}>Other school</Chip>
            <Chip selected={selected === 'Not in school'} onClick={() => set('school', 'Not in school')}>Not in school</Chip>
          </div>
        </div>
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ S4 — YEAR + STUDY ═══════════════════ */

function S4_YearStudy({ state, set, next }) {
  return (
    <ScreenShell
      step={3}
      label="Student · 3 of 8"
      footer={<Button onClick={() => next('S5')} icon disabled={!state.year}>Continue</Button>}
    >
      <ScreenTag id="S4" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>What year are you in?</h1>
      <p className="t-small" style={{ marginBottom: 18 }}>{state.school || 'Your school'} · we won’t use this for ads.</p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 28 }}>
        {STUDENT_YEARS.map(y => (
          <button key={y} onClick={() => set('year', y)} style={{
            padding: '20px 8px', borderRadius: 14, cursor: 'pointer',
            background: state.year === y ? 'var(--ab-navy)' : 'var(--ab-paper)',
            color: state.year === y ? '#fff' : 'var(--ab-ink)',
            border: state.year === y ? '1.5px solid var(--ab-navy)' : '1.5px solid var(--ab-line)',
            fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em',
            transition: 'all .15s',
          }}>
            {y}
          </button>
        ))}
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 10 }}>Optional</div>
      <Input value={state.major} onChange={(v) => set('major', v)} placeholder="What are you studying? (e.g. Econ, Studio Art)" />
      <p style={{ marginTop: 10, fontSize: 12, color: 'var(--ab-ink-mute)', lineHeight: 1.45 }}>
        Why we ask: bankers at your branch often know alumni in your field. Real introductions, not LinkedIn spam.
      </p>
    </ScreenShell>
  );
}

/* ═══════════════════ S5 — CURRENT BANK ═══════════════════ */

function S5_CurrentBank({ state, set, next }) {
  const banks = state.banks || [];
  function toggle(b) {
    if (banks.includes(b)) set('banks', banks.filter(x => x !== b));
    else if (banks.length < 3) set('banks', [...banks, b]);
  }
  return (
    <ScreenShell
      step={4}
      label="Student · 4 of 8"
      footer={<Button onClick={() => next('S6')} icon disabled={banks.length === 0 || !state.usage}>Continue</Button>}
    >
      <ScreenTag id="S5" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Where do you bank now? <em style={{ color: 'var(--ab-red)' }}>Honesty wins.</em></h1>
      <p className="t-small" style={{ marginBottom: 14 }}>Pick up to 3. We’re not going to roast you.</p>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
        {COMPETITOR_BANKS.map(b => (
          <Chip key={b} selected={banks.includes(b)} onClick={() => toggle(b)} disabled={!banks.includes(b) && banks.length >= 3}>{b}</Chip>
        ))}
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 10 }}>How often do you use it?</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {USAGE_PATTERNS.map(u => (
          <button key={u} onClick={() => set('usage', u)} style={{
            textAlign: 'left', padding: '14px 16px', borderRadius: 12, cursor: 'pointer',
            background: state.usage === u ? 'var(--ab-navy-soft)' : 'var(--ab-paper)',
            border: state.usage === u ? '1.5px solid var(--ab-navy)' : '1.5px solid var(--ab-line)',
            fontFamily: 'var(--ab-sans)', fontSize: 14, fontWeight: 500, color: 'var(--ab-ink)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              width: 18, height: 18, borderRadius: 999,
              border: state.usage === u ? '5px solid var(--ab-navy)' : '1.5px solid var(--ab-line)',
              transition: 'all .15s', flexShrink: 0,
            }} />
            {u}
          </button>
        ))}
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ S6 — TRUST DROP ═══════════════════ */

function S6_TrustStudent({ next }) {
  return (
    <ScreenShell
      step={5}
      label="Student · 5 of 8"
      footer={<Button onClick={() => next('S7')} icon>OK — last few questions</Button>}
    >
      <ScreenTag id="S6" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>
        Five hundred times the interest.<br/>
        <em style={{ color: 'var(--ab-red)' }}>Zero fees till 25.</em>
      </h1>
      <p className="t-small" style={{ marginBottom: 20 }}>
        ClassValue Checking — the fee-free account Chase still hasn’t built. Co-signed by 1863.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
        <StatCard value="500×" label="more interest than megabanks" sub="5.00% APY on SmartStart Savings vs. Chase’s 0.01%." />
        <StatCard value="$0" label="monthly fees" sub="No minimums. No overdraft games. Through age 25." accent="green" />
        <StatCard value="1863" label="years of being your neighbor" sub="Founded in NYC. Still privately held. 80 branches across the five boroughs, LI, Westchester." />
      </div>

      <div style={{
        background: 'var(--ab-cream-2)', borderRadius: 14, padding: '14px 16px',
        display: 'flex', gap: 12, alignItems: 'flex-start',
      }}>
        <div style={{ flexShrink: 0, marginTop: 2 }}><AppleIcon size={28} /></div>
        <div>
          <div style={{ fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 14, marginBottom: 2 }}>"We’re Good For You."</div>
          <div style={{ fontSize: 12, color: 'var(--ab-ink-soft)', lineHeight: 1.45 }}>Our tagline since 1983. Still on every branch awning.</div>
        </div>
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ S7 — CONTACT + DEPOSIT ═══════════════════ */

function S7_Contact({ state, set, next }) {
  const ok = state.firstName && state.lastName && state.phone && state.phone.length >= 10 && state.email && state.email.includes('@');
  return (
    <ScreenShell
      step={6}
      label="Student · 6 of 8"
      footer={
        <div>
          <Button onClick={() => next('S8')} icon disabled={!ok}>Enter the raffle</Button>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 11, color: 'var(--ab-ink-mute)', lineHeight: 1.4 }}>
            We’ll text a 6-digit code to verify. No marketing texts — promise.
          </div>
        </div>
      }
    >
      <ScreenTag id="S7" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Where should we send your <em style={{ color: 'var(--ab-red)' }}>raffle entry?</em></h1>
      <p className="t-small" style={{ marginBottom: 18 }}>One text, one email. A banker can answer questions if you want — totally optional.</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 22 }}>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Name</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <Input value={state.firstName} onChange={(v) => set('firstName', v)} placeholder="First" />
            <Input value={state.lastName} onChange={(v) => set('lastName', v)} placeholder="Last" />
          </div>
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Phone</div>
          <Input value={state.phone} onChange={(v) => set('phone', v)} placeholder="(347) 555-0142" type="tel" icon={<IconPhone />} />
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Email</div>
          <Input value={state.email} onChange={(v) => set('email', v)} placeholder="you@nyu.edu" type="email" icon={<IconMail />} />
        </div>
      </div>

      <div style={{
        background: 'var(--ab-cream-2)', borderRadius: 12, padding: '12px 14px',
        fontSize: 13, color: 'var(--ab-ink-soft)', lineHeight: 1.45,
      }}>
        Open a ClassValue account in your first 30 days — we’ll text the link — and your raffle entries double. No pressure.
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ S8 — STUDENT CONFIRMATION ═══════════════════ */

function S8_StudentConfirm({ state, jump }) {
  return (
    <div style={{ width: '100%', minHeight: '100%', flex: 1, background: 'var(--ab-cream)', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      <ScreenTag id="S8" />
      <ConfettiBurst />
      <div style={{ flex: 1, overflow: 'auto', padding: '24px 24px 16px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20, marginBottom: 18 }}>
          <div style={{
            width: 84, height: 84, borderRadius: 999, background: 'var(--ab-leaf)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'ab-check-pulse 1.6s ease-out infinite, ab-pulse 2s ease-in-out infinite',
          }}>
            <IconCheck size={42} />
          </div>
        </div>

        <h1 className="t-h1" style={{ textAlign: 'center', marginBottom: 8 }}>
          You’re entered, {state.firstName || (state.school?.includes('NYU') ? 'Violet' : 'neighbor')}.
        </h1>
        <p className="t-small" style={{ textAlign: 'center', marginBottom: 16, padding: '0 12px' }}>
          One raffle entry locked in. A banker from {state.school || 'your nearest branch'} can answer questions if you want — texts you on your timeline, not ours.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 14 }}>
          <GrandPrizeTile
            title="One year of college tuition."
            sub="Drawn Jan 15. One entry locked in. Open a ClassValue account in 30 days for 2× entries."
          />
          <SecondaryPrizeTile
            title="MetroCard For Life."
            sub="50 winners. Unlimited rides until 2080. Yes, really."
          />
        </div>

        {/* 2× entries soft conversion card */}
        <DoubleEntryCard
          label="Want 2× odds?"
          line="Open ClassValue Checking in 30 days — fully online, $0 fees through age 25. We’ll double your raffle entries the day you fund it."
        />

        <div style={{
          background: 'var(--ab-paper)', borderRadius: 14, padding: '14px 16px',
          border: '1px solid var(--ab-line)', marginBottom: 14, marginTop: 12,
        }}>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>What we’ll text you</div>
          <Row k="Raffle status" v="1 entry · confirmed" />
          <Row k="School" v={state.school || '—'} />
          <Row k="Banker contact" v={state.phone || '—'} last />
        </div>
      </div>
      <div style={{ padding: '12px 24px 28px', borderTop: '1px solid var(--ab-line-2)' }}>
        <Button>
          <IconShare /> &nbsp;Send to a friend (extra raffle entry)
        </Button>
        <button onClick={() => jump('S1')} style={{
          marginTop: 10, width: '100%', background: 'transparent', border: 'none',
          color: 'var(--ab-ink-soft)', fontSize: 13, padding: 10, cursor: 'pointer',
          fontFamily: 'var(--ab-sans)',
        }}>Back to start</button>
      </div>
    </div>
  );
}

/* ─────────── DOUBLE-ENTRY CARD ───────────
   Soft conversion ask on confirmation. Account-opening = bonus, not the gate. */

function DoubleEntryCard({ label, line }) {
  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--ab-navy)', color: '#fff',
      borderRadius: 'var(--ab-r-tile)', padding: '20px 20px 18px',
      boxShadow: '0 18px 36px -18px rgba(15, 38, 89, 0.45)',
    }}>
      {/* tiny 2× badge */}
      <div style={{
        position: 'absolute', top: 18, right: 18,
        fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 28,
        color: 'var(--ab-red)', lineHeight: 1, letterSpacing: '-0.02em',
      }}>2×</div>
      <div className="t-eyebrow" style={{ color: 'rgba(255,255,255,0.65)', marginBottom: 8 }}>{label}</div>
      <div style={{ fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 18, lineHeight: 1.25, letterSpacing: '-0.01em', marginBottom: 10, paddingRight: 36 }}>
        Open an account, double your odds.
      </div>
      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.78)', lineHeight: 1.45, marginBottom: 12 }}>
        {line}
      </div>
      <button style={{
        background: '#fff', color: 'var(--ab-navy)', border: 'none',
        padding: '10px 16px', borderRadius: 999, fontFamily: 'var(--ab-sans)',
        fontWeight: 600, fontSize: 13, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>
        Text me the link <IconChevron size={14} />
      </button>
    </div>
  );
}

function Row({ k, v, last }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '8px 0', borderBottom: last ? 'none' : '1px solid var(--ab-line-2)',
      fontSize: 14,
    }}>
      <span style={{ color: 'var(--ab-ink-soft)' }}>{k}</span>
      <span style={{ fontWeight: 600, color: 'var(--ab-ink)' }}>{v}</span>
    </div>
  );
}

/* ═══════════════════ P3 — KID CONTEXT ═══════════════════ */

function P3_KidContext({ state, set, next }) {
  const ok = state.school && state.grade && state.ageBand;
  return (
    <ScreenShell
      step={2}
      label="Parent · 2 of 8"
      footer={<Button onClick={() => next('P4')} icon disabled={!ok}>Continue</Button>}
    >
      <ScreenTag id="P3" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Tell us about your kid.</h1>
      <p className="t-small" style={{ marginBottom: 16 }}>We’ll match them with a banker who actually works near them.</p>

      <div className="t-eyebrow" style={{ marginBottom: 8 }}>School</div>
      <div style={{ marginBottom: 18 }}>
        <SelectDropdown value={state.school} onChange={(v) => set('school', v)} options={ALL_SCHOOLS} placeholder="Pick a school or type to search" />
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 8 }}>Grade</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
        {GRADES.map(g => <Chip key={g} selected={state.grade === g} onClick={() => set('grade', g)}>{g}</Chip>)}
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 8 }}>Age</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {AGE_BANDS.map(a => (
          <button key={a} onClick={() => set('ageBand', a)} style={{
            padding: '14px 6px', borderRadius: 12, cursor: 'pointer',
            background: state.ageBand === a ? 'var(--ab-navy)' : 'var(--ab-paper)',
            color: state.ageBand === a ? '#fff' : 'var(--ab-ink)',
            border: state.ageBand === a ? '1.5px solid var(--ab-navy)' : '1.5px solid var(--ab-line)',
            fontFamily: 'var(--ab-sans)', fontWeight: 600, fontSize: 13,
          }}>
            {a}
          </button>
        ))}
      </div>
    </ScreenShell>
  );
}

function SelectDropdown({ value, onChange, options, placeholder }) {
  const [open, setOpen] = _us(false);
  const [q, setQ] = _us('');
  const filtered = options.filter(o => o.toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{ position: 'relative' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 16px', borderRadius: 12, cursor: 'pointer',
        background: 'var(--ab-paper)', border: '1.5px solid var(--ab-line)',
        fontFamily: 'var(--ab-sans)', fontSize: 15, color: value ? 'var(--ab-ink)' : 'var(--ab-ink-mute)',
        textAlign: 'left',
      }}>
        <span>{value || placeholder}</span>
        <span style={{ color: 'var(--ab-ink-mute)' }}><IconChevron dir={open ? 'up' : 'down'} /></span>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0, zIndex: 30,
          background: 'var(--ab-paper)', border: '1px solid var(--ab-line)', borderRadius: 12,
          boxShadow: 'var(--ab-shadow-lift)', maxHeight: 260, overflow: 'auto', padding: 8,
        }}>
          <div style={{ padding: '6px 8px 8px', borderBottom: '1px solid var(--ab-line-2)', marginBottom: 4 }}>
            <input
              value={q} onChange={(e) => setQ(e.target.value)} placeholder="Type to filter…" autoFocus
              style={{ width: '100%', border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--ab-sans)', fontSize: 14 }}
            />
          </div>
          {filtered.slice(0, 8).map(o => (
            <button key={o} onClick={() => { onChange(o); setOpen(false); setQ(''); }} style={{
              display: 'block', width: '100%', textAlign: 'left',
              padding: '10px 10px', borderRadius: 8, cursor: 'pointer',
              background: value === o ? 'var(--ab-red-soft)' : 'transparent', border: 'none',
              fontFamily: 'var(--ab-sans)', fontSize: 14, color: 'var(--ab-ink)',
            }}
            onMouseEnter={(e) => value !== o && (e.currentTarget.style.background = 'var(--ab-cream-2)')}
            onMouseLeave={(e) => value !== o && (e.currentTarget.style.background = 'transparent')}
            >{o}</button>
          ))}
          {filtered.length === 0 && <div style={{ padding: 12, fontSize: 13, color: 'var(--ab-ink-mute)' }}>No matches.</div>}
        </div>
      )}
    </div>
  );
}

/* ═══════════════════ P4 — FAMILY BANKING ═══════════════════ */

function P4_FamilyBanking({ state, set, next }) {
  const banks = state.banks || [];
  function toggle(b) {
    if (banks.includes(b)) set('banks', banks.filter(x => x !== b));
    else if (banks.length < 3) set('banks', [...banks, b]);
  }
  const ok = banks.length > 0 && state.familyCount && state.has529;
  return (
    <ScreenShell
      step={3}
      label="Parent · 3 of 8"
      footer={<Button onClick={() => next('P5')} icon disabled={!ok}>Continue</Button>}
    >
      <ScreenTag id="P4" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Where does your family bank?</h1>
      <p className="t-small" style={{ marginBottom: 14 }}>Pick up to 3.</p>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
        {COMPETITOR_BANKS.map(b => (
          <Chip key={b} selected={banks.includes(b)} onClick={() => toggle(b)} disabled={!banks.includes(b) && banks.length >= 3}>{b}</Chip>
        ))}
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 8 }}>How many accounts in the family?</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 22 }}>
        {FAMILY_ACCT_COUNT.map(c => (
          <button key={c} onClick={() => set('familyCount', c)} style={{
            padding: '14px 4px', borderRadius: 12, cursor: 'pointer',
            background: state.familyCount === c ? 'var(--ab-navy)' : 'var(--ab-paper)',
            color: state.familyCount === c ? '#fff' : 'var(--ab-ink)',
            border: state.familyCount === c ? '1.5px solid var(--ab-navy)' : '1.5px solid var(--ab-line)',
            fontFamily: 'var(--ab-serif)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em',
          }}>{c}</button>
        ))}
      </div>

      <div className="t-eyebrow" style={{ marginBottom: 8 }}>529 college savings plan?</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {STATUS_529.map(s => (
          <Chip key={s} selected={state.has529 === s} onClick={() => set('has529', s)} size="lg">{s}</Chip>
        ))}
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ P5 — TRUST DROP (PARENT) ═══════════════════ */

function P5_TrustParent({ next }) {
  return (
    <ScreenShell
      step={4}
      label="Parent · 4 of 8"
      footer={<Button onClick={() => next('P6')} icon>That works — let’s see the match</Button>}
    >
      <ScreenTag id="P5" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>
        Why parents trust us.
      </h1>
      <p className="t-small" style={{ marginBottom: 20 }}>
        Privately held. No quarterly earnings calls. No layoffs in 25 years.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
        <StatCard value="$17.5B" label="in assets, privately held" sub="By the Stahl estate since 1863. We don’t answer to Wall Street." />
        <StatCard value="$0" label="fees on your kid’s account" sub="Through age 25. No minimums, no overdraft games." accent="green" />
        <StatCard value="5.00%" label="APY on SmartStart Savings" sub="500× Chase’s 0.01%. Compounding daily, from day one." />
      </div>

      <div style={{
        background: 'var(--ab-paper)', borderRadius: 14, padding: '16px',
        border: '1px solid var(--ab-line)', display: 'flex', gap: 12, alignItems: 'flex-start',
      }}>
        <div style={{ width: 60, flexShrink: 0 }}>
          <NYCSubwayTile width={60} height={36} />
        </div>
        <div style={{ fontSize: 13, color: 'var(--ab-ink-soft)', lineHeight: 1.5 }}>
          <span style={{ fontFamily: 'var(--ab-serif)', fontWeight: 700, color: 'var(--ab-ink)' }}>"Bankers who live in the same area as our branches — your neighbors."</span>
          {' '}80 branches across NYC and the metro. Walk in any one.
        </div>
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ P6 — MATCH + CO-SIGN ═══════════════════ */

function P6_Match({ next }) {
  return (
    <ScreenShell
      step={5}
      label="Parent · 5 of 8"
      footer={<Button onClick={() => next('P7')} icon>OK — last few questions</Button>}
    >
      <ScreenTag id="P6" />
      <h1 className="t-h1" style={{ marginTop: 12, marginBottom: 8 }}>
        If they open, we match their <em style={{ color: 'var(--ab-red)' }}>first $200.</em>
      </h1>
      <p className="t-lead" style={{ marginBottom: 18 }}>
        Your kid decides — no rush. If they open ClassValue Checking and put in $200, Apple Bank adds another $200. Plus you’re both already entered in the tuition raffle.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
        <GrandPrizeTile
          label="What your kid walks away with"
          title="A $400 starting balance."
          sub="Their $200 + our $200 match. Deposited the day the account opens."
        />
        <SecondaryPrizeTile
          label="Plus you’re both entered to win"
          title="A year of tuition · MetroCard For Life."
          sub="Grand prize drawn Jan 15. Open to all matched accounts."
        />
      </div>

      <div style={{
        padding: '12px 14px', background: 'var(--ab-cream-2)',
        borderRadius: 12, fontSize: 12, color: 'var(--ab-ink-soft)', lineHeight: 1.45,
      }}>
        <strong style={{ color: 'var(--ab-ink)' }}>Fine print.</strong> Match credited within 5 business days of the kid’s qualifying $200 deposit. One match per household. Through Dec 31.
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ P7 — CONTACT + INTENT ═══════════════════ */

function P7_ParentContact({ state, set, next }) {
  const ok = state.firstName && state.lastName && state.phone && state.phone.length >= 10 && state.email && state.email.includes('@');
  return (
    <ScreenShell
      step={6}
      label="Parent · 6 of 8"
      footer={
        <div>
          <Button onClick={() => next('P8')} icon disabled={!ok}>Enter the raffle</Button>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 11, color: 'var(--ab-ink-mute)', lineHeight: 1.4 }}>
            One text. One email. A real banker will follow up — no autodialer.
          </div>
        </div>
      }
    >
      <ScreenTag id="P7" />
      <h1 className="t-h2" style={{ marginTop: 12, marginBottom: 6 }}>Where should we send your <em style={{ color: 'var(--ab-red)' }}>raffle entry?</em></h1>
      <p className="t-small" style={{ marginBottom: 18 }}>A banker can answer questions if you both want. Otherwise just collect your entry and go.</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 22 }}>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Your name</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <Input value={state.firstName} onChange={(v) => set('firstName', v)} placeholder="First" />
            <Input value={state.lastName} onChange={(v) => set('lastName', v)} placeholder="Last" />
          </div>
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Your kid’s first name <span style={{ color: 'var(--ab-ink-mute)', textTransform: 'none', letterSpacing: 0 }}>(optional)</span></div>
          <Input value={state.kidFirstName} onChange={(v) => set('kidFirstName', v)} placeholder="So we don’t say “your kid”" />
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Your phone</div>
          <Input value={state.phone} onChange={(v) => set('phone', v)} placeholder="(212) 555-0118" type="tel" icon={<IconPhone />} />
        </div>
        <div>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Your email</div>
          <Input value={state.email} onChange={(v) => set('email', v)} placeholder="you@gmail.com" type="email" icon={<IconMail />} />
        </div>
      </div>

      <div style={{
        background: 'var(--ab-cream-2)', borderRadius: 12, padding: '12px 14px',
        fontSize: 13, color: 'var(--ab-ink-soft)', lineHeight: 1.45,
      }}>
        If {state.kidFirstName || 'they'} opens a ClassValue account in 30 days, both raffle entries double — plus the $200 match.
      </div>
    </ScreenShell>
  );
}

/* ═══════════════════ P8 — PARENT CONFIRMATION ═══════════════════ */

function P8_ParentConfirm({ state, jump }) {
  return (
    <div style={{ width: '100%', minHeight: '100%', flex: 1, background: 'var(--ab-cream)', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      <ScreenTag id="P8" />
      <ConfettiBurst />
      <div style={{ flex: 1, overflow: 'auto', padding: '24px 24px 16px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20, marginBottom: 18 }}>
          <div style={{
            width: 84, height: 84, borderRadius: 999, background: 'var(--ab-leaf)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'ab-check-pulse 1.6s ease-out infinite, ab-pulse 2s ease-in-out infinite',
          }}>
            <IconCheck size={42} />
          </div>
        </div>

        <h1 className="t-h1" style={{ textAlign: 'center', marginBottom: 8 }}>
          You’re both <em style={{ color: 'var(--ab-red)' }}>entered</em>{state.firstName ? `, ${state.firstName}` : ''}.
        </h1>
        <p className="t-small" style={{ textAlign: 'center', marginBottom: 20, padding: '0 12px' }}>
          Two entries locked in — one for {state.firstName || 'you'}, one for {state.kidFirstName || 'your kid'}. If {state.kidFirstName || 'they'} opens ClassValue in 30 days, both entries double — plus the $200 match.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 14 }}>
          <GrandPrizeTile
            title="One year of college tuition + MetroCard For Life."
            sub="Two entries locked in. Drawn Jan 15. Open to all matched accounts."
            label="The raffle · 2 entries"
          />
          <SecondaryPrizeTile
            title="$200 match · if they ever open."
            sub="They put in $200, we add $200. No deadline pressure — match holds for 12 months."
            label="The offer"
          />
        </div>

        <DoubleEntryCard
          label="Want 4× odds?"
          line="If they open ClassValue in 30 days, both of your entries double. That’s four shots at a year of tuition."
        />

        <div style={{
          background: 'var(--ab-paper)', borderRadius: 14, padding: '14px 16px',
          border: '1px solid var(--ab-line)', marginBottom: 14, marginTop: 12,
        }}>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>What we’ll text you</div>
          <Row k="Raffle status" v="2 entries · confirmed" />
          <Row k="Kid’s school" v={state.school || '—'} />
          <Row k="Banker contact" v={state.phone || '—'} last />
        </div>
      </div>
      <div style={{ padding: '12px 24px 28px', borderTop: '1px solid var(--ab-line-2)' }}>
        <Button>
          <IconShare /> &nbsp;Send to the family group chat
        </Button>
        <button onClick={() => jump('S1')} style={{
          marginTop: 10, width: '100%', background: 'transparent', border: 'none',
          color: 'var(--ab-ink-soft)', fontSize: 13, padding: 10, cursor: 'pointer',
          fontFamily: 'var(--ab-sans)',
        }}>Back to start</button>
      </div>
    </div>
  );
}

/* ─────────── EXPORTS ─────────── */

const AB_SCREENS = {
  S1: S1_Landing, S2: S2_Fork, S3: S3_School, S4: S4_YearStudy, S5: S5_CurrentBank,
  S6: S6_TrustStudent, S7: S7_Contact, S8: S8_StudentConfirm,
  P3: P3_KidContext, P4: P4_FamilyBanking, P5: P5_TrustParent, P6: P6_Match,
  P7: P7_ParentContact, P8: P8_ParentConfirm,
};

const AB_SCREEN_META = [
  { id: 'S1', label: 'S1 · Landing',                path: 'shared' },
  { id: 'S2', label: 'S2 · Fork',                   path: 'shared' },
  { id: 'S3', label: 'S3 · School picker',          path: 'student' },
  { id: 'S4', label: 'S4 · Year + study',           path: 'student' },
  { id: 'S5', label: 'S5 · Current bank',           path: 'student' },
  { id: 'S6', label: 'S6 · Trust drop',             path: 'student' },
  { id: 'S7', label: 'S7 · Contact + deposit',      path: 'student' },
  { id: 'S8', label: 'S8 · Confirmation',           path: 'student' },
  { id: 'P3', label: 'P3 · Kid context',            path: 'parent' },
  { id: 'P4', label: 'P4 · Family banking',         path: 'parent' },
  { id: 'P5', label: 'P5 · Trust drop (parent)',    path: 'parent' },
  { id: 'P6', label: 'P6 · Match + co-sign',        path: 'parent' },
  { id: 'P7', label: 'P7 · Contact + intent',       path: 'parent' },
  { id: 'P8', label: 'P8 · Confirmation',           path: 'parent' },
];

Object.assign(window, { AB_SCREENS, AB_SCREEN_META, Brand, ScreenTag, Row });