
import Image from 'next/image';
import { CORE_SERVICES, APP_NAME } from '@/constants';
import { notFound } from 'next/navigation';
import type { Metadata, ResolvingMetadata } from 'next';
import { Badge } from '@/components/ui/badge';
import { CheckCircle, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

type Props = {
  params: { id: string };
};

export async function generateStaticParams() {
  return CORE_SERVICES.map((service) => ({
    id: service.id,
  }));
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const service = CORE_SERVICES.find((s) => s.id === params.id);

  if (!service) {
    return {
      title: `Service Not Found | ${APP_NAME}`,
      description: `Details for the requested service could not be found.`,
    };
  }

  return {
    title: `${service.title} | ${APP_NAME}`,
    description: service.description.substring(0, 160) + "...",
    openGraph: {
      title: `${service.title} | ${APP_NAME}`,
      description: service.description.substring(0, 160) + "...",
      // Add an image URL if services have specific images in the future
    },
  };
}

export default function ServiceDetailPage({ params }: Props) {
  const service = CORE_SERVICES.find((s) => s.id === params.id);

  if (!service) {
    notFound();
  }

  return (
    <div className="bg-background text-foreground">
      {/* Service Header Section */}
      <section className="py-12 md:py-16 bg-primary/5">
        <div className="container mx-auto px-4">
          <Button variant="outline" asChild className="mb-8 group">
            <Link href="/services">
              <ArrowLeft className="mr-2 h-4 w-4 group-hover:-translate-x-1 transition-transform" />
              Back to All Services
            </Link>
          </Button>
          <div className="flex items-start gap-4 md:gap-6">
            {service.icon && (
              <div className="p-3 bg-primary/10 rounded-lg">
                <service.icon className="h-12 w-12 md:h-16 md:w-16 text-primary" />
              </div>
            )}
            <div>
              <h1 className="text-3xl md:text-4xl font-bold text-primary mb-3 text-shadow-primary">{service.title}</h1>
              <p className="text-lg text-muted-foreground">{service.description}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Service Content Section */}
      <section className="py-12 md:py-16">
        <div className="container mx-auto px-4">
          <Card className="shadow-lg">
            <CardHeader>
              <CardTitle className="text-2xl text-primary text-shadow-primary">Service Details & Offerings</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-4">
                {service.details.map((detail, index) => (
                  <li key={index} className="flex items-start text-base">
                    <CheckCircle className="h-6 w-6 text-accent mr-3 mt-1 flex-shrink-0" />
                    <span className="text-muted-foreground">{detail}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Call to Action Section */}
      <section className="py-12 md:py-16 bg-muted/30">
        <div className="container mx-auto px-4 text-center">
            <h2 className="text-2xl font-semibold text-foreground mb-4">Interested in our {service.title.toLowerCase()}?</h2>
            <p className="text-muted-foreground mb-6 max-w-xl mx-auto">
                Let {APP_NAME} help you achieve your goals. Contact us today to learn more about how we can assist you.
            </p>
            <Button asChild size="lg">
                <Link href={`/contact?subject=${encodeURIComponent(service.title)}`}>
                    Inquire About This Service
                </Link>
            </Button>
        </div>
      </section>
    </div>
  );
}
