const Services = () => {
  const items = [
    {
      artKey: 'WebDev',
      icon: 'Doc',
      title: 'Web Development',
      desc: "We don't just build websites — we translate your vision into a powerful digital tool that drives results for your online presence.",
      tag: 'Sites · Web Apps',
      stat: '98 Lighthouse',
      color: '#E63329',
    },
    {
      artKey: 'MobileApp',
      icon: 'Cube',
      title: 'Mobile App Development',
      desc: 'Native and cross-platform apps for iOS and Android. Designed for performance, built for scale, instrumented for growth from day one.',
      tag: 'iOS · Android',
      stat: '4.8★ avg rating',
      color: '#1B7BD6',
    },
    {
      artKey: 'Marketing',
      icon: 'Globe',
      title: 'Digital Marketing',
      desc: 'A comprehensive suite of marketing services — SEO, paid media, social, email, content. We manage and execute your presence online 24/7/365.',
      tag: 'SEO · Paid · Social',
      stat: '3.4× ROAS',
      color: '#F5C518',
    },
    {
      artKey: 'GraphicDesign',
      icon: 'Bag',
      title: 'Graphic Design',
      desc: 'Be Seen. Be Heard. Be Remembered. Webever builds a unified, powerful, and impactful visual presence — brand, web, print, and product.',
      tag: 'Brand · Visual',
      stat: 'End-to-end',
      color: '#E63329',
    },
    {
      artKey: 'Ecommerce',
      icon: 'Cart',
      title: 'eCommerce & CMS',
      desc: "Online commerce is no longer optional. We build storefronts, headless commerce, and content systems that grow revenue and stay editable.",
      tag: 'Shopify · Headless',
      stat: '+44% conversion',
      color: '#14A04A',
    },
    {
      artKey: 'ITBundle',
      icon: 'Layers',
      title: 'All IT Service Bundle',
      desc: 'One contract, every capability — web, mobile, cloud, AI, data, DevOps, security, support, growth. A single team that owns your entire stack.',
      tag: '9 services · 1 SLA',
      stat: '24/7 cover',
      color: '#1B7BD6',
    },
  ];

  const [active, setActive] = useState(null);

  return (
    <Section
      id="services"
      eyebrow="Digital services"
      title="Beyond AI — the full digital stack."
      sub="Webever is not only an AI engineering firm. We design, build, market, and run every layer your business needs — from website to mobile, from brand to bundle."
      className="border-t border-token"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5" itemScope itemType="https://schema.org/ItemList">
        {items.map((it, i) => {
          const IconCmp = I[it.icon];
          const Art = ServiceArt[it.artKey];
          const isActive = active === i;
          return (
            <a
              key={i}
              href="#contact"
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(null)}
              className="reveal card group relative overflow-hidden transition-all hover:-translate-y-1"
              style={{
                transitionDelay: `${i*40}ms`,
                boxShadow: isActive ? `0 20px 40px -20px ${it.color}55` : undefined,
              }}
              itemScope itemType="https://schema.org/Service"
              itemProp="itemListElement"
            >
              <meta itemProp="position" content={i+1}/>
              <meta itemProp="serviceType" content={it.title}/>

              <div className="relative h-[160px] overflow-hidden border-b border-token"
                   style={{ background: `linear-gradient(135deg, ${it.color}10 0%, transparent 100%)` }}>
                <div className="absolute inset-0 transition-transform duration-700 group-hover:scale-105">
                  {Art ? <Art color={it.color}/> : null}
                </div>
                <div className="absolute top-3 left-3 px-2 py-1 rounded-md font-mono text-[10px] tracking-[0.14em] uppercase backdrop-blur-sm"
                     style={{background: 'var(--surface)', color: it.color, border: `1px solid ${it.color}30`}}>
                  Service · {String(i+1).padStart(2,'0')}
                </div>
                <div className="absolute top-3 right-3 px-2.5 py-1 rounded-md text-[11px] font-mono font-medium backdrop-blur-sm"
                     style={{background: it.color, color: '#fff'}}>
                  {it.stat}
                </div>
              </div>

              <div className="p-6">
                <div className="flex items-start gap-3 mb-3">
                  <div className="w-10 h-10 rounded-lg border border-token flex items-center justify-center flex-shrink-0"
                       style={{ color: it.color, background: `${it.color}0D` }}>
                    {IconCmp ? <IconCmp size={18}/> : null}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="display text-[20px] leading-[1.15]" itemProp="name">{it.title}</h3>
                  </div>
                </div>
                <p className="text-[13.5px] text-muted leading-relaxed" itemProp="description">{it.desc}</p>

                <div className="mt-5 pt-4 border-t border-token w-full flex items-center justify-between">
                  <span className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted">
                    {it.tag}
                  </span>
                  <span className="inline-flex items-center gap-1 text-[12px] font-mono uppercase tracking-[0.14em] group-hover:translate-x-0.5 transition-transform"
                        style={{color: it.color}}>
                    Read more <I.ArrowUR size={14}/>
                  </span>
                </div>
              </div>

              <div className="absolute inset-x-0 top-0 h-0.5 transition-opacity duration-300"
                   style={{
                     background: `linear-gradient(90deg, transparent, ${it.color}, transparent)`,
                     opacity: isActive ? 1 : 0,
                   }}/>
            </a>
          );
        })}
      </div>
    </Section>
  );
};

window.Services = Services;