"use client"

import { useRef } from "react"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import {
  Wrench,
  Factory,
  HardHat,
  Hammer,
  Settings,
  Gauge,
  Cog,
  ArrowRight,
} from "lucide-react"
import { Button } from "@/components/ui/button"

const services = [
  {
    title: "Mekanik Montaj",
    description: "Döner ekipmanlar, pompalar, kompresörler ve ısı eşanjörleri dahil komple mekanik sistem kurulumu.",
    icon: Wrench,
    features: ["Döner Ekipmanlar", "Pompa ve Kompresörler", "Isı Eşanjörleri"],
    href: "/services/mekanik-montaj",
  },
  {
    title: "Endüstriyel Borulama",
    description: "Yüksek basınçlı boru sistemleri, proses hatları ve yardımcı borulama, sertifikalı kaynak prosedürleri ile.",
    icon: Gauge,
    features: ["Proses Borulaması", "Yüksek Basınç Sistemleri", "Yardımcı Hatlar"],
    href: "/services/endustriyel-borulama",
  },
  {
    title: "Çelik Konstrüksiyon",
    description: "Endüstriyel binalar, platformlar ve destek yapıları için yapısal çelik imalat ve montaj hizmetleri.",
    icon: Factory,
    features: ["Yapısal Çelik", "Platformlar", "Destek Yapıları"],
    href: "/services/celik-konstruksiyon",
  },
  {
    title: "Tank İmalatı ve Montajı",
    description: "Depolama tankları, basınçlı kaplar ve proses ekipmanlarının tasarım, imalat ve montajı.",
    icon: Cog,
    features: ["Depolama Tankları", "Basınçlı Kaplar", "Proses Ekipmanları"],
    href: "/services/tank-imalati-ve-montaji",
  },
  {
    title: "Kaynak Hizmetleri",
    description: "Kritik endüstriyel uygulamalar için GTAW, SMAW, FCAW dahil sertifikalı kaynak hizmetleri.",
    icon: Hammer,
    features: ["GTAW/TIG", "SMAW/MMA", "FCAW/GMAW"],
    href: "/services/kaynak-hizmetleri",
  },
  {
    title: "Endüstriyel Bakım",
    description: "Ekipman güvenilirliğini ve tesis verimliliğini maksimize etmek için kapsamlı bakım programları.",
    icon: Settings,
    features: ["Önleyici Bakım", "Düzeltici Müdahaleler", "Duruş Projeleri"],
    href: "/services/endustriyel-bakim",
  },
]

export function ServicesSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

  return (
    <section id="services" className="py-24 lg:py-32 bg-background">
      <div className="container mx-auto px-4 lg:px-6">
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 40 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-16 lg:mb-20"
        >
          <span className="text-primary text-sm font-semibold tracking-widest uppercase">Hizmetlerimiz</span>
          <h2 className="text-3xl lg:text-5xl font-bold text-foreground mt-4 mb-6 text-balance">
            Kapsamlı Endüstriyel Çözümler
          </h2>
          <p className="text-muted-foreground text-lg max-w-3xl mx-auto">
            Konseptten devreye almaya kadar, en yüksek kalite ve güvenlik standartlarıyla uçtan uca endüstriyel mühendislik hizmetleri sunuyoruz.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <motion.div
              key={service.title}
              initial={{ opacity: 0, y: 40 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              className="group"
            >
              <div className="h-full bg-card border border-border rounded-lg p-6 transition-all duration-300 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1">
                <div className="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:scale-110 transition-all duration-300">
                  <service.icon className="h-7 w-7 text-primary group-hover:text-primary-foreground transition-colors" />
                </div>
                
                <h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors">
                  {service.title}
                </h3>
                
                <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
                  {service.description}
                </p>
                
                <ul className="space-y-2 mb-6">
                  {service.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                      <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                      {feature}
                    </li>
                  ))}
                </ul>
                
                <Button
                  variant="ghost"
                  className="p-0 h-auto font-semibold text-primary hover:text-primary/80 hover:bg-transparent group/btn"
                  asChild
                >
                  <Link href={service.href}>
                    Detaylı Bilgi
                    <ArrowRight className="h-4 w-4 ml-2 group-hover/btn:translate-x-1 transition-transform" />
                  </Link>
                </Button>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}