import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Phone,
  Globe,
  Zap,
  Shield,
  TrendingUp,
  Users,
  Star,
  CheckCircle,
  BarChart3,
  Clock,
  DollarSign,
  MessageCircle,
  Headphones,
  Award
} from "lucide-react";
import { useTranslation } from 'react-i18next';
import { LanguageSelector } from "./LanguageSelector";

const LandingPage = () => {
  const { t } = useTranslation();
  const isAuthenticated = localStorage.getItem('IsAuthenticated');
  console.log(isAuthenticated);
  const features = [
    {
      icon: Phone,
      title: t('landing.features.phone.title'),
      description: t('landing.features.phone.description')
    },
    {
      icon: Globe,
      title: t('landing.features.language.title'),
      description: t('landing.features.language.description')
    },
    {
      icon: Zap,
      title: t('landing.features.fast.title'),
      description: t('landing.features.fast.description')
    },
    {
      icon: Shield,
      title: t('landing.features.security.title'),
      description: t('landing.features.security.description')
    },
    {
      icon: BarChart3,
      title: t('landing.features.analytics.title'),
      description: t('landing.features.analytics.description')
    },
    {
      icon: MessageCircle,
      title: t('landing.features.conversation.title'),
      description: t('landing.features.conversation.description')
    }
  ];

  const testimonials = [
    {
      name: "Sarah Chen",
      role: "CEO, TechFlow Commerce",
      avatar: "SC",
      content: "ShopCall.ai reduced our customer service costs by 78% while improving satisfaction scores. It's like having 100 expert agents available 24/7.",
      rating: 5,
      savings: "16,200,000 HUF/hónap"
    },
    {
      name: "Marcus Rodriguez",
      role: "Operations Director, GlobalShop",
      avatar: "MR",
      content: "The multi-language support helped us expand to 12 new markets seamlessly. Our international customers love the instant, native-language support.",
      rating: 5,
      savings: "11,520,000 HUF/hónap"
    },
    {
      name: "Emily Watson",
      role: "Customer Success Manager, RetailPro",
      avatar: "EW",
      content: "Implementation took just 2 hours. Now we handle 5x more calls with the same team size. Our customers don't even realize they're talking to AI.",
      rating: 5,
      savings: "10,080,000 HUF/hónap"
    }
  ];

  const stats = [
    { value: "78%", label: t('landing.stats.costReduction') },
    { value: "99.9%", label: t('landing.stats.uptime') },
    { value: "50+", label: t('landing.stats.languages') },
    { value: "300ms", label: t('landing.stats.responseTime') },
    { value: "94%", label: t('landing.stats.satisfaction') },
    { value: "24/7", label: t('landing.stats.availability') }
  ];

  const partners = [
    {
      name: "Shopify",
      logo: "https://cdn.worldvectorlogo.com/logos/shopify.svg",
      alt: "Shopify logo"
    },
    {
      name: "WooCommerce",
      logo: "https://cdn.worldvectorlogo.com/logos/woocommerce.svg",
      alt: "WooCommerce logo"
    },
    {
      name: "Magento",
      logo: "https://cdn.iconscout.com/icon/free/png-512/free-magento-logo-icon-download-in-svg-png-gif-file-formats--technology-social-media-company-vol-1-pack-logos-icons-3030040.png?f=webp&w=512",
      alt: "Magento logo"
    },
    {
      name: "BigCommerce",
      logo: "https://cdn.worldvectorlogo.com/logos/bigcommerce-1.svg",
      alt: "BigCommerce logo"
    },
    {
      name: "Squarespace",
      logo: "https://cdn.worldvectorlogo.com/logos/squarespace.svg",
      alt: "Squarespace logo"
    },
    {
      name: "PrestaShop",
      logo: "https://cdn.worldvectorlogo.com/logos/prestashop.svg",
      alt: "PrestaShop logo"
    },
    {
      name: "OpenCart",
      logo: "https://cdn.worldvectorlogo.com/logos/opencart.svg",
      alt: "OpenCart logo"
    }
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      {/* Header Navigation */}
      <header className="fixed top-0 w-full bg-slate-900/95 backdrop-blur-sm border-b border-slate-800 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-8 h-8" />
              <span className="text-xl font-bold text-white">ShopCall.ai</span>
            </div>
            <div className="flex items-center gap-4">
              <LanguageSelector />
              {
                isAuthenticated === "false" || isAuthenticated === null ?
                <Button variant="ghost" className="text-slate-300 hover:text-white hover:bg-slate-800" asChild>
                  <a href="/signup">{t('landing.hero.startTrial')}</a>
                </Button> : ''
              }
              <Button variant="outline" className="border-slate-600 text-black hover:bg-slate-800 hover:text-white bg-white" asChild>
                <a href={isAuthenticated === "true" ? "/dashboard" : "/login"}>{isAuthenticated === "true" ? t('sidebar.dashboard') : t('auth.login.title')}</a>
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative overflow-hidden pt-16 pb-4 min-h-[60vh]">
        {/* Gradient Background Fallback */}
        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 z-0"></div>

        {/* Video Background */}
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover z-10 opacity-40"
          onError={(e) => {
            console.log("Video failed to load:", e);
            e.currentTarget.style.display = 'none';
          }}
          onLoadStart={() => console.log("Video loading started")}
          onCanPlay={() => console.log("Video can play")}
        >
          <source src="https://videocdn.cdnpk.net/videos/de9b177c-4e0b-53aa-9bbc-5d51ad89a4a5/horizontal/previews/watermarked/large.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-20">
          <div className="text-center">
            <Badge className="mb-4 bg-slate-700/80 text-slate-300 border-slate-600/50">
              🚀 {t('landing.trusted')}
            </Badge>
            <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
              {t('landing.hero.title')}
              <span className="text-[#52b3d0] block">{t('landing.hero.subtitle')}</span>
            </h1>
            <p className="text-xl md:text-2xl text-slate-300 mb-8 max-w-4xl mx-auto leading-relaxed">
              {t('landing.hero.description')}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
              <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-8 py-4 text-lg" asChild>
                <a href="/signup">
                  {t('landing.hero.startTrial')}
                  <Zap className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-8 py-4 text-lg">
                {t('landing.hero.watchDemo')}
                <Phone className="ml-2 h-5 w-5" />
              </Button>
            </div>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mt-6">
              {stats.map((stat, index) => (
                <div key={index} className="text-center">
                  <div className="text-2xl md:text-3xl font-bold text-[#52b3d0] mb-1">{stat.value}</div>
                  <div className="text-xs md:text-sm text-slate-400">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Partner Integrations Section */}
      <section className="py-16 bg-slate-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl font-semibold mb-4 text-slate-300">{t('landing.partners.title')}</h2>
            <p className="text-slate-400">{t('landing.partners.description')}</p>
          </div>

          <div className="flex justify-center">
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-8 items-center max-w-5xl">
              {partners.map((partner, index) => (
                <div key={index} className="flex flex-col items-center group">
                  <div className="w-16 h-16 bg-white rounded-xl flex items-center justify-center mb-3 group-hover:bg-white/90 transition-colors border border-slate-600/50 p-2">
                    <img
                      src={partner.logo}
                      alt={partner.alt}
                      className="w-full h-full object-contain"
                    />
                  </div>
                  <span className="text-sm text-slate-400 text-center">{partner.name}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="text-center mt-12">
            <p className="text-slate-400 text-sm">{t('landing.partners.more')}</p>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 bg-slate-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">{t('landing.features.title')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('landing.features.description')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="bg-slate-700/50 border-slate-600 hover:bg-slate-700/70 transition-colors">
                <CardHeader>
                  <div className="w-12 h-12 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4">
                    <feature.icon className="h-6 w-6 text-[#52b3d0]" />
                  </div>
                  <CardTitle className="text-white">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-slate-300">
                    {feature.description}
                  </CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Savings Section */}
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">{t('landing.savings.title')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto mb-12">
              {t('landing.savings.description')}
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-16">
            <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
              <CardHeader className="text-center">
                <div className="text-4xl font-bold text-green-400 mb-2">12,600,000 HUF</div>
                <CardTitle className="text-white text-xl">{t('landing.savings.average.title')}</CardTitle>
                <CardDescription className="text-slate-300 text-base">
                  {t('landing.savings.average.description')}
                </CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="flex items-center justify-center gap-2 text-green-400 font-medium">
                  <TrendingUp className="h-5 w-5" />
                  <span>78% {t('landing.savings.average.reduction')}</span>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
              <CardHeader className="text-center">
                <div className="text-4xl font-bold text-[#52b3d0] mb-2">5,000+</div>
                <CardTitle className="text-white text-xl">{t('landing.savings.calls.title')}</CardTitle>
                <CardDescription className="text-slate-300 text-base">
                  {t('landing.savings.calls.description')}
                </CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="flex items-center justify-center gap-2 text-[#52b3d0] font-medium">
                  <Clock className="h-5 w-5" />
                  <span>300ms {t('landing.savings.calls.response')}</span>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700 hover:bg-slate-700/80 transition-colors">
              <CardHeader className="text-center">
                <div className="text-4xl font-bold text-purple-400 mb-2">94%</div>
                <CardTitle className="text-white text-xl">{t('landing.savings.satisfaction.title')}</CardTitle>
                <CardDescription className="text-slate-300 text-base">
                  {t('landing.savings.satisfaction.description')}
                </CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="flex items-center justify-center gap-2 text-purple-400 font-medium">
                  <Award className="h-5 w-5" />
                  <span>{t('landing.savings.satisfaction.leading')}</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-24 bg-slate-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">{t('landing.testimonials.title')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('landing.testimonials.description')}
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-slate-700/50 border-slate-600">
                <CardHeader>
                  <div className="flex items-center gap-4 mb-4">
                    <Avatar>
                      <AvatarFallback className="bg-[#52b3d0] text-white">
                        {testimonial.avatar}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="font-semibold text-white">{testimonial.name}</div>
                      <div className="text-sm text-slate-400">{testimonial.role}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-1 mb-2">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>
                  <Badge className="bg-green-600/20 text-green-300 border-green-500/30">
                    {t('landing.testimonials.saves')} {testimonial.savings}
                  </Badge>
                </CardHeader>
                <CardContent>
                  <p className="text-slate-300 italic">"{testimonial.content}"</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold mb-6">{t('landing.cta.title')}</h2>
          <p className="text-xl text-slate-300 mb-12">
            {t('landing.cta.description')}
          </p>

          <div className="bg-slate-800/50 rounded-2xl p-8 border border-slate-700">
            <div className="grid md:grid-cols-3 gap-6 mb-8">
              <div className="flex items-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400" />
                <span className="text-slate-300">{t('landing.cta.freeTrial')}</span>
              </div>
              <div className="flex items-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400" />
                <span className="text-slate-300">{t('landing.cta.setup')}</span>
              </div>
              <div className="flex items-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400" />
                <span className="text-slate-300">{t('landing.cta.contracts')}</span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-12 py-4 text-lg" asChild>
                <a href="/signup">
                  {t('landing.hero.startTrial')}
                  <Zap className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-12 py-4 text-lg">
                {t('landing.cta.schedulDemo')}
                <Headphones className="ml-2 h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 border-t border-slate-800 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="flex items-center justify-center gap-3 mb-4">
              <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-8 h-8" />
              <h3 className="text-2xl font-bold text-white">ShopCall.ai</h3>
            </div>
            <p className="text-slate-400 mb-6">
              {t('landing.footer.description')}
            </p>
            <div className="flex justify-center items-center gap-4 text-sm text-slate-500">
              <span>{t('landing.footer.rights')}</span>
              <span>•</span>
              <a href="/about" className="hover:text-slate-300">{t('landing.footer.about')}</a>
              <span>•</span>
              <a href="/privacy" className="hover:text-slate-300">{t('landing.footer.privacy')}</a>
              <span>•</span>
              <a href="/terms" className="hover:text-slate-300">{t('landing.footer.terms')}</a>
              <span>•</span>
              <a href="/contact" className="hover:text-slate-300">{t('landing.footer.contact')}</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;
