// Booking flow + Tracker
const { useState: useStateB, useEffect: useEffectB, useMemo } = React;

// ── Helper: month grid
function monthGrid(year, month) {
  const first = new Date(year, month, 1);
  const startDow = first.getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7) cells.push(null);
  return cells;
}
const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];
const DOW = ['S','M','T','W','T','F','S'];

// ── Slot pool (per day) — read from operator-managed store
function getTimeSlots() { return window.BlastStore.getTimeSlots(); }

// ── BOOKING SCREEN ─────────────────────────────
function BookingScreen({ onBack, onComplete, accent, initialService }) {
  const [service, setService] = useStateB(initialService || 'bin');
  const [storeVersion, setStoreVersion] = useStateB(0);
  useEffectB(() => {
    const h = () => setStoreVersion(v => v + 1);
    window.addEventListener('blast-store-change', h);
    return () => window.removeEventListener('blast-store-change', h);
  }, []);
  const [step, setStep] = useStateB(0);
  const [bins, setBins] = useStateB({ trash: 1, recycle: 0, compost: 0 });
  const [size, setSize] = useStateB('64');
  const [frequency, setFrequency] = useStateB('monthly');
  const [date, setDate] = useStateB(null); // {y, m, d}
  const [slot, setSlot] = useStateB(null);
  const [address, setAddress] = useStateB({ street: '', unit: '', zip: '' });
  const [notes, setNotes] = useStateB('');
  const [accessAck, setAccessAck] = useStateB(false);
  const [signed, setSigned] = useStateB(false);
  const [initials, setInitials] = useStateB('');
  const [waiverAck, setWaiverAck] = useStateB({ liability: false, surface: false, photos: false });

  const today = new Date();
  const [viewYear, setViewYear] = useStateB(today.getFullYear());
  const [viewMonth, setViewMonth] = useStateB(today.getMonth());

  // Pricing
  const basePerBin = { '32': 18, '64': 24, '96': 32 }[size];
  const totalBins = bins.trash + bins.recycle + bins.compost;
  const freqDiscount = { 'one': 1, 'monthly': 0.85, 'biweekly': 0.75, 'weekly': 0.6, 'yearly': 0.55 }[frequency];
  const subtotal = totalBins * basePerBin;
  const total = Math.round(subtotal * freqDiscount);
  const savings = Math.round(subtotal - total);

  const stepNames = ['Bins', 'Schedule', 'Address', 'Waiver', 'Confirm'];

  function next() { setStep(s => Math.min(stepNames.length - 1, s + 1)); }
  function prev() {
    if (step === 0) onBack();
    else setStep(s => s - 1);
  }

  const canNext =
    step === 0 ? totalBins > 0 :
    step === 1 ? !!date && !!slot :
    step === 2 ? address.street.length > 3 && address.zip.length === 5 && accessAck :
    step === 3 ? signed && initials.trim().length >= 2 :
    true;

  return (
    <div style={{
      background: 'var(--blast-paper)', minHeight: '100%',
      paddingBottom: 110, position: 'relative',
    }}>
      {/* HEADER */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 12,
        background: 'var(--blast-paper)',
        paddingTop: 54, paddingBottom: 0,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 22px 14px',
        }}>
          <button onClick={prev} style={{
            background: 'rgba(7,8,12,0.06)', border: 'none', cursor: 'pointer',
            width: 38, height: 38, borderRadius: 50,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.Chevron dir="left" s={18} c="var(--blast-ink)"/>
          </button>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--blast-mute)',
          }}>
            Step {step + 1} of {stepNames.length} · {stepNames[step]}
          </div>
          <div style={{ width: 38 }} />
        </div>
        <div className="step-bar">
          {stepNames.map((_, i) => (
            <div key={i} className={
              `step ${i < step ? 'done' : i === step ? 'active' : ''}`
            } style={{
              background: i < step ? 'var(--blast-blue)' :
                i === step ? `linear-gradient(90deg, var(--blast-blue) 50%, rgba(7,8,12,0.10) 50%)` :
                'rgba(7,8,12,0.10)'
            }}/>
          ))}
        </div>
      </div>

      {/* BODY */}
      <div key={step} className="slide-in-r" style={{ padding: '8px 22px 24px' }}>
        {step === 0 && <StepBins {...{ bins, setBins, size, setSize, frequency, setFrequency, accent, service, setService }}/>}
        {step === 1 && <StepSchedule {...{ viewYear, viewMonth, setViewYear, setViewMonth, date, setDate, slot, setSlot, accent, today, storeVersion }}/>}
        {step === 2 && <StepAddress {...{ address, setAddress, notes, setNotes, accessAck, setAccessAck, accent }}/>}
        {step === 3 && <StepWaiver {...{ signed, setSigned, initials, setInitials, waiverAck, setWaiverAck, accent }}/>}
        {step === 4 && <StepConfirm {...{ bins, size, frequency, date, slot, address, total, savings, accent, initials }}/>}
      </div>

      {/* PRICE FOOTER */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 22px 30px',
        background: 'linear-gradient(to top, var(--blast-paper) 60%, rgba(244,241,234,0))',
      }}>
        <div style={{
          background: 'var(--blast-ink)', color: 'var(--blast-bone)',
          borderRadius: 22, padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10,
              color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em',
              textTransform: 'uppercase',
            }}>
              {frequency === 'one' ? 'One-time' :
               frequency === 'yearly' ? 'Yearly · prepaid' :
               `Per ${frequency === 'weekly' ? 'week' : frequency === 'biweekly' ? '2 wks' : 'month'}`}
              {savings > 0 && ` · Save $${savings}`}
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1,
              marginTop: 2,
            }}>${total}</div>
          </div>
          <button
            disabled={!canNext}
            onClick={() => step === stepNames.length - 1 ? onComplete({ bins, size, frequency, date, slot, address, total, initials }) : next()}
            style={{
              background: canNext ? accent : 'rgba(255,255,255,0.15)',
              color: canNext ? 'var(--blast-ink)' : 'rgba(255,255,255,0.4)',
              border: 'none', borderRadius: 999,
              padding: '14px 22px',
              fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
              cursor: canNext ? 'pointer' : 'not-allowed',
              display: 'flex', alignItems: 'center', gap: 8,
              letterSpacing: '-0.01em',
            }}>
            {step === stepNames.length - 1 ? 'Lock it in' : 'Next'}
            <Icon.Arrow s={16} c="currentColor"/>
          </button>
        </div>
      </div>
    </div>
  );
}

// ── STEP 0: BINS ───────────────────────────────
function StepBins({ bins, setBins, size, setSize, frequency, setFrequency, accent, service, setService }) {
  const binTypes = [
    { key: 'trash', label: 'Trash', sub: 'Black, brown, or grey lid', color: '#5A5F6B' },
    { key: 'recycle', label: 'Recycle', sub: 'Blue lid', color: 'var(--blast-blue)' },
    { key: 'compost', label: 'Compost / yard', sub: 'Green or beige', color: '#15B36A' },
  ];

  return (
    <div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, margin: '6px 0 18px',
        letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1,
      }}>{service === 'driveway' ? <>What needs<br/>blasting?</> : <>What's getting<br/>blasted?</>}</h2>

      {/* Service tabs */}
      {setService && (
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6,
          background: 'rgba(7,8,12,0.04)', padding: 4, borderRadius: 14,
          marginBottom: 18,
        }}>
          {[
            { id: 'bin', label: 'Trash bins' },
            { id: 'driveway', label: 'Driveway' },
          ].map(s => (
            <button key={s.id} onClick={() => setService(s.id)} style={{
              background: service === s.id ? '#fff' : 'transparent',
              border: 'none', cursor: 'pointer',
              padding: '9px 8px', borderRadius: 10,
              fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13,
              letterSpacing: '-0.01em',
              color: service === s.id ? 'var(--blast-ink)' : 'var(--blast-mute)',
              boxShadow: service === s.id ? '0 1px 3px rgba(7,8,12,0.08)' : 'none',
            }}>{s.label}</button>
          ))}
        </div>
      )}

      {service === 'driveway' ? <DrivewayConfig accent={accent}/> : (<>
      {/* Bin counters */}
      <div style={{ display: 'grid', gap: 10, marginBottom: 22 }}>
        {binTypes.map(bt => (
          <div key={bt.key} style={{
            background: '#fff', border: '1px solid var(--blast-line)',
            borderRadius: 20, padding: '14px 14px 14px 16px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 38, height: 44, borderRadius: '6px 6px 4px 4px',
              background: bt.color, position: 'relative', flexShrink: 0,
            }}>
              <div style={{
                position: 'absolute', top: -4, left: 4, right: 4, height: 6,
                background: bt.color, borderRadius: '4px 4px 0 0',
                filter: 'brightness(1.15)',
              }}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
                letterSpacing: '-0.01em',
              }}>{bt.label}</div>
              <div style={{
                fontSize: 12, color: 'var(--blast-mute)', marginTop: 1,
              }}>{bt.sub}</div>
            </div>
            <Counter
              value={bins[bt.key]}
              onChange={v => setBins({ ...bins, [bt.key]: Math.max(0, Math.min(6, v)) })}
              accent={accent}
            />
          </div>
        ))}
      </div>

      {/* Size picker */}
      <SectionLabel>Bin size</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 10, marginBottom: 22 }}>
        {[
          { id: '32', label: '32 gal', sub: 'Small' },
          { id: '64', label: '64 gal', sub: 'Standard' },
          { id: '96', label: '96 gal', sub: 'Large' },
        ].map(s => (
          <button key={s.id}
            onClick={() => setSize(s.id)}
            style={{
              background: size === s.id ? 'var(--blast-ink)' : '#fff',
              color: size === s.id ? 'var(--blast-bone)' : 'var(--blast-ink)',
              border: size === s.id ? 'none' : '1px solid var(--blast-line)',
              borderRadius: 16, padding: '12px 8px',
              cursor: 'pointer', textAlign: 'center',
              fontFamily: 'var(--font-head)',
            }}>
            <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>{s.label}</div>
            <div style={{
              fontSize: 10, opacity: 0.6, marginTop: 2,
              fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em',
            }}>{s.sub}</div>
          </button>
        ))}
      </div>

      {/* Frequency */}
      <SectionLabel>How often</SectionLabel>
      <div style={{ display: 'grid', gap: 8, marginTop: 10 }}>
        {[
          { id: 'one', label: 'One-time blast', sub: 'No commitment', save: null },
          { id: 'monthly', label: 'Monthly', sub: 'Most popular', save: '15% off', popular: true },
          { id: 'biweekly', label: 'Every 2 weeks', sub: 'Heavy users', save: '25% off' },
          { id: 'weekly', label: 'Weekly', sub: 'Restaurants & families of 6+', save: '40% off' },
          { id: 'yearly', label: 'Yearly tune-up', sub: 'One blast a year, prepaid', save: '45% off' },
        ].map(f => (
          <button key={f.id}
            onClick={() => setFrequency(f.id)}
            style={{
              background: frequency === f.id ? 'var(--blast-blue)' : '#fff',
              color: frequency === f.id ? '#fff' : 'var(--blast-ink)',
              border: frequency === f.id ? '1px solid var(--blast-blue)' : '1px solid var(--blast-line)',
              borderRadius: 18, padding: '14px 16px',
              cursor: 'pointer', textAlign: 'left',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
            <div style={{
              width: 22, height: 22, borderRadius: 50,
              border: `2px solid ${frequency === f.id ? '#fff' : 'rgba(7,8,12,0.2)'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              {frequency === f.id && <div style={{
                width: 10, height: 10, borderRadius: 50, background: '#fff',
              }}/>}
            </div>
            <div style={{ flex: 1, textAlign: 'left' }}>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
                letterSpacing: '-0.01em',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                {f.label}
                {f.popular && <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9,
                  background: accent, color: 'var(--blast-ink)',
                  padding: '2px 6px', borderRadius: 4,
                  letterSpacing: '0.08em',
                }}>POPULAR</span>}
              </div>
              <div style={{
                fontSize: 12, marginTop: 1,
                color: frequency === f.id ? 'rgba(255,255,255,0.7)' : 'var(--blast-mute)',
              }}>{f.sub}</div>
            </div>
            {f.save && <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
              padding: '4px 8px', borderRadius: 4,
              letterSpacing: '0.08em',
              background: frequency === f.id ? 'rgba(255,255,255,0.2)' : 'rgba(25,71,229,0.1)',
              color: frequency === f.id ? '#fff' : 'var(--blast-blue)',
            }}>{f.save}</div>}
          </button>
        ))}
      </div>
      </>)}
    </div>
  );
}

// ── DRIVEWAY CONFIG ──────────────────────────
function DrivewayConfig({ accent }) {
  const [surface, setSurface] = useStateB('driveway');
  const [size, setSize] = useStateB('med');
  const [stains, setStains] = useStateB([]);

  function toggleStain(id) {
    setStains(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  }

  return (
    <div>
      <SectionLabel>Surface</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10, marginBottom: 22 }}>
        {[
          { id: 'driveway', label: 'Driveway', sub: 'Concrete or asphalt' },
          { id: 'patio', label: 'Patio / walk', sub: 'Pavers or concrete' },
          { id: 'deck', label: 'Wood deck', sub: 'Soft-wash only' },
          { id: 'siding', label: 'Garage door', sub: 'Vinyl or metal' },
        ].map(s => (
          <button key={s.id} onClick={() => setSurface(s.id)} style={{
            background: surface === s.id ? 'var(--blast-ink)' : '#fff',
            color: surface === s.id ? 'var(--blast-bone)' : 'var(--blast-ink)',
            border: surface === s.id ? 'none' : '1px solid var(--blast-line)',
            borderRadius: 16, padding: '14px 12px',
            cursor: 'pointer', textAlign: 'left',
            fontFamily: 'var(--font-head)',
          }}>
            <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>{s.label}</div>
            <div style={{
              fontSize: 11, opacity: 0.7, marginTop: 3,
              fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em',
            }}>{s.sub}</div>
          </button>
        ))}
      </div>

      <SectionLabel>Approximate size</SectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 10, marginBottom: 22 }}>
        {[
          { id: 'sm', label: '1 car', sub: '< 400 sqft', price: 149 },
          { id: 'med', label: '2 car', sub: '400–800', price: 229 },
          { id: 'lg', label: '3 car +', sub: '800+ sqft', price: 339 },
        ].map(s => (
          <button key={s.id} onClick={() => setSize(s.id)} style={{
            background: size === s.id ? 'var(--blast-blue)' : '#fff',
            color: size === s.id ? '#fff' : 'var(--blast-ink)',
            border: size === s.id ? '1px solid var(--blast-blue)' : '1px solid var(--blast-line)',
            borderRadius: 16, padding: '14px 8px',
            cursor: 'pointer', textAlign: 'center',
            fontFamily: 'var(--font-head)',
          }}>
            <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>{s.label}</div>
            <div style={{
              fontSize: 9, marginTop: 4, marginBottom: 6,
              fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em',
              opacity: 0.7,
            }}>{s.sub}</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 18,
              color: size === s.id ? '#fff' : 'var(--blast-blue)',
            }}>${s.price}</div>
          </button>
        ))}
      </div>

      <SectionLabel>Trouble spots <span style={{ color: 'var(--blast-mute)', textTransform: 'none', letterSpacing: 0 }}>(optional)</span></SectionLabel>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10, marginBottom: 22 }}>
        {['Oil stains', 'Rust', 'Tire marks', 'Mildew', 'Gum', 'Leaf tannin'].map(s => {
          const on = stains.includes(s);
          return (
            <button key={s} onClick={() => toggleStain(s)} style={{
              background: on ? 'var(--blast-ink)' : '#fff',
              color: on ? 'var(--blast-bone)' : 'var(--blast-ink)',
              border: on ? 'none' : '1px solid var(--blast-line)',
              borderRadius: 999, padding: '8px 14px', cursor: 'pointer',
              fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 13,
              letterSpacing: '-0.01em',
            }}>{on ? '✓ ' : ''}{s}</button>
          );
        })}
      </div>

      <div style={{
        background: 'rgba(25,71,229,0.06)', border: '1px solid rgba(25,71,229,0.18)',
        borderRadius: 16, padding: 14,
        fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.5,
        color: 'var(--blast-ink)', letterSpacing: '0.02em',
      }}>
        <strong style={{ color: 'var(--blast-blue)' }}>HEADS UP —</strong> Quote is an estimate. Tech will confirm on arrival before starting. No charge if you cancel after seeing the final number.
      </div>
    </div>
  );
}

function Counter({ value, onChange, accent }) {
  const Btn = ({ children, onClick, disabled }) => (
    <button onClick={onClick} disabled={disabled} style={{
      width: 32, height: 32, borderRadius: 50, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
      background: disabled ? 'rgba(7,8,12,0.04)' : 'var(--blast-ink)',
      color: disabled ? 'rgba(7,8,12,0.25)' : 'var(--blast-bone)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{children}</button>
  );
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      background: value > 0 ? 'rgba(25,71,229,0.08)' : 'transparent',
      padding: value > 0 ? '4px 6px' : '4px 0',
      borderRadius: 999,
    }}>
      <Btn onClick={() => onChange(value - 1)} disabled={value === 0}>
        <Icon.Minus s={16}/>
      </Btn>
      <div style={{
        minWidth: 18, textAlign: 'center',
        fontFamily: 'var(--font-display)', fontSize: 18,
        color: value > 0 ? 'var(--blast-blue)' : 'var(--blast-ink)',
      }}>{value}</div>
      <Btn onClick={() => onChange(value + 1)}>
        <Icon.Plus s={16}/>
      </Btn>
    </div>
  );
}

// ── STEP 1: SCHEDULE ──────────────────────────
function StepSchedule({ viewYear, viewMonth, setViewYear, setViewMonth, date, setDate, slot, setSlot, accent, today, storeVersion }) {
  const cells = useMemo(() => monthGrid(viewYear, viewMonth), [viewYear, viewMonth]);
  const isPast = (d) => {
    if (!d) return true;
    const cell = new Date(viewYear, viewMonth, d);
    const t = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    return cell < t;
  };
  const isToday = (d) =>
    d && viewYear === today.getFullYear() && viewMonth === today.getMonth() && d === today.getDate();
  const isSel = (d) =>
    d && date && date.y === viewYear && date.m === viewMonth && date.d === d;

  // Day is bookable iff operator has set at least one available slot AND not all are booked.
  const hasSlot = (d) => {
    if (!d || isPast(d)) return false;
    const key = window.BlastStore.dateKey({ y: viewYear, m: viewMonth, d });
    const slots = window.BlastStore.getSlotsForDate(key);
    if (!slots.length) return false;
    const booked = window.BlastStore.bookedSlotsForDate(key);
    return slots.some(s => !booked.includes(s));
  };

  function shiftMonth(delta) {
    let m = viewMonth + delta;
    let y = viewYear;
    if (m < 0) { m = 11; y--; }
    if (m > 11) { m = 0; y++; }
    setViewMonth(m); setViewYear(y);
  }

  // Slot availability — operator-set; subtract already booked.
  const seedSlots = useMemo(() => {
    if (!date) return [];
    const key = window.BlastStore.dateKey(date);
    const opSlots = window.BlastStore.getSlotsForDate(key);
    const booked = window.BlastStore.bookedSlotsForDate(key);
    return getTimeSlots().filter(t => opSlots.includes(t)).map((t, i) => ({
      time: t,
      avail: !booked.includes(t),
      hot: i === 0 && opSlots.length > 1,
    }));
  }, [date, storeVersion]);

  return (
    <div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, margin: '6px 0 18px',
        letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1,
      }}>Pick a day.<br/>Pick a window.</h2>

      <div style={{
        background: '#fff', border: '1px solid var(--blast-line)',
        borderRadius: 22, padding: '16px 14px',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14, padding: '0 6px',
        }}>
          <button onClick={() => shiftMonth(-1)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.Chevron dir="left" s={16} c="var(--blast-ink)"/>
          </button>
          <div style={{
            fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16,
            letterSpacing: '-0.01em',
          }}>{MONTH_NAMES[viewMonth]} {viewYear}</div>
          <button onClick={() => shiftMonth(1)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.Chevron dir="right" s={16} c="var(--blast-ink)"/>
          </button>
        </div>
        <div className="cal-head">
          {DOW.map((d,i) => <div key={i}>{d}</div>)}
        </div>
        <div className="cal-grid">
          {cells.map((d, i) => (
            <button
              key={i}
              disabled={!d || isPast(d) || !hasSlot(d)}
              onClick={() => { setDate({ y: viewYear, m: viewMonth, d }); setSlot(null); }}
              className={`cal-cell ${isToday(d) ? 'today' : ''} ${isSel(d) ? 'selected' : ''}`}
              style={{
                visibility: d ? 'visible' : 'hidden',
              }}
            >
              {d}
              {hasSlot(d) && !isSel(d) && <span className="dot"/>}
            </button>
          ))}
        </div>
      </div>

      {date && (
        <div style={{ marginTop: 22 }} className="fade-up">
          <SectionLabel>
            {new Date(date.y, date.m, date.d).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
          </SectionLabel>
          <div style={{ display: 'grid', gap: 8, marginTop: 10 }}>
            {seedSlots.map(s => (
              <button key={s.time}
                disabled={!s.avail}
                onClick={() => setSlot(s.time)}
                style={{
                  background: slot === s.time ? 'var(--blast-blue)' :
                    !s.avail ? 'rgba(7,8,12,0.03)' : '#fff',
                  color: slot === s.time ? '#fff' :
                    !s.avail ? 'rgba(7,8,12,0.3)' : 'var(--blast-ink)',
                  border: slot === s.time ? 'none' : '1px solid var(--blast-line)',
                  borderRadius: 16, padding: '14px 16px',
                  cursor: s.avail ? 'pointer' : 'not-allowed',
                  display: 'flex', alignItems: 'center', gap: 12,
                  textAlign: 'left',
                }}>
                <Icon.Clock s={18} c="currentColor"/>
                <div style={{
                  flex: 1, fontFamily: 'var(--font-head)', fontWeight: 600,
                  fontSize: 15, letterSpacing: '-0.01em',
                }}>{s.time}</div>
                {!s.avail ? (
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    opacity: 0.7,
                  }}>Booked</span>
                ) : s.hot ? (
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    background: slot === s.time ? 'rgba(255,255,255,0.2)' : 'rgba(255,212,0,0.25)',
                    color: slot === s.time ? '#fff' : '#7A6700',
                    padding: '3px 8px', borderRadius: 4,
                  }}>2 left</span>
                ) : null}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── STEP 2: ADDRESS ───────────────────────────
function AddrField({ label, value, onChange, placeholder, type = 'text', maxLength }) {
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'var(--blast-mute)', marginBottom: 6, marginLeft: 4,
      }}>{label}</div>
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        maxLength={maxLength}
        style={{
          width: '100%', padding: '14px 16px',
          border: '1px solid var(--blast-line)', borderRadius: 16,
          background: '#fff',
          fontFamily: 'var(--font-ui)', fontSize: 16,
          color: 'var(--blast-ink)',
          outline: 'none',
        }}
        onFocus={e => e.target.style.borderColor = 'var(--blast-blue)'}
        onBlur={e => e.target.style.borderColor = 'var(--blast-line)'}
      />
    </label>
  );
}

function StepAddress({ address, setAddress, notes, setNotes, accessAck, setAccessAck, accent }) {
  return (
    <div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, margin: '6px 0 18px',
        letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1,
      }}>Where are<br/>your bins?</h2>

      <AddrField
        label="Street address"
        value={address.street}
        onChange={e => setAddress({ ...address, street: e.target.value })}
        placeholder="221B Baker St"
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <AddrField
          label="Unit / apt"
          value={address.unit}
          onChange={e => setAddress({ ...address, unit: e.target.value })}
          placeholder="—"
        />
        <AddrField
          label="ZIP"
          value={address.zip}
          onChange={e => setAddress({ ...address, zip: e.target.value.replace(/\D/g, '').slice(0, 5) })}
          placeholder="60302"
          maxLength={5}
        />
      </div>

      <div style={{ marginBottom: 14 }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--blast-mute)', marginBottom: 6, marginLeft: 4,
        }}>Bin location notes</div>
        <textarea
          value={notes}
          onChange={e => setNotes(e.target.value)}
          placeholder="Behind side gate, gate code 1492, friendly dog Rufus"
          rows={3}
          style={{
            width: '100%', padding: '14px 16px',
            border: '1px solid var(--blast-line)', borderRadius: 16,
            background: '#fff',
            fontFamily: 'var(--font-ui)', fontSize: 15,
            color: 'var(--blast-ink)', outline: 'none',
            resize: 'none',
          }}
        />
      </div>

      <button
        onClick={() => setAccessAck(!accessAck)}
        style={{
          display: 'flex', alignItems: 'flex-start', gap: 12,
          background: accessAck ? 'rgba(25,71,229,0.06)' : '#fff',
          border: `1px solid ${accessAck ? 'var(--blast-blue)' : 'var(--blast-line)'}`,
          borderRadius: 18, padding: '14px 16px',
          cursor: 'pointer', textAlign: 'left',
          width: '100%',
        }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6, flexShrink: 0,
          background: accessAck ? 'var(--blast-blue)' : 'transparent',
          border: `2px solid ${accessAck ? 'var(--blast-blue)' : 'rgba(7,8,12,0.2)'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginTop: 2,
        }}>
          {accessAck && <Icon.Check s={14} c="#fff"/>}
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--blast-ink)' }}>
          <div style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14, marginBottom: 2 }}>
            Bins will be at the curb by 7 AM
          </div>
          <span style={{ color: 'var(--blast-mute)' }}>
            Or unlocked + accessible. We won't open closed gates without a code.
          </span>
        </div>
      </button>
    </div>
  );
}

// ── STEP 3: WAIVER ────────────────────────────
function StepWaiver({ signed, setSigned, initials, setInitials, waiverAck, setWaiverAck, accent }) {
  const sigRef = React.useRef(null);
  const drawingRef = React.useRef(false);

  // gate signing — can only sign if all 3 checkboxes accepted
  const canSign = waiverAck.liability && waiverAck.surface && waiverAck.photos;
  function start(e) {
    if (!canSign) return;
    drawingRef.current = true;
    const c = sigRef.current;
    const ctx = c.getContext('2d');
    const r = c.getBoundingClientRect();
    const x = (e.touches?.[0]?.clientX ?? e.clientX) - r.left;
    const y = (e.touches?.[0]?.clientY ?? e.clientY) - r.top;
    ctx.beginPath();
    ctx.moveTo(x, y);
    setSigned(true);
  }
  function move(e) {
    if (!drawingRef.current) return;
    e.preventDefault();
    const c = sigRef.current;
    const ctx = c.getContext('2d');
    const r = c.getBoundingClientRect();
    const x = (e.touches?.[0]?.clientX ?? e.clientX) - r.left;
    const y = (e.touches?.[0]?.clientY ?? e.clientY) - r.top;
    ctx.lineTo(x, y);
    ctx.strokeStyle = '#07080C';
    ctx.lineWidth = 2.2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();
  }
  function end() { drawingRef.current = false; }
  function clear() {
    const c = sigRef.current;
    if (!c) return;
    c.getContext('2d').clearRect(0, 0, c.width, c.height);
    setSigned(false);
  }

  React.useEffect(() => {
    const c = sigRef.current;
    if (!c) return;
    // size canvas to its display
    const r = c.getBoundingClientRect();
    c.width = r.width * 2;
    c.height = r.height * 2;
    c.getContext('2d').scale(2, 2);
  }, []);

  const items = [
    { k: 'liability', t: 'Liability', b: 'I release BLAST CO. from damage caused by water spray, residual soap, or odor recovery times beyond 24h.' },
    { k: 'surface', t: 'Surface', b: 'My bin and surrounding pavement can withstand pressurized water. I have removed any decals or stickers I want to keep.' },
    { k: 'photos', t: 'Photos', b: 'BLAST CO. may photograph my bin (no address visible) for before/after marketing, including drag sliders like the one on the home page.' },
  ];

  const allChecked = waiverAck.liability && waiverAck.surface && waiverAck.photos;

  return (
    <div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, margin: '6px 0 6px',
        letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1,
      }}>Sign the<br/>waiver.</h2>
      <p style={{
        fontSize: 13, color: 'var(--blast-mute)', lineHeight: 1.5,
        margin: '0 0 18px',
      }}>
        Boring legal stuff. Quick to read. Required before we point a hose at your property.
      </p>

      <div style={{
        background: '#fff', border: '1px solid var(--blast-line)',
        borderRadius: 22, padding: '4px 16px 8px', marginBottom: 14,
      }}>
        {items.map((it, i) => (
          <button key={it.k}
            onClick={() => setWaiverAck({ ...waiverAck, [it.k]: !waiverAck[it.k] })}
            style={{
              display: 'flex', alignItems: 'flex-start', gap: 12,
              width: '100%', textAlign: 'left',
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '14px 0',
              borderTop: i === 0 ? 'none' : '1px solid var(--blast-line)',
            }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, flexShrink: 0,
              background: waiverAck[it.k] ? 'var(--blast-blue)' : 'transparent',
              border: `2px solid ${waiverAck[it.k] ? 'var(--blast-blue)' : 'rgba(7,8,12,0.2)'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginTop: 1,
            }}>
              {waiverAck[it.k] && <Icon.Check s={14} c="#fff"/>}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14,
                letterSpacing: '-0.01em', marginBottom: 2,
                color: 'var(--blast-ink)',
              }}>{it.t}</div>
              <div style={{ fontSize: 12, color: 'var(--blast-mute)', lineHeight: 1.45 }}>
                {it.b}
              </div>
            </div>
          </button>
        ))}
      </div>

      <SectionLabel>Sign here</SectionLabel>
      <div style={{
        marginTop: 8,
        background: '#fff', border: `1.5px dashed ${signed ? 'var(--blast-blue)' : 'rgba(7,8,12,0.18)'}`,
        borderRadius: 18, padding: 8, position: 'relative',
        height: 140,
      }}>
        <canvas
          ref={sigRef}
          onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
          onTouchStart={start} onTouchMove={move} onTouchEnd={end}
          style={{
            width: '100%', height: '100%', display: 'block',
            cursor: 'crosshair', touchAction: 'none',
          }}
        />
        {!signed && (
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(7,8,12,0.25)',
          }}>Draw your signature with finger or mouse</div>
        )}
        <button onClick={clear} style={{
          position: 'absolute', top: 6, right: 8,
          background: 'transparent', border: 'none',
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'var(--blast-mute)', cursor: 'pointer',
        }}>Clear</button>
      </div>

      <div style={{ marginTop: 14 }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--blast-mute)', marginBottom: 6, marginLeft: 4,
        }}>Type your initials</div>
        <input
          value={initials}
          onChange={e => setInitials(e.target.value.toUpperCase().slice(0, 4))}
          placeholder="A.B."
          style={{
            width: '100%', padding: '14px 16px',
            border: '1px solid var(--blast-line)', borderRadius: 16,
            background: '#fff',
            fontFamily: 'var(--font-display)', fontSize: 22,
            color: 'var(--blast-ink)', outline: 'none',
            letterSpacing: '0.1em',
          }}
          onFocus={e => e.target.style.borderColor = 'var(--blast-blue)'}
          onBlur={e => e.target.style.borderColor = 'var(--blast-line)'}
        />
      </div>

      {!allChecked && (
        <div style={{
          marginTop: 14,
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'rgba(180,80,40,0.9)', textAlign: 'center',
        }}>
          ⚠ Check all three before signing
        </div>
      )}
    </div>
  );
}

// ── STEP 4: CONFIRM ───────────────────────────
function StepConfirm({ bins, size, frequency, date, slot, address, total, savings, accent, initials }) {
  const dateStr = date ? new Date(date.y, date.m, date.d).toLocaleDateString('en-US', {
    weekday: 'long', month: 'short', day: 'numeric',
  }) : '';
  const totalBins = bins.trash + bins.recycle + bins.compost;

  const Row = ({ label, value }) => (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '12px 0', borderTop: '1px solid var(--blast-line)',
      gap: 12,
    }}>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--blast-mute)', flexShrink: 0,
      }}>{label}</span>
      <span style={{
        fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 14,
        textAlign: 'right', letterSpacing: '-0.01em',
      }}>{value}</span>
    </div>
  );

  return (
    <div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontSize: 30, margin: '6px 0 18px',
        letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 1,
      }}>Look it<br/>over.</h2>

      <div style={{
        background: '#fff', border: '1px solid var(--blast-line)',
        borderRadius: 22, padding: '6px 18px 14px',
      }}>
        <Row label="Service" value={`${totalBins} × ${size} gal hydroblast`} />
        <Row label="Plan" value={
          frequency === 'one' ? 'One-time' :
          frequency === 'monthly' ? 'Monthly · 15% off' :
          frequency === 'biweekly' ? 'Every 2 weeks · 25% off' :
          frequency === 'yearly' ? 'Yearly tune-up · 45% off' :
          'Weekly · 40% off'
        } />
        <Row label="First wash" value={`${dateStr} · ${slot}`} />
        <Row label="Address" value={`${address.street}${address.unit ? ' #' + address.unit : ''}, ${address.zip}`} />
        {initials && <Row label="Signed" value={`${initials.toUpperCase()} · ${new Date().toLocaleDateString()}`} />}
      </div>

      <div style={{
        marginTop: 14, padding: '14px 16px',
        background: 'rgba(255,212,0,0.18)', borderRadius: 18,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <Icon.Shield s={20} c="#7A6700"/>
        <div style={{ fontSize: 12, lineHeight: 1.4, color: '#5C4F00' }}>
          <strong>Smell-free guarantee.</strong> Not happy in 24h? We re-blast for free.
        </div>
      </div>

      <div style={{
        marginTop: 14, padding: '16px 18px',
        background: 'var(--blast-ink)', color: 'var(--blast-bone)',
        borderRadius: 18,
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: accent, marginBottom: 6,
        }}>Payment</div>
        <div style={{
          fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16,
          letterSpacing: '-0.01em', marginBottom: 4,
        }}>Cash and Venmo accepted in person.</div>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1,
          marginTop: 8,
        }}>Your total is ${total}.</div>
      </div>

      <div style={{
        marginTop: 12,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        color: 'var(--blast-mute)', textAlign: 'center', lineHeight: 1.6,
      }}>
        No card on file · Pay the crew when we show up · Cancel anytime
      </div>
    </div>
  );
}

// ── TRACKER ──────────────────────────────────
function TrackerScreen({ booking, onHome, accent, operatorUpdates = [], operatorPhase }) {
  const [progress, setProgress] = useStateB(0);

  useEffectB(() => {
    const id = setInterval(() => setProgress(p => Math.min(100, p + 1.2)), 80);
    return () => clearInterval(id);
  }, []);

  const phases = [
    { p: 0, label: 'Booked' },
    { p: 30, label: 'Prepping' },
    { p: 65, label: 'On our way' },
    { p: 100, label: 'Blasting' },
  ];
  // Operator override beats auto-progress
  const phaseIdx = operatorPhase != null
    ? operatorPhase
    : phases.reduce((acc, ph, i) => progress >= ph.p ? i : acc, 0);
  const currentPhase = phases[phaseIdx];
  const displayProgress = operatorPhase != null ? phases[phaseIdx].p : progress;

  const dateStr = booking?.date ? new Date(booking.date.y, booking.date.m, booking.date.d).toLocaleDateString('en-US', {
    weekday: 'short', month: 'short', day: 'numeric',
  }) : 'Tomorrow';

  return (
    <div style={{ background: 'var(--blast-paper)', minHeight: '100%', paddingBottom: 40 }}>
      {/* Hero confirm */}
      <div style={{
        background: 'var(--blast-ink)', color: 'var(--blast-bone)',
        padding: '70px 22px 32px',
        borderBottomLeftRadius: 36, borderBottomRightRadius: 36,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(circle at 80% 0%, ${accent}33, transparent 50%)`,
          pointerEvents: 'none',
        }}/>
        <div style={{
          width: 56, height: 56, borderRadius: 50,
          background: accent, color: 'var(--blast-ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 18, position: 'relative',
        }}>
          <Icon.Check s={30}/>
        </div>
        <BigHeadline size={42}>
          <span>You're</span><br/>
          <span style={{ color: accent }}>locked in.</span>
        </BigHeadline>
        <div style={{
          marginTop: 20,
          fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.5)',
        }}>Confirmation #BLST-{Math.floor(Math.random() * 90000) + 10000}</div>
        <div style={{
          marginTop: 6,
          fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 22,
          letterSpacing: '-0.01em',
        }}>
          {dateStr} · {booking?.slot || '9–11 AM'}
        </div>
      </div>

      {/* Status */}
      <div style={{ padding: '24px 22px 0' }}>
        <SectionLabel>Live status</SectionLabel>
        <div style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 22, padding: '18px 18px 16px',
          marginTop: 10,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 14,
          }}>
            <div style={{
              fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 18,
              letterSpacing: '-0.01em',
            }}>{currentPhase?.label}</div>
            <div className="chip live">LIVE</div>
          </div>

          {/* progress bar */}
          <div style={{
            height: 6, background: 'rgba(7,8,12,0.06)',
            borderRadius: 3, overflow: 'hidden', marginBottom: 16,
          }}>
            <div style={{
              width: `${displayProgress}%`, height: '100%',
              background: 'var(--blast-blue)',
              transition: 'width .3s ease',
            }}/>
          </div>

          {/* phase markers */}
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {phases.map((ph, i) => (
              <div key={ph.p} style={{
                textAlign: 'center', flex: 1,
                opacity: i <= phaseIdx ? 1 : 0.3,
              }}>
                <div style={{
                  width: 8, height: 8, borderRadius: 50,
                  background: i <= phaseIdx ? 'var(--blast-blue)' : 'rgba(7,8,12,0.2)',
                  margin: '0 auto 6px',
                }}/>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9,
                  letterSpacing: '0.06em', textTransform: 'uppercase',
                  color: 'var(--blast-mute)',
                }}>{ph.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Live updates feed from operator */}
      <div style={{ padding: '24px 22px 0' }}>
        <SectionLabel>Updates from the crew</SectionLabel>
        <div style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 22, padding: '6px 18px', marginTop: 10,
        }}>
          {operatorUpdates.length === 0 ? (
            <div style={{
              padding: '18px 0',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.06em', textTransform: 'uppercase',
              color: 'var(--blast-mute)', textAlign: 'center',
            }}>
              No updates yet — we'll text you when we head out
            </div>
          ) : (
            operatorUpdates.map((u, i) => (
              <div key={i} style={{
                display: 'flex', gap: 12, padding: '14px 0',
                borderBottom: i < operatorUpdates.length - 1 ? '1px solid var(--blast-line)' : 'none',
              }}>
                <div style={{
                  width: 8, height: 8, borderRadius: 50, marginTop: 8,
                  background: i === 0 ? accent : 'rgba(7,8,12,0.15)',
                  flexShrink: 0,
                  boxShadow: i === 0 ? `0 0 0 4px ${accent}33` : 'none',
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 14,
                    letterSpacing: '-0.005em', lineHeight: 1.4,
                    color: 'var(--blast-ink)',
                  }}>{u.text}</div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '0.08em', textTransform: 'uppercase',
                    color: 'var(--blast-mute)', marginTop: 4,
                  }}>{u.who} · {u.time}</div>
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Truck card / map */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{
          background: 'var(--blast-blue)', color: '#fff',
          borderRadius: 22, padding: 18,
          position: 'relative', overflow: 'hidden',
        }}>
          {/* mini map */}
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.18,
            backgroundImage: `
              linear-gradient(${accent} 1px, transparent 1px),
              linear-gradient(90deg, ${accent} 1px, transparent 1px)
            `,
            backgroundSize: '24px 24px',
          }}/>
          {/* roads */}
          <svg viewBox="0 0 320 100" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            opacity: 0.35,
          }}>
            <path d="M0,80 Q120,80 160,40 T320,30" stroke={accent} strokeWidth="3" fill="none"/>
            <path d="M40,0 L40,100 M280,0 L280,100" stroke="rgba(255,255,255,0.4)" strokeWidth="1"/>
          </svg>
          {/* truck dot */}
          <div style={{
            position: 'absolute',
            top: `${30 + Math.sin(progress / 12) * 6}%`,
            left: `${10 + progress * 0.7}%`,
            width: 18, height: 18, borderRadius: 50,
            background: '#fff',
            border: `3px solid ${accent}`,
            animation: 'truckPulse 1.6s infinite',
            transition: 'all .2s linear',
          }}/>

          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 14,
              background: 'rgba(255,255,255,0.2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon.Truck s={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.7)',
              }}>Your crew</div>
              <div style={{
                fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16,
                letterSpacing: '-0.01em',
              }}>Henry · neighborhood crew</div>
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 26,
              color: accent, lineHeight: 1,
            }}>
              {Math.max(1, Math.round((100 - progress) * 0.18))}<span style={{ fontSize: 12, marginLeft: 2 }}>min</span>
            </div>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div style={{ padding: '20px 22px', display: 'grid', gap: 8 }}>
        <button style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 18, padding: '14px 18px',
          display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
          fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 15,
          color: 'var(--blast-ink)', textAlign: 'left',
        }}>
          <Icon.Calendar s={20} c="var(--blast-blue)"/>
          <span style={{ flex: 1 }}>Add to calendar</span>
          <Icon.Chevron s={16} c="var(--blast-mute)"/>
        </button>
        <button style={{
          background: '#fff', border: '1px solid var(--blast-line)',
          borderRadius: 18, padding: '14px 18px',
          display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
          fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 15,
          color: 'var(--blast-ink)', textAlign: 'left',
        }}>
          <Icon.Phone s={20} c="var(--blast-blue)"/>
          <span style={{ flex: 1 }}>Text us</span>
          <Icon.Chevron s={16} c="var(--blast-mute)"/>
        </button>
        <button onClick={onHome} style={{
          background: 'var(--blast-ink)', color: 'var(--blast-bone)',
          border: 'none', borderRadius: 18, padding: '14px 18px',
          cursor: 'pointer',
          fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15,
          marginTop: 8,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Back to home <Icon.Arrow s={16}/>
        </button>
      </div>
    </div>
  );
}

window.BookingScreen = BookingScreen;
window.TrackerScreen = TrackerScreen;