'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import { ArrowRight, CheckCircle, Users } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { Container } from '@/components/ui';

export function HeroSection() {
  const { t } = useTranslation();
  const router = useRouter();

  const scrollToForm = () => {
    document
      .getElementById("lead-form")
      ?.scrollIntoView({ behavior: "smooth" });
  };

  const scrollToTariffs = () => {
    router.push('/tariffs');
  };

  return (
    <section className="relative pt-32 overflow-hidden">
      {/* Dark Gradient Background - Same as CTA Banner */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#2d3875] via-[#3A4A9C] to-[#2d3875]" />

      {/* Decorative Background Elements */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-400 rounded-full blur-[100px]" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-indigo-400 rounded-full blur-[100px]" />
      </div>

      {/* Dot Pattern Overlay */}
      <div
        className="absolute inset-0 opacity-[0.15]"
        style={{
          backgroundImage: `radial-gradient(circle, white 1px, transparent 1px)`,
          backgroundSize: "24px 24px",
        }}
      />

      {/* Subtle noise texture to prevent banding */}
      <div
        className="absolute inset-0 opacity-[0.015]"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
        }}
      />

      <Container className="relative z-10 pb-40">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Text Content */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="inline-flex items-center gap-2.5 px-4 py-2.5 bg-white/10 backdrop-blur-xl rounded-full mb-6 border border-white/20 hover:border-white/30 hover:bg-white/15 transition-all duration-300"
            >
              <span className="text-base">🇲🇦</span>
              <span className="text-sm font-semibold text-white">
                Leader de la livraison COD au Maroc
              </span>
            </motion.div>

            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white leading-[1.1] mb-6">
              {t("hero.headline")}
            </h1>

            <p className="text-xl text-blue-100 mb-10 leading-relaxed max-w-xl">
              {t("hero.subheadline")}
            </p>

            {/* Premium CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 mb-12">
              <motion.button
                onClick={scrollToForm}
                whileHover={{ scale: 1.02, y: -2 }}
                whileTap={{ scale: 0.98 }}
                className="group relative inline-flex items-center justify-center gap-2 bg-white text-[#3A4A9C] px-8 py-4 rounded-xl text-lg font-semibold transition-all shadow-lg hover:shadow-xl overflow-hidden"
                data-cta-button="true"
              >
                {/* Button shine effect */}
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
                <span className="relative">
                  {t("hero.cta", "Commencer gratuitement")}
                </span>
                <ArrowRight className="w-5 h-5 relative group-hover:translate-x-1 transition-transform" />
              </motion.button>

              <motion.button
                onClick={scrollToTariffs}
                whileHover={{ scale: 1.02, y: -2 }}
                whileTap={{ scale: 0.98 }}
                className="inline-flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-white/20 transition-all border-2 border-white/20 hover:border-white/30 shadow-md hover:shadow-lg"
              >
                {t("hero.secondaryCta", "Voir les tarifs")}
              </motion.button>
            </div>

            {/* Trust Indicators with enhanced styling */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-wrap items-center gap-8 pt-6 border-t border-white/20"
            >
              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/20">
                  <CheckCircle className="w-5 h-5 text-white" />
                </div>
                <div className="min-w-0">
                  <div className="font-bold text-white whitespace-nowrap">
                    100+ villes
                  </div>
                  <div className="text-sm text-blue-200 whitespace-nowrap">
                    Couverture nationale
                  </div>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center flex-shrink-0 border border-white/20">
                  <Users className="w-5 h-5 text-white" />
                </div>
                <div className="min-w-0">
                  <div className="font-bold text-white whitespace-nowrap">
                    99% satisfaction
                  </div>
                  <div className="text-sm text-blue-200 whitespace-nowrap">
                    Clients satisfaits
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>

          {/* Hero Visual - Image that extends beyond section */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="relative -mb-32"
          >
            <img
              src="/hero-image.png"
              alt="Dropex Delivery Service"
              className="w-full h-auto relative z-0 scale-110"
            />
          </motion.div>
        </div>
      </Container>

      {/* Wavy Cut Overlay - This creates the clipping effect */}
      <div className="absolute bottom-0 left-0 right-0 h-[200px] z-20 pointer-events-none">
        <svg
          viewBox="0 0 1440 200"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="absolute bottom-0 w-full h-full"
          preserveAspectRatio="none"
        >
          {/* White wave that masks the bottom */}
          <path
            d="M0,100 C360,140 720,140 1080,100 C1260,80 1350,60 1440,60 L1440,200 L0,200 Z"
            fill="white"
          />
        </svg>
      </div>
    </section>
  );
}