// Services section — grid layout with consistent styling
const { useState: useStateSC } = React;

function IconExperience(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <rect x="3" y="5" width="18" height="14" rx="3"></rect>
      <path d="M8 3v4M16 3v4M3 10h18"></path>
    </svg>
  );
}

function IconAI(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <circle cx="12" cy="12" r="3.5"></circle>
      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.2 2.2M16.9 16.9l2.2 2.2M19.1 4.9l-2.2 2.2M7.1 16.9l-2.2 2.2"></path>
    </svg>
  );
}

function IconProduction(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <rect x="3" y="6" width="14" height="12" rx="2"></rect>
      <path d="M17 10l4-2v8l-4-2V10z"></path>
    </svg>
  );
}

function IconMarketing(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <path d="M4 19V9"></path>
      <path d="M10 19V5"></path>
      <path d="M16 19v-7"></path>
      <path d="M22 19V3"></path>
    </svg>
  );
}

function IconConsulting(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...props}>
      <path d="M4 6h16"></path>
      <path d="M4 12h10"></path>
      <path d="M4 18h7"></path>
      <circle cx="18" cy="12" r="3"></circle>
    </svg>
  );
}

const SERVICES = [
  {
    number: "01",
    title: "Immersive Digital Experience",
    description:
      "We create immersive websites, corporate digital experiences, shopping platforms and interactive advergames designed to increase engagement, extend user sessions, and enhance experience quality.",
    icon: IconExperience,
  },
  {
    number: "02",
    title: "Interactive Installations & AI",
    description:
      "Interactive installations, AI experiences, spatial computing solutions, and augmented reality for events and brand activations that drive meaningful engagement.",
    icon: IconAI,
  },
  {
    number: "03",
    title: "Original Films & 3D Production",
    description:
      "Original films, CGI production, VFX services, 3D content and professional sound design for digital campaigns, branding and product storytelling.",
    icon: IconProduction,
  },
  {
    number: "04",
    title: "Social Media & Digital Marketing",
    description:
      "Digital strategy, content creation, social media management, targeted advertising, SEO optimization and performance analytics for measurable results.",
    icon: IconMarketing,
  },
  {
    number: "05",
    title: "AQuest Consulting",
    description:
      "Strategic consulting on digital ecosystems, innovation initiatives, ICT infrastructure, cloud solutions and cybersecurity for digital transformation.",
    icon: IconConsulting,
  },
];

function SectionHeader({ eyebrow, title, italic, subtext, cta = true }) {
  return (
    <div className="flex flex-col gap-6 mb-10 md:mb-14">
      <div className="max-w-2xl">
        <div className="flex items-center gap-3 mb-5">
          <span className="w-8 h-px bg-stroke"></span>
          <span className="text-xs text-muted uppercase tracking-[0.3em]">{eyebrow}</span>
        </div>
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-body font-light text-text-primary leading-[1.05] tracking-tight">
          {title}{" "}
          <span className="font-display italic text-text-primary">{italic}</span>
        </h2>
        {subtext && <p className="text-sm md:text-base text-muted mt-5 max-w-2xl leading-relaxed">{subtext}</p>}
      </div>
    </div>
  );
}

function ServiceCard({ service }) {
  const Icon = service.icon;

  return (
    <div className="relative block bg-surface border border-stroke rounded-3xl overflow-hidden p-8 md:p-10 flex flex-col justify-between h-full">
      <div className="absolute inset-0 halftone opacity-20 mix-blend-multiply pointer-events-none"></div>

      {/* Number tag (top-left) */}
      <div className="relative z-10 text-[11px] uppercase tracking-[0.25em] text-text-primary/60 font-mono">
        ( {service.number} )
      </div>

      {/* Icon and content */}
      <div className="relative z-10 flex flex-col gap-5">
        <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-surface border border-stroke/50">
          <Icon className="h-6 w-6 text-text-primary" />
        </div>
        
        <div>
          <h3 className="text-base md:text-lg font-semibold text-text-primary leading-tight mb-2">
            {service.title}
          </h3>
          <p className="text-xs md:text-sm text-muted leading-6">
            {service.description}
          </p>
        </div>
      </div>
    </div>
  );
}

function ServicesCarouselSection() {
  return (
    <section id="services" className="bg-bg py-12 md:py-16">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16">
        <SectionHeader
          eyebrow="Services"
          title="Creative, Digital &"
          italic="Technology Solutions"
          subtext="A comprehensive ecosystem combining digital experience design, artificial intelligence, 3D production, social media expertise, SEO optimization and strategic consulting."
        />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 auto-rows-fr">
          {SERVICES.map((service) => (
            <ServiceCard key={service.number} service={service} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.ServicesCarouselSection = ServicesCarouselSection;