import Banner from "@/components/banner";
import { ServiceGallery } from "./_components/service-gallery";
import { fetchServicesImage, getServiceById } from "@/lib/api";

interface ServiceDetailPageProps {
  params: {
    id: string;
  };
}

interface Features {
  name: string;
  description: string;
}

interface Benefits {
  name: string;
  description: string;
}

interface Service {
  name: string;
  description: string;
  images: string[];
  features: Features[];
  benefits: Benefits[];
}

const ServiceDetailPage = async ({ params }: ServiceDetailPageProps) => {
  const id = params.id;
  const service = (await getServiceById(Number.parseInt(id))) as Service;
  const resp = await fetchServicesImage();

  if (!service) {
    return <div>Service not found</div>;
  }

  return (
    <>
      <Banner imageSrc={resp.image_url} height={400}>
        <div className="text-center text-white">
          <h1 className="text-5xl font-bold mb-4">{service.name}</h1>
        </div>
      </Banner>

      <div className="bg-white py-16">
        <div className="container max-w-7xl mx-auto px-4">
          {/* Image Gallery Section */}
          <section className="mb-16">
            <ServiceGallery images={service.images} />
          </section>

          {/* Overview Section */}
          <section className="mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-8">Overview</h2>
            <div className="prose prose-lg text-gray-600 max-w-none">
              <p>{service.description}</p>
            </div>
          </section>

          <section className="mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-8">
              Key Features
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {service.features?.map((feature, index) => (
                <div
                  key={index}
                  className="bg-gray-50 p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
                >
                  <h3 className="text-xl font-semibold text-gray-900 mb-3">
                    {feature.name}
                  </h3>
                  <p className="text-gray-600">{feature.description}</p>
                </div>
              ))}
            </div>
          </section>

          {/* Benefits Section */}
          <section className="mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-8">Benefits</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {service.benefits?.map((benefit, index) => (
                <div
                  key={index}
                  className="flex items-start space-x-4 bg-gray-50 p-6 rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
                >
                  <div className="flex-shrink-0 w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white font-bold">
                    {index + 1}
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                      {benefit.name}
                    </h3>
                    <p className="text-gray-600">{benefit.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* CTA Section */}
          <section className="text-center">
            <a
              href="/contact"
              className="inline-flex items-center space-x-2 bg-red-600 hover:bg-orange-600 text-white px-8 py-3 rounded-lg transition-colors"
            >
              <span>Contact Us</span>
            </a>
          </section>
        </div>
      </div>
    </>
  );
};

export default ServiceDetailPage;