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

  return (
    <section id="top" data-screen-label="01 Hero" className="relative overflow-hidden">
      {/* Background layers */}
      <div aria-hidden className="absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-gradient-to-b from-hanyang-50/60 via-white to-white"/>
        <div className="absolute inset-0 grid-bg"/>
        <div className="absolute -top-24 -right-24 w-[520px] h-[520px] rounded-full blur-3xl opacity-50"
             style={{background:'radial-gradient(circle, rgba(207,148,23,0.25), transparent 60%)'}}/>
        <div className="absolute -top-32 -left-24 w-[520px] h-[520px] rounded-full blur-3xl opacity-70"
             style={{background:'radial-gradient(circle, rgba(0,56,118,0.18), transparent 60%)'}}/>
      </div>

      <div className="max-w-[1200px] mx-auto px-6 md:px-10 pt-14 md:pt-24 pb-16 md:pb-28">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-12 items-center">
          {/* Left — headline */}
          <div className="lg:col-span-7">
            <div className="inline-flex items-center gap-2 px-3 h-8 rounded-full border border-hanyang-100 bg-white shadow-sm text-[12px] font-semibold text-hanyang-700 animate-fadeUp">
              <IconDot size={6} className="text-gold-500 animate-pulse-soft"/>
              {t.hero.pill}
            </div>

            <h1 className="mt-6 text-[44px] sm:text-[58px] md:text-[72px] leading-[0.98] font-extrabold tracking-tight text-ink-900 text-balance animate-fadeUp"
                style={{ animationDelay: '60ms' }}>
              <span className="block">{t.hero.title_1}</span>
              <span className="block">
                <span className="bg-gradient-to-r from-hanyang-600 via-hanyang-500 to-hanyang-700 bg-clip-text text-transparent">
                  {t.hero.title_2}
                </span>
              </span>
              <span className="block">
                {t.hero.title_3}
                <span className="inline-block align-middle ml-2 h-[0.7em] w-[3px] bg-gold-500 animate-pulse-soft"/>
              </span>
            </h1>

            <p className="mt-6 max-w-xl text-[17px] md:text-[19px] leading-relaxed text-ink-500 text-pretty animate-fadeUp"
               style={{ animationDelay: '120ms' }}>
              {t.hero.sub}
            </p>

            <div className="mt-8 flex flex-wrap items-center gap-3 animate-fadeUp" style={{ animationDelay: '180ms' }}>
              <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener">
                <Button variant="default" size="xl" className="relative overflow-hidden">
                  {t.hero.cta_primary}
                  <IconArrow size={16}/>
                </Button>
              </a>
              <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener">
                <Button variant="outline" size="xl">
                  {t.hero.cta_secondary}
                </Button>
              </a>
            </div>

            <p className="mt-8 text-[13px] text-ink-400 font-medium animate-fadeUp" style={{ animationDelay: '240ms' }}>
              {t.hero.trust}
            </p>

            {/* inline trilingual cue */}
            <div className="mt-8 flex flex-wrap items-center gap-2 animate-fadeUp" style={{ animationDelay: '280ms' }}>
              <span className="text-[11px] font-bold uppercase tracking-[0.18em] text-ink-400">Trilingual</span>
              <span className="px-2.5 py-1 rounded-md bg-white border border-ink-200 text-[12px] font-ko font-semibold text-ink-800">한국어</span>
              <span className="px-2.5 py-1 rounded-md bg-white border border-ink-200 text-[12px] font-tc font-semibold text-ink-800">中文</span>
              <span className="px-2.5 py-1 rounded-md bg-white border border-ink-200 text-[12px] font-en font-semibold text-ink-800">English</span>
            </div>
          </div>

          {/* Right — product preview */}
          <div className="lg:col-span-5">
            <HeroPreview />
          </div>
        </div>

        {/* Stat bar */}
        <div className="mt-16 md:mt-24 grid grid-cols-3 gap-4 md:gap-8 border-t border-ink-100 pt-8">
          <Stat value="4.6"  unit={t.hero.stat_courses_unit} label={t.hero.stat_courses}/>
          <Stat value="9"    unit={t.hero.stat_reviews_unit} label={t.hero.stat_reviews}/>
          <Stat value="3"    unit={t.hero.stat_score_unit}   label={t.hero.stat_score}/>
        </div>
      </div>
    </section>
  );
}

function Stat({ value, unit, label }) {
  return (
    <div>
      <div className="flex items-baseline gap-1">
        <div className="text-[36px] md:text-[48px] font-extrabold tracking-tight text-ink-900 tabular-nums">{value}</div>
        <div className="text-[14px] md:text-[16px] font-semibold text-ink-400">{unit}</div>
      </div>
      <div className="mt-1 text-[13px] md:text-[14px] text-ink-500 font-medium">{label}</div>
    </div>
  );
}

// Mock product preview — a chat panel with Hanyang Bot answering
function HeroPreview() {
  const { lang } = useLang();

  const samples = {
    ko: {
      title: '스마트 캠퍼스 봇 · MBA 1학기',
      q: '재무관리 중간고사 난이도 어때요?',
      a: '선배 리뷰 12건을 분석했어요.\n평균 난이도 4.1 / 5 — 파생상품 단원에서 계산 문제 비중이 높습니다.',
      src: '출처: 2024-2 강의평가 · 족보 3건',
      chips: ['#재무관리', '#강의평가', '#2024-2'],
      input: '질문을 입력해 보세요…',
    },
    zh: {
      title: '智慧校園機器人 · MBA 第1學期',
      q: '財務管理期中考難度如何？',
      a: '分析了 12 則學長姐回饋。\n平均難度 4.1 / 5 — 衍生性商品單元計算題比重高。',
      src: '來源：2024-2 課程評價 · 考古題 3 則',
      chips: ['#財務管理', '#課程評價', '#2024-2'],
      input: '請輸入問題…',
    },
    en: {
      title: 'Smart Campus Bot · MBA · 1st sem',
      q: 'How hard is the Finance midterm?',
      a: 'Analyzed 12 senior reviews.\nAvg difficulty 4.1 / 5 — heavy on calculation in the derivatives unit.',
      src: 'Source: 2024-2 reviews · 3 past exams',
      chips: ['#Finance', '#Reviews', '#2024-2'],
      input: 'Ask anything…',
    },
  }[lang];

  return (
    <div className="relative animate-fadeUp" style={{ animationDelay: '160ms' }}>
      {/* floating badges */}
      <div className="hidden md:flex absolute -left-8 top-16 z-10 items-center gap-2 bg-white border border-ink-100 rounded-xl shadow-card-lg px-3 py-2 animate-float">
        <TierMedal color="gold" size={28}/>
        <div className="leading-tight">
          <div className="text-[10px] font-bold uppercase tracking-wider text-ink-400">Rewards</div>
          <div className="text-[12px] font-bold text-ink-800">+80 pt</div>
        </div>
      </div>
      <div className="hidden md:flex absolute -right-6 bottom-10 z-10 items-center gap-2 bg-white border border-ink-100 rounded-xl shadow-card-lg px-3 py-2 animate-float" style={{animationDelay:'900ms'}}>
        <div className="h-7 w-7 rounded-lg bg-hanyang-50 text-hanyang-700 grid place-items-center">
          <IconLoop size={16}/>
        </div>
        <div className="leading-tight">
          <div className="text-[10px] font-bold uppercase tracking-wider text-ink-400">pgvector</div>
          <div className="text-[12px] font-bold text-ink-800">1,284 memories</div>
        </div>
      </div>

      <div className="rounded-3xl bg-white border border-ink-100 shadow-card-lg overflow-hidden">
        {/* window chrome */}
        <div className="h-10 px-4 flex items-center gap-2 border-b border-ink-100 bg-ink-50/60">
          <span className="h-2.5 w-2.5 rounded-full bg-ink-200"/>
          <span className="h-2.5 w-2.5 rounded-full bg-ink-200"/>
          <span className="h-2.5 w-2.5 rounded-full bg-ink-200"/>
          <div className="ml-3 text-[12px] font-semibold text-ink-500 truncate">{samples.title}</div>
        </div>

        {/* content */}
        <div className="p-5 space-y-4">
          {/* Q bubble */}
          <div className="flex gap-3 justify-end">
            <div className="max-w-[80%] bg-hanyang-600 text-white px-4 py-2.5 rounded-2xl rounded-br-sm text-[14px] leading-relaxed shadow-sm">
              {samples.q}
            </div>
            <div className="h-8 w-8 rounded-full bg-ink-200 text-ink-600 grid place-items-center text-[11px] font-bold shrink-0">Me</div>
          </div>

          {/* A bubble */}
          <div className="flex gap-3">
            <div className="h-8 w-8 shrink-0"><IconLogo size={32}/></div>
            <div className="max-w-[82%] space-y-2">
              <div className="bg-ink-50 text-ink-800 px-4 py-3 rounded-2xl rounded-bl-sm text-[14px] leading-relaxed whitespace-pre-line border border-ink-100">
                {samples.a}
              </div>
              <div className="text-[11px] text-ink-400 font-medium pl-1">{samples.src}</div>
              <div className="flex flex-wrap gap-1.5 pl-1">
                {samples.chips.map((c, i) => (
                  <span key={i} className="px-2 py-0.5 rounded-md bg-white border border-ink-200 text-[11px] font-semibold text-ink-600">{c}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* input */}
        <div className="px-5 pb-5">
          <div className="flex items-center gap-2 h-11 rounded-xl border border-ink-200 px-3 bg-white">
            <IconSearch size={16} className="text-ink-400"/>
            <input placeholder={samples.input} className="flex-1 bg-transparent outline-none text-[13px] text-ink-700 placeholder:text-ink-400" />
            <kbd className="text-[10px] font-mono text-ink-400 border border-ink-200 rounded px-1.5 py-0.5">↵</kbd>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });