"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import * as LucideIcons from "lucide-react";
import {
    ArrowRight,
    Layers,
    Search,
    Clapperboard,
    Camera,
    Zap
} from "lucide-react";


const processSteps = [
    { icon: Search, title: "Analiz", desc: "İşletmenizi ve hedef kitlenizi analiz ediyoruz." },
    { icon: Clapperboard, title: "Strateji", desc: "Size özel dijital strateji planlıyoruz." },
    { icon: Camera, title: "Uygulama", desc: "Çekim, tasarım ve kampanya yönetimi." },
    { icon: Zap, title: "Raporlama", desc: "Sonuçları ölçüyor ve optimize ediyoruz." }
];

export default function ServicesClient({ services: initialServices, locations: initialLocations }: { services: any[], locations?: any[] }) {
    const [services] = useState<any[]>(initialServices);
    const [locations] = useState<any[]>(initialLocations || []);

    const DynamicIcon = ({ name, className }: { name: string, className?: string }) => {
        const IconComponent = (LucideIcons as any)[name] || Layers;
        return <IconComponent className={className} />;
    };

    return (
        <main className="min-h-screen bg-[#f5f5f0] text-black pt-24">

            {/* Hero Section */}
            <section className="pt-24 pb-16 px-6 md:px-12 border-b border-black/10">
                <div className="max-w-7xl mx-auto">
                    <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Hizmetlerimiz</span>
                    <h1 className="editorial-headline text-4xl md:text-6xl lg:text-[5.5rem] text-black reveal opacity-0 uppercase">
                        Drone · Video <br /> <span className="text-primary">Reklam · Dijital</span>
                    </h1>
                    <p className="text-black/40 text-[14px] max-w-2xl leading-relaxed mt-10 reveal reveal-delayed-1 opacity-0">
                        Profesyonel drone çekimlerinden sosyal medya yönetimine, Google reklamlarından web tasarıma — işletmenizin dijital dünyada parlaması için ihtiyacınız olan her şey burada.
                    </p>
                </div>
            </section>

            {/* Services Grid - Editorial Bento */}
            <section className="py-24 px-6 md:px-12 border-b border-black/10">
                <div className="max-w-7xl mx-auto">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-black/10">
                        {services.map((item) => (
                            <div key={item.id} className="p-10 border-r border-b border-black/10 relative group hover:bg-black/[0.01] transition-colors overflow-hidden flex flex-col justify-between min-h-[350px]">
                                <div>
                                    <div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary mb-8">
                                        <DynamicIcon name={item.icon_name} className="w-5 h-5" />
                                    </div>
                                    <h3 className="editorial-headline text-2xl text-black mb-4 uppercase">{item.title}</h3>
                                    <p className="text-[12px] text-black/40 leading-relaxed font-medium mb-8">
                                        {item.description}
                                    </p>
                                </div>
                                <ul className="space-y-3">
                                    {(item.sub_services || []).slice(0, 3).map((sub: string) => (
                                        <li key={sub} className="flex items-center gap-3 text-[9px] font-bold tracking-widest text-black/20 uppercase">
                                            <div className="w-1 h-1 rounded-full bg-primary" />
                                            {sub}
                                        </li>
                                    ))}
                                </ul>

                                {/* Subtle diagonal on hover */}
                                <div className="absolute top-0 right-0 w-16 h-16 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <div className="absolute top-0 right-0 w-px h-24 bg-black/5 rotate-[-45deg] origin-top-right" />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* The Process - Editorial Layout */}
            <section className="py-24 px-6 md:px-12 border-b border-black/10">
                <div className="max-w-7xl mx-auto">
                    <div className="mb-20">
                        <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">İş Akışımız</span>
                        <h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Süreç Nasıl İlerler?</h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-4 border-t border-black/10">
                        {processSteps.map((step, idx) => (
                            <div key={step.title} className="py-12 md:px-8 border-b md:border-b-0 md:border-r border-black/10 last:border-r-0 group">
                                <div className="text-4xl font-black text-black/5 mb-8 group-hover:text-primary/20 transition-colors">0{idx + 1}</div>
                                <div className="w-8 h-8 border border-black/10 flex items-center justify-center text-primary mb-6">
                                    <step.icon className="w-4 h-4" />
                                </div>
                                <h3 className="editorial-headline text-lg text-black mb-4 uppercase">{step.title}</h3>
                                <p className="text-[12px] text-black/40 leading-relaxed">{step.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Locations Section (pSEO Hub) */}
            {locations.length > 0 && (
                <section className="py-24 px-6 md:px-12 border-b border-black/10 bg-white/30">
                    <div className="max-w-7xl mx-auto">
                        <div className="mb-16">
                            <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Operasyon Bölgelerimiz</span>
                            <h2 className="editorial-headline text-3xl md:text-5xl text-black uppercase">Muğla'nın Her <br /><span className="text-primary">Noktasındayız.</span></h2>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-12 gap-y-16">
                            {locations.map((loc) => (
                                <div key={loc.id} className="space-y-6">
                                    <h3 className="text-lg font-bold uppercase tracking-widest border-b border-black/10 pb-2">{loc.name}</h3>
                                    <ul className="space-y-3">
                                        {services.slice(0, 3).map((service) => (
                                            <li key={service.id}>
                                                <Link
                                                    href={`/services/${service.slug}/${loc.slug}`}
                                                    className="text-[11px] text-black/40 hover:text-primary transition-colors flex items-center justify-between group"
                                                >
                                                    {loc.name} {service.title}
                                                    <ArrowRight className="w-2 h-2 opacity-0 group-hover:opacity-100 transition-all -translate-x-1 group-hover:translate-x-0" />
                                                </Link>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            {/* CTA Section */}
            <section className="py-24 px-6 text-center">
                <div className="max-w-4xl mx-auto space-y-12">
                    <h2 className="editorial-headline text-4xl md:text-6xl text-black uppercase leading-tight">
                        Sıradışı Bir Şeyler <br /> <span className="text-primary">Yaratmaya Hazır Mısınız?</span>
                    </h2>
                    <p className="text-black/40 text-[13px] tracking-[0.1em] max-w-xl mx-auto">
                        Drone çekimi, sosyal medya yönetimi veya dijital reklam — ne ihtiyacınız varsa, birlikte çözüm üretelim.
                    </p>
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
                        <Link href="/contact" className="button-primary px-10">
                            Hemen Başlayalım
                        </Link>
                        <Link href="/works" className="button-secondary px-10">
                            Portfolyomuz
                        </Link>
                    </div>
                </div>
            </section>

        </main>
    );
}