"use client";

import { useState, useEffect } from "react";
import { ArrowRight, Star, Play, CheckCircle, Sparkles, Globe, Zap, Shield } from "lucide-react";

const TestimonialCardSix = ({ title, description, tag, textboxLayout, animationType, useInvertedBackground, members }: {
  title: string;
  description: string;
  tag: string;
  textboxLayout: string;
  animationType: string;
  useInvertedBackground: string;
  members: Array<{
    id: string;
    name: string;
    role: string;
    imageSrc: string;
    imageAlt: string;
  }>;
}) => {
  return (
    <div className="bg-white p-8 rounded-2xl shadow-lg">
      <div className="mb-6">
        <span className="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4">
          {tag}
        </span>
        <h3 className="text-2xl font-bold text-gray-900 mb-3">{title}</h3>
        <p className="text-gray-600 leading-relaxed">{description}</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {members.map((member) => (
          <div key={member.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
            <img
              src={member.imageSrc}
              alt={member.imageAlt}
              className="w-12 h-12 rounded-full object-cover"
            />
            <div>
              <h4 className="font-semibold text-gray-900">{member.name}</h4>
              <p className="text-sm text-gray-500">{member.role}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const FeatureCard = ({ icon: Icon, title, description }: {
  icon: any;
  title: string;
  description: string;
}) => {
  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300">
      <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
        <Icon className="w-6 h-6 text-blue-600" />
      </div>
      <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600 leading-relaxed">{description}</p>
    </div>
  );
};

const StatCard = ({ number, label }: {
  number: string;
  label: string;
}) => {
  return (
    <div className="text-center">
      <div className="text-4xl font-bold text-blue-600 mb-2">{number}</div>
      <div className="text-gray-600">{label}</div>
    </div>
  );
};

const PricingCard = ({ plan, price, period, features, popular }: {
  plan: string;
  price: string;
  period: string;
  features: string[];
  popular?: boolean;
}) => {
  return (
    <div className={`bg-white p-8 rounded-2xl border-2 ${popular ? 'border-blue-500' : 'border-gray-200'} relative`}>
      {popular && (
        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
          <span className="bg-blue-500 text-white text-sm font-semibold px-4 py-1 rounded-full">
            Most Popular
          </span>
        </div>
      )}
      <div className="text-center mb-8">
        <h3 className="text-2xl font-bold text-gray-900 mb-4">{plan}</h3>
        <div className="mb-4">
          <span className="text-4xl font-bold text-gray-900">${price}</span>
          <span className="text-gray-500">/{period}</span>
        </div>
      </div>
      <ul className="space-y-3 mb-8">
        {features.map((feature, index) => (
          <li key={index} className="flex items-center space-x-3">
            <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
            <span className="text-gray-600">{feature}</span>
          </li>
        ))}
      </ul>
      <button className={`w-full py-3 px-6 rounded-lg font-semibold transition-colors duration-200 ${
        popular 
          ? 'bg-blue-600 text-white hover:bg-blue-700' 
          : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
      }`}>
        Get Started
      </button>
    </div>
  );
};

export default function Home() {
  const [isVideoPlaying, setIsVideoPlaying] = useState(false);

  useEffect(() => {
    // Add any initialization logic here
  }, []);

  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Hero Section */}
      <section className="px-4 py-20 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
            Build Amazing
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> 
              Digital Experiences
            </span>
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
            Transform your ideas into stunning web applications with our cutting-edge development platform. 
            Fast, reliable, and built for the modern web.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200 flex items-center space-x-2">
              <span>Get Started Free</span>
              <ArrowRight className="w-5 h-5" />
            </button>
            <button 
              className="border border-gray-300 text-gray-700 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-200 flex items-center space-x-2"
              onClick={() => setIsVideoPlaying(!isVideoPlaying)}
            >
              <Play className="w-5 h-5" />
              <span>Watch Demo</span>
            </button>
          </div>
        </div>

        {/* Hero Image/Video */}
        <div className="relative max-w-4xl mx-auto">
          <div className="bg-white p-4 rounded-2xl shadow-2xl">
            {isVideoPlaying ? (
              <div className="aspect-video bg-gray-900 rounded-lg flex items-center justify-center">
                <Play className="w-16 h-16 text-white opacity-80" />
              </div>
            ) : (
              <img 
                src="/images/hero-dashboard.png" 
                alt="Dashboard Preview" 
                className="w-full rounded-lg"
              />
            )}
          </div>
          {/* Floating elements */}
          <div className="absolute -top-4 -left-4 bg-blue-500 text-white p-3 rounded-full shadow-lg">
            <Sparkles className="w-6 h-6" />
          </div>
          <div className="absolute -bottom-4 -right-4 bg-purple-500 text-white p-3 rounded-full shadow-lg">
            <Zap className="w-6 h-6" />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-white py-16">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <StatCard number="100K+" label="Active Users" />
            <StatCard number="99.9%" label="Uptime" />
            <StatCard number="50+" label="Countries" />
            <StatCard number="24/7" label="Support" />
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            Everything you need to succeed
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Powerful features designed to streamline your workflow and boost productivity
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <FeatureCard 
            icon={Globe}
            title="Global CDN"
            description="Lightning-fast content delivery across the globe with 99.9% uptime guarantee"
          />
          <FeatureCard 
            icon={Shield}
            title="Enterprise Security"
            description="Bank-level security with end-to-end encryption and compliance certifications"
          />
          <FeatureCard 
            icon={Zap}
            title="Real-time Analytics"
            description="Get instant insights with comprehensive analytics and performance monitoring"
          />
          <FeatureCard 
            icon={Sparkles}
            title="AI-Powered Tools"
            description="Leverage artificial intelligence to automate tasks and optimize performance"
          />
          <FeatureCard 
            icon={CheckCircle}
            title="Easy Integration"
            description="Seamlessly integrate with your existing tools and workflows in minutes"
          />
          <FeatureCard 
            icon={Star}
            title="24/7 Support"
            description="Get help whenever you need it with our dedicated support team"
          />
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="bg-gray-50 py-20">
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Trusted by industry leaders
            </h2>
            <p className="text-xl text-gray-600">
              See what our customers have to say about their experience
            </p>
          </div>
          
          <TestimonialCardSix
            title="Amazing Results"
            description="Our team has achieved incredible results using this platform. The tools are intuitive and the support is exceptional."
            tag="Customer Success"
            textboxLayout="default"
            animationType="slide-up"
            useInvertedBackground="invertDefault"
            members={[
              {
                id: "1",                name: "Sarah Johnson",                role: "CTO, TechCorp",                imageSrc: "/images/avatar1.jpg",                imageAlt: "Sarah Johnson"
              },
              {
                id: "2",                name: "Michael Chen",                role: "Lead Developer, StartupXYZ",                imageSrc: "/images/avatar2.jpg",                imageAlt: "Michael Chen"
              },
              {
                id: "3",                name: "Emily Rodriguez",                role: "Product Manager, InnovateLab",                imageSrc: "/images/avatar3.jpg",                imageAlt: "Emily Rodriguez"
              }
            ]}
          />
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20 px-4 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            Simple, transparent pricing
          </h2>
          <p className="text-xl text-gray-600">
            Choose the plan that works best for your team
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <PricingCard
            plan="Starter"
            price="29"
            period="month"
            features={[
              "Up to 5 team members",              "10GB storage",              "Basic analytics",              "Email support"
            ]}
          />
          <PricingCard
            plan="Professional"
            price="99"
            period="month"
            popular={true}
            features={[
              "Up to 25 team members",              "100GB storage",              "Advanced analytics",              "Priority support",              "Custom integrations"
            ]}
          />
          <PricingCard
            plan="Enterprise"
            price="299"
            period="month"
            features={[
              "Unlimited team members",              "1TB storage",              "Real-time analytics",              "24/7 dedicated support",              "Custom solutions",              "SLA guarantee"
            ]}
          />
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gradient-to-r from-blue-600 to-purple-600 py-20">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold text-white mb-4">
            Ready to get started?
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            Join thousands of teams already building amazing things
          </p>
          <button className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors duration-200 inline-flex items-center space-x-2">
            <span>Start Your Free Trial</span>
            <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-16">
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">Company</h3>
              <div className="space-y-2">
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">About</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact</a></div>
              </div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Product</h3>
              <div className="space-y-2">
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Features</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Pricing</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Updates</a></div>
              </div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Resources</h3>
              <div className="space-y-2">
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Documentation</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Help Center</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Community</a></div>
              </div>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Legal</h3>
              <div className="space-y-2">
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Terms</a></div>
                <div><a href="#" className="text-gray-400 hover:text-white transition-colors">Security</a></div>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8 mt-8 text-center text-gray-400">
            <p>&copy; 2024 Your Company. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </main>
  );
}