// ════════════ WORKSPACE · Mail, Calendar, Files, Chat ════════════
// These are NOT Google's interfaces. They are brand-new Pexxie surfaces
// powered by the customer's single Google Workspace account through the
// Gmail / Calendar / Drive APIs. One account underneath; Pexxie on top.
const { Icon, Spark, Pex, Avatar, Card, Btn, Pill, Label, Num, Tabs, money } = window;

// Shared "powered by Workspace" chip — your account, Pexxie's interface.
window.WSChip = function WSChip({ api = 'Gmail' }) {
  const P = window.PX; const { toast } = window.useApp();
  return (
    <div onClick={() => toast(`One Google Workspace account, powered through Pexxie — ${api} API. Your data, your domain; the interface is ours.`, { icon: 'check', tone: 'sage' })}
      title="Powered by your Google Workspace" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 10px 5px 7px', background: P.card, border: `1px solid ${P.line}`, borderRadius: 999, cursor: 'pointer', flexShrink: 0 }}>
      <span style={{ width: 18, height: 18, borderRadius: 5, background: '#fff', border: `1px solid ${P.line}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#4285F4' }}>G</span>
      <span style={{ fontSize: 11.5, color: P.ink2, fontWeight: 500 }}>honestloaves.com</span>
      <span style={{ width: 6, height: 6, borderRadius: 6, background: P.sage }}/>
    </div>
  );
};

// Reactive mail store — seeded lazily from the literal below so Compose,
// reply-send and draft-send actually move mail into the right folder.
window.PXMail = window.makeStore({ mails: null, seeded: false });

// ── MAIL ─────────────────────────────────────────────────────
window.SCREENS['mail'] = function Mail() {
  const P = window.PX; const { toast, openOverlay, go } = window.useApp();
  const [folder, setFolder] = React.useState('inbox');
  const [sel, setSel] = React.useState(0);
  const [tag, setTag] = React.useState(null);
  const [reply, setReply] = React.useState({ id: null, text: '', tone: 0, editing: false });
  const [draftEdit, setDraftEdit] = React.useState({ id: null, text: '', editing: false });
  const seed = [
    { box: 'inbox', f: 'Marc Lefèvre', e: 'marc@cafebleu.nyc', s: 'Re: Invoice #1024 · short update', p: 'Hey Amara, sorry for the delay — we had a quiet couple of weeks…', t: '7:41am', u: true, tag: 'clients', tone: 'rose', crm: 'marc',
      body: ['Hey Amara,', 'Sorry for the delay. We had a quiet couple of weeks — the February cold really hit foot traffic. I\u2019ll have payment over to you by Friday, I promise.', 'Also — would love to chat about bumping our regular order from 10 to 15 loaves once we catch up. Sunday lines are back.', 'Best,\nMarc'],
      reply: 'Marc — no worries at all, and thanks for the update. Friday works. About bumping to 15 loaves — yes, let\u2019s. I\u2019ll put together a new sheet tomorrow and send it over. Great to hear the Sunday line is back. — Amara' },
    { box: 'inbox', f: 'Jenna Ruiz', e: 'jenna@pastryguild.org', s: 'Podcast guest invitation?', p: 'Amara — love what you\'re doing. Would you be open to…', t: '6:12am', u: true, tag: 'press', tone: 'sky',
      body: ['Amara — love what you\u2019re doing at Honest Loaves.', 'I host the Pastry Guild podcast (~12k listeners, mostly indie bakers). Would you be open to a 30-min conversation about building a wholesale business from a single oven?', 'No prep needed — it\u2019s a warm, casual format. — Jenna'],
      reply: 'Jenna — what a kind note, thank you. I\u2019d genuinely love to. A casual format sounds perfect. I\u2019m most free Tuesday or Thursday mornings before the bake — would either work? — Amara' },
    { box: 'inbox', f: 'King Arthur Baking', e: 'orders@kingarthur.com', s: 'Your March flour order shipped', p: 'Tracking #: 9405 5036 9930…', t: 'Yest', u: true, tag: 'suppliers', tone: 'amber',
      body: ['Hi Amara,', 'Your March flour order (12 × 50lb Sir Galahad, 4 × 50lb whole wheat) has shipped.', 'Tracking #: 9405 5036 9930 0142 8857 21\nEstimated delivery: Thursday by 5pm.', 'Thanks for baking with us.'] },
    { box: 'inbox', f: 'Stripe', e: 'receipts@stripe.com', s: 'Payout: $842.30', p: 'Your payout is on its way to Operating ••4290…', t: 'Yest', u: false, tag: 'receipts', tone: 'sage',
      body: ['Your payout is on the way.', 'Amount: $842.30\nArriving: Tomorrow to Operating ••4290', 'This payout covers 14 charges from Mar 10–11, less $24.18 in fees.'] },
    { box: 'inbox', f: 'Lila Okamoto', e: 'lila@lilaevents.nyc', s: 'Loved the bâtards', p: 'Best batch yet. Sending the invoice to accounts…', t: 'Mar 10', u: false, tag: 'clients', tone: 'rose',
      body: ['Best batch yet, truly. The crumb on the bâtards was perfect for the board.', 'Sending the invoice to our accounts team now — you should see payment within the week. Let\u2019s book the next one. — Lila'] },
    // drafts (Pex)
    { box: 'drafts', f: 'To: 142 class subscribers', e: 'bcc', s: 'March sourdough class — 6 seats', p: 'Our March class is open — same oven, smaller group of six…', t: 'Pex · draft', tag: 'press', tone: 'spark', pex: true,
      body: ['Our March class is open — same oven, smaller group of six.', 'You\u2019ll shape, score, and take home two loaves plus the starter. Saturday the 15th, 9am–noon.', '[ Reserve a seat ]'] },
    { box: 'drafts', f: 'To: Marcus Chen', e: 'marcus@slateandstone.nyc', s: 'Your first wholesale order', p: 'Hi Marcus — here\u2019s the invoice for your first order…', t: 'Pex · draft', tone: 'spark', pex: true,
      body: ['Hi Marcus — here\u2019s the invoice for your first wholesale order. Everything\u2019s baking beautifully.', 'Thanks for coming on board. — Amara'] },
    // scheduled
    { box: 'scheduled', f: 'To: 142 class subscribers', e: 'bcc', s: 'March sourdough class — 6 seats', p: 'Scheduled for Wed 9:00am — best open-rate window…', t: 'Wed 9:00am', tone: 'spark',
      body: ['Scheduled to send Wednesday at 9:00am.', 'Pex picked this window from the previous class-email receipt.'] },
    // sent
    { box: 'sent', f: 'To: Sofia Martins', e: 'sofia.m@gmail.com', s: 'Re: March class · see you Sat!', p: 'Yes of course, the more the merrier…', t: 'Mar 11', tone: 'sage',
      body: ['Sofia — yes of course, the more the merrier! There are two seats left, so have her grab one through the same link. Can\u2019t wait to see you Saturday. — Amara'] },
  ];
  if (!window.PXMail.get().seeded) window.PXMail.set(s => ({ seeded: true, mails: [...seed.map((m, i) => ({ id: 'm' + i, ...m })), ...(s.mails || [])] }));
  const mails = window.useStore(window.PXMail).mails || [];
  const folders = [['inbox', 'Inbox', 'inbox', 3], ['star', 'Starred', 'starred', 0], ['send', 'Sent', 'sent', 0], ['fileText', 'Drafts · Pex', 'drafts', 2], ['clock', 'Scheduled', 'scheduled', 1], ['archive', 'Archive', 'archive', 0]];
  const labels = [['clients', 'rose'], ['suppliers', 'amber'], ['press', 'sky'], ['receipts', 'sage']];
  let list = mails.filter(m => m.box === folder);
  if (tag) list = list.filter(m => m.tag === tag);
  const m = list[sel] || list[0];
  const folderLabel = (folders.find(f => f[2] === folder) || [])[1] || 'Inbox';
  const firstName = m ? (m.f || '').replace(/^To:\s*/, '').split(/[\s·<]/)[0] : '';
  const TONES = ['Brief', 'Formal', 'Warm'];
  const toneVariant = (base, tone) => {
    const k = ((tone % 3) + 3) % 3;
    if (k === 0) { const first = base.split('. ')[0]; return (/[.!?]$/.test(first) ? first : first + '.') + ' — Amara'; }
    if (k === 1) { const t = base.replace(/\s*—\s*Amara\s*$/, ''); return 'Dear ' + firstName + ',\n\n' + t + '\n\nKind regards,\nAmara'; }
    return base;
  };
  const replyActive = m && reply.id === m.id;
  const curReply = replyActive && reply.text ? reply.text : (m && m.reply) || '';
  const sendReply = () => {
    window.PXMail.set(s => ({ mails: [{ id: window.pxid('m'), box: 'sent', f: 'To: ' + m.f, e: m.e, s: 'Re: ' + m.s, p: curReply.slice(0, 72), t: 'Just now', tone: 'sage', body: [curReply] }, ...s.mails.map(x => x.id === m.id ? { ...x, u: false } : x)] }));
    setReply({ id: null, text: '', tone: 0, editing: false });
    toast(`Reply sent to ${m.f} via Workspace.`, { tone: 'sage', icon: 'check' });
  };
  const editReply = () => setReply(r => ({ id: m.id, text: curReply, tone: r.id === m.id ? r.tone : 0, editing: true }));
  const saveReply = () => { setReply(r => ({ ...r, editing: false })); toast('Reply saved.', { tone: 'sage', icon: 'check' }); };
  const anotherTone = () => { const nt = (replyActive ? reply.tone : 0) + 1; setReply({ id: m.id, text: toneVariant((m && m.reply) || '', nt), tone: nt, editing: false }); toast(`Reworded — ${TONES[((nt % 3) + 3) % 3]} tone.`, { icon: 'sparkles', tone: 'spark' }); };
  const draftReply = () => {
    const gen = `Thanks so much for this, ${firstName} — really appreciate you reaching out. I’ll take a look and get back to you shortly with everything you need. — Amara`;
    window.PXMail.set(s => ({ mails: s.mails.map(x => x.id === m.id ? { ...x, reply: gen } : x) }));
    setReply({ id: null, text: '', tone: 0, editing: false });
    toast('Pex drafted a reply.', { icon: 'sparkles', tone: 'spark' });
  };
  const sendDraftNow = () => {
    window.PXMail.set(s => ({ mails: s.mails.map(x => x.id === m.id ? { ...x, box: 'sent', t: 'Just now', pex: false } : x) }));
    setSel(0); toast('Sent via Workspace.', { tone: 'sage', icon: 'check' });
  };
  const scheduleDraft = () => {
    window.PXMail.set(s => ({ mails: s.mails.map(x => x.id === m.id ? { ...x, box: 'scheduled', t: 'Wed 9:00am', pex: false } : x) }));
    setSel(0); toast('Scheduled for Wednesday 9:00am — best open-rate window.', { tone: 'spark', icon: 'clock' });
  };
  const draftActive = m && draftEdit.id === m.id && draftEdit.editing;
  const curDraftText = draftActive ? draftEdit.text : (m ? (m.body || []).join('\n\n') : '');
  const editDraft = () => setDraftEdit({ id: m.id, text: (m.body || []).join('\n\n'), editing: true });
  const saveDraft = () => {
    window.PXMail.set(s => ({ mails: s.mails.map(x => x.id === m.id ? { ...x, body: draftEdit.text.split(/\n\n+/), p: draftEdit.text.replace(/\n+/g, ' ').slice(0, 72) } : x) }));
    setDraftEdit({ id: null, text: '', editing: false });
    toast('Draft saved.', { tone: 'sage', icon: 'check' });
  };
  const RESCHED = ['Wed 9:00am', 'Thu 8:00am', 'Fri 9:30am', 'Sat 10:00am'];
  const reschedule = () => {
    const i = RESCHED.indexOf(m.t); const next = RESCHED[(i + 1) % RESCHED.length];
    window.PXMail.set(s => ({ mails: s.mails.map(x => x.id === m.id ? { ...x, t: next } : x) }));
    toast(`Rescheduled to ${next}.`, { tone: 'spark', icon: 'clock' });
  };

  return (
    <div style={{ display: 'flex', height: '100%', fontFamily: P.sans }}>
      {/* folders */}
      <div style={{ width: 192, borderRight: `1px solid ${P.line}`, padding: 14, flexShrink: 0, background: P.canvas, overflow: 'auto' }}>
        <Btn kind="spark" size="md" full icon="pencil" style={{ marginBottom: 14 }} onClick={() => openOverlay('compose')}>Compose</Btn>
        {folders.map((f) => {
          const on = folder === f[2];
          return (
            <div key={f[2]} onClick={() => { setFolder(f[2]); setSel(0); setTag(null); }} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 9px', borderRadius: 8, fontSize: 13, color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 500, background: on ? P.card : 'transparent', border: `1px solid ${on ? P.line : 'transparent'}`, boxShadow: on ? P.shSm : 'none', marginBottom: 1, cursor: 'pointer' }}>
              <Icon name={f[0]} size={15} color={on ? P.spark : P.ink3}/><span style={{ flex: 1 }}>{f[1]}</span>{f[3] > 0 && <span style={{ fontSize: 11, color: P.sparkDim, fontWeight: 600 }}>{f[3]}</span>}
            </div>
          );
        })}
        <Label style={{ padding: '14px 8px 6px' }}>Labels</Label>
        {labels.map((l, i) => {
          const on = tag === l[0];
          return <div key={i} onClick={() => { setTag(on ? null : l[0]); setFolder('inbox'); setSel(0); }} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 9px', borderRadius: 7, fontSize: 12, color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 400, background: on ? P.sunk : 'transparent', cursor: 'pointer' }}><span style={{ width: 8, height: 8, borderRadius: 8, background: P[l[1]] }}/>{l[0]}</div>;
        })}
      </div>

      {/* message list */}
      <div style={{ width: 344, borderRight: `1px solid ${P.line}`, overflow: 'auto', flexShrink: 0 }}>
        <div style={{ padding: '13px 16px', borderBottom: `1px solid ${P.line}`, display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 20, color: P.ink }}>{folderLabel}</div><div style={{ fontSize: 11.5, color: P.ink3 }}>amara@honestloaves.com{tag ? ` · ${tag}` : ''}</div></div>
          <window.WSChip api="Gmail"/>
        </div>
        {list.length === 0 && <div style={{ padding: '40px 20px', textAlign: 'center', color: P.ink3, fontSize: 13 }}>Nothing in {folderLabel.toLowerCase()}.</div>}
        {list.map((mx, i) => (
          <div key={i} onClick={() => setSel(i)} style={{ padding: '12px 16px', borderBottom: `1px solid ${P.line}`, background: m === mx ? P.hover : 'transparent', borderLeft: `3px solid ${m === mx ? P.spark : 'transparent'}`, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 3 }}>
              {mx.u && <span style={{ width: 6, height: 6, borderRadius: 6, background: P.spark, flexShrink: 0 }}/>}
              <span style={{ fontSize: 13, fontWeight: mx.u ? 600 : 500, color: P.ink, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{mx.f}</span>
              <span style={{ fontSize: 10.5, color: P.ink3, flexShrink: 0 }}>{mx.t}</span>
            </div>
            <div style={{ fontSize: 12.5, color: P.ink, fontWeight: mx.u ? 500 : 400 }}>{mx.s}</div>
            <div style={{ fontSize: 11.5, color: P.ink3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{mx.p}</div>
            <div style={{ display: 'flex', gap: 5, marginTop: 6 }}>
              {mx.tag && <span style={{ fontSize: 9.5, color: P.ink3, background: P.sunk, padding: '1px 6px', borderRadius: 4, border: `1px solid ${P.line}` }}>{mx.tag}</span>}
              {mx.pex && <span style={{ fontSize: 9.5, color: P.sparkDim, background: P.sparkTint, padding: '1px 6px', borderRadius: 4, fontWeight: 600 }}>✦ Pex</span>}
              {mx.crm && <span style={{ fontSize: 9.5, color: P.ink3, background: P.sunk, padding: '1px 6px', borderRadius: 4, border: `1px solid ${P.line}` }}>in CRM</span>}
            </div>
          </div>
        ))}
      </div>

      {/* reading pane */}
      <div style={{ flex: 1, overflow: 'auto', minWidth: 0 }}>
        {!m ? <div style={{ padding: 40, color: P.ink3, fontSize: 13 }}>Select a message.</div> : <>
        <div style={{ padding: 22, borderBottom: `1px solid ${P.line}` }}>
          <div style={{ fontFamily: P.serif, fontStyle: 'italic', fontSize: 22, color: P.ink, marginBottom: 12 }}>{m.s}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <Avatar name={m.f} size={36}/>
            <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, color: P.ink, fontWeight: 500 }}>{m.f} {m.e !== 'bcc' && <span style={{ color: P.ink3, fontWeight: 400 }}>&lt;{m.e}&gt;</span>}</div><div style={{ fontSize: 11.5, color: P.ink3 }}>{m.box === 'sent' || m.box === 'drafts' || m.box === 'scheduled' ? '' : 'to me · '}{m.t}</div></div>
            {m.crm && <Pill tone="spark" onClick={() => go('people/' + m.crm)} style={{ cursor: 'pointer' }}><Spark size={10}/> Open in CRM</Pill>}
          </div>
        </div>
        <div style={{ padding: 22, fontSize: 14, color: P.ink, lineHeight: 1.7 }}>
          {m.body.map((para, i) => <p key={i} style={{ margin: i < m.body.length - 1 ? '0 0 14px' : 0, whiteSpace: 'pre-line' }}>{para}</p>)}
        </div>
        {m.reply ? (
          <Card pad={16} style={{ margin: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 }}><Pex size={24}/><span style={{ fontSize: 13, fontWeight: 600, color: P.ink, flex: 1 }}>Pex drafted a reply</span><span style={{ fontSize: 11, color: P.ink3 }}>1 ⚡ to send</span></div>
            {replyActive && reply.editing ? (
              <window.TextArea value={curReply} onChange={v => setReply(r => ({ ...r, id: m.id, text: v }))} rows={6}/>
            ) : (
              <div style={{ fontSize: 13, color: P.ink, lineHeight: 1.6, padding: 12, background: P.sunk, borderRadius: 9, whiteSpace: 'pre-line' }}>{curReply}</div>
            )}
            <div style={{ display: 'flex', gap: 7, marginTop: 11 }}>
              {replyActive && reply.editing
                ? <Btn kind="spark" size="sm" icon="check" onClick={saveReply}>Done</Btn>
                : <Btn kind="spark" size="sm" icon="send" onClick={sendReply}>Send · 1 ⚡</Btn>}
              <Btn kind="default" size="sm" onClick={editReply}>Edit</Btn>
              <Btn kind="ghost" size="sm" onClick={anotherTone}>Another tone</Btn>
            </div>
          </Card>
        ) : m.box === 'drafts' ? (
          draftActive ? (
            <div style={{ margin: 22 }}>
              <window.TextArea value={curDraftText} onChange={v => setDraftEdit(d => ({ ...d, id: m.id, text: v, editing: true }))} rows={7}/>
              <div style={{ display: 'flex', gap: 8, marginTop: 10 }}><Btn kind="spark" size="sm" icon="check" onClick={saveDraft}>Save draft</Btn><Btn kind="ghost" size="sm" onClick={() => setDraftEdit({ id: null, text: '', editing: false })}>Cancel</Btn></div>
            </div>
          ) : (
            <div style={{ margin: 22, display: 'flex', gap: 8 }}><Btn kind="spark" size="sm" icon="send" onClick={sendDraftNow}>Send now</Btn><Btn kind="default" size="sm" icon="clock" onClick={scheduleDraft}>Schedule</Btn><Btn kind="ghost" size="sm" onClick={editDraft}>Edit draft</Btn></div>
          )
        ) : m.box === 'scheduled' ? (
          <div style={{ margin: 22, display: 'flex', gap: 8, alignItems: 'center' }}><Pill tone="spark" dot>Sends {m.t}</Pill><Btn kind="default" size="sm" onClick={sendDraftNow}>Send now</Btn><Btn kind="ghost" size="sm" onClick={reschedule}>Reschedule</Btn></div>
        ) : (
          <div style={{ margin: 22, padding: 14, border: `1px dashed ${P.lineStrong}`, borderRadius: 11, display: 'flex', alignItems: 'center', gap: 11 }}>
            <Pex size={22}/><span style={{ flex: 1, fontSize: 12.5, color: P.ink2 }}>No reply needed — or want Pex to draft one?</span>
            <Btn kind="default" size="sm" icon="sparkles" onClick={draftReply}>Draft reply · 1 ⚡</Btn>
          </div>
        )}
        </>}
      </div>
    </div>
  );
};

// ── CALENDAR ─────────────────────────────────────────────────
// Reactive event store keyed by grid cell "row-col"; AddEvent writes here.
window.PXCalendar = window.makeStore({ events: null, seeded: false });
window.SCREENS['calendar'] = function Calendar() {
  const P = window.PX; const { openOverlay, toast } = window.useApp();
  const [weekOffset, setWeekOffset] = React.useState(0);
  const seedEvents = {
    '0-2': { t: 'Flour delivery', tone: 'amber', detail: { time: '10:00 · Wed', title: 'King Arthur flour delivery', who: 'Supplier', lines: ['12 × 50lb Sir Galahad, 4 × whole wheat', 'Tracking arrives by 5pm Thursday', 'Pex set a reminder to reconcile the bill'] } },
    '1-2': { t: 'Coffee · Marc', tone: 'sky', prep: true, detail: { time: '9:00 · Tue', title: 'Coffee with Marc Lefèvre', who: 'Café Bleu · client', lines: ['Marc replied this morning — paying Friday, wants 15 loaves (up from 10)', '2× client since 2022 · 92% reliability · avg $1,400/mo', 'Bring: Pex drafted a 15-loaf price sheet ($1,820) — attached'] } },
    '2-1': { t: 'Stand-up', tone: 'ink', detail: { time: '8:00 · Wed', title: 'Team stand-up', who: '5 people · Meet', lines: ['Quick floor sync before the morning bake', 'Pex posts the overnight summary to #bakery-floor'] } },
    '2-3': { t: 'Class email sends', tone: 'spark', detail: { time: '9:00 · Wed', title: 'March class email sends', who: 'Pex · past customers', lines: ['Scheduled for Wednesday morning', 'Previous class receipt attached'] } },
    '4-0': { t: 'Payroll', tone: 'sage', detail: { time: 'Fri · Mar 14', title: 'Run payroll', who: '4 people · semi-monthly', lines: ['$5,856 total cost', 'Pex pre-filled hours from the schedule'] } },
    '6-4': { t: 'David @ Park Bros', tone: 'sky', prep: true, detail: { time: '14:00 · Sat', title: 'David — Park Bros. Hotel', who: 'Prospect · $12k deal', lines: ['Negotiation stage · VIP', 'Pex pulled their last 3 emails + the proposal'] } },
    '7-5': { t: 'Class · 6 students', tone: 'spark', big: true, detail: { time: '9:00 · Sat', title: 'Sourdough class · 6 students', who: 'Sold out', lines: ['Roster + dietary notes synced from sign-ups', 'Pex sent the prep checklist to Rosa'] } },
  };
  if (!window.PXCalendar.get().seeded) window.PXCalendar.set(s => ({ seeded: true, events: { ...seedEvents, ...(s.events || {}) } }));
  const events = window.useStore(window.PXCalendar).events || seedEvents;
  const [sel, setSel] = React.useState('1-2');
  const ev = events[sel] || events['1-2'];
  const DOW = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  const base = new Date(2026, 2, 10);
  const dayLabels = DOW.map((d, i) => { const dt = new Date(base); dt.setDate(base.getDate() + weekOffset * 7 + i); return d + ' ' + dt.getDate(); });
  const wkStart = new Date(base); wkStart.setDate(base.getDate() + weekOffset * 7);
  const weekSub = 'Week of ' + MON[wkStart.getMonth()] + ' ' + wkStart.getDate();
  const shownEvents = weekOffset === 0 ? events : {};
  const todayCol = weekOffset === 0 ? 2 : -1;
  return (
    <window.Page title="Calendar" sub={weekSub} actions={<><window.WSChip api="Calendar"/><Btn kind="default" size="sm" icon="chevL" onClick={() => setWeekOffset(o => o - 1)}/><Btn kind="default" size="sm" onClick={() => setWeekOffset(0)}>Today</Btn><Btn kind="default" size="sm" icon="chevR" onClick={() => setWeekOffset(o => o + 1)}/><Btn kind="primary" size="sm" icon="plus" onClick={() => openOverlay('addEvent')}>Event</Btn></>}>
      <Card pad={0}>
        <div style={{ display: 'grid', gridTemplateColumns: '54px repeat(7, 1fr)' }}>
          <div style={{ borderBottom: `1px solid ${P.line}`, borderRight: `1px solid ${P.line}` }}/>
          {dayLabels.map((d, i) => (
            <div key={i} style={{ padding: '10px 12px', borderLeft: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}`, fontSize: 12, color: i === todayCol ? P.spark : P.ink2, fontWeight: i === todayCol ? 600 : 500, background: i === todayCol ? P.sparkWash : 'transparent' }}>{d}</div>
          ))}
          {['8', '9', '10', '11', '12p', '1', '2', '3', '4'].map((h, r) => (
            <React.Fragment key={r}>
              <div style={{ padding: '6px 8px', fontSize: 10.5, color: P.ink3, fontFamily: P.mono, borderBottom: `1px solid ${P.line}`, borderRight: `1px solid ${P.line}` }}>{h}</div>
              {[0,1,2,3,4,5,6].map(c => {
                const key = `${r}-${c}`; const e = shownEvents[key]; const on = sel === key;
                return (
                  <div key={c} onClick={e ? () => setSel(key) : undefined} style={{ minHeight: 42, borderLeft: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}`, padding: 4, background: c === todayCol ? P.sparkWash : 'transparent', cursor: e ? 'pointer' : 'default' }}>
                    {e && <div style={{ background: e.tone === 'ink' ? P.sunk : P[e.tone + 'Tint'], borderLeft: `3px solid ${P[e.tone] || P.ink}`, padding: '5px 7px', borderRadius: 6, fontSize: 10.5, color: P.ink, minHeight: e.big ? 54 : 'auto', outline: on ? `2px solid ${P.spark}` : 'none' }}>
                      <div style={{ fontWeight: 600 }}>{e.t}</div>
                      {e.prep && <div style={{ fontSize: 10, color: P.ink3, marginTop: 2 }}>Prep ready</div>}
                    </div>}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </Card>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18, marginTop: 18 }}>
        <Card pad={18}>
          {weekOffset === 0 ? (<>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}><span style={{ fontSize: 14, fontWeight: 600, color: P.ink }}>{ev.detail.title}</span></div>
          <div style={{ fontSize: 12, color: P.ink3, marginBottom: 12 }}>{ev.detail.time} · {ev.detail.who}</div>
          <Card pad={13} style={{ background: P.sunk, border: 'none' }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}><Pex size={18}/><span style={{ fontSize: 12.5, fontWeight: 600, color: P.ink }}>Pex prepped this for you</span></div>
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12.5, color: P.ink2, lineHeight: 1.7 }}>
              {ev.detail.lines.map((l, i) => <li key={i}>{l}</li>)}
            </ul>
          </Card>
          </>) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '18px 4px', color: P.ink3, fontSize: 13 }}>
              <Icon name="calendar" size={18} color={P.ink3}/>
              <span>Nothing scheduled for {weekSub.toLowerCase()}. Press <b style={{ color: P.ink2 }}>Today</b> to jump back, or <b style={{ color: P.ink2 }}>+ Event</b> to add one.</span>
            </div>
          )}
        </Card>
        <Card pad={18}>
          <div style={{ fontSize: 14, fontWeight: 600, color: P.ink, marginBottom: 10 }}>Follow-ups queued</div>
          {[['Noor · Greenpoint', 'Fri'], ['Ahmad · samples', 'Tue'], ['Sofia · next class', 'Apr 11']].map((f, i) => (
            <div key={i} onClick={() => toast(`Follow-up with ${f[0].split(' · ')[0]} confirmed for ${f[1]} — Pex will remind you.`, { tone: 'sage', icon: 'check' })} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 6px', margin: '0 -6px', borderRadius: 7, borderBottom: i < 2 ? `1px solid ${P.line}` : 'none', fontSize: 12.5, cursor: 'pointer' }} onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}><span style={{ color: P.ink }}>{f[0]}</span><span style={{ color: P.ink3 }}>{f[1]}</span></div>
          ))}
        </Card>
      </div>
    </window.Page>
  );
};

// ── FILES (Drive) ────────────────────────────────────────────
window.SCREENS['files'] = function Files() {
  const P = window.PX; const { toast } = window.useApp();
  const [cat, setCat] = React.useState('brand');
  const [preview, setPreview] = React.useState(null);
  const [upN, setUpN] = React.useState(0);
  const [all, setAll] = React.useState([
    { n: 'logo-primary.svg', t: 'SVG', bg: '#3A2A1C', label: 'hl', c: '#F5D8A8', cat: 'brand' },
    { n: 'logo-mark.svg', t: 'SVG', bg: '#D9A84C', label: '◒', c: '#3A2A1C', cat: 'brand' },
    { n: 'palette.fig', t: 'Figma', bg: 'linear-gradient(90deg,#3A2A1C 25%,#D9A84C 25% 50%,#8C4A2A 50% 75%,#F2E2C4 75%)', cat: 'brand' },
    { n: 'brand-book.pdf', t: 'PDF · 24p', bg: '#F2E2C4', label: '▦', c: P.ink, cat: 'brand' },
    { n: 'Pex · March kit', t: 'Folder · 12', bg: P.sparkTint, label: '✦', c: P.spark, pex: true, cat: 'brand' },
    { n: 'hero-photo-01.jpg', t: 'JPG · 2.1MB', bg: '#C99944', cat: 'photos' },
    { n: 'oven-morning.jpg', t: 'JPG · 1.8MB', bg: '#8C4A2A', cat: 'photos' },
    { n: 'team-2024.jpg', t: 'JPG · 3.2MB', bg: '#7A5A3A', cat: 'photos' },
    { n: 'INV-1024 · Café Bleu.pdf', t: 'PDF', bg: '#F2E2C4', label: '$', c: P.ink, cat: 'invoices' },
    { n: 'INV-1025 · Lila.pdf', t: 'PDF', bg: '#F2E2C4', label: '$', c: P.ink, cat: 'invoices' },
    { n: 'Park Bros · wholesale.pdf', t: 'PDF · 4p', bg: '#EDE6D6', label: '▦', c: P.ink, cat: 'contracts' },
  ]);
  const cats = [['brand', 'star', 'Brand assets'], ['invoices', 'receipt', 'Invoices'], ['contracts', 'fileText', 'Contracts'], ['photos', 'image', 'Photos'], ['all', 'folder', 'All files']];
  const PICKS = [
    { n: 'spring-menu.pdf', t: 'PDF · 2p', bg: '#F2E2C4', label: '▦', c: P.ink, cat: 'contracts' },
    { n: 'counter-morning.jpg', t: 'JPG · 2.4MB', bg: '#8C4A2A', cat: 'photos' },
    { n: 'INV-1026 · Park Bros.pdf', t: 'PDF', bg: '#F2E2C4', label: '$', c: P.ink, cat: 'invoices' },
    { n: 'label-sheet.svg', t: 'SVG', bg: '#3A2A1C', label: 'hl', c: '#F5D8A8', cat: 'brand' },
  ];
  const upload = () => {
    const pick = PICKS[upN % PICKS.length];
    const dest = cat === 'all' ? pick.cat : cat;
    const catName = (cats.find(x => x[0] === dest) || [, , dest])[2];
    const f = { ...pick, cat: dest, n: upN < PICKS.length ? pick.n : pick.n.replace(/(\.\w+)$/, '-' + (upN + 1) + '$1') };
    setAll(a => [f, ...a]); setUpN(n => n + 1);
    toast(`Uploaded ${f.n} to Drive · ${catName}.`, { tone: 'sage', icon: 'check' });
  };
  const organize = () => {
    setAll(a => [...a].sort((x, y) => (y.pex ? 1 : 0) - (x.pex ? 1 : 0) || String(x.cat).localeCompare(y.cat) || String(x.n).localeCompare(y.n)));
    toast('Pex filed loose documents — folders first, then by type.', { icon: 'sparkles', tone: 'spark' });
  };
  const files = cat === 'all' ? all : all.filter(f => f.cat === cat);
  return (
    <window.Page title="Files" sub="Your Google Drive, organized by Pexxie · 4.2 GB of 500 GB" actions={<><window.WSChip api="Drive"/><Btn kind="spark" size="sm" icon="sparkles" onClick={organize}>Pex: organize</Btn><Btn kind="primary" size="sm" icon="upload" onClick={upload}>Upload</Btn></>}>
      <div style={{ display: 'flex', gap: 18 }}>
        <div style={{ width: 184, flexShrink: 0 }}>
          {cats.map((f, i) => {
            const on = cat === f[0]; const count = f[0] === 'all' ? all.length : all.filter(x => x.cat === f[0]).length;
            return (
              <div key={i} onClick={() => setCat(f[0])} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 9px', borderRadius: 8, fontSize: 13, color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 500, background: on ? P.card : 'transparent', border: `1px solid ${on ? P.line : 'transparent'}`, boxShadow: on ? P.shSm : 'none', marginBottom: 1, cursor: 'pointer' }}>
                <Icon name={f[1]} size={15} color={on ? P.spark : P.ink3}/><span style={{ flex: 1 }}>{f[2]}</span><span style={{ fontSize: 11, color: P.ink3 }}>{count}</span>
              </div>
            );
          })}
          <Card pad={12} style={{ marginTop: 14 }}>
            <Label>Drive storage</Label>
            <div style={{ height: 5, background: P.sunk, borderRadius: 5, margin: '8px 0 5px', overflow: 'hidden' }}><div style={{ width: '0.8%', height: '100%', background: P.sage }}/></div>
            <div style={{ fontSize: 10.5, color: P.ink3 }}>4.2 / 500 GB · Workspace</div>
          </Card>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {files.map((f, i) => (
              <Card key={i} pad={0} hover onClick={() => setPreview(f)} style={{ border: `1px solid ${f.pex ? P.sparkTint : P.line}`, cursor: 'pointer' }}>
                <div style={{ aspectRatio: '4/3', background: f.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', color: f.c || '#fff', fontFamily: P.serif, fontStyle: 'italic', fontSize: 26 }}>{f.label || ''}</div>
                <div style={{ padding: 11 }}><div style={{ fontSize: 12.5, color: P.ink, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.n}</div><div style={{ fontSize: 10.5, color: P.ink3 }}>{f.t}</div></div>
              </Card>
            ))}
          </div>
        </div>
      </div>
      {preview && <window.Modal title={preview.n} sub={preview.t + ' · Google Drive'} w={520} onClose={() => setPreview(null)}
        foot={<><Btn kind="ghost" size="sm" icon="link" onClick={() => toast('Share link copied — anyone at honestloaves.com can view.', { tone: 'sage', icon: 'check' })}>Copy link</Btn><Btn kind="spark" size="sm" icon="download" onClick={() => { toast(`Downloading ${preview.n}…`, { icon: 'download' }); setPreview(null); }}>Download</Btn></>}>
        <div style={{ aspectRatio: '16/10', background: preview.bg, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', color: preview.c || '#fff', fontFamily: P.serif, fontStyle: 'italic', fontSize: 52 }}>{preview.label || preview.t}</div>
        <div style={{ fontSize: 12.5, color: P.ink3, marginTop: 12 }}>{preview.t} · stored in your Google Drive, kept organized by Pexxie.</div>
      </window.Modal>}
    </window.Page>
  );
};

// ── CHAT (Pexxie team chat + Meet) ───────────────────────────
window.SCREENS['chat'] = function Chat() {
  const P = window.PX; const { toast } = window.useApp();
  const seed = {
    'bakery-floor': { sub: '5 members + Pex · oven updates and shift notes', msgs: [
      { n: 'Rosa Kim', t: '7:02am', m: 'first pull out of the oven. look at these babies 🥖', att: true },
      { n: 'Diego Torres', t: '7:05am', m: 'gorgeous. lila\'s order is +3 today btw' },
      { n: 'Pex', t: '7:06am', m: 'I saw — moved the delivery window to 10:15 and Lila confirmed. Also flagged that we\'re 2 loaves short on the walk-in.', pex: true },
      { n: 'Amara', t: '7:14am', m: 'nice catch. @rosa can we pull two more off the batch?' },
      { n: 'Rosa Kim', t: '7:15am', m: 'already on it 🫡' },
    ]},
    'wholesale': { sub: '3 members + Pex · client orders & deliveries', msgs: [
      { n: 'Diego Torres', t: 'Mon', m: 'Park Bros wants to talk volume pricing' },
      { n: 'Pex', t: 'Mon', m: 'Pulled their history — $12k pipeline, VIP. Briefing is on Amara\'s Saturday calendar.', pex: true },
    ]},
    'marketing': { sub: '2 members + Pex · campaigns & socials', msgs: [
      { n: 'Priya Venkatesan', t: '8:40am', m: 'march class email ready to go?' },
      { n: 'Pex', t: '8:41am', m: 'Drafted and scheduled for Wed 9am — past customers.', pex: true },
    ]},
    'classes': { sub: '2 members + Pex · workshops & sign-ups', msgs: [
      { n: 'Pex', t: '8:15am', m: 'March class hit 6 of 6 seats — waitlist started. Want me to open an April date?', pex: true },
      { n: 'Priya Venkatesan', t: '8:18am', m: 'yes! let’s do April 12' },
    ]},
    'Pex': { dm: true, title: 'Pex', sub: 'Direct message · your AI teammate', msgs: [
      { n: 'Pex', t: '6:40am', m: 'Morning, Amara. 5 things waiting in your inbox — two are time-sensitive. Want me to start with Café Bleu?', pex: true },
    ]},
    'Diego Torres': { dm: true, title: 'Diego Torres', sub: 'Direct message · wholesale & deliveries', msgs: [
      { n: 'Diego Torres', t: 'Mon', m: 'Park Bros wants a call Thursday — you free 2pm?' },
    ]},
    'Rosa Kim': { dm: true, title: 'Rosa Kim', sub: 'Direct message · head baker', msgs: [
      { n: 'Rosa Kim', t: '7:20am', m: 'pulled the two extra loaves for Lila 🫡' },
    ]},
    'Ethan Brooks': { dm: true, title: 'Ethan Brooks', sub: 'Direct message · front of house', msgs: [
      { n: 'Ethan Brooks', t: 'Yest', m: 'register was $12 over at close — flagged it for you' },
    ]},
    'visitor-anon': { dm: true, visitor: true, title: 'Anon · Brooklyn', sub: 'Website visitor · live · honestloaves.com', msgs: [
      { n: 'Anon · Brooklyn', t: 'now', m: 'do you ship to Brooklyn? and is there a gluten-free option?' },
      { n: 'Pex', t: 'now', m: 'We deliver across Brooklyn Tue & Fri, and there’s a gluten-free loaf on Saturdays. Want me to set one aside?', pex: true },
    ]},
    'visitor-maria': { dm: true, visitor: true, title: 'Maria H.', sub: 'Website visitor · honestloaves.com', msgs: [
      { n: 'Maria H.', t: '9:02am', m: 'is the sourdough class still open?' },
      { n: 'Amara', t: '9:05am', m: 'Yes! Two seats left — grab one here: honestloaves.com/class' },
    ]},
  };
  const channels = [['bakery-floor', 2], ['wholesale', 0], ['marketing', 1], ['classes', 0]];
  const [active, setActive] = React.useState('bakery-floor');
  const [threads, setThreads] = React.useState(seed);
  const [draft, setDraft] = React.useState('');
  const cur = threads[active] || { sub: 'New channel', msgs: [] };
  const scrollRef = React.useRef(null);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [active, cur.msgs.length]);
  const send = () => {
    const v = draft.trim(); if (!v) return;
    const key = active;
    setThreads(th => ({ ...th, [key]: { ...th[key], msgs: [...th[key].msgs, { n: 'Amara', t: 'now', m: v }] } }));
    setDraft('');
    const t = threads[key];
    if (t && t.dm) {
      const reply = key === 'Pex'
        ? { n: 'Pex', t: 'now', m: 'On it — pulling that together now.', pex: true }
        : t.visitor
          ? { n: t.title, t: 'now', m: 'Perfect, thank you! 🙏' }
          : { n: t.title, t: 'now', m: 'Sounds good — thanks Amara 👍' };
      setTimeout(() => setThreads(th => ({ ...th, [key]: { ...th[key], msgs: [...th[key].msgs, reply] } })), 700);
    }
  };
  const startMeet = () => {
    const key = active;
    setThreads(th => ({ ...th, [key]: { ...th[key], meet: true, msgs: [...th[key].msgs, { n: 'Pex', t: 'now', m: 'Started a Meet for this channel — I’ll take notes and post a summary here after.', pex: true }] } }));
    toast('Meet started · Pex is taking notes.', { tone: 'sage', icon: 'video' });
  };
  const attach = () => {
    const key = active;
    setThreads(th => ({ ...th, [key]: { ...th[key], msgs: [...th[key].msgs, { n: 'Amara', t: 'now', m: 'Shared a photo', att: true }] } }));
    toast('Photo attached.', { tone: 'sage', icon: 'paperclip' });
  };
  return (
    <div style={{ display: 'flex', height: '100%', fontFamily: P.sans }}>
      <div style={{ width: 232, borderRight: `1px solid ${P.line}`, padding: 14, flexShrink: 0, background: P.canvas, overflow: 'auto' }}>
        <Label style={{ padding: '4px 8px 6px' }}>Channels</Label>
        {channels.map((c, i) => {
          const on = active === c[0];
          return (
            <div key={i} onClick={() => setActive(c[0])} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 9px', borderRadius: 8, fontSize: 13, color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 500, background: on ? P.card : 'transparent', border: `1px solid ${on ? P.line : 'transparent'}`, boxShadow: on ? P.shSm : 'none', marginBottom: 1, cursor: 'pointer' }}>
              <Icon name="hash" size={14} color={on ? P.spark : P.ink3}/><span style={{ flex: 1 }}>{c[0]}</span>{c[1] > 0 && <span style={{ fontSize: 10, color: '#fff', background: P.spark, padding: '1px 6px', borderRadius: 999, fontWeight: 600 }}>{c[1]}</span>}
            </div>
          );
        })}
        <Label style={{ padding: '14px 8px 6px' }}>Direct</Label>
        {[['Pex', true], ['Diego Torres'], ['Rosa Kim'], ['Ethan Brooks']].map((d, i) => {
          const on = active === d[0];
          return <div key={i} onClick={() => setActive(d[0])} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 9px', borderRadius: 7, fontSize: 12.5, color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 400, background: on ? P.card : 'transparent', cursor: 'pointer' }}>{d[1] ? <Pex size={18}/> : <Avatar name={d[0]} size={18}/>}{d[0]}</div>;
        })}
        <Label style={{ padding: '14px 8px 6px' }}>Website visitors · 2 live</Label>
        {[['visitor-anon', 'Anon · Brooklyn', 'Pex replying', 'spark'], ['visitor-maria', 'Maria H.', 'You replied', 'sage']].map((v, i) => {
          const on = active === v[0];
          return (
          <div key={i} onClick={() => setActive(v[0])} style={{ padding: '6px 9px', fontSize: 11.5, borderRadius: 7, background: on ? P.card : 'transparent', cursor: 'pointer' }}><div style={{ display: 'flex', justifyContent: 'space-between', color: on ? P.ink : P.ink2, fontWeight: on ? 600 : 400 }}><span>{v[1]}</span><span style={{ width: 6, height: 6, borderRadius: 6, background: P[v[3]], alignSelf: 'center' }}/></div><div style={{ color: P.ink3, fontSize: 10.5 }}>{v[2]}</div></div>
          );
        })}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <div style={{ padding: '14px 18px', borderBottom: `1px solid ${P.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: P.ink }}>{cur.dm ? (cur.title || active) : '# ' + active}</div><div style={{ fontSize: 11.5, color: P.ink3 }}>{cur.sub}</div></div>
          {cur.meet && <Pill tone="sage" dot>Meet · live</Pill>}
          {!cur.visitor && <Btn kind={cur.meet ? 'spark' : 'default'} size="sm" icon="video" onClick={startMeet}>{cur.meet ? 'Join' : 'Meet'}</Btn>}
        </div>
        <div ref={scrollRef} style={{ flex: 1, overflow: 'auto', padding: 20 }}>
          {cur.msgs.map((x, i) => (
            <div key={i} style={{ display: 'flex', gap: 11, marginBottom: 14 }}>
              {x.pex ? <Pex size={32}/> : <Avatar name={x.n} size={32}/>}
              <div><div style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}><span style={{ fontSize: 13, fontWeight: 600, color: x.pex ? P.spark : P.ink }}>{x.n}</span><span style={{ fontSize: 10.5, color: P.ink3 }}>{x.t}</span></div>
              <div style={{ fontSize: 13.5, color: P.ink, lineHeight: 1.5, marginTop: 2 }}>{x.m}</div>
              {x.att && <div style={{ marginTop: 7, width: 180, height: 120, background: '#D9A84C', borderRadius: 8 }}/>}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: 14, borderTop: `1px solid ${P.line}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 13px', background: P.sunk, borderRadius: 10, border: `1px solid ${P.line}` }}>
            <input value={draft} onChange={e => setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); send(); } }} placeholder={cur.dm ? `Message ${cur.title || active}…` : `Message #${active}…`} style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 13, color: P.ink, fontFamily: P.sans }}/>
            <span onClick={attach} title="Attach a photo" style={{ cursor: 'pointer', display: 'inline-flex' }}><Icon name="paperclip" size={15} color={P.ink3}/></span>
            <span onClick={send} style={{ cursor: 'pointer', color: P.spark }}><Icon name="send" size={16}/></span>
          </div>
        </div>
      </div>
    </div>
  );
};