import { useState, useEffect } from "react";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
import { useMutation } from "@tanstack/react-query";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Check, Loader2 } from "lucide-react";
import { insertDemoSignupSchema, type InsertDemoSignup } from "@shared/schema";
import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { analytics } from "@/lib/analytics";
import { useTranslation } from "@/lib/use-translation";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

// Typing Animation Hook for Hero
const useHeroTyping = (text: string, speed: number = 150) => {
  const [displayedText, setDisplayedText] = useState("");
  const [isComplete, setIsComplete] = useState(false);
  const [shouldStart, setShouldStart] = useState(false);

  useEffect(() => {
    // Start typing immediately
    const startTimer = setTimeout(() => {
      setShouldStart(true);
    }, 0); // No delay

    return () => clearTimeout(startTimer);
  }, []);

  useEffect(() => {
    if (!shouldStart) return;

    let index = 0;
    const timer = setInterval(() => {
      if (index <= text.length) {
        setDisplayedText(text.slice(0, index));
        index++;
      } else {
        setIsComplete(true);
        clearInterval(timer);
      }
    }, speed);

    return () => clearInterval(timer);
  }, [text, speed, shouldStart]);

  return { displayedText, isComplete, shouldStart };
};

// Typing Text Component for Hero
const HeroTypingText = ({
  text,
  speed = 150,
}: {
  text: string;
  speed?: number;
}) => {
  const { displayedText, isComplete, shouldStart } = useHeroTyping(text, speed);

  return (
    <span
      className="inline-block bg-gradient-to-r from-purple-400 to-emerald-400 bg-clip-text text-transparent relative"
      style={{ minWidth: "200px" }}
    >
      <span className="invisible">{text}</span>
      <span className="absolute left-0 top-0">
        {shouldStart ? displayedText : ""}
        {shouldStart && !isComplete && (
          <motion.span
            className="inline-block w-0.5 h-8 sm:h-10 md:h-12 lg:h-16 bg-emerald-400 ml-1"
            animate={{ opacity: [1, 0] }}
            transition={{
              duration: 0.8,
              repeat: Infinity,
              repeatType: "reverse",
            }}
          />
        )}
      </span>
    </span>
  );
};

// Countdown component for individual time units
const TimeUnit = ({
  value,
  label,
  isSeconds = false,
}: {
  value: number;
  label: string;
  isSeconds?: boolean;
}) => (
  <div className="text-center">
    <motion.div
      className="text-3xl md:text-4xl font-light text-white mb-1"
      key={value}
      initial={{ scale: isSeconds ? 1.1 : 1, opacity: isSeconds ? 0.8 : 1 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      {value.toString().padStart(2, "0")}
    </motion.div>
    <div className="text-xs text-white/60 uppercase tracking-wider">
      {label}
    </div>
  </div>
);

export default function HeroSection() {
  const { t } = useTranslation();
  const { toast } = useToast();
  const [showDialog, setShowDialog] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const prefersReducedMotion = useReducedMotion() ?? false;

  const heroFadeUp = prefersReducedMotion
    ? { initial: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0 } }
    : { initial: { opacity: 0, y: 30 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.4, ease: "easeOut" } };

  const heroFadeLeft = prefersReducedMotion
    ? { initial: { opacity: 1, x: 0 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0 } }
    : { initial: { opacity: 0, x: -50 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.2, type: "spring" as const, stiffness: 100 } };

  const heroFadeRight = prefersReducedMotion
    ? { initial: { opacity: 1, x: 0 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0 } }
    : { initial: { opacity: 0, x: 50 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.3, type: "spring" as const, stiffness: 100 } };

  // Countdown timer state
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  // Target date: December 03, 2025 at 16:00 (4:00 PM) GMT+3
  const targetDate = new Date("2025-12-03T16:00:00+03:00");

  useEffect(() => {
    const calculateTimeLeft = () => {
      const now = new Date();
      const difference = targetDate.getTime() - now.getTime();

      if (difference > 0) {
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor(
          (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
        );
        const minutes = Math.floor(
          (difference % (1000 * 60 * 60)) / (1000 * 60),
        );
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);

        setTimeLeft((prev) => {
          if (
            prev.days !== days ||
            prev.hours !== hours ||
            prev.minutes !== minutes ||
            prev.seconds !== seconds
          ) {
            return { days, hours, minutes, seconds };
          }
          return prev;
        });
      } else {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
      }
    };

    // Initial calculation
    calculateTimeLeft();

    const interval = setInterval(calculateTimeLeft, 1000);
    return () => clearInterval(interval);
  }, []);

  const form = useForm<InsertDemoSignup>({
    resolver: zodResolver(insertDemoSignupSchema),
    defaultValues: {
      email: "",
    },
  });

  const demoSignupMutation = useMutation({
    mutationFn: (data: InsertDemoSignup) =>
      apiRequest("POST", "/api/demo-signup", data),
    onSuccess: () => {
      const email = form.getValues("email");
      // Track demo signup
      analytics.trackDemoSignup(email, "hero_section");
      (window as any).trackSessionEvent?.("demo_signup_completed");

      // Store email in localStorage for pre-filling the investor form
      localStorage.setItem("investorEmail", email);

      // Show success dialog
      setShowDialog(true);
      form.reset();

      // Redirect after 2 seconds
      setTimeout(() => {
        setShowDialog(false);
        window.location.href = "/investor-form";
      }, 2000);
    },
    onError: () => {
      toast({
        title: t.heroRegistrationFailed,
        description: t.heroRegistrationFailedDesc,
        variant: "destructive",
      });
    },
  });

  const onSubmit = (data: InsertDemoSignup) => {
    demoSignupMutation.mutate(data);
  };

  return (
    <section
      id="hero"
      className="relative min-h-[95vh] sm:min-h-[100vh] md:min-h-[100vh] flex items-center justify-center overflow-hidden pt-16 sm:pt-20 md:pt-24 pb-16"
    >
      {/* Simple background */}
      <div className="absolute inset-0 bg-gradient-to-br from-black via-gray-900 to-black">
        {/* Background image with preload */}
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-40"
          style={{
            backgroundImage: "url(/images/okto_bg-min-2.jpg)",
            backgroundSize: "cover",
            backgroundPosition: "center center",
          }}
        ></div>
        <link rel="preload" as="image" href="/images/okto_bg-min-2.jpg" fetchpriority="high" />

        {/* Simplified visual effects for better performance */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Optimized laser beam effect */}
          <motion.div
            className="absolute bg-gradient-to-b from-white via-orange-400 to-purple-600 shadow-lg blur-sm"
            style={{
              left: "50%",
              top: "0%",
              width: "4px",
              height: "600px",
              transformOrigin: "top center",
              boxShadow: "0 0 20px rgba(255, 165, 0, 0.4)",
            }}
            animate={{
              opacity: [0.7, 0.8, 0.7],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />

          {/* Secondary laser beam from top */}
          <motion.div
            className="absolute bg-gradient-to-b from-orange-400 via-purple-500 to-violet-600 shadow-md blur-sm"
            style={{
              left: "52%", // Slightly offset from main beam
              top: "0%", // Start from very top of screen
              width: "2px",
              height: "500px",
              transformOrigin: "top center",
              boxShadow: "0 0 15px rgba(168, 85, 247, 0.3)",
            }}
            animate={{
              scaleY: [0, 0.8, 1, 0.6, 0],
              opacity: [0.5, 0.7, 0.4, 0.6, 0.5],
            }}
            transition={{
              duration: 2.5,
              repeat: Infinity,
              delay: 0.5,
              ease: "easeInOut",
            }}
          />

          {/* Volcanic eruption particles at word intersection */}
          {[...Array(8)].map((_, i) => {
            const angle = (i / 8) * Math.PI * 2;
            const distance = 60 + Math.random() * 40;

            return (
              <motion.div
                key={`volcanic-${i}`}
                className="absolute w-1.5 h-1.5 bg-gradient-to-r from-orange-400 via-purple-500 to-violet-600 rounded-full"
                style={{
                  left: "50%", // At word gap intersection
                  top: "35%", // Where laser hits heading area
                }}
                animate={{
                  x: [0, Math.cos(angle) * distance, 0],
                  y: [0, Math.sin(angle) * distance * 0.5, 0],
                  scale: [0.5, 1.2, 0.3],
                  opacity: [0.8, 0.4, 0.1],
                }}
                transition={{
                  duration: 2 + i * 0.2,
                  repeat: Infinity,
                  delay: i * 0.1,
                  ease: "easeOut",
                }}
              />
            );
          })}

          {/* Volcanic glow effect at word intersection */}
          <motion.div
            className="absolute w-16 h-16 bg-gradient-to-r from-orange-300/30 via-purple-400/20 to-violet-500/10 rounded-full blur-xl"
            style={{
              left: "47%", // Centered on word gap
              top: "30%", // At heading level
            }}
            animate={{
              scale: [1, 1.5, 1],
              opacity: [0.3, 0.6, 0.3],
            }}
            transition={{
              duration: 2.5,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />

          {/* Top source point glow */}
          <motion.div
            className="absolute w-6 h-6 bg-gradient-to-r from-orange-300 via-purple-500 to-violet-600 rounded-full blur-sm"
            style={{
              left: "49%",
              top: "0%", // At very top of screen
            }}
            animate={{
              scale: [1, 1.8, 1],
              opacity: [0.8, 1, 0.8],
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        {/* Simple overlay */}
        <div className="absolute inset-0 bg-gradient-to-br from-black/60 via-gray-900/50 to-black/60"></div>
      </div>
      <div className="relative z-10 text-center max-w-7xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
        <motion.div
          initial={heroFadeUp.initial}
          animate={heroFadeUp.animate}
          transition={heroFadeUp.transition}
        >
          <motion.h1
            className="font-sans text-4xl sm:text-5xl md:text-6xl lg:text-7xl relative z-10 tracking-tight leading-[1.1] max-w-6xl mx-auto drop-shadow-2xl px-4 mt-[0px] mb-[0px]"
            initial={heroFadeUp.initial}
            animate={heroFadeUp.animate}
            transition={{ ...heroFadeUp.transition, ...(prefersReducedMotion ? {} : { delay: 0.1 }) }}
          >
            <motion.span
              className="block text-white font-semibold tracking-tight"
              initial={heroFadeLeft.initial}
              animate={heroFadeLeft.animate}
              transition={heroFadeLeft.transition}
            >
              <span className="inline-block align-top">{t.heroTitle1}</span>
            </motion.span>
            <motion.span
              className="block text-gray-400 font-light tracking-tight"
              initial={heroFadeRight.initial}
              animate={heroFadeRight.animate}
              transition={heroFadeRight.transition}
            >
              <span className="inline-block align-baseline">{t.heroTitle2.split(' ')[0]}</span>{" "}
              <span className="inline-block align-baseline bg-gradient-to-r from-purple-400 to-emerald-400 bg-clip-text text-transparent">
                {t.heroTitle2.split(' ').slice(1).join(' ')}
              </span>
            </motion.span>
          </motion.h1>

          {/* Subtle separator */}
          <motion.div
            className="w-24 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent mx-auto mt-[4px] mb-3"
            initial={prefersReducedMotion ? { opacity: 1, scaleX: 1 } : { opacity: 0, scaleX: 0 }}
            animate={{ opacity: 1, scaleX: 1 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.4, ease: "easeOut", delay: prefersReducedMotion ? 0 : 0.2 }}
          />

          {/* Investor Day Signup */}
          <motion.div
            className="max-w-3xl mx-auto relative"
            initial={heroFadeUp.initial}
            animate={heroFadeUp.animate}
            transition={{ ...heroFadeUp.transition, ...(prefersReducedMotion ? {} : { delay: 0.3 }) }}
          >
            <div className="text-center mt-[0px] mb-[12px]">
              <motion.h3
                className="mb-4 bg-gradient-to-r from-purple-200 to-white bg-clip-text text-transparent font-medium text-base sm:text-2xl md:text-[28px] leading-relaxed [text-wrap:balance]"
                initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: prefersReducedMotion ? 0 : 0.4 }}
              >
                {t.heroSubtitle.split('\n').map((line, i) => {
                  const parts = line.split('UX-first');
                  return (
                    <span key={i}>
                      {i > 0 && <br />}
                      {parts.map((part, j) => (
                        <span key={j}>
                          {part}
                          {j < parts.length - 1 && (
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-cyan-300">UX-first</span>
                          )}
                        </span>
                      ))}
                    </span>
                  );
                })}
              </motion.h3>
            </div>

            {/* Dual CTA */}
            <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto mb-6">
              <motion.div
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                transition={{ type: "spring", stiffness: 400, damping: 10 }}
                className="flex-1"
              >
                <Button
                  onClick={() => {
                    analytics.trackHeroButtonClick();
                    (window as any).trackSessionEvent?.("hero_cta_individuals");
                    window.location.href = "/human-development";
                  }}
                  className="w-full bg-gradient-to-r from-emerald-700 via-emerald-600 to-cyan-600 hover:from-emerald-600 hover:via-emerald-500 hover:to-cyan-500 text-white font-medium h-14 text-lg rounded-xl border-0 relative overflow-hidden group shadow-lg hover:shadow-emerald-600/30 transition-all duration-300"
                >
                  <span>{t.heroButtonIndividuals}</span>
                  <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-out" />
                </Button>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                transition={{ type: "spring", stiffness: 400, damping: 10 }}
                className="flex-1"
              >
                <Button
                  onClick={() => {
                    analytics.trackHeroButtonClick();
                    (window as any).trackSessionEvent?.(
                      "hero_cta_organizations",
                    );
                    window.location.href = "/decision-intelligence";
                  }}
                  className="w-full bg-gradient-to-r from-indigo-800 via-purple-800 to-violet-700 hover:from-indigo-700 hover:via-purple-700 hover:to-violet-600 text-white font-medium h-14 text-lg rounded-xl border-0 relative overflow-hidden group shadow-lg hover:shadow-indigo-700/30 transition-all duration-300"
                >
                  <span>{t.heroButtonOrganizations}</span>
                  <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-out" />
                </Button>
              </motion.div>
            </div>

            {/* NY Times Logo */}
            <motion.div
              className="flex justify-center mb-4 pt-[6px] pb-[6px]"
              initial={{ opacity: 1, y: 0 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0, delay: 0 }}
            >
              <img
                src="/images/nytimeslean.svg"
                alt="New York Times"
                className="h-20 opacity-60 hover:opacity-80 transition-opacity duration-300"
                loading="lazy"
                decoding="async"
              />
            </motion.div>

            <p
              className="text-xs sm:text-sm tracking-widest uppercase mt-[26px] mb-[26px] font-semibold text-[#fcf5f5a6]"
              style={{ textShadow: "0 1px 12px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.6)" }}
            >
              {t.heroTrustedBy}
            </p>

            {/* Reference Logos Section */}
            <div className="mb-0 pt-4">
              {/* Floating Logo Cards Container - Full Bleed */}
              <div className="relative h-24 overflow-visible w-screen -ml-[50vw] left-[50%]">
                <motion.div
                  className="flex items-center space-x-8 absolute whitespace-nowrap"
                  animate={{
                    x: ["0%", "-50%"],
                  }}
                  transition={{
                    duration: 40,
                    repeat: Infinity,
                    ease: "linear",
                    repeatType: "loop",
                  }}
                  style={{ willChange: "transform" }}
                >
                  {/* Logo Cards */}
                  {[
                    { name: "Sabanci Holding", logo: "SABANCI HOLDING" },
                    { name: "Modanisa", logo: "MODANISA" },
                    { name: "Türk Telekom", logo: "TÜRK TELEKOM" },
                    { name: "EPİAŞ", logo: "EPİAŞ" },
                    { name: "E-Residency", logo: "E-RESIDENCY" },
                    { name: "Ödeal", logo: "ÖDEAL" },
                    { name: "BinYaprak", logo: "BİNYAPRAK" },
                    { name: "Tekhnelogos", logo: "TEKHNELOGOS" },
                    { name: "Innogate", logo: "INNOGATE" },
                    { name: "HP * Sharpe", logo: "HP *SHARPE" },
                    { name: "GroupBSP", logo: "GROUPBSP" },
                    { name: "IMMIB", logo: "İMMİB" },
                  ].map((company, index) => (
                    <motion.div
                      key={`${company.name}-${index}`}
                      className="relative flex-shrink-0 overflow-hidden rounded-xl cursor-pointer group min-w-[190px] hover:z-50"
                      style={{
                        padding: "30px 32px 30px 32px",
                        background: "linear-gradient(135deg, rgba(220,220,240,0.13) 0%, rgba(180,180,200,0.08) 30%, rgba(20,20,30,0.28) 70%, rgba(8,8,14,0.45) 100%)",
                        boxShadow: "0 8px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(230,230,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.25)",
                        backdropFilter: "blur(10px)",
                        WebkitBackdropFilter: "blur(10px)",
                      }}
                      initial={{ opacity: 1 }}
                      animate={{ opacity: 1 }}
                      whileHover={{
                        y: -8,
                        scale: 1.02,
                        transition: { type: "spring", stiffness: 300, damping: 20 },
                      }}
                    >
                      {/* Diagonal metallic sheen — top-left bright */}
                      <div
                        className="absolute inset-0 pointer-events-none"
                        style={{
                          background: "linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(200,200,220,0.06) 35%, transparent 60%, rgba(0,0,0,0.08) 100%)",
                        }}
                      />

                      {/* Silver shimmer sweep on hover */}
                      <div
                        className="absolute inset-0 -translate-x-full group-hover:translate-x-full pointer-events-none"
                        style={{
                          background: "linear-gradient(90deg, transparent, rgba(210,210,230,0.12), rgba(255,255,255,0.20), rgba(210,210,230,0.12), transparent)",
                          transition: "transform 650ms ease-out",
                        }}
                      />

                      {/* ✦ accent — top-left */}
                      <div className="absolute top-2 left-2.5 pointer-events-none">
                        <span
                          style={{
                            fontSize: "13px",
                            lineHeight: 1,
                            backgroundImage: "linear-gradient(135deg, #d0d0e8 0%, #ffffff 45%, #a8a8c0 100%)",
                            WebkitBackgroundClip: "text",
                            WebkitTextFillColor: "transparent",
                            backgroundClip: "text",
                            filter: "drop-shadow(0 0 4px rgba(200,200,255,0.4))",
                            display: "block",
                          }}
                        >✦</span>
                      </div>

                      <div className="relative z-10 text-center">
                        <div
                          className="font-semibold text-sm tracking-widest"
                          style={{
                            backgroundImage: "linear-gradient(135deg, #c0c0d8 0%, #e8e8f4 40%, #ffffff 50%, #d0d0e8 65%, #8888a0 100%)",
                            WebkitBackgroundClip: "text",
                            WebkitTextFillColor: "transparent",
                            backgroundClip: "text",
                            filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.7))",
                          }}
                        >
                          {company.logo}
                        </div>
                      </div>
                    </motion.div>
                  ))}

                  {/* Duplicate the logos for seamless loop - positioned immediately after originals */}
                  {[
                    { name: "Sabanci Holding", logo: "SABANCI HOLDING" },
                    { name: "Modanisa", logo: "MODANISA" },
                    { name: "Türk Telekom", logo: "TÜRK TELEKOM" },
                    { name: "EPİAŞ", logo: "EPİAŞ" },
                    { name: "E-Residency", logo: "E-RESIDENCY" },
                    { name: "Ödeal", logo: "ÖDEAL" },
                    { name: "BinYaprak", logo: "BİNYAPRAK" },
                    { name: "Tekhnelogos", logo: "TEKHNELOGOS" },
                    { name: "Innogate", logo: "INNOGATE" },
                    { name: "HP * Sharpe", logo: "HP *SHARPE" },
                    { name: "GroupBSP", logo: "GROUPBSP" },
                    { name: "IMMIB", logo: "İMMİB" },
                  ].map((company, index) => (
                    <motion.div
                      key={`${company.name}-duplicate-${index}`}
                      className="relative flex-shrink-0 overflow-hidden rounded-xl cursor-pointer group min-w-[190px] hover:z-50"
                      style={{
                        padding: "30px 32px 30px 32px",
                        background: "linear-gradient(135deg, rgba(220,220,240,0.13) 0%, rgba(180,180,200,0.08) 30%, rgba(20,20,30,0.28) 70%, rgba(8,8,14,0.45) 100%)",
                        boxShadow: "0 8px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(230,230,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.25)",
                        backdropFilter: "blur(10px)",
                        WebkitBackdropFilter: "blur(10px)",
                      }}
                      initial={{ opacity: 1 }}
                      animate={{ opacity: 1 }}
                      whileHover={{
                        y: -8,
                        scale: 1.02,
                        transition: { type: "spring", stiffness: 300, damping: 20 },
                      }}
                    >
                      {/* Diagonal metallic sheen — top-left bright */}
                      <div
                        className="absolute inset-0 pointer-events-none"
                        style={{
                          background: "linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(200,200,220,0.06) 35%, transparent 60%, rgba(0,0,0,0.08) 100%)",
                        }}
                      />

                      {/* Silver shimmer sweep on hover */}
                      <div
                        className="absolute inset-0 -translate-x-full group-hover:translate-x-full pointer-events-none"
                        style={{
                          background: "linear-gradient(90deg, transparent, rgba(210,210,230,0.12), rgba(255,255,255,0.20), rgba(210,210,230,0.12), transparent)",
                          transition: "transform 650ms ease-out",
                        }}
                      />

                      {/* ✦ accent — top-left */}
                      <div className="absolute top-2 left-2.5 pointer-events-none">
                        <span
                          style={{
                            fontSize: "13px",
                            lineHeight: 1,
                            backgroundImage: "linear-gradient(135deg, #d0d0e8 0%, #ffffff 45%, #a8a8c0 100%)",
                            WebkitBackgroundClip: "text",
                            WebkitTextFillColor: "transparent",
                            backgroundClip: "text",
                            filter: "drop-shadow(0 0 4px rgba(200,200,255,0.4))",
                            display: "block",
                          }}
                        >✦</span>
                      </div>

                      <div className="relative z-10 text-center">
                        <div
                          className="font-semibold text-sm tracking-widest"
                          style={{
                            backgroundImage: "linear-gradient(135deg, #c0c0d8 0%, #e8e8f4 40%, #ffffff 50%, #d0d0e8 65%, #8888a0 100%)",
                            WebkitBackgroundClip: "text",
                            WebkitTextFillColor: "transparent",
                            backgroundClip: "text",
                            filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.7))",
                          }}
                        >
                          {company.logo}
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </motion.div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
      {/* Success Dialog */}
      <Dialog open={showDialog} onOpenChange={setShowDialog}>
        <DialogContent className="sm:max-w-md bg-dark-surface border border-white/20">
          <DialogHeader>
            <DialogTitle className="text-white text-center">
              {t.heroRegistrationSuccess}
            </DialogTitle>
            <DialogDescription className="text-white/70 text-center">
              {t.heroRegistrationDesc}
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
      {/* Smooth transition gradient to blend with next section */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900 pointer-events-none"></div>
    </section>
  );
}