"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight, ShieldCheck, Cloud, Lightbulb, Rocket, Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PlaceHolderImages } from "@/lib/placeholder-images";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

export default function Home() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const partnerLogos = PlaceHolderImages.filter(img => img.id.startsWith("partner-"));

  const services = [
    {
      icon: <Lightbulb className="h-6 w-6" />,
      title: "IT Consulting & Implementation",
      shortDescription: "Expert advisory and end-to-end implementation to align technology with your business goals.",
      fullDescription: "We provide expert advisory, planning, and end-to-end IT implementation services to align technology with your business goals and drive digital transformation. Our strategic roadmaps ensure long-term scalability and ROI.",
      image: "/itc.jpg"
    },
    {
      icon: <Cloud className="h-6 w-6" />,
      title: "Data Center Infrastructure",
      shortDescription: "Consult, design, and modernize robust data center environments for high performance.",
      fullDescription: "We consult, design, build, and modernize robust data center environments, ensuring high performance, scalability, and optimized IT assets. Our focus is on resilience, energy efficiency, and future-proof architecture.",
      image: "/datacenter.PNG"
    },
    {
      icon: <ShieldCheck className="h-6 w-6" />,
      title: "Enterprise Security Solutions",
      shortDescription: "Comprehensive security strategies to protect organizations and ensure business continuity.",
      fullDescription: "We deliver comprehensive security strategies and infrastructure to protect organizations from modern threats and ensure business continuity. From zero-trust architecture to real-time threat detection, we secure your perimeter and data.",
      image: "/security.jpg"
    },
    {
      icon: <Settings className="h-6 w-6" />,
      title: "Support & Maintenance",
      shortDescription: "Continuous monitoring and technical support to ensure optimal system performance.",
      fullDescription: "We offer continuous monitoring, technical support, and system maintenance to ensure reliability, security, and optimal performance of your IT systems. Our dedicated support teams provide 24/7 oversight and rapid response.",
      image: "/support.png"
    },
    {
      icon: <Rocket className="h-6 w-6" />,
      title: "Cloud Migration & Strategy",
      shortDescription: "Accelerate your journey to the cloud with scalable architecture and modernization.",
      fullDescription: "Modernize your infrastructure with our bespoke cloud migration and management services. From multi-cloud strategies to serverless optimization, we ensure your systems are scalable, cost-effective, and always available.",
      image: "/cloud.PNG"
    }
  ];

  return (
    <div className="flex flex-col gap-24 pb-24">
      {/* Hero Section */}
      <section className="relative h-[85vh] flex items-center overflow-hidden bg-black">
        <div className="absolute inset-0 z-0">
          <Image
            src="/nasa.jpg"
            alt="Global technology connectivity"
            fill
            className="object-cover opacity-70"
            priority
            data-ai-hint="earth night"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-background/40 via-transparent to-transparent" />
        </div>

        <div className="container mx-auto px-4 relative z-10 animate-fade-in-up">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 border border-primary/30 text-primary-foreground text-sm font-medium mb-8 backdrop-blur-sm">
              <Rocket className="h-4 w-4" />
              <span>Global Strategic Consulting</span>
            </div>
            <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-white font-headline mb-6 leading-[1.1] drop-shadow-lg">
              Comprehensive <span className="text-primary">Technology</span> Solutions
            </h1>
            <p className="text-xl text-white font-medium mb-10 leading-relaxed max-w-2xl drop-shadow-xl opacity-90">
              T&T Consulting bridges the gap between complex technology and strategic business outcomes on a global scale. We future-proof your enterprise.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button asChild size="lg" className="bg-primary hover:bg-primary/90 text-lg px-8 h-14">
                <Link href="/contact">
                  Start Your Consultation <ArrowRight className="ml-2 h-5 w-5" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section with Carousel */}
      <section className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
          <div className="max-w-2xl">
            <h2 className="text-4xl md:text-6xl font-bold font-headline mb-4 leading-tight">
              Precision Strategic <span className="text-primary">Technology</span> Solutions
            </h2>
          </div>
        </div>

        <div className="relative">
          <Carousel
            opts={{
              align: "start",
              loop: true,
            }}
            className="w-full"
          >
            <CarouselContent className="-ml-6">
              {services.map((service, idx) => (
                <CarouselItem key={idx} className="pl-6 md:basis-1/2 lg:basis-1/3">
                  <div className="group relative aspect-[3/4] rounded-[2.5rem] overflow-hidden bg-muted cursor-pointer shadow-lg hover:shadow-2xl transition-smooth">
                    <Image
                      src={service.image}
                      alt={service.title}
                      fill
                      className="object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
                    
                    {/* Icon Circle */}
                    <div className="absolute bottom-10 left-10 p-4 rounded-full bg-accent text-accent-foreground shadow-xl transition-smooth group-hover:scale-110 z-20">
                      {service.icon}
                    </div>

                    {/* Content Overlay */}
                    <div className="absolute inset-0 p-10 flex flex-col justify-end text-white z-10">
                      <div className="transition-smooth transform translate-y-4 group-hover:translate-y-0">
                        <span className="text-[10px] font-bold uppercase tracking-[0.3em] text-accent mb-2 block">
                          Capability
                        </span>
                        <h3 className="text-2xl font-bold mb-4 font-headline leading-tight">
                          {service.title}
                        </h3>
                        <p className="text-sm text-white/70 line-clamp-2 opacity-0 group-hover:opacity-100 transition-smooth delay-75">
                          {service.shortDescription}
                        </p>
                        
                        {mounted && (
                          <Dialog>
                            <DialogTrigger asChild>
                              <button className="mt-6 flex items-center gap-2 text-sm font-bold text-white hover:text-accent transition-smooth opacity-0 group-hover:opacity-100">
                                Explore More <ArrowRight className="h-4 w-4" />
                              </button>
                            </DialogTrigger>
                            <DialogContent className="sm:max-w-[600px] rounded-[3rem] p-10 overflow-hidden">
                              <DialogHeader>
                                <div className="bg-primary/10 p-4 rounded-2xl w-fit mb-6 text-primary">
                                  {service.icon}
                                </div>
                                <DialogTitle className="text-3xl font-bold font-headline mb-4">{service.title}</DialogTitle>
                                <DialogDescription className="text-lg text-muted-foreground leading-relaxed">
                                  {service.fullDescription}
                                </DialogDescription>
                              </DialogHeader>
                              <div className="relative h-64 w-full mt-8 rounded-3xl overflow-hidden border shadow-inner">
                                <Image 
                                  src={service.image} 
                                  alt={service.title} 
                                  fill 
                                  className="object-cover"
                                />
                              </div>
                              <div className="mt-10">
                                <Button asChild className="w-full h-14 bg-primary text-lg">
                                  <Link href="/contact">Book a Consultation</Link>
                                </Button>
                              </div>
                            </DialogContent>
                          </Dialog>
                        )}
                      </div>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            
            {/* Custom Positioned Controls */}
            <div className="absolute -top-[7.5rem] right-0 flex gap-2">
              <CarouselPrevious className="static translate-y-0 h-12 w-12 rounded-full border-muted-foreground/20 hover:bg-primary hover:text-white transition-smooth" />
              <CarouselNext className="static translate-y-0 h-12 w-12 rounded-full border-muted-foreground/20 hover:bg-primary hover:text-white transition-smooth" />
            </div>
          </Carousel>
        </div>
      </section>

      {/* Partners Marquee */}
      <section className="py-16 bg-white overflow-hidden border-y">
        <div className="container mx-auto px-4 mb-10 text-center">
          <h2 className="text-sm font-bold uppercase tracking-[0.2em] text-muted-foreground">Trusted by Industry Leaders</h2>
        </div>
        <div className="relative flex overflow-x-hidden">
          <div className="flex animate-marquee whitespace-nowrap gap-20 items-center py-4">
            {[...partnerLogos, ...partnerLogos].map((partner, idx) => (
              <div key={idx} className="relative w-48 h-20 transition-smooth shrink-0 opacity-100 grayscale-0">
                <Image
                  src={partner.imageUrl}
                  alt={partner.description}
                  fill
                  className="object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Professional CTA Section - Compact Version */}
      <section className="container mx-auto px-4">
        <div className="relative overflow-hidden rounded-[2.5rem] bg-[#0A1A19] border border-white/5 shadow-xl">
          <div className="absolute top-0 right-0 w-[300px] h-[300px] bg-primary/20 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2" />
          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 pointer-events-none" />
          
          <div className="relative z-10 py-12 px-6 text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 px-2 py-1 rounded-full bg-white/5 border border-white/10 text-primary-foreground/80 text-[10px] font-bold uppercase tracking-[0.1em] mb-4 backdrop-blur-md">
              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
              Strategic Growth Partner
            </div>
            
            <h2 className="text-2xl md:text-3xl font-bold font-headline mb-4 text-white leading-tight">
              Ready to <span className="text-primary italic">Transform</span> Your Business?
            </h2>
            
            <p className="text-sm md:text-base text-white/70 mb-8 max-w-xl mx-auto leading-relaxed">
              Join dozens of industry leaders who have scaled their operations with T&T Consulting's strategic technology frameworks. Your digital evolution starts here.
            </p>
            
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button asChild size="sm" className="bg-accent hover:bg-accent/90 text-accent-foreground text-base px-6 h-12 rounded-xl shadow-lg transition-smooth hover-lift border-0">
                <Link href="/contact" className="flex items-center gap-2">
                  Get Consultation <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
              <Link 
                href="/about" 
                className="text-white/60 hover:text-white font-medium text-sm underline underline-offset-4 decoration-primary/50 hover:decoration-primary transition-smooth"
              >
                Our process
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}