// page-system.jsx — IA / Components / Interactions reference

function PageIA({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const tree = [
    { n: '1 · Home', d: en ? 'Brand frame · trial CTA · faculty preview · FAQ' : '品牌 · 试听 CTA · 教师 · FAQ', ch: ['Hero', 'Programs', 'Faculty', 'FAQ', 'Footer'] },
    { n: '2 · Programs', d: en ? 'Pricing cards · age & instrument filter' : '价目卡 · 筛选', ch: ['Filter', 'Tier card', 'Compare'] },
    { n: '3 · Faculty detail', d: en ? 'Bio · availability · book trial' : '简介 · 空档 · 预约', ch: ['Profile', 'Slots', 'Reviews'] },
    { n: '4 · Trial booking', d: en ? 'Routing → calendar → confirm' : '路由 → 日历 → 确认', ch: ['Form', 'Calendar', 'Confirm'] },
    { n: '5 · Enrollment + sign', d: en ? 'Family · student · program · sign · pay' : '家庭 · 学生 · 课程 · 签 · 付', ch: ['Stepper', 'Doc preview', 'Signature'] },
    { n: '6 · Parent portal', d: en ? 'Schedule · invoices · makeup' : '课表 · 账单 · 补课', ch: ['Nav', 'Invoice table', 'Modal'] },
    { n: '7 · Teacher portal', d: en ? 'Today · roster · availability' : '今日 · 学生 · 排课', ch: ['Timeline', 'Roster', 'Notes'] },
    { n: '8 · Owner dashboard', d: en ? 'KPI · MRR · trial→enroll · churn' : 'KPI · 月收入 · 转化 · 流失', ch: ['KPI', 'Charts', 'Reports'] },
  ];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
      <div style={{ padding: '48px 80px 80px' }}>
        <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Reference · 01' : '参考 · 01'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 16, letterSpacing: -1 }}>{en ? 'Information architecture' : '信息架构'}</H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 40, maxWidth: 620, lineHeight: 1.6 }}>
          {en ? 'Eight surfaces, three audiences. Public site (1–5) drives trial-to-enrollment. Portals (6–7) are signed-in self-service. Owner dashboard (8) is read-only insight.' : '八个页面，三类受众。公共站（1–5）承担"试听到签约"；Portal（6–7）登录后自助；Owner 看板（8）只读洞察。'}
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {tree.map((t, i) => (
            <Card key={i} dark={dark}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                <H as="div" dark={dark} font={headingFont} size={20} weight={500}>{t.n}</H>
                <Mono dark={dark}>{i < 5 ? 'public' : i < 7 ? 'auth · user' : 'auth · admin'}</Mono>
              </div>
              <p style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, marginBottom: 14, lineHeight: 1.6 }}>{t.d}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>{t.ch.map(c => <Pill key={c} dark={dark}>{c}</Pill>)}</div>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: 56 }}>
          <H as="h2" dark={dark} font={headingFont} size={22} style={{ marginBottom: 16 }}>{en ? 'Primary user flows' : '主要用户流'}</H>
          <Card dark={dark} padding={28}>
            {[
              { who: en ? 'Parent (new)' : '家长（新）', flow: '1 → 4 → 5 → 6', note: en ? 'Discover → trial → enroll → portal' : '了解 → 试听 → 注册 → Portal' },
              { who: en ? 'Parent (returning)' : '家长（老）', flow: '6', note: en ? 'Pay · request makeup' : '缴费 · 申请补课' },
              { who: en ? 'Teacher' : '教师', flow: '7', note: en ? 'Today · notes · availability' : '今日 · 笔记 · 排课' },
              { who: 'Owner', flow: '8 → 5 → 7', note: en ? 'KPI · enrollment · faculty load' : 'KPI · 招生 · 教师负荷' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 140px 1fr', padding: '14px 0', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.ink, fontWeight: 500 }}>{r.who}</span>
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 12, color: p.gold, letterSpacing: 0.6 }}>{r.flow}</span>
                <span style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft }}>{r.note}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </Page>
  );
}

function PageComponents({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const Section = ({ title, subtitle, children }) => (
    <div style={{ marginBottom: 48 }}>
      <Mono dark={dark} style={{ marginBottom: 8, display: 'inline-block' }}>{subtitle}</Mono>
      <H as="h2" dark={dark} font={headingFont} size={22} style={{ marginBottom: 16 }}>{title}</H>
      <Card dark={dark} padding={28}>{children}</Card>
    </div>
  );
  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
      <div style={{ padding: '48px 80px 80px' }}>
        <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Reference · 02' : '参考 · 02'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 16, letterSpacing: -1 }}>{en ? 'Component library' : '组件库'}</H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 40, maxWidth: 620, lineHeight: 1.6 }}>
          {en ? 'Every UI atom used across the eight pages. AA contrast, 44px hit area, full keyboard reachability.' : '八页中所用全部基础组件。AA 对比 / 44px 点击区 / 键盘可达。'}
        </p>
        <Section title={en ? 'Buttons' : '按钮'} subtitle="01 · button · 4 variants · 3 sizes">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button dark={dark} variant="primary">{en ? 'Schedule a trial' : '预约试听'}</Button>
            <Button dark={dark} variant="secondary">{en ? 'Learn more' : '了解更多'}</Button>
            <Button dark={dark} variant="ghost">{en ? 'Cancel' : '取消'}</Button>
            <Button dark={dark} variant="primary" size="sm">Small</Button>
            <Button dark={dark} variant="primary" size="lg">Large · 44px hit</Button>
          </div>
        </Section>
        <Section title={en ? 'Form inputs' : '表单输入'} subtitle="02 · input · select · stepper">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
            <Input dark={dark} label={en ? 'Parent name' : '家长姓名'} placeholder="Lin Chen" required />
            <Input dark={dark} label="Email" placeholder="lin@example.com" hint={en ? 'Confirmation goes here.' : '确认信将发送到此。'} />
            <Input dark={dark} label="Phone" placeholder="+1 604 ···" error={en ? 'Phone is required' : '请填写电话'} />
            <Select dark={dark} label={en ? 'Instrument' : '乐器'} value="Piano" options={[]} required />
          </div>
          <Stepper dark={dark} steps={en ? ['Family', 'Student', 'Program', 'Sign', 'Pay'] : ['家庭', '学生', '课程', '签', '付']} current={2} />
        </Section>
        <Section title={en ? 'Status & feedback' : '状态与反馈'} subtitle="03 · pill · toast">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
            <Pill dark={dark}>neutral</Pill>
            <Pill dark={dark} tone="gold">trial</Pill>
            <Pill dark={dark} tone="success">paid</Pill>
            <Pill dark={dark} tone="danger">overdue</Pill>
          </div>
          <Toast dark={dark} tone="success" title={en ? 'Trial booked' : '已预约'} body={en ? 'Wed 4:15 pm · Ji-eun Park · Studio B-3' : '周三 16:15 · 朴智恩 · B-3 琴房'} />
        </Section>
        <Section title={en ? 'Empty states' : '空状态'} subtitle="04 · empty">
          <EmptyState dark={dark} title={en ? 'No invoices yet' : '暂无账单'} body={en ? 'Once you enroll, monthly invoices appear here.' : '注册后，月度账单将在此显示。'} action={<Button dark={dark}>{en ? 'See programs' : '查看课程'}</Button>} />
        </Section>
      </div>
    </Page>
  );
}

function PageInteractions({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';
  const flows = en ? [
    { n: 'F1', t: 'Trial booking', steps: ['Tap CTA → routing form (instrument · age · level)', 'System matches faculty by skill + availability', 'Pick slot → confirm → toast "Trial booked"', 'Email + SMS via n8n; Cal.com event created'], api: 'POST /leads · POST /bookings' },
    { n: 'F2', t: 'Enrollment + e-sign', steps: ['5-step form, autosave on blur', 'Documenso embedded; webhook on signature', 'Stripe handoff for first invoice', 'Welcome email with portal link'], api: 'POST /enrollments · POST /contracts/sign · POST /invoices' },
    { n: 'F3', t: 'Makeup request', steps: ['Parent opens modal in portal', 'Selects missed lesson · proposes window', 'Ops matches teacher availability', 'Confirmation pushed to both calendars'], api: 'POST /makeup-requests · GET /availability' },
    { n: 'F4', t: 'Monthly billing', steps: ['Stripe charges on the 1st', 'Webhook updates invoice status', 'Failed: 3-day grace · auto-retry · email', 'Owner dashboard shows "Payments to chase"'], api: 'WEBHOOK /stripe · GET /invoices?status=overdue' },
  ] : [
    { n: 'F1', t: '试听预约', steps: ['点击 CTA → 路由表单（乐器 · 年龄 · 水平）', '系统按技能 + 空档匹配教师', '选档 → 确认 → toast "已预约"', 'n8n 触发邮件/短信，Cal.com 落库'], api: 'POST /leads · POST /bookings' },
    { n: 'F2', t: '注册 + 电子签', steps: ['5 步表单，失焦自动保存', '内嵌 Documenso，签署 webhook 回传', 'Stripe 处理首期账单', '欢迎邮件 + Portal 链接'], api: 'POST /enrollments · POST /contracts/sign · POST /invoices' },
    { n: 'F3', t: '补课申请', steps: ['家长在 Portal 打开 Modal', '选缺课节 · 提议窗口', 'Ops 匹配教师空档', '双向同步至两边日历'], api: 'POST /makeup-requests · GET /availability' },
    { n: 'F4', t: '月度收费', steps: ['每月 1 日 Stripe 自动扣款', 'webhook 更新账单状态', '失败：3 天宽限 · 自动重试 · 通知', 'Owner 看板显示 "需催收"'], api: 'WEBHOOK /stripe · GET /invoices?status=overdue' },
  ];

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
      <div style={{ padding: '48px 80px 80px' }}>
        <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Reference · 03' : '参考 · 03'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 16, letterSpacing: -1 }}>{en ? 'Interactions & API mocks' : '交互与 API 接口'}</H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 40, maxWidth: 640, lineHeight: 1.6 }}>
          {en ? 'Four critical flows. Each is a notebook entry; the API column is what dev should mock first.' : '四条关键链路。右栏标注 API mock 名称，便于工程优先打桩。'}
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 48 }}>
          {flows.map(f => (
            <Card key={f.n} dark={dark} padding={28}>
              <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 280px', gap: 24, alignItems: 'flex-start' }}>
                <div>
                  <Mono dark={dark}>{f.n}</Mono>
                  <H as="div" dark={dark} font={headingFont} size={18} weight={500} style={{ marginTop: 6 }}>{f.t}</H>
                </div>
                <ol style={{ margin: 0, paddingLeft: 18, fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.8 }}>
                  {f.steps.map((s, i) => <li key={i}>{s}</li>)}
                </ol>
                <div style={{ background: p.paperSoft, borderLeft: `2px solid ${p.gold}`, padding: '12px 14px' }}>
                  <Mono dark={dark} style={{ marginBottom: 6, display: 'inline-block' }}>API mock</Mono>
                  <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.ink, lineHeight: 1.7 }}>{f.api}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        <H as="h2" dark={dark} font={headingFont} size={22} style={{ marginBottom: 16 }}>{en ? 'Mock data fields' : 'Mock 数据字段'}</H>
        <Card dark={dark} padding={0}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: p.paperSoft }}>
                {['Entity', 'Key fields', 'Source'].map((h, i) => (
                  <th key={i} style={{ textAlign: 'left', padding: '14px 24px', fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: 0.6, color: p.inkMuted, textTransform: 'uppercase', fontWeight: 400 }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['lead', 'id, source, instrument, age, level, parent_email, parent_phone, status', 'website form'],
                ['family', 'id, primary_email, billing_address, students[]', 'enrollment'],
                ['student', 'id, family_id, name, dob, instrument, level, teacher_id', 'enrollment'],
                ['booking', 'id, type(trial|lesson), teacher_id, student_id, start_at, duration, status', 'cal.com'],
                ['invoice', 'id, family_id, period, amount, status(due|paid|failed), stripe_id', 'stripe'],
                ['contract', 'id, family_id, signed_at, signer_name, document_url', 'documenso'],
                ['makeup', 'id, missed_booking_id, proposed_at, status, replacement_booking_id', 'portal'],
              ].map((r, i) => (
                <tr key={i} style={{ borderTop: `0.5px solid ${p.lineSoft}` }}>
                  <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.mono, fontSize: 11, color: p.gold, fontWeight: 500 }}>{r[0]}</td>
                  <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkSoft, lineHeight: 1.6 }}>{r[1]}</td>
                  <td style={{ padding: '14px 24px', fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkMuted }}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
    </Page>
  );
}

window.PageIA = PageIA;
window.PageComponents = PageComponents;
window.PageInteractions = PageInteractions;