// app.jsx — top-level router + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "momName": "Mom",
  "fromName": "Saahil",
  "palette": "warm",
  "serif": "Newsreader"
}/*EDITMODE-END*/;

const PALETTES = {
  warm:   { '--bg': '#f6f1e8', '--paper': '#fbf7ee', '--coral': '#d4665a', '--coral-deep': '#b04b40', '--ink': '#1f1a14', '--rose': '#f0d4cc', '--line': '#e2d8c4', '--bg-2': '#efe7d6', '--line-strong': '#c8bca0', '--sage': '#7d8c6a' },
  rose:   { '--bg': '#fbf2ef', '--paper': '#fff8f4', '--coral': '#c2526b', '--coral-deep': '#9c3a52', '--ink': '#1c161a', '--rose': '#f5dde0', '--line': '#ecd9d4', '--bg-2': '#f3e0da', '--line-strong': '#dab9b1', '--sage': '#a08e95' },
  sage:   { '--bg': '#eff2e9', '--paper': '#f7faf1', '--coral': '#5a8c6a', '--coral-deep': '#3f6a4a', '--ink': '#162018', '--rose': '#dde8d4', '--line': '#d3dccb', '--bg-2': '#e3ebd6', '--line-strong': '#aac0a0', '--sage': '#6a7d6a' },
  ink:    { '--bg': '#1a1815', '--paper': '#221f1a', '--coral': '#e08a6e', '--coral-deep': '#b66749', '--ink': '#f5efe2', '--rose': '#3a2e25', '--line': '#332e26', '--bg-2': '#26221c', '--line-strong': '#4a4136', '--sage': '#9aa885' },
};

function App() {
  const [route, setRoute] = React.useState('home');
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  // apply palette
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.warm;
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    document.documentElement.style.setProperty('--serif', `"${tweaks.serif}", Georgia, serif`);
  }, [tweaks.palette, tweaks.serif]);

  const navItems = [
    { id: 'home',          num: '00', label: 'Welcome' },
    { id: 'instagram',     num: 'I',  label: 'Instagram' },
    { id: 'claude-chat',   num: 'II', label: 'Claude · Chat' },
    { id: 'claude-cowork', num: 'III', label: 'Cowork' },
    { id: 'claude-code',   num: 'IV', label: 'Code' },
  ];

  const goto = (id) => {
    setRoute(id);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  return (
    <div data-screen-label={`Mom Academy · ${route}`}>
      <header className="topbar">
        <div className="brand">
          <span className="seal">M</span>
          <span className="wordmark">Mom <em>Academy</em></span>
        </div>
        <nav>
          {navItems.map(n => (
            <button key={n.id}
              className={route === n.id ? 'active' : ''}
              onClick={() => goto(n.id)}>
              <span className="num">{n.num}</span>
              <span>{n.label}</span>
            </button>
          ))}
        </nav>
        <div className="signed">For {tweaks.momName}, with love.</div>
      </header>

      {route === 'home' && <Welcome
        momName={tweaks.momName} fromName={tweaks.fromName}
        onStart={() => goto('instagram')}
        onJump={goto}
      />}
      {route === 'instagram'     && <InstagramLesson />}
      {route === 'claude-chat'   && <ClaudeChatLesson />}
      {route === 'claude-cowork' && <ClaudeCoworkLesson />}
      {route === 'claude-code'   && <ClaudeCodeLesson />}

      <footer style={{
        textAlign: 'center', padding: '40px 20px',
        fontFamily: 'var(--serif)', fontStyle: 'italic',
        color: 'var(--ink-3, #8a8276)', fontSize: 16,
        borderTop: '1px solid var(--line)',
        background: 'var(--bg)',
      }}>
        By {tweaks.fromName}, for {tweaks.momName} <span style={{ color: 'var(--coral)' }}>♥</span> Happy Mother's Day
      </footer>

      <TweaksPanel title="Tweaks">
          <TweakSection label="Personalize">
            <TweakText label="Mom's name" value={tweaks.momName} onChange={v => setTweaks('momName', v)} />
            <TweakText label="From (you)" value={tweaks.fromName} onChange={v => setTweaks('fromName', v)} />
          </TweakSection>
          <TweakSection label="Aesthetic">
            <TweakColor label="Palette"
              options={[
                ['#f6f1e8', '#d4665a', '#7d8c6a'],
                ['#fbf2ef', '#c2526b', '#a08e95'],
                ['#eff2e9', '#5a8c6a', '#6a7d6a'],
                ['#1a1815', '#e08a6e', '#9aa885'],
              ]}
              value={PALETTES[tweaks.palette] ? [PALETTES[tweaks.palette]['--bg'], PALETTES[tweaks.palette]['--coral'], PALETTES[tweaks.palette]['--sage']] : []}
              onChange={pal => {
                const match = Object.entries(PALETTES).find(([_, p]) => p['--bg'] === pal[0]);
                if (match) setTweaks('palette', match[0]);
              }}
            />
            <TweakSelect label="Display serif"
              options={['Newsreader', 'Source Serif 4', 'DM Serif Display', 'Playfair Display']}
              value={tweaks.serif}
              onChange={v => setTweaks('serif', v)} />
          </TweakSection>
          <TweakSection label="Jump to a lesson">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
              {navItems.map(n => (
                <button key={n.id} className="btn-pill"
                  style={{ fontSize: 12, padding: '6px 10px',
                    background: route === n.id ? 'var(--ink)' : 'var(--paper)',
                    color: route === n.id ? 'var(--paper)' : 'var(--ink)',
                    borderColor: route === n.id ? 'var(--ink)' : 'var(--line)',
                  }}
                  onClick={() => goto(n.id)}>{n.label}</button>
              ))}
            </div>
          </TweakSection>
      </TweaksPanel>

      <style>{`@keyframes caret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }`}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);