function AILoop() {
  const { t } = useLang();
  const steps = t.ai.steps;
  const [active, setActive] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % steps.length), 2400);
    return () => clearInterval(id);
  }, [steps.length]);

  const icons = [IconChat, IconBolt, IconSearch, IconSpark];

  return (
    <Section id="ai" toneNav="04 AI Loop"
             eyebrow={t.ai.eyebrow}
             title={t.ai.title}
             sub={t.ai.sub}>
      <div className="relative">
        {/* Desktop: circular loop (only at lg+ where we have room) */}
        <div className="hidden lg:block relative aspect-[16/9] max-w-5xl mx-auto">
          {/* center hub */}
          <div className="absolute inset-0 grid place-items-center">
            <div className="relative">
              <div className="absolute inset-0 rounded-full bg-hanyang-600/10 blur-2xl scale-150"/>
              <div className="relative h-48 w-48 rounded-full bg-white border border-ink-100 shadow-card-lg grid place-items-center">
                <div className="text-center">
                  <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-hanyang-600 text-white mb-3">
                    <IconLogo size={28}/>
                  </div>
                  <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-ink-400">{t.ai.loop_label}</div>
                  <div className="text-[16px] font-extrabold text-ink-900 mt-1">Smart Campus Bot</div>
                </div>
              </div>
              {/* orbit ring */}
              <div className="absolute inset-[-60px] rounded-full border-2 border-dashed border-ink-200/70 animate-orbit"/>
              <div className="absolute inset-[-60px] rounded-full border-2 border-hanyang-200/40"/>
            </div>
          </div>

          {/* four nodes */}
          {steps.map((s, i) => {
            const Icon = icons[i];
            const angle = (i / steps.length) * Math.PI * 2 - Math.PI / 2;
            const r = 42;   // % radius
            const x = 50 + Math.cos(angle) * r;
            const y = 50 + Math.sin(angle) * r;
            const activeNow = active === i;
            return (
              <div key={i}
                   className={cx('absolute w-[230px] -translate-x-1/2 -translate-y-1/2 transition-all duration-500')}
                   style={{ left: `${x}%`, top: `${y}%` }}>
                <div className={cx(
                  'rounded-2xl border bg-white p-4 shadow-card transition-all duration-500',
                  activeNow
                    ? 'border-hanyang-300 shadow-hanyang -translate-y-1'
                    : 'border-ink-100'
                )}>
                  <div className="flex items-center gap-3">
                    <div className={cx('h-10 w-10 rounded-lg grid place-items-center transition-colors',
                      activeNow ? 'bg-hanyang-600 text-white' : 'bg-hanyang-50 text-hanyang-700')}>
                      <Icon size={20}/>
                    </div>
                    <div className="min-w-0">
                      <div className="text-[10px] font-bold tracking-[0.14em] text-ink-400">{s.n}</div>
                      <div className="text-[14px] font-extrabold text-ink-900 leading-tight truncate">{s.k}</div>
                    </div>
                  </div>
                  <div className="mt-2.5 text-[12px] font-mono text-hanyang-700 bg-hanyang-50/70 rounded-md px-2 py-1 border border-hanyang-100 truncate">
                    {s.v}
                  </div>
                  <p className="mt-2 text-[12.5px] text-ink-500 leading-relaxed">{s.d}</p>
                </div>
                {activeNow && (
                  <div className="mt-2 flex items-center gap-1.5 text-[10.5px] font-bold text-hanyang-600 justify-center">
                    <IconDot size={6} className="text-gold-500 animate-pulse-soft"/>
                    LIVE
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Mobile + tablet: vertical steps */}
        <div className="lg:hidden space-y-4">
          {steps.map((s, i) => {
            const Icon = icons[i];
            return (
              <div key={i} className="flex gap-3">
                <div className="flex flex-col items-center">
                  <div className="h-10 w-10 rounded-lg bg-hanyang-600 text-white grid place-items-center shrink-0">
                    <Icon size={18}/>
                  </div>
                  {i < steps.length - 1 && <div className="flex-1 w-px dashed-vert my-2 min-h-[30px]"/>}
                </div>
                <div className="flex-1 pb-4">
                  <div className="text-[10px] font-bold tracking-[0.14em] text-ink-400">{s.n}</div>
                  <div className="text-[16px] font-extrabold text-ink-900">{s.k}</div>
                  <div className="mt-1 text-[12px] font-mono text-hanyang-700">{s.v}</div>
                  <p className="mt-1 text-[13px] text-ink-500">{s.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { AILoop });