// landing-mockups.jsx — Product mockup components for the landing pillars.
// MockOrderQueue, MockAIStudio, MockLoyaltyCampaign, MockMenuBuilder.

// ── MockOrderQueue: live admin order queue ──────────────────────────────────
function MockOrderQueue() {
  const rows = [
    { id: '#A2918', cust: 'Maya R.', items: '2× Honey-butter chicken · Hibiscus lemonade', total: '$47.50', status: 'new',       eta: '35m', ch: 'Pickup' },
    { id: '#A2917', cust: 'Diego P.', items: '1× Smashburger · Mac & cheese',                  total: '$27.00', status: 'preparing', eta: '12m', ch: 'Pickup' },
    { id: '#A2916', cust: 'Sara L.',  items: 'Truffle flatbread · Caesar · Cake',              total: '$38.00', status: 'preparing', eta: '4m',  ch: 'Dine-in' },
    { id: '#A2915', cust: 'Priya N.', items: '2× Pancakes · Eggs benedict',                    total: '$51.50', status: 'ready',     eta: '—',   ch: 'Pickup' },
    { id: '#A2914', cust: 'Tom O.',   items: '4× Cookie · Risotto',                            total: '$37.00', status: 'delivery',  eta: '—',  ch: 'Dine-in' },
  ];
  const statusStyles = {
    new:       { bg: '#FFE4CC', fg: '#9A3412', dot: '#F97316', label: 'New' },
    preparing: { bg: '#FEF3C7', fg: '#92400E', dot: '#F59E0B', label: 'Preparing' },
    ready:     { bg: '#DCFCE7', fg: '#166534', dot: '#16A34A', label: 'Ready' },
    delivery:  { bg: '#EDE9FE', fg: '#5B21B6', dot: '#8B5CF6', label: 'Completed' },
  };
  return (
    <div style={{ fontFamily: LP_FB, color: LP_INK }}>
      {/* Title bar */}
      <div style={{
        padding: '16px 22px 14px',
        borderBottom: `1px solid ${LP_BORDER}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: LP_FN, fontWeight: 800, fontSize: 16, letterSpacing: '-0.015em',
          }}>Live order queue</div>
          <div style={{ fontSize: 11.5, color: LP_DIM, marginTop: 2 }}>5 active · auto-refresh on</div>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 999,
          background: '#DCFCE7', color: '#166534',
          fontSize: 11, fontWeight: 700,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 99, background: '#22C55E',
            animation: 'lp-pulse 1.6s ease-in-out infinite',
          }}/>
          Live
        </span>
      </div>
      {/* Header row */}
      <div style={{
        display: 'grid', gridTemplateColumns: '78px 1fr 80px 96px 70px',
        padding: '9px 22px',
        fontFamily: LP_FM, fontSize: 10, color: LP_DIM,
        letterSpacing: '0.1em', textTransform: 'uppercase',
        background: 'rgba(28,16,9,0.02)',
        borderBottom: `1px solid ${LP_BORDER}`,
      }}>
        <span>Order</span><span>Items</span><span>Total</span><span>Status</span><span style={{ textAlign: 'right' }}>ETA</span>
      </div>
      {/* Rows */}
      {rows.map((r, i) => {
        const s = statusStyles[r.status];
        return (
          <div key={r.id} style={{
            display: 'grid', gridTemplateColumns: '78px 1fr 80px 96px 70px',
            padding: '14px 22px', alignItems: 'center',
            borderBottom: i < rows.length - 1 ? `1px solid ${LP_BORDER}` : 'none',
            background: i === 0 ? LP_AMBER_SOFT : 'transparent',
            borderLeft: i === 0 ? `3px solid ${LP_AMBER}` : '3px solid transparent',
            paddingLeft: i === 0 ? 19 : 22,
          }}>
            <div>
              <div style={{ fontFamily: LP_FM, fontSize: 12, fontWeight: 600, color: LP_INK }}>{r.id}</div>
              <div style={{ fontSize: 10.5, color: LP_DIM, marginTop: 1 }}>{r.ch}</div>
            </div>
            <div style={{ minWidth: 0, paddingRight: 8 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>{r.cust}</div>
              <div style={{
                fontSize: 11.5, color: LP_DIM, marginTop: 1,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{r.items}</div>
            </div>
            <div style={{ fontWeight: 700, fontSize: 12.5, fontVariantNumeric: 'tabular-nums' }}>{r.total}</div>
            <div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '3px 8px', borderRadius: 999,
                background: s.bg, color: s.fg,
                fontSize: 11, fontWeight: 700,
              }}>
                <span style={{ width: 5, height: 5, borderRadius: 99, background: s.dot }}/>
                {s.label}
              </span>
            </div>
            <div style={{ fontSize: 11.5, color: LP_DIM, fontWeight: 600, textAlign: 'right' }}>{r.eta}</div>
          </div>
        );
      })}
    </div>
  );
}

// ── MockAIStudio: AI menu studio ─────────────────────────────────────────────
function MockAIStudio() {
  return (
    <div style={{
      background: LP_CREAM, borderRadius: 18, overflow: 'hidden',
      border: `1px solid ${LP_BORDER}`,
      boxShadow: '0 32px 80px rgba(28,16,9,0.18), 0 4px 12px rgba(28,16,9,0.08)',
      fontFamily: LP_FB,
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 22px',
        background: LP_INK, color: LP_CREAM,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7,
            background: `linear-gradient(135deg, ${LP_AMBER}, ${LP_BERRY})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <LPIcon name="sparkle" size={13} stroke={LP_CREAM} sw={2.2}/>
          </div>
          <div>
            <div style={{ fontFamily: LP_FN, fontWeight: 800, fontSize: 14 }}>AI Menu Studio</div>
            <div style={{ fontSize: 10.5, color: 'rgba(255,251,245,0.55)' }}>Brunch menu · 12 items</div>
          </div>
        </div>
        <span style={{
          fontFamily: LP_FM, fontSize: 10, padding: '3px 8px', borderRadius: 6,
          background: 'rgba(255,251,245,0.08)', color: 'rgba(255,251,245,0.65)',
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Draft</span>
      </div>

      <div className="lp-mock-grid" style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 380 }}>
        {/* Sidebar - actions */}
        <div style={{
          background: 'rgba(28,16,9,0.02)',
          borderRight: `1px solid ${LP_BORDER}`,
          padding: '14px 12px',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{
            fontFamily: LP_FM, fontSize: 10, color: LP_DIM,
            letterSpacing: '0.1em', textTransform: 'uppercase', padding: '4px 8px 8px',
          }}>Generate</div>
          {[
            { icon: 'wand',  label: 'Write descriptions', active: true },
            { icon: 'globe', label: 'Translate · 6 langs' },
            { icon: 'chart', label: 'Pricing analysis' },
            { icon: 'sparkle', label: 'Enhance photos' },
          ].map(a => (
            <div key={a.label} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 10px', borderRadius: 8,
              background: a.active ? LP_CREAM : 'transparent',
              border: a.active ? `1px solid ${LP_BORDER}` : '1px solid transparent',
              fontFamily: LP_FB, fontSize: 12.5, fontWeight: a.active ? 600 : 500,
              color: a.active ? LP_INK : LP_MUTED,
              cursor: 'pointer',
            }}>
              <LPIcon name={a.icon} size={14} stroke={a.active ? LP_AMBER_DEEP : LP_DIM} sw={1.8}/>
              {a.label}
            </div>
          ))}

          <div style={{
            fontFamily: LP_FM, fontSize: 10, color: LP_DIM,
            letterSpacing: '0.1em', textTransform: 'uppercase', padding: '18px 8px 8px',
          }}>Voice</div>
          <div style={{
            display: 'flex', gap: 4, padding: 3, borderRadius: 7,
            background: 'rgba(28,16,9,0.05)',
          }}>
            {['Warm', 'Plain', 'Bold'].map((v, i) => (
              <button key={v} style={{
                flex: 1, padding: '5px 6px', border: 0, borderRadius: 5,
                background: i === 0 ? LP_CREAM : 'transparent',
                color: i === 0 ? LP_INK : LP_DIM,
                fontFamily: LP_FB, fontSize: 11, fontWeight: 600, cursor: 'pointer',
                boxShadow: i === 0 ? '0 1px 2px rgba(28,16,9,0.08)' : 'none',
              }}>{v}</button>
            ))}
          </div>
        </div>

        {/* Main: item being generated */}
        <div style={{ padding: '18px 22px' }}>
          {/* item header */}
          <div style={{ display: 'flex', gap: 14, marginBottom: 16 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 12, flexShrink: 0,
              background: `linear-gradient(135deg, ${LP_AMBER_TINT}, ${LP_AMBER_SOFT})`,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'repeating-linear-gradient(45deg, transparent 0 4px, rgba(249,115,22,0.15) 4px 8px)',
              }}/>
              <div style={{
                position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: LP_FM, fontSize: 8, color: LP_AMBER_DEEP,
              }}>PANCAKES</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: LP_FN, fontWeight: 800, fontSize: 16, letterSpacing: '-0.015em',
              }}>Maple-banana pancakes</div>
              <div style={{ fontSize: 12, color: LP_DIM, marginTop: 2 }}>
                Brunch · $13.50 · added 12 min ago
              </div>
              <div style={{ display: 'flex', gap: 5, marginTop: 8 }}>
                {['Sweet', 'Comfort', 'Brunch staple', 'Local syrup'].map(t => (
                  <span key={t} style={{
                    padding: '2px 8px', borderRadius: 999,
                    background: LP_AMBER_SOFT, color: LP_AMBER_DEEP,
                    fontSize: 10, fontWeight: 600,
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </div>

          {/* AI suggestion */}
          <div style={{
            background: 'linear-gradient(135deg, rgba(249,115,22,0.05), rgba(219,39,119,0.04))',
            border: `1px solid rgba(249,115,22,0.18)`,
            borderRadius: 12, padding: 16,
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: LP_FM, fontSize: 10, color: LP_AMBER_DEEP,
              letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10,
              fontWeight: 700,
            }}>
              <LPIcon name="sparkle" size={11} stroke={LP_AMBER_DEEP} sw={2.4}/>
              AI · suggestion (warm voice)
            </div>
            <p style={{
              margin: 0, fontSize: 13.5, lineHeight: 1.55, color: LP_INK, textWrap: 'pretty',
            }}>
              Buttermilk stack, fluffy in the middle, lacy on the edges, layered with caramelised banana and Vermont maple. Comes with soft butter on the side — the way it should.
            </p>
            <div style={{
              marginTop: 12, paddingTop: 12, borderTop: '1px dashed rgba(249,115,22,0.25)',
              display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
            }}>
              <button style={{
                padding: '7px 12px', border: 0, borderRadius: 7,
                background: LP_INK, color: LP_CREAM,
                fontFamily: LP_FB, fontSize: 12, fontWeight: 600, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <LPIcon name="check" size={12} sw={2.4}/> Use this
              </button>
              <button style={{
                padding: '7px 12px', border: `1px solid ${LP_BORDER_STRONG}`, borderRadius: 7,
                background: LP_CREAM, color: LP_INK,
                fontFamily: LP_FB, fontSize: 12, fontWeight: 600, cursor: 'pointer',
              }}>Try another</button>
              <button style={{
                padding: '7px 10px', border: 0, borderRadius: 7,
                background: 'transparent', color: LP_DIM,
                fontFamily: LP_FB, fontSize: 12, fontWeight: 500, cursor: 'pointer',
              }}>Edit</button>
              <span style={{
                marginLeft: 'auto', fontFamily: LP_FM, fontSize: 10.5, color: LP_DIM,
                letterSpacing: '0.06em',
              }}>3 of 12 · 24 sec</span>
            </div>
          </div>

          {/* progress dots */}
          <div style={{
            marginTop: 16, display: 'flex', alignItems: 'center', gap: 8,
            fontSize: 11.5, color: LP_DIM,
          }}>
            <div style={{ flex: 1, height: 4, background: 'rgba(28,16,9,0.06)', borderRadius: 99 }}>
              <div style={{ width: '25%', height: '100%', background: LP_AMBER, borderRadius: 99 }}/>
            </div>
            <span style={{ fontFamily: LP_FM, fontSize: 11 }}>3/12</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── MockLoyaltyCampaign: side-by-side loyalty + campaign builder ────────────
function MockLoyaltyCampaign() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      {/* Left: loyalty member card preview */}
      <div style={{
        background: LP_INK, color: LP_CREAM, borderRadius: 16,
        padding: '24px 24px 22px',
        boxShadow: '0 24px 56px rgba(28,16,9,0.22)',
        position: 'relative', overflow: 'hidden',
        fontFamily: LP_FB,
      }}>
        {/* big amber gradient ring */}
        <div style={{
          position: 'absolute', right: -50, top: -50,
          width: 220, height: 220, borderRadius: '50%',
          background: `radial-gradient(circle, ${LP_AMBER} 0%, transparent 65%)`,
          opacity: 0.5,
        }}/>
        <div style={{
          fontFamily: LP_FM, fontSize: 10.5, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'rgba(255,251,245,0.55)',
        }}>RobinRun loyalty</div>
        <div style={{
          marginTop: 14, fontFamily: LP_FN, fontWeight: 900, fontSize: 26,
          letterSpacing: '-0.02em', lineHeight: 1.05,
        }}>Maya R.</div>
        <div style={{
          marginTop: 2, fontSize: 12, color: 'rgba(255,251,245,0.55)',
        }}>Gold tier · since Jan 2026</div>

        {/* points */}
        <div style={{
          marginTop: 22, display: 'flex', alignItems: 'flex-end', gap: 6,
          fontFamily: LP_FN, fontWeight: 900, color: LP_AMBER,
          letterSpacing: '-0.03em', lineHeight: 1,
        }}>
          <span style={{ fontSize: 48 }}><CountUp to={1240} duration={1800}/></span>
          <span style={{ fontSize: 16, color: 'rgba(255,251,245,0.6)', paddingBottom: 6 }}>points</span>
        </div>

        {/* progress to next */}
        <div style={{ marginTop: 16, position: 'relative' }}>
          <div style={{
            height: 6, borderRadius: 99,
            background: 'rgba(255,251,245,0.1)',
          }}>
            <div style={{
              width: '62%', height: '100%', borderRadius: 99,
              background: `linear-gradient(90deg, ${LP_AMBER}, ${LP_BERRY})`,
            }}/>
          </div>
          <div style={{
            marginTop: 8, display: 'flex', justifyContent: 'space-between',
            fontSize: 11, color: 'rgba(255,251,245,0.6)',
          }}>
            <span>760 to <strong style={{ color: LP_CREAM }}>Platinum</strong></span>
            <span>2,000</span>
          </div>
        </div>

        {/* rewards */}
        <div style={{
          marginTop: 18, padding: '10px 12px',
          background: 'rgba(255,251,245,0.06)',
          borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: LP_AMBER, color: LP_INK,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <LPIcon name="heart" size={15} stroke={LP_INK} sw={2.2}/>
          </div>
          <div style={{ flex: 1, fontSize: 12, lineHeight: 1.4 }}>
            <div style={{ fontWeight: 700, color: LP_CREAM }}>Free pastry available</div>
            <div style={{ color: 'rgba(255,251,245,0.55)' }}>Tap to redeem at checkout</div>
          </div>
        </div>
      </div>

      {/* Right: campaign builder */}
      <div style={{
        background: LP_CREAM, borderRadius: 16, overflow: 'hidden',
        border: `1px solid ${LP_BORDER}`,
        boxShadow: '0 24px 56px rgba(28,16,9,0.12)',
        fontFamily: LP_FB,
      }}>
        <div style={{
          padding: '14px 18px',
          borderBottom: `1px solid ${LP_BORDER}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <LPIcon name="megaphone" size={15} stroke={LP_AMBER_DEEP} sw={1.8}/>
            <span style={{ fontFamily: LP_FN, fontWeight: 800, fontSize: 14 }}>New campaign</span>
          </div>
          <span style={{
            fontFamily: LP_FM, fontSize: 10, padding: '3px 7px', borderRadius: 5,
            background: LP_AMBER_SOFT, color: LP_AMBER_DEEP,
            letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700,
          }}>Draft</span>
        </div>
        <div style={{ padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* segment */}
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: LP_DIM, marginBottom: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Send to</div>
            <div style={{
              padding: '8px 10px', borderRadius: 7,
              border: `1px solid ${LP_BORDER}`,
              background: LP_AMBER_SOFT,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontSize: 12.5, color: LP_INK,
            }}>
              <span><strong>Brunch regulars</strong> · ordered ≥3× in last 30 days</span>
              <span style={{ fontFamily: LP_FM, fontSize: 11, color: LP_AMBER_DEEP, fontWeight: 700 }}>284</span>
            </div>
          </div>
          {/* channel */}
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: LP_DIM, marginBottom: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Channel</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { label: 'Push', active: true },
                { label: 'SMS' },
                { label: 'Email' },
              ].map((c, i) => (
                <span key={c.label} style={{
                  padding: '6px 11px', borderRadius: 7,
                  border: `1px solid ${c.active ? LP_AMBER : LP_BORDER}`,
                  background: c.active ? LP_AMBER_SOFT : LP_CREAM,
                  color: c.active ? LP_AMBER_DEEP : LP_INK,
                  fontSize: 12, fontWeight: 600, cursor: 'pointer',
                }}>{c.label}</span>
              ))}
            </div>
          </div>
          {/* preview */}
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: LP_DIM, marginBottom: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Preview</div>
            <div style={{
              background: '#1C1009', color: LP_CREAM, borderRadius: 10, padding: '11px 13px',
              display: 'flex', gap: 10, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 7,
                background: `linear-gradient(135deg, ${LP_AMBER}, ${LP_AMBER_DEEP})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <RobinRunMark size={18} birdColor={LP_CREAM} birdShade={LP_PAPER} inkColor={LP_INK}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: LP_FN, fontWeight: 800, fontSize: 12 }}>RobinRun</span>
                  <span style={{ fontSize: 10, color: 'rgba(255,251,245,0.45)' }}>now</span>
                </div>
                <div style={{ fontSize: 12, marginTop: 2, lineHeight: 1.4 }}>
                  Saturday brunch is back at Golden Karahi 🥞 Free naan with your usual — today only.
                </div>
              </div>
            </div>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 4,
          }}>
            <span style={{ fontSize: 11, color: LP_DIM }}>Est. <strong style={{ color: LP_INK }}>$840–$1,180</strong> in revenue</span>
            <button style={{
              padding: '7px 14px', border: 0, borderRadius: 7,
              background: LP_AMBER, color: LP_CREAM,
              fontFamily: LP_FN, fontSize: 12, fontWeight: 800, cursor: 'pointer',
              boxShadow: `0 4px 12px ${LP_AMBER}44`,
            }}>Send now</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  MockOrderQueue, MockAIStudio, MockLoyaltyCampaign,
});