// claude-cowork.jsx — Claude Cowork: download, tasks, scheduled tasks

const CO_BG = '#f5f0e8';
const CO_PAPER = '#fff';
const CO_INK = '#1a1a1a';
const CO_INK2 = '#5a5a5a';
const CO_LINE = '#e6e2d8';
const CO_DOT = '#d4865a';
const CO_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif';

const DOWNLOAD_URL = 'https://claude.ai/redirect/claudedotcom.v1.caffc2c7-b0dc-47e0-9c21-f6ea124c12f5/api/desktop/darwin/universal/dmg/latest/redirect';

function CoStar({ 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 CoWindow({ children, height = 560, mode = 'cowork' }) {
  return (
    <div style={{
      width: 880, height, borderRadius: 14, overflow: 'hidden',
      background: CO_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: CO_FONT,
    }}>
      <div style={{ height: 36, display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', borderBottom: `1px solid ${CO_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 style={{ flex: 1 }}/>
        <div style={{ fontSize: 11, color: CO_INK2 }}>Claude Cowork — Desktop</div>
        <div style={{ flex: 1 }}/>
      </div>
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>{children}</div>
    </div>
  );
}

function CoSidebar({ active = 'New task' }) {
  const items = ['New task', 'Projects', 'Scheduled', 'Live artifacts', 'Dispatch', 'Customize'];
  return (
    <div style={{ width: 200, background: CO_BG, borderRight: `1px solid ${CO_LINE}`, padding: '10px 0', display: 'flex', flexDirection: 'column' }}>
      {/* segmented header: chat / cowork / code */}
      <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 === 'Cowork' ? '1px solid #1a1a1a' : '1px solid transparent',
            borderRadius: 8, background: t === 'Cowork' ? '#fff' : 'transparent',
          }}>{t}</div>
        ))}
      </div>
      {items.map(it => {
        const icon =
          it === 'New task' ? '+' :
          it === 'Projects' ? '▣' :
          it === 'Scheduled' ? '◷' :
          it === 'Live artifacts' ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 3v6M12 9l-4 4M12 9l4 4"/><circle cx="8" cy="16" r="3"/><circle cx="16" cy="16" r="3"/>
            </svg>
          ) :
          it === 'Dispatch' ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="2" x2="12" y2="5"/><rect x="7" y="5" width="10" height="17" rx="2"/><line x1="9.5" y1="9" x2="14.5" y2="9"/><circle cx="12" cy="15" r="1.4"/>
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 7V5a2 2 0 014 0v2"/><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M3 12h18"/>
            </svg>
          );
        return (
          <div key={it} 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 }}>{icon}</span>
            {it}
          </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: CO_INK2, fontSize: 11 }}>Max</div></div>
      </div>
    </div>
  );
}

// ─── Screen: Download splash ───
function DownloadScreen() {
  return (
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', background: CO_BG, padding: 40 }}>
      <div style={{ maxWidth: 460, textAlign: 'center' }}>
        <div style={{ width: 86, height: 86, borderRadius: 22, background: 'linear-gradient(135deg,#fbf7ee,#ece7da)', border: `1px solid ${CO_LINE}`, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <CoStar size={44}/>
        </div>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 30, fontWeight: 500, marginTop: 22, lineHeight: 1.15 }}>Get the Cowork desktop app</div>
        <div style={{ fontSize: 13, color: CO_INK2, lineHeight: 1.6, marginTop: 14 }}>
          Cowork lives in a desktop app, not the website. It needs to run on your Mac so it can do things in the background — open browsers, write files, send emails — even while you're cooking dinner.
        </div>
        <a href={DOWNLOAD_URL} target="_blank" rel="noreferrer" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          marginTop: 22, padding: '12px 22px', borderRadius: 10,
          background: '#1a1a1a', color: '#fff', textDecoration: 'none',
          fontSize: 14, fontWeight: 500,
        }}>↓ Download for Mac</a>
        <div style={{ marginTop: 14, fontSize: 11, color: CO_INK2, fontStyle: 'italic' }}>This link is the real download.</div>
      </div>
    </div>
  );
}

// ─── Screen: New task home ───
function NewTaskScreen({ momName }) {
  const onboard = [
    { done: true, t: 'Download Cowork', s: 'Welcome!' },
    { done: true, t: 'Connect your everyday tools', s: 'The more Claude knows your setup, the more it can do.' },
    { done: false, t: 'Ask Claude to create something', s: 'Try a spreadsheet, doc, or presentation.' },
    { done: false, t: 'Schedule a recurring task', s: 'Great for reminders, reports, or regular check-ins.' },
  ];
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '32px 48px',
      backgroundImage: 'radial-gradient(circle, #d4ccba 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
        <CoStar size={28}/>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 28, fontWeight: 500 }}>Let's knock something off your list, {momName}</div>
      </div>
      <div style={{ fontSize: 12, color: CO_INK2, textDecoration: 'underline', marginBottom: 18 }}>Learn how to use Cowork safely.</div>
      <div style={{ background: '#fff', border: `1px solid ${CO_LINE}`, borderRadius: 14, padding: 16 }}>
        <div style={{ fontSize: 13, color: '#aaa' }}>How can I help you today?</div>
        <div style={{ height: 56 }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: CO_INK2 }}>
          <span>+ Work in a project</span>
          <span style={{ marginLeft: 'auto' }}>Opus 4.6 ▾</span>
        </div>
      </div>
      <div style={{ marginTop: 22, fontSize: 12, fontWeight: 600, color: CO_INK }}>Get to know Cowork</div>
      <div style={{ marginTop: 8, background: '#fff', border: `1px solid ${CO_LINE}`, borderRadius: 12 }}>
        {onboard.map((o, i) => (
          <div key={o.t} style={{ display: 'flex', gap: 10, padding: '12px 16px', borderBottom: i < onboard.length-1 ? `1px solid ${CO_LINE}` : 'none', alignItems: 'flex-start' }}>
            <div style={{ width: 18, height: 18, borderRadius: '50%', background: o.done ? '#1a1a1a' : '#fff', border: `1.5px solid ${o.done ? '#1a1a1a' : '#ccc'}`, color: '#fff', fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>{o.done ? '✓' : ''}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: CO_INK, textDecoration: o.done ? 'line-through' : 'none', opacity: o.done ? 0.5 : 1 }}>{o.t}</div>
              <div style={{ fontSize: 12, color: CO_INK2, marginTop: 2 }}>{o.s}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Screen: Tasks list with results ───
function TasksScreen() {
  const tasks = [
    { name: 'Summarize new pediatric pain papers', desc: 'Search PubMed for new studies tagged "chronic pain" and "pediatric" — write a 1-paragraph summary of each.', status: 'Done · 2 min ago', n: 3 },
    { name: 'Draft monthly Osher newsletter', desc: 'Pull this month\'s clinic stats, write a friendly 4-paragraph letter for staff.', status: 'Done · yesterday', n: 1 },
    { name: 'Re-format patient handouts as PDFs', desc: 'Take the .docx files in /handouts and produce printable PDFs with our header.', status: 'Done · 3 days ago', n: 12 },
  ];
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '32px 40px' }}>
      <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 28, fontWeight: 500, marginBottom: 6 }}>Tasks</div>
      <div style={{ fontSize: 13, color: CO_INK2, marginBottom: 20, lineHeight: 1.5 }}>A task is a clear set of instructions Claude can run for you. Run it now, run it again next week, schedule it.</div>
      {tasks.map(t => (
        <div key={t.name} style={{ background: '#fff', border: `1px solid ${CO_LINE}`, borderRadius: 12, padding: 18, marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{t.name}</div>
              <div style={{ fontSize: 12, color: CO_INK2, marginTop: 6, lineHeight: 1.5 }}>{t.desc}</div>
            </div>
            <span style={{ fontSize: 11, color: '#0a7', whiteSpace: 'nowrap' }}>● {t.status}</span>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
            <span style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, background: '#ece7da' }}>{t.n} files produced</span>
            <span style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, background: '#ece7da' }}>Run again</span>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Screen: Scheduled (empty) ───
function ScheduledScreen() {
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '32px 40px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
        <div style={{ fontFamily: 'Newsreader, Georgia, serif', fontSize: 28, fontWeight: 500 }}>Scheduled tasks</div>
        <div style={{ padding: '7px 14px', borderRadius: 8, fontSize: 12, background: '#1a1a1a', color: '#fff' }}>+ New task</div>
      </div>
      <div style={{ fontSize: 12, color: CO_INK2, marginBottom: 16 }}>Run tasks on a schedule or whenever you need them.</div>
      <div style={{ background: '#fff', border: `1px solid ${CO_LINE}`, borderRadius: 12, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
        <span style={{ fontSize: 14 }}>ⓘ</span>
        <div style={{ flex: 1, fontSize: 12, color: CO_INK }}>Scheduled tasks only run while your computer is awake.</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>☀ Keep awake <div style={{ width: 28, height: 16, borderRadius: 999, background: '#ddd', position: 'relative' }}><div style={{ position: 'absolute', top: 1, left: 1, width: 14, height: 14, borderRadius: '50%', background: '#fff' }}/></div></div>
      </div>
      <div style={{ background: '#f9f6ee', border: `1px dashed ${CO_LINE}`, borderRadius: 14, padding: '40px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>◷</div>
        <div style={{ fontSize: 13, color: CO_INK2 }}>No scheduled tasks yet.</div>
      </div>
    </div>
  );
}

// ─── Screen: Create scheduled task modal (over Scheduled) ───
function CreateScheduledScreen() {
  return (
    <div style={{ flex: 1, position: 'relative', background: 'rgba(0,0,0,0.18)' }}>
      <div style={{
        position: 'absolute', top: 30, left: '50%', transform: 'translateX(-50%)',
        width: 460, background: '#fff', borderRadius: 16, padding: 24,
        boxShadow: '0 24px 60px rgba(0,0,0,0.25)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <div style={{ fontWeight: 700, fontSize: 16 }}>Create scheduled task</div>
          <span style={{ fontSize: 18, color: CO_INK2 }}>×</span>
        </div>
        <div style={{ fontSize: 12, fontWeight: 500, color: CO_INK, marginBottom: 6 }}>Name <span style={{ color: '#c00' }}>*</span></div>
        <div style={{ border: `1px solid ${CO_LINE}`, borderRadius: 8, padding: '8px 10px', fontSize: 13, color: '#aaa', marginBottom: 12 }}>monday-pubmed-digest</div>
        <div style={{ fontSize: 12, fontWeight: 500, color: CO_INK, marginBottom: 6 }}>Description <span style={{ color: '#c00' }}>*</span></div>
        <div style={{ border: `1px solid ${CO_LINE}`, borderRadius: 8, padding: '8px 10px', fontSize: 13, color: '#aaa', marginBottom: 12 }}>Pull new pediatric pain papers and email a digest</div>
        <div style={{ border: `1px solid ${CO_LINE}`, borderRadius: 10, padding: 12, marginBottom: 14 }}>
          <div style={{ fontSize: 12, color: CO_INK2, lineHeight: 1.5 }}>Search PubMed for the latest 5 papers tagged "chronic pain" + "pediatric" published this week. Summarize each in 2 sentences. Email to my UCSF team.</div>
          <div style={{ display: 'flex', gap: 10, marginTop: 10, fontSize: 11, color: CO_INK2 }}>
            <span>+ Work in a project</span>
            <span>👋 Ask</span>
            <span style={{ marginLeft: 'auto' }}>Default model ▾</span>
          </div>
        </div>
        <div style={{ fontSize: 12, fontWeight: 500, color: CO_INK, marginBottom: 6 }}>Frequency</div>
        <div style={{ border: `1px solid ${CO_LINE}`, borderRadius: 8, padding: '8px 10px', fontSize: 13, marginBottom: 18, width: 200 }}>Every Monday · 8am ▾</div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <div style={{ padding: '8px 14px', borderRadius: 8, fontSize: 12, border: `1px solid ${CO_LINE}` }}>Cancel</div>
          <div style={{ padding: '8px 14px', borderRadius: 8, fontSize: 12, background: '#1a1a1a', color: '#fff' }}>Save</div>
        </div>
      </div>
    </div>
  );
}

function ClaudeCoworkLesson() {
  const [step, setStep] = React.useState(0);
  const steps = [
    { title: 'First — download the desktop app', desc: <>Cowork only works on the Mac app, not the website. Click the button on the splash to get it. The link is real.</>, screen: 'download', sidebar: false },
    { title: 'Welcome screen', desc: 'Once installed, opening Cowork shows a friendly home with a checklist. The big text box is where you describe what you want done.', screen: 'home' },
    { title: 'Tasks — the core idea', desc: 'A task is a clear set of instructions. Claude runs them and produces files, emails, or summaries. Run once, or save and re-run.', screen: 'tasks' },
    { title: 'Scheduled tasks', desc: 'Click Scheduled in the sidebar. Anything here runs automatically — every Monday morning, every weekday at 5pm, etc.', screen: 'scheduled' },
    { title: 'Create a scheduled task', desc: 'Name it, describe what to do, choose a frequency. That\'s it. From now on Claude does it for you.', screen: 'create' },
    { title: 'One catch', desc: <>Scheduled tasks only run while your <b>Mac is on and the Cowork app is open</b>. (That's why the Mac Mini is helpful!)</>, screen: 'scheduled' },
  ];

  const screen = steps[step].screen;
  const active = screen === 'scheduled' || screen === 'create' ? 'Scheduled' : 'New task';

  return (
    <div className="page page-fade lesson-page">
      <LessonHead num="Lesson III" title={<>Cowork — <em>Claude does the work.</em></>} sub="Less of a chat, more of a quiet assistant. You describe the job, it runs it — once, or on a schedule." eyebrow="Approx · 4 min" time="Cowork · macOS"/>
      <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' }}>
            <CoWindow>
              {steps[step].sidebar !== false && <CoSidebar active={active}/>}
              {screen === 'download' && <DownloadScreen/>}
              {screen === 'home' && <NewTaskScreen momName="Mom"/>}
              {screen === 'tasks' && <TasksScreen/>}
              {screen === 'scheduled' && <ScheduledScreen/>}
              {screen === 'create' && <CreateScheduledScreen/>}
            </CoWindow>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ClaudeCoworkLesson });