// mobile-preview.jsx — PhoneFrame + 6 mobile app screens (consumer-facing app)
// Exports: PhoneFrame, MobileApp

const MOBILE_PRODUCTS_NOUR = [
  { id: 1, name: 'Silk Wrap Dress',   price: 'EGP 1,450', oldPrice: 'EGP 1,900', tag: 'New',  color: '#C9B48C' },
  { id: 2, name: 'Linen Abaya — Sand',price: 'EGP 890',   oldPrice: null,         tag: null,   color: '#DBCBAE' },
  { id: 3, name: 'Embroidered Kaftan', price: 'EGP 2,200', oldPrice: 'EGP 2,800', tag: 'Sale', color: '#8B5A2B' },
  { id: 4, name: 'Honey Silk Scarf',  price: 'EGP 450',   oldPrice: null,         tag: null,   color: '#E8B83A' },
];
const MOBILE_PRODUCTS_MARCUS = [
  { id: 1, name: 'Pro Wireless Earbuds', price: '$129', oldPrice: '$159', tag: 'Sale', color: '#1A1A1A' },
  { id: 2, name: 'Studio Speaker',       price: '$249', oldPrice: null,   tag: 'New',  color: '#5C4326' },
  { id: 3, name: 'USB-C Hub 10-in-1',    price: '$79',  oldPrice: '$99',  tag: null,   color: '#8C6A3C' },
  { id: 4, name: 'MagSafe Stand',        price: '$59',  oldPrice: null,   tag: null,   color: '#C9B48C' },
];

const HERO_BG  = ['#1A1A1A', '#EEE7D6', '#E8B83A', null]; // null = persona.color
const HERO_FG  = ['#F5F1E8', '#1A1A1A', '#1A1A1A', '#F5F1E8'];

const PhoneFrame = ({ children, scale = 1 }) => (
  <div style={{
    width: 280 * scale, flexShrink: 0,
    display: 'flex', flexDirection: 'column',
    background: '#1A1A1A', borderRadius: 44 * scale,
    padding: `${14 * scale}px ${10 * scale}px`,
    boxShadow: '0 40px 80px -20px rgba(26,26,26,0.5), 0 0 0 1px rgba(26,26,26,0.8)',
  }}>
    {/* Status bar */}
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `${4 * scale}px ${16 * scale}px ${6 * scale}px`, color: '#fff', fontSize: 11 * scale, fontWeight: 600, flexShrink: 0 }}>
      <span>9:41</span>
      <div style={{ width: 80 * scale, height: 22 * scale, background: '#1A1A1A', borderRadius: 999, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: 14 * scale }}></div>
      <div style={{ display: 'flex', gap: 4 * scale, alignItems: 'center' }}>
        <svg width={12 * scale} height={12 * scale} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M1.05 1.05A19.93 19.93 0 0 1 12 .05a19.93 19.93 0 0 1 10.95 1M4.22 4.22A13.95 13.95 0 0 1 12 2c2.93 0 5.66.9 7.78 2.22M7.76 7.76A8 8 0 0 1 12 6.5c1.62 0 3.12.48 4.24 1.26M10.5 10.5A4 4 0 0 1 12 10.13c.52 0 1.01.08 1.5.37M12 15h.01"/></svg>
        <svg width={14 * scale} height={14 * scale} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><rect x="2" y="7" width="18" height="11" rx="2"/><path d="M22 11v2"/><path d="M7 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>
      </div>
    </div>

    {/* Screen — fixed height for proper iPhone portrait ratio */}
    <div style={{
      height: 530 * scale, flexShrink: 0, background: '#F5F1E8',
      borderRadius: 34 * scale, overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {children}
    </div>

    {/* Home indicator */}
    <div style={{ height: 20 * scale, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <div style={{ width: 100 * scale, height: 4 * scale, background: 'rgba(255,255,255,0.3)', borderRadius: 999 }}></div>
    </div>
  </div>
);

const MobileTabBar = ({ active, onSelect }) => {
  const tabs = [
    { id: 'home',    icon: 'home',         label: 'Shop'   },
    { id: 'search',  icon: 'search',        label: 'Search' },
    { id: 'cart',    icon: 'shopping-bag',  label: 'Bag'    },
    { id: 'account', icon: 'user',          label: 'Me'     },
  ];
  return (
    <div style={{ background: 'rgba(245,241,232,0.93)', borderTop: '1px solid rgba(26,26,26,0.08)', display: 'flex', padding: '8px 4px 12px', backdropFilter: 'blur(12px)', flexShrink: 0 }}>
      {tabs.map(t => (
        <div key={t.id} onClick={() => onSelect(t.id)} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, cursor: 'pointer', color: active === t.id ? '#1A1A1A' : '#8C6A3C', fontSize: 9, fontFamily: 'var(--font-ui)', fontWeight: active === t.id ? 600 : 400 }}>
          <i data-lucide={t.icon} style={{ width: 18, height: 18 }}></i>
          {t.label}
        </div>
      ))}
    </div>
  );
};

const MobileProductCard = ({ p, onTap }) => (
  <div onClick={onTap} style={{ cursor: 'pointer' }}>
    <div style={{ aspectRatio: '4/5', background: p.color, borderRadius: 10, position: 'relative', marginBottom: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <div style={{ width: 40, height: 50, background: 'rgba(255,255,255,0.25)', borderRadius: '50% 50% 8px 8px / 60% 60% 8px 8px' }}></div>
      {p.tag && <span style={{ position: 'absolute', top: 7, left: 7, background: '#1A1A1A', color: '#F5F1E8', fontSize: 9, fontWeight: 600, padding: '2px 7px', borderRadius: 999 }}>{p.tag}</span>}
    </div>
    <div style={{ fontSize: 11, fontWeight: 500, color: '#1A1A1A', marginBottom: 2, lineHeight: 1.3 }}>{p.name}</div>
    <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)' }}>
      <span style={{ color: '#1A1A1A' }}>{p.price}</span>
      {p.oldPrice && <span style={{ color: '#8C6A3C', textDecoration: 'line-through', marginLeft: 5, fontSize: 10 }}>{p.oldPrice}</span>}
    </div>
  </div>
);

// HOME SCREEN — renders sections in order, respects sectionProps
const MobileHomeScreen = ({ persona, sections, sectionProps = {}, onProductTap }) => {
  const products = persona.id === 'nour' ? MOBILE_PRODUCTS_NOUR : MOBILE_PRODUCTS_MARCUS;

  // Determine which sections to show and in what order
  const visibleSections = sections
    ? sections.filter(s => s.enabled && s.id !== 'tabbar')
    : [{ id: 'hero' }, { id: 'featured' }];

  const renderSection = (section) => {
    const p = sectionProps[section.id] || {};
    switch (section.id) {

      case 'hero': {
        const styleIdx = p.style || 0;
        const bg = HERO_BG[styleIdx] || persona.color;
        const fg = HERO_FG[styleIdx];
        return (
          <div key="hero" style={{ margin: '0 12px 14px', background: bg, borderRadius: 14, height: 158, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 14, overflow: 'hidden', flexShrink: 0 }}>
            {styleIdx === 0 && <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${persona.color}99, #1A1A1A)` }}></div>}
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{ fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: fg === '#F5F1E8' ? 'rgba(245,241,232,0.6)' : 'rgba(26,26,26,0.5)', marginBottom: 3 }}>New collection</div>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: fg, lineHeight: 1.1, marginBottom: 8 }}>
                {p.headline || (persona.id === 'nour' ? 'Summer Edit' : 'Studio Series')}
              </div>
              <div style={{ background: '#E8B83A', color: '#1A1A1A', fontSize: 10, fontWeight: 600, padding: '5px 12px', borderRadius: 999, display: 'inline-block' }}>
                {p.cta || 'Shop now →'}
              </div>
            </div>
          </div>
        );
      }

      case 'featured': {
        const perRow = parseInt(p.perRow) || 2;
        const maxItems = parseInt(p.maxItems) || 4;
        return (
          <div key="featured" style={{ padding: '0 12px 14px' }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: '#1A1A1A', marginBottom: 10 }}>Featured</div>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${perRow}, 1fr)`, gap: 10 }}>
              {products.slice(0, Math.min(maxItems, 4)).map(prod => (
                <MobileProductCard key={prod.id} p={prod} onTap={() => onProductTap && onProductTap(prod)} />
              ))}
            </div>
          </div>
        );
      }

      case 'collections': {
        const collections = persona.id === 'nour'
          ? [{ name: 'Abayas', color: '#8B5A2B' }, { name: 'Scarves', color: '#E8B83A' }, { name: 'Dresses', color: '#C9B48C' }, { name: 'Bags', color: '#DBCBAE' }]
          : [{ name: 'Earbuds', color: '#1A1A1A' }, { name: 'Speakers', color: '#5C4326' }, { name: 'Cables', color: '#8C6A3C' }, { name: 'Stands', color: '#C9B48C' }];
        return (
          <div key="collections" style={{ padding: '0 12px 14px' }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: '#1A1A1A', marginBottom: 10 }}>{p.title || 'Shop by category'}</div>
            <div style={{ display: 'flex', gap: 10, overflowX: 'auto', paddingBottom: 2 }}>
              {collections.map(c => (
                <div key={c.name} style={{ flexShrink: 0, textAlign: 'center' }}>
                  <div style={{ width: 64, height: 64, borderRadius: 14, background: c.color, marginBottom: 5 }}></div>
                  <div style={{ fontSize: 10, fontWeight: 500, color: '#1A1A1A' }}>{c.name}</div>
                </div>
              ))}
            </div>
          </div>
        );
      }

      case 'banner2': {
        return (
          <div key="banner2" style={{ margin: '0 12px 14px', background: '#FBEFC9', border: '1px solid #E8B83A', borderRadius: 12, padding: '12px 14px', textAlign: 'center' }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#8B5A2B', marginBottom: 4 }}>
              {p.headline || (persona.id === 'nour' ? 'Ramadan special' : 'Limited time offer')}
            </div>
            {p.code && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5C4326', background: '#fff', borderRadius: 6, padding: '3px 8px', display: 'inline-block', marginBottom: 8 }}>Code: {p.code}</div>}
            <div style={{ background: '#1A1A1A', color: '#F5F1E8', fontSize: 10, fontWeight: 600, padding: '6px 16px', borderRadius: 999, display: 'inline-block', marginTop: p.code ? 0 : 4 }}>
              {p.btnText || 'Claim offer →'}
            </div>
          </div>
        );
      }

      case 'reviews': {
        // Reviews appear on product pages, not home — show a teaser row
        return (
          <div key="reviews" style={{ margin: '0 12px 14px', background: '#fff', border: '1px solid rgba(26,26,26,0.08)', borderRadius: 10, padding: '10px 12px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 11, fontWeight: 600, color: '#1A1A1A' }}>Customer reviews</span>
              <div style={{ display: 'flex', gap: 1 }}>{[1,2,3,4,5].map(s => <span key={s} style={{ color: '#E8B83A', fontSize: 10 }}>★</span>)}<span style={{ fontSize: 10, color: '#8C6A3C', marginLeft: 4 }}>4.8 · 127</span></div>
            </div>
            <div style={{ fontSize: 10, color: '#5C4326', lineHeight: 1.4, marginTop: 5 }}>"Perfect quality, exactly as described. Fast shipping!"</div>
          </div>
        );
      }

      default: return null;
    }
  };

  return (
    <div style={{ flex: 1, overflowY: 'auto', background: '#F5F1E8' }}>
      {/* App header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 10px', flexShrink: 0 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, color: '#1A1A1A', letterSpacing: '-0.01em' }}>{persona.appName}</span>
        <div style={{ display: 'flex', gap: 10 }}>
          <i data-lucide="search" style={{ width: 18, height: 18, color: '#1A1A1A' }}></i>
          <i data-lucide="shopping-bag" style={{ width: 18, height: 18, color: '#1A1A1A' }}></i>
        </div>
      </div>
      {visibleSections.map(s => renderSection(s))}
    </div>
  );
};

// PRODUCT DETAIL SCREEN
const MobileProductScreen = ({ persona, product, onBack }) => {
  const [qty, setQty] = React.useState(1);
  const products = persona.id === 'nour' ? MOBILE_PRODUCTS_NOUR : MOBILE_PRODUCTS_MARCUS;
  const p = product || products[0];
  return (
    <div style={{ flex: 1, overflowY: 'auto', background: '#F5F1E8' }}>
      <div style={{ height: 200, background: p.color, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <div style={{ width: 80, height: 100, background: 'rgba(255,255,255,0.25)', borderRadius: '50% 50% 10px 10px / 60% 60% 10px 10px' }}></div>
        <button onClick={onBack} style={{ position: 'absolute', top: 14, left: 14, width: 32, height: 32, borderRadius: '50%', background: 'rgba(245,241,232,0.85)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <i data-lucide="arrow-left" style={{ width: 15, height: 15, color: '#1A1A1A' }}></i>
        </button>
      </div>
      <div style={{ padding: '16px 14px' }}>
        <div style={{ fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#8C6A3C', marginBottom: 4 }}>{persona.industry}</div>
        <div style={{ fontSize: 16, fontWeight: 600, color: '#1A1A1A', marginBottom: 6 }}>{p.name}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: '#1A1A1A', marginBottom: 12 }}>
          {p.price} {p.oldPrice && <span style={{ fontSize: 12, color: '#8C6A3C', textDecoration: 'line-through', marginLeft: 6 }}>{p.oldPrice}</span>}
        </div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
          {['XS','S','M','L'].map((s,i) => <div key={s} style={{ width: 34, height: 34, borderRadius: 8, border: `1.5px solid ${i===1?'#1A1A1A':'rgba(26,26,26,0.15)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: i===1?600:400, color: '#1A1A1A', cursor: 'pointer' }}>{s}</div>)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#fff', border: '1px solid rgba(26,26,26,0.12)', borderRadius: 8, padding: '4px 10px' }}>
            <span onClick={() => setQty(Math.max(1,qty-1))} style={{ cursor: 'pointer', fontSize: 14 }}>−</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>{qty}</span>
            <span onClick={() => setQty(qty+1)} style={{ cursor: 'pointer', fontSize: 14 }}>+</span>
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 10, padding: '10px 12px', marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontSize: 11, fontWeight: 600 }}>Reviews</span>
            <span style={{ fontSize: 10, color: '#8C6A3C' }}>★★★★★ 4.8 · 127</span>
          </div>
          <div style={{ fontSize: 10, color: '#5C4326', lineHeight: 1.4 }}>"Perfect quality, exactly as described."</div>
        </div>
      </div>
      <div style={{ padding: '0 14px 20px' }}>
        <div style={{ background: '#1A1A1A', color: '#F5F1E8', padding: 13, borderRadius: 12, fontWeight: 500, fontSize: 13, textAlign: 'center' }}>Add to bag — {p.price}</div>
      </div>
    </div>
  );
};

const MobileSearchScreen = ({ persona }) => {
  const products = persona.id === 'nour' ? MOBILE_PRODUCTS_NOUR : MOBILE_PRODUCTS_MARCUS;
  return (
    <div style={{ flex: 1, background: '#F5F1E8', padding: '14px 12px', overflowY: 'auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1px solid rgba(26,26,26,0.12)', borderRadius: 10, padding: '9px 12px', marginBottom: 16 }}>
        <i data-lucide="search" style={{ width: 14, height: 14, color: '#8C6A3C' }}></i>
        <span style={{ fontSize: 12, color: '#8C6A3C' }}>Search {persona.appName}…</span>
      </div>
      <div style={{ fontSize: 10, fontWeight: 500, color: '#8C6A3C', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Popular</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {products.map(p => <MobileProductCard key={p.id} p={p} />)}
      </div>
    </div>
  );
};

const MobileCartScreen = ({ persona }) => {
  const products = persona.id === 'nour' ? MOBILE_PRODUCTS_NOUR : MOBILE_PRODUCTS_MARCUS;
  const total = persona.id === 'nour' ? 'EGP 2,340' : '$208';
  return (
    <div style={{ flex: 1, background: '#F5F1E8', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '14px 14px 8px', fontSize: 14, fontWeight: 600, color: '#1A1A1A' }}>Your bag</div>
      <div style={{ padding: '0 14px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {products.slice(0,2).map(p => (
          <div key={p.id} style={{ display: 'flex', gap: 10, background: '#fff', borderRadius: 10, padding: 10, border: '1px solid rgba(26,26,26,0.08)' }}>
            <div style={{ width: 52, height: 62, background: p.color, borderRadius: 8, flexShrink: 0 }}></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: '#1A1A1A', marginBottom: 3 }}>{p.name}</div>
              <div style={{ fontSize: 10, color: '#8C6A3C', marginBottom: 6 }}>Size M · Qty 1</div>
              <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{p.price}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12, fontSize: 12 }}>
          <span style={{ color: '#8C6A3C' }}>Total</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{total}</span>
        </div>
        <div style={{ background: '#1A1A1A', color: '#F5F1E8', padding: 13, borderRadius: 12, fontWeight: 500, fontSize: 13, textAlign: 'center' }}>Checkout with Apple Pay</div>
        <div style={{ textAlign: 'center', fontSize: 10, color: '#8C6A3C', marginTop: 8 }}>or Shop Pay · Visa · Mastercard</div>
      </div>
    </div>
  );
};

const MobileAccountScreen = ({ persona }) => {
  const orders = persona.id === 'nour'
    ? [{ id: '#4182', status: 'Delivered', date: 'Jun 4', total: 'EGP 1,450' }, { id: '#4001', status: 'Delivered', date: 'May 22', total: 'EGP 890' }]
    : [{ id: '#1042', status: 'Shipped', date: 'Jun 7', total: '$129' }, { id: '#1019', status: 'Delivered', date: 'May 30', total: '$328' }];
  return (
    <div style={{ flex: 1, background: '#F5F1E8', padding: '14px 12px', overflowY: 'auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <div style={{ width: 42, height: 42, borderRadius: '50%', background: '#1A1A1A', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#F5F1E8', fontSize: 14, fontWeight: 600 }}>{persona.avatar}</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, color: '#1A1A1A' }}>{persona.id === 'nour' ? 'Nour A.' : 'Marcus T.'}</div>
          <div style={{ fontSize: 10, color: '#8C6A3C' }}>{persona.id === 'nour' ? 'nour@nourcairo.com' : 'marcus@me-store.com'}</div>
        </div>
      </div>
      <div style={{ fontSize: 10, fontWeight: 500, color: '#8C6A3C', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Recent orders</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {orders.map(o => (
          <div key={o.id} style={{ background: '#fff', borderRadius: 10, padding: '10px 12px', border: '1px solid rgba(26,26,26,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 500, color: '#1A1A1A', marginBottom: 2 }}>{o.id}</div>
              <div style={{ fontSize: 10, color: '#8C6A3C' }}>{o.date} · {o.status}</div>
            </div>
            <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{o.total}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Main MobileApp — externalTab lets EditorScreen drive the active screen
const MobileApp = ({ persona, sections, sectionProps = {}, scale = 1, externalTab, onTabChange }) => {
  const [tab, setTab] = React.useState(externalTab || 'home');
  const [selectedProduct, setSelectedProduct] = React.useState(null);

  React.useEffect(() => {
    if (externalTab && externalTab !== tab) setTab(externalTab);
  }, [externalTab]);

  const handleTabSelect = (newTab) => {
    setTab(newTab);
    if (onTabChange) onTabChange(newTab);
  };

  const screenMap = {
    home:    <MobileHomeScreen persona={persona} sections={sections} sectionProps={sectionProps} onProductTap={p => { setSelectedProduct(p); setTab('product'); }} />,
    product: <MobileProductScreen persona={persona} product={selectedProduct} onBack={() => { setTab('home'); if (onTabChange) onTabChange('home'); }} />,
    search:  <MobileSearchScreen persona={persona} />,
    cart:    <MobileCartScreen persona={persona} />,
    account: <MobileAccountScreen persona={persona} />,
  };

  return (
    <PhoneFrame scale={scale}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          {screenMap[tab] || screenMap.home}
        </div>
        <MobileTabBar active={tab === 'product' ? 'home' : tab} onSelect={handleTabSelect} />
      </div>
    </PhoneFrame>
  );
};

Object.assign(window, { PhoneFrame, MobileApp });