'use client';

import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { Card } from '@/components/ui/Card';
import { motion } from 'framer-motion';
import { Globe, User, MapPin, Phone, CheckCircle2, ArrowRight, FileText, Ticket, Smartphone, Star } from 'lucide-react';
import { useState, useEffect } from 'react';

// Sub-component for the flipping effect
const FlippingCard = ({ front, back, delay }: { front: any, back: any, delay: number }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  useEffect(() => {
    // Initial delay
    const initialTimeout = setTimeout(() => {
      setIsFlipped(true); // First flip

      // Setup interval for subsequent flips
      const interval = setInterval(() => {
        setIsFlipped(prev => !prev);
      }, 8000); // Toggle every 8 seconds to prevent overlap (4 cards * 2s gap)

      return () => clearInterval(interval);
    }, delay * 1000);

    return () => clearTimeout(initialTimeout);
  }, [delay]);

  return (
    <div className="relative h-32 w-full perspective-[1000px] group cursor-pointer">
      <motion.div
        animate={{ rotateY: isFlipped ? 180 : 0 }}
        transition={{ duration: 0.6, type: "spring", stiffness: 260, damping: 20 }}
        className="relative w-full h-full preserve-3d"
        style={{ transformStyle: 'preserve-3d' }}
      >
        {/* Front Face */}
        <div
          className="absolute inset-0 backface-hidden"
          style={{ backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden' }}
        >
          <Card className="w-full h-full backdrop-blur-xl bg-white/70 border-white/50 shadow-xl shadow-gray-200/50 p-4 flex flex-col items-center justify-center hover:scale-105 transition-all duration-300">
            <div className={`w-10 h-10 mb-3 rounded-xl ${front.color} flex items-center justify-center`}>
              <front.icon className="w-5 h-5" />
            </div>
            <p className="font-semibold text-gray-800 text-sm">{front.title}</p>
          </Card>
        </div>

        {/* Back Face */}
        <div
          className="absolute inset-0 backface-hidden"
          style={{
            backfaceVisibility: 'hidden',
            WebkitBackfaceVisibility: 'hidden',
            transform: 'rotateY(180deg)'
          }}
        >
          <Card className="w-full h-full backdrop-blur-xl bg-white/80 border-white/60 shadow-xl shadow-blue-200/50 p-4 flex flex-col items-center justify-center hover:scale-105 transition-all duration-300">
            <div className={`w-10 h-10 mb-3 rounded-xl ${back.color} flex items-center justify-center`}>
              <back.icon className="w-5 h-5" />
            </div>
            <p className="font-semibold text-gray-900 text-sm">{back.title}</p>
          </Card>
        </div>
      </motion.div>
    </div>
  );
};

interface HeroProps {
  t: any; // i18n translation function
  headingAs?: 'h1' | 'div';
}

export const Hero: React.FC<HeroProps> = ({ t, headingAs = 'h1' }) => {
  const HeadingTag = headingAs;


  const containerjs = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const itemjs = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0 }
  };

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 pt-12 pb-20">
      {/* Animated Background Orbs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* Orb 1 - Blue (top-left) */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-blue-400/30 rounded-full blur-3xl animate-blob" />

        {/* Orb 2 - Purple (top-right) */}
        <div className="absolute -top-12 -right-12 w-96 h-96 bg-purple-400/30 rounded-full blur-3xl animate-blob animation-delay-2000" />

        {/* Orb 3 - Pink (bottom-left) */}
        <div className="absolute -bottom-24 -left-12 w-96 h-96 bg-pink-400/20 rounded-full blur-3xl animate-blob animation-delay-4000" />

        {/* Orb 4 - Cyan (center-right) */}
        <div className="absolute top-1/2 -right-24 w-80 h-80 bg-cyan-400/20 rounded-full blur-3xl animate-blob animation-delay-6000" />
      </div>

      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            <Badge variant="info" className="inline-flex items-center space-x-2">
              <span>{t.hero.badge}</span>
            </Badge>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="space-y-6"
            >
              <HeadingTag className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                {t.hero.title}
              </HeadingTag>

              <p className="text-xl text-gray-600 leading-relaxed max-w-2xl">
                {t.hero.subtitle}
              </p>

              <div className="space-y-3 pt-2">
                {t.hero.features.map((feature: string, index: number) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.2 + (index * 0.1) }}
                    className="flex items-center space-x-3"
                  >
                    <div className="flex-shrink-0 w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center">
                      <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                    </div>
                    <span className="text-gray-700 font-medium">{feature}</span>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className="flex flex-col sm:flex-row gap-4 pt-4"
            >
              <Link href="/signup">
                <Button size="lg" className="text-lg px-8 py-6 w-full sm:w-auto shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 transition-all duration-300">
                  {t.hero.cta_primary}
                </Button>
              </Link>
              <Link href="/#pricing">
                <Button variant="outline" size="lg" className="text-lg px-8 py-6 w-full sm:w-auto backdrop-blur-sm bg-white/50 border-gray-200 hover:bg-white/80 transition-all duration-300">
                  {t.hero.cta_secondary}
                </Button>
              </Link>
            </motion.div>
          </div>

          {/* Right Preview Widget */}
          <div className="relative">
            <div className="relative perspective-[1000px]">
              <div className="grid grid-cols-2 gap-4">
                {[
                  {
                    front: { title: 'URL/Website', color: 'bg-blue-500/10 text-blue-600', icon: Globe },
                    back: { title: 'PDF / Menu', color: 'bg-orange-500/10 text-orange-600', icon: FileText },
                    delay: 3 // Starts at 3s
                  },
                  {
                    front: { title: 'Contact Card', color: 'bg-purple-500/10 text-purple-600', icon: User },
                    back: { title: 'Coupon / Deals', color: 'bg-red-500/10 text-red-600', icon: Ticket },
                    delay: 5 // +2s
                  },
                  {
                    front: { title: 'Location', color: 'bg-green-500/10 text-green-600', icon: MapPin },
                    back: { title: 'App Store', color: 'bg-sky-500/10 text-sky-600', icon: Smartphone },
                    delay: 7 // +2s
                  },
                  {
                    front: { title: 'Phone Number', color: 'bg-pink-500/10 text-pink-600', icon: Phone },
                    back: { title: 'Feedback', color: 'bg-yellow-500/10 text-yellow-600', icon: Star },
                    delay: 9 // +2s
                  },
                ].map((card, index) => (
                  <FlippingCard key={index} {...card} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Smooth Gradient Fade Transition */}
      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none" />
    </section >
  );
};
