'use client';

import { motion } from 'framer-motion';
import { Users, MessageCircle, BarChart3 } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  staggerContainer,
  revealVariants,
  slideLeftVariants,
  viewportOnce,
} from '@/lib/animations';

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

interface AiCapability {
  id: string;
  title: string;
  description: string;
}

interface AILayerProps {
  capabilities: readonly AiCapability[];
}

// ─── Icon map ──────────────────────────────────────────────────────────────────

const ICON_MAP: Record<string, typeof Users> = {
  'ai-teammate': Users,
  'customer-facing-ai': MessageCircle,
  'data-intelligence': BarChart3,
};

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

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

const sectionHeadVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.1 },
  },
};

const cardContainerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.2,
    },
  },
};

const cardVariants = {
  hidden: { opacity: 0, y: 28 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease },
  },
};

const lineVariants = {
  hidden: { scaleY: 0 },
  visible: {
    scaleY: 1,
    transition: { duration: 0.6, ease, delay: 0.15 },
  },
};

// ─── AI Capability card ────────────────────────────────────────────────────────

function AICapabilityCard({ capability }: { capability: AiCapability }) {
  const Icon = ICON_MAP[capability.id] ?? Users;

  return (
    <motion.div
      variants={cardVariants}
      className={cn(
        'relative flex flex-col gap-4 p-6',
        'rounded-xl',
        'bg-white/5 backdrop-blur-glass',
        'border border-white/10',
        'transition-colors duration-200 hover:bg-white/[0.08]',
      )}
    >
      {/* Icon */}
      <div
        className="flex items-center justify-center w-10 h-10 rounded-xl"
        style={{
          background: 'rgba(91, 164, 217, 0.15)',
        }}
        aria-hidden="true"
      >
        <Icon
          size={18}
          className="text-primary-light"
          strokeWidth={1.75}
        />
      </div>

      {/* Title */}
      <h3 className="font-serif font-semibold text-white text-xl leading-snug">
        {capability.title}
      </h3>

      {/* Description */}
      <p className="text-sm leading-relaxed" style={{ color: 'rgba(255,255,255,0.6)' }}>
        {capability.description}
      </p>
    </motion.div>
  );
}

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

export default function AILayer({ capabilities }: AILayerProps) {
  return (
    <section
      id="ai-automation"
      className="py-24"
      style={{ backgroundColor: '#1C2B3A' }}
      aria-labelledby="ai-layer-heading"
    >
      <div className="container mx-auto px-6">

        {/* Section header */}
        <motion.div
          variants={sectionHeadVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="mb-14 flex flex-col items-center text-center"
        >
          {/* Eyebrow */}
          <motion.span
            variants={revealVariants}
            className="label-md text-primary mb-4"
          >
            Intelligent Layer
          </motion.span>

          {/* Heading */}
          <motion.h2
            id="ai-layer-heading"
            variants={revealVariants}
            className="font-serif font-semibold tracking-headline text-white text-4xl md:text-5xl max-w-2xl leading-[1.1]"
          >
            AI Built Into Everything
          </motion.h2>

          {/* Vertical line */}
          <motion.div
            variants={lineVariants}
            className="origin-top w-px h-8 mt-5 mb-5"
            style={{ background: 'rgba(91,164,217,0.4)' }}
            aria-hidden="true"
          />

          {/* Subtitle */}
          <motion.p
            variants={revealVariants}
            className="font-serif italic text-xl leading-relaxed max-w-xl"
            style={{ color: 'rgba(255,255,255,0.75)' }}
          >
            Your platform, made smarter.
          </motion.p>

          {/* Context paragraph */}
          <motion.p
            variants={revealVariants}
            className="mt-5 text-[0.9375rem] leading-relaxed max-w-2xl"
            style={{ color: 'rgba(255,255,255,0.5)' }}
          >
            We integrate AI directly into the websites and software we build
            for you. Not as a buzzword or an add-on — as practical features
            that save your team time and give your customers a better
            experience.
          </motion.p>
        </motion.div>

        {/* Capability cards */}
        <motion.div
          variants={cardContainerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="grid grid-cols-1 md:grid-cols-3 gap-4"
        >
          {capabilities.map((capability) => (
            <AICapabilityCard key={capability.id} capability={capability} />
          ))}
        </motion.div>

        {/* Bottom note */}
        <motion.p
          variants={revealVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="mt-10 text-center text-xs uppercase tracking-widest"
          style={{ color: 'rgba(255,255,255,0.25)' }}
        >
          Every AI feature is tailored to your business — your data stays on your servers
        </motion.p>

      </div>
    </section>
  );
}
