'use client';

import { motion } from 'framer-motion';
import {
  Palette, Globe, ShoppingCart, Zap,
  Database, Code2, GitBranch, Wrench,
  Server, Shield, Lock, Settings,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

const ICON_MAP: Record<string, LucideIcon> = {
  Palette, Globe, ShoppingCart, Zap,
  Database, Code2, GitBranch, Wrench,
  Server, Shield, Lock, Settings,
};
import {
  revealVariants,
  staggerContainer,
  slideLeftVariants,
  slideRightVariants,
  viewportOnce,
} from '@/lib/animations';
import ScrollReveal from '@/components/ui/ScrollReveal';

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

interface Feature {
  icon: string;
  title: string;
  description: string;
}

interface Pillar {
  id: string;
  numeral: string;
  title: string;
  description: string;
  background: 'bg-surface' | 'bg-surface-low';
  features: readonly Feature[];
}

interface ServicePillarProps {
  pillar: Pillar;
  index: number;
}

// ─── Animation variants ────────────────────────────────────────────────────────

const ease = [0.16, 1, 0.3, 1] as const;

const numeralVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 1, ease },
  },
};

const featureCardVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.55, ease },
  },
};

const featureGridVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.09,
      delayChildren: 0.1,
    },
  },
};

// ─── Feature card ──────────────────────────────────────────────────────────────

function FeatureCard({ feature }: { feature: Feature }) {
  const Icon = ICON_MAP[feature.icon] ?? Globe;

  return (
    <motion.div
      variants={featureCardVariants}
      className={cn(
        'flex flex-col gap-3 p-6',
        'bg-surface-high rounded-xl',
        'shadow-card',
        'transition-shadow duration-200 hover:shadow-subtle',
      )}
    >
      {/* Icon container */}
      <div
        className="flex items-center justify-center w-10 h-10 rounded-xl"
        style={{
          background:
            'linear-gradient(135deg, rgba(91,164,217,0.12), rgba(0,100,148,0.08))',
        }}
        aria-hidden="true"
      >
        <Icon
          size={18}
          className="text-primary-dark"
          strokeWidth={1.75}
        />
      </div>

      {/* Title */}
      <h4 className="font-semibold text-on-surface text-sm leading-snug">
        {feature.title}
      </h4>

      {/* Description */}
      <p className="text-sm text-outline leading-relaxed">
        {feature.description}
      </p>
    </motion.div>
  );
}

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

export default function ServicePillar({ pillar, index }: ServicePillarProps) {
  const headingVariants = index % 2 === 0 ? slideLeftVariants : slideRightVariants;

  return (
    <section
      id={pillar.id}
      className={cn('py-24', pillar.background)}
      aria-labelledby={`${pillar.id}-heading`}
    >
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">

          {/* ── Left: Header copy (5 cols) ─────────────────────────────────── */}
          <div className="lg:col-span-5 flex flex-col gap-6">

            {/* Ghosted numeral */}
            <motion.span
              variants={numeralVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              aria-hidden="true"
              className={cn(
                'font-serif leading-none select-none',
                'text-[6rem] md:text-[7.5rem] font-light',
                'text-on-surface/[0.05]',
                '-ml-1 -mb-6',
              )}
            >
              {pillar.numeral}
            </motion.span>

            {/* Heading */}
            <motion.h2
              id={`${pillar.id}-heading`}
              variants={headingVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className="font-serif font-semibold tracking-headline text-on-surface text-4xl md:text-[2.75rem] leading-[1.1]"
            >
              {pillar.title}
            </motion.h2>

            {/* Accent rule */}
            <ScrollReveal variant="fadeIn" delay={0.15}>
              <div
                className="w-12 h-0.5 rounded-full bg-gradient-cta"
                aria-hidden="true"
              />
            </ScrollReveal>

            {/* Description */}
            <ScrollReveal variant="fadeUp" delay={0.2}>
              <p className="text-outline leading-relaxed text-[0.9375rem]">
                {pillar.description}
              </p>
            </ScrollReveal>
          </div>

          {/* ── Right: Feature grid (7 cols) ───────────────────────────────── */}
          <motion.div
            variants={featureGridVariants}
            initial="hidden"
            whileInView="visible"
            viewport={viewportOnce}
            className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4"
          >
            {pillar.features.map((feature) => (
              <FeatureCard key={feature.title} feature={feature} />
            ))}
          </motion.div>

        </div>
      </div>
    </section>
  );
}
