function Compose() {
  const { m, draft, setSize, add, removeAt, randomFill, clearDraft, commitDraft, avail, open } = useShop();
  const { size, items } = draft;
  const left = size - items.length;
  const boxW = m ? 330 : (size >= 10 ? 600 : size === 5 ? 560 : 520);
  return (
    <div className="page grain" style={{ background: '#24150A', padding: m ? '40px 16px 70px' : '70px 44px 100px' }}>
      <Steps at="compose" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center', textAlign: 'center', marginBottom: m ? 30 : 46 }}>
        <Title size={m ? 22 : 46} lg>Compose ta box</Title>
        <span style={{ fontSize: 18 }}>choisis la taille, puis sélectionne tes cookies</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'minmax(0,1.25fr) minmax(0,1fr)', gap: m ? 34 : 60, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, position: m ? 'static' : 'sticky', top: 130 }}>
          <div className="sizes">
            {SIZES.map(n => (
              <button key={n} className={'sz' + (n === size ? ' on' : '')} onClick={() => setSize(n)}>
                <span className="mono">{n}</span><span>{euroShort(sizePrice(n))}</span>
              </button>
            ))}
            <button className={'sz' + (size > 8 ? ' on' : '')} onClick={() => setSize(size > 8 ? size : 10)}>
              <span className="mono">{size > 8 ? size : '+'}</span><span>{size > 8 ? euroShort(sizePrice(size)) : 'plus'}</span>
            </button>
          </div>
          {size > 8 ? (
            <div className="stepper" style={{ height: 48 }}>
              <button style={{ height: 48 }} onClick={() => setSize(Math.max(9, size - 1))} aria-label="Moins">−</button>
              <span className="mono" style={{ minWidth: 110, fontSize: 12 }}>{size} cookies</span>
              <button style={{ height: 48 }} onClick={() => setSize(Math.min(MAX_BOX, size + 1))} aria-label="Plus">+</button>
            </div>
          ) : null}
          <div style={{ padding: m ? '10px 0' : '20px 0', display: 'grid', placeItems: 'center', minHeight: m ? 0 : 440 }}>
            <BoxView size={size} items={items} width={boxW} onRemove={removeAt} onDropCookie={id => add(id, 1, true)} />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost btn-sm" disabled={!open || !left} onClick={randomFill}>Au hasard</button>
            <button className="btn btn-ghost btn-sm" disabled={!items.length} onClick={clearDraft}>Vider</button>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span className="mono" style={{ fontSize: 12, color: '#E2C07A' }}>Les parfums</span>
            <span className="mono" style={{ fontSize: 12 }}>{items.length}/{size}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: m ? 'repeat(3,minmax(0,1fr))' : 'repeat(auto-fill,minmax(min(100%,190px),1fr))', gap: m ? 8 : 12 }}>
            {FLAVORS.map(f => {
              const n = avail(f.id); const dis = !n || !open || !left;
              return (
                <button key={f.id} className={'pick' + (m ? ' pick-m' : '')} disabled={dis} draggable={!dis} onDragStart={e => e.dataTransfer.setData('text/plain', f.id)} onClick={() => add(f.id, 1, true)}>
                  <Cookie f={f} size={m ? 64 : 76} style={{ filter: n ? 'none' : 'grayscale(.7) brightness(.6)' }} />
                  <span style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: m ? 'center' : 'flex-start', minWidth: 0 }}>
                    <span className="mono" style={{ fontSize: m ? 9 : 12, lineHeight: 1.4, textAlign: m ? 'center' : 'left' }}>{f.name}</span>
                    {!m ? <span style={{ fontSize: 14, opacity: .75, textAlign: 'left', lineHeight: 1.3 }}>{f.desc}</span> : null}
                    <StockTag n={n} />
                  </span>
                </button>
              );
            })}
          </div>
          <div className="summary">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}><span className="mono" style={{ fontSize: 14 }}>{boxLabel(size)}</span><span className="mono" style={{ fontSize: 22 }}>{euro(sizePrice(size))}</span></div>
            <span style={{ fontSize: 16, opacity: .85, minHeight: 22 }}>{items.length ? summarize(items).join(' · ') : 'Ta box est vide.'}</span>
            <span className="mono" style={{ fontSize: 10, opacity: .6 }}>Clique sur un cookie dans la box pour le retirer</span>
          </div>
        </div>
      </div>
      <ComposeBar />
    </div>
  );
}

function ComposeBar() {
  const { m, draft, open, commitDraft, cart, pieces, go, removeBox, total } = useShop();
  const { size, items } = draft; const left = size - items.length; const full = open && left === 0;
    return (
    <div className="cbar" style={{ bottom: m ? 76 : 0, margin: m ? '34px -16px -70px' : '60px -44px -100px', padding: m ? '12px 16px' : '16px 44px', flexDirection: 'column', alignItems: 'stretch', gap: 12 }}>
      {cart.length && m ? (
        <button className="bare mono" onClick={() => go('cart')} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: 32, fontSize: 10, color: '#E2C07A', borderBottom: '1px solid rgba(244,240,231,.1)', paddingBottom: 8 }}><span>{cart.length} box dans ton panier · {euro(total)}</span><span>Voir →</span></button>
      ) : cart.length ? (
        <div className="hscroll" style={{ display: 'flex', alignItems: 'center', gap: 10, overflowX: 'auto' }}>
          <span className="mono" style={{ fontSize: 10, color: '#E2C07A', whiteSpace: 'nowrap' }}>Dans ton panier</span>
          {cart.map(b => (
            <span key={b.id} className="minibox">
              <BoxView size={b.size} items={b.items} width={b.size >= 8 ? 92 : 66} />
              <span className="mono" style={{ fontSize: 10 }}>{boxLabel(b.size)}</span>
              <button className="minix" onClick={() => removeBox(b.id)} aria-label="Retirer">×</button>
            </span>
          ))}
          <span className="mono" style={{ fontSize: 11, whiteSpace: 'nowrap', marginLeft: 'auto' }}>{pieces} cookies · {euro(total)}</span>
        </div>
      ) : null}
      <div style={{ display: 'flex', alignItems: m ? 'stretch' : 'center', flexDirection: m ? 'column' : 'row', gap: m ? 10 : 16 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 14, maxWidth: m ? 'none' : 420 }}>
            <span className="mono" style={{ fontSize: 12, whiteSpace: 'nowrap' }}>{boxLabel(size)} · {full ? <span style={{ color: '#9BC46A' }}>complète ✓</span> : `${items.length}/${size}`}</span>
            <span className="mono" style={{ fontSize: 14, color: '#E2C07A', whiteSpace: 'nowrap', letterSpacing: '.06em' }}>{euro(sizePrice(size))}</span>
          </div>
          <div style={{ height: 4, borderRadius: 4, background: 'rgba(244,240,231,.15)', overflow: 'hidden', maxWidth: m ? 'none' : 420 }}><div style={{ width: (items.length / size * 100) + '%', height: '100%', background: full ? '#9BC46A' : '#E2C07A', transition: 'width .3s, background .3s' }}></div></div>
        </div>
        {full ? (
          <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row-reverse', alignItems: 'center', gap: m ? 6 : 16 }}>
            <button className="btn" style={m ? { width: '100%', height: 52 } : null} onClick={() => commitDraft(false)}>Ajouter au panier →</button>
            <button className={m ? 'textbtn mono' : 'btn btn-ghost'} style={m ? { minHeight: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, borderBottom: 0, opacity: .85 } : null} onClick={() => commitDraft(true)}>+ Ajouter et composer une autre box</button>
          </div>
        ) : cart.length && !items.length ? <button className="btn" style={m ? { width: '100%', height: 52 } : null} onClick={() => go('cart')}>Voir le panier · {euro(total)} →</button>
          : <button className="btn" style={m ? { width: '100%', height: 52 } : null} disabled>{!open ? 'Commandes fermées' : `Encore ${left} cookie${left > 1 ? 's' : ''}`}</button>}
      </div>
    </div>
  );
}

function Rule({ ok, children }) {
  return <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 16 }}><span className="mono" style={{ width: 22, height: 22, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 11, background: ok ? '#7E8C5E' : 'rgba(244,240,231,.15)', color: '#fff' }}>{ok ? '✓' : '–'}</span><span style={{ opacity: ok ? 1 : .65 }}>{children}</span></div>;
}

function Cart() {
  const { m, cart, go, editBox, removeBox, pieces, open, total } = useShop();
  if (!cart.length) return (
    <div className="page grain" style={{ background: '#24150A', padding: m ? '70px 22px 90px' : '110px 44px 140px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 30, textAlign: 'center' }}>
      <div style={{ transform: 'rotate(-4deg)' }}><BoxView size={4} items={[]} width={m ? 240 : 300} /></div>
      <Title size={m ? 24 : 34} lg>Ta box est vide.</Title>
      <span style={{ fontSize: 18 }}>Ça se règle en deux minutes.</span>
      <button className="btn" disabled={!open} onClick={() => go('compose')}>Compose ta box</button>
    </div>
  );
  return (
    <div className="page grain" style={{ background: '#24150A', padding: m ? '44px 16px 80px' : '80px 44px 110px' }}>
      <Steps at="cart" />
      <Title size={m ? 28 : 46} lg style={{ marginBottom: m ? 30 : 50 }}>Panier</Title>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'minmax(0,1.6fr) minmax(0,1fr)', gap: m ? 30 : 50, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {cart.map(b => (
            <div key={b.id} className="cart-row" style={{ alignItems: 'center', gap: m ? 16 : 26, padding: m ? 14 : 22 }}>
              <BoxView size={b.size} items={b.items} width={m ? (b.size >= 8 ? 150 : 120) : 240} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}><span className="mono" style={{ fontSize: 15 }}>{boxLabel(b.size)}</span><span className="mono" style={{ fontSize: 15 }}>{euro(boxPrice(b))}</span></div>
                <span style={{ fontSize: m ? 14 : 16, lineHeight: 1.5, opacity: .9 }}>{summarize(b.items).join(' · ')}</span>
                <div style={{ display: 'flex', gap: 18, marginTop: 6 }}><button className="textbtn mono" onClick={() => editBox(b.id)}>Modifier</button><button className="textbtn mono" onClick={() => removeBox(b.id)}>Supprimer</button></div>
              </div>
            </div>
          ))}
          <button className="addbox mono" disabled={!open} onClick={() => go('compose')}>+ Ajouter une autre box</button>
        </div>
        <div className="summary" style={{ position: m ? 'static' : 'sticky', top: 130 }}>
          <span className="mono" style={{ fontSize: 12, color: '#E2C07A' }}>Récap</span>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{pieces} cookies</span><span className="mono">{euro(total)}</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '16px 0', borderTop: '1px solid rgba(244,240,231,.15)', borderBottom: '1px solid rgba(244,240,231,.15)' }}>
            <Rule ok={pieces >= CFG.minPieces}>Minimum {CFG.minPieces} cookies</Rule>
            <Rule ok={pieces >= CFG.deliveryMin}>{pieces >= CFG.deliveryMin ? 'Livraison disponible*' : 'Livraison disponible dès ' + CFG.deliveryMin + ' pièces*'}</Rule>
            <Rule ok>Paiement à la remise</Rule>
          </div>
          <span style={{ fontSize: 13, opacity: .6 }}>* Livraison autour de {CFG.delivery.label} : {dlvText()}, calculés selon ton adresse. En dessous de {CFG.deliveryMin} pièces, retrait uniquement.</span>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}><span className="mono" style={{ fontSize: 13 }}>Total</span><span className="mono" style={{ fontSize: 26 }}>{euro(total)}</span></div>
          <button className="btn" style={{ width: '100%' }} disabled={pieces < CFG.minPieces || !open} onClick={() => go('checkout')}>Passer commande</button>
        </div>
      </div>
    </div>
  );
}

const dlvText = () => { const t = (CFG.delivery && CFG.delivery.tiers) || []; return t.map((x, i) => (x.fee > 0 ? euroShort(x.fee) : 'gratuit') + ' jusqu’à ' + x.km + ' km').join(' · '); };
function Field({ label, error, children }) {
  return <label className={'field' + (error ? ' err' : '')}><span className="mono">{label}</span>{children}{error ? <em>{error}</em> : null}</label>;
}

function Checkout() {
  const { m, cart, pieces, go, placeOrder, total } = useShop();
  const canDeliver = pieces >= CFG.deliveryMin;
  const [mode, setMode] = useState('pickup');
  const [day, setDay] = useState(DAYS[0].id);
  const slot = SLOTS[mode];
  const [f, setF] = useState({ first: '', last: '', email: '', phone: '', street: '', zip: '', city: '', note: '' });
  const [q, setQ] = useState({ st: 'idle', fee: 0, km: 0, err: '' });
  const [ok, setOk] = useState(false);
  const [tried, setTried] = useState(false);
  const [busy, setBusy] = useState(false);
  const [srvErr, setSrvErr] = useState('');
  const addrKey = mode === 'delivery' && f.street.trim() && /^\d{4}$/.test(f.zip.trim()) && f.city.trim() ? [f.street, f.zip, f.city].map(x => x.trim()).join('|') : '';
  useEffect(() => {
    if (!addrKey) { setQ({ st: 'idle', fee: 0, km: 0, err: '' }); return; }
    setQ({ st: 'load', fee: 0, km: 0, err: '' });
    let dead = false;
    const t = setTimeout(() => {
      fetch(CFG.delivery.api, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ street: f.street, zip: f.zip, city: f.city }) })
        .then(r => r.json().then(j => ({ r, j })))
        .then(({ r, j }) => { if (dead) return; setQ(r.ok ? { st: 'ok', fee: j.fee, km: j.km, err: '' } : { st: 'err', fee: 0, km: 0, err: j.message || 'Adresse non valide.' }); })
        .catch(() => { if (!dead) setQ({ st: 'err', fee: 0, km: 0, err: 'Connexion impossible, réessaie.' }); });
    }, 700);
    return () => { dead = true; clearTimeout(t); };
  }, [addrKey]);
  if (!cart.length) { setTimeout(() => go('cart'), 0); return null; }
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const fee = mode === 'delivery' && q.st === 'ok' ? q.fee : 0;
  const grand = total + fee;
  const errs = {};
  if (!f.first.trim()) errs.first = 'Ton prénom';
  if (!f.last.trim()) errs.last = 'Ton nom';
  if (!/^\S+@\S+\.\S+$/.test(f.email)) errs.email = 'Email invalide';
  if (f.phone.replace(/\D/g, '').length < 9) errs.phone = 'Numéro invalide';
  if (mode === 'delivery') {
    if (!f.street.trim()) errs.street = 'Adresse requise';
    if (!/^\d{4}$/.test(f.zip.trim())) errs.zip = 'Code postal à 4 chiffres';
    if (!f.city.trim()) errs.city = 'Commune requise';
    if (q.st === 'err') errs.street = q.err;
    else if (q.st !== 'ok' && !errs.street && !errs.zip && !errs.city) errs.street = 'Calcul de la livraison en cours…';
  }
  if (!ok) errs.ok = 'À cocher';
  const E = k => (tried ? errs[k] : null);
  const submit = () => { setTried(true); setSrvErr(''); if (busy || Object.keys(errs).length) return; setBusy(true); placeOrder({ mode, day, slot, ...f }).then(r => { setBusy(false); if (!r.ok) setSrvErr(r.error); }); };
  const H = ({ n, t }) => <div style={{ display: 'flex', gap: 16, alignItems: 'baseline', marginBottom: 18 }}><span className="mono" style={{ fontSize: 12, color: '#E2C07A' }}>{n}</span><span className="mono" style={{ fontSize: m ? 15 : 18 }}>{t}</span></div>;
  return (
    <div className="page grain" style={{ background: '#24150A', padding: m ? '44px 16px 80px' : '80px 44px 110px' }}>
      <Steps at="checkout" />
      <Title size={m ? 28 : 46} lg style={{ marginBottom: m ? 30 : 50 }}>Presque fini.</Title>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'minmax(0,1.6fr) minmax(0,1fr)', gap: m ? 36 : 60, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 40 : 54 }}>
          <div>
            <H n="01" t="Retrait ou livraison" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <button className={'opt' + (mode === 'pickup' ? ' on' : '')} onClick={() => setMode('pickup')}><span className="mono">Retrait</span><span>Point de retrait communiqué par mail</span></button>
              <button className={'opt' + (mode === 'delivery' ? ' on' : '')} disabled={!canDeliver} onClick={() => setMode('delivery')}><span className="mono">Livraison</span><span>{canDeliver ? 'Autour de ' + CFG.delivery.label + ' · ' + dlvText() : `Disponible dès ${CFG.deliveryMin} pièces* (tu en as ${pieces})`}</span></button>
            </div>
          </div>
          <div>
            <H n="02" t="Pour quand ce week-end" />
            <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
              {DAYS.map(d => <button key={d.id} className={'daytab' + (day === d.id ? ' on' : '')} onClick={() => setDay(d.id)}><span className="mono">{d.label}</span><span>{d.date}</span></button>)}
            </div>
            <div className="payinfo" style={{ background: 'rgba(244,240,231,.07)', boxShadow: 'inset 0 0 0 1px rgba(244,240,231,.14)', margin: 0 }}>
              <span className="mono" style={{ fontSize: 13 }}>{mode === 'pickup' ? 'Retrait · ' + SLOTS.pickup : 'Livraison · ' + SLOTS.delivery}</span>
              <span style={{ fontSize: 16, lineHeight: 1.5, opacity: .85 }}>L’heure exacte te sera confirmée par mail.</span>
            </div>
          </div>
          <div>
            <H n="03" t="Tes infos" />
            <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 14 }}>
              <Field label="Prénom" error={E('first')}><input value={f.first} onChange={set('first')} /></Field>
              <Field label="Nom" error={E('last')}><input value={f.last} onChange={set('last')} /></Field>
              <Field label="Email" error={E('email')}><input type="email" value={f.email} onChange={set('email')} placeholder="pour ta confirmation" /></Field>
              <Field label="Téléphone" error={E('phone')}><input type="tel" value={f.phone} onChange={set('phone')} placeholder="+32" /></Field>
              {mode === 'delivery' ? <>
                <div style={{ gridColumn: '1 / -1' }}><Field label="Rue et numéro" error={E('street')}><input value={f.street} onChange={set('street')} autoComplete="street-address" /></Field></div>
                <Field label="Code postal" error={E('zip')}><input inputMode="numeric" value={f.zip} onChange={set('zip')} placeholder="1800" autoComplete="postal-code" /></Field>
                <Field label="Commune" error={E('city')}><input value={f.city} onChange={set('city')} autoComplete="address-level2" /></Field>
                <div style={{ gridColumn: '1 / -1', fontSize: 15, opacity: .85 }}>{q.st === 'load' ? 'Calcul des frais de livraison…' : q.st === 'ok' ? `${q.km.toString().replace('.', ',')} km de ${CFG.delivery.label} · livraison ${q.fee > 0 ? euro(q.fee) : 'gratuite'}` : 'Entre ton adresse complète pour calculer la livraison.'}</div>
              </> : null}
              <div style={{ gridColumn: '1 / -1' }}><Field label="Un mot pour nous (optionnel)"><textarea rows="3" value={f.note} onChange={set('note')}></textarea></Field></div>
            </div>
          </div>
          <div>
            <H n="04" t="Paiement" />
            <div className="payinfo"><span className="mono" style={{ fontSize: 13 }}>Rien à payer en ligne</span><span style={{ fontSize: 17, lineHeight: 1.5 }}>Tu règles {euro(grand)}{mode === 'delivery' ? ' (livraison incluse) à la livraison' : ' au retrait'} de ta commande.</span></div>
            <label className={'check' + (E('ok') ? ' err' : '')}><input type="checkbox" checked={ok} onChange={e => setOk(e.target.checked)} /><span>Je confirme ma pré-commande et je m’engage à payer à la remise, conformément à notre <a href="#" onClick={e => e.preventDefault()}>politique</a>.</span></label>
          </div>
        </div>
        <div className="summary" style={{ position: m ? 'static' : 'sticky', top: 130 }}>
          <span className="mono" style={{ fontSize: 12, color: '#E2C07A' }}>Ta commande</span>
          {cart.map(b => <div key={b.id} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}><div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="mono" style={{ fontSize: 13 }}>{boxLabel(b.size)}</span><span className="mono" style={{ fontSize: 13 }}>{euro(boxPrice(b))}</span></div><span style={{ fontSize: 15, opacity: .8 }}>{summarize(b.items).join(' · ')}</span></div>)}
          <div style={{ borderTop: '1px solid rgba(244,240,231,.15)', paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 16 }}>
            <span>{mode === 'pickup' ? 'Retrait' : 'Livraison'} · {DAYS.find(d => d.id === day).label} · {slot}</span>
            {mode === 'delivery' ? <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Frais de livraison</span><span className="mono" style={{ fontSize: 13 }}>{q.st === 'ok' ? (q.fee > 0 ? euro(q.fee) : 'Gratuite') : '—'}</span></div> : null}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}><span className="mono" style={{ fontSize: 13 }}>À payer à la remise</span><span className="mono" style={{ fontSize: 24 }}>{euro(grand)}</span></div>
          <button className="btn" style={{ width: '100%' }} disabled={busy} onClick={submit}>{busy ? 'Envoi en cours…' : 'Confirmer ma pré-commande'}</button>
          {srvErr ? <em className="errtxt" style={{ textAlign: 'center' }}>{srvErr}</em> : null}
          {mode === 'delivery' ? <span style={{ fontSize: 13, opacity: .6 }}>Frais de livraison calculés selon la distance depuis {CFG.delivery.label} : {dlvText()}.</span> : null}
          {tried && Object.keys(errs).length ? <em className="errtxt" style={{ textAlign: 'center' }}>Il manque quelques infos.</em> : null}
        </div>
      </div>
    </div>
  );
}

function Confirm() {
  const { m, order, go } = useShop();
  if (!order) { setTimeout(() => go('home'), 0); return null; }
  const d = DAYS.find(x => x.id === order.day);
  const when = `${d.label} ${d.date} · ${order.slot}`;
  const dash = <span style={{ display: 'block', borderTop: '2px dashed rgba(42,36,32,.5)', margin: '6px 0' }}></span>;
  return (
    <div className="page grain" style={{ background: '#24150A', padding: m ? '50px 16px 80px' : '80px 44px 110px' }}>
      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center', marginBottom: m ? 36 : 56 }}>
        <Title size={m ? 30 : 50} lg>{`Merci, ${order.first}.`}</Title>
        <span style={{ fontSize: 19 }}>Ta pré-commande est enregistrée.</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 30 : 50, alignItems: 'start', maxWidth: 1100, margin: '0 auto' }}>
        <div className="receipt" style={{ transform: m ? 'none' : 'rotate(-1.5deg)' }}>
          <img src="/wp-content/themes/crave/assets/img/logo-chocolate.png" alt="CRAVE." style={{ height: 46, alignSelf: 'center', filter: 'brightness(.45)' }} />
          <div style={{ textAlign: 'center', fontSize: 12, letterSpacing: '.2em' }}>COOKIES & PASTRIES · BRUXELLES</div>
          {dash}
          <div className="rl"><span>PRÉ-COMMANDE</span><span>{order.no}</span></div>
          <div className="rl"><span>{order.mode === 'pickup' ? 'RETRAIT' : 'LIVRAISON'}</span><span>{d.label.toUpperCase()}</span></div>
          <div className="rl"><span>CRÉNEAU</span><span>{order.slot}</span></div>
          <div className="rl" style={{ opacity: .7 }}><span>HEURE EXACTE</span><span>PAR MAIL</span></div>
          {dash}
          {order.boxes.map(b => <React.Fragment key={b.id}><div className="rl" style={{ fontWeight: 500 }}><span>{boxLabel(b.size).toUpperCase()}</span><span>{euro(boxPrice(b))}</span></div>{summarize(b.items).map(s => <div key={s} className="rl" style={{ opacity: .75, paddingLeft: 12 }}><span>{s.toUpperCase()}</span><span></span></div>)}</React.Fragment>)}
          {order.mode === 'delivery' ? <div className="rl"><span>LIVRAISON</span><span>{order.fee > 0 ? euro(order.fee) : 'GRATUITE'}</span></div> : null}
          {dash}
          <div className="rl" style={{ fontSize: 18, fontWeight: 500 }}><span>À PAYER À LA REMISE</span><span>{euro(order.grand)}</span></div>
          <div className="rl" style={{ fontSize: 18, fontWeight: 500 }}><span>TOTAL</span><span>WORTH IT.</span></div>
          {dash}
          <div style={{ height: 60, background: 'repeating-linear-gradient(90deg,#2A2420 0 3px,transparent 3px 6px,#2A2420 6px 7px,transparent 7px 11px,#2A2420 11px 15px,transparent 15px 17px)' }}></div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <span className="pill mono" style={{ alignSelf: 'flex-start' }}><i></i>Mail automatique envoyé</span>
          <div className="mail">
            <div className="mail-h"><span><b>De</b> CRAVE.</span><span><b>À</b> {order.email}</span><span><b>Objet</b> Ta pré-commande {order.no} est confirmée</span></div>
            <div style={{ padding: '26px 26px 30px', display: 'flex', flexDirection: 'column', gap: 14, color: '#2A1D12' }}>
              <img src="/wp-content/themes/crave/assets/img/logo-chocolate.png" alt="CRAVE." style={{ height: 30, alignSelf: 'flex-start', filter: 'brightness(.45)' }} />
              <span style={{ fontSize: 17, fontWeight: 400 }}>Hello {order.first},</span>
              <span style={{ fontSize: 16, lineHeight: 1.6, fontWeight: 400 }}>C’est noté : {order.pieces} cookies pour {order.mode === 'pickup' ? 'un retrait' : 'une livraison'} le {when} (heure exacte confirmée dans ce mail). {order.mode === 'pickup' ? 'L’adresse du point de retrait arrive dans ce mail.' : `On livre au ${order.street}, ${order.zip} ${order.city}.`}</span>
              <span style={{ fontSize: 16, lineHeight: 1.6, fontWeight: 400 }}>Tu paies {euro(order.grand)} à la remise{order.mode === 'delivery' ? ' (livraison incluse)' : ''}. Une question ? Réponds à ce mail ou DM {CFG.instagram}.</span>
              <span className="mono" style={{ fontSize: 11, color: '#8E2F3A' }}>See you this weekend.</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}><button className="btn" onClick={() => go('home')}>Retour à l’accueil</button><button className="btn btn-ghost" onClick={() => go('menu')}>Le menu</button></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Compose, Cart, Checkout, Confirm });