// tokens.jsx — Design tokens + i18n strings + shared primitives for Mastery School of Music

const TOKENS = {
  // Warm white / gold / graphite — the canonical palette
  warm: {
    paper: '#F7F4EE',     // page bg
    paperSoft: '#EFEBE2', // panel bg
    ink: '#1D1D1F',       // primary text
    inkSoft: '#3A3833',   // secondary text
    inkMuted: '#76716A',  // tertiary text
    line: 'rgba(29,29,31,0.10)',
    lineSoft: 'rgba(29,29,31,0.06)',
    gold: '#B7925A',      // accent (action)
    goldSoft: '#D9C7A7',  // tints
    goldDeep: '#8E6F40',
    danger: '#A4422C',
    success: '#4E5B4F',
  },
  dark: {
    paper: '#15140F',
    paperSoft: '#1E1C16',
    ink: '#F2EDE2',
    inkSoft: '#C9C2B2',
    inkMuted: '#7E786A',
    line: 'rgba(242,237,226,0.10)',
    lineSoft: 'rgba(242,237,226,0.06)',
    gold: '#C9A26B',
    goldSoft: '#3F3528',
    goldDeep: '#E0BC85',
    danger: '#C46B53',
    success: '#7E8E7C',
  },
  font: {
    sans: '"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
    serif: '"Cormorant Garamond", "Source Serif 4", "Georgia", serif',
    mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
  },
  radius: { xs: 3, sm: 5, md: 8, lg: 12, xl: 20 },
  space: { xs: 4, sm: 8, md: 12, lg: 20, xl: 32, xxl: 56 },
};

// Resolve current palette based on dark-mode flag
const palette = (dark) => dark ? TOKENS.dark : TOKENS.warm;

// ── i18n strings ──────────────────────────────────────────────
const STRINGS = {
  en: {
    brand: 'Mastery School of Music',
    nav: { programs: 'Programs', faculty: 'Faculty', schedule: 'Schedule a Trial', portal: 'Portal' },
    cta: { trial: 'Schedule a Trial', enroll: 'Enroll', learnMore: 'Learn more', viewFaculty: 'View faculty', book: 'Book this slot', save: 'Save & continue', back: 'Back', sign: 'Sign agreement', pay: 'Pay tuition', submit: 'Submit', request: 'Request makeup', cancel: 'Cancel' },
    hero: {
      eyebrow: 'University of British Columbia campus · Since 2003',
      title: 'Discover Musical Growth\nwith Structure and Warmth',
      sub: 'Private lessons, group learning, and one clear journey — for the curious, the committed, and the families behind them.',
      meta: ['30 faculty', '7 studios · 2 classrooms', 'Year-round recitals'],
    },
    sections: {
      programs: 'Programs', faculty: 'Faculty', proof: 'A studio built on careful work',
      faq: 'Frequent questions', footer: 'Visit the studio',
    },
  },
  zh: {
    brand: 'Mastery 音乐学校',
    nav: { programs: '课程', faculty: '教师', schedule: '预约试听', portal: '账户' },
    cta: { trial: '预约试听', enroll: '在线注册', learnMore: '了解更多', viewFaculty: '查看教师', book: '预约此时段', save: '保存并继续', back: '上一步', sign: '签署协议', pay: '支付学费', submit: '提交', request: '申请补课', cancel: '取消' },
    hero: {
      eyebrow: '英属哥伦比亚大学校园 · 自 2003 年',
      title: '在结构与温度中\n发现音乐的成长',
      sub: '私人课、小组课、清晰的成长路径——给好奇的孩子、专注的学习者，以及陪伴他们的家庭。',
      meta: ['30 位教师', '7 间琴房 · 2 间教室', '全年汇报演出'],
    },
    sections: {
      programs: '课程项目', faculty: '教师团队', proof: '一所认真做事的学校',
      faq: '常见问题', footer: '到访学校',
    },
  },
};

// ── Striped placeholder (the only "image" we use) ─────────────
function Stripes({ ratio = '4 / 3', label, height, width = '100%', dark, dense = false, style = {} }) {
  const p = palette(dark);
  const stripeColor = dark ? 'rgba(242,237,226,0.06)' : 'rgba(29,29,31,0.045)';
  const gap = dense ? 6 : 10;
  return (
    <div style={{
      width, height, aspectRatio: height ? undefined : ratio,
      background: `repeating-linear-gradient(135deg, ${stripeColor} 0 1px, transparent 1px ${gap}px), ${p.paperSoft}`,
      border: `0.5px solid ${p.line}`,
      borderRadius: 2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      {label && <div style={{
        fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: 0.4,
        color: p.inkMuted, textTransform: 'lowercase', padding: '2px 8px',
        background: p.paper, border: `0.5px solid ${p.line}`,
      }}>{label}</div>}
    </div>
  );
}

// ── Logotype ──────────────────────────────────────────────────
function Logotype({ dark, size = 16, serif = true }) {
  const p = palette(dark);
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, letterSpacing: 0 }}>
      <span style={{
        fontFamily: serif ? TOKENS.font.serif : TOKENS.font.sans,
        fontWeight: serif ? 500 : 600,
        fontSize: size, color: p.ink, letterSpacing: serif ? 0.2 : -0.2,
        fontStyle: serif ? 'italic' : 'normal',
      }}>Mastery</span>
      <span style={{ fontFamily: TOKENS.font.sans, fontSize: size * 0.62, color: p.inkMuted, letterSpacing: 1.4, textTransform: 'uppercase' }}>
        School of Music
      </span>
    </div>
  );
}

// ── Page chrome (header + footer, used inside every artboard) ─
function Header({ dark, lang, active, headingFont = 'sans' }) {
  const p = palette(dark);
  const t = STRINGS[lang];
  const NavLink = ({ id, label }) => (
    <a style={{
      fontFamily: TOKENS.font.sans, fontSize: 12, color: active === id ? p.ink : p.inkMuted,
      textDecoration: 'none', letterSpacing: 0.1, fontWeight: active === id ? 500 : 400,
    }}>{label}</a>
  );
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 40px', borderBottom: `0.5px solid ${p.line}`,
      background: p.paper,
    }}>
      <Logotype dark={dark} size={15} serif={headingFont === 'serif'} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <NavLink id="programs" label={t.nav.programs} />
        <NavLink id="faculty" label={t.nav.faculty} />
        <NavLink id="portal" label={t.nav.portal} />
        <button style={{
          background: p.ink, color: p.paper, border: 'none', borderRadius: 999,
          padding: '8px 16px', fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 500,
          letterSpacing: 0.1, cursor: 'pointer',
        }}>{t.nav.schedule}</button>
      </div>
    </div>
  );
}

function Footer({ dark, lang, headingFont = 'sans' }) {
  const p = palette(dark);
  const t = STRINGS[lang];
  return (
    <div style={{
      padding: '40px', borderTop: `0.5px solid ${p.line}`, background: p.paper,
      display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 32,
    }}>
      <div>
        <Logotype dark={dark} size={14} serif={headingFont === 'serif'} />
        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, color: p.inkMuted, marginTop: 12, lineHeight: 1.6, maxWidth: 240 }}>
          {lang === 'en'
            ? '6361 University Boulevard, Vancouver BC. Studios open Mon–Sat.'
            : '温哥华 University Boulevard 6361 号。琴房周一至周六开放。'}
        </div>
      </div>
      {[
        { h: lang === 'en' ? 'Learn' : '学习', items: ['Private lessons', 'Group classes', 'Theory & RCM', 'Summer camps'] },
        { h: lang === 'en' ? 'Studio' : '学校', items: ['Faculty', 'Recitals', 'Policies', 'Visit us'] },
        { h: lang === 'en' ? 'Account' : '账户', items: ['Parent portal', 'Teacher portal', 'Sign in'] },
      ].map((col, i) => (
        <div key={i}>
          <div style={{ fontFamily: TOKENS.font.sans, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: p.inkMuted, marginBottom: 10 }}>{col.h}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {col.items.map((it, j) => (
              <span key={j} style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft }}>{it}</span>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Heading helper — toggles serif vs sans for h1/h2 ─────────
function H({ as = 'h1', dark, font, size, weight, children, style = {} }) {
  const p = palette(dark);
  const Tag = as;
  const isSerif = font === 'serif';
  return (
    <Tag style={{
      fontFamily: isSerif ? TOKENS.font.serif : TOKENS.font.sans,
      fontWeight: weight ?? (isSerif ? 500 : 600),
      fontSize: size, color: p.ink, margin: 0,
      letterSpacing: isSerif ? -0.2 : -0.6,
      lineHeight: 1.1,
      fontStyle: isSerif && as === 'h1' ? 'normal' : 'normal',
      textWrap: 'pretty',
      ...style,
    }}>{children}</Tag>
  );
}

// ── Mono caption — used for placeholder copy & tags ─────────
function Mono({ dark, children, style = {} }) {
  const p = palette(dark);
  return <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: 0.6, color: p.inkMuted, textTransform: 'uppercase', ...style }}>{children}</span>;
}

// ── Page frame — every artboard is the same width/height ─────
const PAGE_W = 1280;
const PAGE_H = 900;

function Page({ dark, children, scrollable = false }) {
  const p = palette(dark);
  return (
    <div style={{
      width: '100%', minHeight: '100%', background: p.paper, color: p.ink,
      fontFamily: TOKENS.font.sans,
      display: 'flex', flexDirection: 'column',
    }}>{children}</div>
  );
}

Object.assign(window, { TOKENS, STRINGS, palette, Stripes, Logotype, Header, Footer, H, Mono, Page, PAGE_W, PAGE_H });