import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, Shield, Globe, Laptop, Server, Phone, ChevronLeft, ChevronRight } from "lucide-react";

export default function LandingPage() {
  // --- HERO SLIDES (5 total) ---
  const slides = [
    {
      id: "overview",
      title: "Empowering Your Business with Smart IT & POS Solutions",
      description:
        "Atalou Microsystems delivers technology that grows with your business — from POS systems to IT infrastructure, support, and security.",
      image: "[Mock Image: Company Hero Banner / Logo — replace with <img/>]",
      targetId: "ata-pos", // Where "Learn More" jumps for this slide
    },
    {
      id: "ata-pos-hero",
      title: "ATA POS System",
      description:
        "An all-in-one solution to manage sales, inventory, employees, and customer loyalty — fast, simple, and secure.",
      image: "[Mock Image: ATA POS System — replace with <img/>]",
      targetId: "ata-pos",
    },
    {
      id: "ti-pos-hero",
      title: "Ti POS",
      description:
        "A minimal but very complete POS solution designed for small businesses and vendors.",
      image: "[Mock Image: Ti POS — replace with <img/>]",
      targetId: "ti-pos",
    },
    {
      id: "ata-center-hero",
      title: "ATA-Center",
      description:
        "Remote access and assistance powered by MeshCentral to deliver IT support from anywhere.",
      image: "[Mock Image: ATA-Center — replace with <img/>]",
      targetId: "ata-center",
    },
    {
      id: "sidnage-hero",
      title: "Sidnage",
      description:
        "Promo & info display: show images, posts, services, or restaurant menus in a presentation-style layout.",
      image: "[Mock Image: Sidnage — replace with <img/>]",
      targetId: "sidnage",
    },
  ];

  const [currentSlide, setCurrentSlide] = useState(0);

  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
  const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);

  return (
    <div className="font-sans text-gray-800">
      {/* ================= HERO SECTION (Slider with 5 pages) ================= */}
      <section className="relative bg-gradient-to-r from-blue-700 to-blue-500 text-white py-24 px-6 text-center overflow-hidden">
        <div className="max-w-4xl mx-auto transition-all duration-300">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">{slides[currentSlide].title}</h1>
          <p className="text-lg md:text-xl mb-6">{slides[currentSlide].description}</p>

          {/* Image / Logo mock */}
          <div className="bg-gray-200 text-black rounded-2xl p-10 mb-8 shadow-inner">
            {slides[currentSlide].image}
          </div>

          <div className="flex gap-4 justify-center">
            <a href={`#${slides[currentSlide].targetId}`}>
              <Button size="lg" className="bg-white text-blue-700 hover:bg-gray-100">Learn More</Button>
            </a>
            <Button size="lg" variant="secondary" className="bg-yellow-400 text-black hover:bg-yellow-500">Contact Us</Button>
          </div>
        </div>

        {/* Side Prev / Next Controls */}
        <button
          aria-label="Previous slide"
          onClick={prevSlide}
          className="absolute left-4 md:left-6 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-blue-700 rounded-full p-3 shadow"
        >
          <ChevronLeft size={20} />
        </button>
        <button
          aria-label="Next slide"
          onClick={nextSlide}
          className="absolute right-4 md:right-6 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-blue-700 rounded-full p-3 shadow"
        >
          <ChevronRight size={20} />
        </button>

        {/* Bottom center dots */}
        <div className="absolute bottom-6 left-0 right-0 flex items-center justify-center gap-2">
          {slides.map((_, i) => (
            <button
              key={i}
              aria-label={`Go to slide ${i + 1}`}
              onClick={() => setCurrentSlide(i)}
              className={`w-3 h-3 rounded-full transition-all ${
                i === currentSlide ? "bg-white scale-110" : "bg-white/50 hover:bg-white/80"
              }`}
            />
          ))}
        </div>
      </section>

      {/* ================= ATA POS Detailed Section ================= */}
      <section id="ata-pos" className="py-20 px-6 bg-gray-50">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">Our Flagship Solution: ATA POS System</h2>
          <div className="bg-gray-200 text-black rounded-lg p-6 mb-6">[Mock Image: ATA POS Detailed — replace with <img/>]</div>
          <p className="text-lg mb-8 max-w-3xl mx-auto">
            An all-in-one solution to manage sales, inventory, employees, and customer loyalty — fast, simple, and secure.
          </p>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 text-left">
            {[
              "Fast & secure payment processing",
              "Real-time inventory & expiration tracking",
              "Employee & shift management",
              "Multi-currency & multilingual support",
              "Customer loyalty program (points, discounts, rewards)",
              "Detailed reports & analytics",
              "Cloud & multi-device access",
              "Role management & security logs",
              "Accounting integration (Excel/QuickBooks/ACCPAC)",
            ].map((item, i) => (
              <Card key={i} className="shadow-md">
                <CardContent className="flex items-start gap-3 p-4">
                  <CheckCircle className="text-blue-600 mt-1" size={20} />
                  <span>{item}</span>
                </CardContent>
              </Card>
            ))}
          </div>

          <Button size="lg" className="mt-10 bg-blue-600 text-white hover:bg-blue-700">Request a Demo</Button>
        </div>
      </section>

      {/* ================= Ti POS Section ================= */}
      <section id="ti-pos" className="py-20 px-6">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">Ti POS</h2>
          <div className="bg-gray-200 text-black rounded-lg p-6 mb-6">[Mock Image: Ti POS — replace with <img/>]</div>
          <p className="text-lg mb-8 max-w-3xl mx-auto">
            Minimal yet complete POS for small businesses and mobile vendors.
          </p>
          <div className="grid md:grid-cols-3 gap-6 text-left">
            {["Quick checkout & offline-ready","Simple inventory & price lists","Receipts: print, PDF, or email","Works on low-cost devices","User roles with PIN","Basic reports & daily summaries"].map((item, i) => (
              <Card key={i} className="shadow-md">
                <CardContent className="flex items-start gap-3 p-4">
                  <CheckCircle className="text-blue-600 mt-1" size={20} />
                  <span>{item}</span>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ================= ATA-Center Section ================= */}
      <section id="ata-center" className="py-20 px-6 bg-gray-50">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">ATA-Center (Remote Access & Assistance)</h2>
          <div className="bg-gray-200 text-black rounded-lg p-6 mb-6">[Mock Image: ATA-Center — replace with <img/>]</div>
          <p className="text-lg mb-8 max-w-3xl mx-auto">
            MeshCentral-powered remote support to access, monitor, and assist devices securely.
          </p>
          <div className="grid md:grid-cols-3 gap-6 text-left">
            {["Secure remote desktop/control","Device groups & tags","Session recording & audit","File transfer & terminal","Multi-tenant ready","Alerts & basic automation"].map((item, i) => (
              <Card key={i} className="shadow-md">
                <CardContent className="flex items-start gap-3 p-4">
                  <CheckCircle className="text-blue-600 mt-1" size={20} />
                  <span>{item}</span>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ================= Sidnage Section ================= */}
      <section id="sidnage" className="py-20 px-6">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">Sidnage (Digital Signage)</h2>
          <div className="bg-gray-200 text-black rounded-lg p-6 mb-6">[Mock Image: Sidnage — replace with <img/>]</div>
          <p className="text-lg mb-8 max-w-3xl mx-auto">
            Display promos, info slides, menus, and service highlights across one or many screens.
          </p>
          <div className="grid md:grid-cols-3 gap-6 text-left">
            {["Playlist-based slideshows","Schedule by time/day","Mixed media: images & posts","Multi-screen layouts","Remote updates","Template presets for menus"].map((item, i) => (
              <Card key={i} className="shadow-md">
                <CardContent className="flex items-start gap-3 p-4">
                  <CheckCircle className="text-blue-600 mt-1" size={20} />
                  <span>{item}</span>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ================= Services ================= */}
      <section id="services" className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">Our Services</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: "Support & Maintenance",
                items: [
                  "Network setup, monitoring, optimization",
                  "Fire alarm & detection systems",
                  "Video surveillance",
                  "System repair & ongoing support",
                ],
                icon: Server,
              },
              {
                title: "Software Support",
                items: [
                  "Technical support (CRE, OB POS, ASI Front Desk)",
                  "Accounting systems (QuickBooks, ACCPAC)",
                  "Antivirus & firewall protection",
                ],
                icon: Laptop,
              },
              {
                title: "Network Solutions",
                items: [
                  "IP Telephony",
                  "Structured cabling (UTP)",
                  "Point-to-Point & Multipoint connections",
                ],
                icon: Phone,
              },
              {
                title: "Web Services",
                items: [
                  "Domain registration & hosting",
                  "Custom website & mobile app development",
                ],
                icon: Globe,
              },
              {
                title: "Defense & Surveillance",
                items: [
                  "Security camera systems",
                  "Perimeter security",
                  "Access control & attendance systems",
                ],
                icon: Shield,
              },
              {
                title: "Other Services",
                items: [
                  "Sale of IT equipment",
                  "GPS tracking (vehicles & individuals)",
                  "Tailored R&D solutions",
                ],
                icon: CheckCircle,
              },
            ].map((service, i) => (
              <Card key={i} className="shadow-md">
                <CardContent className="p-6">
                  <service.icon className="text-blue-600 mb-3" size={28} />
                  <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
                  <ul className="list-disc ml-5 space-y-1">
                    {service.items.map((item, j) => (
                      <li key={j}>{item}</li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ================= Why Choose Us ================= */}
      <section className="py-20 px-6 bg-gray-100 text-center">
        <h2 className="text-3xl font-bold mb-8">Why Choose Atalou Microsystems</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
          {["Trusted local & international IT provider","Multi-industry expertise","Dedicated support & training","Innovative & scalable technology"].map((reason, i) => (
            <Card key={i} className="shadow-md">
              <CardContent className="p-6 font-medium">{reason}</CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* ================= CTA ================= */}
      <section className="py-20 px-6 bg-blue-700 text-white text-center">
        <h2 className="text-3xl font-bold mb-4">Ready to Upgrade Your Business?</h2>
        <p className="text-lg mb-6">Let’s design the right solution for you — from POS to IT infrastructure.</p>
        <div className="flex justify-center gap-4">
          <Button size="lg" className="bg-white text-blue-600 hover:bg-gray-200">Get Started</Button>
          <Button size="lg" variant="secondary" className="bg-yellow-400 text-black hover:bg-yellow-500">Contact Sales</Button>
        </div>
      </section>

      {/* ================= Footer ================= */}
      <footer className="bg-gray-900 text-gray-300 py-10 px-6 text-center">
        <p className="font-bold text-white text-xl mb-2">Atalou Microsystems S.A</p>
        <p className="mb-4">Smart IT & POS Solutions for Businesses</p>
        <div className="flex justify-center gap-6 mb-4">
          <a href="#services" className="hover:text-white">Services</a>
          <a href="#ata-pos" className="hover:text-white">ATA POS</a>
          <a href="#" className="hover:text-white">Contact</a>
        </div>
        <p className="text-sm">© {new Date().getFullYear()} Atalou Microsystems. All rights reserved.</p>
      </footer>
    </div>
  );
}