"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { useTranslation } from "@/lib/i18n/context";
import { FloatingBubbles } from "@/components/ui/floating-bubbles";
import { Sparkles } from "lucide-react";

export function Hero() {
  const { t, dir } = useTranslation();

  return (
    <section id="home" className="relative min-h-screen flex items-center bg-hero-gradient overflow-hidden" dir={dir}>
      <FloatingBubbles count={8} />

      {/* Decorative shapes */}
      <div className="absolute top-20 right-[10%] w-64 h-64 rounded-full bg-soft-teal/10 animate-pulse-soft" />
      <div className="absolute bottom-20 left-[5%] w-48 h-48 rounded-full bg-warm-coral/5 animate-float-slow" />
      <div className="absolute top-1/3 left-[15%] w-20 h-20 rounded-full bg-baby-blue/30 animate-float-medium" />

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Text Column */}
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className={`${dir === "rtl" ? "lg:order-2" : "lg:order-1"}`}
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.5 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-primary/10 text-primary text-sm font-semibold mb-6"
            >
              <Sparkles size={16} />
              {t.hero.badge}
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3, duration: 0.6 }}
              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black leading-tight mb-4"
            >
              <span className="text-gradient-primary">{t.hero.title.split(" ")[0]}</span>{" "}
              <span className="text-dark-text">{t.hero.title.split(" ").slice(1).join(" ")}</span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.6 }}
              className="text-xl md:text-2xl font-bold text-gradient-coral mb-4"
            >
              {t.hero.slogan}
            </motion.p>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5, duration: 0.6 }}
              className="text-base md:text-lg text-dark-text/60 leading-relaxed mb-8 max-w-lg"
            >
              {t.hero.description}
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.6 }}
              className="flex flex-wrap gap-4"
            >
              <button
                onClick={() => document.querySelector("#products")?.scrollIntoView({ behavior: "smooth" })}
                className="btn-primary text-base px-8 py-3.5"
              >
                {t.hero.cta1}
              </button>
              <button
                onClick={() => document.querySelector("#contact")?.scrollIntoView({ behavior: "smooth" })}
                className="btn-secondary text-base px-8 py-3.5"
              >
                {t.hero.cta2}
              </button>
            </motion.div>
          </motion.div>

          {/* Image Column */}
          <motion.div
            initial={{ opacity: 0, scale: 0.85 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.4, duration: 0.8, ease: "easeOut" }}
            className={`relative flex justify-center ${dir === "rtl" ? "lg:order-1" : "lg:order-2"}`}
          >
            <div className="relative">
              {/* Glow behind product */}
              <div className="absolute inset-0 blur-3xl bg-gradient-to-br from-soft-teal/30 via-baby-blue/20 to-warm-coral/10 rounded-full scale-110" />
              <motion.div
                animate={{ y: [0, -15, 0] }}
                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                className="relative"
              >
                <Image
                  src="/images/hero-product.png"
                  alt="UNIPAM Baby Diapers Pack"
                  width={500}
                  height={540}
                  className="relative z-10 drop-shadow-2xl max-w-[350px] md:max-w-[420px] lg:max-w-[500px] h-auto"
                  priority
                />
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Bottom wave */}
      <div className="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full">
          <path
            d="M0 60C240 120 480 0 720 60C960 120 1200 0 1440 60V120H0V60Z"
            fill="white"
          />
        </svg>
      </div>
    </section>
  );
}