// Scent Alchemist — modals & overlays

const { useState: useStateM, useEffect: useEffectM } = React;

// Generic overlay wrapper
function Sheet({ title, sub, onClose, children, accent }) {
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={e => e.stopPropagation()} style={accent ? { borderTopColor: accent } : null}>
        <header className="sheet-head">
          <div>
            <div className="sheet-title">{title}</div>
            {sub && <div className="sheet-sub">{sub}</div>}
          </div>
          <button className="sheet-close" onClick={onClose}>✕</button>
        </header>
        <div className="sheet-body">{children}</div>
      </div>
    </div>
  );
}

// ─── Recipe Book ─────────────────────────────────────────────
function RecipeBook({ unlocked, reputation, activeId, onClose, onSelect }) {
  return (
    <Sheet title="Recipe Book" sub="formulae of the house" onClose={onClose} accent="#C89B3C">
      <div className="recipe-list">
        {RECIPES.map(r => {
          const isUnlocked = unlocked[r.id] || reputation >= r.repReq;
          const isActive = r.id === activeId;
          return (
            <div key={r.id} className={`recipe-card ${isActive ? 'active' : ''} ${isUnlocked ? '' : 'locked'}`}
                 onClick={() => isUnlocked && onSelect?.(r.id)}>
              <div className="recipe-card-head">
                <div>
                  <div className="recipe-name">{r.name}</div>
                  <div className="recipe-tag">{r.tagline}</div>
                </div>
                <div className="recipe-meta">
                  <div className="diff">{'◆'.repeat(r.difficulty)}<span className="dim">{'◇'.repeat(4 - r.difficulty)}</span></div>
                  <div className="rec-base">✦ {r.base}</div>
                </div>
              </div>
              {isUnlocked ? (
                <div className="ratio-bar">
                  {Object.entries(r.ratios).map(([k, v]) => {
                    const ing = ingredientById(k);
                    return (
                      <div key={k} className="ratio-seg" style={{ flex: v, background: ing.color }}
                           title={`${ing.name} ${v}%`}>
                        <span>{v}%</span>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="lock-row">🔒 unlock at reputation {r.repReq}</div>
              )}
              {isUnlocked && (
                <>
                  <div className="ratio-legend">
                    {Object.entries(r.ratios).map(([k, v]) => {
                      const ing = ingredientById(k);
                      return (
                        <span key={k} className="leg">
                          <span className="leg-sw" style={{ background: ing.color, borderColor: ing.stroke }} />
                          {ing.short} {v}%
                        </span>
                      );
                    })}
                  </div>
                  {r.tags && r.tags.length > 0 && (
                    <div className="tag-row">
                      {r.tags.map(tg => <span key={tg} className="tag-chip">{tg}</span>)}
                    </div>
                  )}
                </>
              )}
            </div>
          );
        })}
      </div>
    </Sheet>
  );
}

// ─── Restock ─────────────────────────────────────────────────
function Restock({ stock, coins, capacity, onClose, onBuy, onBundle }) {
  const bundleCost = Object.entries(RESTOCK_BUNDLE).reduce((s, [k, v]) => s + v * ingredientById(k).price * 0.85, 0);
  return (
    <Sheet title="Restock Counter" sub={`capacity ${capacity} · coins ✦ ${coins}`} onClose={onClose} accent="#7AA67A">
      <div className="restock-list">
        {INGREDIENTS.map(ing => {
          const cur = stock[ing.id];
          const space = capacity - cur;
          const canBuy = coins >= ing.price && space > 0;
          return (
            <div key={ing.id} className="restock-row">
              <span className="ing-sw" style={{ background: ing.color, borderColor: ing.stroke }} />
              <div className="restock-info">
                <div className="rs-name">{ing.name}</div>
                <div className="rs-stock">×{cur} <span className="dim">/ {capacity}</span></div>
              </div>
              <div className="rs-cost">✦ {ing.price}</div>
              <button className="btn btn-primary thin" disabled={!canBuy}
                      onClick={() => onBuy(ing.id, 1)}>+1</button>
              <button className="btn btn-ghost thin" disabled={coins < ing.price * 5 || space < 5}
                      onClick={() => onBuy(ing.id, 5)}>+5</button>
            </div>
          );
        })}
      </div>
      <button className="btn btn-amber wide" onClick={onBundle}
              disabled={coins < Math.round(bundleCost)}>
        Restock Bundle (all ingredients) · ✦ {Math.round(bundleCost)}
      </button>
    </Sheet>
  );
}

// ─── Upgrades ────────────────────────────────────────────────
function upgGlyph(id) {
  const map = {
    cup: '◷', mixer: '✦', cushion: '❀', storage: '▤', funnel: '▽',
    book: '❡', decanter: '◈', assistant: '☉',
    counter: '▭', shelf: '▥', register: '◫', sofa: '▰', neon: '☀',
  };
  return map[id] || '◯';
}

function Upgrades({ owned, coins, onClose, onBuy, onDev }) {
  const tools = UPGRADES.filter(u => !u.decor);
  const decor = UPGRADES.filter(u => u.decor);
  const renderCard = (u) => {
    const isOwned = !!owned[u.id];
    const canAfford = coins >= u.cost;
    return (
      <div key={u.id} className={`upg-card ${isOwned ? 'owned' : ''}`}>
        <div className="upg-glyph">{upgGlyph(u.id)}</div>
        <div className="upg-info">
          <div className="upg-name">{u.name}</div>
          <div className="upg-desc">{u.desc}</div>
          <div className="upg-effect">{u.effect}</div>
        </div>
        <button className="btn btn-primary thin" disabled={isOwned || !canAfford} onClick={() => onBuy(u.id)}>
          {isOwned ? 'Owned' : `✦ ${u.cost}`}
        </button>
      </div>
    );
  };
  return (
    <Sheet title="Workshop Upgrades" sub="permanent improvements" onClose={onClose} accent="#3D6BA8">
      <div className="upg-section-label">Workshop tools</div>
      <div className="upg-list">{tools.map(renderCard)}</div>
      <div className="upg-section-label" style={{ marginTop: 16 }}>Shop decoration</div>
      <div className="upg-list">{decor.map(renderCard)}</div>

      {onDev && (
        <div className="dev-panel">
          <div className="dev-panel-label">⚠ DEV TOOLS · enabled in Settings</div>
          <div className="dev-grid">
            <button className="dev-btn" onClick={onDev.coins}>+✦ 1000<small>coins</small></button>
            <button className="dev-btn" onClick={onDev.rep}>+◆ 1<small>reputation</small></button>
          </div>
        </div>
      )}
    </Sheet>
  );
}

// ─── Result dialog ───────────────────────────────────────────
function ResultDialog({ result, onContinue }) {
  if (!result) return null;
  const { tier, score, payOut, tipOut, repDelta, color, glow, reason, blindReveal, review } = result;
  return (
    <div className="sheet-backdrop">
      <div className={`result-card tier-${tier.replace(/\s/g, '-')}`} style={{ '--glow': glow, '--accent': color }}>
        <div className="result-tier" style={{ color }}>{tier}</div>
        <div className="result-score">
          <svg viewBox="0 0 100 100" width="120" height="120">
            <circle cx="50" cy="50" r="42" fill="none" stroke="#E8DBC4" strokeWidth="8" />
            <circle cx="50" cy="50" r="42" fill="none" stroke={color} strokeWidth="8"
                    strokeDasharray={`${(score / 100) * 264} 264`} strokeLinecap="round"
                    transform="rotate(-90 50 50)" />
            <text x="50" y="56" textAnchor="middle" fontSize="26" fontWeight="700"
                  fontFamily="Manrope, sans-serif" fill="#2D1B3D">{score}</text>
          </svg>
        </div>
        {reason && <div className="result-reason">{reason}</div>}
        {blindReveal && (
          <div className="result-reveal">
            <span className="dim">they were after</span> <strong>{blindReveal}</strong>
          </div>
        )}
        {review && (
          <div className="result-review">
            <span className="review-quote-mark">“</span>
            {review}
            <span className="review-quote-mark closing">”</span>
            <div className="review-attrib">— customer</div>
          </div>
        )}
        <div className="result-rows">
          <div className="result-row"><span>Base</span><strong>✦ {payOut}</strong></div>
          <div className="result-row"><span>Tip</span><strong>✦ {tipOut}</strong></div>
          <div className="result-row"><span>Reputation</span><strong>{repDelta >= 0 ? '+' : ''}{repDelta}</strong></div>
        </div>
        <button className="btn btn-primary wide" onClick={onContinue}>Next customer →</button>
      </div>
    </div>
  );
}

// ─── Tutorial overlay ────────────────────────────────────────
function Tutorial({ step, onNext, onSkip }) {
  if (step === null || step === undefined) return null;
  const steps = [
    { title: 'Welcome to your workshop', body: 'A customer just arrived. Their patience bar runs down — read the order, then mix.' },
    { title: 'Check the recipe', body: 'Tap the Book to view the exact ingredient ratios for their requested perfume.' },
    { title: 'Mix carefully', body: 'Tap ingredient bottles to add drops. Match the target percentages — accuracy is everything.' },
    { title: 'Serve before time runs out', body: 'Press Serve when ready. A perfect blend earns full tip + reputation.' },
  ];
  if (step >= steps.length) return null;
  const s = steps[step];
  return (
    <div className="tut-backdrop" onClick={onNext}>
      <div className="tut-card">
        <div className="tut-step">{step + 1} / {steps.length}</div>
        <div className="tut-title">{s.title}</div>
        <div className="tut-body">{s.body}</div>
        <div className="tut-actions">
          <button className="btn btn-ghost thin" onClick={(e) => { e.stopPropagation(); onSkip(); }}>Skip</button>
          <button className="btn btn-primary thin" onClick={(e) => { e.stopPropagation(); onNext(); }}>{step === steps.length - 1 ? 'Begin' : 'Next'}</button>
        </div>
      </div>
    </div>
  );
}

// ─── Serving scene (pour → seal → mature  /  shatter) ───────
function ServingScene({ phase, color, onAdvance, onDone }) {
  React.useEffect(() => {
    let t;
    if (phase === 'pour')  t = setTimeout(onAdvance, 1300);
    if (phase === 'age')   t = setTimeout(onDone, 1500);
    if (phase === 'break') t = setTimeout(onDone, 1800);
    return () => clearTimeout(t);
  }, [phase]);

  const fillColor = color || '#C89B3C';
  const fillColorDark = darken(fillColor, 0.78);

  if (phase === 'break') {
    return (
      <div className="serve-overlay phase-break">
        <div className="serve-stage">
          <svg viewBox="0 0 220 260" width="200" height="232">
            {/* Trash bin body */}
            <g className="bin-body">
              {/* Back shadow */}
              <ellipse cx="110" cy="246" rx="64" ry="6" fill="#0E081A" opacity="0.45"/>
              {/* Body */}
              <path d="M68 138 L152 138 L158 244 Q158 250 152 250 L68 250 Q62 250 62 244 Z"
                    fill="#5A5560" stroke="#2F2A35" strokeWidth="1.6"/>
              {/* Vertical staves */}
              <line x1="88"  y1="146" x2="90"  y2="246" stroke="#3F3A48" strokeWidth="1"/>
              <line x1="110" y1="146" x2="110" y2="248" stroke="#3F3A48" strokeWidth="1"/>
              <line x1="132" y1="146" x2="130" y2="246" stroke="#3F3A48" strokeWidth="1"/>
              {/* Inner darkness */}
              <ellipse cx="110" cy="142" rx="42" ry="7" fill="#1B1530"/>
              {/* Rim highlight */}
              <path d="M68 138 Q110 130 152 138" stroke="#7E7A88" strokeWidth="1.4" fill="none"/>
            </g>

            {/* Bottle arcs into the bin */}
            <g className="trash-bottle">
              <rect x="98" y="2"  width="22" height="10" rx="2" fill="#A37049" stroke="#5A361F" strokeWidth="1"/>
              <rect x="94" y="12" width="30" height="12" rx="2.5" fill="#8B5A3C" stroke="#5A361F" strokeWidth="1.2"/>
              <path d="M90 24 L128 24 L138 64 L138 124 Q138 132 130 132 L88 132 Q80 132 80 124 L80 64 Z"
                    fill={fillColor} fillOpacity="0.78" stroke="#5A361F" strokeWidth="1.4"/>
              {/* Glass highlight */}
              <path d="M96 30 L96 64 L86 120" stroke="#FFFFFF" strokeOpacity="0.3"
                    strokeWidth="2" fill="none" strokeLinecap="round"/>
            </g>

            {/* Lid — hinged at right edge, flips open then slams shut */}
            <g className="bin-lid">
              <ellipse cx="110" cy="138" rx="48" ry="9" fill="#6B6772" stroke="#2F2A35" strokeWidth="1.4"/>
              <ellipse cx="110" cy="135" rx="48" ry="6" fill="#7E7A88"/>
              <ellipse cx="110" cy="133" rx="46" ry="4" fill="#8E8A98" opacity="0.6"/>
              {/* Handle */}
              <rect x="100" y="124" width="20" height="6" rx="2" fill="#5A5560" stroke="#2F2A35" strokeWidth="1"/>
            </g>

            {/* Dust puff when bottle lands */}
            <g className="trash-puff">
              <circle cx="92"  cy="140" r="6" fill="#C8C2D0" opacity="0.5"/>
              <circle cx="110" cy="136" r="8" fill="#C8C2D0" opacity="0.45"/>
              <circle cx="128" cy="142" r="6" fill="#C8C2D0" opacity="0.5"/>
            </g>
          </svg>
          <div className="serve-caption">— into the bin —</div>
        </div>
      </div>
    );
  }

  return (
    <div className={`serve-overlay phase-${phase}`}
         onClick={phase === 'seal' ? onAdvance : undefined}>
      <div className="serve-stage">
        <svg viewBox="0 0 200 240" width="180" height="216">
          <defs>
            <linearGradient id="bottleLiquid" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor={fillColor} />
              <stop offset="1" stopColor={fillColorDark} />
            </linearGradient>
            <clipPath id="bottleClip2">
              <path d="M76 56 L124 56 L134 100 L134 208 Q134 220 122 220 L78 220 Q66 220 66 208 L66 100 Z"/>
            </clipPath>
          </defs>

          {/* Cork (always visible during success sequence) */}
          <rect x="86" y="32" width="28" height="10" rx="2" fill="#A37049" stroke="#5A361F" strokeWidth="1"/>
          <rect x="82" y="42" width="36" height="14" rx="3" fill="#8B5A3C" stroke="#5A361F" strokeWidth="1.2"/>

          {/* Bottle body */}
          <path d="M76 56 L124 56 L134 100 L134 208 Q134 220 122 220 L78 220 Q66 220 66 208 L66 100 Z"
                fill="#F8F3E7" fillOpacity="0.5" stroke="#7A6A4C" strokeWidth="1.6"/>

          {/* Liquid — rises during pour, stays after */}
          <g clipPath="url(#bottleClip2)">
            <rect className={phase === 'pour' ? 'pour-fill' : 'static-fill'}
                  x="56" y="100" width="120" height="130" fill="url(#bottleLiquid)"/>
            <ellipse className="meniscus" cx="100" cy="108" rx="38" ry="2.4"
                     fill="#FFFFFF" opacity="0.4"/>
          </g>

          {/* Pour stream — only during pour */}
          {phase === 'pour' && (
            <rect className="pour-stream" x="98" y="0" width="4" height="52" fill={fillColor}/>
          )}

          {/* Glass highlight */}
          <path d="M82 64 L82 100 L72 200" stroke="#FFFFFF" strokeOpacity="0.35"
                strokeWidth="3" fill="none" strokeLinecap="round"/>

          {/* Wax seal — pulses on seal phase, set after */}
          {(phase === 'seal' || phase === 'age') && (
            <g className={phase === 'seal' ? 'wax-pulse' : 'wax-set'}>
              {/* Drip overhang */}
              <path d="M82 48 Q86 56 88 50 Q90 58 92 50 Q96 60 100 52 Q104 60 108 50 Q110 58 112 50 Q114 56 118 48 L118 38 L82 38 Z"
                    fill="#8E3D52" stroke="#5A2030" strokeWidth="0.8"/>
              {/* Top puddle */}
              <ellipse cx="100" cy="36" rx="20" ry="6" fill="#A85060" stroke="#5A2030" strokeWidth="0.8"/>
              <ellipse cx="100" cy="34" rx="14" ry="3" fill="#C26A7A" opacity="0.7"/>
              {/* House mark */}
              <text x="100" y="38" textAnchor="middle" fontSize="7" fontWeight="700"
                    fontFamily="Cormorant Garamond, serif" fill="#3D1525">A</text>
            </g>
          )}

          {/* Aging sparkles */}
          {phase === 'age' && (
            <g>
              <circle className="age-spark s1" cx="60" cy="160" r="1.8" fill="#FFE9A8"/>
              <circle className="age-spark s2" cx="140" cy="130" r="1.8" fill="#FFE9A8"/>
              <circle className="age-spark s3" cx="100" cy="190" r="1.8" fill="#FFE9A8"/>
              <circle className="age-spark s4" cx="78" cy="200" r="1.4" fill="#FFE9A8"/>
            </g>
          )}
        </svg>
        <div className="serve-caption">
          {phase === 'pour' && '— decanting —'}
          {phase === 'seal' && (
            <>tap to seal with wax<span className="tap-hint">▼</span></>
          )}
          {phase === 'age' && '— maturing —'}
        </div>
      </div>
    </div>
  );
}

// helper for darker shade
function darken(rgbStr, mul) {
  const m = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/.exec(rgbStr);
  if (!m) return rgbStr;
  return `rgb(${Math.round(+m[1]*mul)}, ${Math.round(+m[2]*mul)}, ${Math.round(+m[3]*mul)})`;
}

// ─── Settings sheet ──────────────────────────────────────────
function SettingToggle({ name, desc, value, onToggle, soonTag }) {
  return (
    <label className="settings-row">
      <div className="settings-info">
        <div className="settings-name">
          {name}
          {soonTag && <span className="settings-soon">SOON</span>}
        </div>
        <div className="settings-desc">{desc}</div>
      </div>
      <button
        className={`toggle ${value ? 'on' : ''}`}
        onClick={onToggle}
        aria-pressed={value}
      >
        <span className="toggle-knob" />
      </button>
    </label>
  );
}

function Settings({ settings, onChange, onClose, onResetSave }) {
  const set = (k, v) => onChange({ ...settings, [k]: v });
  return (
    <Sheet title="Settings" sub="play your way" onClose={onClose} accent="#8E3D52">
      <div className="settings-list">
        <div className="settings-section-label">Audio</div>
        <SettingToggle
          name="Sound effects" soonTag
          desc="Drops, taps, ding on Perfect Blend."
          value={settings.soundOn}
          onToggle={() => set('soundOn', !settings.soundOn)}
        />
        <SettingToggle
          name="Music" soonTag
          desc="Soft jazz loop for the shop."
          value={settings.musicOn}
          onToggle={() => set('musicOn', !settings.musicOn)}
        />

        <div className="settings-section-label" style={{marginTop: 14}}>Gameplay</div>
        <SettingToggle
          name="Hard Mode"
          desc="Hides target percentages — you must consult the Recipe Book. Pay & tip +20%."
          value={settings.hardMode}
          onToggle={() => set('hardMode', !settings.hardMode)}
        />

        <div className="settings-section-label" style={{marginTop: 14}}>Developer</div>
        <SettingToggle
          name="Dev Tools"
          desc="Shows a dev panel at the bottom of Upgrades for quick testing (+coins, +rep)."
          value={settings.devMode}
          onToggle={() => set('devMode', !settings.devMode)}
        />

        <div className="settings-section-label" style={{marginTop: 14}}>Save</div>
        <div className="settings-row settings-row-action">
          <div className="settings-info">
            <div className="settings-name">Reset Save</div>
            <div className="settings-desc">Wipe progress and restart the tutorial.</div>
          </div>
          <button className="btn btn-ghost thin" onClick={onResetSave}>Reset</button>
        </div>
      </div>
    </Sheet>
  );
}

// ─── Start screen ────────────────────────────────────────────
function StartScreen({ hasSave, onContinue, onNewGame, onSettings }) {
  const [confirming, setConfirming] = useStateM(false);
  const handleNewGame = () => {
    if (hasSave && !confirming) { setConfirming(true); return; }
    setConfirming(false);
    onNewGame();
  };
  return (
    <div className="start-screen">
      <img className="start-bg" src="assets/backdrop.png" alt="" aria-hidden="true"
           onError={(e) => { e.currentTarget.style.display = 'none'; }} />
      <div className="start-veil" />
      <div className="start-content">
        <h1 className="start-title">Scent Alchemist</h1>
        <p className="start-tagline">an idle perfume mixing game</p>

        {confirming && (
          <div className="start-confirm">
            Existing save will be wiped. Sure?
          </div>
        )}

        <div className="start-buttons">
          <button className="start-btn primary" disabled={!hasSave} onClick={onContinue}>
            Continue
          </button>
          <button className={`start-btn ${confirming ? 'danger' : ''}`} onClick={handleNewGame}>
            {confirming ? 'Yes, wipe & start' : (hasSave ? 'New Game' : 'Start')}
          </button>
          {confirming && (
            <button className="start-btn ghost" onClick={() => setConfirming(false)}>
              Cancel
            </button>
          )}
          {!confirming && (
            <button className="start-btn ghost" onClick={onSettings}>
              Settings
            </button>
          )}
        </div>

      </div>
    </div>
  );
}

// ─── Rescue sheet — pour back drops, or sell as a budget perfume ─
function Rescue({ mix, onClose, onPourBack, onSellBudget, budgetPay, canSellBudget, rescueUsed }) {
  const essences = INGREDIENTS.filter(i => i.id !== 'bottle' && (mix[i.id] || 0) > 0);
  return (
    <Sheet title="Rescue" sub="one use per day · spend it wisely" onClose={onClose} accent="#6E8E3E">
      <div className={`rescue-limit ${rescueUsed ? 'used' : 'available'}`}>
        {rescueUsed
          ? <>⛑ <strong>Rescue already used today.</strong> Resets next day.</>
          : <>⛑ <strong>1 rescue available</strong> today — picking either option below ends it.</>}
      </div>

      <div className="rescue-section-label">Pour back a drop (returns to stock)</div>
      {essences.length === 0 ? (
        <div className="rescue-empty">nothing in the flask yet</div>
      ) : (
        <div className="rescue-list">
          {essences.map(ing => (
            <button key={ing.id} className="rescue-row" disabled={rescueUsed}
                    onClick={() => onPourBack(ing.id)}>
              <span className="ing-sw" style={{ background: ing.color, borderColor: ing.stroke }} />
              <div className="rescue-info">
                <div className="rs-name">{ing.name}</div>
                <div className="rs-stock">×{mix[ing.id]} in flask</div>
              </div>
              <span className="rescue-pourback">− 1 drop</span>
            </button>
          ))}
        </div>
      )}

      <div className="rescue-divider" />

      <div className="rescue-section-label">Or cut your losses</div>
      <div className="rescue-budget">
        <div className="rescue-budget-info">
          <div className="rs-name">Sell as budget perfume</div>
          <div className="rs-stock">no reputation gained · still costs 1 bottle</div>
        </div>
        <button className="btn btn-amber thin" disabled={!canSellBudget} onClick={onSellBudget}>
          ✦ {budgetPay}
        </button>
      </div>
    </Sheet>
  );
}

// ─── End-of-day report ──────────────────────────────────────
function DayReport({ report, onClose, onRestock, onUpgrades }) {
  const { day, served, perfect, failed, payEarned, tipsEarned, repChange, recipeSales, bottlesUsed, rescueUsed } = report;
  const bestSellerId = Object.entries(recipeSales || {}).sort((a, b) => b[1] - a[1])[0]?.[0];
  const bestSeller = bestSellerId ? recipeById(bestSellerId) : null;
  return (
    <Sheet title={`Day ${day} — wrap up`} sub="the day's ledger" onClose={onClose} accent="#C89B3C">
      <div className="day-grid">
        <div className="day-stat"><div className="day-stat-num">{served}</div><div className="day-stat-lbl">served</div></div>
        <div className="day-stat"><div className="day-stat-num">{perfect}</div><div className="day-stat-lbl">perfect</div></div>
        <div className="day-stat"><div className="day-stat-num">{failed}</div><div className="day-stat-lbl">failed</div></div>
        <div className="day-stat"><div className="day-stat-num">{bottlesUsed}</div><div className="day-stat-lbl">bottles</div></div>
      </div>

      <div className="day-rows">
        <div className="day-row"><span>Base pay</span><strong>✦ {payEarned}</strong></div>
        <div className="day-row"><span>Tips earned</span><strong>✦ {tipsEarned}</strong></div>
        <div className="day-row total"><span>Total earnings</span><strong>✦ {payEarned + tipsEarned}</strong></div>
        <div className="day-row"><span>Reputation change</span><strong>{repChange >= 0 ? '+' : ''}{repChange}</strong></div>
        <div className="day-row"><span>Rescue used</span><strong>{rescueUsed ? '⛑ yes' : '— no'}</strong></div>
        {bestSeller && (
          <div className="day-row"><span>Best seller</span><strong style={{fontFamily: 'var(--serif)', fontStyle: 'italic'}}>{bestSeller.name}</strong></div>
        )}
      </div>

      <div className="day-prep-label">prep before tomorrow opens</div>
      <div className="day-prep-row">
        <button className="btn btn-ghost thin day-prep-btn" onClick={onRestock}>
          ▤ Restock
        </button>
        <button className="btn btn-ghost thin day-prep-btn" onClick={onUpgrades}>
          ⌬ Upgrades
        </button>
      </div>
      <button className="btn btn-primary wide" onClick={onClose}>Open the shop →</button>
    </Sheet>
  );
}

Object.assign(window, { Sheet, RecipeBook, Restock, Upgrades, ResultDialog, Tutorial, Settings, ServingScene, Rescue, DayReport, StartScreen });