// app-previews.jsx — registry of per-app surface previews (admin + storefront)
// Used in two places:
//   1. Library cards — mini live preview thumbnail + click → AppPreviewDialog
//   2. Editor preview pane — SurfaceTabs let user flip admin ↔ storefront

// ────────────────────────────────────────────────────
// Registry — for each library app, declare:
//   surfaces: array of 'admin' | 'storefront' (which surfaces it lives on)
//   home:     primary surface (used for card thumbnail)
//   Admin:    React component rendering an admin preview (fake data, fixed scale)
//   Storefront: React component rendering a storefront preview (fake data)
//   summary:  one-liner shown in preview dialog
// All previews render at a "natural" 720×440 logical size and are scaled
// to fit thumbnails / dialog. Use only inline styles to keep them isolated.
// ────────────────────────────────────────────────────

const previewBox = {
  width: 720, height: 440,
  background: '#fff',
  fontFamily: 'var(--p-font-family)',
  color: '#1a1c1e',
  overflow: 'hidden',
  display: 'flex', flexDirection: 'column',
  flexShrink: 0,
};

const previewSubtle = '#6b6e74';
const previewBorder = '#eaeaea';
const previewBg = '#f6f6f7';

// ─── Reusable mini chunks ─────────────────────────
function MiniPH({ h = 60, label, color = '#f0eee6' }) {
  return (
    <div style={{
      height: h, background: color, borderRadius: 4,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--p-font-family-mono)', fontSize: 10,
      color: '#9aa0a8',
    }}>{label}</div>
  );
}

function MiniBadge({ tone = 'success', children }) {
  const colors = {
    success: ['#d4f5e3', '#0d6638'],
    info: ['#dbeafe', '#1e4a8b'],
    warning: ['#fef3c7', '#854500'],
    neutral: ['#ececec', '#3a3a3a'],
    magic: ['#ede5fa', '#5b3da3'],
  };
  const [bg, fg] = colors[tone] || colors.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: bg, color: fg,
      padding: '2px 7px', borderRadius: 999,
      fontSize: 10, fontWeight: 600,
      lineHeight: 1.4,
    }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: fg }} />
      {children}
    </span>
  );
}

// ─── Admin chrome (for non-editor contexts) ────────
// Tiny "Operations" surrounding chrome that wraps an admin preview body
function AdminPreviewShell({ title, eyebrow, children }) {
  return (
    <div style={previewBox}>
      {/* fake operations topbar */}
      <div style={{
        height: 28, background: '#1a1a1a', color: 'white',
        display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', flexShrink: 0,
      }}>
        <div style={{
          width: 16, height: 16, borderRadius: 4,
          background: 'linear-gradient(135deg,#fff,#d4d4d4)', color: '#1a1a1a',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 10, fontWeight: 700,
        }}>E</div>
        <div style={{ fontSize: 11, fontWeight: 600 }}>Ecommos</div>
        <div style={{ fontSize: 10, opacity: 0.55 }}>· Operations · {eyebrow}</div>
        <div style={{ flex: 1 }} />
        <div style={{ width: 14, height: 14, borderRadius: '50%', background: 'oklch(0.72 0.12 30)' }} />
      </div>

      <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
        {/* fake sidebar */}
        <div style={{
          width: 90, background: '#fafafb', borderRight: '1px solid ' + previewBorder,
          padding: '10px 6px', display: 'flex', flexDirection: 'column', gap: 3, flexShrink: 0,
        }}>
          {['Home', 'Operations', 'Creator', 'Storefront', 'Agent'].map((s, i) => (
            <div key={s} style={{
              padding: '4px 6px', fontSize: 9.5, borderRadius: 4,
              background: s === 'Operations' ? '#ececec' : 'transparent',
              color: s === 'Operations' ? '#1a1c1e' : previewSubtle,
              fontWeight: s === 'Operations' ? 600 : 400,
            }}>{s}</div>
          ))}
        </div>
        {/* body */}
        <div style={{ flex: 1, minWidth: 0, overflow: 'hidden', padding: 14 }}>
          <div style={{ fontSize: 9.5, color: previewSubtle, textTransform: 'uppercase', letterSpacing: 0.06, fontWeight: 500 }}>{eyebrow}</div>
          <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: -0.3, marginBottom: 10 }}>{title}</div>
          {children}
        </div>
      </div>
    </div>
  );
}

// ─── Storefront chrome ────────────────────────────
function StorefrontPreviewShell({ children }) {
  return (
    <div style={previewBox}>
      {/* fake browser bar */}
      <div style={{
        background: '#ececec', padding: '5px 10px',
        display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
        borderBottom: '1px solid #d8d8d8',
      }}>
        <div style={{ display: 'flex', gap: 4 }}>
          <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#ff5f57' }} />
          <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#febc2e' }} />
          <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#28c840' }} />
        </div>
        <div style={{
          flex: 1, maxWidth: 320, background: '#fff',
          borderRadius: 4, padding: '3px 8px',
          fontSize: 10, color: previewSubtle,
          display: 'flex', alignItems: 'center', gap: 5,
        }}>
          <svg viewBox="0 0 20 20" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="9" width="10" height="8" rx="1.5" /><path d="M7.5 9V7a2.5 2.5 0 015 0v2" /></svg>
          sarahslinen.com
        </div>
      </div>
      {/* storefront */}
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', background: '#fff', display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>
  );
}

// Mini storefront header used inside StorefrontPreviewShell so widgets
// can sit on top of an actual store-looking page.
function StorefrontPageBody({ children }) {
  return (
    <>
      <div style={{
        padding: '10px 20px', borderBottom: '1px solid ' + previewBorder,
        display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0,
      }}>
        <div style={{ fontWeight: 700, fontSize: 13, letterSpacing: -0.3 }}>sarah's linen.</div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 14, fontSize: 10.5, color: '#3a3a3a' }}>
          {['Shop', 'New', 'Bestsellers', 'About'].map((l) => <span key={l}>{l}</span>)}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 8, color: '#3a3a3a' }}>
          <svg viewBox="0 0 20 20" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="9" cy="9" r="5" /><path d="M13 13l4 4" /></svg>
          <svg viewBox="0 0 20 20" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 3h2l2 12h11l2-8H6" /></svg>
        </div>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </>
  );
}

// ─── Per-app previews ─────────────────────────────

// COUPON MANAGER — admin only (table of codes)
function CouponManagerAdmin() {
  return (
    <AdminPreviewShell eyebrow="Coupon Manager" title="Active Coupons · 6 codes">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, marginBottom: 10 }}>
        {[['Active', '4', 'success'], ['Today', '128'], ['Revenue', '$3.4k'], ['Avg.', '18%']].map(([l, v, t], i) => (
          <div key={i} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: '6px 8px' }}>
            <div style={{ fontSize: 9, color: previewSubtle, textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <div style={{ fontSize: 15, fontWeight: 700 }}>{v}</div>
              {t && <MiniBadge tone={t}>live</MiniBadge>}
            </div>
          </div>
        ))}
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, overflow: 'hidden' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 2fr 1fr 1fr',
          padding: '6px 10px', background: previewBg, fontSize: 9.5,
          color: previewSubtle, textTransform: 'uppercase', fontWeight: 600, letterSpacing: 0.06,
        }}>
          <div>Code</div><div>Discount</div><div>Status</div><div>Used</div>
        </div>
        {[
          ['SUMMER25', '25% off', 'Active', '1,042', 'success'],
          ['WELCOME10', '$10 off first', 'Active', '612', 'success'],
          ['SHIPFREE', 'Free shipping', 'Active', '2,380', 'success'],
          ['FLASH50', '50% off · flash', 'Scheduled', '0', 'info'],
        ].map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '2fr 2fr 1fr 1fr',
            padding: '7px 10px', fontSize: 11,
            borderTop: '1px solid ' + previewBorder, alignItems: 'center',
          }}>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontWeight: 600, fontSize: 10.5 }}>{r[0]}</div>
            <div>{r[1]}</div>
            <div><MiniBadge tone={r[4]}>{r[2]}</MiniBadge></div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', color: previewSubtle, fontSize: 10.5 }}>{r[3]}</div>
          </div>
        ))}
      </div>
    </AdminPreviewShell>
  );
}

// COUPON MANAGER — storefront variant (visible-codes block, common pattern)
function CouponManagerStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Summer drop</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 8 }}>Linen, slow-made.</div>
            <div style={{ fontSize: 10.5, color: previewSubtle, marginBottom: 10 }}>Garment-dyed. 32 styles.</div>
            <button style={{ background: '#1a1c1e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: 5, fontWeight: 600, fontSize: 10.5 }}>Shop the drop</button>
          </div>
          <MiniPH h={140} label="{hero.jpg}" />
        </div>

        {/* Visible codes strip — the storefront-facing piece of Coupon Manager */}
        <div style={{
          margin: '6px 20px 8px', padding: '10px 12px',
          border: '2px solid var(--p-color-bg-fill-magic-active)',
          borderRadius: 8, background: '#fdfbf8',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 8,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>Active codes block</div>
          <div style={{ fontSize: 10, fontWeight: 600, marginBottom: 6, color: previewSubtle, textTransform: 'uppercase', letterSpacing: 0.06 }}>Live discounts</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {[['SUMMER25', '25% off'], ['SHIPFREE', 'Free shipping'], ['WELCOME10', '$10 first order']].map(([c, d], i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                padding: '4px 8px', background: 'white',
                border: '1px dashed ' + previewBorder, borderRadius: 5,
                fontSize: 10,
              }}>
                <span style={{ fontFamily: 'var(--p-font-family-mono)', fontWeight: 700 }}>{c}</span>
                <span style={{ color: previewSubtle }}>— {d}</span>
                <span style={{ fontSize: 9, color: 'var(--p-color-text-magic)', fontWeight: 600, marginLeft: 2 }}>copy</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '4px 20px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
          {[1, 2, 3, 4].map((n) => (
            <div key={n}><MiniPH h={56} label={`{p${n}.jpg}`} /><div style={{ fontSize: 9.5, marginTop: 3 }}>Linen Tee</div></div>
          ))}
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// SPIN TO WIN — storefront widget
function SpinToWinStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Summer drop · 24</div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.7, lineHeight: 1.05, marginBottom: 6 }}>Linen, slow-made.</div>
            <div style={{ fontSize: 11, color: previewSubtle, marginBottom: 10 }}>Garment-dyed. 32 styles.</div>
            <button style={{ background: '#1a1c1e', color: 'white', border: 'none', padding: '7px 14px', borderRadius: 6, fontWeight: 600, fontSize: 11 }}>Shop the drop</button>
          </div>
          <MiniPH h={140} label="{hero.jpg}" />
        </div>
        <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {[1, 2, 3, 4].map((n) => (
            <div key={n}><MiniPH h={70} label={`{p${n}.jpg}`} /><div style={{ fontSize: 10, marginTop: 4 }}>Linen Tee</div><div style={{ fontSize: 9.5, color: previewSubtle }}>$48</div></div>
          ))}
        </div>

        {/* Spin to Win — the widget being previewed */}
        <div style={{
          position: 'absolute', bottom: 12, right: 12,
          width: 190, background: 'white',
          border: '2px solid var(--p-color-bg-fill-magic-active)',
          borderRadius: 12, boxShadow: '0 12px 32px rgba(0,0,0,0.15)',
          padding: 11,
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 10,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '2px 7px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 9, fontWeight: 600,
          }}>Spin to Win widget</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
            <div style={{
              width: 34, height: 34, borderRadius: '50%',
              background: 'conic-gradient(from 90deg, #f0c850, #d97757, #5e8e3e, #5e8eb8, #f0c850)',
              border: '2px solid #1a1c1e',
            }} />
            <div>
              <div style={{ fontSize: 11, fontWeight: 700 }}>Spin to win 10% off!</div>
              <div style={{ fontSize: 9.5, color: previewSubtle }}>One spin per visitor</div>
            </div>
          </div>
          <button style={{
            width: '100%', padding: '6px 0', background: '#1a1c1e', color: 'white',
            border: 'none', borderRadius: 6, fontWeight: 600, fontSize: 10.5,
          }}>Spin now</button>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

function SpinToWinAdmin() {
  return (
    <AdminPreviewShell eyebrow="Spin to Win" title="Campaign · paused">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginBottom: 10 }}>
        {[['Spins this week', '412'], ['Conversion', '8.4%'], ['Avg. discount', '12%']].map(([l, v]) => (
          <div key={l} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: '6px 8px' }}>
            <div style={{ fontSize: 9, color: previewSubtle, textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: 10, marginBottom: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 7 }}>Prize wheel</div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{
            width: 70, height: 70, borderRadius: '50%',
            background: 'conic-gradient(from 90deg, #f0c850, #d97757, #5e8e3e, #5e8eb8, #f0c850)',
            border: '3px solid #1a1c1e', flexShrink: 0,
          }} />
          <div style={{ flex: 1, display: 'grid', gap: 3 }}>
            {[['10% off', '40%'], ['Free shipping', '30%'], ['$5 off', '20%'], ['Try again', '10%']].map(([p, w]) => (
              <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5 }}>
                <div style={{ width: 8, height: 8, borderRadius: 2, background: '#d97757' }} />
                <span style={{ flex: 1 }}>{p}</span>
                <span style={{ color: previewSubtle, fontFamily: 'var(--p-font-family-mono)' }}>{w}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <MiniBadge tone="warning">paused · inventory low</MiniBadge>
        <MiniBadge tone="info">v4</MiniBadge>
      </div>
    </AdminPreviewShell>
  );
}

// LOYALTY HEARTS — admin (member list) + storefront (header chip)
function LoyaltyHeartsAdmin() {
  return (
    <AdminPreviewShell eyebrow="Loyalty Hearts" title="Members · 1,240">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginBottom: 10 }}>
        {[['Members', '1,240', 'success'], ['Bronze→Silver', '+42'], ['Points issued', '128k']].map(([l, v, t], i) => (
          <div key={i} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: '6px 8px' }}>
            <div style={{ fontSize: 9, color: previewSubtle, textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <div style={{ fontSize: 15, fontWeight: 700 }}>{v}</div>
              {t && <MiniBadge tone={t}>+7d</MiniBadge>}
            </div>
          </div>
        ))}
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, overflow: 'hidden' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', padding: '6px 10px',
          background: previewBg, fontSize: 9.5, color: previewSubtle, textTransform: 'uppercase', fontWeight: 600,
        }}>
          <div>Customer</div><div>Tier</div><div>Points</div><div>Last order</div>
        </div>
        {[
          ['Maya P.', 'Gold', '4,120', '2d ago'],
          ['Jordan K.', 'Silver', '1,840', '5d ago'],
          ['Ariel S.', 'Bronze', '420', 'Yesterday'],
          ['Linh T.', 'Gold', '6,800', '1h ago'],
        ].map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', padding: '7px 10px',
            fontSize: 11, borderTop: '1px solid ' + previewBorder, alignItems: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 18, height: 18, borderRadius: '50%', background: '#ece5d8', fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>{r[0][0]}</div>
              {r[0]}
            </div>
            <div><MiniBadge tone={r[1] === 'Gold' ? 'warning' : r[1] === 'Silver' ? 'neutral' : 'info'}>{r[1]}</MiniBadge></div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontSize: 10.5 }}>{r[2]}</div>
            <div style={{ color: previewSubtle, fontSize: 10.5 }}>{r[3]}</div>
          </div>
        ))}
      </div>
    </AdminPreviewShell>
  );
}

function LoyaltyHeartsStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Member · Gold</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.1, marginBottom: 8 }}>Hi Maya — you've got 4,120 hearts.</div>
            <div style={{ fontSize: 11, color: previewSubtle, marginBottom: 10 }}>880 hearts to your next reward.</div>
            {/* Progress bar */}
            <div style={{ height: 6, background: '#ececec', borderRadius: 4, overflow: 'hidden', marginBottom: 10 }}>
              <div style={{ width: '82%', height: '100%', background: 'linear-gradient(90deg,#d97757,#f0c850)' }} />
            </div>
            <button style={{ background: '#1a1c1e', color: 'white', border: 'none', padding: '7px 14px', borderRadius: 6, fontWeight: 600, fontSize: 11 }}>Redeem hearts</button>
          </div>
          <MiniPH h={140} label="{loyalty-hero.jpg}" color="#f5e8e2" />
        </div>

        {/* hearts pill in header (overlay arrow) */}
        <div style={{
          position: 'absolute', top: -28, right: 70,
          display: 'flex', alignItems: 'center', gap: 5,
          padding: '4px 9px', background: '#fff7f0',
          border: '2px solid var(--p-color-bg-fill-magic-active)',
          borderRadius: 999, fontSize: 10, fontWeight: 600,
        }}>
          <span style={{ color: '#d97757', fontSize: 11 }}>♥</span> 4,120
          <div style={{
            position: 'absolute', top: -12, right: 0,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
            whiteSpace: 'nowrap',
          }}>Hearts chip widget</div>
        </div>

        <div style={{ padding: '4px 20px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {[1, 2, 3, 4].map((n) => (
            <div key={n}><MiniPH h={60} label={`{p${n}.jpg}`} /><div style={{ fontSize: 10, marginTop: 4 }}>Linen Tee</div><div style={{ fontSize: 9.5, color: previewSubtle }}>$48 · 240 hearts</div></div>
          ))}
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// BUNDLE DEALS — admin (bundle list) + storefront (bundle block on PDP)
function BundleDealsAdmin() {
  return (
    <AdminPreviewShell eyebrow="Bundle Deals" title="Bundles · 6 active">
      <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
        <button style={{ padding: '4px 9px', fontSize: 10.5, borderRadius: 6, border: '1px solid #1a1c1e', background: '#1a1c1e', color: 'white', fontWeight: 600 }}>+ New bundle</button>
        <button style={{ padding: '4px 9px', fontSize: 10.5, borderRadius: 6, border: '1px solid ' + previewBorder, background: 'white' }}>Sort</button>
      </div>
      <div style={{ display: 'grid', gap: 6 }}>
        {[
          ['Linen Starter', '3 items', '15% off', '$1.2k', 'success'],
          ['Summer Set', '4 items', '20% off', '$840', 'success'],
          ['Camp Trio', '3 items', '10% off', '$320', 'info'],
        ].map(([n, ct, off, rev, t], i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            border: '1px solid ' + previewBorder, borderRadius: 6, padding: '8px 10px',
          }}>
            <div style={{ display: 'flex', gap: -4 }}>
              {[1, 2, 3].map((k) => <div key={k} style={{ width: 26, height: 26, borderRadius: 5, background: ['#f0eee6', '#ece5d8', '#e8e0d0'][k - 1], marginLeft: k > 1 ? -8 : 0, border: '2px solid white' }} />)}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600 }}>{n}</div>
              <div style={{ fontSize: 10, color: previewSubtle }}>{ct} · {off}</div>
            </div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontSize: 11, fontWeight: 600 }}>{rev}</div>
            <MiniBadge tone={t}>{t === 'success' ? 'live' : 'scheduled'}</MiniBadge>
          </div>
        ))}
      </div>
    </AdminPreviewShell>
  );
}

function BundleDealsStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 16 }}>
          <MiniPH h={160} label="{linen-tee.jpg}" color="#ece5d8" />
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Linen / Tees</div>
            <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.5, marginBottom: 4 }}>Slow Linen Tee</div>
            <div style={{ fontSize: 12, marginBottom: 10 }}>$48</div>

            {/* Bundle block widget */}
            <div style={{
              border: '2px solid var(--p-color-bg-fill-magic-active)',
              borderRadius: 8, padding: 9, position: 'relative',
              background: '#fdfbf8',
            }}>
              <div style={{
                position: 'absolute', top: -10, left: 8,
                background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
                padding: '1px 6px', borderRadius: 4,
                fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
              }}>Bundle widget</div>
              <div style={{ fontSize: 10.5, fontWeight: 600, marginBottom: 5 }}>Bundle &amp; save 15%</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {[['Tee', '$48', true], ['Wide Pants', '$68', true], ['Camp Shirt', '$56', false]].map(([n, p, sel], i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10 }}>
                    <div style={{
                      width: 12, height: 12, borderRadius: 3,
                      background: sel ? '#1a1c1e' : 'white',
                      border: '1px solid ' + (sel ? '#1a1c1e' : previewBorder),
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: 'white', fontSize: 8,
                    }}>{sel && '✓'}</div>
                    <div style={{ flex: 1 }}>{n}</div>
                    <div style={{ fontFamily: 'var(--p-font-family-mono)', color: previewSubtle }}>{p}</div>
                  </div>
                ))}
              </div>
              <button style={{
                width: '100%', marginTop: 7, padding: '6px 0', background: '#1a1c1e',
                color: 'white', border: 'none', borderRadius: 5, fontWeight: 600, fontSize: 10.5,
              }}>Add bundle · $98.60 (save $17)</button>
            </div>
          </div>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// WISHLIST DRAWER — storefront drawer
function WishlistStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {[1, 2, 3, 4, 5, 6].map((n) => (
            <div key={n}>
              <div style={{ position: 'relative' }}>
                <MiniPH h={80} label={`{p${n}.jpg}`} />
                <div style={{
                  position: 'absolute', top: 5, right: 5,
                  width: 18, height: 18, borderRadius: '50%', background: 'white',
                  border: '1px solid ' + previewBorder, display: 'flex',
                  alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, color: n === 2 ? '#d97757' : '#9aa0a8',
                }}>♥</div>
              </div>
              <div style={{ fontSize: 10, marginTop: 4 }}>Linen item</div>
              <div style={{ fontSize: 9.5, color: previewSubtle }}>$48</div>
            </div>
          ))}
        </div>

        {/* Drawer */}
        <div style={{
          position: 'absolute', top: 0, right: 0, bottom: 0,
          width: 230, background: 'white',
          borderLeft: '2px solid var(--p-color-bg-fill-magic-active)',
          boxShadow: '-8px 0 24px rgba(0,0,0,0.08)',
          padding: 12, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 8,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>Wishlist drawer widget</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <span style={{ fontSize: 14, color: '#d97757' }}>♥</span>
            <div style={{ fontSize: 13, fontWeight: 700, flex: 1 }}>Your wishlist</div>
            <div style={{ fontSize: 11, color: previewSubtle }}>3 items</div>
          </div>
          {[['Linen Tee', '$48', 'Camp green'], ['Wide Pants', '$68', 'Sand'], ['Picnic Dress', '$92', 'Cream']].map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, padding: '7px 0', borderTop: i ? '1px solid ' + previewBorder : 'none' }}>
              <div style={{ width: 36, height: 36, borderRadius: 4, background: '#ece5d8', flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 10.5, fontWeight: 600 }}>{r[0]}</div>
                <div style={{ fontSize: 9.5, color: previewSubtle }}>{r[2]}</div>
                <div style={{ fontSize: 10, fontFamily: 'var(--p-font-family-mono)', marginTop: 2 }}>{r[1]}</div>
              </div>
            </div>
          ))}
          <div style={{ flex: 1 }} />
          <button style={{ padding: '7px 0', background: '#1a1c1e', color: 'white', border: 'none', borderRadius: 6, fontWeight: 600, fontSize: 11 }}>Add all to cart</button>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// REVIEWS WALL — storefront block
function ReviewsStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px' }}>
          <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 4 }}>Reviews</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, position: 'relative' }}>
            <div style={{ fontSize: 22, fontWeight: 700 }}>4.8</div>
            <div>
              <div style={{ color: '#d97757', fontSize: 14, letterSpacing: 1 }}>★★★★★</div>
              <div style={{ fontSize: 10, color: previewSubtle }}>312 reviews</div>
            </div>
            <div style={{
              position: 'absolute', top: -20, right: 0,
              background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
              padding: '1px 6px', borderRadius: 4,
              fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
            }}>Reviews block widget</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            {[
              ['Maya P.', '★★★★★', 'Perfect fit, the linen is so soft. Will buy again.'],
              ['Jordan K.', '★★★★★', 'Garment-dyed feel is exactly what I wanted.'],
              ['Linh T.', '★★★★☆', 'Lovely but runs a touch large. Sized down.'],
            ].map((r, i) => (
              <div key={i} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: 9 }}>
                <div style={{ color: '#d97757', fontSize: 11, marginBottom: 4 }}>{r[1]}</div>
                <div style={{ fontSize: 10.5, lineHeight: 1.5, marginBottom: 6, minHeight: 40 }}>{r[2]}</div>
                <div style={{ fontSize: 9.5, color: previewSubtle, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <div style={{ width: 14, height: 14, borderRadius: '50%', background: '#ece5d8' }} />
                  {r[0]} · verified
                </div>
              </div>
            ))}
          </div>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// DISCOUNT STACKER — admin (rules) + storefront (cart UI)
function DiscountStackerAdmin() {
  return (
    <AdminPreviewShell eyebrow="Discount Stacker" title="Stacking rules · v1 Pro">
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: 10, marginBottom: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8 }}>Global rules</div>
        <div style={{ display: 'grid', gap: 6 }}>
          {[
            ['Max codes per order', '2'],
            ['Exclude sale items', 'On'],
            ['Allow with free-shipping', 'On'],
            ['Stack with loyalty rewards', 'Off'],
          ].map(([l, v], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11 }}>
              <span style={{ flex: 1, color: previewSubtle }}>{l}</span>
              <span style={{
                background: v === 'On' || /\d/.test(v) ? '#d4f5e3' : '#ececec',
                color: v === 'On' || /\d/.test(v) ? '#0d6638' : '#3a3a3a',
                padding: '2px 8px', borderRadius: 4, fontFamily: 'var(--p-font-family-mono)', fontSize: 10, fontWeight: 600,
              }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: 10 }}>
        <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 7 }}>Per-code limits</div>
        {[
          ['SUMMER25', 'stackable', 'success'],
          ['WELCOME10', 'first-only', 'info'],
          ['VIP-LOYAL', 'no stack', 'warning'],
        ].map(([c, r, t], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderTop: i ? '1px solid ' + previewBorder : 'none' }}>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontSize: 10.5, fontWeight: 600, flex: 1 }}>{c}</div>
            <MiniBadge tone={t}>{r}</MiniBadge>
          </div>
        ))}
      </div>
    </AdminPreviewShell>
  );
}

function DiscountStackerStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Your cart · 3 items</div>
            {[['Linen Tee · M', '$48'], ['Wide Pants · L', '$68'], ['Camp Shirt · S', '$56']].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: i ? '1px solid ' + previewBorder : 'none' }}>
                <div style={{ width: 26, height: 26, borderRadius: 4, background: '#ece5d8' }} />
                <div style={{ flex: 1, fontSize: 10.5 }}>{r[0]}</div>
                <div style={{ fontSize: 10.5, fontFamily: 'var(--p-font-family-mono)' }}>{r[1]}</div>
              </div>
            ))}
          </div>
          <div style={{
            border: '2px solid var(--p-color-bg-fill-magic-active)', borderRadius: 8,
            padding: 10, position: 'relative', background: '#fdfbf8',
          }}>
            <div style={{
              position: 'absolute', top: -10, left: 8,
              background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
              padding: '1px 6px', borderRadius: 4,
              fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
            }}>Stacked codes block</div>
            <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 7 }}>Discount codes</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {[['SUMMER25', '−$43', 'success'], ['SHIPFREE', '−$8 shipping', 'success']].map((r, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 6, padding: '5px 7px',
                  background: '#d4f5e3', borderRadius: 5, fontSize: 10,
                }}>
                  <span style={{ fontFamily: 'var(--p-font-family-mono)', fontWeight: 700, flex: 1 }}>{r[0]}</span>
                  <span style={{ fontFamily: 'var(--p-font-family-mono)', color: '#0d6638', fontWeight: 600 }}>{r[1]}</span>
                </div>
              ))}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 4,
                border: '1px dashed ' + previewBorder, borderRadius: 5,
                padding: '4px 7px', fontSize: 10, color: previewSubtle,
              }}>+ Add another code · 1 of 2 used</div>
            </div>
            <div style={{ borderTop: '1px solid ' + previewBorder, marginTop: 8, paddingTop: 7, fontSize: 10.5 }}>
              <div style={{ display: 'flex' }}><span style={{ flex: 1, color: previewSubtle }}>Subtotal</span><span style={{ fontFamily: 'var(--p-font-family-mono)' }}>$172</span></div>
              <div style={{ display: 'flex', color: '#0d6638' }}><span style={{ flex: 1 }}>Discounts</span><span style={{ fontFamily: 'var(--p-font-family-mono)' }}>−$51</span></div>
              <div style={{ display: 'flex', fontWeight: 700, marginTop: 3 }}><span style={{ flex: 1 }}>Total</span><span style={{ fontFamily: 'var(--p-font-family-mono)' }}>$121</span></div>
            </div>
          </div>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// FAQ — storefront accordion
function FAQStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', maxWidth: 540, position: 'relative' }}>
          <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.4, marginBottom: 10 }}>Frequently asked</div>
          <div style={{
            position: 'absolute', top: 6, right: 16,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>FAQ block widget</div>
          {[
            ['How is your linen made?', true, 'Hand-loomed in Hội An, garment-dyed in small batches.'],
            ['What\'s your returns policy?', false],
            ['Do you ship internationally?', false],
            ['How do I care for linen?', false],
          ].map((r, i) => (
            <div key={i} style={{ borderTop: '1px solid ' + previewBorder, padding: '9px 0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 600 }}>
                <span style={{ flex: 1 }}>{r[0]}</span>
                <span style={{ color: previewSubtle, fontSize: 11 }}>{r[1] ? '−' : '+'}</span>
              </div>
              {r[1] && <div style={{ fontSize: 10.5, color: previewSubtle, marginTop: 5 }}>{r[2]}</div>}
            </div>
          ))}
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// SUBSCRIPTIONS — admin
function SubscriptionsAdmin() {
  return (
    <AdminPreviewShell eyebrow="Subscriptions" title="Plans · 248 active subscribers">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginBottom: 10 }}>
        {[['MRR', '$3,840'], ['Active', '248'], ['Churn (30d)', '4.2%']].map(([l, v]) => (
          <div key={l} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: '6px 8px' }}>
            <div style={{ fontSize: 9, color: previewSubtle, textTransform: 'uppercase' }}>{l}</div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, overflow: 'hidden' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', padding: '6px 10px',
          background: previewBg, fontSize: 9.5, color: previewSubtle, textTransform: 'uppercase', fontWeight: 600,
        }}><div>Plan</div><div>Cadence</div><div>Subscribers</div><div>MRR</div></div>
        {[
          ['Linen Basics', 'Monthly', '142', '$2,140', 'success'],
          ['Seasonal Drop', 'Quarterly', '86', '$1,290', 'success'],
          ['Slow Mail Refill', 'Bi-monthly', '20', '$410', 'info'],
        ].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', padding: '7px 10px', fontSize: 11, borderTop: '1px solid ' + previewBorder, alignItems: 'center' }}>
            <div style={{ fontWeight: 600 }}>{r[0]}</div>
            <div style={{ color: previewSubtle }}>{r[1]}</div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)' }}>{r[2]}</div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontWeight: 600 }}>{r[3]}</div>
          </div>
        ))}
      </div>
    </AdminPreviewShell>
  );
}

// CROSS-SELL SLIDER — storefront
function CrossSellStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Your cart · 2 items</div>
          <div style={{ fontSize: 10.5, color: previewSubtle, marginBottom: 12 }}>Subtotal $116</div>

          <div style={{
            border: '2px solid var(--p-color-bg-fill-magic-active)',
            borderRadius: 8, padding: '10px 12px', position: 'relative', background: '#fdfbf8',
          }}>
            <div style={{
              position: 'absolute', top: -10, left: 8,
              background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
              padding: '1px 6px', borderRadius: 4,
              fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
            }}>Cross-sell slider widget</div>
            <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8 }}>Pairs well with…</div>
            <div style={{ display: 'flex', gap: 8, overflowX: 'hidden' }}>
              {[1, 2, 3, 4, 5].map((n) => (
                <div key={n} style={{ width: 110, flexShrink: 0 }}>
                  <MiniPH h={80} label={`{p${n}.jpg}`} />
                  <div style={{ fontSize: 10, marginTop: 4, fontWeight: 500 }}>Linen item {n}</div>
                  <div style={{ fontSize: 9.5, color: previewSubtle }}>$48</div>
                  <button style={{ marginTop: 4, width: '100%', padding: '4px 0', background: 'white', border: '1px solid #1a1c1e', borderRadius: 4, fontSize: 9, fontWeight: 600 }}>Add</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// POP-UP PROMO — storefront
function PopupStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Summer drop</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 6 }}>Linen, slow-made.</div>
            <div style={{ fontSize: 10.5, color: previewSubtle, marginBottom: 10 }}>Garment-dyed. 32 styles.</div>
          </div>
          <MiniPH h={140} label="{hero.jpg}" />
        </div>
        {/* Dim + popup */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)' }} />
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
          width: 260, background: 'white', borderRadius: 10, overflow: 'hidden',
          boxShadow: '0 16px 36px rgba(0,0,0,0.18)',
          border: '2px solid var(--p-color-bg-fill-magic-active)',
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 8,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>Popup widget</div>
          <div style={{ height: 80, background: 'linear-gradient(135deg,#ece5d8,#f5e8e2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--p-font-family-mono)', color: '#9aa0a8', fontSize: 9.5 }}>{'{hero-popup.jpg}'}</div>
          <div style={{ padding: '12px 14px 14px' }}>
            <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Get 10% off your first order</div>
            <div style={{ fontSize: 10, color: previewSubtle, marginBottom: 9 }}>Join the slow-mail list for early access.</div>
            <div style={{ border: '1px solid ' + previewBorder, borderRadius: 5, padding: '5px 8px', fontSize: 10, color: previewSubtle, marginBottom: 6 }}>your@email.com</div>
            <button style={{ width: '100%', padding: '7px 0', background: '#1a1c1e', color: 'white', border: 'none', borderRadius: 5, fontWeight: 600, fontSize: 10.5 }}>Get my code</button>
          </div>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// NOTIFICATIONS BAR — storefront top
function NotifBarStorefront() {
  return (
    <StorefrontPreviewShell>
      {/* Notif bar at the very top, before site header */}
      <div style={{
        background: '#1a1c1e', color: 'white',
        padding: '6px 20px', fontSize: 10, textAlign: 'center',
        letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 500,
        position: 'relative',
        borderTop: '2px solid var(--p-color-bg-fill-magic-active)',
        borderBottom: '2px solid var(--p-color-bg-fill-magic-active)',
      }}>
        Free shipping on $50+ · Code SUMMER25 — 25% off
        <div style={{
          position: 'absolute', top: -10, left: 12,
          background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
          padding: '1px 6px', borderRadius: 4,
          fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
        }}>Notifications bar widget</div>
      </div>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: 0.2, textTransform: 'uppercase', color: previewSubtle, marginBottom: 6 }}>Summer drop</div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.05 }}>Linen, slow-made.</div>
          </div>
          <MiniPH h={120} label="{hero.jpg}" />
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// FREE GIFT — storefront cart drawer
function FreeGiftStorefront() {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {[1, 2, 3].map((n) => (
            <div key={n}><MiniPH h={70} label={`{p${n}.jpg}`} /><div style={{ fontSize: 10, marginTop: 4 }}>Linen item</div><div style={{ fontSize: 9.5, color: previewSubtle }}>$48</div></div>
          ))}
        </div>
        <div style={{
          position: 'absolute', top: 8, right: 8, bottom: 8,
          width: 220, background: 'white', borderRadius: 10,
          border: '2px solid var(--p-color-bg-fill-magic-active)',
          boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
          padding: 12, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 8,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>Free-gift block</div>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Your cart · $84</div>
          <div style={{ fontSize: 10, color: previewSubtle, marginBottom: 6 }}>You're $16 away from a free Tote bag!</div>
          <div style={{ height: 5, background: '#ececec', borderRadius: 3, overflow: 'hidden', marginBottom: 10 }}>
            <div style={{ width: '84%', height: '100%', background: '#d97757' }} />
          </div>
          <div style={{ display: 'flex', gap: 8, padding: 6, border: '1px dashed var(--p-color-bg-fill-magic-active)', borderRadius: 6, alignItems: 'center', marginBottom: 6 }}>
            <div style={{ width: 38, height: 38, borderRadius: 4, background: '#ece5d8' }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 10.5, fontWeight: 600 }}>Linen Tote</div>
              <div style={{ fontSize: 9.5, color: previewSubtle }}>Free over $100</div>
            </div>
            <div style={{ fontFamily: 'var(--p-font-family-mono)', fontSize: 10, color: '#0d6638', fontWeight: 600 }}>FREE</div>
          </div>
          <div style={{ flex: 1 }} />
          <button style={{ padding: '7px 0', background: '#1a1c1e', color: 'white', border: 'none', borderRadius: 5, fontWeight: 600, fontSize: 10.5 }}>Add $16 to unlock</button>
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// Generic fallback — used for less-developed apps
function GenericAdmin({ name }) {
  return (
    <AdminPreviewShell eyebrow={name} title={name}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginBottom: 10 }}>
        {[['Items', '12'], ['Active', '8'], ['Conv.', '4.2%']].map(([l, v]) => (
          <div key={l} style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: '6px 8px' }}>
            <div style={{ fontSize: 9, color: previewSubtle, textTransform: 'uppercase' }}>{l}</div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ border: '1px solid ' + previewBorder, borderRadius: 6, padding: 14, textAlign: 'center', color: previewSubtle, fontSize: 11 }}>
        Admin dashboard for {name} · charts, list view, settings
      </div>
    </AdminPreviewShell>
  );
}

function GenericStorefront({ name }) {
  return (
    <StorefrontPreviewShell>
      <StorefrontPageBody>
        <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {[1, 2, 3].map((n) => (<div key={n}><MiniPH h={70} label={`{p${n}.jpg}`} /><div style={{ fontSize: 10, marginTop: 4 }}>Linen item</div><div style={{ fontSize: 9.5, color: previewSubtle }}>$48</div></div>))}
        </div>
        <div style={{
          position: 'absolute', bottom: 12, left: 20, right: 20,
          padding: 10, border: '2px solid var(--p-color-bg-fill-magic-active)', borderRadius: 8,
          background: '#fdfbf8', fontSize: 11, textAlign: 'center', color: previewSubtle,
        }}>
          <div style={{
            position: 'absolute', top: -10, left: 8,
            background: 'var(--p-color-bg-fill-magic-active)', color: 'white',
            padding: '1px 6px', borderRadius: 4,
            fontFamily: 'var(--p-font-family-mono)', fontSize: 8.5, fontWeight: 600,
          }}>{name} widget</div>
          {name} renders here on the storefront
        </div>
      </StorefrontPageBody>
    </StorefrontPreviewShell>
  );
}

// ─── Registry ──────────────────────────────────────
const APP_PREVIEWS = {
  'Coupon Manager': {
    surfaces: ['admin', 'storefront'], home: 'admin',
    summary: 'Generate, schedule, and track promo codes from a single admin dashboard. A storefront block can surface live codes to customers (optional).',
    Admin: CouponManagerAdmin, Storefront: CouponManagerStorefront,
  },
  'Spin to Win': {
    surfaces: ['storefront', 'admin'], home: 'storefront',
    summary: 'Gamified discount pop-up that appears on the storefront. Configure prizes and odds from the admin; track spin-to-conversion in real time.',
    Admin: SpinToWinAdmin, Storefront: SpinToWinStorefront,
  },
  'Loyalty Hearts': {
    surfaces: ['admin', 'storefront'], home: 'admin',
    summary: 'Points + tiers + rewards. Customers see their balance and progress on the storefront; you manage members and tier logic from the admin.',
    Admin: LoyaltyHeartsAdmin, Storefront: LoyaltyHeartsStorefront,
  },
  'Bundle Deals': {
    surfaces: ['admin', 'storefront'], home: 'storefront',
    summary: 'Build product bundles with auto-discount. Bundle blocks render on the PDP; rules and pricing are managed from the admin.',
    Admin: BundleDealsAdmin, Storefront: BundleDealsStorefront,
  },
  'Wishlist Drawer': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Customers save items for later in a side drawer. Heart icons on products toggle membership; the drawer slides from the right.',
    Storefront: WishlistStorefront,
  },
  'Reviews Wall': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Collect and display product reviews. Average rating, individual review cards, photo support. Drop into PDP or a dedicated page.',
    Storefront: ReviewsStorefront,
  },
  'Discount Stacker': {
    surfaces: ['admin', 'storefront'], home: 'admin',
    summary: 'Let customers combine multiple codes at checkout, with rules you control. Per-code stack limits, exclusions, and free-shipping interplay.',
    Admin: DiscountStackerAdmin, Storefront: DiscountStackerStorefront,
  },
  'FAQ Block': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Drop-in FAQ accordion. Authored from a single content list; renders responsively on any page.',
    Storefront: FAQStorefront,
  },
  'Subscriptions': {
    surfaces: ['admin'], home: 'admin',
    summary: 'Recurring billing with multiple cadences. Manage plans, view churn, send retention nudges.',
    Admin: SubscriptionsAdmin,
  },
  'Cross-sell Slider': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Show recommended products on the cart page. AI picks pairings from purchase history.',
    Storefront: CrossSellStorefront,
  },
  'Pop-up Promo': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Timed promotional pop-ups with email capture. Show on first visit, scroll, or exit intent.',
    Storefront: PopupStorefront,
  },
  'Notifications Bar': {
    surfaces: ['storefront'], home: 'storefront',
    summary: 'Top-of-page announcement bar. Schedule rotations, target by page, dismiss-once behavior.',
    Storefront: NotifBarStorefront,
  },
  'Free Gift': {
    surfaces: ['storefront', 'admin'], home: 'storefront',
    summary: 'Auto-add a free gift when cart crosses a threshold. Progress bar nudges customers toward the unlock.',
    Storefront: FreeGiftStorefront,
  },
};

function getPreview(name) {
  const p = APP_PREVIEWS[name];
  if (p) return p;
  // Fallback — assume storefront-leaning generic widget
  return {
    surfaces: ['storefront'], home: 'storefront',
    summary: `${name} — preview not yet authored. Install to scaffold a v1 in the editor.`,
    Storefront: () => <GenericStorefront name={name} />,
    Admin: () => <GenericAdmin name={name} />,
  };
}

// ─── Mini preview thumbnail — for library cards ────
function AppPreviewThumb({ name, height = 130 }) {
  const p = getPreview(name);
  const surface = p.home;
  const Comp = surface === 'admin' ? p.Admin : p.Storefront;
  if (!Comp) return null;
  // Render at full 720×440, scale down to fit container width
  return (
    <div style={{
      width: '100%', height,
      overflow: 'hidden', position: 'relative',
      background: '#f0eee6',
      borderRadius: '12px 12px 0 0',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0,
        transform: 'scale(0.36)', transformOrigin: 'top left',
        pointerEvents: 'none',
      }}>
        <Comp />
      </div>
      {/* surface badge */}
      <div style={{
        position: 'absolute', top: 6, left: 6, zIndex: 2,
        background: 'rgba(26,26,26,0.78)', color: 'white',
        padding: '2px 7px', borderRadius: 4,
        fontSize: 9.5, fontWeight: 600, letterSpacing: 0.04,
        textTransform: 'uppercase',
        display: 'flex', alignItems: 'center', gap: 4,
        backdropFilter: 'blur(4px)',
      }}>
        {surface === 'admin' ? '◐ Admin preview' : '◑ Storefront preview'}
      </div>
    </div>
  );
}

// ─── Surface tabs — for editor preview toolbar ────
function SurfaceTabs({ surfaces, value, onChange }) {
  const all = ['admin', 'storefront'];
  return (
    <div style={{
      display: 'inline-flex', background: 'var(--p-color-bg-fill-tertiary)',
      borderRadius: 8, padding: 3, gap: 2,
    }}>
      {all.map((s) => {
        const enabled = surfaces.includes(s);
        const active = value === s && enabled;
        const label = s === 'admin' ? 'Admin' : 'Storefront';
        const Icon = s === 'admin' ? I.apps : I.store;
        return (
          <button
            key={s}
            disabled={!enabled}
            onClick={() => enabled && onChange(s)}
            title={!enabled ? `This app doesn't render on the ${label.toLowerCase()}` : `Preview as ${label.toLowerCase()}`}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '4px 10px', borderRadius: 6,
              background: active ? 'var(--p-color-bg-surface)' : 'transparent',
              boxShadow: active ? '0 1px 2px rgba(0,0,0,0.08)' : 'none',
              border: 'none', cursor: enabled ? 'pointer' : 'not-allowed',
              fontFamily: 'inherit', fontSize: 11.5, fontWeight: active ? 600 : 500,
              color: enabled ? 'var(--p-color-text)' : 'var(--p-color-text-disabled)',
              opacity: enabled ? 1 : 0.55,
            }}
          >
            <Icon size={11} />
            {label}
            {!enabled && (
              <span style={{ fontSize: 9.5, color: 'var(--p-color-text-secondary)', marginLeft: 2 }}>· n/a</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

// ─── Preview Dialog — opened from Library card ────
function AppPreviewDialog({ name, category, installed, onClose, onInstall, onOpenInEditor }) {
  const p = getPreview(name);
  const [surface, setSurface] = React.useState(p.home);
  const Comp = surface === 'admin' ? p.Admin : p.Storefront;

  // If chosen surface has no component, flip to the one that does
  React.useEffect(() => {
    if (!Comp && p.surfaces[0]) setSurface(p.surfaces[0]);
  }, [name]); // eslint-disable-line

  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(26,26,26,0.55)',
      zIndex: 2147483640, display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24, animation: 'p-fade 0.18s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', maxWidth: 920, maxHeight: 'calc(100vh - 48px)',
        background: 'var(--p-color-bg-surface)',
        borderRadius: 14, overflow: 'hidden', display: 'flex', flexDirection: 'column',
        boxShadow: '0 32px 80px rgba(0,0,0,0.32)',
      }}>
        {/* Head */}
        <div style={{
          padding: '14px 18px', borderBottom: '1px solid var(--p-color-border)',
          display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: 'var(--p-color-bg-fill-magic)',
            color: 'var(--p-color-text-magic)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 16,
          }}>{name[0]}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: -0.2 }}>{name}</div>
              {installed && <Badge tone="success" dot>installed</Badge>}
            </div>
            <div style={{ fontSize: 12, color: 'var(--p-color-text-secondary)' }}>
              {category} · {p.surfaces.length === 2 ? 'Admin + Storefront' : (p.surfaces[0] === 'admin' ? 'Admin only' : 'Storefront only')}
            </div>
          </div>
          <Btn variant="plain" size="sm" icon={I.close} onClick={onClose} />
        </div>

        {/* Body */}
        <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: 18, background: 'var(--p-color-bg)' }} className="p-scroll">
          {/* Surface tabs (only show if app has more than 1 surface) */}
          {p.surfaces.length > 1 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <span style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>Preview as</span>
              <SurfaceTabs surfaces={p.surfaces} value={surface} onChange={setSurface} />
              <div style={{ flex: 1 }} />
              <span style={{ fontSize: 11, color: 'var(--p-color-text-secondary)' }}>
                Fake data shown · your real {surface === 'admin' ? 'shop' : 'store'} data appears once installed
              </span>
            </div>
          )}
          {p.surfaces.length === 1 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>
              {p.surfaces[0] === 'admin' ? <I.apps size={12} /> : <I.store size={12} />}
              <span>{p.surfaces[0] === 'admin' ? 'Admin-only app' : 'Storefront-only widget'} · fake data shown</span>
            </div>
          )}

          {/* The preview itself — scaled up to fit width */}
          <div style={{
            background: previewBg,
            borderRadius: 10, padding: 16,
            border: '1px solid var(--p-color-border-secondary)',
            display: 'flex', justifyContent: 'center', alignItems: 'flex-start',
            overflow: 'hidden',
            minHeight: 380,
          }}>
            <div style={{
              transform: 'scale(0.78)', transformOrigin: 'top center',
              boxShadow: '0 10px 32px rgba(0,0,0,0.08)',
              borderRadius: 8, overflow: 'hidden',
              border: '1px solid ' + previewBorder,
            }}>
              {Comp ? <Comp /> : <GenericStorefront name={name} />}
            </div>
          </div>

          {/* Summary */}
          <div style={{ marginTop: 14, fontSize: 13, lineHeight: 1.55, color: 'var(--p-color-text)' }}>
            {p.summary}
          </div>

          {/* Quick facts */}
          <div style={{
            marginTop: 12, padding: 12, borderRadius: 8,
            border: '1px solid var(--p-color-border-secondary)',
            background: 'var(--p-color-bg-surface)',
            display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, fontSize: 12,
          }}>
            {[
              ['Lives in', p.surfaces.length === 2 ? 'Admin + Storefront' : (p.surfaces[0] === 'admin' ? 'Operations only' : 'Storefront only')],
              ['Category', category || '—'],
              ['Editable via', 'Chat + point-click'],
            ].map(([l, v]) => (
              <div key={l}>
                <div style={{ fontSize: 10, color: 'var(--p-color-text-secondary)', textTransform: 'uppercase', letterSpacing: 0.06, fontWeight: 500, marginBottom: 2 }}>{l}</div>
                <div style={{ fontSize: 12.5, fontWeight: 500 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Foot */}
        <div style={{
          padding: '12px 18px', borderTop: '1px solid var(--p-color-border)',
          display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
        }}>
          <span style={{ fontSize: 11.5, color: 'var(--p-color-text-secondary)' }}>
            {installed
              ? 'Already installed — open in the editor to refine.'
              : 'Free to install · ~30s to scaffold v1'}
          </span>
          <div style={{ flex: 1 }} />
          <Btn onClick={onClose}>Close</Btn>
          {installed ? (
            <Btn variant="primary" icon={I.edit} onClick={onOpenInEditor}>Open in editor</Btn>
          ) : (
            <Btn variant="magic" icon={I.sparkle} onClick={onInstall}>Install &amp; open</Btn>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { APP_PREVIEWS, getPreview, AppPreviewThumb, SurfaceTabs, AppPreviewDialog });