// Order drawer — add/customize a product before sending to the kitchen.
// Mobile-portrait, ~90% height bottom sheet with horizontal tabs.

const { DIAVOLA } = window;

// --- utils -----------------------------------------------------------------
const fmt = (n) => {
  const sign = n < 0 ? '−' : '';
  return sign + '€' + Math.abs(n).toFixed(2);
};
const fmtSigned = (n) => (n >= 0 ? '+' : '−') + '€' + Math.abs(n).toFixed(2);

// --- stepper (big touch) ---------------------------------------------------
function Stepper({ value, onChange, min = 0, max = 99, size = 'md' }) {
  const sizes = {
    md: { btn: 40, font: 18, w: 108 },
    lg: { btn: 48, font: 22, w: 132 },
  };
  const s = sizes[size];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center',
      height: s.btn, width: s.w,
      borderRadius: s.btn / 2,
      background: 'white',
      border: '1px solid var(--ink-200)',
      overflow: 'hidden',
    }} onClick={(e) => e.stopPropagation()}>
      <button
        onClick={() => onChange(Math.max(min, value - 1))}
        disabled={value <= min}
        style={{
          width: s.btn, height: s.btn,
          border: 'none', background: 'transparent',
          fontSize: s.font, fontWeight: 500,
          color: value <= min ? 'var(--ink-300)' : 'var(--ink-900)',
          cursor: value <= min ? 'default' : 'pointer',
        }}>−</button>
      <div style={{
        flex: 1, textAlign: 'center',
        fontSize: s.font - 2, fontWeight: 600,
        fontFamily: "'Geist Mono', monospace",
        color: 'var(--ink-900)',
      }}>{value}</div>
      <button
        onClick={() => onChange(Math.min(max, value + 1))}
        disabled={value >= max}
        style={{
          width: s.btn, height: s.btn,
          border: 'none', background: 'transparent',
          fontSize: s.font, fontWeight: 500,
          color: value >= max ? 'var(--ink-300)' : 'var(--ink-900)',
          cursor: value >= max ? 'default' : 'pointer',
        }}>+</button>
    </div>
  );
}

// --- checkmark icon --------------------------------------------------------
function Check({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 12.5L10 17.5L19 7.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function Chevron({ open, size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      style={{ transform: `rotate(${open ? 180 : 0}deg)`, transition: 'transform 180ms ease' }}>
      <path d="M6 9L12 15L18 9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// --- Row primitive (shared look across tabs) -------------------------------
function Row({ selected, onClick, left, right, children }) {
  return (
    <div
      onClick={onClick}
      style={{
        padding: '14px 16px',
        background: selected ? 'var(--brand-50)' : 'white',
        border: '1px solid ' + (selected ? 'var(--brand-200)' : 'var(--ink-100)'),
        borderRadius: 12,
        display: 'flex', alignItems: 'center', gap: 12,
        cursor: onClick ? 'pointer' : 'default',
        transition: 'background 120ms ease, border-color 120ms ease',
        minHeight: 60,
      }}
    >
      {left && <div style={{ flexShrink: 0 }}>{left}</div>}
      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
      {right && <div style={{ flexShrink: 0 }}>{right}</div>}
    </div>
  );
}

// --- Checkbox circle (selected / not) --------------------------------------
function CheckCircle({ selected, size = 26 }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      border: '2px solid ' + (selected ? 'var(--brand-500)' : 'var(--ink-300)'),
      background: selected ? 'var(--brand-500)' : 'white',
      color: 'white',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transition: 'all 120ms ease',
      flexShrink: 0,
    }}>
      {selected && <Check size={size * 0.65} />}
    </div>
  );
}

// --- Radio dot -------------------------------------------------------------
function RadioDot({ selected, size = 22 }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      border: '2px solid ' + (selected ? 'var(--brand-500)' : 'var(--ink-300)'),
      background: 'white',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      transition: 'all 120ms ease',
    }}>
      {selected && (
        <div style={{
          width: size - 10, height: size - 10,
          borderRadius: '50%',
          background: 'var(--brand-500)',
        }} />
      )}
    </div>
  );
}

// ===========================================================================
// QUICK OPTIONS TAB
// ===========================================================================
function QuickOptionsTab({ options, state, setState }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '4px 0' }}>
      {options.map(opt => {
        const qty = state[opt.id] || 0;
        const selected = qty > 0;
        return (
          <Row
            key={opt.id}
            selected={selected}
            onClick={opt.multi ? undefined : () => setState({ ...state, [opt.id]: selected ? 0 : 1 })}
            left={!opt.multi && <CheckCircle selected={selected} />}
            right={
              opt.multi ? (
                selected ? (
                  <Stepper value={qty} onChange={(v) => setState({ ...state, [opt.id]: v })} />
                ) : (
                  <button
                    onClick={(e) => { e.stopPropagation(); setState({ ...state, [opt.id]: 1 }); }}
                    style={{
                      height: 40, padding: '0 18px',
                      borderRadius: 20,
                      background: 'white',
                      border: '1.5px solid var(--ink-200)',
                      color: 'var(--ink-900)',
                      fontSize: 15, fontWeight: 600,
                      cursor: 'pointer',
                    }}
                  >Add</button>
                )
              ) : null
            }
          >
            <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-900)' }}>{opt.label}</div>
            {opt.price > 0 && (
              <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>
                +€{opt.price.toFixed(2)} {opt.multi ? 'each' : ''}
              </div>
            )}
          </Row>
        );
      })}
    </div>
  );
}

// ===========================================================================
// EXTRAS TAB — each row expands inline to pick a sub-option
// ===========================================================================
function ExtrasTab({ extras, state, setState, expandedId, setExpandedId }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '4px 0' }}>
      {extras.map(ex => {
        const selection = state[ex.id]; // { qty, subId } | undefined
        const selected = !!selection;
        const open = expandedId === ex.id;
        const subLabel = selection
          ? ex.subOptions.find(s => s.id === selection.subId)?.label
          : null;

        const toggle = () => {
          if (selected) {
            setState({ ...state, [ex.id]: undefined });
            if (open) setExpandedId(null);
          } else {
            // default to first sub-option, auto-expand so user can change it
            setState({ ...state, [ex.id]: { qty: 1, subId: ex.subOptions[0].id } });
            setExpandedId(ex.id);
          }
        };

        return (
          <div key={ex.id}>
            <Row
              selected={selected}
              onClick={toggle}
              left={<CheckCircle selected={selected} />}
              right={
                selected ? (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }} onClick={(e) => e.stopPropagation()}>
                    {ex.multi && (
                      <Stepper
                        value={selection.qty}
                        onChange={(v) => setState({ ...state, [ex.id]: v === 0 ? undefined : { ...selection, qty: v } })}
                      />
                    )}
                    <button
                      onClick={(e) => { e.stopPropagation(); setExpandedId(open ? null : ex.id); }}
                      style={{
                        height: 40, width: 40,
                        borderRadius: '50%',
                        background: 'white',
                        border: '1px solid var(--ink-200)',
                        color: 'var(--ink-700)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        cursor: 'pointer',
                      }}
                    >
                      <Chevron open={open} />
                    </button>
                  </div>
                ) : null
              }
            >
              <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-900)' }}>{ex.label}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>
                {ex.price > 0 ? `+€${ex.price.toFixed(2)}${ex.multi ? ' each' : ''}` : 'Included'}
                {subLabel && <span style={{ color: 'var(--brand-700)', fontWeight: 600 }}> · {subLabel}</span>}
              </div>
            </Row>

            {/* Inline sub-option picker */}
            {selected && open && (
              <div style={{
                margin: '6px 0 2px 16px',
                paddingLeft: 14,
                borderLeft: '2px solid var(--brand-200)',
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{
                  fontSize: 12, fontWeight: 600, color: 'var(--ink-500)',
                  textTransform: 'uppercase', letterSpacing: 0.6,
                  padding: '6px 2px 2px',
                }}>{ex.subLabel}</div>
                {ex.subOptions.map(sub => {
                  const isSel = selection.subId === sub.id;
                  return (
                    <Row
                      key={sub.id}
                      selected={isSel}
                      onClick={() => setState({ ...state, [ex.id]: { ...selection, subId: sub.id } })}
                      left={<RadioDot selected={isSel} />}
                    >
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div style={{ fontSize: 15, color: 'var(--ink-900)' }}>{sub.label}</div>
                        {sub.price > 0 && (
                          <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>+€{sub.price.toFixed(2)}</div>
                        )}
                      </div>
                    </Row>
                  );
                })}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ===========================================================================
// INGREDIENTS TAB — remove only
// ===========================================================================
function IngredientsTab({ ingredients, state, setState }) {
  return (
    <div>
      <div style={{
        padding: '10px 14px',
        background: 'var(--ink-100)',
        borderRadius: 10,
        fontSize: 13, color: 'var(--ink-700)',
        marginBottom: 12,
      }}>
        Tap to remove ingredients from this item.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {ingredients.map(ing => {
          const removed = !!state[ing.id];
          return (
            <Row
              key={ing.id}
              selected={false}
              onClick={() => setState({ ...state, [ing.id]: !removed })}
              right={
                <div style={{
                  height: 36, padding: '0 14px',
                  borderRadius: 18,
                  background: removed ? 'var(--alert-500)' : 'white',
                  border: '1.5px solid ' + (removed ? 'var(--alert-500)' : 'var(--ink-200)'),
                  color: removed ? 'white' : 'var(--ink-700)',
                  fontSize: 14, fontWeight: 600,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  transition: 'all 120ms ease',
                }}>
                  {removed ? 'Removed' : 'Remove'}
                </div>
              }
            >
              <div style={{
                fontSize: 16, fontWeight: 500,
                color: removed ? 'var(--ink-400)' : 'var(--ink-900)',
                textDecoration: removed ? 'line-through' : 'none',
              }}>{ing.label}</div>
            </Row>
          );
        })}
      </div>
    </div>
  );
}

// ===========================================================================
// PREFERENCES TAB — radio groups
// ===========================================================================
function PreferencesTab({ preferences, state, setState }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {preferences.map(pref => {
        const selected = state[pref.id];
        return (
          <div key={pref.id}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8,
              padding: '0 2px 10px',
            }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-900)' }}>{pref.label}</div>
              {pref.required && (
                <div style={{
                  fontSize: 11, fontWeight: 700,
                  color: 'var(--alert-500)',
                  textTransform: 'uppercase', letterSpacing: 0.6,
                }}>Required</div>
              )}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {pref.subOptions.map(sub => {
                const isSel = selected === sub.id;
                return (
                  <Row
                    key={sub.id}
                    selected={isSel}
                    onClick={() => setState({ ...state, [pref.id]: sub.id })}
                    left={<RadioDot selected={isSel} />}
                    right={
                      sub.price !== 0 ? (
                        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-500)' }}>
                          {fmtSigned(sub.price)}
                        </div>
                      ) : null
                    }
                  >
                    <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-900)' }}>{sub.label}</div>
                  </Row>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ===========================================================================
// NOTES TAB
// ===========================================================================
const QUICK_NOTES = ['No eye contact 😅', 'Table is in a hurry', 'Customer is allergic', 'Cut in smaller pieces', 'Leave box open'];

function NotesTab({ note, setNote }) {
  return (
    <div>
      <div style={{
        padding: '10px 14px',
        background: 'var(--ink-100)',
        borderRadius: 10,
        fontSize: 13, color: 'var(--ink-700)',
        marginBottom: 12,
      }}>
        Anything specific for the kitchen. Short and clear works best.
      </div>
      <textarea
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="e.g. Please cut in 12 slices, extra napkins..."
        rows={5}
        style={{
          width: '100%',
          padding: 14,
          fontSize: 16,
          fontFamily: 'inherit',
          color: 'var(--ink-900)',
          background: 'white',
          border: '1px solid var(--ink-200)',
          borderRadius: 12,
          resize: 'none',
          outline: 'none',
          boxSizing: 'border-box',
        }}
      />
      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: 0.6, marginTop: 20, marginBottom: 8 }}>
        Quick notes
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {QUICK_NOTES.map(q => (
          <button
            key={q}
            onClick={() => setNote(note ? `${note}\n${q}` : q)}
            style={{
              height: 38, padding: '0 14px',
              borderRadius: 19,
              background: 'white',
              border: '1px solid var(--ink-200)',
              color: 'var(--ink-700)',
              fontSize: 14, fontWeight: 500,
              cursor: 'pointer',
            }}
          >+ {q}</button>
        ))}
      </div>
    </div>
  );
}

// ===========================================================================
// SUMMARY TAB — final config review
// ===========================================================================
function SummaryTab({ product, config, lines, onJumpTab }) {
  const sectionStyle = { marginBottom: 22 };
  const headerStyle = {
    fontSize: 12, fontWeight: 700, color: 'var(--ink-500)',
    textTransform: 'uppercase', letterSpacing: 0.8,
    padding: '0 2px 8px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
  };
  const editBtn = (tab) => (
    <button onClick={() => onJumpTab(tab)} style={{
      background: 'none', border: 'none',
      fontSize: 12, fontWeight: 700, color: 'var(--brand-700)',
      textTransform: 'uppercase', letterSpacing: 0.8,
      cursor: 'pointer',
    }}>Edit</button>
  );

  // Group summary lines
  const groups = {
    pref: lines.filter(l => l.group === 'pref'),
    quick: lines.filter(l => l.group === 'quick'),
    extra: lines.filter(l => l.group === 'extra'),
    removed: lines.filter(l => l.group === 'removed'),
  };

  const LineItem = ({ l }) => (
    <div style={{
      padding: '10px 14px',
      background: 'white',
      border: '1px solid var(--ink-100)',
      borderRadius: 10,
      display: 'flex', alignItems: 'center', gap: 10,
      minHeight: 48,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink-900)' }}>
          {l.qty > 1 && <span style={{ fontFamily: "'Geist Mono', monospace", color: 'var(--ink-500)', marginRight: 6 }}>{l.qty}×</span>}
          {l.label}
        </div>
        {l.detail && (
          <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>{l.detail}</div>
        )}
      </div>
      {l.price !== 0 && (
        <div style={{
          fontSize: 14, fontWeight: 600,
          fontFamily: "'Geist Mono', monospace",
          color: l.price < 0 ? 'var(--alert-500)' : 'var(--ink-900)',
        }}>{fmtSigned(l.price)}</div>
      )}
    </div>
  );

  const isEmpty = lines.length === 0 && !config.note;

  return (
    <div>
      {/* Product summary header */}
      <div style={{
        padding: '14px 16px',
        background: 'var(--brand-50)',
        border: '1px solid var(--brand-200)',
        borderRadius: 12,
        marginBottom: 20,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ fontSize: 32 }}>{product.emoji}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-900)' }}>{product.name}</div>
          <div style={{ fontSize: 13, color: 'var(--ink-700)', marginTop: 2 }}>Base €{product.price.toFixed(2)}</div>
        </div>
      </div>

      {isEmpty && (
        <div style={{
          padding: '28px 16px',
          textAlign: 'center',
          color: 'var(--ink-500)',
          fontSize: 14,
        }}>
          No customization yet. Switch to other tabs to add options.
        </div>
      )}

      {groups.pref.length > 0 && (
        <div style={sectionStyle}>
          <div style={headerStyle}>
            <span>Preferences</span>
            {editBtn('preferences')}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {groups.pref.map((l, i) => <LineItem key={i} l={l} />)}
          </div>
        </div>
      )}

      {groups.quick.length > 0 && (
        <div style={sectionStyle}>
          <div style={headerStyle}>
            <span>Quick options</span>
            {editBtn('quick')}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {groups.quick.map((l, i) => <LineItem key={i} l={l} />)}
          </div>
        </div>
      )}

      {groups.extra.length > 0 && (
        <div style={sectionStyle}>
          <div style={headerStyle}>
            <span>Extras</span>
            {editBtn('extras')}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {groups.extra.map((l, i) => <LineItem key={i} l={l} />)}
          </div>
        </div>
      )}

      {groups.removed.length > 0 && (
        <div style={sectionStyle}>
          <div style={headerStyle}>
            <span>Removed</span>
            {editBtn('ingredients')}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {groups.removed.map((l, i) => <LineItem key={i} l={l} />)}
          </div>
        </div>
      )}

      {config.note && (
        <div style={sectionStyle}>
          <div style={headerStyle}>
            <span>Note</span>
            {editBtn('notes')}
          </div>
          <div style={{
            padding: '12px 14px',
            background: '#fffbeb',
            border: '1px solid #fde6a7',
            borderRadius: 10,
            fontSize: 15,
            color: 'var(--ink-900)',
            lineHeight: 1.4,
            whiteSpace: 'pre-wrap',
          }}>{config.note}</div>
        </div>
      )}
    </div>
  );
}

// ===========================================================================
// MAIN DRAWER
// ===========================================================================
function OrderDrawer({ product, isOpen, onClose, onAddToOrder }) {
  // Tabs available for this product (hidden if empty)
  const tabs = React.useMemo(() => {
    const list = [];
    if (product.quickOptions?.length)  list.push({ id: 'quick',        label: 'Quick' });
    if (product.extras?.length)        list.push({ id: 'extras',       label: 'Extras' });
    if (product.ingredients?.length)   list.push({ id: 'ingredients',  label: 'Ingredients' });
    if (product.preferences?.length)   list.push({ id: 'preferences',  label: 'Preferences' });
    list.push({ id: 'notes',   label: 'Notes' });
    list.push({ id: 'summary', label: 'Summary' });
    return list;
  }, [product]);

  // --- STATE ---
  const initialPrefs = () => {
    const p = {};
    (product.preferences || []).forEach(pref => {
      const def = pref.subOptions.find(s => s.default);
      if (def) p[pref.id] = def.id;
    });
    return p;
  };

  const [activeTab, setActiveTab]   = React.useState(tabs[0].id);
  const [quick, setQuick]           = React.useState({});       // { id: qty }
  const [extras, setExtras]         = React.useState({});       // { id: {qty, subId} }
  const [extraExpanded, setExtraExpanded] = React.useState(null);
  const [removed, setRemoved]       = React.useState({});       // { id: true }
  const [prefs, setPrefs]           = React.useState(initialPrefs());
  const [note, setNote]             = React.useState('');
  const [qty, setQty]               = React.useState(1);

  // Reset when drawer opens with a (possibly different) product
  React.useEffect(() => {
    if (isOpen) {
      setActiveTab(tabs[0].id);
      setQuick({});
      setExtras({});
      setExtraExpanded(null);
      setRemoved({});
      setPrefs(initialPrefs());
      setNote('');
      setQty(1);
    }
  }, [isOpen, product.id]);

  const config = { quick, extras, removed, prefs, note };

  // --- Derived: summary lines -------------------------------------------
  const { lines, itemPrice } = React.useMemo(() => {
    const L = [];
    let p = product.price;

    // Preferences
    (product.preferences || []).forEach(pref => {
      const selId = prefs[pref.id];
      if (!selId) return;
      const sub = pref.subOptions.find(s => s.id === selId);
      if (!sub) return;
      if (!sub.default || sub.price !== 0) {
        L.push({
          group: 'pref',
          label: `${pref.label}: ${sub.label}`,
          qty: 1,
          price: sub.price,
        });
      }
      p += sub.price;
    });

    // Quick
    (product.quickOptions || []).forEach(opt => {
      const q = quick[opt.id] || 0;
      if (q === 0) return;
      const linePrice = opt.price * q;
      L.push({
        group: 'quick',
        label: opt.label,
        qty: q,
        price: linePrice,
      });
      p += linePrice;
    });

    // Extras
    (product.extras || []).forEach(ex => {
      const sel = extras[ex.id];
      if (!sel) return;
      const sub = ex.subOptions.find(s => s.id === sel.subId);
      const linePrice = (ex.price + (sub?.price || 0)) * sel.qty;
      L.push({
        group: 'extra',
        label: ex.label,
        detail: sub?.label,
        qty: sel.qty,
        price: linePrice,
      });
      p += linePrice;
    });

    // Removed ingredients
    (product.ingredients || []).forEach(ing => {
      if (removed[ing.id]) {
        L.push({
          group: 'removed',
          label: `No ${ing.label.toLowerCase()}`,
          qty: 1,
          price: 0,
        });
      }
    });

    return { lines: L, itemPrice: p };
  }, [prefs, quick, extras, removed, product]);

  const total = itemPrice * qty;
  const customizationCount = lines.length + (note ? 1 : 0);

  // Backdrop click to close
  const handleBackdrop = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  // --- Render ---
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={handleBackdrop}
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(16, 20, 24, 0.45)',
          opacity: isOpen ? 1 : 0,
          pointerEvents: isOpen ? 'auto' : 'none',
          transition: 'opacity 260ms ease',
          zIndex: 10,
        }}
      />

      {/* Sheet */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 0,
        height: '90%',
        background: 'var(--surface)',
        borderRadius: '20px 20px 0 0',
        transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 320ms cubic-bezier(0.32, 0.72, 0, 1)',
        zIndex: 11,
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        boxShadow: '0 -8px 32px rgba(16, 20, 24, 0.18)',
      }}>
        {/* Grab handle */}
        <div style={{ padding: '8px 0 4px', display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--ink-200)' }} />
        </div>

        {/* Header */}
        <div style={{
          padding: '8px 16px 0',
          display: 'flex', alignItems: 'flex-start', gap: 12,
        }}>
          <div style={{
            width: 56, height: 56,
            borderRadius: 14,
            background: 'var(--brand-50)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 32,
            flexShrink: 0,
          }}>{product.emoji}</div>
          <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
            <div style={{ fontSize: 19, fontWeight: 700, color: 'var(--ink-900)', lineHeight: 1.2 }}>{product.name}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 4, lineHeight: 1.4 }}>{product.desc}</div>
          </div>
          <button
            onClick={onClose}
            style={{
              width: 36, height: 36,
              borderRadius: '50%',
              background: 'var(--ink-100)',
              border: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
              flexShrink: 0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <path d="M6 6L18 18M6 18L18 6" stroke="var(--ink-700)" strokeWidth="2.2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        {/* Tabs */}
        <div style={{
          marginTop: 14,
          borderBottom: '1px solid var(--ink-100)',
          overflowX: 'auto',
          scrollbarWidth: 'none',
          WebkitOverflowScrolling: 'touch',
        }}>
          <div style={{ display: 'flex', padding: '0 16px', gap: 4, minWidth: 'max-content' }}>
            {tabs.map(t => {
              const active = activeTab === t.id;
              const badge = (
                t.id === 'quick' ? Object.values(quick).filter(v => v > 0).length :
                t.id === 'extras' ? Object.values(extras).filter(Boolean).length :
                t.id === 'ingredients' ? Object.values(removed).filter(Boolean).length :
                t.id === 'notes' ? (note ? 1 : 0) :
                t.id === 'summary' ? customizationCount :
                0
              );
              return (
                <button
                  key={t.id}
                  onClick={() => setActiveTab(t.id)}
                  style={{
                    padding: '14px 4px',
                    background: 'none',
                    border: 'none',
                    borderBottom: '2px solid ' + (active ? 'var(--brand-500)' : 'transparent'),
                    color: active ? 'var(--brand-700)' : 'var(--ink-500)',
                    fontSize: 15,
                    fontWeight: active ? 700 : 500,
                    fontFamily: 'inherit',
                    cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    whiteSpace: 'nowrap',
                    marginRight: 10,
                    transition: 'color 120ms ease, border-color 120ms ease',
                  }}
                >
                  {t.label}
                  {badge > 0 && (
                    <span style={{
                      minWidth: 20, height: 20, padding: '0 6px',
                      borderRadius: 10,
                      background: active ? 'var(--brand-500)' : 'var(--ink-200)',
                      color: active ? 'white' : 'var(--ink-700)',
                      fontSize: 12, fontWeight: 700,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: "'Geist Mono', monospace",
                    }}>{badge}</span>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        {/* Scrollable content */}
        <div style={{
          flex: 1,
          overflowY: 'auto',
          padding: '16px 16px 20px',
          background: 'var(--bg)',
          WebkitOverflowScrolling: 'touch',
        }}>
          {activeTab === 'quick'        && <QuickOptionsTab options={product.quickOptions} state={quick} setState={setQuick} />}
          {activeTab === 'extras'       && <ExtrasTab extras={product.extras} state={extras} setState={setExtras} expandedId={extraExpanded} setExpandedId={setExtraExpanded} />}
          {activeTab === 'ingredients' && <IngredientsTab ingredients={product.ingredients} state={removed} setState={setRemoved} />}
          {activeTab === 'preferences' && <PreferencesTab preferences={product.preferences} state={prefs} setState={setPrefs} />}
          {activeTab === 'notes'        && <NotesTab note={note} setNote={setNote} />}
          {activeTab === 'summary'      && <SummaryTab product={product} config={config} lines={lines} onJumpTab={setActiveTab} />}
        </div>

        {/* Footer — qty stepper + Add to Order */}
        <div style={{
          padding: '12px 16px 18px',
          background: 'white',
          borderTop: '1px solid var(--ink-100)',
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 -4px 12px rgba(16, 20, 24, 0.04)',
        }}>
          <Stepper value={qty} onChange={setQty} min={1} size="lg" />
          <button
            onClick={() => onAddToOrder({ product, config, qty, total })}
            style={{
              flex: 1, height: 56,
              borderRadius: 28,
              background: 'var(--brand-500)',
              border: 'none',
              color: 'white',
              fontSize: 16, fontWeight: 700,
              fontFamily: 'inherit',
              cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '0 22px',
              transition: 'transform 100ms ease, background 120ms ease',
            }}
            onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.98)'}
            onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
          >
            <span>Add to order</span>
            <span style={{ fontFamily: "'Geist Mono', monospace" }}>€{total.toFixed(2)}</span>
          </button>
        </div>
      </div>
    </>
  );
}

window.OrderDrawer = OrderDrawer;