// claude-code.jsx — Claude Code: simple toolbox metaphor + desktop app

const CC_BG = '#f5f0e8';
const CC_INK = '#1a1a1a';
const CC_INK2 = '#5a5a5a';
const CC_LINE = '#e6e2d8';
const CC_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif';

function CCStar({ size = 16, color = '#d4865a' }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 2l1.8 7.2L21 11l-7.2 1.8L12 20l-1.8-7.2L3 11l7.2-1.8z"/></svg>;
}

function CCWindow({ children }) {
  return (
    <div style={{
      width: 880, height: 620, borderRadius: 14, overflow: 'hidden',
      background: CC_BG, fontFamily: CC_FONT,
      boxShadow: '0 0 0 1px rgba(0,0,0,0.18), 0 24px 60px rgba(0,0,0,0.25)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ height: 36, display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', borderBottom: `1px solid ${CC_LINE}` }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }}/>
          <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }}/>
          <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c940' }}/>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>{children}</div>
    </div>
  );
}

function CCSidebar() {
  const recents = ['Mom\'s recipe site', 'Family photo album', 'Garden tracker'];
  return (
    <div style={{ width: 200, background: CC_BG, borderRight: `1px solid ${CC_LINE}`, padding: '10px 0', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', gap: 4, padding: '4px 10px 14px' }}>
        {['Chat', 'Cowork', 'Code'].map(t => (
          <div key={t} style={{
            flex: 1, padding: '6px 0', textAlign: 'center', fontSize: 11, fontWeight: 500,
            border: t === 'Code' ? '1px solid #1a1a1a' : '1px solid transparent',
            borderRadius: 8, background: t === 'Code' ? '#fff' : 'transparent',
          }}>{t}</div>
        ))}
      </div>
      {[
        { id: 'New session', icon: '+', active: true },
        { id: 'Routines', icon: '⚡' },
        { id: 'Customize', icon: '☰' },
        { id: 'More', icon: (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        ) },
      ].map(it => (
        <div key={it.id} style={{ padding: '8px 18px', margin: '0 8px', borderRadius: 8, fontSize: 13, background: it.active ? '#ece7da' : 'transparent', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 14, height: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: 0.6, fontSize: 12 }}>{it.icon}</span>{it.id}
        </div>
      ))}
      <div style={{ padding: '18px 18px 6px', fontSize: 11, color: '#999' }}>Recents</div>
      {recents.map(r => (
        <div key={r} style={{ padding: '4px 18px', fontSize: 12, color: CC_INK2, display: 'flex', gap: 8 }}><span style={{ opacity: 0.5 }}>⎇</span>{r}</div>
      ))}
      <div style={{ flex: 1 }}/>
      <div style={{ margin: '0 10px 10px', padding: '8px 10px', borderRadius: 10, background: '#ece7da', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 24, height: 24, borderRadius: '50%', backgroundImage: 'url(project/images/mom-profile.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}/>
        <div style={{ flex: 1, fontSize: 12 }}><div style={{ fontWeight: 600 }}>Mom</div><div style={{ color: CC_INK2, fontSize: 11 }}>Max</div></div>
      </div>
    </div>
  );
}

// ─── Toolbox concept card ───
function ToolboxCard() {
  const tools = [
    { name: 'Claude', role: 'Writes the code', desc: 'You describe what you want. Claude turns it into the actual building blocks of a website or app.', accent: '#d4665a' },
    { name: 'GitHub', role: 'Stores the code', desc: 'A safe place online where the code lives. Lets Claude pick up where it left off, and keeps a history.', accent: '#1a1a1a' },
    { name: 'Vercel', role: 'Hosts it live', desc: 'Takes your code from GitHub and turns it into a real website anyone can visit at a real link.', accent: '#7d8c6a' },
  ];
  return (
    <div style={{ width: 380, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 18, padding: 26, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>The toolbox</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.01em' }}>Three tools, <em style={{ color: 'var(--coral)', fontStyle: 'italic' }}>one job</em></div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 4 }}>To put a website on the internet, you need three things working together. Claude Code talks to all of them so you don't have to.</div>
      {tools.map(t => (
        <div key={t.name} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: t.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>{t.name[0]}</div>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 19 }}>{t.name}</div>
              <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{t.role}</div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4, lineHeight: 1.5 }}>{t.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Screen 1: Code home (matches screenshot — overview stats) ───
function CodeHomeScreen({ momName }) {
  const stats = [['Sessions','0'],['Messages','0'],['Total tokens','0'],['Active days','0']];
  const stats2 = [['Current streak','0d'],['Longest streak','0d'],['Peak hour','—'],['Favorite model','—']];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ padding: '24px 36px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
        <CCStar size={20}/>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 26, fontWeight: 500 }}>What's up next, {momName}?</div>
      </div>
      <div style={{ margin: '20px 36px 0', background: '#ece7da', borderRadius: 14, padding: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {['Overview','Models'].map((t, i) => (
              <div key={t} style={{ padding: '4px 12px', borderRadius: 8, fontSize: 12, background: i === 0 ? '#fff' : 'transparent' }}>{t}</div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 6, fontSize: 12 }}>
            {['All','30d','7d'].map((t, i) => (
              <div key={t} style={{ padding: '4px 10px', borderRadius: 6, background: i === 0 ? '#fff' : 'transparent' }}>{t}</div>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 10 }}>
          {stats.map(([l,v]) => (
            <div key={l}><div style={{ fontSize: 11, color: CC_INK2 }}>{l}</div><div style={{ fontSize: 18, fontWeight: 600 }}>{v}</div></div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 14 }}>
          {stats2.map(([l,v]) => (
            <div key={l}><div style={{ fontSize: 11, color: CC_INK2 }}>{l}</div><div style={{ fontSize: 14, fontWeight: 600 }}>{v}</div></div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(40, 1fr)', gap: 2 }}>
          {Array.from({length: 200}).map((_, i) => (
            <div key={i} style={{ aspectRatio: '1/1', background: '#dcd5c2', borderRadius: 2 }}/>
          ))}
        </div>
      </div>
      <div style={{ flex: 1 }}/>
      <div style={{ padding: '10px 36px 24px' }}>
        <div style={{ background: '#fff', border: `1px solid ${CC_LINE}`, borderRadius: 14, padding: 12 }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
            <div style={{ padding: '4px 10px', border: `1px solid ${CC_LINE}`, borderRadius: 7, fontSize: 11, background: '#f9f6ee' }}>☁ Default</div>
            <div style={{ padding: '4px 10px', border: `1px solid ${CC_LINE}`, borderRadius: 7, fontSize: 11, background: '#f9f6ee' }}>{'</> recipes-site'}</div>
            <div style={{ padding: '4px 10px', border: `1px solid ${CC_LINE}`, borderRadius: 7, fontSize: 11, background: '#f9f6ee' }}>+</div>
          </div>
          <div style={{ fontSize: 13, color: '#aaa', padding: '8px 4px' }}>Describe a task or ask a question</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: CC_INK2 }}>
            <span>Accept edits</span><span>+</span><span>🎤</span>
            <span style={{ marginLeft: 'auto' }}>Opus 4.7 · Extra high</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Screen 2: A session running ───
function CodeSessionScreen() {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ flex: 1, overflow: 'auto', padding: '24px 36px' }}>
        <div style={{ background: '#ece7da', borderRadius: 12, padding: '10px 14px', fontSize: 13, marginBottom: 16, marginLeft: 'auto', maxWidth: '70%', width: 'fit-content' }}>
          Make me a one-page website for my recipes — soft beige, serif headings.
        </div>
        <div style={{ display: 'flex', gap: 10, fontSize: 13, lineHeight: 1.6, marginBottom: 14 }}>
          <CCStar size={18}/>
          <div style={{ flex: 1 }}>I'll set up a small site with three of your recipes: dal, palak paneer, and your aloo gobi. Working in the <code style={{ background: '#ece7da', padding: '0 4px', borderRadius: 4, fontSize: 12 }}>recipes-site</code> folder.</div>
        </div>
        <div style={{ background: '#fbf7ee', border: `1px solid ${CC_LINE}`, borderRadius: 10, padding: 10, fontSize: 11, fontFamily: 'ui-monospace, monospace', color: CC_INK2 }}>
          <div>✓ Created index.html</div>
          <div>✓ Created styles.css</div>
          <div>✓ Wrote 3 recipe pages</div>
          <div style={{ color: '#0a7' }}>✓ Pushed to GitHub · committed "first draft"</div>
          <div style={{ color: '#0a7' }}>✓ Deployed to Vercel · mom-recipes.vercel.app</div>
        </div>
        <div style={{ marginTop: 14, fontSize: 13, lineHeight: 1.5 }}>Live at <a style={{ color: '#d4665a', textDecoration: 'underline' }}>mom-recipes.vercel.app</a> — open it on your phone to see how it looks.</div>
      </div>
      <div style={{ padding: '10px 36px 24px' }}>
        <div style={{ background: '#fff', border: `1px solid ${CC_LINE}`, borderRadius: 14, padding: 12 }}>
          <div style={{ fontSize: 13, color: '#aaa', padding: '4px' }}>Reply to Claude…</div>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: 11, color: CC_INK2 }}><span>Accept edits</span><span style={{ marginLeft: 'auto' }}>Opus 4.7 ●</span></div>
        </div>
      </div>
    </div>
  );
}

function ClaudeCodeLesson() {
  const [step, setStep] = React.useState(0);

  const steps = [
    { title: 'What Code is for', desc: 'Use Claude Code when you want a real website or app — not a doc, not a chat. Like the recipe site you\'re seeing on the right.', screen: 'home' },
    { title: 'The toolbox', desc: 'Three tools work together to put a site online. The card on the right explains each one in plain English.', screen: 'toolbox' },
    { title: 'Click "Code" at the top', desc: 'Inside the Claude desktop app, the segmented bar at the top has Chat / Cowork / Code. Click Code.', screen: 'home' },
    { title: 'Start a new session', desc: 'Click + New session in the sidebar. A session is one project — one website, one app. The big text box is where you describe it.', screen: 'home' },
    { title: 'Describe what you want', desc: 'Plain English. "Make me a recipe site." "Build a tracker for my garden." Claude writes the code and shows you progress.', screen: 'session' },
    { title: 'Claude handles GitHub + Vercel', desc: 'You don\'t have to know what those are. Claude saves the code (GitHub), publishes the site (Vercel), and gives you a link to share.', screen: 'session' },
  ];

  return (
    <div className="page page-fade lesson-page">
      <LessonHead num="Lesson IV" title={<>Claude Code — <em>make a website.</em></>} sub="The fanciest of the three. You describe a website or app in plain English; Claude builds it and puts it on the internet." eyebrow="Approx · 4 min" time="Code · macOS"/>
      <div className="lesson">
        <StepsPanel steps={steps} current={step} setCurrent={setStep}/>
        <div className="mock">
          {steps[step].screen === 'toolbox' ? (
            <ToolboxCard/>
          ) : (
            <div className="mock-scaler" style={{ width: 880*0.66, height: 620*0.66 }}>
              <div style={{ width: 880, height: 620, transform: 'scale(0.66)', transformOrigin: 'top left' }}>
              <CCWindow>
                <CCSidebar/>
                {steps[step].screen === 'home' ? <CodeHomeScreen momName="Mom"/> : <CodeSessionScreen/>}
              </CCWindow>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ClaudeCodeLesson });