'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 } from 'lucide-react';

interface HeroProps {
  t: any; // i18n translation function
}

export const Hero: React.FC<HeroProps> = ({ t }) => {
  const templateCards = [
    { title: 'URL/Website', color: 'bg-blue-500/10 text-blue-600', icon: Globe },
    { title: 'Contact Card', color: 'bg-purple-500/10 text-purple-600', icon: User },
    { title: 'Location', color: 'bg-green-500/10 text-green-600', icon: MapPin },
    { title: 'Phone Number', color: 'bg-pink-500/10 text-pink-600', icon: Phone },
  ];

  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"
            >
              <h2 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                {t.hero.title}
              </h2>

              <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">
            <motion.div
              variants={containerjs}
              initial="hidden"
              animate="show"
              className="grid grid-cols-2 gap-4"
            >
              {templateCards.map((card, index) => (
                <motion.div key={index} variants={itemjs}>
                  <Card className={`backdrop-blur-xl bg-white/70 border-white/50 shadow-xl shadow-gray-200/50 p-6 text-center hover:scale-105 transition-all duration-300 group cursor-pointer`}>
                    <div className={`w-12 h-12 mx-auto mb-4 rounded-xl ${card.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}>
                      <card.icon className="w-6 h-6" />
                    </div>
                    <p className="font-semibold text-gray-800 group-hover:text-gray-900">{card.title}</p>
                  </Card>
                </motion.div>
              ))}
            </motion.div>

            {/* Floating Badge */}
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.8 }}
              className="absolute -top-4 -right-4 bg-gradient-to-r from-success-500 to-emerald-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg shadow-success-500/30 flex items-center gap-2"
            >
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
              </span>
              {t.hero.engagement_badge}
            </motion.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 >
  );
};
