'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';

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

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

const EASE_OUT_EXPO = [0.16, 1, 0.3, 1] as [number, number, number, number];

// Headline word stagger container
const headlineContainer = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.065,
      delayChildren: 0.2,
    },
  },
};

// Per-word reveal — slide up (no blur for performance)
const wordReveal = {
  hidden: { opacity: 0, y: 52 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.72,
      ease: EASE_OUT_EXPO,
    },
  },
};

// Subtitle fade-up — delayed after headline completes
const subtitleVariant = {
  hidden: { opacity: 0, y: 18 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, delay: 0.6, ease: EASE_OUT_EXPO },
  },
};

// Separator expand from origin-left
const separatorVariant = {
  hidden: { opacity: 0, scaleX: 0 },
  visible: {
    opacity: 1,
    scaleX: 1,
    transition: { duration: 0.55, delay: 0.72, ease: EASE_OUT_EXPO },
  },
};

// CTA fade in
const ctaVariant = {
  hidden: { opacity: 0, y: 12 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.5, delay: 0.82, ease: EASE_OUT_EXPO },
  },
};

// Right column entrance — SVG composition fades in from right
const rightColumnVariant = {
  hidden: { opacity: 0, x: 24 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.9, delay: 0.1, ease: EASE_OUT_EXPO },
  },
};

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

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

  // Split the raw title on the {accentWord} placeholder
  const rawTitle: string = t.raw('title');
  const parts = rawTitle.split('{accentWord}');
  const before = parts[0] ?? '';
  const after = parts[1] ?? '';

  // Build flat word array with type tagging for accent word
  type WordItem =
    | { type: 'normal'; text: string }
    | { type: 'accent'; text: string };

  const beforeWords: WordItem[] = before.trim()
    ? before.trim().split(' ').map((w) => ({ type: 'normal', text: w }))
    : [];
  const afterWords: WordItem[] = after.trim()
    ? after.trim().split(' ').map((w) => ({ type: 'normal', text: w }))
    : [];
  const allWords: WordItem[] = [
    ...beforeWords,
    { type: 'accent', text: t('accentWord') },
    ...afterWords,
  ];

  return (
    <section
      id="hero"
      aria-label="Hero"
      className="relative min-h-screen flex flex-col overflow-hidden bg-surface"
    >
      {/* ─── Full-bleed SVG background — CSS drift for GPU compositing ── */}
      <div className="absolute inset-0 z-0 pointer-events-none hero-drift-a">
        <HeroGeometric className="absolute inset-0 w-full h-full" />
      </div>

      {/* ─── Radial glow — soft primary haze in right column ──────────── */}
      <div
        className="absolute inset-0 z-0 pointer-events-none hero-drift-b"
        style={{
          background:
            'radial-gradient(ellipse 55% 70% at 78% 48%, rgba(91,164,217,0.045) 0%, transparent 70%)',
        }}
        aria-hidden="true"
      />

      {/* ─── Asymmetric two-column layout ─────────────────────────────── */}
      <div className="relative z-10 w-full max-w-screen-xl mx-auto px-6 lg:px-12 xl:px-16 flex flex-col lg:flex-row lg:items-center min-h-screen">

        {/* ── LEFT COLUMN — text content (55% on desktop) ─────────────── */}
        <div className="flex-1 lg:max-w-[58%] flex flex-col justify-center pt-24 pb-16 lg:pt-20 lg:pb-16">

          {/* Headline — word-by-word stagger */}
          <motion.h1
            className="font-serif font-semibold text-on-surface text-5xl sm:text-6xl lg:text-[4.25rem] xl:text-7xl leading-[1.07] tracking-[-0.025em] mb-7 flex flex-wrap items-baseline gap-x-[0.22em] gap-y-1"
            variants={headlineContainer}
            initial="hidden"
            animate="visible"
            aria-label={rawTitle.replace('{accentWord}', t('accentWord'))}
          >
            {allWords.map((word, i) =>
              word.type === 'accent' ? (
                <motion.span
                  key={`word-accent-${i}`}
                  variants={wordReveal}
                  style={{ display: 'inline-block' }}
                >
                  <em className="text-primary font-serif italic">{word.text}</em>
                </motion.span>
              ) : (
                <motion.span
                  key={`word-${i}`}
                  variants={wordReveal}
                  style={{ display: 'inline-block' }}
                >
                  {word.text}
                </motion.span>
              )
            )}
          </motion.h1>

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

          {/* Gradient separator — expands from left */}
          <motion.span
            className="block w-20 h-px mb-6 origin-left"
            style={{
              background:
                'linear-gradient(to right, rgba(0,100,148,0.5), rgba(91,164,217,0.2), transparent)',
            }}
            variants={separatorVariant}
            initial="hidden"
            animate="visible"
            aria-hidden="true"
          />

          {/* CTA row */}
          <motion.div
            className="flex flex-col sm:flex-row items-start 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"
            >
              {t('ctaSecondary')}
            </Button>
          </motion.div>
        </div>

        {/* ── RIGHT COLUMN — animated geometric composition (42%) ────── */}
        <motion.div
          className="hidden lg:flex flex-1 lg:max-w-[42%] relative self-stretch items-center justify-center"
          variants={rightColumnVariant}
          initial="hidden"
          animate="visible"
          aria-hidden="true"
        >
          <div className="relative w-full h-full min-h-[500px] flex items-center justify-center">

            {/* Radial glow — warm atmospheric backdrop */}
            <div
              className="absolute rounded-full"
              style={{
                width: 500,
                height: 500,
                top: '50%',
                left: '45%',
                transform: 'translate(-50%, -50%)',
                background: 'radial-gradient(circle, rgba(91,164,217,0.07) 0%, rgba(91,164,217,0.02) 40%, transparent 70%)',
              }}
            />

            {/* Outer ring — large, slow counter-rotation (CSS) */}
            <div
              className="absolute rounded-full hero-spin-reverse"
              style={{
                width: 380,
                height: 380,
                top: '50%',
                left: '45%',
                marginTop: -190,
                marginLeft: -190,
                border: '1.5px solid rgba(91,164,217,0.12)',
                animationDuration: '60s',
              }}
            >
              {[0, 45, 90, 135, 180, 225, 270, 315].map((deg) => (
                <div
                  key={deg}
                  className="absolute"
                  style={{
                    width: 1,
                    height: 10,
                    background: 'rgba(91,164,217,0.2)',
                    top: -5,
                    left: '50%',
                    marginLeft: -0.5,
                    transformOrigin: `50% ${190 + 5}px`,
                    transform: `rotate(${deg}deg)`,
                  }}
                />
              ))}
            </div>

            {/* Inner ring — dashed, rotating forward (CSS) */}
            <div
              className="absolute rounded-full hero-spin"
              style={{
                width: 240,
                height: 240,
                top: '50%',
                left: '45%',
                marginTop: -120,
                marginLeft: -120,
                border: '1px dashed rgba(0,100,148,0.15)',
                animationDuration: '40s',
              }}
            />

            {/* Core ring — solid, slowly rotating (CSS) */}
            <div
              className="absolute rounded-full hero-spin"
              style={{
                width: 140,
                height: 140,
                top: '50%',
                left: '45%',
                marginTop: -70,
                marginLeft: -70,
                border: '2px solid rgba(91,164,217,0.18)',
                animationDuration: '30s',
              }}
            />

            {/* Center crosshair */}
            <div className="absolute" style={{ top: '50%', left: '45%', transform: 'translate(-50%, -50%)' }}>
              <div style={{ width: 24, height: 1, background: 'rgba(91,164,217,0.25)', position: 'absolute', top: 0, left: -12 }} />
              <div style={{ width: 1, height: 24, background: 'rgba(91,164,217,0.25)', position: 'absolute', top: -12, left: 0 }} />
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(91,164,217,0.2)', position: 'absolute', top: -3, left: -3 }} />
            </div>

            {/* Floating accent dot — CSS orbit */}
            <div
              className="absolute rounded-full hero-orbit-a"
              style={{
                width: 8,
                height: 8,
                background: 'rgba(91,164,217,0.3)',
                top: '50%',
                left: '45%',
                marginTop: -4,
                marginLeft: -4,
              }}
            />

            {/* Second accent dot — opposite CSS orbit */}
            <div
              className="absolute rounded-full hero-orbit-b"
              style={{
                width: 5,
                height: 5,
                background: 'rgba(0,100,148,0.25)',
                top: '50%',
                left: '45%',
                marginTop: -2.5,
                marginLeft: -2.5,
              }}
            />

            {/* Corner brackets — crisp architectural detail */}
            <div className="absolute" style={{ top: '15%', right: '8%', width: 48, height: 48, borderTop: '1.5px solid rgba(28,43,58,0.2)', borderRight: '1.5px solid rgba(28,43,58,0.2)' }} />
            <div className="absolute" style={{ bottom: '18%', left: '8%', width: 40, height: 40, borderBottom: '1.5px solid rgba(28,43,58,0.15)', borderLeft: '1.5px solid rgba(28,43,58,0.15)' }} />

            {/* Dimension line — vertical, right side */}
            <div className="absolute" style={{ right: '5%', top: '25%', bottom: '30%', width: 1, background: 'rgba(28,43,58,0.08)' }}>
              <div style={{ position: 'absolute', top: 0, left: -4, width: 9, height: 1, background: 'rgba(28,43,58,0.12)' }} />
              <div style={{ position: 'absolute', bottom: 0, left: -4, width: 9, height: 1, background: 'rgba(28,43,58,0.12)' }} />
            </div>
          </div>
        </motion.div>
      </div>

      {/* ─── Bottom fade into next section ────────────────────────────── */}
      <div
        className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none z-10"
        style={{
          background:
            'linear-gradient(to bottom, transparent, #f3f4f5)',
        }}
        aria-hidden="true"
      />
    </section>
  );
}
