// Leads + Bookings + shared Contact/Ready-email pieces. // Relies on globals from components.jsx. const { useState: useState2 } = React; const KindIcon = ({ kind, muted }) => { const c = muted ? '#3a3a3c' : '#86868b'; return kind === 'phone' ? : ; }; const ContactRow = ({ kind, value, onClick }) => { if (!value) { return (

No {kind === 'phone' ? 'number' : 'email'} on file

); } return ( ); }; // Mark-ready animated button const MarkReadyButton = ({ onDone }) => { const [phase, setPhase] = useState2('idle'); const tap = () => { if (phase !== 'idle') return; setPhase('pressing'); setTimeout(() => setPhase('check'), 220); setTimeout(() => { setPhase('done'); onDone?.(); }, 1100); }; const w = phase === 'pressing' ? 140 : phase === 'check' ? 180 : phase === 'done' ? 44 : 130; return ( ); }; const LeadsTab = ({ onConvert }) => (

{LEADS.length} NEW · 4 UNSEEN {LEADS.map(l => (

{l.ref} · {l.received}

{l.name}

{l.device} — {l.issue}

window.location.href = `tel:${l.phone.replace(/\s/g,'')}`} /> {}} />

FROM

£{l.starting}

))}

); // Ready-email sheet const ReadyEmailSheet = ({ booking, onClose, onSent }) => { const [subject, setSubject] = useState2(''); const [body, setBody] = useState2(''); const [sent, setSent] = useState2(false); React.useEffect(() => { if (!booking) return; setSubject(`Your ${booking.device} is ready to collect — ${booking.ref}`); setBody( `Hi ${booking.name.split(' ')[0]},\n\n` + `Good news — your ${booking.device} (${booking.service}) is fixed and ready.\n\n` + `Ref: ${booking.ref}\n` + `Total: £${booking.price}\n` + `Shop: The Fone Shop, Longton — open til 6pm, 10–4 Sat.\n\n` + `Bring this email or the ref above. Card, cash, Apple Pay all fine.\n\n` + `Cheers,\nMo` ); setSent(false); }, [booking]); if (!booking) return null; const send = () => { setSent(true); setTimeout(() => { onSent?.(); onClose(); }, 900); }; return ( {sent ? <>Sent : <>Send email} , Cancel, ]}>

{booking.email}

setSubject(e.target.value)} style={fieldInput} />

setBody(e.target.value)} rows={9} style={{ ...fieldInput, resize: 'none', lineHeight: 1.5 }} /></Field>
      </div>
    </Sheet>
  );
};

const BookingsTab = () => {
  const [filter, setFilter] = useState2('today');
  const [done, setDone] = useState2(new Set());
  const [expanded, setExpanded] = useState2(new Set(['FS-20260418-A7K3']));
  const [composeFor, setComposeFor] = useState2(null);
  const toggleExpand = (ref) => setExpanded(s => {
    const next = new Set(s); next.has(ref) ? next.delete(ref) : next.add(ref); return next;
  });
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
        {[['today', 'Today', 3], ['tomorrow', 'Tomorrow', 2], ['later', 'Later', 7]].map(([k, lbl, n]) => (
          <button key={k} onClick={() => setFilter(k)} style={{
            height: 36, padding: '0 14px',
            background: filter === k ? '#FF6B1A' : 'transparent',
            color: filter === k ? '#000' : '#86868b',
            border: 0, borderRadius: 980,
            boxShadow: filter === k ? 'none' : 'inset 0 0 0 1px #2c2c2e',
            font: '500 13px Inter', cursor: 'pointer',
          }}>{lbl} · {n}</button>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {BOOKINGS.map(b => {
          const open = expanded.has(b.ref);
          const isDone = done.has(b.ref);
          return (
            <article key={b.ref} style={{ padding: 16, background: '#0a0a0a', border: '1px solid #1a1a1a', borderRadius: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <button onClick={() => toggleExpand(b.ref)} style={{ flex: 1, minWidth: 0, background: 'transparent', border: 0, padding: 0, textAlign: 'left', cursor: 'pointer', color: 'inherit' }}>
                  <Mono style={{ fontSize: 11, color: '#86868b' }}>{b.ref}</Mono>
                  <div style={{ marginTop: 6, fontSize: 15, fontWeight: 500 }}>{b.name}</div>
                  <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(255,255,255,0.85)' }}>{b.device} — {b.service}</div>
                  <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                    <StatusPill s={isDone ? 'ready' : b.status} />
                    <span style={{ fontSize: 12, color: '#86868b' }}>Due {b.due}</span>
                    <Mono style={{ fontSize: 13, color: '#fff' }}>£{b.price}</Mono>
                  </div>
                </button>
                {b.status === 'in_progress' && !isDone && (
                  <MarkReadyButton onDone={() => {
                    setDone(prev => new Set(prev).add(b.ref));
                    if (b.email) setTimeout(() => setComposeFor(b), 500);
                  }} />
                )}
              </div>
              <div style={{
                overflow: 'hidden',
                maxHeight: open ? 220 : 0, opacity: open ? 1 : 0,
                transition: 'max-height 320ms cubic-bezier(0.25,0.1,0.25,1), opacity 220ms',
              }}>
                <div style={{ marginTop: 12, paddingTop: 8, borderTop: '1px solid #1a1a1a' }}>
                  <ContactRow kind="phone" value={b.phone} onClick={() => window.location.href = `tel:${b.phone.replace(/\s/g,'')}`} />
                  <ContactRow kind="email" value={b.email} onClick={() => setComposeFor(b)} />
                </div>
              </div>
            </article>
          );
        })}
      </div>
      <ReadyEmailSheet booking={composeFor} onClose={() => setComposeFor(null)} />
    </div>
  );
};

Object.assign(window, { LeadsTab, BookingsTab });