'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { Mail } from 'lucide-react';
import { cn } from '@/lib/utils';
import { viewportOnce } from '@/lib/animations';
import Button from '@/components/ui/Button';

// The full-width background clips in from the center (scaleX)
const bgScaleVariants = {
  hidden: { scaleX: 0, opacity: 0 },
  visible: {
    scaleX: 1,
    opacity: 1,
    transition: {
      duration: 0.9,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

// Content fades up slightly after the background arrives
const contentContainerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.35,
    },
  },
};

const contentItemVariants = {
  hidden: { opacity: 0, y: 28 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
    },
  },
};

// Decorative skewed band (white-tinted)
function DecorativeBand() {
  return (
    <div
      aria-hidden="true"
      className="pointer-events-none absolute inset-0 overflow-hidden"
    >
      {/* Large skewed element — upper-left to center */}
      <div
        className="absolute -top-24 -left-32 w-[520px] h-[340px] bg-white/[0.04] rounded-3xl"
        style={{ transform: 'rotate(-14deg) skewX(-8deg)' }}
      />

      {/* Smaller skewed element — lower-right */}
      <div
        className="absolute bottom-0 right-0 w-[360px] h-[220px] bg-white/[0.05] rounded-2xl"
        style={{ transform: 'rotate(10deg) skewX(6deg) translate(60px, 40px)' }}
      />

      {/* Fine diagonal line accent — top-left */}
      <div
        className="absolute top-8 left-12 w-[160px] h-[1px] bg-white/10"
        style={{ transform: 'rotate(-30deg)' }}
      />
      <div
        className="absolute top-12 left-16 w-[100px] h-[1px] bg-white/8"
        style={{ transform: 'rotate(-30deg)' }}
      />

      {/* Dot cluster — top-right */}
      {[0, 1, 2, 3, 4].map((col) =>
        [0, 1, 2].map((row) => (
          <div
            key={`dot-${col}-${row}`}
            className="absolute w-[3px] h-[3px] rounded-full bg-white/10"
            style={{
              top: `${28 + row * 14}px`,
              right: `${80 + col * 14}px`,
            }}
          />
        )),
      )}

      {/* Subtle arc — bottom center */}
      <svg
        className="absolute bottom-0 left-1/2 -translate-x-1/2"
        width="600"
        height="120"
        viewBox="0 0 600 120"
        fill="none"
        aria-hidden="true"
      >
        <path
          d="M 0 120 Q 300 40 600 120"
          stroke="rgba(255,255,255,0.05)"
          strokeWidth="1.5"
          fill="none"
        />
        <path
          d="M 60 120 Q 300 60 540 120"
          stroke="rgba(255,255,255,0.04)"
          strokeWidth="1"
          fill="none"
          strokeDasharray="4 10"
        />
      </svg>

      {/* Fine geometric line pattern — white at 3-4% opacity */}
      <div
        className="absolute inset-0"
        style={{
          backgroundImage:
            'linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)',
          backgroundSize: '48px 48px',
        }}
      />

      {/* Diagonal accent lines crossing the grid */}
      <div
        className="absolute inset-0 opacity-[0.025]"
        style={{
          backgroundImage:
            'repeating-linear-gradient(-45deg, #fff 0, #fff 1px, transparent 0, transparent 50%)',
          backgroundSize: '40px 40px',
        }}
      />

      {/* Circle ring — large, right side */}
      <div
        className="absolute rounded-full"
        style={{
          width: '400px',
          height: '400px',
          top: '-100px',
          right: '-80px',
          border: '1px solid rgba(255,255,255,0.04)',
        }}
      />

      {/* Circle ring — smaller, left side */}
      <div
        className="absolute rounded-full"
        style={{
          width: '260px',
          height: '260px',
          bottom: '-60px',
          left: '-40px',
          border: '1px solid rgba(255,255,255,0.04)',
        }}
      />
    </div>
  );
}

export default function CTABanner() {
  const t = useTranslations('cta');

  return (
    <section
      aria-label="Call to action"
      className="relative overflow-hidden"
    >
      {/* Animated background that clips in from center */}
      <motion.div
        variants={bgScaleVariants}
        initial="hidden"
        whileInView="visible"
        viewport={viewportOnce}
        className="absolute inset-0 origin-center"
        style={{ backgroundColor: '#006494' }}
      >
        <DecorativeBand />
      </motion.div>

      {/* Content — positioned relative so it sits above the bg */}
      <div className="relative z-10 py-24 px-6">
        <motion.div
          variants={contentContainerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={viewportOnce}
          className="max-w-3xl mx-auto flex flex-col items-center text-center gap-8"
        >
          {/* Eyebrow */}
          <motion.span
            variants={contentItemVariants}
            className="label-md text-white/60 tracking-widest uppercase"
          >
            {t('eyebrow')}
          </motion.span>

          {/* Headline */}
          <motion.h2
            variants={contentItemVariants}
            className={cn(
              'font-serif font-semibold text-white',
              'text-4xl md:text-5xl leading-[1.1] tracking-[-0.02em]',
            )}
          >
            {t('title')}
          </motion.h2>

          {/* Supporting text */}
          <motion.p
            variants={contentItemVariants}
            className="text-white/70 text-lg leading-relaxed max-w-xl"
          >
            {t('subtitle')}
          </motion.p>

          {/* CTA row */}
          <motion.div
            variants={contentItemVariants}
            className="flex flex-col sm:flex-row items-center gap-4"
          >
            {/* Primary CTA — white-styled button */}
            <Button
              variant="secondary"
              size="lg"
              arrow
              href="#configure"
              className={cn(
                'ring-white/80 text-white',
                'hover:bg-white/10 hover:ring-white',
                'focus-visible:ring-white',
              )}
            >
              {t('cta')}
            </Button>

            {/* Email link — ghost style */}
            <a
              href="mailto:hello@letsbe.biz"
              className={cn(
                'inline-flex items-center gap-2 px-6 py-3 rounded-xl',
                'text-white/80 text-sm font-medium',
                'transition-all duration-200',
                'hover:text-white hover:bg-white/8',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#006494]',
                'group/email',
              )}
            >
              <Mail
                size={16}
                className="shrink-0"
                aria-hidden="true"
                strokeWidth={2}
              />
              <span className="relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:bg-white/70 after:origin-left after:scale-x-0 after:transition-transform after:duration-200 group-hover/email:after:scale-x-100">
                hello@letsbe.biz
              </span>
            </a>
          </motion.div>

          {/* Fine-print reassurance */}
          <motion.p
            variants={contentItemVariants}
            className="text-white/40 text-xs"
          >
            {t('reassurance')}
          </motion.p>
        </motion.div>
      </div>
    </section>
  );
}
