import React, { ReactElement } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { mdiArrowLeft, mdiChevronRight, mdiCheckCircleOutline } from '@mdi/js';
import LayoutGuest from '../../layouts/Guest';
import { getPageTitle } from '../../config';
import Navbar from '../../components/Beka/Navbar';
import Footer from '../../components/Beka/Footer';
import WhatsAppButton from '../../components/Beka/WhatsAppButton';
import PageHero from '../../components/Beka/PageHero';
import ScrollReveal from '../../components/Beka/ScrollReveal';
import BaseIcon from '../../components/BaseIcon';
import { bekaServices } from '../../data/bekaServices';

export default function ServiceDetail() {
  const router = useRouter();
  const { slug } = router.query;

  const service = bekaServices.find((s) => s.slug === slug);

  if (!service && router.isReady) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-4xl font-black mb-4">Hizmet Bulunamadı</h1>
          <Link href="/hizmetler" className="text-amber-600 font-bold hover:underline">
            Tüm Hizmetlerimize Geri Dön
          </Link>
        </div>
      </div>
    );
  }

  if (!service) return null;

  return (
    <div className="min-h-screen bg-white font-sans selection:bg-amber-600/30 selection:text-amber-900">
      <Head>
        <title>{getPageTitle(`${service.title} | Beka Kaplama`)}</title>
        <meta name="description" content={service.shortDescription} />
      </Head>

      <Navbar />
      
      <main className="pt-0">
        <PageHero 
          title={service.title} 
          subtitle="Hizmet Detayları" 
          image={service.image}
        />

        {/* Breadcrumb */}
        <div className="bg-gray-50 border-b border-gray-100">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav className="flex items-center space-x-2 text-sm font-bold text-gray-400 font-sans">
              <Link href="/" className="hover:text-amber-600 transition-colors">Ana Sayfa</Link>
              <BaseIcon path={mdiChevronRight} size={16} />
              <Link href="/hizmetler" className="hover:text-amber-600 transition-colors">Hizmetler</Link>
              <BaseIcon path={mdiChevronRight} size={16} />
              <span className="text-amber-600">{service.title}</span>
            </nav>
          </div>
        </div>

        <section className="py-24">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-start">
              {/* Left Side: Content */}
              <ScrollReveal animation="fade-in-left">
                <div>
                  <h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 font-sans">Neler Yapıyoruz?</h2>
                  <h3 className="text-4xl md:text-5xl font-black text-gray-900 mb-8 leading-tight font-sans">
                    {service.title} <span className="text-amber-600 italic font-serif">Çözümlerimiz</span>
                  </h3>
                  
                  <div className="prose prose-lg text-gray-500 mb-12 font-body">
                    <p className="leading-relaxed mb-6">
                      {service.description}
                    </p>
                  </div>

                  <div className="space-y-4 mb-12">
                    {service.details.map((detail, idx) => (
                      <div key={idx} className="flex items-center space-x-4 p-4 bg-gray-50 rounded-2xl border border-gray-100 font-sans">
                        <div className="flex-shrink-0 w-8 h-8 bg-amber-600/10 rounded-full flex items-center justify-center text-amber-600">
                          <BaseIcon path={mdiCheckCircleOutline} size={20} />
                        </div>
                        <span className="font-bold text-gray-700">{detail}</span>
                      </div>
                    ))}
                  </div>

                  <Link 
                    href="/iletisim" 
                    className="inline-flex items-center space-x-4 px-10 py-5 bg-gray-900 text-white rounded-2xl font-black hover:bg-amber-600 transition-all shadow-xl shadow-gray-900/20 group hover:-translate-y-1 font-sans"
                  >
                    <span>Fiyat Teklifi Alın</span>
                    <BaseIcon path={mdiArrowLeft} size={24} className="rotate-180 group-hover:translate-x-1 transition-transform" />
                  </Link>
                </div>
              </ScrollReveal>

              {/* Right Side: Visuals */}
              <ScrollReveal animation="fade-in-right" delay={200}>
                <div className="space-y-8">
                  <div className="relative group overflow-hidden rounded-[2.5rem] shadow-2xl">
                    <img 
                      src={service.image} 
                      alt={service.title} 
                      className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-gray-900/40 to-transparent"></div>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-8">
                    {service.gallery.slice(1).map((img, idx) => (
                      <div key={idx} className="relative overflow-hidden rounded-3xl shadow-lg aspect-square">
                        <img 
                          src={img} 
                          alt={`${service.title} Gallery ${idx}`} 
                          className="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
                        />
                      </div>
                    ))}
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </section>

        {/* Other Services Section */}
        <section className="py-24 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-black text-gray-900 font-sans">Diğer Hizmetlerimiz</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {bekaServices.filter(s => s.id !== service.id).slice(0, 3).map((other) => (
                <Link 
                  key={other.id} 
                  href={`/hizmet/${other.slug}`}
                  className="group bg-white p-8 rounded-3xl border border-gray-100 hover:border-amber-600 transition-all hover:shadow-xl hover:-translate-y-1"
                >
                  <div className="w-14 h-14 bg-amber-600/10 rounded-2xl flex items-center justify-center text-amber-600 mb-6 group-hover:bg-amber-600 group-hover:text-white transition-all">
                    <BaseIcon path={other.icon} size={28} />
                  </div>
                  <h4 className="text-xl font-black text-gray-900 mb-2 font-sans">{other.title}</h4>
                  <p className="text-gray-500 text-sm font-medium font-body line-clamp-2">{other.shortDescription}</p>
                </Link>
              ))}
            </div>
          </div>
        </section>
      </main>

      <Footer />
      <WhatsAppButton />
    </div>
  );
}

ServiceDetail.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
