'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';

import Button from '@/components/ui/Button';
import HeroGeometric from '@/components/icons/HeroGeometric';

// Slow drift animation for the SVG background layers
const bgDriftA = {
  animate: {
    y: [0, -12, 0],
    x: [0, 6, 0],
    transition: {
      duration: 18,
      ease: 'easeInOut' as const,
      repeat: Infinity,
      repeatType: 'loop' as const,
    },
  },
};

const bgDriftB = {
  animate: {
    y: [0, 8, 0],
    x: [0, -8, 0],
    scale: [1, 1.015, 1],
    transition: {
      duration: 24,
      ease: 'easeInOut' as const,
      repeat: Infinity,
      repeatType: 'loop' as const,
    },
  },
};

const bgRotate = {
  animate: {
    rotate: [0, 1.5, 0, -1.5, 0],
    transition: {
      duration: 30,
      ease: 'easeInOut' as const,
      repeat: Infinity,
      repeatType: 'loop' as const,
    },
  },
};

// Word-level stagger container — fires on mount (not scroll)
const heroHeadlineContainer = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.07,
      delayChildren: 0.15,
    },
  },
};

// Individual word reveal
const wordReveal = {
  hidden: { opacity: 0, y: 48, filter: 'blur(4px)' },
  visible: {
    opacity: 1,
    y: 0,
    filter: 'blur(0px)',
    transition: {
      duration: 0.7,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

// Subtitle fade — delay after headline
const subtitleVariant = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      delay: 0.5,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

// CTA scale-in
const ctaVariant = {
  hidden: { opacity: 0, scale: 0.93 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.45,
      delay: 0.7,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

// Decorative separator line fade-in — after subtitle
const separatorVariant = {
  hidden: { opacity: 0, scaleX: 0 },
  visible: {
    opacity: 1,
    scaleX: 1,
    transition: {
      duration: 0.6,
      delay: 0.65,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

export default function Hero() {
  const t = useTranslations('hero');

  // Split the raw title by the {exclusively} placeholder so we can inject the styled <em>
  // Expected translation shape: "Built {exclusively} for ambitious brands."
  const rawTitle: string = t.raw('title');
  const parts = rawTitle.split('{exclusively}');
  const before = parts[0] ?? '';
  const after = parts[1] ?? '';

  // Split each segment into words for per-word animation
  const beforeWords = before.trim() ? before.trim().split(' ') : [];
  const afterWords = after.trim() ? after.trim().split(' ') : [];
  const exclusivelyWord = 'exclusively';

  // All words in order: before + [exclusively] + after
  type WordItem =
    | { type: 'normal'; text: string }
    | { type: 'accent'; text: string };

  const allWords: WordItem[] = [
    ...beforeWords.map((w) => ({ type: 'normal' as const, text: w })),
    { type: 'accent' as const, text: exclusivelyWord },
    ...afterWords.map((w) => ({ type: 'normal' as const, text: w })),
  ];

  return (
    <section
      id="hero"
      aria-label="Hero"
      className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-surface-high"
    >
      {/* ─── Background: animated SVG layers ─────────────────────────── */}
      <motion.div
        className="absolute inset-0 z-0 pointer-events-none"
        {...bgDriftA}
      >
        <motion.div className="absolute inset-0" {...bgRotate}>
          <HeroGeometric className="absolute inset-0 w-full h-full" />
        </motion.div>
      </motion.div>

      {/* Subtle radial gradient vignette over the SVG */}
      <motion.div
        className="absolute inset-0 z-0 pointer-events-none"
        {...bgDriftB}
        style={{
          background:
            'radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, rgba(248,249,250,0.55) 100%)',
        }}
      />

      {/* ─── Content ──────────────────────────────────────────────────── */}
      <div className="relative z-10 w-full max-w-4xl mx-auto px-6 pt-32 md:pt-40 pb-24 flex flex-col items-center text-center">

        {/* Eyebrow */}
        <motion.span
          className="label-md text-primary mb-6 tracking-widest uppercase"
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.05, ease: [0.16, 1, 0.3, 1] }}
        >
          BESPOKE DIGITAL STUDIO
        </motion.span>

        {/* Headline with per-word stagger */}
        <motion.h1
          className={cn(
            'font-serif font-semibold text-on-surface',
            'text-5xl sm:text-6xl md:text-7xl leading-[1.08] tracking-[-0.02em]',
            'mb-6 flex flex-wrap items-baseline justify-center gap-x-[0.25em] gap-y-1',
          )}
          variants={heroHeadlineContainer}
          initial="hidden"
          animate="visible"
          aria-label={rawTitle.replace('{exclusively}', exclusivelyWord)}
        >
          {allWords.map((word, i) =>
            word.type === 'accent' ? (
              <motion.span
                key={`word-accent-${i}`}
                variants={wordReveal}
                className="inline-block overflow-hidden"
                style={{ display: 'inline-block' }}
              >
                <em className="text-primary font-serif italic not-italic">
                  {word.text}
                </em>
              </motion.span>
            ) : (
              <motion.span
                key={`word-${i}`}
                variants={wordReveal}
                className="inline-block"
                style={{ display: 'inline-block' }}
              >
                {word.text}
              </motion.span>
            ),
          )}
        </motion.h1>

        {/* Subtitle */}
        <motion.p
          className="text-lg text-outline leading-relaxed max-w-xl mb-8"
          variants={subtitleVariant}
          initial="hidden"
          animate="visible"
        >
          {t('subtitle')}
        </motion.p>

        {/* Decorative gradient separator */}
        <motion.span
          className="block w-20 h-px mb-10 origin-center"
          style={{
            background:
              'linear-gradient(to right, rgba(0,100,148,0.3), rgba(91,164,217,0.3))',
          }}
          variants={separatorVariant}
          initial="hidden"
          animate="visible"
          aria-hidden="true"
        />

        {/* CTA row */}
        <motion.div
          className="flex flex-col sm:flex-row items-center gap-4"
          variants={ctaVariant}
          initial="hidden"
          animate="visible"
        >
          <Button variant="primary" size="lg" arrow href="#configure">
            {t('cta')}
          </Button>
          <Button
            variant="secondary"
            size="lg"
            href="#work"
            className="bg-on-surface/5 hover:bg-on-surface/10"
          >
            {t('ctaSecondary')}
          </Button>
        </motion.div>
      </div>

      {/* Bottom fade-out to next section */}
      <div
        className="absolute bottom-0 left-0 right-0 h-24 pointer-events-none z-10"
        style={{
          background:
            'linear-gradient(to bottom, transparent, rgba(248,249,250,0.6))',
        }}
        aria-hidden="true"
      />
    </section>
  );
}
