// claude-chat.jsx — Claude Chat tutorial: Connectors + Projects

const CL_BG = '#f5f0e8';
const CL_PAPER = '#fbf7ee';
const CL_INK = '#1a1a1a';
const CL_INK2 = '#5a5a5a';
const CL_LINE = '#e6e2d8';
const CL_CORAL = '#d4865a';
const MAC_FONT_S = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif';

function ClaudeStar({ 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>;
}

// macOS window with traffic lights
function ClaudeWindow({ children, height = 560 }) {
  return (
    <div style={{
      width: 880, height, borderRadius: 14, overflow: 'hidden',
      background: CL_BG,
      boxShadow: '0 0 0 1px rgba(0,0,0,0.18), 0 24px 60px rgba(0,0,0,0.25)',
      display: 'flex', flexDirection: 'column', fontFamily: MAC_FONT_S,
    }}>
      {/* title bar */}
      <div style={{
        height: 36, display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 14px', background: CL_BG, borderBottom: `1px solid ${CL_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 ClaudeSidebar({ active = 'New chat', recents = [] }) {
  const items = [
    { id: 'New chat', icon: '+' },
    { id: 'Search', icon: '⌕' },
    { id: 'Chats', icon: '💬' },
    { id: 'Projects', icon: '▣' },
    { id: 'Code', icon: '</>' },
    { id: 'Design', icon: '◐' },
  ];
  return (
    <div style={{
      width: 220, background: CL_BG, borderRight: `1px solid ${CL_LINE}`,
      padding: '10px 0', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '6px 18px 14px', fontFamily: 'Newsreader, Georgia, serif', fontSize: 22, fontWeight: 500 }}>Claude</div>
      {items.map(it => (
        <div key={it.id} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '7px 18px', margin: '0 8px',
          borderRadius: 8, fontSize: 13,
          background: it.id === active ? '#ece7da' : 'transparent',
          color: CL_INK, cursor: 'pointer',
        }}>
          <span style={{ width: 16, opacity: 0.7, fontSize: 13 }}>{it.icon}</span>
          <span>{it.id}</span>
        </div>
      ))}
      <div style={{ padding: '18px 18px 6px', fontSize: 11, color: '#999' }}>Recents</div>
      <div style={{ flex: 1, overflow: 'auto', padding: '0 8px' }}>
        {recents.map((r, i) => (
          <div key={i} style={{ padding: '6px 10px', fontSize: 12, color: CL_INK2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r}</div>
        ))}
      </div>
      <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: CL_INK2, fontSize: 11 }}>Max plan</div>
        </div>
      </div>
    </div>
  );
}

// ─── Screen 1: a normal chat ───
function ChatScreen({ momName }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ flex: 1, overflow: 'auto', padding: '40px 80px' }}>
        <div style={{ display: 'flex', gap: 12, marginBottom: 22, alignItems: 'flex-start' }}>
          <div style={{ flex: 1, background: '#ece7da', borderRadius: 16, padding: '10px 14px', fontSize: 13, color: CL_INK, marginLeft: 'auto', maxWidth: '70%' }}>
            What are 3 gentle stretches I can recommend to a patient with chronic lower back pain?
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginBottom: 18, alignItems: 'flex-start' }}>
          <ClaudeStar size={18}/>
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.6, color: CL_INK }}>
            <div>Three evidence-backed stretches I'd suggest, all safe for most patients with non-specific chronic low back pain:</div>
            <div style={{ marginTop: 10 }}><b>1. Cat-cow.</b> Gentle spinal flexion-extension. 8–10 reps, breathing slowly.</div>
            <div style={{ marginTop: 6 }}><b>2. Knee-to-chest.</b> Each side, 30 seconds. Decompresses lumbar spine.</div>
            <div style={{ marginTop: 6 }}><b>3. Child's pose.</b> Hold 1 minute. Releases the paraspinals.</div>
            <div style={{ marginTop: 10, color: CL_INK2 }}>Avoid forward-folding from standing — that's where most patients aggravate things.</div>
          </div>
        </div>
      </div>
      <div style={{ padding: '14px 60px 18px' }}>
        <div style={{
          background: '#fff', border: `1px solid ${CL_LINE}`, borderRadius: 14,
          padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <div style={{ color: '#aaa', fontSize: 13 }}>Ask anything…</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 16, color: CL_INK2 }}>+</span>
            <div style={{ flex: 1 }}/>
            <span style={{ fontSize: 11, color: CL_INK2 }}>Sonnet 4.7</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Screen 2: Connectors settings ───
function ConnectorsScreen() {
  const items = [
    { name: 'GitHub', color: '#1a1a1a', state: 'Connected' },
    { name: 'Gmail', color: '#ea4335', state: 'Configure' },
    { name: 'Google Calendar', color: '#1a73e8', state: 'Configure' },
    { name: 'Google Drive', color: '#0f9d58', state: 'Configure' },
    { name: 'Notion', color: '#000', state: 'Configure' },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
      <div style={{ width: 200, background: CL_BG, padding: '40px 0', borderRight: `1px solid ${CL_LINE}` }}>
        {['General','Account','Privacy','Billing','Usage','Capabilities','Connectors','Claude Code'].map(s => (
          <div key={s} style={{
            padding: '8px 22px', fontSize: 13, color: CL_INK,
            background: s === 'Connectors' ? '#ece7da' : 'transparent',
            margin: '0 8px', borderRadius: 8,
          }}>{s}</div>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '36px 40px' }}>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 32, fontWeight: 500, marginBottom: 28 }}>Settings</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
          <div>
            <div style={{ fontSize: 18, fontWeight: 700 }}>Connectors</div>
            <div style={{ fontSize: 13, color: CL_INK2, marginTop: 6, lineHeight: 1.5, maxWidth: 360 }}>
              Allow Claude to reference other apps and services for more context.
            </div>
          </div>
          <div style={{ padding: '7px 14px', border: `1px solid ${CL_LINE}`, borderRadius: 8, fontSize: 12, fontWeight: 500, background: '#fff' }}>Browse connectors</div>
        </div>
        <div style={{ marginTop: 26, borderTop: `1px solid ${CL_LINE}`, paddingTop: 18 }}>
          {items.map((c, i) => (
            <div key={c.name} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 0', borderBottom: i < items.length - 1 ? `1px solid ${CL_LINE}` : 'none',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 7, background: c.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700 }}>
                {c.name[0]}
              </div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{c.name}</div>
              {c.state === 'Connected' ? (
                <span style={{ fontSize: 12, color: '#0a7' }}>● Connected</span>
              ) : (
                <span style={{ fontSize: 12, padding: '5px 12px', border: `1px solid ${CL_LINE}`, borderRadius: 6, background: '#fff' }}>{c.state}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Screen 3: Projects ───
function ProjectsScreen() {
  const projects = [
    { name: 'Patient education handouts', desc: 'reusable explanations for back pain, sleep hygiene, gentle yoga — re-edit and print before each appt.', updated: '2 days ago' },
    { name: 'UCSF lecture prep', desc: 'slides, papers, and notes for monthly grand rounds. Claude knows my style and audience.', updated: '5 days ago' },
    { name: 'Osher Center research log', desc: 'tracking studies on integrative pain management. Drop a paper in, ask for a 1-paragraph summary.', updated: '1 week ago' },
    { name: 'Recipe library 🥘', desc: 'Saahil\'s favorite dal recipes + things I want to try.', updated: '3 weeks ago' },
  ];
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '32px 40px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 32, fontWeight: 500 }}>Projects</div>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ padding: '7px 14px', border: `1px solid ${CL_LINE}`, borderRadius: 8, fontSize: 12, background: '#fff' }}>Sort: Activity ▾</div>
          <div style={{ padding: '7px 14px', borderRadius: 8, fontSize: 12, background: '#000', color: '#fff', fontWeight: 500 }}>+ New project</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {projects.map(p => (
          <div key={p.name} style={{ background: '#fff', border: `1px solid ${CL_LINE}`, borderRadius: 12, padding: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: CL_INK }}>{p.name}</div>
            <div style={{ fontSize: 12, color: CL_INK2, marginTop: 8, lineHeight: 1.5 }}>{p.desc}</div>
            <div style={{ fontSize: 11, color: '#999', marginTop: 18 }}>Updated {p.updated}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Screen 4: Inside a project ───
function ProjectDetailScreen() {
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '28px 40px' }}>
      <div style={{ fontSize: 11, color: CL_INK2, marginBottom: 6 }}>Projects · </div>
      <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 28, fontWeight: 500, marginBottom: 8 }}>Patient education handouts</div>
      <div style={{ fontSize: 13, color: CL_INK2, lineHeight: 1.5, maxWidth: 480, marginBottom: 22 }}>
        A bank of files and instructions Claude uses every time you start a new chat in this project.
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 18 }}>
        <div>
          <div style={{ background: '#fff', border: `1px solid ${CL_LINE}`, borderRadius: 14, padding: 16, fontSize: 13, color: '#aaa' }}>
            Start a new chat in this project…
          </div>
          <div style={{ marginTop: 18, fontSize: 11, fontWeight: 700, color: CL_INK2, textTransform: 'uppercase', letterSpacing: 1 }}>Recent chats</div>
          {['Re-explain back pain handout for Mrs. T', 'Sleep hygiene — make a 1-page version', 'Gentle yoga for after surgery'].map((c, i) => (
            <div key={i} style={{ padding: '10px 0', fontSize: 13, borderBottom: `1px solid ${CL_LINE}` }}>{c}</div>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ background: '#fff', border: `1px solid ${CL_LINE}`, borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 11, color: CL_INK2, marginBottom: 6, textTransform: 'uppercase', letterSpacing: 1 }}>Instructions</div>
            <div style={{ fontSize: 12, color: CL_INK, lineHeight: 1.5 }}>Always write at a 6th-grade reading level. Use short sentences. End with "Call us if…" guidance.</div>
          </div>
          <div style={{ background: '#fff', border: `1px solid ${CL_LINE}`, borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 11, color: CL_INK2, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>Files · 4</div>
            {['Back-pain-template.pdf', 'Yoga-poses.docx', 'Sleep-hygiene.pdf', 'Voice-and-tone.md'].map(f => (
              <div key={f} style={{ fontSize: 12, padding: '4px 0', color: CL_INK }}>📄 {f}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ClaudeChatLesson() {
  const [step, setStep] = React.useState(0);
  const steps = [
    { title: 'A normal Claude chat', desc: 'Ask anything in plain English. Claude is great for explaining, summarizing, drafting, brainstorming — like a very patient colleague.', screen: 'chat' },
    { title: 'Connectors — give Claude context', desc: 'Click your name → Settings → Connectors. Turn on Gmail, Calendar, Drive, etc., and Claude can read from them when you ask.', screen: 'connectors' },
    { title: 'Why Connectors matter', desc: 'Instead of pasting an email or hunting in Drive, you can say "summarize my unread emails from UCSF this week" and Claude just does it.', screen: 'connectors' },
    { title: 'Projects — a folder for your files', desc: 'Click Projects in the sidebar. A project holds files and instructions Claude reads at the start of every chat inside it.', screen: 'projects' },
    { title: 'Inside a project', desc: 'Drop in PDFs, docs, notes. Add instructions ("write at a 6th-grade level"). Every chat in this project remembers all of it — no re-explaining.', screen: 'detail' },
    { title: 'Why Projects matter', desc: 'Use it for anything you do over and over: patient handouts, lecture prep, recipes. The setup happens once; every chat after is faster.', screen: 'detail' },
  ];

  const screen = steps[step].screen;
  const title = screen === 'chat' ? 'Claude' : screen === 'connectors' ? 'Settings' : screen === 'projects' ? 'Projects' : 'Patient education handouts';
  const sidebar = screen === 'projects' ? 'Projects' : screen === 'connectors' ? 'New chat' : 'New chat';

  return (
    <div className="page page-fade lesson-page">
      <LessonHead num="Lesson II" title={<>Claude — <em>your patient sidekick.</em></>} sub="Two big ideas: Connectors give Claude access to your other tools. Projects give it context that sticks." eyebrow="Approx · 3 min" time="claude.ai · desktop"/>
      <div className="lesson">
        <StepsPanel steps={steps} current={step} setCurrent={setStep}/>
        <div className="mock">
          <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' }}>
            <ClaudeWindow>
              <ClaudeSidebar active={sidebar} recents={['Back pain handout', 'UCSF lecture review', 'Summarize papers', 'Flight to Boston', 'Type checking']}/>
              {screen === 'chat' && <ChatScreen momName="Mom"/>}
              {screen === 'connectors' && <ConnectorsScreen/>}
              {screen === 'projects' && <ProjectsScreen/>}
              {screen === 'detail' && <ProjectDetailScreen/>}
            </ClaudeWindow>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ClaudeChatLesson });