'use client';

import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { Leaf } from 'lucide-react';
import { Container } from '@/components/ui/container';
import { Button } from '@/components/ui/button';
import type { Locale } from '@/i18n/config';

export function Hero({
  locale,
  headline,
  subtext
}: {
  locale: Locale;
  headline: string;
  subtext: string;
}) {
  const t = useTranslations('hero');
  const isAr = locale === 'ar';

  const droplets = [
    { top: '14%', right: '8%', size: 'h-3 w-3', color: 'bg-volt-400/70', delay: '0s' },
    { top: '30%', right: '26%', size: 'h-2 w-2', color: 'bg-copper-400/70', delay: '1.1s' },
    { top: '62%', right: '3%', size: 'h-2.5 w-2.5', color: 'bg-volt-400/60', delay: '0.6s' },
    { top: '78%', right: '20%', size: 'h-2 w-2', color: 'bg-copper-400/60', delay: '1.7s' },
    { top: '10%', right: '30%', size: 'h-1.5 w-1.5', color: 'bg-paper-50/40', delay: '2.2s' },
    { top: '45%', right: '13%', size: 'h-2 w-2', color: 'bg-leaf-400/70', delay: '2.8s' }
  ];

  return (
    <section className="relative overflow-hidden bg-graphite-950 text-paper-50">
      <div className="absolute inset-0 bg-curve-grid bg-grid opacity-40" aria-hidden="true" />

      {/* 3-image splash collage — floated rounded cards, no sun, no ovals */}
      <div aria-hidden="true" className="pointer-events-none absolute inset-y-0 end-0 hidden w-[52%] lg:block">
        {/* deep glows */}
        <div className="absolute left-[18%] top-[8%] h-[22rem] w-[22rem] rounded-full bg-leaf-500/15 blur-3xl" />
        <div className="absolute -bottom-16 left-[6%] h-80 w-80 rounded-full bg-volt-500/10 blur-3xl" />

        {/* splash wave line */}
        <svg viewBox="0 0 300 200" className="absolute end-0 top-[36%] w-[34rem] opacity-25" fill="none">
          <path
            d="M-20 150 C 40 60, 110 190, 180 110 S 300 40, 340 90"
            stroke="currentColor"
            className="text-volt-400"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M-20 175 C 60 90, 130 210, 210 135 S 320 70, 340 120"
            stroke="currentColor"
            className="text-copper-400"
            strokeWidth="2"
            strokeLinecap="round"
            opacity="0.6"
          />
        </svg>

        {/* main landscape card — technosolare-cover */}
        <div className="absolute end-[6%] top-1/2 w-[min(24vw,350px)] -translate-y-1/2 rotate-2">
          <div className="relative aspect-[3/2] overflow-hidden rounded-[2rem] border border-paper-50/10 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.8)] animate-float-slow">
            <Image
              src="/images/technosolare-cover.jpg"
              alt=""
              fill
              priority
              sizes="380px"
              className="object-cover"
            />
            <div className="absolute inset-x-6 top-6 h-px bg-gradient-to-r from-transparent via-volt-400/60 to-transparent" />
          </div>

          {/* floating live-production card */}
          <div className="absolute -bottom-5 -start-10 flex items-center gap-3 rounded-2xl border border-paper-50/10 bg-graphite-900/85 px-4 py-3 shadow-xl backdrop-blur animate-float">
            <span className="relative flex h-2.5 w-2.5">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-volt-400 opacity-60" />
              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-volt-400" />
            </span>
            <div className="leading-tight">
              <p className="text-[10px] uppercase tracking-widest text-paper-100/50">
                {isAr ? 'الطاقة الشمسية' : 'Énergie solaire'}
              </p>
              <p className="text-sm font-semibold text-paper-50">
                {isAr ? 'منزلكم وبئركم' : 'Votre maison & votre puits'}
              </p>
            </div>
          </div>

          {/* small eco chip */}
          <div className="absolute -top-5 end-6 flex items-center gap-2 rounded-full bg-leaf-500 px-3 py-1.5 text-graphite-950 shadow-lg shadow-leaf-700/30 animate-float [animation-delay:1.4s]">
            <Leaf className="h-3.5 w-3.5" />
            <span className="text-[11px] font-semibold tracking-wide">
              {isAr ? 'طاقة نظيفة' : '100% Renouvelable'}
            </span>
          </div>
        </div>

        {/* top square card — well-energy */}
        <div className="absolute end-[44%] top-[3%] w-[min(15vw,200px)] -rotate-6">
          <div className="relative aspect-square overflow-hidden rounded-3xl border border-paper-50/10 shadow-2xl animate-float [animation-delay:0.8s]">
            <Image
              src="/images/well-energy.jpg"
              alt=""
              fill
              sizes="200px"
              className="object-cover"
            />
          </div>
        </div>

        {/* bottom square card — solar-panel */}
        <div className="absolute bottom-[2%] end-[6%] w-[min(12vw,170px)] rotate-6">
          <div className="relative aspect-square overflow-hidden rounded-3xl border border-paper-50/15 shadow-2xl animate-float [animation-delay:1.6s]">
            <Image
              src="/images/solar-panel.jpg"
              alt=""
              fill
              sizes="170px"
              className="object-cover"
            />
          </div>
        </div>

        {/* energy droplets */}
        {droplets.map((d, i) => (
          <span
            key={i}
            className={`absolute rounded-full ${d.size} ${d.color} animate-float`}
            style={{ top: d.top, insetInlineEnd: d.right, animationDelay: d.delay }}
          />
        ))}
      </div>

      <Container className="relative flex min-h-[70vh] flex-col justify-center gap-8 py-24">
        <div className="max-w-2xl">
          <span className="inline-flex items-center gap-2 rounded-full border border-volt-500/30 bg-volt-500/10 px-3 py-1 text-xs font-medium text-volt-400 animate-fade-down">
            {isAr ? 'الطاقة الشمسية' : 'Énergie Solaire'}
          </span>
          <h1 className="mt-6 font-display text-4xl font-semibold leading-tight sm:text-6xl animate-fade-up [animation-delay:120ms]">
            {headline}
          </h1>
          <p className="mt-6 max-w-xl text-lg text-paper-100/70 animate-fade-up [animation-delay:240ms]">
            {subtext}
          </p>
          <div className="mt-10 flex flex-wrap gap-4 animate-fade-up [animation-delay:360ms]">
            <Button href={`/${locale}/devis`}>{t('ctaPrimary')}</Button>
            <Button href={`/${locale}/services`} variant="secondary" className="!border-paper-50/20 !text-paper-50">
              {t('ctaSecondary')}
            </Button>
          </div>
        </div>
      </Container>
    </section>
  );
}