import { Container } from '@/components/ui/container';
import { Button } from '@/components/ui/button';
import { Reveal } from '@/components/ui/reveal';
import { ProductionCurve } from '@/components/ui/production-curve';
import { Sun } from 'lucide-react';
import type { Locale } from '@/i18n/config';

export function CtaBanner({
  locale,
  title,
  subtitle,
  ctaLabel
}: {
  locale: Locale;
  title: string;
  subtitle: string;
  ctaLabel: string;
}) {
  return (
    <section className="relative overflow-hidden bg-graphite-900 py-20 text-paper-50 sm:py-24">
      <ProductionCurve
        className="pointer-events-none absolute inset-x-0 bottom-0 h-24 w-full opacity-20"
        showDot={false}
      />

      <div aria-hidden="true" className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-1/2 h-72 w-72 -translate-y-1/2 rounded-full bg-copper-500/10 blur-3xl" />
        <div className="absolute -right-16 top-1/3 h-64 w-64 rounded-full bg-leaf-500/15 blur-3xl" />
        <Sun className="absolute right-[12%] top-[24%] h-10 w-10 animate-ray-spin text-copper-400/40" />
        <span className="absolute left-[18%] top-[20%] h-2 w-2 rounded-full bg-volt-400/60 animate-bolt-blink" />
        <span className="absolute left-[30%] bottom-[30%] h-1.5 w-1.5 rounded-full bg-leaf-400/60 animate-bolt-blink [animation-delay:0.9s]" />
        <span className="absolute right-[28%] bottom-[24%] h-2 w-2 rounded-full bg-volt-400/50 animate-bolt-blink [animation-delay:1.6s]" />
      </div>

      <Container className="relative flex flex-col items-center gap-6 text-center">
        <Reveal variant="scale">
          <span className="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-copper-500/25 to-leaf-500/25 text-leaf-300">
            <Sun className="h-6 w-6" />
          </span>
        </Reveal>
        <Reveal variant="up" delay={80}>
          <h2 className="max-w-2xl font-display text-3xl font-semibold">{title}</h2>
        </Reveal>
        <Reveal variant="up" delay={160}>
          <p className="max-w-xl text-paper-100/70">{subtitle}</p>
        </Reveal>
        <Reveal variant="up" delay={240}>
          <Button href={`/${locale}/devis`} variant="eco">
            {ctaLabel}
          </Button>
        </Reveal>
      </Container>
    </section>
  );
}