function Services({ learnMoreUrl, learnMoreNewTab }) {
  const { lang, t } = useLang();

  const services = [
    {
      ...t.services.s1,
      icon: <I.Layers size={22} className="text-cyan-300" />,
      grad: 'from-cyan-500/20 via-cyan-500/5 to-transparent',
      ringColor: 'rgba(6,182,212,0.5)',
      hueA: '#06B6D4',
      hueB: '#3B82F6',
      number: '01',
    },
  ];

  return (
    <section id="services" className="relative py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="max-w-3xl mb-16 reveal">
          <div className="text-[11px] tracking-[0.22em] uppercase text-cyan-300/80 mb-4" style={{ fontFamily: 'Inter, sans-serif' }}>
            — {t.services.eyebrow}
          </div>
          <h2 className={`font-bold leading-[1.1] 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.services.title}</span>
          </h2>
          <p className={`mt-5 text-white/60 max-w-2xl ${lang === 'ar' ? 'text-[16px]' : 'text-[17px]'} leading-relaxed`}>
            {t.services.subtitle}
          </p>
        </div>

        <div className="grid md:grid-cols-1 gap-6 lg:gap-8 max-w-3xl">
          {services.map((s, i) => (
            <ServiceCard key={i} {...s} learnMoreUrl={learnMoreUrl} learnMoreNewTab={learnMoreNewTab} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ tag, title, desc, bullets, icon, grad, hueA, hueB, number, learnMoreUrl, learnMoreNewTab }) {
  const { lang, t } = useLang();
  return (
    <a
      href={learnMoreUrl || 'https://taboor.ofuq.tech'}
      target={learnMoreNewTab ? '_blank' : undefined}
      rel={learnMoreNewTab ? 'noopener noreferrer' : undefined}
      className="reveal card-hover relative glass rounded-3xl p-8 lg:p-10 overflow-hidden group block cursor-pointer">
      {/* glow */}
      <div className={`absolute -top-20 ${lang === 'ar' ? '-left-20' : '-right-20'} w-72 h-72 rounded-full opacity-50 transition-opacity duration-700 group-hover:opacity-90`}
        style={{ background: `radial-gradient(circle, ${hueA}55 0%, transparent 60%)`, filter: 'blur(40px)' }} />

      <div className="relative flex items-start justify-between gap-6 mb-7">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl glass-strong flex items-center justify-center" style={{ borderColor: `${hueA}55` }}>
            {icon}
          </div>
          <div className="text-[11px] uppercase tracking-[0.2em] text-white/45" style={{ fontFamily: 'Inter, sans-serif' }}>
            {tag}
          </div>
        </div>
        <div className="text-[42px] font-bold text-white/8 leading-none" style={{ fontFamily: 'Inter, sans-serif' }}>
          {number}
        </div>
      </div>

      <h3 className={`font-bold text-white leading-tight mb-4 ${lang === 'ar' ? 'text-[26px] lg:text-[30px]' : 'text-[28px] lg:text-[32px]'}`}>
        {title}
      </h3>

      <p className={`text-white/60 leading-relaxed mb-7 ${lang === 'ar' ? 'text-[15px]' : 'text-[15px]'}`}>
        {desc}
      </p>

      <ul className="space-y-3 mb-2">
        {bullets.map((b, i) => (
          <li key={i} className="flex items-center gap-3 text-[14px] text-white/80">
            <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center"
              style={{ background: `linear-gradient(135deg, ${hueA}, ${hueB})` }}>
              <I.Check size={11} className="text-white" />
            </span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      {/* bottom strip */}
      <div className="mt-8 pt-6 border-t border-white/8 flex items-center justify-between">
        <div className="flex items-center gap-1.5">
          {[hueA, hueB, '#06B6D4'].map((c, i) => (
            <span key={i} className="w-1.5 h-1.5 rounded-full" style={{ background: c, opacity: 0.7 }} />
          ))}
        </div>
        <span className="text-[12px] text-cyan-300/85 group-hover:text-cyan-200 inline-flex items-center gap-1.5 transition" style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>
          {t.services.learnMore}
          <I.ArrowRight size={12} className={lang === 'ar' ? 'flip-x' : ''} />
        </span>
      </div>
    </a>
  );
}

window.Services = Services;