// MenuDemo — a LIVE, tappable version of what a guest sees after scanning.
//
// WHY IT'S INTERACTIVE: a screenshot of a menu proves nothing. Owners are
// deciding whether ordering-from-the-table is real, and the fastest way to
// answer that is to let them tap Add on this page, watch the total move, and
// run a checkout to the receipt. The behaviour mirrors the shipped clip:
// whole-row tap to add, a frosted bar pinned at the bottom, a bill that
// breaks out tax and tip, then Apple Pay or a saved card.
//
// Everything after "Pay" is a MOCK. No card is charged, no network call is
// made, and the saved card is fictional — it exists so an owner can see the
// shape of the flow their guests will walk through.

const { useState: useStateMenu, useMemo: useMemoMenu } = React;

const DEMO_ITEMS = [
  { id: 'a', cat: 'Signature Lattes', name: 'Brown Sugar Oat Latte', desc: 'Double shot, oat milk, cinnamon.', price: 6.25, img: 'a' },
  { id: 'b', cat: 'Signature Lattes', name: 'Honey Lavender', desc: 'Local honey, lavender syrup.', price: 6.75, img: 'b' },
  { id: 'c', cat: 'Signature Lattes', name: 'Salted Caramel', desc: 'House caramel, sea salt.', price: 6.5, img: 'c' },
  { id: 'd', cat: 'Bakery', name: 'Morning Bun', desc: 'Laminated, orange sugar.', price: 4.25, img: 'd' },
  { id: 'e', cat: 'Bakery', name: 'Miso Chocolate Chip Cookie', desc: 'Brown butter, flaky salt.', price: 4.0, img: 'e' },
  { id: 'f', cat: 'Cold Drinks', name: 'Cold Brew', desc: '18-hour steep, no sugar.', price: 5.25, img: 'f' },
];
const DEMO_CATS = ['Signature Lattes', 'Bakery', 'Cold Drinks'];
// A space, the way the app actually renders one: a WHO'S HERE avatar rail
// with a live count and an Insights pill, then the posts people in the space
// have left. Mirrors WhosHere.tsx + PostCard in the iOS app.
//
// Faces and hues come from AVATAR_NAMES in flyer-shared.jsx, so the people in
// this demo are the same cast as everywhere else on the marketing site rather
// than a second, contradictory set. Post photos reuse the demo-menu images we
// already own. Fictional guests and posts — this is the demo, not live presence.
const DEMO_HERE = AVATAR_NAMES.slice(0, 6);
const DEMO_POSTS = [
  { who: AVATAR_NAMES[4], t: '12m', body: 'Back corner table is free and the oat latte is unreal today.', img: 'c', likes: 7, comments: 2 },
  { who: AVATAR_NAMES[0], t: '48m', body: 'Anyone here into vinyl? Record fair is two blocks over til 6.', img: null, likes: 12, comments: 5 },
  { who: AVATAR_NAMES[2], t: '2h', body: 'Morning bun still warm. Worth the walk.', img: 'd', likes: 19, comments: 4 },
];
const TAX_RATE = 0.075;
const PHOTO = (k) => `/landings/assets/demo-menu/${k}.jpg`;

/** Device bezel that wraps arbitrary children. PhoneFrame only takes an
 *  image, and this screen has to be live. */
function PhoneShell({ width = 300, children }) {
  const h = width * (812 / 400);
  const s = width / 400;
  return (
    <div style={{
      width, height: h, position: 'relative',
      borderRadius: 44 * s, background: BRAND.gray900, flexShrink: 0,
      boxShadow: `0 ${30 * s}px ${60 * s}px -${20 * s}px rgba(0,0,0,0.30), 0 0 0 ${2 * s}px rgba(0,0,0,0.85), inset 0 0 0 ${5 * s}px #1a1a1a`,
    }}>
      <div style={{
        position: 'absolute', inset: 7 * s, borderRadius: 36 * s,
        overflow: 'hidden', background: '#F7F6F2',
        display: 'flex', flexDirection: 'column',
      }}>
        {children}
        <div style={{
          position: 'absolute', left: '50%', top: 8 * s, transform: 'translateX(-50%)',
          width: 110 * s, height: 28 * s, background: BRAND.black,
          borderRadius: 14 * s, zIndex: 8,
        }} />
      </div>
    </div>
  );
}

function MenuDemo({ width = 320, brand = '#8A5A1E', brandDark = '#4A2F0C' }) {
  const [cat, setCat] = useStateMenu(DEMO_CATS[0]);
  const [cart, setCart] = useStateMenu({});
  // none | social | bill | pay | done.
  // ?demo=social|bill opens a sheet on mount so marketing captures (and
  // headless screenshots) can grab a specific state without scripting a click.
  const [sheet, setSheet] = useStateMenu(() => {
    try {
      const d = new URLSearchParams(window.location.search).get('demo');
      return ['social', 'bill'].includes(d) ? d : 'none';
    } catch (_) { return 'none'; }
  });
  const [tipPct, setTipPct] = useStateMenu(0);
  const [paying, setPaying] = useStateMenu('');   // '' | 'apple' | 'card'

  const bump = (id, d) => setCart((c) => {
    const n = Math.max(0, (c[id] || 0) + d);
    const out = { ...c };
    if (n === 0) delete out[id]; else out[id] = n;
    return out;
  });

  const lines = useMemoMenu(
    () => DEMO_ITEMS.filter((i) => cart[i.id]).map((i) => ({ ...i, qty: cart[i.id] })),
    [cart],
  );
  const count = lines.reduce((n, l) => n + l.qty, 0);
  const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0);
  const tax = subtotal * TAX_RATE;
  const tip = subtotal * (tipPct / 100);
  const total = subtotal + tax + tip;
  const money = (n) => `$${n.toFixed(2)}`;

  /** Mock settle. Real checkout runs createPaymentIntent → Apple Pay sheet;
   *  here a short delay stands in so the flow reads the same. */
  const pay = (how) => {
    setPaying(how);
    setTimeout(() => { setPaying(''); setSheet('done'); }, 1100);
  };

  const reset = () => { setCart({}); setTipPct(0); setSheet('none'); };

  return (
    <PhoneShell width={width}>
      {/* Venue header */}
      <div style={{ padding: '46px 16px 12px', background: '#F7F6F2', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
          <div style={{ fontSize: 19, fontWeight: 800, color: '#16130E', letterSpacing: -0.5 }}>Demo Cafe</div>
          <button onClick={() => setSheet('social')} style={{
            fontSize: 11, fontWeight: 700, color: BRAND.white, border: 'none',
            background: brand, padding: '6px 12px', borderRadius: 999,
            cursor: 'pointer', fontFamily: BRAND.font,
          }}>✦ Socialize</button>
        </div>
      </div>

      {/* Category chips */}
      <div style={{ display: 'flex', gap: 7, padding: '0 16px 10px', overflow: 'hidden', flexShrink: 0 }}>
        {DEMO_CATS.map((c) => (
          <button key={c} onClick={() => setCat(c)} style={{
            border: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
            fontSize: 11, fontWeight: 700, padding: '7px 12px', borderRadius: 999,
            fontFamily: BRAND.font,
            background: c === cat ? brandDark : BRAND.white,
            color: c === cat ? BRAND.white : '#5A5348',
          }}>{c}</button>
        ))}
      </div>

      {/* Items — whole row is the tap target, same as the real clip */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '4px 16px 96px' }}>
        {DEMO_ITEMS.filter((i) => i.cat === cat).map((i) => (
          <div key={i.id} onClick={() => bump(i.id, 1)} style={{
            background: BRAND.white, borderRadius: 14, padding: 10, marginBottom: 9,
            cursor: 'pointer', boxShadow: '0 1px 2px rgba(20,16,10,0.05)',
            display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            <img src={PHOTO(i.img)} alt="" style={{
              width: 58, height: 58, borderRadius: 10, objectFit: 'cover',
              flexShrink: 0, background: '#EFEBE3',
            }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#16130E' }}>{i.name}</div>
                <div style={{ fontSize: 13, fontWeight: 800, color: brand }}>{money(i.price)}</div>
              </div>
              <div style={{ fontSize: 11, color: '#7A7266', marginTop: 2, lineHeight: 1.35 }}>{i.desc}</div>
              <div style={{ marginTop: 7 }}>
                {cart[i.id] ? (
                  <div onClick={(e) => e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    <button onClick={() => bump(i.id, -1)} style={stepStyle(brand)}>−</button>
                    <span style={{ fontSize: 12.5, fontWeight: 800, minWidth: 12, textAlign: 'center' }}>{cart[i.id]}</span>
                    <button onClick={() => bump(i.id, 1)} style={stepStyle(brand)}>+</button>
                  </div>
                ) : (
                  <div style={{
                    display: 'inline-block', fontSize: 11, fontWeight: 700, color: brand,
                    border: `1px solid ${brand}55`, borderRadius: 999, padding: '4px 13px',
                  }}>Add</div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Frosted total bar — translucent so the list stays visible under it */}
      <div style={{ position: 'absolute', left: 12, right: 12, bottom: 14, zIndex: 4 }}>
        <div onClick={() => count && setSheet('bill')} style={{
          height: 48, borderRadius: 16, display: 'flex', alignItems: 'center',
          justifyContent: 'space-between', padding: '0 15px',
          cursor: count ? 'pointer' : 'default',
          border: '1px solid rgba(255,255,255,0.65)',
          backdropFilter: 'saturate(190%) blur(22px)',
          WebkitBackdropFilter: 'saturate(190%) blur(22px)',
          background: count
            ? `linear-gradient(180deg, ${hexRgba(brand, 0.26)}, ${hexRgba(brandDark, 0.34)})`
            : 'linear-gradient(180deg, rgba(255,255,255,0.82), rgba(244,243,240,0.7))',
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 22px -10px rgba(20,16,10,0.4)',
          color: '#16130E',
        }}>
          <span style={{ fontSize: 12.5, fontWeight: 800 }}>
            {count ? `${count} item${count === 1 ? '' : 's'}` : 'Tap items to add up total'}
          </span>
          <span style={{ fontSize: 14, fontWeight: 800 }}>
            {money(total)}{count > 0 && <span style={{ fontSize: 9.5, opacity: 0.7 }}> incl. tax</span>}
          </span>
        </div>
      </div>

      {/* ── Bill ─────────────────────────────────────────────────── */}
      {/* Socialize — a real space, laid out the way the app lays one out:
          WHO'S HERE avatar rail (count + Insights pill + View All), then the
          posts from people in the space. This is the layer a plain menu link
          does not have. */}
      {sheet === 'social' && (
        <Sheet onClose={() => setSheet('none')}>
          <SheetHead title="Demo Cafe" onClose={() => setSheet('none')} />

          {/* WHO'S HERE rail */}
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: 1, color: '#5A5348' }}>
                WHO&rsquo;S HERE <span style={{ color: '#9A9186', fontWeight: 500 }}>({DEMO_HERE.length})</span>
              </span>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                background: 'linear-gradient(180deg,#34d399,#059669)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.4)', borderRadius: 999,
                padding: '3px 8px', fontSize: 9.5, fontWeight: 800, letterSpacing: 0.3,
              }}>▨ INSIGHTS</span>
            </div>
            <span style={{ fontSize: 11.5, fontWeight: 600, color: '#047857' }}>View All →</span>
          </div>
          <div style={{ display: 'flex', gap: 10, overflowX: 'hidden', paddingBottom: 12 }}>
            {DEMO_HERE.map((p) => (
              <div key={p.name} style={{ textAlign: 'center', flexShrink: 0, width: 46 }}>
                <Avatar name={p.name} hue={p.hue} img={p.img} size={44} ring="rgba(16,185,129,0.55)" />
                <div style={{ fontSize: 9.5, color: '#5A5348', marginTop: 4, fontWeight: 600 }}>{p.name}</div>
              </div>
            ))}
          </div>

          {/* Posts from the space */}
          {DEMO_POSTS.map((p) => (
            <div key={p.who.name + p.t} style={{ borderTop: '1px solid #EEE9E1', padding: '11px 0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <Avatar name={p.who.name} hue={p.who.hue} img={p.who.img} size={26} />
                <span style={{ fontSize: 12.5, fontWeight: 700, color: '#16130E' }}>{p.who.name}</span>
                <span style={{ fontSize: 11, color: '#9A9186' }}>· {p.t}</span>
              </div>
              <div style={{ fontSize: 12.5, color: '#3A342C', lineHeight: 1.45 }}>{p.body}</div>
              {p.img && (
                <img src={PHOTO(p.img)} alt="" style={{
                  width: '100%', height: 132, objectFit: 'cover',
                  borderRadius: 12, marginTop: 8, display: 'block', background: '#EFEAE2',
                }} />
              )}
              <div style={{ display: 'flex', gap: 14, marginTop: 7, fontSize: 11, color: '#7A7266', fontWeight: 600 }}>
                <span>♡ {p.likes}</span>
                <span>💬 {p.comments}</span>
              </div>
            </div>
          ))}

          <div style={{
            fontSize: 11.5, color: '#7A7266', lineHeight: 1.5,
            borderTop: '1px solid #EEE9E1', marginTop: 6, paddingTop: 10,
          }}>
            Every guest who scans lands in your space. A menu link alone can&rsquo;t do this.
          </div>
          <button onClick={() => setSheet('none')} style={payBtn(brandDark)}>Back to the menu</button>
        </Sheet>
      )}

      {sheet === 'bill' && (
        <Sheet onClose={() => setSheet('none')}>
          <SheetHead title="Your bill" onClose={() => setSheet('none')} />
          {lines.map((l) => (
            <div key={l.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 9 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: '#16130E', flex: 1, minWidth: 0 }}>{l.name}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <button onClick={() => bump(l.id, -1)} style={stepStyle(brand)}>−</button>
                <span style={{ fontSize: 12.5, fontWeight: 800, minWidth: 12, textAlign: 'center' }}>{l.qty}</span>
                <button onClick={() => bump(l.id, 1)} style={stepStyle(brand)}>+</button>
                <span style={{ fontSize: 12.5, fontWeight: 800, minWidth: 46, textAlign: 'right' }}>{money(l.price * l.qty)}</span>
              </div>
            </div>
          ))}
          <div style={{ fontSize: 11.5, fontWeight: 800, color: '#16130E', margin: '14px 0 7px' }}>Tip</div>
          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
            {[0, 15, 18, 20].map((p) => (
              <button key={p} onClick={() => setTipPct(p)} style={{
                flex: 1, border: `1px solid ${p === tipPct ? brandDark : '#E6E2DA'}`,
                background: p === tipPct ? brandDark : BRAND.white,
                color: p === tipPct ? BRAND.white : '#5A5348',
                borderRadius: 10, padding: '7px 0', fontSize: 11.5, fontWeight: 800,
                cursor: 'pointer', fontFamily: BRAND.font,
              }}>{p === 0 ? 'None' : `${p}%`}</button>
            ))}
          </div>
          <Totals subtotal={subtotal} tax={tax} tip={tip} tipPct={tipPct} total={total} money={money} />
          <button onClick={() => setSheet('pay')} style={payBtn(brandDark)}>
            Checkout · {money(total)}
          </button>
        </Sheet>
      )}

      {/* ── Payment ──────────────────────────────────────────────── */}
      {sheet === 'pay' && (
        <Sheet onClose={() => !paying && setSheet('bill')}>
          <SheetHead title="Checkout" onClose={() => !paying && setSheet('bill')} closeLabel="Back" />
          <Totals subtotal={subtotal} tax={tax} tip={tip} tipPct={tipPct} total={total} money={money} />

          {/* Apple Pay — black pill with the wordmark, the way iOS draws it. */}
          <button onClick={() => pay('apple')} disabled={!!paying} style={{
            width: '100%', height: 46, borderRadius: 12, border: 'none',
            background: '#000', color: '#fff', cursor: paying ? 'default' : 'pointer',
            fontSize: 15, fontWeight: 600, fontFamily: BRAND.font,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            marginTop: 14, opacity: paying && paying !== 'apple' ? 0.45 : 1,
          }}>
            {paying === 'apple' ? 'Confirming…' : <><span style={{ fontSize: 17 }}></span> Pay</>}
          </button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0' }}>
            <div style={{ flex: 1, height: 1, background: '#EFEBE3' }} />
            <span style={{ fontSize: 10.5, color: '#9A9285', fontWeight: 700 }}>OR</span>
            <div style={{ flex: 1, height: 1, background: '#EFEBE3' }} />
          </div>

          {/* Saved card — fictional, and labelled as a demo below. */}
          <button onClick={() => pay('card')} disabled={!!paying} style={{
            width: '100%', display: 'flex', alignItems: 'center', gap: 10,
            border: '1px solid #E6E2DA', background: BRAND.white, borderRadius: 12,
            padding: '11px 12px', cursor: paying ? 'default' : 'pointer',
            fontFamily: BRAND.font, textAlign: 'left',
            opacity: paying && paying !== 'card' ? 0.45 : 1,
          }}>
            <div style={{
              width: 34, height: 22, borderRadius: 4, background: '#1A1F71',
              color: '#fff', fontSize: 8.5, fontWeight: 800,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>VISA</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: '#16130E' }}>
                {paying === 'card' ? 'Charging…' : 'Visa •••• 4242'}
              </div>
              <div style={{ fontSize: 10.5, color: '#9A9285' }}>Saved on this device</div>
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 800, color: '#16130E' }}>{money(total)}</div>
          </button>

          <div style={{ fontSize: 10, color: '#9A9285', marginTop: 10, textAlign: 'center' }}>
            Demo only — no card is charged.
          </div>
        </Sheet>
      )}

      {/* ── Receipt ──────────────────────────────────────────────── */}
      {sheet === 'done' && (
        <Sheet onClose={reset}>
          <div style={{ textAlign: 'center', padding: '6px 0 2px' }}>
            <div style={{
              width: 46, height: 46, borderRadius: '50%', margin: '0 auto 12px',
              background: '#E9F6EF', color: '#0E7C5A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, fontWeight: 800,
            }}>✓</div>
            <div style={{ fontSize: 17, fontWeight: 800, color: '#16130E' }}>Order placed</div>
            <div style={{ fontSize: 12, color: '#7A7266', marginTop: 4 }}>
              Demo Cafe · Table 4 · #{1040 + count}
            </div>
          </div>
          <div style={{ background: '#FAF9F6', borderRadius: 12, padding: 12, margin: '14px 0' }}>
            {lines.map((l) => (
              <div key={l.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#4A443B', marginBottom: 5 }}>
                <span>{l.qty}× {l.name}</span><span>{money(l.price * l.qty)}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid #EFEBE3', marginTop: 8, paddingTop: 8, fontSize: 13.5, fontWeight: 800, color: '#16130E' }}>
              <span>Paid</span><span>{money(total)}</span>
            </div>
          </div>
          <div style={{ fontSize: 11.5, color: '#7A7266', textAlign: 'center', lineHeight: 1.5 }}>
            Your guest keeps this receipt on their device — and can order again without re-entering anything.
          </div>
          <button onClick={reset} style={payBtn(brandDark)}>Start over</button>
        </Sheet>
      )}
    </PhoneShell>
  );
}

/* ── small shared pieces ─────────────────────────────────────── */

function Sheet({ children, onClose }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 6, display: 'flex', alignItems: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,16,10,0.42)' }} />
      <div style={{
        position: 'relative', width: '100%', background: BRAND.white,
        borderRadius: '18px 18px 0 0', padding: 16, maxHeight: '86%', overflowY: 'auto',
      }}>{children}</div>
    </div>
  );
}

function SheetHead({ title, onClose, closeLabel = 'Close' }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
      <div style={{ fontSize: 16, fontWeight: 800, color: '#16130E' }}>{title}</div>
      <button onClick={onClose} style={{
        border: 'none', background: 'none', cursor: 'pointer',
        fontSize: 12.5, fontWeight: 700, color: '#7A7266', fontFamily: BRAND.font,
      }}>{closeLabel}</button>
    </div>
  );
}

function Totals({ subtotal, tax, tip, tipPct, total, money }) {
  const rows = [['Subtotal', subtotal], [`Est. tax (${(TAX_RATE * 100).toFixed(2)}%)`, tax]]
    .concat(tip > 0 ? [[`Tip (${tipPct}%)`, tip]] : []);
  return (
    <div>
      {rows.map(([label, val]) => (
        <div key={label} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#7A7266', marginBottom: 5 }}>
          <span>{label}</span><span>{money(val)}</span>
        </div>
      ))}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderTop: '1px solid #EFEBE3', marginTop: 9, paddingTop: 9,
      }}>
        <span style={{ fontSize: 15, fontWeight: 800, color: '#16130E' }}>Total</span>
        <span style={{ fontSize: 17, fontWeight: 800, color: '#16130E' }}>{money(total)}</span>
      </div>
    </div>
  );
}

function payBtn(bg) {
  return {
    width: '100%', height: 44, borderRadius: 12, border: 'none', background: bg,
    color: '#fff', fontSize: 13.5, fontWeight: 800, cursor: 'pointer',
    fontFamily: BRAND.font, marginTop: 14,
  };
}

function stepStyle(brand) {
  return {
    width: 24, height: 24, borderRadius: 999, cursor: 'pointer',
    border: `1px solid ${brand}44`, background: BRAND.white, color: brand,
    fontSize: 14, fontWeight: 800, lineHeight: 1, padding: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: BRAND.font,
  };
}

/** Brand hex → rgba, so the frosted bar can be tinted without going opaque. */
function hexRgba(h, a) {
  const m = /^#?([0-9a-f]{6})$/i.exec(String(h || ''));
  if (!m) return `rgba(255,255,255,${a})`;
  const n = parseInt(m[1], 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

window.MenuDemo = MenuDemo;
window.PhoneShell = PhoneShell;