// Phone screen components — replicate the four app screens using DOM/CSS
// All translations passed in via `t` from the app.

const __R = (id, fallback) => (typeof window !== 'undefined' && window.__resources && window.__resources[id]) || fallback;

const AVATAR = {
  selin:  __R('avSelin',  'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&q=80&auto=format&fit=crop'),
  melis:  __R('avMelis',  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&q=80&auto=format&fit=crop'),
  zeynep: __R('avZeynep', 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=120&q=80&auto=format&fit=crop'),
  arda:   __R('avArda',   'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&q=80&auto=format&fit=crop'),
  berkay: __R('avBerkay', 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=120&q=80&auto=format&fit=crop'),
  ece:    __R('avEce',    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&q=80&auto=format&fit=crop'),
  deniz:  __R('avDeniz',  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&q=80&auto=format&fit=crop'),
  cem:    __R('avCem',    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=120&q=80&auto=format&fit=crop'),
  defne:  __R('avDefne',  'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=120&q=80&auto=format&fit=crop'),
  ayse:   __R('avAyse',   'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=120&q=80&auto=format&fit=crop'),
};

const PRODUCT = {
  perfume:    __R('pPerfume',    'https://images.unsplash.com/photo-1541643600914-78b084683601?w=200&q=80&auto=format&fit=crop'),
  vase:       __R('pVase',       'https://images.unsplash.com/photo-1578500494198-246f612d3b3d?w=200&q=80&auto=format&fit=crop'),
  sunglasses: __R('pSunglasses', 'https://images.unsplash.com/photo-1577803645773-f96470509666?w=200&q=80&auto=format&fit=crop'),
  bag:        __R('pBag',        'https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=200&q=80&auto=format&fit=crop'),
  mixer:      __R('pMixer',      'https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?w=200&q=80&auto=format&fit=crop'),
  candle:     __R('pCandle',     'https://images.unsplash.com/photo-1603006905003-be475563bc59?w=200&q=80&auto=format&fit=crop'),
  watch:      __R('pWatch',      'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&q=80&auto=format&fit=crop'),
};

const LIST_COVER = {
  homeDeco: __R('lcHomeDeco', 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&q=80&auto=format&fit=crop'),
  forMe:    __R('lcForMe',    'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=400&q=80&auto=format&fit=crop'),
  birthday: __R('lcBirthday', 'https://images.unsplash.com/photo-1513885535751-8b9238bd345a?w=400&q=80&auto=format&fit=crop'),
  wedding:  __R('lcWedding',  'https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=400&q=80&auto=format&fit=crop'),
};

function Av({ src, size = 28, style = {} }) {
  return <img src={src} alt="" style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, ...style }} />;
}

const PSH = {
  root: { width: '100%', height: '100%', background: '#FBF7EE', padding: '50px 16px 20px', display: 'flex', flexDirection: 'column', fontSize: '11px', color: '#1B1F1D', overflow: 'hidden', position: 'relative' },
  topBar: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '11px', fontWeight: 700, padding: '0 4px 8px' },
  status: { display: 'flex', gap: '4px', alignItems: 'center', fontSize: '10px' },
};

// ---------- SCREEN 1: HOME ----------
function ScreenHome({ t }) {
  return (
    <div style={PSH.root}>
      <div style={PSH.topBar}>
        <span>9:41</span>
        <span style={PSH.status}>● ● ▮</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22 }}>Seçtim Ben</div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: '#F6F0E4', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>🔔</div>
          <Av src={AVATAR.selin} size={28} />
        </div>
      </div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, lineHeight: 1.1 }}>{t.greeting}, Selin 👋</div>
      <div style={{ color: '#8A8F8C', fontSize: 10, marginTop: 4 }}>{t.greetingSub}</div>

      <div style={{ background: '#fff', borderRadius: 14, padding: 12, marginTop: 14, border: '1px solid rgba(28,38,35,0.06)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontWeight: 700, fontSize: 11 }}>{t.upcoming}</div>
          <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.all} ›</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: '#8A8F8C' }}>
          {['PZT','SAL','ÇAR','PER','CUM','CMT','PAZ'].map((d,i) => <span key={i}>{d}</span>)}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
          {[12,13,14,15,16,17,18].map((n,i) => (
            <div key={i} style={{ width: 22, height: 22, borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, background: n===14 ? '#2C5650' : 'transparent', color: n===14 ? '#F6F0E4' : '#1B1F1D' }}>{n}</div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 2 }}>
          {[12,13,14,15,16,17,18].map((n,i) => (
            <div key={i} style={{ width: 22, display: 'flex', justifyContent: 'center' }}>
              <div style={{ width: 3, height: 3, borderRadius: 2, background: [12,13,14,16].includes(n) ? '#F2A076' : 'transparent' }}></div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12, padding: 8, borderRadius: 10, background: '#F6F0E4' }}>
          <Av src={AVATAR.melis} size={28} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700 }}>{t.melisBday}</div>
            <div style={{ fontSize: 9, color: '#8A8F8C' }}>14 Mart · 2 {t.daysLeft}</div>
          </div>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: '#2C5650', color: '#F6F0E4', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>🎁</div>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, marginBottom: 8 }}>
        <div style={{ fontWeight: 700, fontSize: 12 }}>{t.myLists}</div>
        <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.all} ›</div>
      </div>
      <div style={{ display: 'flex', gap: 8, overflow: 'hidden' }}>
        {[{label:t.homeDeco, n:'12', cover: LIST_COVER.homeDeco},
          {label:t.forMe, n:'8', cover: LIST_COVER.forMe},
          {label:t.birthday, n:'15', cover: LIST_COVER.birthday}].map((card,i) => (
          <div key={i} style={{ flex: 1 }}>
            <div style={{ aspectRatio: '1', borderRadius: 10, overflow: 'hidden' }}><img src={card.cover} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
            <div style={{ fontSize: 10, fontWeight: 700, marginTop: 6 }}>{card.label}</div>
            <div style={{ fontSize: 9, color: '#8A8F8C' }}>{card.n} {t.itemUnit}</div>
          </div>
        ))}
      </div>

      <div style={{ background: '#FCE2CC', borderRadius: 14, padding: 12, marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.3 }}>{t.shareEasy}</div>
          <div style={{ marginTop: 8, display: 'inline-block', padding: '6px 12px', background: '#F2A076', borderRadius: 999, fontSize: 10, fontWeight: 700 }}>{t.addFriend}</div>
        </div>
        <div style={{ fontSize: 28 }}>🎁</div>
      </div>

      <div style={{ flex: 1 }}></div>
      <BottomNav active="home" t={t} />
    </div>
  );
}

// ---------- SCREEN 2: BIRTHDAY DETAIL ----------
function ScreenBirthday({ t }) {
  const items = [
    { name: 'Zara Red Vanilla', cat: t.perfume, store: 'Zara', price: '₺790', tag: t.bought, tagColor: '#2C5650', img: PRODUCT.perfume },
    { name: t.ceramicVase, cat: t.beige, store: 'Karaca', price: '₺450', tag: t.reserve, tagColor: '#F2A076', img: PRODUCT.vase },
    { name: t.sunglasses, cat: t.uvProtect, store: 'Atasun', price: '₺1.250', tag: t.available, tagColor: '#8A8F8C', img: PRODUCT.sunglasses },
    { name: t.shoulderBag, cat: t.green, store: 'Mango', price: '₺1.690', tag: t.available, tagColor: '#8A8F8C', img: PRODUCT.bag },
  ];
  return (
    <div style={PSH.root}>
      <div style={PSH.topBar}><span>9:41</span><span style={PSH.status}>● ● ▮</span></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ width: 24, height: 24, borderRadius: 8, border: '1px solid rgba(28,38,35,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>←</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, lineHeight: 1.05 }}>{t.melisBday}</div>
          <div style={{ fontSize: 9, color: '#8A8F8C', marginTop: 4 }}>14 Mart · 2 {t.daysLeft}</div>
        </div>
        <Av src={AVATAR.melis} size={36} />
      </div>

      <div style={{ display: 'flex', gap: 6, marginTop: 14, background: '#fff', borderRadius: 12, padding: 10, border: '1px solid rgba(28,38,35,0.06)' }}>
        {[{n:'5', l:t.bought, c:'#2C5650'},{n:'3', l:t.reserve, c:'#F2A076'},{n:'7', l:t.available, c:'#8A8F8C'}].map((s,i) => (
          <div key={i} style={{ flex: 1, textAlign: 'center', borderRight: i<2 ? '1px solid rgba(28,38,35,0.08)' : 'none' }}>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, lineHeight: 1 }}>{s.n}</div>
            <div style={{ fontSize: 8, color: '#8A8F8C', marginTop: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
              <span style={{ width: 4, height: 4, borderRadius: 2, background: s.c }}></span>{s.l}
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, marginBottom: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 700 }}>15 {t.itemUnit}</div>
        <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.sort} ⇅</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, overflow: 'hidden' }}>
        {items.map((it,i) => (
          <div key={i} style={{ background: '#fff', borderRadius: 12, padding: 10, display: 'flex', gap: 10, border: '1px solid rgba(28,38,35,0.06)' }}>
            <div style={{ width: 44, height: 44, borderRadius: 10, background: '#F6F0E4', flexShrink: 0, overflow: 'hidden' }}><img src={it.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6 }}>
                <div style={{ fontSize: 11, fontWeight: 700, lineHeight: 1.2 }}>{it.name}</div>
                <div style={{ fontSize: 8, padding: '2px 6px', borderRadius: 999, background: it.tagColor === '#2C5650' ? 'rgba(44,86,80,0.12)' : it.tagColor === '#F2A076' ? 'rgba(242,160,118,0.18)' : 'rgba(138,143,140,0.12)', color: it.tagColor, fontWeight: 600, whiteSpace: 'nowrap' }}>{it.tag}</div>
              </div>
              <div style={{ fontSize: 9, color: '#8A8F8C' }}>{it.cat}</div>
              <div style={{ fontSize: 9, color: '#8A8F8C' }}>{it.store}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
                <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 14 }}>{it.price}</div>
                <div style={{ fontSize: 8, padding: '3px 8px', border: '1px solid rgba(28,38,35,0.1)', borderRadius: 999, fontWeight: 600 }}>🔗 Link</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ background: '#2C5650', color: '#F6F0E4', textAlign: 'center', padding: '10px', borderRadius: 999, fontSize: 11, fontWeight: 700, marginTop: 12 }}>↗ {t.shareList}</div>
    </div>
  );
}

// ---------- SCREEN 3: FRIENDS ----------
function ScreenFriends({ t }) {
  const friends = [
    { name: 'Melis', sub: '2 ' + t.sharedLists, src: AVATAR.melis },
    { name: 'Selin', sub: '1 ' + t.sharedList, src: AVATAR.selin },
    { name: 'Zeynep', sub: '3 ' + t.sharedLists, src: AVATAR.zeynep },
    { name: 'Arda', sub: '1 ' + t.sharedList, src: AVATAR.arda },
  ];
  const all = [
    { n: 'Berkay', h: '@berkayc', src: AVATAR.berkay },
    { n: 'Ece', h: '@eceyldz', src: AVATAR.ece },
    { n: 'Deniz', h: '@denizoztrk', src: AVATAR.deniz },
  ];
  return (
    <div style={PSH.root}>
      <div style={PSH.topBar}><span>9:41</span><span style={PSH.status}>● ● ▮</span></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24 }}>{t.friends}</div>
        <div style={{ width: 28, height: 28, borderRadius: 10, border: '1px solid rgba(28,38,35,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>+</div>
      </div>
      <div style={{ marginTop: 10, padding: '8px 12px', background: '#fff', borderRadius: 999, border: '1px solid rgba(28,38,35,0.06)', display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#8A8F8C' }}>🔍 {t.searchFriend}</div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, marginBottom: 10 }}>
        <div style={{ fontSize: 11, fontWeight: 700 }}>{t.closestFriends}</div>
        <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.all} ›</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        {friends.map((f,i) => (
          <div key={i} style={{ flex: 1, textAlign: 'center' }}>
            <div style={{ width: '100%', aspectRatio: '1', borderRadius: '50%', overflow: 'hidden', marginBottom: 6 }}><img src={f.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
            <div style={{ fontSize: 10, fontWeight: 700 }}>{f.name}</div>
            <div style={{ fontSize: 8, color: '#8A8F8C', marginTop: 2 }}>{f.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ background: '#FCE2CC', borderRadius: 14, padding: 12, marginTop: 14, display: 'flex', gap: 10, alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8, color: '#d68866', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.friendInvite}</div>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 14, lineHeight: 1.15, marginTop: 4 }}>{t.moreFriends}<br/><span style={{ color: '#d68866' }}>{t.moreSurprise} 🎉</span></div>
          <div style={{ fontSize: 9, color: '#8A8F8C', marginTop: 6, lineHeight: 1.4 }}>{t.inviteDesc}</div>
          <div style={{ marginTop: 8, display: 'inline-block', padding: '6px 12px', background: '#2C5650', color: '#F6F0E4', borderRadius: 999, fontSize: 10, fontWeight: 600 }}>{t.sendInvite}</div>
        </div>
        <div style={{ fontSize: 32 }}>💌</div>
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, marginTop: 14, marginBottom: 8 }}>{t.allFriends}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, overflow: 'hidden' }}>
        {all.map((p,i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Av src={p.src} size={32} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 700 }}>{p.n}</div>
              <div style={{ fontSize: 9, color: '#8A8F8C', fontFamily: "'JetBrains Mono', monospace" }}>{p.h}</div>
            </div>
            <div style={{ fontSize: 9, padding: '4px 12px', border: '1px solid rgba(28,38,35,0.1)', borderRadius: 999, fontWeight: 700 }}>{t.add}</div>
          </div>
        ))}
      </div>
      <BottomNav active="friends" t={t} />
    </div>
  );
}

// ---------- SCREEN 4: DISCOVER ----------
function ScreenDiscover({ t }) {
  const stores = ['trendyol','ZARA','NIKE','MANGO','Karaca','SEPHORA','BEYMEN','PANDORA'];
  const users = [
    { n: 'Melis Kara', h: '@meliskara', src: AVATAR.melis },
    { n: 'Zeynep Yılmaz', h: '@zeynepy', src: AVATAR.zeynep },
    { n: 'Arda Kerem', h: '@ardakerem', src: AVATAR.arda },
  ];
  return (
    <div style={PSH.root}>
      <div style={PSH.topBar}><span>9:41</span><span style={PSH.status}>● ● ▮</span></div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, marginBottom: 10 }}>{t.discover}</div>
      <div style={{ padding: '8px 12px', background: '#fff', borderRadius: 999, border: '1px solid rgba(28,38,35,0.06)', display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#8A8F8C' }}>🔍 {t.searchStore}</div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, marginBottom: 10 }}>
        <div style={{ fontSize: 11, fontWeight: 700 }}>{t.popularStores}</div>
        <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.all} ›</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {stores.map((s,i) => (
          <div key={i} style={{ aspectRatio: '1', background: '#fff', border: '1px solid rgba(28,38,35,0.06)', borderRadius: 10, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 11, fontStyle: 'italic' }}>{s}</div>
            <div style={{ fontSize: 8, color: '#8A8F8C' }}>{s.charAt(0) + s.slice(1).toLowerCase()}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, marginBottom: 10 }}>
        <div style={{ fontSize: 11, fontWeight: 700 }}>{t.userSearch}</div>
        <div style={{ fontSize: 9, color: '#8A8F8C' }}>{t.all} ›</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        {users.map((p,i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#fff', borderRadius: 12, padding: 8, border: '1px solid rgba(28,38,35,0.06)' }}>
            <Av src={p.src} size={32} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 700 }}>{p.n}</div>
              <div style={{ fontSize: 9, color: '#8A8F8C', fontFamily: "'JetBrains Mono', monospace" }}>{p.h}</div>
            </div>
            <div style={{ fontSize: 9, padding: '4px 12px', background: '#2C5650', color: '#F6F0E4', borderRadius: 999, fontWeight: 700 }}>{t.add}</div>
          </div>
        ))}
      </div>
      <BottomNav active="discover" t={t} />
    </div>
  );
}

// Bottom nav shared
function BottomNav({ active, t }) {
  const items = [
    { id: 'home', label: t.tabHome, icon: '⌂' },
    { id: 'lists', label: t.tabLists, icon: '☰' },
    { id: 'discover', label: t.tabDiscover, icon: '○' },
    { id: 'friends', label: t.tabFriends, icon: '◉' },
  ];
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, marginTop: 10, borderTop: '1px solid rgba(28,38,35,0.06)' }}>
      {items.map(it => (
        <div key={it.id} style={{ flex: 1, textAlign: 'center', color: active === it.id ? '#2C5650' : '#8A8F8C' }}>
          <div style={{ fontSize: 14 }}>{it.icon}</div>
          <div style={{ fontSize: 8, fontWeight: active === it.id ? 700 : 500, marginTop: 2 }}>{it.label}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ScreenHome, ScreenBirthday, ScreenFriends, ScreenDiscover, BottomNav, AVATAR, Av, PRODUCT, LIST_COVER });