// Hotel Marindela — the four pre-order screens.
// Receives { state, dispatch, palette, type } via props from App.

const { useState, useEffect, useRef, useMemo } = React;

// ═════════════════════════════════════════════════════════════════
// 1. WELCOME — the hook
// ═════════════════════════════════════════════════════════════════
function ScreenWelcome({ state, dispatch, palette: p, type: t }) {
  return (
    <div style={{
      position: 'relative', height: '100%', display: 'flex', flexDirection: 'column',
      background: p.bg, color: p.ink, overflowY: 'auto',
    }}>
      {/* Hero */}
      <div style={{ position: 'relative', flex: '1 1 320px', minHeight: 260 }}>
        <HeroSlot id="hero-welcome" height="100%" palette={p}
          label="Restaurant hero · Ocean terrace at golden hour" />
        <HeroScrim from="rgba(20,18,14,0.78)" />
        {/* top scrim for MARINDELA + room */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 120,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%)',
          pointerEvents: 'none', zIndex: 1,
        }} />

        {/* top bar — minimal: hotel mark + room */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, padding: '18px 24px 0',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          color: '#FBF8F1', zIndex: 2,
        }}>
          <div style={{
            fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 16, letterSpacing: '0.2em',
          }}>MARINDELA</div>
          <div style={{
            fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
            opacity: 0.85, fontWeight: 500,
          }}>Room {state.family.roomNumber}</div>
        </div>

        {/* hero copy */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, padding: '24px 24px 24px',
          color: '#FBF8F1', zIndex: 2,
        }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
            opacity: 0.7, marginBottom: 12,
          }}>Pelagia Restaurant · Dinner</div>
          <h1 style={{
            margin: 0, fontFamily: t.display, fontWeight: t.displayWeight,
            fontSize: 38, lineHeight: 1.03, letterSpacing: '-0.01em',
          }}>
            Welcome,<br/>
            <span style={{ fontStyle: 'italic' }}>{state.family.name} family.</span>
          </h1>
        </div>
      </div>

      {/* Lower card */}
      <div style={{
        background: p.bg, padding: '22px 24px 26px',
        display: 'flex', flexDirection: 'column', gap: 14, flexShrink: 0,
      }}>
        <p style={{
          margin: 0, fontSize: 14.5, lineHeight: 1.5, color: p.inkSoft,
        }}>
          Pre-order your family's dinner now and your children's plates will be
          waiting when you sit down.
        </p>

        <div style={{
          display: 'flex', gap: 24, alignItems: 'center',
          padding: '12px 0 2px', borderTop: `1px solid ${p.line}`,
        }}>
          <Detail label="Party" value={`${state.family.size} guests`} palette={p} />
          <Detail label="Dining" value={`${state.family.adults} adults · ${state.family.kids} kids`} palette={p} />
        </div>

        <Button kind="primary" size="md" full palette={p}
          onClick={() => dispatch({ type: 'go', screen: 'menu' })}>
          Begin pre-order
          <IconChev size={16} />
        </Button>
      </div>
    </div>
  );
}

function Detail({ label, value, palette: p }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      <Eyebrow palette={p}>{label}</Eyebrow>
      <span style={{ fontSize: 14, fontWeight: 500 }}>{value}</span>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// 2. MENU — the choice
// ═════════════════════════════════════════════════════════════════
function ScreenMenu({ state, dispatch, palette: p, type: t }) {
  const [activeCat, setActiveCat] = useState(window.MENU[0].id);
  const scrollRef = useRef(null);
  const sectionRefs = useRef({});

  const totalItems = useMemo(() => Object.values(state.cart).reduce((a, b) => a + b, 0), [state.cart]);
  const totalCost = useMemo(() => {
    let sum = 0;
    for (const cat of window.MENU) for (const it of cat.items) sum += (state.cart[it.id] || 0) * it.price;
    return sum;
  }, [state.cart]);

  // flat list of items added (in order added)
  const addedItems = useMemo(() => {
    const map = {};
    for (const cat of window.MENU) for (const it of cat.items) map[it.id] = it;
    return state.order.map(id => ({ ...map[id], qty: state.cart[id] })).filter(i => i.qty > 0);
  }, [state.order, state.cart]);

  // scroll sync
  const onTabClick = (id) => {
    setActiveCat(id);
    const el = sectionRefs.current[id];
    if (el && scrollRef.current) {
      const top = el.offsetTop - 64;
      scrollRef.current.scrollTo({ top, behavior: 'smooth' });
    }
  };
  const onScroll = () => {
    const s = scrollRef.current;
    if (!s) return;
    let current = window.MENU[0].id;
    for (const cat of window.MENU) {
      const el = sectionRefs.current[cat.id];
      if (el && el.offsetTop - 80 <= s.scrollTop) current = cat.id;
    }
    if (current !== activeCat) setActiveCat(current);
  };

  return (
    <div style={{
      position: 'relative', height: '100%', display: 'flex', flexDirection: 'column',
      background: p.bg, color: p.ink, overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: '18px 20px 12px', background: p.bg, zIndex: 5,
        borderBottom: `1px solid ${p.line}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <button onClick={() => dispatch({ type: 'go', screen: 'welcome' })} aria-label="Back"
            style={{
              width: 38, height: 38, borderRadius: 999, border: `1px solid ${p.line}`,
              background: p.surface, color: p.ink, display: 'flex', alignItems: 'center',
              justifyContent: 'center', cursor: 'pointer',
            }}>
            <IconBack size={18} />
          </button>
          <div style={{ textAlign: 'center', flex: 1 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.inkSoft, marginBottom: 1 }}>Pelagia · Dinner</div>
            <div style={{ fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 18 }}>The Menu</div>
          </div>
          <div style={{ width: 38 }} />
        </div>

        {/* Mini-map of added items */}
        <MiniMap items={addedItems} onRemove={(id) => dispatch({ type: 'remove', id })} palette={p} type={t} />

        {/* Category tabs */}
        <div style={{
          display: 'flex', gap: 6, marginTop: 14, overflowX: 'auto',
          scrollbarWidth: 'none', msOverflowStyle: 'none',
        }} className="hide-scroll">
          {window.MENU.map(cat => {
            const active = activeCat === cat.id;
            return (
              <button key={cat.id} onClick={() => onTabClick(cat.id)}
                style={{
                  padding: '8px 14px', borderRadius: 999, border: 0, cursor: 'pointer',
                  background: active ? p.ink : 'transparent', color: active ? p.bg : p.inkSoft,
                  fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', flexShrink: 0,
                  transition: 'background .2s ease, color .2s ease',
                  fontFamily: 'inherit', letterSpacing: '0.01em',
                }}>
                {cat.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Scrollable item list */}
      <div ref={scrollRef} onScroll={onScroll} style={{
        flex: 1, overflowY: 'auto', paddingBottom: totalItems ? 96 : 24,
      }}>
        {window.MENU.map((cat) => (
          <section key={cat.id}
            ref={(el) => sectionRefs.current[cat.id] = el}
            style={{ padding: '24px 20px 6px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
              <h2 style={{
                margin: 0, fontFamily: t.display, fontWeight: t.displayWeight,
                fontSize: 26, letterSpacing: '-0.01em',
              }}>{cat.label}</h2>
              <Eyebrow palette={p}>{cat.items.length} dishes</Eyebrow>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {cat.items.map((it) => (
                <MenuCard key={it.id} item={it} qty={state.cart[it.id] || 0}
                  onInc={() => dispatch({ type: 'add', id: it.id })}
                  onDec={() => dispatch({ type: 'dec', id: it.id })}
                  palette={p} type={t} />
              ))}
            </div>
          </section>
        ))}
        <div style={{ height: 24 }} />
      </div>

      {/* Floating cart bar */}
      {totalItems > 0 && (
        <div style={{
          position: 'absolute', left: 14, right: 14, bottom: 14, zIndex: 6,
          background: p.ink, color: p.bg, borderRadius: 18,
          padding: '12px 14px 12px 18px', display: 'flex', alignItems: 'center',
          gap: 12, boxShadow: '0 14px 32px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.1)',
          animation: 'slideUp .35s ease',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 1, flex: 1 }}>
            <span style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.6 }}>Your table</span>
            <span style={{ fontSize: 14, fontWeight: 500 }}>{totalItems} {totalItems === 1 ? 'dish' : 'dishes'} · {money(totalCost)}</span>
          </div>
          <button onClick={() => dispatch({ type: 'go', screen: 'verify' })} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: p.bg, color: p.ink, border: 0, padding: '10px 16px',
            borderRadius: 999, fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
            cursor: 'pointer',
          }}>
            Review
            <IconChev size={14} />
          </button>
        </div>
      )}
    </div>
  );
}

// ── Menu card ──────────────────────────────────────────────────
function MenuCard({ item, qty, onInc, onDec, palette: p, type: t }) {
  const added = qty > 0;
  return (
    <div style={{
      display: 'flex', gap: 14, padding: '12px 12px 12px 12px',
      borderRadius: 18, background: added ? p.accentSoft : p.surface,
      border: `1px solid ${added ? p.accent + '44' : p.line}`,
      alignItems: 'center', transition: 'background .2s ease, border-color .2s ease',
    }}>
      <DishArtwork swatch={item.swatch} image={item.image} size={64} ringed={added} accent={p.accent} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: t.display, fontWeight: t.displayWeight,
          fontSize: 17, lineHeight: 1.15, marginBottom: 3,
        }}>{item.name}</div>
        <div style={{
          fontSize: 12.5, lineHeight: 1.4, color: p.inkSoft,
          overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box',
          WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
        }}>{item.desc}</div>
        <div style={{ fontSize: 13, fontWeight: 500, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>
          {money(item.price)}
        </div>
      </div>
      <Stepper qty={qty} onInc={onInc} onDec={onDec} palette={p} />
    </div>
  );
}

// ── Mini-map (order overview) ──────────────────────────────────
function MiniMap({ items, onRemove, palette: p, type: t }) {
  if (items.length === 0) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
        background: p.surface, borderRadius: 14, border: `1px dashed ${p.line}`,
        color: p.inkSoft, fontSize: 12.5,
      }}>
        <IconLeaf size={16} />
        <span>Your table is empty — start with a starter or pick something for the kids.</span>
      </div>
    );
  }
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px',
      background: p.surface, borderRadius: 14, border: `1px solid ${p.line}`,
      overflowX: 'auto', scrollbarWidth: 'none',
    }} className="hide-scroll">
      <Eyebrow palette={p}>Table</Eyebrow>
      <div style={{ width: 1, height: 22, background: p.line, marginRight: 4 }} />
      {items.map((it, i) => (
        <div key={it.id + i} style={{ position: 'relative', flexShrink: 0 }}>
          <DishArtwork swatch={it.swatch} image={it.image} size={32} />
          {it.qty > 1 && (
            <div style={{
              position: 'absolute', bottom: -2, right: -2,
              minWidth: 16, height: 16, borderRadius: 8, padding: '0 4px',
              background: p.ink, color: p.bg, fontSize: 10, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1.5px solid ${p.surface}`,
            }}>{it.qty}</div>
          )}
          <button onClick={() => onRemove(it.id)} aria-label={`Remove ${it.name}`}
            style={{
              position: 'absolute', top: -4, right: -4,
              width: 16, height: 16, borderRadius: 8, padding: 0,
              background: p.surface, border: `1px solid ${p.line}`, color: p.inkSoft,
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
            <IconClose size={9} />
          </button>
        </div>
      ))}
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// 3. VERIFY — order check + arrival timing
// ═════════════════════════════════════════════════════════════════
function ScreenVerify({ state, dispatch, palette: p, type: t }) {
  const totalItems = Object.values(state.cart).reduce((a, b) => a + b, 0);
  const undercount = totalItems < state.family.size;
  const [showNudge, setShowNudge] = useState(undercount && !state.nudgeDismissed);

  const itemMap = useMemo(() => {
    const m = {};
    for (const cat of window.MENU) for (const it of cat.items) m[it.id] = it;
    return m;
  }, []);
  const groupedItems = useMemo(() => {
    return state.order
      .map(id => ({ ...itemMap[id], qty: state.cart[id] }))
      .filter(i => i.qty > 0);
  }, [state.order, state.cart, itemMap]);

  const subtotal = groupedItems.reduce((a, i) => a + i.qty * i.price, 0);

  return (
    <div style={{
      position: 'relative', height: '100%', display: 'flex', flexDirection: 'column',
      background: p.bg, color: p.ink,
    }}>
      {/* header */}
      <div style={{
        padding: '18px 20px 14px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', borderBottom: `1px solid ${p.line}`,
      }}>
        <button onClick={() => dispatch({ type: 'go', screen: 'menu' })} aria-label="Back"
          style={{
            width: 38, height: 38, borderRadius: 999, border: `1px solid ${p.line}`,
            background: p.surface, color: p.ink, display: 'flex', alignItems: 'center',
            justifyContent: 'center', cursor: 'pointer',
          }}>
          <IconBack size={18} />
        </button>
        <div style={{ textAlign: 'center', flex: 1 }}>
          <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.inkSoft, marginBottom: 1 }}>Step 2 of 3</div>
          <div style={{ fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 18 }}>Confirm Arrival</div>
        </div>
        <div style={{ width: 38 }} />
      </div>

      {/* body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '22px 20px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        {/* Time selection */}
        <section>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 22 }}>
              When will you arrive?
            </h3>
            <Eyebrow palette={p}>Tonight</Eyebrow>
          </div>
          <TimePicker value={state.arrival} onChange={(v) => dispatch({ type: 'setArrival', value: v })} palette={p} />
        </section>

        {/* Order summary */}
        <section>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 22 }}>
              Your table
            </h3>
            <button onClick={() => dispatch({ type: 'go', screen: 'menu' })} style={{
              background: 'transparent', border: 0, color: p.inkSoft, fontSize: 12.5,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4,
              fontFamily: 'inherit',
            }}>
              <IconEdit size={13} /> Edit
            </button>
          </div>
          <div style={{
            background: p.surface, borderRadius: 18, border: `1px solid ${p.line}`,
            padding: '4px 16px', display: 'flex', flexDirection: 'column',
          }}>
            {groupedItems.map((it, idx) => (
              <div key={it.id} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
                borderBottom: idx === groupedItems.length - 1 ? 'none' : `1px solid ${p.line}`,
              }}>
                <DishArtwork swatch={it.swatch} image={it.image} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.2 }}>{it.name}</div>
                  <div style={{ fontSize: 12, color: p.inkSoft, marginTop: 2 }}>×{it.qty} · {money(it.price * it.qty)}</div>
                </div>
              </div>
            ))}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '14px 0 14px', borderTop: `1px solid ${p.line}`,
            }}>
              <span style={{ fontSize: 13, color: p.inkSoft }}>Subtotal · charged to room {state.family.roomNumber}</span>
              <span style={{ fontSize: 16, fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{money(subtotal)}</span>
            </div>
          </div>
        </section>
      </div>

      {/* CTA */}
      <div style={{
        padding: '14px 20px 20px', borderTop: `1px solid ${p.line}`, background: p.bg,
      }}>
        <Button kind="accent" size="lg" full palette={p}
          onClick={() => dispatch({ type: 'confirm' })}>
          Confirm reservation
        </Button>
      </div>

      {/* Nudge overlay */}
      {showNudge && (
        <NudgeSheet
          partySize={state.family.size}
          itemCount={totalItems}
          onAddMore={() => { setShowNudge(false); dispatch({ type: 'dismissNudge' }); dispatch({ type: 'go', screen: 'menu' }); }}
          onProceed={() => { setShowNudge(false); dispatch({ type: 'dismissNudge' }); }}
          palette={p} type={t}
        />
      )}
    </div>
  );
}

// ── Time picker — sliding pill grid ────────────────────────────
function TimePicker({ value, onChange, palette: p }) {
  // Times every 15 min, 18:30 → 21:30
  const times = useMemo(() => {
    const arr = [];
    for (let h = 18; h <= 21; h++) {
      for (const m of [0, 15, 30, 45]) {
        if (h === 18 && m < 30) continue;
        if (h === 21 && m > 30) continue;
        arr.push(`${h}:${m.toString().padStart(2, '0')}`);
      }
    }
    return arr;
  }, []);

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6,
    }}>
      {times.map(tm => {
        const active = value === tm;
        return (
          <button key={tm} onClick={() => onChange(tm)}
            style={{
              padding: '12px 8px', borderRadius: 12, border: `1px solid ${active ? p.ink : p.line}`,
              background: active ? p.ink : p.surface, color: active ? p.bg : p.ink,
              fontFamily: 'inherit', fontSize: 14, fontWeight: 500, cursor: 'pointer',
              fontVariantNumeric: 'tabular-nums', transition: 'all .15s ease',
            }}>
            {tm}
          </button>
        );
      })}
    </div>
  );
}

// ── Nudge sheet — friendly check-in ────────────────────────────
function NudgeSheet({ partySize, itemCount, onAddMore, onProceed, palette: p, type: t }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 10,
      background: 'rgba(20,18,14,0.5)', backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      animation: 'fadeIn .25s ease',
    }}>
      <div style={{
        width: '100%', background: p.bg, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '28px 24px 26px', boxShadow: '0 -10px 40px rgba(0,0,0,0.25)',
        animation: 'slideUp .35s cubic-bezier(0.22,1,0.36,1)',
      }}>
        <div style={{
          width: 36, height: 4, borderRadius: 2, background: p.line,
          margin: '0 auto 18px',
        }} />
        <div style={{
          width: 48, height: 48, borderRadius: 24, background: p.accentSoft,
          color: p.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 14,
        }}>
          <IconSpark size={22} />
        </div>
        <h2 style={{ margin: 0, fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 26, lineHeight: 1.1 }}>
          Just checking in
        </h2>
        <p style={{ margin: '10px 0 0', fontSize: 14.5, lineHeight: 1.55, color: p.inkSoft }}>
          You've added <strong style={{ color: p.ink }}>{itemCount} {itemCount === 1 ? 'dish' : 'dishes'}</strong> for a party of <strong style={{ color: p.ink }}>{partySize}</strong>.
          Want to add a few more before we send it to the kitchen?
        </p>
        <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
          <Button kind="ghost" full palette={p} onClick={onProceed}>That's everything</Button>
          <Button kind="primary" full palette={p} onClick={onAddMore}>Add more</Button>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// 4. CONFIRMATION — peace of mind
// ═════════════════════════════════════════════════════════════════
function ScreenConfirm({ state, dispatch, palette: p, type: t }) {
  const [revealed, setRevealed] = useState(false);
  useEffect(() => {
    const id = setTimeout(() => setRevealed(true), 80);
    return () => clearTimeout(id);
  }, []);

  const itemMap = useMemo(() => {
    const m = {};
    for (const cat of window.MENU) for (const it of cat.items) m[it.id] = it;
    return m;
  }, []);
  const items = state.order.map(id => ({ ...itemMap[id], qty: state.cart[id] })).filter(i => i.qty > 0);
  const total = items.reduce((a, i) => a + i.price * i.qty, 0);
  const reservationCode = 'MAR-' + state.arrival.replace(':', '') + '-' + state.family.roomNumber;

  return (
    <div style={{
      position: 'relative', height: '100%', display: 'flex', flexDirection: 'column',
      background: p.bg, color: p.ink, overflow: 'hidden',
    }}>
      {/* Decorative top */}
      <div style={{
        position: 'relative', padding: '34px 24px 28px', background: p.accent, color: '#FBF8F1',
        overflow: 'hidden',
      }}>
        {/* Concentric arcs */}
        <svg viewBox="0 0 400 400" style={{
          position: 'absolute', top: -120, right: -160, width: 460, height: 460,
          opacity: revealed ? 0.22 : 0, transition: 'opacity 0.8s ease',
        }}>
          {[60, 90, 120, 150, 180, 210].map((r, i) => (
            <circle key={r} cx="200" cy="200" r={r} fill="none" stroke="#FBF8F1" strokeWidth="0.6"
              style={{
                opacity: revealed ? 1 : 0,
                transform: revealed ? 'scale(1)' : 'scale(0.6)',
                transformOrigin: '200px 200px',
                transition: `opacity 0.6s ease ${i * 0.08}s, transform 0.8s cubic-bezier(0.22,1,0.36,1) ${i * 0.08}s`,
              }} />
          ))}
        </svg>

        {/* checkmark */}
        <div style={{
          width: 56, height: 56, borderRadius: 28, background: 'rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18,
          transform: revealed ? 'scale(1)' : 'scale(0.4)',
          opacity: revealed ? 1 : 0,
          transition: 'all 0.5s cubic-bezier(0.22,1,0.36,1)',
        }}>
          <IconCheck size={28} sw={2.2} />
        </div>
        <Eyebrow palette={{ inkSoft: '#FBF8F1AA' }}>Reservation confirmed</Eyebrow>
        <h1 style={{
          margin: '6px 0 0', fontFamily: t.display, fontWeight: t.displayWeight,
          fontSize: 32, lineHeight: 1.08, letterSpacing: '-0.01em',
        }}>
          We'll see you<br/>
          <span style={{ fontStyle: 'italic' }}>at {state.arrival}.</span>
        </h1>
      </div>

      {/* Details list */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '22px 20px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <ReassureCard palette={p} type={t} kidCount={state.family.kids} />

        <DetailGrid palette={p} type={t}>
          <DetailRow palette={p} icon={<IconClock size={18} />} label="Arrival"
            value={`${state.arrival} · ${state.family.arrivalDay}`} />
          <DetailRow palette={p} icon={<IconPin size={18} />} label="Table"
            value="Ocean Terrace · Table 14" />
          <DetailRow palette={p} icon={<IconWalk size={18} />} label="From your room"
            value={`${state.family.walkMinutes}-min walk · Room ${state.family.roomNumber}`} />
        </DetailGrid>

        <section>
          <Eyebrow palette={p}>Your order</Eyebrow>
          <div style={{
            marginTop: 10, background: p.surface, borderRadius: 18, border: `1px solid ${p.line}`,
            padding: '6px 16px',
          }}>
            {items.map((it, idx) => (
              <div key={it.id} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0',
                borderBottom: idx === items.length - 1 ? 'none' : `1px solid ${p.line}`,
              }}>
                <DishArtwork swatch={it.swatch} image={it.image} size={32} />
                <div style={{ flex: 1, fontSize: 14 }}>{it.name}</div>
                <div style={{ fontSize: 13, color: p.inkSoft, fontVariantNumeric: 'tabular-nums' }}>×{it.qty}</div>
              </div>
            ))}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '12px 0', borderTop: `1px solid ${p.line}`,
            }}>
              <span style={{ fontSize: 13, color: p.inkSoft }}>Total · room {state.family.roomNumber}</span>
              <span style={{ fontSize: 16, fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{money(total)}</span>
            </div>
          </div>
          <div style={{
            marginTop: 10, fontSize: 11.5, color: p.inkSoft, letterSpacing: '0.05em',
            fontVariantNumeric: 'tabular-nums',
          }}>
            Reservation · {reservationCode}
          </div>
        </section>

        <div style={{ display: 'flex', gap: 10 }}>
          <Button kind="soft" full palette={p}><IconCal size={16} /> Add to calendar</Button>
          <Button kind="ghost" full palette={p} onClick={() => dispatch({ type: 'go', screen: 'menu' })}>
            <IconEdit size={15} /> Modify
          </Button>
        </div>

        <button onClick={() => dispatch({ type: 'reset' })} style={{
          background: 'transparent', border: 0, color: p.inkSoft, cursor: 'pointer',
          fontSize: 12.5, textAlign: 'center', padding: '4px 0 0', fontFamily: 'inherit',
          textDecoration: 'underline', textUnderlineOffset: 4, textDecorationColor: `${p.inkSoft}55`,
        }}>
          Start a new order
        </button>
      </div>
    </div>
  );
}

function ReassureCard({ palette: p, type: t, kidCount }) {
  return (
    <div style={{
      background: p.surface, borderRadius: 18, border: `1px solid ${p.line}`,
      padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'flex-start',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 18, background: p.accentSoft, color: p.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <IconSpark size={18} />
      </div>
      <div>
        <div style={{ fontFamily: t.display, fontWeight: t.displayWeight, fontSize: 16, marginBottom: 2 }}>
          The kids' plates come first
        </div>
        <div style={{ fontSize: 12.5, lineHeight: 1.45, color: p.inkSoft }}>
          {kidCount > 0
            ? `Your ${kidCount} kids' dishes will arrive within 5 minutes of you sitting down — no waiting, no fussing.`
            : `Everything is timed to your arrival — settle in and we'll handle the rest.`}
        </div>
      </div>
    </div>
  );
}

function DetailGrid({ palette: p, children }) {
  return (
    <div style={{
      background: p.surface, borderRadius: 18, border: `1px solid ${p.line}`,
      padding: '4px 16px',
    }}>{children}</div>
  );
}
function DetailRow({ palette: p, icon, label, value }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0',
      borderBottom: `1px solid ${p.line}`,
    }} className="detail-row">
      <div style={{ color: p.accent }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.inkSoft, marginBottom: 2 }}>{label}</div>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{value}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenWelcome, ScreenMenu, ScreenVerify, ScreenConfirm });