<template>
  <div>
    <Head :title="service.title" />

    <section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-primary-900 to-slate-800 pt-24 pb-16 md:pt-32 md:pb-20">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
          <nav class="mb-8" aria-label="Breadcrumb">
            <ol class="flex items-center justify-center space-x-2 text-white/80 text-sm">
              <li><Link :href="route('services')" class="hover:text-white transition-colors">Services</Link></li>
              <li><ChevronRight class="w-4 h-4" /></li>
              <li class="text-white font-medium">{{ service.title }}</li>
            </ol>
          </nav>

          <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-6">{{ service.title }}</h1>
          <p class="text-white/90">{{ moment(service.updated_at).format('MMM DD, YYYY') }}</p>
        </div>
      </div>
    </section>

    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-8">
          <article class="lg:col-span-3">
            <div class="mb-8 rounded-2xl overflow-hidden shadow-lg">
              <img v-if="service.image" :src="service.image" :alt="service.title" class="w-full h-64 md:h-80 lg:h-96 object-cover" loading="lazy">
              <div v-else class="w-full h-64 md:h-80 lg:h-96 bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                <ImageIcon class="w-16 h-16 text-gray-400" />
              </div>
            </div>

            <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12">
              <div class="service-details html prose prose-lg max-w-none" v-html="sanitizeHtml(service.details)"></div>
            </div>
          </article>

          <aside class="lg:col-span-1">
            <div class="bg-white rounded-2xl shadow-lg p-6">
              <h3 class="text-xl font-bold text-gray-900 mb-6">Recent Services</h3>
              <div class="space-y-4">
                <div v-for="item in recent_services" :key="item.id" class="group border-b border-gray-100 pb-4 last:border-b-0 last:pb-0">
                  <Link :href="route('services.details', item.slug)" class="block hover:bg-gray-50 -m-2 p-2 rounded-lg transition-colors">
                    <h4 class="text-sm font-semibold text-gray-900 group-hover:text-blue-600 line-clamp-2">{{ item.title }}</h4>
                    <p class="text-xs text-gray-500 mt-1">{{ moment(item.updated_at).format('MMM DD, YYYY') }}</p>
                  </Link>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Layout from '@/Shared/Landing/Layout.vue'
import { Head, Link } from '@inertiajs/vue3'
import sanitizeHtml from 'sanitize-html'
import moment from 'moment'
import { ChevronRight, ImageIcon } from 'lucide-vue-next'

export default {
  layout: Layout,
  components: {
    Head,
    Link,
    ChevronRight,
    ImageIcon,
  },
  props: {
    service: Object,
    recent_services: Array,
  },
  methods: {
    sanitizeHtml: sanitizeHtml,
  },
  created() {
    this.moment = moment
  },
}
</script>
