// mockups.jsx — phone + dashboard mockups used in hero and feature tours
// Exposes: PhoneMockup, DashboardMockup, LucideIcon

const { useState, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────
// Tiny Lucide icon wrapper — uses lucide.createIcons() at mount
// ──────────────────────────────────────────────────────────────
function LucideIcon({ name, size = 16, color, strokeWidth = 1.5, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (window.lucide && ref.current) {
      window.lucide.createIcons({ icons: window.lucide.icons, attrs: {}, nameAttr: 'data-lucide', root: ref.current });
    }
  }, [name, size, color]);
  return (
    <span ref={ref} style={{ display: 'inline-flex', ...style }}>
      <i data-lucide={name} style={{ width: size, height: size, color, strokeWidth }}></i>
    </span>
  );
}

// ──────────────────────────────────────────────────────────────
// Phone status bar — iOS style
// ──────────────────────────────────────────────────────────────
function PhoneStatusBar({ time = "9:41" }) {
  return (
    <div className="phone-statusbar">
      <span>{time}</span>
      <div className="notch"></div>
      <div className="right">
        <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="6" width="3" height="4" rx="0.5"/><rect x="4" y="4" width="3" height="6" rx="0.5"/><rect x="8" y="2" width="3" height="8" rx="0.5"/><rect x="12" y="0" width="3" height="10" rx="0.5"/></svg>
        <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><path d="M7 9.5 A4 4 0 0 0 10 8 A4 4 0 0 0 7 6.5 A4 4 0 0 0 4 8 A4 4 0 0 0 7 9.5 M7 6 A6 6 0 0 0 12 4 A6 6 0 0 0 7 2 A6 6 0 0 0 2 4 A6 6 0 0 0 7 6 Z" fillRule="evenodd"/></svg>
        <svg width="22" height="10" viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor" opacity="0.5"/><rect x="2" y="2" width="13" height="6" rx="1" fill="currentColor"/><rect x="20" y="3" width="1.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"/></svg>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Phone mockup — Velocity Brew home screen
// ──────────────────────────────────────────────────────────────
const PHONE_SCREEN_MAP = {
  home:     "assets/ss_home.png?v=8",
  rewards:  "assets/ss_rewards.png?v=8",
  menucat:  "assets/ss_menucat.png?v=8",
  orders:   "assets/ss_orders.png?v=8",
  account:  "assets/ss_account.png?v=8",
  tracking: "assets/ss_home2.png?v=8",
};

// ──────────────────────────────────────────────────────────────
// Skeleton loaders — shown while phone screenshots load
// ──────────────────────────────────────────────────────────────
function PhoneIOSSkeleton() {
  // Mimics the menu categories screen layout
  return (
    <div style={{ position:'absolute', inset:0, background:'#ede8e2', overflow:'hidden', zIndex:1 }}>
      {/* Header: shop name + search icon */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'56px 18px 14px' }}>
        <div className="skel-l" style={{ width:108, height:13 }} />
        <div className="skel-l" style={{ width:28, height:28, borderRadius:'50%' }} />
      </div>
      {/* Category chips */}
      <div style={{ display:'flex', gap:8, padding:'0 18px 16px' }}>
        {[54,72,46,60].map((w,i) => (
          <div key={i} className="skel-l" style={{ width:w, height:28, borderRadius:14 }} />
        ))}
      </div>
      {/* Section label */}
      <div className="skel-l" style={{ width:88, height:9, margin:'2px 18px 14px' }} />
      {/* Menu item rows */}
      {[0,1,2,3].map(i => (
        <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'8px 18px' }}>
          <div className="skel-l" style={{ width:54, height:54, borderRadius:10, flexShrink:0 }} />
          <div style={{ flex:1 }}>
            <div className="skel-l" style={{ width:'72%', height:11 }} />
            <div className="skel-l" style={{ width:'46%', height:9, marginTop:7 }} />
            <div className="skel-l" style={{ width:'28%', height:11, marginTop:7 }} />
          </div>
        </div>
      ))}
      {/* Bottom nav */}
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:58, background:'#e4ddd0', display:'flex', alignItems:'center', justifyContent:'space-around', padding:'0 8px 8px' }}>
        {[true,false,false,false].map((active,i) => (
          <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:5 }}>
            <div className={active ? '' : 'skel-l'} style={{ width:22, height:22, borderRadius:4, background: active ? '#C26913' : undefined }} />
            <div className="skel-l" style={{ width:active?26:20, height:5, borderRadius:3 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function PhoneAndroidSkeleton() {
  // Mimics the drink detail screen layout — cream background to match iOS skeleton
  return (
    <div style={{ position:'absolute', inset:0, background:'#ede8e2', overflow:'hidden', zIndex:1 }}>
      {/* Hero image area */}
      <div className="skel-l" style={{ height:'42%', borderRadius:0 }} />
      {/* Back button */}
      <div className="skel-l" style={{ position:'absolute', top:48, left:18, width:32, height:32, borderRadius:'50%' }} />
      {/* Content */}
      <div style={{ padding:'18px 18px 0' }}>
        <div className="skel-l" style={{ width:'76%', height:18 }} />
        <div className="skel-l" style={{ width:'44%', height:11, marginTop:10 }} />
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:18 }}>
          <div className="skel-l" style={{ width:68, height:22, borderRadius:6 }} />
          <div style={{ width:38, height:38, borderRadius:'50%', background:'rgba(194,105,19,0.3)' }} />
        </div>
        {/* Option chips */}
        <div className="skel-l" style={{ width:78, height:9, marginTop:24 }} />
        <div style={{ display:'flex', gap:8, marginTop:12 }}>
          {[0,1,2].map(i => (
            <div key={i} className="skel-l" style={{ width:60, height:30, borderRadius:15 }} />
          ))}
        </div>
      </div>
      {/* Add to cart button */}
      <div style={{ position:'absolute', bottom:24, left:18, right:18, height:48, borderRadius:12, background:'rgba(194,105,19,0.18)' }} />
    </div>
  );
}

function PhoneMockup({ src, screen }) {
  const [loaded, setLoaded] = useState(false);
  const resolvedSrc = src || PHONE_SCREEN_MAP[screen] || "assets/ss_home.png?v=8";
  return (
    <div className="phone phone-ios">
      {/* iPhone hardware buttons */}
      <div className="hw-mute" />
      <div className="hw-vol-up" />
      <div className="hw-vol-down" />
      <div className="hw-power" />
      <div className="phone-screen" style={{ background: '#ede8e2' }}>
        {!loaded && <PhoneIOSSkeleton />}
        {/* Screenshot — img renders sharper than background-image on HiDPI screens */}
        <img src={resolvedSrc} alt=""
          onLoad={() => setLoaded(true)}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'left top',
            display: 'block', pointerEvents: 'none',
            imageRendering: 'auto',
            transform: 'translateZ(0)',
            opacity: loaded ? 1 : 0,
            transition: 'opacity 0.2s ease',
          }} />

        {/* ── Status bar ── */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 44,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          paddingLeft: 24, paddingRight: 22,
          zIndex: 25, pointerEvents: 'none',
          /* Cream background fading into transparent — covers the app's own header */
          background: 'linear-gradient(to bottom, #ede8e2 65%, transparent)',
        }}>
          {/* Time */}
          <span style={{
            fontSize: 13, fontWeight: 700, color: '#1a1a1a',
            letterSpacing: '-0.3px', lineHeight: 1,
            fontFamily: 'system-ui,-apple-system,sans-serif',
          }}>9:41</span>

          {/* Right: signal + wifi + battery */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            {/* Signal bars */}
            <svg width="17" height="12" viewBox="0 0 17 12" fill="none">
              <rect x="0"   y="8"   width="3" height="4"  rx="0.8" fill="#1a1a1a"/>
              <rect x="4.5" y="5.5" width="3" height="6.5" rx="0.8" fill="#1a1a1a"/>
              <rect x="9"   y="3"   width="3" height="9"  rx="0.8" fill="#1a1a1a"/>
              <rect x="13.5" y="0"  width="3" height="12" rx="0.8" fill="#1a1a1a"/>
            </svg>
            {/* WiFi */}
            <svg width="15" height="12" viewBox="0 0 15 12" fill="none">
              <circle cx="7.5" cy="10.8" r="1.3" fill="#1a1a1a"/>
              <path d="M4.6 8C5.6 7 6.5 6.5 7.5 6.5S9.4 7 10.4 8l1.1-1.1C10.1 5.5 8.9 5 7.5 5S4.9 5.5 3.5 6.9L4.6 8z" fill="#1a1a1a"/>
              <path d="M1.8 5.2C3.4 3.6 5.3 2.7 7.5 2.7S11.6 3.6 13.2 5.2l1.1-1.1C12.6 2.4 10.2 1.2 7.5 1.2S2.4 2.4.7 4.1l1.1 1.1z" fill="#1a1a1a"/>
            </svg>
            {/* Battery */}
            <svg width="25" height="12" viewBox="0 0 25 12" fill="none">
              <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="#1a1a1a" strokeOpacity="0.35"/>
              <rect x="22" y="3.8" width="2.5" height="4.4" rx="1.25" fill="#1a1a1a" fillOpacity="0.4"/>
              <rect x="2"  y="2"   width="17" height="8"   rx="2"   fill="#1a1a1a"/>
            </svg>
          </div>
        </div>

        {/* ── Dynamic Island ── */}
        <div style={{
          position: 'absolute', top: 10, left: '50%',
          transform: 'translateX(-50%)',
          width: 76, height: 24,
          background: '#000',
          borderRadius: 999,
          zIndex: 26,
          boxShadow: '0 2px 8px rgba(0,0,0,0.55)',
        }} />

        {/* ── iOS gesture indicator (home bar) ── */}
        <div style={{
          position: 'absolute', bottom: 8, left: '50%',
          transform: 'translateX(-50%)',
          width: 120, height: 4,
          background: 'rgba(0,0,0,0.25)',
          borderRadius: 999,
          zIndex: 25,
          pointerEvents: 'none',
        }} />

      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Android phone mockup — drink detail screen, punch-hole chrome
// ──────────────────────────────────────────────────────────────
function AndroidPhoneMockup({ src = "assets/ss_americano_crop.png?v=7" }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className="phone phone-android">
      {/* Android hardware buttons — both on right */}
      <div className="hw-power" />
      <div className="hw-vol" />
      <div className="phone-screen" style={{ background: '#ede8e2' }}>
        {!loaded && <PhoneAndroidSkeleton />}
        {/* Screenshot */}
        <img src={src} alt=""
          onLoad={() => setLoaded(true)}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center top',
            display: 'block', pointerEvents: 'none',
            imageRendering: 'auto',
            transform: 'translateZ(0)',
            opacity: loaded ? 1 : 0,
            transition: 'opacity 0.2s ease',
          }} />

        {/* ── Android status bar: all icons + time on the RIGHT ── */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 40,
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
          paddingRight: 18, gap: 5,
          zIndex: 25, pointerEvents: 'none',
          background: 'linear-gradient(to bottom, rgba(10,10,10,0.82) 55%, transparent)',
        }}>
          {/* WiFi */}
          <svg width="15" height="12" viewBox="0 0 15 12" fill="none">
            <circle cx="7.5" cy="10.8" r="1.3" fill="#fff"/>
            <path d="M4.6 8C5.6 7 6.5 6.5 7.5 6.5S9.4 7 10.4 8l1.1-1.1C10.1 5.5 8.9 5 7.5 5S4.9 5.5 3.5 6.9L4.6 8z" fill="#fff"/>
            <path d="M1.8 5.2C3.4 3.6 5.3 2.7 7.5 2.7S11.6 3.6 13.2 5.2l1.1-1.1C12.6 2.4 10.2 1.2 7.5 1.2S2.4 2.4.7 4.1l1.1 1.1z" fill="#fff"/>
          </svg>
          {/* Signal bars */}
          <svg width="17" height="12" viewBox="0 0 17 12" fill="none">
            <rect x="0"    y="8"   width="3" height="4"   rx="0.8" fill="#fff"/>
            <rect x="4.5"  y="5.5" width="3" height="6.5" rx="0.8" fill="#fff"/>
            <rect x="9"    y="3"   width="3" height="9"   rx="0.8" fill="#fff"/>
            <rect x="13.5" y="0"   width="3" height="12"  rx="0.8" fill="#fff"/>
          </svg>
          {/* Battery */}
          <svg width="25" height="12" viewBox="0 0 25 12" fill="none">
            <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="#fff" strokeOpacity="0.5"/>
            <rect x="22" y="3.8" width="2.5" height="4.4" rx="1.25" fill="#fff" fillOpacity="0.5"/>
            <rect x="2"  y="2"   width="17" height="8"   rx="2"   fill="#fff"/>
          </svg>
          {/* Time — right side on Android */}
          <span style={{
            fontSize: 12, fontWeight: 700, color: '#fff',
            letterSpacing: '-0.2px', lineHeight: 1, marginLeft: 2,
            fontFamily: 'system-ui,-apple-system,sans-serif',
          }}>9:41</span>
        </div>

        {/* ── Punch-hole camera (centered, Android style) ── */}
        <div style={{
          position: 'absolute', top: 12, left: '50%',
          transform: 'translateX(-50%)',
          width: 13, height: 13,
          background: '#000',
          borderRadius: '50%',
          zIndex: 26,
          boxShadow: '0 0 0 2px rgba(0,0,0,0.35)',
        }} />

        {/* ── Bottom fade — subtle gesture area feel ── */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 28,
          background: 'linear-gradient(to bottom, transparent, rgba(14,14,14,0.7) 60%)',
          zIndex: 24, pointerEvents: 'none',
        }} />

        {/* ── Android gesture indicator ── */}
        <div style={{
          position: 'absolute', bottom: 8, left: '50%',
          transform: 'translateX(-50%)',
          width: 110, height: 4,
          background: 'rgba(255,255,255,0.3)',
          borderRadius: 999,
          zIndex: 25,
          pointerEvents: 'none',
        }} />

      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Dashboard mockup — live order queue (+ menu / analytics tabs)
// ──────────────────────────────────────────────────────────────

const SAMPLE_ORDERS = [
  { id: "#4429", name: "Alex K.", meta: "Member · 4 visits/wk", items: ["1× Iced Oat Vanilla Latte", "1× Croissant"], lane: "lane-1", laneLabel: "LANE 2", timer: "0:42", status: "pulling", barista: "JM" },
  { id: "#4428", name: "Priya S.", meta: "First-time", items: ["1× Cortado", "1× Drip — house"], lane: "lane-2", laneLabel: "LANE 1", timer: "1:18", status: "pulling", barista: "MK" },
  { id: "#4427", name: "Daniel R.", meta: "Member · 2 visits/wk", items: ["2× Flat White", "1× Almond croissant"], lane: "counter", laneLabel: "COUNTER", timer: "2:04", status: "queued", barista: "—" },
  { id: "#4426", name: "Sara T.", meta: "Member · 8 visits/wk", items: ["1× Pour-over Ethiopia", "1× Cold brew"], lane: "lane-1", laneLabel: "LANE 2", timer: "2:51", status: "queued", barista: "—" },
  { id: "#4425", name: "Marco V.", meta: "Member · 3 visits/wk", items: ["1× Iced Americano"], lane: "counter", laneLabel: "COUNTER", timer: "0:08", status: "ready", barista: "JM" },
];

function OrderRow({ order, live }) {
  const timerCls = order.status === "ready" ? "ok" :
    parseInt(order.timer) >= 2 ? "warn" : "";
  return (
    <div className="order-row" data-status={order.status}>
      <div className="order-id">{order.id}</div>
      <div className="customer">
        <div className="nm">{order.name}</div>
        <div className="meta">{order.meta}</div>
      </div>
      <div className="items">
        {order.items.map((it, i) => (
          <div key={i}><span className="x">{it.split(' ')[0]}</span>{it.split(' ').slice(1).join(' ')}</div>
        ))}
      </div>
      <div>
        <span className={`lane ${order.lane}`}>
          <span className="ind"></span>
          {order.laneLabel}
        </span>
      </div>
      <div className={`timer ${timerCls}`}>{order.timer}</div>
      <span className={`status-pill ${order.status}`}>
        <span className="ind"></span>
        {order.status === "pulling" ? "Pulling" : order.status === "ready" ? "Ready" : "Queued"}
      </span>
    </div>
  );
}

function DashKPIs() {
  return (
    <div className="dash-kpis">
      <div className="kpi">
        <div className="label">Today · Revenue</div>
        <div className="v">$3,482</div>
        <div className="delta"><LucideIcon name="arrow-up-right" size={11}/> 12.4% vs yest</div>
      </div>
      <div className="kpi">
        <div className="label">Orders</div>
        <div className="v">284</div>
        <div className="delta"><LucideIcon name="arrow-up-right" size={11}/> 31 right now</div>
      </div>
      <div className="kpi crema">
        <div className="label">Avg pull-up</div>
        <div className="v">2:48</div>
        <div className="delta down"><LucideIcon name="arrow-down-right" size={11}/> 8s vs yest</div>
      </div>
      <div className="kpi">
        <div className="label">Loyalty redeem</div>
        <div className="v">18</div>
        <div className="delta"><LucideIcon name="arrow-up-right" size={11}/> 6.3% conv</div>
      </div>
    </div>
  );
}

function DashQueue() {
  return (
    <div className="dash-queue">
      {SAMPLE_ORDERS.map(o => <OrderRow key={o.id} order={o} />)}
    </div>
  );
}

function DashMenu() {
  const items = [
    { name: "Iced Oat Vanilla Latte", price: "$5.25", sold: 142, stock: "live" },
    { name: "Cortado", price: "$4.25", sold: 88, stock: "live" },
    { name: "Pour-over Ethiopia", price: "$5.75", sold: 31, stock: "low" },
    { name: "Flat White", price: "$4.75", sold: 96, stock: "live" },
    { name: "Cold Brew", price: "$4.50", sold: 64, stock: "live" },
    { name: "Espresso Tonic", price: "$5.00", sold: 22, stock: "off" },
  ];
  return (
    <div className="dash-menu-grid">
      {items.map((it, i) => (
        <div className="menu-item" key={i}>
          <div className="name">{it.name}</div>
          <div className="row">
            <span>{it.price}</span>
            <span>{it.sold} sold today</span>
          </div>
          <div className="row">
            <span className={`stock ${it.stock}`}>
              <span style={{width:6,height:6,borderRadius:999,background:'currentColor',display:'inline-block'}}></span>
              {it.stock === 'live' ? 'In stock' : it.stock === 'low' ? 'Low — beans' : 'Hidden'}
            </span>
            <span style={{color:'var(--fg-3)'}}>Edit</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function DashAnalytics() {
  // Hand-drawn SVG sparkline + bar chart
  const hours = ["6a","7a","8a","9a","10a","11a","12p","1p","2p","3p","4p","5p"];
  const orders = [4, 18, 42, 38, 26, 22, 31, 28, 19, 15, 24, 21];
  const max = Math.max(...orders);
  const W = 460, H = 200, pad = 24;
  const bw = (W - pad*2) / orders.length - 6;
  return (
    <div className="dash-analytics">
      <div className="chart-card">
        <h4>Orders by hour <span className="meta">TODAY</span></h4>
        <svg className="chart-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{height: 240}}>
          {[0.25,0.5,0.75,1].map((p,i)=>(
            <line key={i} x1={pad} x2={W-pad} y1={H-pad-p*(H-pad*2)} y2={H-pad-p*(H-pad*2)} stroke="var(--line)" strokeWidth="1" strokeDasharray="2 4"/>
          ))}
          {orders.map((v,i) => {
            const x = pad + i * ((W - pad*2) / orders.length) + 3;
            const h = (v/max) * (H - pad*2);
            const active = i === 2;
            return (
              <g key={i}>
                <rect x={x} y={H-pad-h} width={bw} height={h} rx="2"
                  fill={active ? "var(--olv-accent)" : "var(--bg-3)"} />
                <text x={x + bw/2} y={H - 6} textAnchor="middle" fontSize="9" fontFamily="var(--font-mono)" fill="var(--fg-3)">{hours[i]}</text>
              </g>
            );
          })}
        </svg>
      </div>
      <div className="chart-card">
        <h4>Top drinks <span className="meta">7-DAY</span></h4>
        <div style={{display:'grid', gap: 12, marginTop: 16}}>
          {[
            {n:"Iced Oat Vanilla Latte", v:982, pct:1},
            {n:"Cortado", v:704, pct:0.72},
            {n:"Flat White", v:561, pct:0.57},
            {n:"Cold Brew", v:412, pct:0.42},
            {n:"Pour-over Ethiopia", v:248, pct:0.25},
          ].map((d,i)=>(
            <div key={i}>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:11,marginBottom:5}}>
                <span style={{color:'var(--fg-1)'}}>{d.n}</span>
                <span style={{fontFamily:'var(--font-mono)', color:'var(--fg-2)'}}>{d.v}</span>
              </div>
              <div style={{height:5, background:'var(--bg-3)', borderRadius:999, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${d.pct*100}%`, background: i===0?'var(--olv-accent)':'var(--fg-3)', borderRadius:999}}></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardMockup({ tab: tabProp, showChrome = true, shopName = "Velocity Brew", shopLoc = "HAYES VALLEY · SF" }) {
  const [tab, setTab] = useState(tabProp || "queue");
  useEffect(() => { if (tabProp) setTab(tabProp); }, [tabProp]);

  return (
    <div className="dash">
      {showChrome && (
        <div className="dash-chrome">
          <span className="dot" style={{background:'#FF5F57'}}></span>
          <span className="dot" style={{background:'#FEBC2E'}}></span>
          <span className="dot" style={{background:'#28C840'}}></span>
          <div className="url">
            <LucideIcon name="lock" size={10} style={{color:'var(--jade)'}}/>
            velocitybrew.olvire.com/queue
          </div>
        </div>
      )}
      <div className="dash-body">
        <aside className="dash-side">
          <div className="dash-shop">
            <div className="logo">V</div>
            <div className="meta">
              <div className="nm">{shopName}</div>
              <div className="loc">{shopLoc}</div>
            </div>
            <LucideIcon name="chevrons-up-down" size={14} style={{color:'var(--fg-3)'}}/>
          </div>
          <nav className="dash-nav">
            <div className={`item ${tab==='queue'?'active':''}`} onClick={()=>setTab('queue')}>
              <span className="ic"><LucideIcon name="activity" size={14}/></span>
              <span>Live queue</span>
              <span className="badge">5</span>
            </div>
            <div className={`item ${tab==='menu'?'active':''}`} onClick={()=>setTab('menu')}>
              <span className="ic"><LucideIcon name="coffee" size={14}/></span>
              <span>Menu</span>
            </div>
            <div className={`item ${tab==='analytics'?'active':''}`} onClick={()=>setTab('analytics')}>
              <span className="ic"><LucideIcon name="bar-chart-3" size={14}/></span>
              <span>Analytics</span>
            </div>
            <div className="item">
              <span className="ic"><LucideIcon name="tag" size={14}/></span>
              <span>Promo codes</span>
            </div>
            <div className="item">
              <span className="ic"><LucideIcon name="star" size={14}/></span>
              <span>Loyalty</span>
            </div>
            <div className="sect">ORGANIZATION</div>
            <div className="item">
              <span className="ic"><LucideIcon name="map-pin" size={14}/></span>
              <span>Locations</span>
            </div>
            <div className="item">
              <span className="ic"><LucideIcon name="users" size={14}/></span>
              <span>Team</span>
            </div>
            <div className="item">
              <span className="ic"><LucideIcon name="settings" size={14}/></span>
              <span>Settings</span>
            </div>
          </nav>
        </aside>

        <div className="dash-main">
          <div className="dash-top">
            <div>
              <h2>{tab === 'queue' ? 'Live queue' : tab === 'menu' ? 'Menu' : 'Analytics'}</h2>
              <div className="sub">
                {tab === 'queue' ? '5 ACTIVE · 2 PULLING · AVG 2:48' :
                 tab === 'menu' ? '24 ITEMS · 22 LIVE · 2 HIDDEN' :
                 'TODAY · WED 15 MAY · UPDATED LIVE'}
              </div>
            </div>
            <div style={{display:'flex', gap:8, alignItems:'center'}}>
              <span className="lane" style={{color:'var(--jade)', borderColor:'rgba(0,200,150,0.3)'}}>
                <span className="ind" style={{animation:'pulse-ind 1.4s infinite'}}></span>
                LIVE
              </span>
              <button className="btn btn-ghost" style={{padding:'8px 14px', fontSize:12}}>
                <LucideIcon name="download" size={13}/> Export
              </button>
            </div>
          </div>

          <DashKPIs />

          {tab === 'queue' && (
            <>
              <div className="dash-tabs">
                <div className="tab active">All <span className="n">5</span></div>
                <div className="tab">Lane 1 <span className="n">1</span></div>
                <div className="tab">Lane 2 <span className="n">2</span></div>
                <div className="tab">Counter <span className="n">2</span></div>
              </div>
              <DashQueue />
            </>
          )}
          {tab === 'menu' && <DashMenu />}
          {tab === 'analytics' && <DashAnalytics />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneMockup, AndroidPhoneMockup, DashboardMockup, LucideIcon, PhoneAbstract, DashboardAbstract });

// ──────────────────────────────────────────────────────────────
// ABSTRACT placeholders — for use before final UI is committed
// ──────────────────────────────────────────────────────────────
function PhoneAbstract() {
  return (
    <div className="phone phone-abstract">
      <div className="phone-screen">
        <PhoneStatusBar />
        <div className="ab-pad">
          <div className="ab-row" style={{ justifyContent: 'space-between' }}>
            <div className="ab-dot"></div>
            <div className="ab-dot"></div>
          </div>
          <div className="ab-bar" style={{ width: '38%', marginTop: 28, height: 8 }}></div>
          <div className="ab-bar" style={{ width: '72%', marginTop: 14, height: 22, background: 'var(--fg-1)' }}></div>
          <div className="ab-bar" style={{ width: '58%', marginTop: 6, height: 22, background: 'var(--olv-accent)' }}></div>
          <div className="ab-bar" style={{ width: '46%', marginTop: 18, height: 6 }}></div>

          <div className="ab-card" style={{ marginTop: 22 }}>
            <div className="ab-row" style={{ justifyContent: 'space-between' }}>
              <div className="ab-bar" style={{ width: 60, height: 5, background: 'var(--olv-accent)' }}></div>
              <div className="ab-bar" style={{ width: 40, height: 5 }}></div>
            </div>
            <div className="ab-row" style={{ marginTop: 14, gap: 12 }}>
              <div className="ab-square"></div>
              <div style={{ flex: 1 }}>
                <div className="ab-bar" style={{ width: '80%', height: 10 }}></div>
                <div className="ab-bar" style={{ width: '60%', height: 6, marginTop: 6 }}></div>
                <div className="ab-bar" style={{ width: '30%', height: 10, marginTop: 8 }}></div>
              </div>
            </div>
            <div className="ab-cta"></div>
          </div>

          <div className="ab-bar" style={{ width: '30%', height: 6, marginTop: 22 }}></div>
          <div className="ab-row" style={{ gap: 8, marginTop: 10 }}>
            <div className="ab-tile"></div>
            <div className="ab-tile"></div>
            <div className="ab-tile"></div>
          </div>
        </div>
        <div className="phone-nav">
          <div className="pn active">
            <div className="ab-dot" style={{ width: 14, height: 14, background: 'var(--olv-accent)' }}></div>
          </div>
          <div className="pn"><div className="ab-dot" style={{ width: 14, height: 14 }}></div></div>
          <div className="pn"><div className="ab-dot" style={{ width: 14, height: 14 }}></div></div>
          <div className="pn"><div className="ab-dot" style={{ width: 14, height: 14 }}></div></div>
        </div>
      </div>
    </div>
  );
}

function DashboardAbstract({ shopName = "Your shop", shopLoc = "LOCATION · CITY" }) {
  return (
    <div className="dash dash-abstract">
      <div className="dash-chrome">
        <span className="dot" style={{background:'#FF5F57'}}></span>
        <span className="dot" style={{background:'#FEBC2E'}}></span>
        <span className="dot" style={{background:'#28C840'}}></span>
        <div className="url">
          <LucideIcon name="lock" size={10} style={{color:'var(--jade)'}}/>
          velocitybrew.olvire.com
        </div>
      </div>
      <div className="dash-body">
        <aside className="dash-side">
          <div className="dash-shop">
            <div className="logo"><div className="ab-dot" style={{width:10,height:10,background:'currentColor'}}></div></div>
            <div className="meta">
              <div className="ab-bar" style={{ width: '70%', height: 7 }}></div>
              <div className="ab-bar" style={{ width: '50%', height: 5, marginTop: 4 }}></div>
            </div>
          </div>
          <div style={{ display: 'grid', gap: 10, padding: '4px 4px' }}>
            <div className="ab-bar" style={{ width: '60%', height: 5, marginBottom: 4 }}></div>
            {[1,0,0,0,0].map((on,i) => (
              <div key={i} className="ab-row" style={{ gap: 10, padding: '6px 8px', borderRadius: 6,
                background: on ? 'var(--bg-2)' : 'transparent' }}>
                <div className="ab-dot" style={{ width: 10, height: 10, background: on ? 'var(--olv-accent)' : 'var(--fg-3)' }}></div>
                <div className="ab-bar" style={{ flex: 1, height: 8 }}></div>
              </div>
            ))}
            <div className="ab-bar" style={{ width: '60%', height: 5, marginTop: 12, marginBottom: 4 }}></div>
            {[0,0,0].map((_,i) => (
              <div key={i} className="ab-row" style={{ gap: 10, padding: '6px 8px' }}>
                <div className="ab-dot" style={{ width: 10, height: 10, background: 'var(--fg-3)' }}></div>
                <div className="ab-bar" style={{ flex: 1, height: 8 }}></div>
              </div>
            ))}
          </div>
        </aside>

        <div className="dash-main">
          <div className="dash-top">
            <div>
              <div className="ab-bar" style={{ width: 140, height: 18, background: 'var(--fg-1)' }}></div>
              <div className="ab-bar" style={{ width: 220, height: 7, marginTop: 8 }}></div>
            </div>
            <div className="ab-row" style={{ gap: 8 }}>
              <div className="ab-pill"></div>
              <div className="ab-pill" style={{ width: 70 }}></div>
            </div>
          </div>

          <div className="dash-kpis">
            {[0,0,1,0].map((on,i) => (
              <div className="kpi" key={i}>
                <div className="ab-bar" style={{ width: '60%', height: 6 }}></div>
                <div className="ab-bar" style={{ width: '70%', height: 22, marginTop: 12,
                  background: on ? 'var(--olv-accent)' : 'var(--fg-1)' }}></div>
                <div className="ab-bar" style={{ width: '55%', height: 5, marginTop: 6 }}></div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 14, borderBottom: '1px solid var(--line)', marginBottom: 16, paddingBottom: 10 }}>
            <div className="ab-bar" style={{ width: 64, height: 8, background: 'var(--fg-1)' }}></div>
            <div className="ab-bar" style={{ width: 50, height: 8 }}></div>
            <div className="ab-bar" style={{ width: 50, height: 8 }}></div>
            <div className="ab-bar" style={{ width: 50, height: 8 }}></div>
          </div>

          <div style={{ display: 'grid', gap: 10 }}>
            {[0,1,0,0,2].map((kind,i) => (
              <div className="ab-row" key={i}
                   style={{
                     padding: '14px 16px',
                     background: 'var(--bg-2)',
                     border: `1px solid ${kind===1?'var(--olv-accent)':kind===2?'rgba(0,200,150,0.4)':'var(--line)'}`,
                     borderRadius: 10,
                     gap: 16
                   }}>
                <div className="ab-bar" style={{ width: 36, height: 8 }}></div>
                <div style={{ flex: 1.4 }}>
                  <div className="ab-bar" style={{ width: '70%', height: 9, background: 'var(--fg-1)' }}></div>
                  <div className="ab-bar" style={{ width: '40%', height: 5, marginTop: 5 }}></div>
                </div>
                <div style={{ flex: 1.4 }}>
                  <div className="ab-bar" style={{ width: '80%', height: 6 }}></div>
                  <div className="ab-bar" style={{ width: '60%', height: 6, marginTop: 5 }}></div>
                </div>
                <div className="ab-pill" style={{ width: 70, background: 'var(--bg-0)',
                  color: kind===1?'var(--olv-accent)':kind===2?'var(--jade)':'var(--fg-2)' }}>
                  <div className="ab-dot" style={{ width: 6, height: 6, background: 'currentColor', marginRight: 6 }}></div>
                  <div className="ab-bar" style={{ width: 36, height: 5, background: 'currentColor', opacity: 0.7 }}></div>
                </div>
                <div className="ab-bar" style={{ width: 32, height: 10,
                  background: kind===1?'var(--olv-accent)':kind===2?'var(--jade)':'var(--fg-2)' }}></div>
                <div className="ab-pill" style={{ width: 80,
                  background: kind===1?'rgba(255,159,28,0.08)':kind===2?'rgba(0,200,150,0.08)':'var(--bg-0)',
                  borderColor: kind===1?'rgba(255,159,28,0.3)':kind===2?'rgba(0,200,150,0.3)':'var(--line)',
                  color: kind===1?'var(--olv-accent)':kind===2?'var(--jade)':'var(--fg-2)'
                }}>
                  <div className="ab-dot" style={{ width: 6, height: 6, background: 'currentColor', marginRight: 6 }}></div>
                  <div className="ab-bar" style={{ width: 40, height: 5, background: 'currentColor', opacity: 0.7 }}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}