'use client';

import { motion, type Variants } from 'framer-motion';
import { useTranslations } from 'next-intl';
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';
}

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

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

// ─── 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],
    },
  },
};

// ─── Animated blueprint network (desktop only) ───────────────────────────────

function FlowNetwork() {
  // Radial constellation — center hub with curved spokes to outer nodes
  const cx = 130, cy = 100; // center
  const nodes = [
    { x: 50, y: 30 },   // top-left
    { x: 210, y: 25 },  // top-right
    { x: 240, y: 110 }, // right
    { x: 195, y: 180 }, // bottom-right
    { x: 55, y: 170 },  // bottom-left
    { x: 20, y: 95 },   // left
  ];

  return (
    <div className="hidden lg:block relative mt-8 w-full h-52" aria-hidden="true">
      <style>{`
        @keyframes flow-dash { to { stroke-dashoffset: -40; } }
        @keyframes flow-dash-slow { to { stroke-dashoffset: -40; } }
        @keyframes node-pulse {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 1; }
        }
        @keyframes orbit-a {
          from { transform: rotate(0deg) translateX(28px) rotate(0deg); }
          to { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
        }
        @keyframes orbit-b {
          from { transform: rotate(120deg) translateX(22px) rotate(-120deg); }
          to { transform: rotate(480deg) translateX(22px) rotate(-480deg); }
        }
        @keyframes orbit-c {
          from { transform: rotate(240deg) translateX(35px) rotate(-240deg); }
          to { transform: rotate(-120deg) translateX(35px) rotate(120deg); }
        }
        @keyframes ring-breathe {
          0%, 100% { opacity: 0.06; }
          50% { opacity: 0.14; }
        }
        .process-flow { animation: flow-dash 2.2s linear infinite; }
        .process-flow-slow { animation: flow-dash-slow 3.5s linear infinite; }
        .process-pulse { animation: node-pulse 2.8s ease-in-out infinite; }
        .process-orbit-a { animation: orbit-a 8s linear infinite; }
        .process-orbit-b { animation: orbit-b 11s linear infinite; }
        .process-orbit-c { animation: orbit-c 14s linear infinite; }
        .process-ring { animation: ring-breathe 4s ease-in-out infinite; }
        .process-ring-lg { animation: ring-breathe 5.5s ease-in-out infinite; }
      `}</style>
      <svg className="w-full h-full" viewBox="0 0 260 200" fill="none" xmlns="http://www.w3.org/2000/svg">
        {/* Breathing rings */}
        <circle cx={cx} cy={cy} r="24" stroke="rgba(91,164,217,0.1)" strokeWidth="1" fill="none" className="process-ring" />
        <circle cx={cx} cy={cy} r="42" stroke="rgba(91,164,217,0.07)" strokeWidth="1" fill="none" className="process-ring-lg" />
        <circle cx={cx} cy={cy} r="65" stroke="rgba(91,164,217,0.04)" strokeWidth="0.8" fill="none" strokeDasharray="3 6" />

        {/* Curved spokes from center to each outer node */}
        {nodes.map((n, i) => {
          const mx = cx + (n.x - cx) * 0.5 + (i % 2 === 0 ? 15 : -15);
          const my = cy + (n.y - cy) * 0.5 + (i % 2 === 0 ? -12 : 12);
          return (
            <path
              key={i}
              d={`M ${cx} ${cy} Q ${mx} ${my} ${n.x} ${n.y}`}
              stroke="rgba(91,164,217,0.18)"
              strokeWidth="1.2"
              strokeDasharray="5 4"
              strokeLinecap="round"
              className={i % 2 === 0 ? 'process-flow' : 'process-flow-slow'}
              style={{ animationDelay: `${i * 0.3}s` }}
            />
          );
        })}

        {/* Faint arcs connecting adjacent outer nodes */}
        {nodes.map((n, i) => {
          const next = nodes[(i + 1) % nodes.length];
          const mx = cx + (n.x + next.x - 2 * cx) * 0.15;
          const my = cy + (n.y + next.y - 2 * cy) * 0.15;
          return (
            <path
              key={`arc-${i}`}
              d={`M ${n.x} ${n.y} Q ${mx} ${my} ${next.x} ${next.y}`}
              stroke="rgba(91,164,217,0.08)"
              strokeWidth="0.8"
              strokeDasharray="3 5"
              strokeLinecap="round"
            />
          );
        })}

        {/* Outer nodes — pulsing */}
        {nodes.map((n, i) => (
          <circle
            key={`node-${i}`}
            cx={n.x}
            cy={n.y}
            r="3"
            fill="#5BA4D9"
            className="process-pulse"
            style={{ animationDelay: `${i * 0.45}s` }}
          />
        ))}

        {/* Center hub */}
        <circle cx={cx} cy={cy} r="5" fill="#5BA4D9" opacity="0.85" />
        <circle cx={cx} cy={cy} r="2" fill="#fff" opacity="0.9" />

        {/* Orbiting particles */}
        <g style={{ transformOrigin: `${cx}px ${cy}px` }}>
          <circle cx={cx} cy={cy} r="2" fill="#5BA4D9" opacity="0.7" className="process-orbit-a" />
        </g>
        <g style={{ transformOrigin: `${cx}px ${cy}px` }}>
          <circle cx={cx} cy={cy} r="1.5" fill="rgba(91,164,217,0.5)" className="process-orbit-b" />
        </g>
        <g style={{ transformOrigin: `${cx}px ${cy}px` }}>
          <circle cx={cx} cy={cy} r="1.5" fill="rgba(91,164,217,0.35)" className="process-orbit-c" />
        </g>

        {/* Corner brackets — architectural detail */}
        <path d="M 14 25 L 14 20 L 19 20" stroke="rgba(28,43,58,0.12)" strokeWidth="0.8" fill="none" />
        <path d="M 246 175 L 246 180 L 241 180" stroke="rgba(28,43,58,0.12)" strokeWidth="0.8" fill="none" />
      </svg>
    </div>
  );
}

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

function StepCard({ numeral, stepKey }: { numeral: string; stepKey: string }) {
  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 pt-0 px-6 pb-6 overflow-hidden',
        'shadow-subtle',
      )}
    >
      {/* Top accent strip — gradient from primary-dark to primary */}
      <div
        className="absolute top-0 left-0 right-0 h-[3px] rounded-t-xl"
        style={{ background: 'linear-gradient(90deg, #006494, #5BA4D9)' }}
        aria-hidden="true"
      />

      {/* 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.12] select-none -ml-0.5 mt-6 mb-5"
      >
        {numeral}
      </motion.span>

      {/* 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="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">

        {/*
          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-5 gap-12 lg:gap-10 items-start">

          {/* ── Header column ── */}
          <div className="lg:col-span-2 lg:sticky lg:top-32">
            {/* Vertical accent bar left of heading */}
            <div className="relative pl-4">
              <div
                className="absolute left-0 top-[3.25rem] w-0.5 h-10 rounded-full bg-primary"
                aria-hidden="true"
              />
              <SectionHeader
                eyebrow={t('process.eyebrow')}
                title={t('process.title')}
                align="left"
              />
            </div>
            <FlowNetwork />
          </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} />
              ))}
            </motion.div>
          </div>

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