'use client';

import { motion, type Variants } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { Search, LayoutDashboard, PenTool, Rocket, type LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  staggerContainerWide,
  revealVariants,
  viewportOnce,
} from '@/lib/animations';
import SectionHeader from '@/components/ui/SectionHeader';

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

interface Step {
  numeral: string;
  key: 'discovery' | 'strategy' | 'build' | 'launch';
  Icon: LucideIcon;
}

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

const STEPS: Step[] = [
  { numeral: '01', key: 'discovery', Icon: Search },
  { numeral: '02', key: 'strategy',  Icon: LayoutDashboard },
  { numeral: '03', key: 'build',     Icon: PenTool },
  { numeral: '04', key: 'launch',    Icon: Rocket },
];

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

// Numeral scales up from 80% while fading in
const numeralScaleVariants: Variants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.7,
      ease: [0.16, 1, 0.3, 1],
    },
  },
};

// ─── Sub-components ───────────────────────────────────────────────────────────

function StepCard({ numeral, stepKey, Icon }: { numeral: string; stepKey: string; Icon: LucideIcon }) {
  const t = useTranslations();
  const title = t(`process.steps.${stepKey}.title`);
  const description = t(`process.steps.${stepKey}.description`);

  return (
    <motion.div
      variants={revealVariants}
      className={cn(
        'relative flex flex-col bg-surface-high rounded-xl p-6',
        'shadow-subtle',
      )}
    >
      {/* Ghosted numeral — scales up on scroll */}
      <motion.span
        variants={numeralScaleVariants}
        aria-hidden="true"
        className="font-serif text-6xl font-light leading-none text-on-surface/[0.06] select-none -ml-0.5 mb-3"
      >
        {numeral}
      </motion.span>

      {/* Icon */}
      <div className="mb-4">
        <Icon
          size={24}
          strokeWidth={1.5}
          className="text-primary"
          aria-hidden="true"
        />
      </div>

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

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

// ─── Main Component ───────────────────────────────────────────────────────────

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

  return (
    <section id="process" className="bg-surface-low py-24">
      <div className="container mx-auto px-6">

        {/*
          Desktop layout:
            col 1 (lg:col-span-1) → SectionHeader, flush left
            col 2–4 (lg:col-span-3) → 2×2 grid of step cards

          Mobile layout:
            header on top, steps in single column below
        */}
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 lg:gap-10 items-start">

          {/* ── Header column ── */}
          <div className="lg:col-span-1 lg:sticky lg:top-32">
            <SectionHeader
              eyebrow={t('process.eyebrow')}
              title={t('process.title')}
              align="left"
            />
          </div>

          {/* ── Steps column ── */}
          <div className="lg:col-span-3">
            <motion.div
              variants={staggerContainerWide}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className="grid grid-cols-1 sm:grid-cols-2 gap-5"
            >
              {STEPS.map((step) => (
                <StepCard key={step.key} numeral={step.numeral} stepKey={step.key} Icon={step.Icon} />
              ))}
            </motion.div>
          </div>

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