'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import {
  staggerContainerWide,
  revealVariants,
  fadeVariants,
  scaleVariants,
  viewportOnce,
} from '@/lib/animations';
import SectionHeader from '@/components/ui/SectionHeader';

// ─── Types ───────────────────────────────────────────────────────────────────

interface ServicePillar {
  numeral: string;
  titleKey: 'web' | 'systems' | 'infrastructure';
  featuresKey: 'web' | 'systems' | 'infrastructure';
}

// ─── Data ─────────────────────────────────────────────────────────────────────

const PILLARS: ServicePillar[] = [
  { numeral: '01', titleKey: 'web', featuresKey: 'web' },
  { numeral: '02', titleKey: 'systems', featuresKey: 'systems' },
  { numeral: '03', titleKey: 'infrastructure', featuresKey: 'infrastructure' },
];

// ─── Variants ─────────────────────────────────────────────────────────────────

const numeralVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
  },
};

// ─── Component ────────────────────────────────────────────────────────────────

export default function ServicesOverview() {
  const t = useTranslations();

  return (
    <section
      id="services"
      className="relative bg-surface py-20"
      style={{
        backgroundImage: [
          'repeating-linear-gradient(0deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
          'repeating-linear-gradient(90deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
        ].join(', '),
      }}
    >
      <div className="container mx-auto px-6">

        {/* Section header */}
        <div className="mb-12">
          <SectionHeader
            eyebrow={t('services.eyebrow')}
            title={t('services.title')}
            align="center"
          />
        </div>

        {/* Three-pillar grid with gap-px separator trick */}
        <div className="bg-outline/20 rounded-xl overflow-hidden shadow-subtle">
          <motion.div
            variants={staggerContainerWide}
            initial="hidden"
            whileInView="visible"
            viewport={viewportOnce}
            className="grid grid-cols-1 md:grid-cols-3 gap-px"
          >
            {PILLARS.map(({ numeral, titleKey, featuresKey }) => {
              const features = t.raw(`services.${featuresKey}.features`) as string[];
              const title = t(`services.${titleKey}.title`);

              return (
                <motion.div
                  key={numeral}
                  variants={revealVariants}
                  className={cn(
                    'relative flex flex-col p-8 bg-surface',
                    'transition-all duration-200 ease-out',
                    'hover:bg-surface-high hover:shadow-subtle',
                  )}
                >
                  {/* Ghosted numeral */}
                  <motion.span
                    variants={numeralVariants}
                    aria-hidden="true"
                    className="font-serif text-7xl font-light leading-none text-on-surface/[0.12] select-none mb-4 -ml-1"
                  >
                    {numeral}
                  </motion.span>

                  {/* Title */}
                  <h3 className="font-serif text-2xl font-semibold text-on-surface mb-5 leading-snug">
                    {title}
                  </h3>

                  {/* Feature list */}
                  <ul className="flex flex-col gap-2.5">
                    {features.map((feature: string) => (
                      <li
                        key={feature}
                        className="flex items-start gap-2.5 text-sm text-outline leading-relaxed"
                      >
                        <span
                          aria-hidden="true"
                          className="mt-[0.4em] shrink-0 w-1.5 h-1.5 rounded-full bg-primary"
                        />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </motion.div>
              );
            })}
          </motion.div>
        </div>

        {/* AI narrative callout */}
        <motion.div
          variants={fadeVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="mt-16 flex items-center gap-6"
        >
          {/* Left horizontal rule */}
          <motion.span
            variants={scaleVariants}
            className="flex-1 h-px max-w-[120px] ml-auto"
            style={{
              background:
                'linear-gradient(to left, rgba(0,100,148,0.25), transparent)',
            }}
            aria-hidden="true"
          />

          <p className="font-serif italic text-2xl text-primary-dark text-center max-w-xl leading-relaxed">
            {t('services.aiNarrative')}
          </p>

          {/* Right horizontal rule */}
          <motion.span
            variants={scaleVariants}
            className="flex-1 h-px max-w-[120px] mr-auto"
            style={{
              background:
                'linear-gradient(to right, rgba(0,100,148,0.25), transparent)',
            }}
            aria-hidden="true"
          />
        </motion.div>

      </div>
    </section>
  );
}
