function MobilePreview() {
  const { t, lang } = useLang();

  return (
    <Section toneNav="07 Mobile"
             eyebrow={t.mobile.eyebrow}
             title={t.mobile.title}
             sub={t.mobile.sub}>

      <div className="flex gap-6 md:gap-10 overflow-x-auto no-scrollbar pb-4 snap-x snap-mandatory -mx-6 px-6 md:mx-0 md:px-0 md:justify-center">
        <Phone label={t.mobile.s1}><MobileHome/></Phone>
        <Phone label={t.mobile.s2}><MobileReviews/></Phone>
        <Phone label={t.mobile.s3}><MobileRewards/></Phone>
      </div>
    </Section>
  );
}

function Phone({ label, children }) {
  return (
    <div className="snap-center shrink-0 w-[280px]">
      <div className="relative mx-auto w-[280px] h-[580px] rounded-[46px] bg-ink-900 p-[10px] shadow-card-lg">
        <div className="relative w-full h-full rounded-[36px] bg-white overflow-hidden">
          {/* notch */}
          <div className="absolute top-2 left-1/2 -translate-x-1/2 z-10 h-5 w-28 rounded-full bg-ink-900"/>
          <div className="h-full w-full overflow-hidden">{children}</div>
        </div>
      </div>
      <div className="mt-4 text-center text-[13px] font-semibold text-ink-700">{label}</div>
    </div>
  );
}

function MobileHome() {
  const { lang, zhVariant } = useLang();
  const copy = {
    ko: { hi: '안녕하세요, 민준님', sub: '오늘의 학습 리포트' , tag: '주간 +240P', ask:'무엇이든 물어보세요'},
    zh: { hi: '嗨，Minjun',       sub: '今日學習報告',        tag: '本週 +240P', ask:'隨時提問'},
    zhCN: { hi: '嗨，Minjun',     sub: '今日学习报告',        tag: '本周 +240P', ask:'随时提问'},
    en: { hi: 'Hi, Minjun',       sub: "Today’s learning report", tag: 'This week +240P', ask:'Ask anything' },
  }[lang==='zh' && zhVariant==='cn' ? 'zhCN' : lang];
  return (
    <div className="pt-10 h-full flex flex-col bg-gradient-to-b from-hanyang-50/70 to-white">
      <div className="px-4 flex items-center justify-between">
        <div>
          <div className="text-[11px] text-ink-400 font-semibold">{copy.sub}</div>
          <div className="text-[15px] font-extrabold text-ink-900">{copy.hi}</div>
        </div>
        <TierMedal color="gold" size={32}/>
      </div>

      <div className="mt-3 mx-4 rounded-2xl bg-hanyang-600 text-white p-3 shadow-hanyang relative overflow-hidden">
        <div aria-hidden className="absolute -right-8 -top-8 w-24 h-24 rounded-full blur-2xl"
             style={{background:'radial-gradient(circle, rgba(207,148,23,0.5), transparent 60%)'}}/>
        <div className="text-[10px] font-bold uppercase tracking-wider text-hanyang-100">Rewards</div>
        <div className="mt-0.5 text-[18px] font-extrabold">520 P</div>
        <div className="text-[11px] text-hanyang-100">{copy.tag}</div>
        <Progress value={40} className="mt-2 !bg-white/20"/>
      </div>

      <div className="mt-3 mx-4 flex items-center gap-2 h-10 rounded-xl bg-white border border-ink-200 px-3">
        <IconSearch size={15} className="text-ink-400"/>
        <div className="text-[12px] text-ink-400">{copy.ask}</div>
      </div>

      <div className="mt-3 mx-4 grid grid-cols-3 gap-2">
        {[{i:IconStar,l:lang==='ko'?'강의평가':lang==='zh'?(zhVariant==='cn'?'评价':'評價'):'Reviews'},
          {i:IconBook,l:lang==='ko'?'족보':lang==='zh'?(zhVariant==='cn'?'考古题':'考古題'):'Exams'},
          {i:IconQuestion,l:lang==='ko'?'Q&A':lang==='zh'?(zhVariant==='cn'?'问答':'問答'):'Q&A'}].map((c,i)=>(
          <div key={i} className="aspect-square rounded-xl border border-ink-100 bg-white flex flex-col items-center justify-center gap-1">
            <div className="h-8 w-8 rounded-lg bg-hanyang-50 text-hanyang-700 grid place-items-center">
              <c.i size={16}/>
            </div>
            <div className="text-[10.5px] font-bold text-ink-800">{c.l}</div>
          </div>
        ))}
      </div>

      <div className="mt-3 mx-4 flex-1 rounded-2xl border border-ink-100 bg-white p-3">
        <div className="text-[11px] font-bold text-ink-400 uppercase tracking-wider">Today</div>
        <div className="mt-2 space-y-2">
          {[{t:'재무관리', s:'과제 D-2', b:'bg-gold-500'},
            {t:'조직행동론', s:'퀴즈 D-5', b:'bg-hanyang-600'}].map((r,i)=>(
            <div key={i} className="flex items-center gap-2 rounded-lg bg-ink-50 p-2">
              <span className={cx('h-2 w-2 rounded-full', r.b)}/>
              <div className="text-[11.5px] font-bold text-ink-800 flex-1">{r.t}</div>
              <div className="text-[10.5px] font-semibold text-ink-500">{r.s}</div>
            </div>
          ))}
        </div>
      </div>

      {/* bottom tab */}
      <div className="h-14 border-t border-ink-100 bg-white flex items-center justify-around px-6">
        {[IconHome, IconStar, IconLoop, IconGift].map((I,i)=>(
          <div key={i} className={cx(i===0?'text-hanyang-600':'text-ink-400')}><I size={18}/></div>
        ))}
      </div>
    </div>
  );
}

function MobileReviews() {
  const { lang, zhVariant } = useLang();
  const title = lang==='ko'?'강의평가':lang==='zh'?(zhVariant==='cn'?'课程评价':'課程評價'):'Course reviews';
  const list = [
    { n:'재무관리', prof:'김재원', s:4.1, w:'★★★★☆', tag:'과제 많음', count:12 },
    { n:'조직행동론', prof:'이서현', s:4.5, w:'★★★★★', tag:'강추', count:18 },
    { n:'데이터사이언스', prof:'박민수', s:3.8, w:'★★★★☆', tag:'과제 빡셈', count:9 },
    { n:'마케팅전략', prof:'정유진', s:4.3, w:'★★★★☆', tag:'토론', count:14 },
  ];
  return (
    <div className="pt-10 h-full flex flex-col">
      <div className="px-4 pt-1 pb-3 border-b border-ink-100">
        <div className="text-[15px] font-extrabold text-ink-900">{title}</div>
        <div className="mt-2 flex items-center gap-2 h-9 rounded-lg bg-ink-50 px-3">
          <IconSearch size={13} className="text-ink-400"/>
          <div className="text-[11.5px] text-ink-400">MBA 2025-1</div>
        </div>
        <div className="mt-2 flex gap-1.5 overflow-x-auto no-scrollbar">
          {['전체','재무','마케팅','OB','DS'].map((t,i)=>(
            <span key={i} className={cx('px-2 h-6 inline-flex items-center rounded-full text-[10.5px] font-bold shrink-0',
              i===0?'bg-hanyang-600 text-white':'bg-ink-100 text-ink-600')}>{t}</span>
          ))}
        </div>
      </div>
      <div className="flex-1 overflow-y-auto">
        {list.map((r,i)=>(
          <div key={i} className="px-4 py-3 border-b border-ink-100">
            <div className="flex items-start justify-between gap-2">
              <div>
                <div className="text-[13px] font-extrabold text-ink-900">{r.n}</div>
                <div className="text-[11px] text-ink-500">{r.prof} · {r.count} reviews</div>
              </div>
              <div className="flex items-center gap-1 text-gold-600">
                <IconStar size={12}/>
                <span className="text-[12px] font-extrabold text-ink-900 tabular-nums">{r.s.toFixed(1)}</span>
              </div>
            </div>
            <div className="mt-1.5 flex flex-wrap gap-1">
              <span className="px-1.5 h-4 inline-flex items-center text-[9.5px] font-semibold rounded bg-gold-50 text-gold-800 border border-gold-200">{r.tag}</span>
              <span className="px-1.5 h-4 inline-flex items-center text-[9.5px] font-semibold rounded bg-hanyang-50 text-hanyang-700 border border-hanyang-100">2025-1</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileRewards() {
  const { t, lang } = useLang();
  const tiers = t.rewards.tiers;
  return (
    <div className="pt-10 h-full flex flex-col bg-ink-900 text-white">
      <div className="px-4 pt-1 pb-3">
        <div className="text-[11px] font-bold uppercase tracking-wider text-ink-300">{t.rewards.current}</div>
        <div className="mt-1 text-[18px] font-extrabold">{tiers[2].name}</div>
      </div>
      <div className="mx-4 rounded-2xl p-4 bg-gradient-to-br from-ink-800 to-ink-900 border border-gold-500/30 relative overflow-hidden">
        <div aria-hidden className="absolute -right-10 -top-10 w-40 h-40 rounded-full blur-3xl"
             style={{background:'radial-gradient(circle, rgba(207,148,23,0.5), transparent 60%)'}}/>
        <div className="flex items-center gap-3 relative">
          <TierMedal color="gold" size={58} glow/>
          <div>
            <div className="text-[9.5px] font-bold uppercase tracking-[0.14em] text-gold-300">UNLOCKED</div>
            <div className="text-[16px] font-extrabold">{tiers[2].name}</div>
            <div className="text-[10.5px] text-ink-300">{tiers[2].en} · {tiers[2].zh}</div>
          </div>
        </div>
        <div className="mt-3 text-[11.5px] text-ink-200">{tiers[2].perk}</div>
      </div>

      <div className="mt-4 mx-4 grid grid-cols-4 gap-2">
        {tiers.map((tier,i)=>(
          <div key={i} className={cx('rounded-lg p-2 border text-center',
            i<=2?'border-gold-500/30 bg-white/5':'border-white/10 opacity-40')}>
            <div className="mx-auto mb-1"><TierMedal color={tier.color} size={22}/></div>
            <div className="text-[9px] font-bold">{tier.name}</div>
          </div>
        ))}
      </div>

      <div className="mt-4 mx-4 flex-1 rounded-2xl bg-white text-ink-900 p-3">
        <div className="text-[11px] font-bold uppercase tracking-wider text-ink-400">{t.rewards.point_label}</div>
        <div className="mt-0.5 text-[22px] font-extrabold text-hanyang-700 tabular-nums">920 <span className="text-[13px] text-ink-400">P</span></div>
        <Progress value={14} className="mt-2"/>
        <div className="mt-1 text-[10.5px] text-ink-500">{t.rewards.next} {tiers[3].name} · 1,080 P</div>

        <div className="mt-3 space-y-1.5">
          {t.rewards.earn.map((e,i)=>(
            <div key={i} className="flex items-center justify-between text-[11.5px]">
              <span className="text-ink-700 font-semibold">{e.act}</span>
              <span className="text-gold-600 font-bold tabular-nums">{e.pt}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MobilePreview });