// Manar mark: the "Guiding Beam" — Raqeem's segmented signal bars stood
// upright into a beacon of light that climbs to the lamp (منار = beacon).
// Shares Raqeem's exact palette so the two products read as one family.
function ManarMark({ size = 40 }) {
  const { theme } = useTheme();
  const isLight = theme === 'light';
  const navy = isLight ? '#24418f' : '#3f66c8';
  const lampFill = isLight ? '#31a8d8' : '#ffffff';
  const lampCore = isLight ? '#ffffff' : '#147ac1';
  return (
    <svg width={size} height={size} viewBox="0 0 160 160" fill="none" aria-label="Manar">
      <g fill="none" strokeWidth="10" strokeLinecap="round">
        <line x1="27" y1="128" x2="133" y2="128" stroke="#3aae7c" />
        <line x1="34" y1="116" x2="126" y2="116" stroke="#2ba9a0" />
        <line x1="41" y1="104" x2="119" y2="104" stroke="#31a8d8" />
        <line x1="48" y1="92" x2="112" y2="92" stroke="#2e7cd6" />
        <line x1="55" y1="80" x2="105" y2="80" stroke={navy} />
        <line x1="62" y1="68" x2="98" y2="68" stroke="#2e7cd6" />
        <line x1="69" y1="56" x2="91" y2="56" stroke="#31a8d8" />
      </g>
      <circle cx="80" cy="40" r="11" fill={lampFill} />
      <circle cx="80" cy="40" r="4.5" fill={lampCore} />
    </svg>
  );
}

function Products() {
  const { lang, t } = useLang();
  const manar = t.products.manar;

  return (
    <section id="products" className="relative py-28 lg:py-36">
      <div className="absolute inset-0 -z-10 grid-dots opacity-30 [mask-image:radial-gradient(circle_at_50%_0%,black_0%,transparent_70%)]" />
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="max-w-2xl mb-14 reveal">
          <div className="text-[11px] tracking-[0.22em] uppercase text-purple-300/80 mb-4" style={{ fontFamily: 'Inter, Cairo, sans-serif' }}>
            — {t.products.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.products.title}</span>
          </h2>
          <p className="mt-5 text-[16px] text-white/60 leading-relaxed">{t.products.subtitle}</p>
        </div>

        <div className="reveal card-hover relative glass-strong rounded-3xl p-8 lg:p-10 overflow-hidden">
          <div className={`absolute -top-16 ${lang === 'ar' ? '-left-16' : '-right-16'} w-64 h-64 rounded-full`}
            style={{ background: 'radial-gradient(circle, rgba(22,185,120,0.22) 0%, transparent 60%)', filter: 'blur(30px)' }} />

          <div className="relative flex flex-col lg:flex-row lg:items-start gap-7">
            <div className="shrink-0">
              <div className="w-16 h-16 rounded-2xl glass flex items-center justify-center overflow-hidden">
                <ManarMark size={40} />
              </div>
            </div>

            <div className="flex-1 min-w-0">
              <div className="flex flex-wrap items-center gap-3 mb-3">
                <h3 className="text-[22px] font-bold text-white" style={{ fontFamily: lang === 'ar' ? 'Cairo, sans-serif' : 'Inter, Cairo, sans-serif' }}>
                  {manar.name}
                </h3>
              </div>

              <p className="text-[14px] text-purple-300/80 mb-4" style={{ fontFamily: 'Inter, Cairo, sans-serif' }}>
                {manar.tagline}
              </p>

              <p className="text-[15px] text-white/65 leading-relaxed max-w-2xl">
                {manar.description}
              </p>

              <div className="mt-6 flex flex-wrap gap-2">
                {manar.features.map((f, i) => (
                  <span key={i} className="rounded-full border border-white/10 bg-white/3 px-3 py-1.5 text-[12.5px] text-white/70">
                    {f}
                  </span>
                ))}
              </div>

              <a
                href={manar.url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-7 inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-[13.5px] font-semibold text-white transition-transform hover:-translate-y-0.5"
                style={{ background: 'linear-gradient(135deg, #147AC1, #16B978)' }}
              >
                {manar.cta}
                <I.ArrowRight size={15} className={lang === 'ar' ? 'flip-x' : ''} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ManarMark, Products });