import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { InquiryForm } from "@/components/inquiry-form"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import { CheckCircle, ArrowRight } from "lucide-react"
import Link from "next/link"

const serviceDetails = [
  {
    //icon: Code2,
    image: "/software-development-coding-004.jpg",
    title: "Software Development",
    description: "Custom software solutions tailored to your business requirements",
    details: [
      "Web application development",
      "Mobile app development",
      "Enterprise software solutions",
      "API development and integration",
      "Legacy system modernization",
      "Full-stack development",
    ],
  },
  {
    //icon: Shield,
    image: "/cctv01.jpg",
    title: "CCTV Security Installation",
    description: "Comprehensive surveillance solutions for your premises",
    details: [
      "CCTV system design and installation",
      "HD and 4K camera systems",
      "Remote monitoring setup",
      "Access control systems",
      "System maintenance and support",
      "Integration with existing systems",
    ],
  },
  {
    //icon: Zap,
    image: "/software-integration01.jpg",
    title: "DevOps Deployment Pattern",
    description: "Streamlined deployment and infrastructure management",
    details: [
      "CI/CD pipeline setup",
      "Container orchestration (Docker, Kubernetes)",
      "Cloud infrastructure management",
      "Automated testing and deployment",
      "Performance monitoring",
      "Disaster recovery planning",
    ],
  },
  {
    //icon: Network,
    image: "/networking06.jpg",
    title: "System Networking",
    description: "Robust network infrastructure for optimal connectivity",
    details: [
      "Network design and implementation",
      "LAN and WAN setup",
      "Firewall and security configuration",
      "Network troubleshooting and maintenance",
      "VPN and remote access setup",
      "Network performance optimization",
    ],
  },
  {
    //icon: Link2,
    image: "/software-integration01.jpg",
    title: "Application Integration",
    description: "Seamless connectivity between your business systems",
    details: [
      "ERP integration",
      "API integration services",
      "Data synchronization",
      "Third-party service integration",
      "Middleware solutions",
      "Integration testing and validation",
    ],
  },
]

export default function ServicesPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navigation />

      {/* Hero Section */}
      <section className="pt-32 pb-12 bg-gradient-to-br from-primary/10 to-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6">
              Our <span className="text-primary">Services</span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Comprehensive ICT solutions designed to drive your business forward
            </p>
          </div>
        </div>
      </section>

{/* Services Detail */}
<section className="py-16 bg-background">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="space-y-16">
      {serviceDetails.map((service, index) => {
        const isEven = index % 2 === 0;
        return (
          <div key={service.title}>
            <div
              className={`grid md:grid-cols-2 gap-12 items-center ${
                isEven ? "" : "md:flex-row-reverse"
              }`}
            >
              {/* LEFT: Icon + Text */}
              <div>
                <div className="w-16 h-16 rounded-xl relative mb-6 overflow-hidden shadow-sm border border-primary/30">
                  <Image
                    src={service.image || "/placeholder.svg"}
                    alt={service.title}
                    fill
                    className="object-cover"
                    unoptimized
                  />
                </div>

                <h2 className="text-4xl font-bold text-foreground mb-4">
                  {service.title}
                </h2>
                <p className="text-lg text-muted-foreground mb-8">
                  {service.description}
                </p>

                <div className="space-y-3 mb-8">
                  {service.details.map((detail) => (
                    <div key={detail} className="flex items-start gap-3">
                      <CheckCircle className="w-5 h-5 text-primary mt-0.5" />
                      <span className="text-foreground">{detail}</span>
                    </div>
                  ))}
                </div>

                <Link href="/contact">
                  <Button className="bg-primary hover:bg-primary/90 text-white h-12 px-6">
                    Get Started <ArrowRight className="ml-2" size={20} />
                  </Button>
                </Link>
              </div>

              {/* RIGHT: Big Image */}
              <div>
                <div className="relative h-96 rounded-2xl overflow-hidden bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/20">
                  <Image
                    src={service.image || "/placeholder.svg"}
                    alt={service.title}
                    fill
                    className="object-cover rounded-2xl"
                    unoptimized
                  />
                </div>
              </div>
            </div>

            {index < serviceDetails.length - 1 && (
              <div className="my-16 border-t border-border" />
            )}
          </div>
        );
      })}
    </div>
  </div>
</section>

      {/* CTA Section */}
      <section className="py-16 bg-primary/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12 items-start">
            <div>
              <h2 className="text-4xl font-bold text-foreground mb-6">Ready to Transform Your Business?</h2>
              <p className="text-lg text-muted-foreground mb-6">
                Let our expert team help you implement the perfect ICT solution for your organization.
              </p>
              <ul className="space-y-4">
                <li className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-foreground">Free consultation and requirements analysis</span>
                </li>
                <li className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-foreground">Customized solutions for your unique needs</span>
                </li>
                <li className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-foreground">Ongoing support and maintenance</span>
                </li>
              </ul>
            </div>
            <InquiryForm />
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}