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

  return (
    <section id="taboor" className="relative py-28 lg:py-36 overflow-hidden">
      {/* bg layers */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-1/4 -start-40 w-[520px] h-[520px] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(6,182,212,0.22) 0%, transparent 60%)', filter: 'blur(40px)' }} />
        <div className="absolute bottom-0 end-0 w-[600px] h-[600px] rounded-full"
          style={{ background: 'radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 60%)', filter: 'blur(40px)' }} />
      </div>

      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          {/* left: copy */}
          <div className="lg:col-span-6 reveal">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-[11px] uppercase tracking-[0.18em] text-cyan-300/85 mb-6" style={{ fontFamily: 'Inter, sans-serif' }}>
              <I.Spark size={12} />
              <span>{t.taboor.productTag}</span>
            </div>

            <div className="flex items-center gap-4 mb-6">
              <TaboorWordmark size={36} />
              <span className="px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/30 text-cyan-200 text-[11px]" style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>
                {t.taboor.badge}
              </span>
            </div>

            <h2 className={`font-bold leading-[1.1] tracking-tight mb-5 ${lang === 'ar' ? 'text-[clamp(2rem,4.4vw,3.4rem)]' : 'text-[clamp(2.1rem,4.4vw,3.5rem)]'}`}>
              <span className="text-grad-cool">{t.taboor.subtitle}</span>
            </h2>

            <p className={`text-white/65 leading-relaxed mb-9 max-w-xl ${lang === 'ar' ? 'text-[16px]' : 'text-[16px]'}`}>
              {t.taboor.description}
            </p>

            {/* features */}
            <div className="space-y-4 mb-10">
              {[
                { t: t.taboor.f1Title, d: t.taboor.f1Desc, c: '#06B6D4' },
                { t: t.taboor.f2Title, d: t.taboor.f2Desc, c: '#3B82F6' },
                { t: t.taboor.f3Title, d: t.taboor.f3Desc, c: '#A855F7' },
              ].map((f, i) => (
                <div key={i} className="flex items-start gap-4 group">
                  <div className="shrink-0 w-9 h-9 rounded-lg glass flex items-center justify-center transition group-hover:scale-105"
                    style={{ borderColor: `${f.c}55`, background: `${f.c}10` }}>
                    <I.Check size={14} style={{ color: f.c }} />
                  </div>
                  <div>
                    <div className={`font-semibold text-white mb-1 ${lang === 'ar' ? 'text-[16px]' : 'text-[15px]'}`}>{f.t}</div>
                    <div className="text-[13.5px] text-white/55 leading-relaxed">{f.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="flex flex-wrap items-center gap-4">
              <a
                href="https://taboor.ofuq.tech"
                target="_blank"
                rel="noopener noreferrer"
                className="cta-glow inline-flex items-center gap-2.5 px-7 py-3.5 rounded-full text-white font-semibold text-[14.5px] transition"
                style={{ background: 'linear-gradient(110deg, #06B6D4 0%, #3B82F6 50%, #A855F7 100%)', backgroundSize: '200% 100%' }}
              >
                <span>{t.taboor.cta}</span>
                <I.External size={14} />
              </a>
              <div className="flex items-center gap-2 text-white/50 text-[13px]" style={{ fontFamily: 'JetBrains Mono, monospace' }}>
                <span className="relative flex h-1.5 w-1.5">
                  <span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-60" />
                  <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-400" />
                </span>
                {t.taboor.visit}
              </div>
            </div>
          </div>

          {/* right: product showcase */}
          <div className="lg:col-span-6 reveal">
            <TaboorShowcase />
          </div>
        </div>
      </div>
    </section>
  );
}

function TaboorShowcase() {
  const { lang, t } = useLang();
  const [now, setNow] = React.useState(247);

  React.useEffect(() => {
    const id = setInterval(() => setNow(n => n + 1), 4200);
    return () => clearInterval(id);
  }, []);

  const queue = [
    { n: now + 1, name: lang === 'ar' ? 'محمد أ.' : 'Mohammed A.', wait: '00:14', counter: 'A2' },
    { n: now + 2, name: lang === 'ar' ? 'سارة ك.' : 'Sara K.', wait: '00:42', counter: '—' },
    { n: now + 3, name: lang === 'ar' ? 'فهد ر.' : 'Fahad R.', wait: '01:06', counter: '—' },
    { n: now + 4, name: lang === 'ar' ? 'نورة ع.' : 'Noura A.', wait: '01:38', counter: '—' },
  ];

  return (
    <div className="relative" style={{ direction: 'ltr' }}>
      {/* main display card */}
      <div className="relative glass-strong rounded-[28px] p-6 lg:p-7 overflow-hidden">
        {/* top bar */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-2">
            <TaboorMark size={28} />
            <span className="text-[13px] font-semibold text-white">Taboor</span>
            <span className="text-[10px] text-white/40 px-1.5 py-0.5 rounded-md bg-white/5" style={{ fontFamily: 'JetBrains Mono, monospace' }}>v1.0.0</span>
          </div>
          <div className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-rose-400/70" />
            <span className="w-2.5 h-2.5 rounded-full bg-amber-400/70" />
            <span className="w-2.5 h-2.5 rounded-full bg-emerald-400/70" />
          </div>
        </div>

        {/* big now-serving card */}
        <div className="relative rounded-2xl p-6 mb-4 overflow-hidden"
          style={{ background: 'linear-gradient(135deg, rgba(6,182,212,0.18) 0%, rgba(59,130,246,0.12) 50%, rgba(168,85,247,0.18) 100%)', border: '1px solid rgba(6,182,212,0.28)' }}>
          <div className="absolute inset-0 grid-dots opacity-30" />
          <div className="relative flex items-center justify-between">
            <div>
              <div className="text-[10px] uppercase tracking-[0.22em] text-cyan-200/85 mb-1.5" style={{ fontFamily: 'Inter, sans-serif' }}>
                {lang === 'ar' ? 'NOW SERVING' : 'NOW SERVING'}
              </div>
              <div className="text-[11px] text-white/55 mb-2" style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>{t.taboor.demoNow}</div>
              <div className="text-white text-[64px] lg:text-[72px] leading-none font-extrabold tracking-tight tabular-nums" style={{ fontFamily: 'Inter, sans-serif' }}>
                {String(now).padStart(3, '0')}
              </div>
            </div>
            <div className="text-end">
              <div className="text-[10px] uppercase tracking-[0.22em] text-white/45 mb-1.5" style={{ fontFamily: 'Inter, sans-serif' }}>{t.taboor.demoCounter}</div>
              <div className="w-20 h-20 rounded-2xl glass flex items-center justify-center">
                <span className="text-[34px] font-extrabold text-grad" style={{ fontFamily: 'Inter, sans-serif' }}>A1</span>
              </div>
              <div className="mt-3 inline-flex items-center gap-1.5 text-[10px] text-cyan-300/85" style={{ fontFamily: 'JetBrains Mono, monospace' }}>
                <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 pulse-dot" />
                LIVE
              </div>
            </div>
          </div>
        </div>

        {/* queue list */}
        <div className="rounded-2xl bg-white/[0.02] border border-white/8 p-3">
          <div className="flex items-center justify-between px-2 py-1 mb-1">
            <span className="text-[10px] uppercase tracking-[0.18em] text-white/45" style={{ fontFamily: 'Inter, sans-serif' }}>
              {lang === 'ar' ? 'IN QUEUE' : 'IN QUEUE'}
            </span>
            <span className="text-[10px] text-white/35" style={{ fontFamily: 'JetBrains Mono, monospace' }}>{queue.length} pending</span>
          </div>
          <div className="space-y-1.5">
            {queue.map((q, i) => (
              <div key={q.n} className={`flex items-center justify-between px-3 py-2.5 rounded-lg transition ${i === 0 ? 'bg-gradient-to-r from-cyan-500/12 to-transparent border border-cyan-400/20' : 'hover:bg-white/3'}`}>
                <div className="flex items-center gap-3">
                  <span className={`text-[15px] font-bold tabular-nums w-12 ${i === 0 ? 'text-cyan-200' : 'text-white/70'}`} style={{ fontFamily: 'Inter, sans-serif' }}>
                    {String(q.n).padStart(3, '0')}
                  </span>
                  <span className="text-[13px] text-white/75" style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>{q.name}</span>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-[11px] text-white/40 tabular-nums" style={{ fontFamily: 'JetBrains Mono, monospace' }}>{q.wait}</span>
                  <span className={`text-[10px] px-2 py-0.5 rounded ${q.counter === '—' ? 'bg-white/4 text-white/35' : 'bg-cyan-500/15 text-cyan-200 border border-cyan-400/20'}`} style={{ fontFamily: 'JetBrains Mono, monospace' }}>
                    {q.counter}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* mini stats */}
        <div className="mt-4 grid grid-cols-3 gap-2">
          {[
            { l: 'served today', v: '1,284', c: '#06B6D4' },
            { l: 'avg wait', v: '03:12', c: '#3B82F6' },
            { l: 'counters', v: '06 / 06', c: '#A855F7' },
          ].map((s, i) => (
            <div key={i} className="rounded-xl bg-white/[0.025] border border-white/8 px-3 py-2.5">
              <div className="text-[9px] uppercase tracking-[0.18em] text-white/40" style={{ fontFamily: 'Inter, sans-serif' }}>{s.l}</div>
              <div className="text-[15px] font-bold text-white mt-1 tabular-nums" style={{ fontFamily: 'Inter, sans-serif' }}>
                {s.v}
              </div>
              <div className="mt-1.5 h-0.5 rounded-full" style={{ background: `linear-gradient(90deg, ${s.c}, transparent)` }} />
            </div>
          ))}
        </div>
      </div>

      {/* floating mini card */}
      <div className="hidden md:block absolute -bottom-6 -start-6 glass-strong rounded-2xl p-4 w-56 rotate-[-3deg] shadow-2xl">
        <div className="flex items-center justify-between mb-2">
          <span className="text-[10px] uppercase tracking-[0.2em] text-cyan-300/85" style={{ fontFamily: 'Inter, sans-serif' }}>your ticket</span>
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot" />
        </div>
        <div className="text-[44px] font-extrabold text-grad leading-none tabular-nums" style={{ fontFamily: 'Inter, sans-serif' }}>
          {String(now + 3).padStart(3, '0')}
        </div>
        <div className="mt-2 text-[10px] text-white/50" style={{ fontFamily: 'JetBrains Mono, monospace' }}>~ 4 min remaining</div>
      </div>
    </div>
  );
}

window.Taboor = Taboor;