// mobile.jsx — Mobile versions of all 4 screens, designed at 390×844 (iPhone)

const { useState: _mS, useMemo: _mM } = React;

// Mobile status bar (simple, no full iOS chrome since frame handles it)
function MobileChrome({ children, dark }) {
  // Live site: skip bezel + status bar, just render children full-bleed.
  if (typeof window !== 'undefined' && window.__IS_LIVE_SITE) {
    return <div style={{ width: '100%', minHeight: '100vh', background: 'var(--bg)' }}>{children}</div>;
  }
  return (
    <div style={{
      width: 390, height: 844, background: 'var(--bg)',
      borderRadius: 48, overflow: 'hidden', position: 'relative',
      boxShadow: '0 0 0 10px #111, 0 40px 80px rgba(0,0,0,0.25)',
    }}>
      {/* Dynamic island */}
      <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 120, height: 34, borderRadius: 999, background: '#000', zIndex: 50 }}/>
      {/* Status bar */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 32px 0', zIndex: 40, pointerEvents: 'none' }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', fontFamily: '-apple-system, system-ui' }}>9:41</span>
        <span style={{ fontSize: 13, color: 'var(--ink)', fontFamily: 'var(--font-mono)' }}>⬤⬤⬤ 5G</span>
      </div>
      {/* Home indicator */}
      <div style={{ position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)', width: 134, height: 5, borderRadius: 999, background: dark ? '#fff' : '#000', opacity: 0.7, zIndex: 50 }}/>
      <div style={{ position: 'absolute', inset: 0, paddingTop: 54, paddingBottom: 24, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

// Mobile bottom tab bar
function MobileTabBar({ active, onNav, L }) {
  const items = [
    { id: 'home', label: L.nav_explore, icon: 'grid', href: 'index.html' },
    { id: 'search', label: lang => 'Ara', icon: 'search', href: 'index.html' },
    { id: 'fav', label: L.dash_fav, icon: 'heart', href: 'panelim.html' },
    { id: 'dash', label: 'Profil', icon: 'users', href: 'panelim.html' },
  ];
  const live = typeof window !== 'undefined' && window.__IS_LIVE_SITE;
  return (
    <div style={{
      position: live ? 'sticky' : 'absolute', bottom: 0, left: 0, right: 0, height: 80,
      background: 'color-mix(in oklab, var(--card) 85%, transparent)',
      backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
      borderTop: '1px solid var(--line-2)',
      display: 'flex', padding: '8px 16px 24px', zIndex: 30,
    }}>
      {items.map(it => (
        <a key={it.id}
           href={live ? it.href : undefined}
           onClick={() => !live && onNav && onNav(it.id)}
           style={{
             flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
             color: active === it.id ? 'var(--ink)' : 'var(--ink-3)', cursor: 'pointer',
             textDecoration: 'none',
           }}>
          <Icon name={it.icon} size={22}/>
          <span style={{ fontSize: 10, fontWeight: 600 }}>{typeof it.label === 'function' ? 'Ara' : it.label}</span>
        </a>
      ))}
    </div>
  );
}

function HomeMobile({ L, lang, theme, favs, setFavs, onView }) {
  const [filter, setFilter] = _mS('all');
  const chips = [
    { k: 'all', label: 'Tümü' },
    { k: 'hot', label: '🔥 ' + L.hot_badge },
    { k: 'new', label: L.new_badge },
    { k: 'travel', label: L.niche_travel },
    { k: 'fashion', label: L.niche_fashion },
    { k: 'tech', label: L.niche_tech },
    { k: 'meme', label: L.niche_meme },
  ];
  const items = filter === 'all' ? LISTINGS
    : filter === 'hot' || filter === 'new' ? LISTINGS.filter(l => l.badge === filter)
    : LISTINGS.filter(l => l.niche === filter);

  const toggleFav = (id) => setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id]);

  return (
    <MobileChrome>
      <div data-screen-label="05 Home (Mobile)" style={{ height: '100%', overflow: 'auto', paddingBottom: 20 }}>
        <div style={{ padding: '8px 16px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Logo size={26}/>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={iconBtn()}><Icon name="bell" size={16}/></button>
            <button style={iconBtn()}><Icon name="search" size={16}/></button>
          </div>
        </div>
        {/* Hero */}
        <div style={{
          margin: '6px 16px 18px', padding: 18, borderRadius: 20,
          background: 'var(--grad)', color: '#fff', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase', opacity: 0.85 }}>{L.hero_kicker}</div>
          <div className="is-h1" style={{ color: '#fff', fontSize: 26, marginTop: 6, lineHeight: 1.1 }}>{L.hero_title.split(',')[0]},<br/>{L.hero_title.split(',')[1]?.trim()}</div>
          <button className="is-btn" style={{ background: '#fff', color: 'var(--ink)', marginTop: 14, padding: '10px 16px', fontSize: 13 }}>
            {L.hero_cta} <Icon name="arrow-right" size={14}/>
          </button>
          <div style={{ position: 'absolute', right: -30, top: -20, width: 160, opacity: 0.22 }}>
            <PostGrid handle="@mobhero" postsStyle="fashion" cols={3} rows={3} gap={3} radius={6}/>
          </div>
        </div>

        {/* Chips */}
        <div className="is-scroll-x" style={{ padding: '0 16px 16px', display: 'flex', gap: 6 }}>
          {chips.map(c => (
            <button key={c.k} onClick={() => setFilter(c.k)} style={{
              ...filterChipStyle(filter === c.k),
              padding: '8px 14px', whiteSpace: 'nowrap', fontSize: 13,
            }}>{c.label}</button>
          ))}
        </div>

        {/* List */}
        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map(l => (
            <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="passport"
                         isFav={favs.includes(l.id)} onToggleFav={toggleFav} onView={onView}/>
          ))}
        </div>
        <div style={{ height: 90 }}/>
      </div>
      <MobileTabBar active="home" L={L}/>
    </MobileChrome>
  );
}

function iconBtn() {
  return { width: 36, height: 36, borderRadius: '50%', border: 0, background: 'var(--chip)', color: 'var(--ink-2)', cursor: 'pointer', display: 'grid', placeItems: 'center' };
}

function DetailMobile({ L, lang, theme, listing, favs, setFavs, onBack }) {
  const l = listing || LISTINGS[0];
  const isFav = favs.includes(l.id);
  const toggleFav = () => setFavs(f => f.includes(l.id) ? f.filter(x => x !== l.id) : [...f, l.id]);
  return (
    <MobileChrome>
      <div data-screen-label="06 Detail (Mobile)" style={{ height: '100%', overflow: 'auto' }}>
        {/* Hero band */}
        <div style={{ background: 'var(--grad)', padding: '18px 16px 28px', color: '#fff' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button onClick={onBack} style={{ ...iconBtn(), background: 'rgba(255,255,255,.2)', color: '#fff' }}>
              <Icon name="chevron-left" size={18} color="#fff"/>
            </button>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={toggleFav} style={{ ...iconBtn(), background: 'rgba(255,255,255,.2)', color: '#fff' }}>
                <Icon name={isFav ? 'heart-fill' : 'heart'} size={16} color="#fff"/>
              </button>
              <button style={{ ...iconBtn(), background: 'rgba(255,255,255,.2)', color: '#fff' }}>
                <Icon name="share" size={16} color="#fff"/>
              </button>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 18 }}>
            <div style={{ background: '#fff', padding: 3, borderRadius: '50%' }}>
              <Avatar handle={l.handle} postsStyle={l.postsStyle} size={64} ring={false}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>{l.handle}</div>
                {l.verified && <Icon name="verified" size={16} color="#fff"/>}
              </div>
              <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', opacity: 0.85, textTransform: 'uppercase', letterSpacing: '.06em', marginTop: 2 }}>
                {L[`niche_${l.niche}`]} · {l.country}
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 18 }}>
            {[
              { n: fmtNum(l.followers), l: L.card_followers },
              { n: fmtAge(l.age, lang, L), l: L.card_age },
              { n: l.er.toFixed(1) + '%', l: 'ER' },
            ].map((s, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,.15)', borderRadius: 12, padding: 10, textAlign: 'center', backdropFilter: 'blur(8px)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>{s.n}</div>
                <div style={{ fontSize: 10, opacity: 0.9 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Body */}
        <div style={{ padding: '18px 16px 140px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Post grid */}
          <div>
            <div className="is-kicker" style={{ marginBottom: 10 }}>{L.detail_content}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
              {Array.from({ length: 9 }).map((_, i) => (
                <div key={i} style={{ aspectRatio: '1', borderRadius: 6, overflow: 'hidden' }}>
                  <PostGrid handle={l.handle + 'm' + i} postsStyle={l.postsStyle} cols={1} rows={1} gap={0} radius={0}/>
                </div>
              ))}
            </div>
          </div>

          {/* Metrics */}
          <div className="is-card" style={{ padding: 16 }}>
            <div className="is-kicker" style={{ marginBottom: 12 }}>{L.detail_metrics}</div>
            <MetricBar label="Monthly reach" value={Math.round(l.followers * 1.8)} max={1000000} fmt={fmtNum}/>
            <div style={{ height: 8 }}/>
            <MetricBar label="Avg. likes" value={Math.round(l.followers * l.er / 100)} max={50000} fmt={fmtNum}/>
            <div style={{ height: 8 }}/>
            <MetricBar label="Avg. comments" value={Math.round(l.followers * l.er / 1200)} max={2000} fmt={fmtNum}/>
          </div>

          {/* Trust */}
          <div className="is-card" style={{ padding: 16 }}>
            <TrustBar L={L} compact/>
          </div>
        </div>

        {/* Sticky buy bar */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 16px 28px',
          background: 'color-mix(in oklab, var(--card) 92%, transparent)',
          backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
          borderTop: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '.1em', textTransform: 'uppercase' }}>{L.price_ttl}</div>
            <div className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', lineHeight: 1 }}>{fmtPrice(l.price, lang)}</div>
          </div>
          <button className="is-btn is-btn-primary" style={{ padding: '14px 22px', fontSize: 14 }}>
            <Icon name="bolt" size={14}/> {L.detail_buy_now}
          </button>
        </div>
      </div>
    </MobileChrome>
  );
}

function AuthMobile({ L, lang, theme, onBack }) {
  const [m, setM] = _mS('login');
  return (
    <MobileChrome>
      <div data-screen-label="07 Auth (Mobile)" style={{ height: '100%', overflow: 'auto' }}>
        {/* top gradient band */}
        <div style={{ height: 200, background: 'var(--grad)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 16, left: 16 }}>
            <button onClick={onBack} style={{ ...iconBtn(), background: 'rgba(255,255,255,.2)', color: '#fff' }}>
              <Icon name="x" size={16} color="#fff"/>
            </button>
          </div>
          <div style={{ position: 'absolute', bottom: 18, left: 20, color: '#fff' }}>
            <Logo size={28} wordColor="#fff"/>
            <div style={{ fontSize: 13, opacity: 0.9, marginTop: 8, maxWidth: 260 }}>{L.auth_sub}</div>
          </div>
          <div style={{ position: 'absolute', right: -50, top: -20, width: 220, opacity: 0.25 }}>
            <PostGrid handle="@mobauth" postsStyle="beauty" cols={3} rows={3} gap={3} radius={6}/>
          </div>
        </div>
        <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', gap: 4, background: 'var(--chip)', padding: 4, borderRadius: 12 }}>
            {['login','signup'].map(t => (
              <button key={t} onClick={() => setM(t)} style={{
                flex: 1, border: 0, padding: '10px', borderRadius: 8, cursor: 'pointer',
                background: m === t ? 'var(--card)' : 'transparent',
                color: m === t ? 'var(--ink)' : 'var(--ink-2)',
                fontWeight: 600, fontSize: 13,
                boxShadow: m === t ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
              }}>{t === 'login' ? L.auth_tab_login : L.auth_tab_signup}</button>
            ))}
          </div>
          {m === 'signup' && <Field icon="users" placeholder="Kullanıcı adı"/>}
          <Field icon="mail" placeholder={L.auth_email} type="email" defaultValue="demo@instasatis.com"/>
          <Field icon="lock" placeholder={L.auth_pass} type="password" defaultValue="••••••••"/>
          <button className="is-btn is-btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '14px' }}>
            {m === 'login' ? L.auth_login : L.auth_signup} <Icon name="arrow-right" size={14}/>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: 12 }}>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/> {L.auth_or} <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
          </div>
          <button className="is-btn is-btn-outline" style={{ width: '100%', justifyContent: 'center', padding: '12px' }}>
            <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335, #4285f4)' }}/>
            {L.auth_google}
          </button>
          <div className="is-card" style={{ padding: 14, marginTop: 10 }}>
            <TrustBar L={L} compact/>
          </div>
        </div>
      </div>
    </MobileChrome>
  );
}

function DashboardMobile({ L, lang, theme, favs, setFavs, onView }) {
  const [tab, setTab] = _mS('fav');
  const favItems = LISTINGS.filter(l => favs.includes(l.id));
  return (
    <MobileChrome>
      <div data-screen-label="08 Dashboard (Mobile)" style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        <div style={{ padding: '8px 16px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{L.dash_hello}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22 }}>serhat.a</div>
          </div>
          <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--grad)', display: 'grid', placeItems: 'center', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700 }}>SA</div>
        </div>

        {/* Stat cards */}
        <div style={{ padding: '12px 16px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          <MobileStatCard n={favs.length} l={L.dash_fav} icon="heart"/>
          <MobileStatCard n="3" l={L.dash_watch} icon="eye"/>
          <MobileStatCard n="1" l={L.dash_offers} icon="tag"/>
          <MobileStatCard n="2" l={L.dash_purchases} icon="check"/>
        </div>

        <div className="is-scroll-x" style={{ padding: '8px 16px 14px', display: 'flex', gap: 6 }}>
          {[
            { k: 'fav', label: L.dash_fav },
            { k: 'watch', label: L.dash_watch },
            { k: 'offers', label: L.dash_offers },
            { k: 'purchases', label: L.dash_purchases },
          ].map(c => (
            <button key={c.k} onClick={() => setTab(c.k)} style={{ ...filterChipStyle(tab === c.k), padding: '8px 14px', whiteSpace: 'nowrap', fontSize: 13 }}>{c.label}</button>
          ))}
        </div>

        <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {tab === 'fav' && favItems.length === 0 && (
            <div className="is-card" style={{ padding: 32, textAlign: 'center', color: 'var(--ink-3)' }}>
              <Icon name="heart" size={24}/> <div style={{ marginTop: 8, fontSize: 13 }}>{L.empty_fav}</div>
            </div>
          )}
          {tab === 'fav' && favItems.map(l => (
            <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="passport"
                         isFav onToggleFav={(id) => setFavs(f => f.filter(x => x !== id))}
                         onView={onView}/>
          ))}
          {tab === 'watch' && [LISTINGS[3], LISTINGS[6]].map(l => (
            <ListingCard key={l.id} listing={l} L={L} lang={lang} layout="passport"
                         isFav={favs.includes(l.id)}
                         onToggleFav={(id) => setFavs(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id])}
                         onView={onView}/>
          ))}
          {tab === 'offers' && (
            <div className="is-card" style={{ padding: 16 }}>
              <OfferRow L={L} lang={lang} listing={LISTINGS[1]} status="pending" amount={13500}/>
            </div>
          )}
          {tab === 'purchases' && (
            <div className="is-card" style={{ padding: 0, overflow: 'hidden' }}>
              {[
                { l: LISTINGS[2], date: '12 Nis 2026' },
                { l: LISTINGS[5], date: '28 Mar 2026' },
              ].map((p, i) => <PurchaseRow key={i} L={L} lang={lang} {...p} isFirst={i === 0}/>)}
            </div>
          )}
        </div>
      </div>
      <MobileTabBar active="dash" L={L}/>
    </MobileChrome>
  );
}

function MobileStatCard({ n, l, icon }) {
  return (
    <div className="is-card" style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--chip)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}>
          <Icon name={icon} size={14}/>
        </span>
        <span className="is-grad-text" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22 }}>{n}</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 6, fontFamily: 'var(--font-mono)', letterSpacing: '.06em', textTransform: 'uppercase' }}>{l}</div>
    </div>
  );
}

Object.assign(window, { HomeMobile, DetailMobile, AuthMobile, DashboardMobile, MobileChrome });