"use client";

import { useEffect, useState } from "react";
import { getFeaturedServices } from "@/app/actions";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";

export default function ServicesGrid() {
    const [services, setServices] = useState<any[]>([]);

    useEffect(() => {
        async function fetchServices() {
            const data = await getFeaturedServices();
            if (data && data.length > 0) setServices(data);
        }
        fetchServices();
    }, []);

    return (
        <section className="border-t border-black/10">
            <div className="max-w-7xl mx-auto px-6 md:px-12">
                {/* Grid - Editorial bento layout */}
                <div className="grid grid-cols-1 md:grid-cols-12 border-b border-black/10">

                    {/* Left large cell with image */}
                    <motion.div 
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 1 }}
                        className="md:col-span-4 border-b md:border-b-0 md:border-r border-black/10 relative overflow-hidden group"
                    >
                        <div className="relative aspect-square md:aspect-auto md:h-full min-h-[400px]">
                            <Image
                                src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?q=80&w=800"
                                alt="Drone çekimi"
                                fill
                                className="object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105"
                            />
                        </div>
                    </motion.div>

                    {/* Right content area */}
                    <div className="md:col-span-8 grid grid-cols-1 md:grid-cols-2">
                        {/* Top-left cell: Services list */}
                        <motion.div 
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.2 }}
                            className="p-8 md:p-12 border-b border-r border-black/10 flex flex-col justify-between min-h-[200px]"
                        >
                            <div>
                                <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Hizmetler</span>
                                <div className="space-y-2">
                                    {["Sosyal Medya Yönetimi", "Drone Çekimi", "Video Prodüksiyon", "Reklam Yönetimi", "SEO"].map((item) => (
                                        <div key={item} className="text-[12px] text-black/60 hover:text-primary transition-colors cursor-pointer">
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </motion.div>

                        {/* Top-right cell: Capabilities */}
                        <motion.div 
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.4 }}
                            className="p-8 md:p-12 border-b border-black/10 flex flex-col justify-between min-h-[200px]"
                        >
                            <div>
                                <span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Çözümler</span>
                                <div className="space-y-2">
                                    {["Fotoğraf Çekimi", "Web Tasarım", "Otel Tanıtım", "Düğün Çekimi", "İçerik Üretimi"].map((item) => (
                                        <div key={item} className="text-[12px] text-black/60 hover:text-primary transition-colors cursor-pointer">
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </motion.div>

                        {/* Bottom-left cell with diagonal */}
                        <motion.div 
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.6 }}
                            className="p-8 md:p-12 border-r border-black/10 relative cell-diagonal min-h-[200px] flex items-end"
                        >
                            <h3 className="editorial-headline text-2xl md:text-3xl text-black uppercase">
                                Profesyonel<br />
                                Prodüksiyon
                            </h3>
                        </motion.div>

                        {/* Bottom-right cell */}
                        <motion.div 
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.8 }}
                            className="p-8 md:p-12 relative cell-diagonal min-h-[200px] flex items-end"
                        >
                            <h3 className="editorial-headline text-2xl md:text-3xl text-black uppercase">
                                Dijital<br />
                                Pazarlama
                            </h3>
                        </motion.div>
                    </div>
                </div>

                {/* Description row */}
                <div className="py-8 grid grid-cols-1 md:grid-cols-12 gap-8">
                    <motion.div 
                        initial={{ opacity: 0, x: -20 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        className="md:col-span-4 flex items-center"
                    >
                        <p className="text-[12px] text-black/50 leading-relaxed">
                            Drone çekimlerinden sosyal medya yönetimine, markanızın dijitaldeki her ihtiyacını karşılıyoruz.
                        </p>
                    </motion.div>
                    <motion.div 
                        initial={{ opacity: 0, x: 20 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        className="md:col-span-4 md:col-start-9 flex items-center md:justify-end"
                    >
                        <Link href="/services" className="button-primary group">
                            Tüm Hizmetler
                            <span className="group-hover:translate-x-1 transition-transform">→</span>
                        </Link>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}