import { useState, useEffect } from 'react';
import {
  ArrowRight,
  Briefcase,
  Users,
  TrendingUp,
  Award,
  CheckCircle,
  ShieldCheck,
  Star,
  Clock,
  MessageCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from '@/components/ui/carousel';

export default function Home() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Hero slides define the marketing, staffing and financial focus areas.  Each
  // object contains an image path relative to the public folder and overlay
  // text.  These slides are displayed using the embla-carousel component
  // imported above.  Should you wish to update images, place new assets in
  // client/public/images and adjust these paths accordingly.
  const heroSlides = [
    {
      image: '/images/slide1.png',
      heading: 'Elevate Your Marketing',
      text: 'Comprehensive marketing strategies tailored to your business.',
    },
    {
      image: '/images/slide2.png',
      heading: 'Build Your Dream Team',
      text: 'Staffing solutions to attract, retain, and grow talent.',
    },
    {
      image: '/images/slide3.png',
      heading: 'Achieve Financial Excellence',
      text: 'Financial consulting to optimize operations and maximize profits.',
    },
  ];

  const services = [
    {
      icon: TrendingUp,
      title: 'Marketing',
      description: 'Strategic marketing solutions to drive growth, increase brand visibility, and connect with your target audience.',
      features: ['Digital Strategy', 'Brand Development', 'Campaign Management'],
    },
    {
      icon: Users,
      title: 'Staffing',
      description: 'Expert recruitment and talent management services to build high-performing teams that drive success.',
      features: ['Talent Acquisition', 'Workforce Planning', 'HR Consulting'],
    },
    {
      icon: Briefcase,
      title: 'Financial Consultation',
      description: 'Comprehensive financial advisory to optimize operations, manage assets, and achieve financial goals.',
      features: ['Financial Planning', 'Risk Management', 'Investment Strategy'],
    },
  ];

  const testimonials = [
    {
      name: 'Sarah Johnson',
      company: 'TechCorp Inc.',
      text: 'Oblix transformed our marketing strategy and helped us achieve 150% growth in just one year.',
      rating: 5,
    },
    {
      name: 'Michael Chen',
      company: 'Global Enterprises',
      text: 'Their staffing solutions helped us build a world-class team. Highly professional and efficient.',
      rating: 5,
    },
    {
      name: 'Emma Williams',
      company: 'Finance Plus Ltd.',
      text: 'The financial consultation services provided invaluable insights that improved our bottom line significantly.',
      rating: 5,
    },
  ];

  const stats = [
    { number: '500+', label: 'Clients Served' },
    { number: '15+', label: 'Years of Experience' },
    { number: '50+', label: 'Industries Covered' },
  ];

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />

      {/* Hero Section with slider */}
      <section id="home" className="relative h-[calc(100vh-4rem)]">{/* Reserve space for nav */}
        <Carousel className="h-full w-full">
          <CarouselContent className="h-full">
            {heroSlides.map((slide, index) => (
              <CarouselItem key={index} className="h-full">
                <div
                  className="relative h-full w-full bg-cover bg-center flex items-center justify-center"
                  style={{ backgroundImage: `url(${slide.image})` }}
                >
                  {/* overlay */}
                  <div className="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
                  <div className="relative z-10 text-center px-4 space-y-6 text-white max-w-3xl">
                    <h1 className="text-4xl md:text-6xl font-bold leading-tight" style={{ textShadow: '0 2px 4px rgba(0,0,0,0.6)' }}>
                      {slide.heading}
                    </h1>
                    <p className="text-lg md:text-xl mx-auto" style={{ textShadow: '0 2px 4px rgba(0,0,0,0.6)' }}>
                      {slide.text}
                    </p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
                      <Button
                        onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}
                        className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-6 text-lg font-semibold rounded-lg transition-all duration-300 flex items-center justify-center gap-2 group"
                      >
                        Get Started
                        <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
                      </Button>
                      <Button
                        onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}
                        variant="outline"
                        className="glass px-8 py-6 text-lg font-semibold rounded-lg"
                      >
                        Learn More
                      </Button>
                    </div>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="text-white/80 hover:text-white" />
          <CarouselNext className="text-white/80 hover:text-white" />
        </Carousel>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 px-4 md:px-8">
        <div className="container max-w-5xl mx-auto">
          <div className="glass-card space-y-6 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground">About Oblix</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <h3 className="text-2xl font-bold text-accent">Our Mission</h3>
                <p className="text-muted-foreground leading-relaxed">
                  To empower businesses of all sizes with innovative solutions and expert guidance, enabling them to achieve sustainable growth and operational excellence. We are committed to delivering measurable results and building lasting partnerships with our clients.
                </p>
              </div>
              <div className="space-y-4">
                <h3 className="text-2xl font-bold text-accent">Our Vision</h3>
                <p className="text-muted-foreground leading-relaxed">
                  To be the leading trusted advisor for businesses seeking transformative growth through strategic marketing, exceptional talent, and sound financial management. We envision a future where every organization can unlock its full potential.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 px-4 md:px-8">
        <div className="container max-w-6xl mx-auto">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Our Services</h2>
            <p className="text-lg text-muted-foreground">
              Comprehensive solutions tailored to your business needs
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {services.map((service, index) => {
              const Icon = service.icon;
              return (
                <div
                  key={index}
                  className="glass-card group hover:shadow-2xl animate-fade-in-up flex flex-col justify-between"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div>
                    <div className="mb-6">
                      <div className="w-14 h-14 bg-accent/20 rounded-lg flex items-center justify-center group-hover:bg-accent/30 transition-colors">
                        <Icon size={28} className="text-accent" />
                      </div>
                    </div>
                    <h3 className="text-2xl font-bold text-foreground mb-3">{service.title}</h3>
                    <p className="text-muted-foreground mb-6">{service.description}</p>
                    <ul className="space-y-2 mb-6">
                      {service.features.map((feature, i) => (
                        <li key={i} className="flex items-center gap-2 text-foreground">
                          <CheckCircle size={16} className="text-accent flex-shrink-0" />
                          <span className="text-sm">{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  {/* Call‑to‑action for individual service pages */}
                  <div className="pt-4">
                    <Button
                      variant="secondary"
                      className="w-full justify-center"
                      onClick={() => {
                        // scroll to placeholder or navigate when service pages are added
                        window.location.href = `/services/${service.title.toLowerCase().replace(/\s+/g, '-')}`;
                      }}
                    >
                      Learn More
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-20 px-4 md:px-8 bg-white/30 backdrop-blur-md">
        <div className="container max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {stats.map((stat, index) => (
              <div
                key={index}
                className="glass-card text-center animate-fade-in-up"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent mb-2">
                  {stat.number}
                </div>
                <p className="text-lg text-muted-foreground">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Trust Badges Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container max-w-6xl mx-auto">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Why Choose Oblix?</h2>
            <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
              We’ve earned the trust of businesses across the globe through our commitment to quality, transparency and results. Here are a few reasons clients choose us again and again.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 animate-fade-in-up">
            <div className="flex flex-col items-center text-center space-y-4 p-6 glass-card">
              <ShieldCheck size={36} className="text-accent" />
              <h4 className="text-xl font-semibold text-foreground">Certified Quality</h4>
              <p className="text-sm text-muted-foreground">We adhere to the highest industry standards to deliver consistent, reliable services.</p>
            </div>
            <div className="flex flex-col items-center text-center space-y-4 p-6 glass-card">
              <Star size={36} className="text-accent" />
              <h4 className="text-xl font-semibold text-foreground">Top Rated Agency</h4>
              <p className="text-sm text-muted-foreground">Recognized by leading review platforms for exceptional client satisfaction.</p>
            </div>
            <div className="flex flex-col items-center text-center space-y-4 p-6 glass-card">
              <Users size={36} className="text-accent" />
              <h4 className="text-xl font-semibold text-foreground">500+ Happy Clients</h4>
              <p className="text-sm text-muted-foreground">A broad portfolio of success stories across multiple industries and geographies.</p>
            </div>
            <div className="flex flex-col items-center text-center space-y-4 p-6 glass-card">
              <Clock size={36} className="text-accent" />
              <h4 className="text-xl font-semibold text-foreground">24/7 Support</h4>
              <p className="text-sm text-muted-foreground">Our team is here around the clock to ensure your questions are answered promptly.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container max-w-4xl mx-auto">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">What Our Clients Say</h2>
            <p className="text-lg text-muted-foreground">
              Trusted by leading businesses worldwide
            </p>
          </div>
          <Carousel
            className="relative"
            opts={{ loop: true, align: 'start' }}
          >
            <CarouselContent>
              {testimonials.map((testimonial, index) => (
                <CarouselItem key={index} className="px-4">
                  <div className="glass-card p-8 space-y-6 h-full flex flex-col justify-between">
                    <div>
                      <div className="flex gap-1 mb-4">
                        {[...Array(testimonial.rating)].map((_, i) => (
                          <span key={i} className="text-yellow-400">★</span>
                        ))}
                      </div>
                      <p className="text-muted-foreground italic">"{testimonial.text}"</p>
                    </div>
                    <div>
                      <p className="font-semibold text-foreground">{testimonial.name}</p>
                      <p className="text-sm text-muted-foreground">{testimonial.company}</p>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="-left-6 top-1/2 -translate-y-1/2" />
            <CarouselNext className="-right-6 top-1/2 -translate-y-1/2" />
          </Carousel>
        </div>
      </section>

      {/* CTA Section */}
      <section id="cta" className="py-20 px-4 md:px-8 bg-gradient-to-r from-primary to-accent/80 backdrop-blur-md">
        <div className="container max-w-4xl mx-auto text-center space-y-8 animate-fade-in-up">
          <h2 className="text-4xl md:text-5xl font-bold text-white">
            Ready to Transform Your Business?
          </h2>
          <p className="text-lg text-white/80">
            Let's work together to achieve your goals. Reach us instantly on WhatsApp.
          </p>
          <Button
            asChild
            className="bg-green-500 hover:bg-green-600 text-white px-8 py-6 text-lg font-semibold rounded-lg transition-all duration-300 inline-flex items-center gap-2 group"
          >
            <a href="https://wa.me/0000000000" target="_blank" rel="noopener noreferrer">
              <MessageCircle size={20} className="mr-2" /> WhatsApp Us
            </a>
          </Button>
        </div>
      </section>

      {/* Footer */}
      <Footer />
    </div>
  );
}
