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

  return (
    <section id="about" className="relative py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-5 lg:sticky lg:top-28 reveal">
            <div className="text-[11px] tracking-[0.22em] uppercase text-purple-300/80 mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
              — {t.about.eyebrow}
            </div>
            <h2 className={`font-bold leading-[1.08] tracking-tight ${lang === 'ar' ? 'text-[clamp(2rem,4.5vw,3.6rem)]' : 'text-[clamp(2.2rem,4.7vw,3.8rem)]'}`}>
              <span className="text-grad-cool">{t.about.title}</span>
            </h2>

            {/* big mark */}
            <div className="mt-10 hidden lg:block">
              <div className="relative w-44 h-44">
                <div className="absolute inset-0 rounded-full" style={{ background: 'radial-gradient(circle, rgba(168,85,247,0.35) 0%, transparent 65%)', filter: 'blur(20px)' }} />
                <div className="relative">
                  <OfuqMark size={176} />
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-7 reveal">
            <div className="space-y-6 text-[16.5px] text-white/70 leading-[1.85]">
              <p>{t.about.p1}</p>
              <p>{t.about.p2}</p>
            </div>

            {/* vision card */}
            <div className="mt-10 relative glass rounded-2xl p-8 overflow-hidden">
              <div className="absolute -top-12 -end-12 w-48 h-48 rounded-full"
                style={{ background: 'radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 60%)', filter: 'blur(30px)' }} />
              <div className="relative">
                <div className="text-[10px] uppercase tracking-[0.22em] text-purple-300/80 mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
                  {t.about.visionLabel}
                </div>
                <p className={`font-semibold text-white leading-snug ${lang === 'ar' ? 'text-[22px]' : 'text-[22px]'}`}>
                  "{t.about.vision}"
                </p>
              </div>
            </div>

            {/* pillars */}
            <div className="mt-8 grid sm:grid-cols-3 gap-3">
              {t.about.pillars.map((p, i) => {
                const colors = ['#3B82F6', '#A855F7', '#06B6D4'];
                return (
                  <div key={i} className="glass rounded-xl p-5 hover:border-white/15 transition">
                    <div className="flex items-center gap-2 mb-3">
                      <span className="w-1.5 h-1.5 rounded-full" style={{ background: colors[i] }} />
                      <span className="text-[10px] uppercase tracking-[0.18em] text-white/45" style={{ fontFamily: 'Inter, sans-serif' }}>
                        0{i + 1}
                      </span>
                    </div>
                    <div className={`text-white font-semibold mb-2 ${lang === 'ar' ? 'text-[17px]' : 'text-[16px]'}`}>{p.k}</div>
                    <div className="text-[13.5px] text-white/55 leading-relaxed">{p.v}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;