// mockups.jsx — phone mockups, store cards, decorative SVG bits

// Phone shell that wraps content as if it's an iOS device
const Phone = ({ children, width = 280, accent = '#ED1B3C', shadow = true, style = {} }) => {
  const height = Math.round(width * 2.05);
  return (
    <div style={{
      width, height, borderRadius: width * 0.14, background: '#0E0E10',
      padding: 8, position: 'relative',
      boxShadow: shadow ? '0 30px 80px -20px rgba(14,14,16,0.35), 0 12px 30px -8px rgba(14,14,16,0.18), inset 0 0 0 1px rgba(255,255,255,0.06)' : 'none',
      ...style,
    }}>
      <div style={{ width: '100%', height: '100%', borderRadius: width * 0.11, background: '#fff', overflow: 'hidden', position: 'relative' }}>
        {/* Notch */}
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: width * 0.32, height: 22, background: '#0E0E10', borderRadius: 14, zIndex: 5 }}/>
        {children}
      </div>
    </div>
  );
};

// Store mockup — content for the hero phone
const HeroStorePhone = ({ accent = '#ED1B3C' }) => (
  <Phone width={300} accent={accent}>
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#FAF7F1' }}>
      {/* Status bar */}
      <div style={{ height: 38, padding: '12px 16px 0', display: 'flex', justifyContent: 'space-between', fontSize: 10, fontWeight: 600 }}>
        <span>9:41</span>
        <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          <span style={{ width: 14, height: 7, border: '1px solid #0E0E10', borderRadius: 2, display: 'inline-block', position: 'relative' }}>
            <span style={{ position: 'absolute', inset: 1, background: '#0E0E10', borderRadius: 1, width: '70%' }}/>
          </span>
        </span>
      </div>
      {/* Store header */}
      <div style={{ padding: '18px 16px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: accent, color: '#FAF7F1', display: 'grid', placeItems: 'center', fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 13 }}>K</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>Kopi Senja</div>
          <div style={{ fontSize: 9, color: '#6B6B70' }}>market101.id/kopisenja</div>
        </div>
        <div style={{ width: 24, height: 24, borderRadius: 999, background: '#0E0E10', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9 }}>♡</div>
      </div>
      {/* Banner */}
      <div style={{ margin: '0 16px', height: 88, borderRadius: 14, background: 'linear-gradient(135deg, #2A1B12 0%, #5C3B22 100%)', position: 'relative', overflow: 'hidden', color: '#FAF7F1', padding: 12 }}>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', opacity: .7 }}>Promo Bulan Ini</div>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 18, lineHeight: 1, marginTop: 4 }}>Single Origin<br/>15% OFF</div>
        <div style={{ position: 'absolute', right: -10, bottom: -10, width: 80, height: 80, borderRadius: '50%', background: accent, opacity: .9 }}/>
        <div style={{ position: 'absolute', right: 10, top: 10, width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }}/>
      </div>
      {/* Categories */}
      <div style={{ display: 'flex', gap: 6, padding: '14px 16px 10px', overflow: 'hidden' }}>
        {['Semua','Arabika','Robusta','Manual','Susu'].map((c,i) => (
          <span key={c} style={{ fontSize: 10, fontWeight: 600, padding: '5px 10px', borderRadius: 999, background: i===0?'#0E0E10':'#fff', color: i===0?'#fff':'#0E0E10', border: i===0?'none':'1px solid rgba(14,14,16,0.1)', whiteSpace: 'nowrap' }}>{c}</span>
        ))}
      </div>
      {/* Products */}
      <div style={{ padding: '4px 16px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1 }}>
        {[
          { name: 'Gayo Aceh', price: '85.000', color: '#3B2517', tag: 'Best' },
          { name: 'Toraja Sapan', price: '92.000', color: '#5A3A22' },
          { name: 'Kintamani', price: '78.000', color: '#7C4B27' },
          { name: 'Bali Pupuan', price: '88.000', color: '#4A2D17' },
        ].map((p, i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 10, overflow: 'hidden', border: '1px solid rgba(14,14,16,0.06)' }}>
            <div style={{ height: 64, background: `linear-gradient(135deg, ${p.color} 0%, ${p.color}dd 100%)`, position: 'relative' }}>
              {p.tag && <span style={{ position: 'absolute', top: 6, left: 6, background: accent, color: '#fff', fontSize: 7, fontWeight: 800, padding: '2px 5px', borderRadius: 4, letterSpacing: 0.5 }}>{p.tag}</span>}
              <div style={{ position: 'absolute', bottom: 8, right: 8, width: 22, height: 22, borderRadius: '50%', background: 'rgba(0,0,0,0.45)' }}/>
            </div>
            <div style={{ padding: '7px 8px' }}>
              <div style={{ fontSize: 9, fontWeight: 600, color: '#6B6B70' }}>250g</div>
              <div style={{ fontSize: 10, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>{p.name}</div>
              <div style={{ fontSize: 10, fontWeight: 700, color: accent, marginTop: 2 }}>Rp{p.price}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Bottom nav */}
      <div style={{ height: 44, borderTop: '1px solid rgba(14,14,16,0.08)', display: 'flex', justifyContent: 'space-around', alignItems: 'center', background: '#fff' }}>
        {['◧','▢','♡','◉'].map((s, i) => (
          <div key={i} style={{ fontSize: 14, color: i===0?accent:'#9A9A9F' }}>{s}</div>
        ))}
      </div>
    </div>
  </Phone>
);

// Dashboard mockup — sellers' admin
const HeroDashboardCard = () => (
  <div style={{ width: 340, borderRadius: 18, background: '#fff', boxShadow: '0 20px 50px -16px rgba(14,14,16,0.18)', border: '1px solid rgba(14,14,16,0.05)', overflow: 'hidden', fontFamily: 'Plus Jakarta Sans' }}>
    <div style={{ padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(14,14,16,0.06)' }}>
      <div style={{ fontSize: 12, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>Penjualan Hari Ini</div>
      <span style={{ fontSize: 9, fontWeight: 700, padding: '3px 7px', borderRadius: 999, background: '#E8F8F2', color: '#1FB58F' }}>+24,8%</span>
    </div>
    <div style={{ padding: '14px 16px 4px' }}>
      <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 24, letterSpacing: -0.5 }}>Rp 4.182.500</div>
      <div style={{ fontSize: 10, color: '#6B6B70' }}>vs. Rp 3.348.000 kemarin</div>
    </div>
    {/* Mini chart */}
    <svg viewBox="0 0 320 80" width="100%" height="80" style={{ display: 'block', marginTop: 4 }}>
      <defs>
        <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#ED1B3C" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="#ED1B3C" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M0,55 C30,50 50,30 80,32 C110,34 130,20 160,28 C190,36 210,18 240,22 C270,26 290,14 320,12 L320,80 L0,80 Z" fill="url(#g1)"/>
      <path d="M0,55 C30,50 50,30 80,32 C110,34 130,20 160,28 C190,36 210,18 240,22 C270,26 290,14 320,12" stroke="#ED1B3C" strokeWidth="2" fill="none"/>
      <circle cx="320" cy="12" r="3.5" fill="#ED1B3C"/>
      <circle cx="320" cy="12" r="6" fill="#ED1B3C" opacity="0.2"/>
    </svg>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: '1px solid rgba(14,14,16,0.06)' }}>
      {[['Pesanan','38'],['Pengunjung','412'],['Konversi','9,2%']].map(([k,v]) => (
        <div key={k} style={{ padding: '10px 12px', borderRight: '1px solid rgba(14,14,16,0.06)' }}>
          <div style={{ fontSize: 9, color: '#6B6B70', fontWeight: 500 }}>{k}</div>
          <div style={{ fontSize: 14, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>{v}</div>
        </div>
      ))}
    </div>
  </div>
);

// Floating order notification
const OrderToast = () => (
  <div style={{ width: 280, padding: 12, borderRadius: 14, background: '#0E0E10', color: '#F2EFE9', display: 'flex', gap: 10, alignItems: 'center', boxShadow: '0 20px 40px -16px rgba(14,14,16,0.4)', fontFamily: 'Plus Jakarta Sans' }}>
    <div style={{ width: 36, height: 36, borderRadius: 10, background: '#ED1B3C', display: 'grid', placeItems: 'center', fontSize: 14 }}>🛒</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 11, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>Pesanan baru — Rp 247.000</div>
      <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2 }}>Rina S. · Surabaya · 2 item</div>
    </div>
    <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#1FB58F', boxShadow: '0 0 0 4px rgba(31,181,143,0.25)' }}/>
  </div>
);

// Domain pill
const DomainPill = () => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 0, padding: 6, paddingLeft: 18, borderRadius: 999, background: '#fff', boxShadow: '0 12px 30px -10px rgba(14,14,16,0.18)', border: '1px solid rgba(14,14,16,0.06)', fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 500 }}>
    <span style={{ color: '#6B6B70' }}>market101.id/</span>
    <span style={{ color: '#0E0E10', fontWeight: 700 }}>kopisenja</span>
    <span style={{ marginLeft: 12, padding: '6px 12px', borderRadius: 999, background: '#1FB58F', color: 'white', fontFamily: 'Plus Jakarta Sans', fontSize: 11, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5"><path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      Live
    </span>
  </div>
);

// Template card — mini phone preview
const TemplateCard = ({ name, tag, palette, productColors }) => (
  <div style={{ borderRadius: 22, padding: 24, background: palette.bg, border: `1px solid ${palette.line}`, transition: 'transform .4s cubic-bezier(.2,.7,.2,1)' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.6, color: palette.fg }}>{tag}</div>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 22, color: palette.fg, marginTop: 2 }}>{name}</div>
      </div>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: palette.accent, color: palette.bg, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12, fontFamily: 'Bricolage Grotesque' }}>{name[0]}</div>
    </div>
    {/* Mini hero */}
    <div style={{ height: 90, borderRadius: 12, background: palette.heroBg, marginBottom: 10, position: 'relative', overflow: 'hidden', padding: 10 }}>
      <div style={{ fontSize: 8, fontWeight: 700, color: palette.heroText, opacity: 0.7, letterSpacing: 1, textTransform: 'uppercase' }}>New Collection</div>
      <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 14, lineHeight: 1, color: palette.heroText, marginTop: 4 }}>Spring<br/>Drop '26</div>
      <div style={{ position: 'absolute', right: -8, bottom: -8, width: 50, height: 50, borderRadius: '50%', background: palette.accent, opacity: 0.85 }}/>
    </div>
    {/* Product grid */}
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
      {productColors.map((c, i) => (
        <div key={i} style={{ aspectRatio: '3/4', borderRadius: 8, background: c }}/>
      ))}
    </div>
  </div>
);

Object.assign(window, { Phone, HeroStorePhone, HeroDashboardCard, OrderToast, DomainPill, TemplateCard });