import Image from "next/image";
import Link from "next/link";
import { ServicePage, COMPANY_PHONE, WHATSAPP_URL } from "@/data/services";
import CTASection from "./CTASection";
import RelatedPages from "./RelatedPages";
import RegionsSection from "./RegionsSection";

interface ServicePageTemplateProps {
  service: ServicePage;
}

export default function ServicePageTemplate({
  service,
}: ServicePageTemplateProps) {
  const imageSlug = service.imageSourceSlug || service.slug;
  const images = Array.from(
    { length: service.imageCount },
    (_, i) => `/images/informacoes/${imageSlug}-0${i + 1}.webp`,
  );

  return (
    <>
      {/* Breadcrumb */}
      <nav className="bg-gray-light py-3 px-4" aria-label="Breadcrumb">
        <div className="max-w-5xl mx-auto">
          <ol
            className="flex items-center gap-2 text-sm text-text-light"
            itemScope
            itemType="https://schema.org/BreadcrumbList">
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <Link
                href="/"
                itemProp="item"
                className="hover:text-primary transition-colors">
                <span itemProp="name">Home</span>
              </Link>
              <meta itemProp="position" content="1" />
            </li>
            <li aria-hidden="true">❱</li>
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <Link
                href="/informacoes"
                itemProp="item"
                className="hover:text-primary transition-colors">
                <span itemProp="name">Informações</span>
              </Link>
              <meta itemProp="position" content="2" />
            </li>
            <li aria-hidden="true">❱</li>
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <span itemProp="name" className="text-primary font-medium">
                {service.title}
              </span>
              <meta itemProp="position" content="3" />
            </li>
          </ol>
        </div>
      </nav>

      {/* Image gallery */}
      {images.length > 0 && (
        <section className="py-8 px-4" aria-label="Galeria de imagens">
          <div className="max-w-5xl mx-auto">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {images.map((src, i) => (
                <div
                  key={i}
                  className="relative aspect-[4/3] rounded-lg overflow-hidden shadow-md bg-gray-200">
                  <Image
                    src={src}
                    alt={`${service.title} - Imagem ${i + 1}`}
                    fill
                    sizes="(max-width: 768px) 50vw, 25vw"
                    className="object-cover hover:scale-105 transition-transform duration-300"
                    priority={i < 2}
                    loading={i < 2 ? "eager" : "lazy"}
                  />
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Content sections */}
      <article className="py-8 px-4">
        <div className="max-w-4xl mx-auto prose prose-lg">
          {service.sections.map((section, i) => (
            <section key={i} className="mb-10">
              <h2 className="text-xl md:text-2xl font-bold text-primary mb-4">
                {section.heading}
              </h2>
              <p className="text-text leading-relaxed">{section.content}</p>
            </section>
          ))}
        </div>
      </article>

      {/* CTA */}
      <CTASection />

      {/* Phone contact */}
      <section
        className="py-8 px-4 text-center bg-white"
        aria-label="Contato por telefone">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-xl font-bold text-primary mb-2">
            Entre em contato
          </h2>
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="text-2xl font-bold text-secondary hover:text-secondary-dark transition-colors">
            {COMPANY_PHONE}
          </a>
        </div>
      </section>

      {/* Related pages */}
      <RelatedPages slugs={service.relatedSlugs} />

      {/* Regions */}
      <RegionsSection serviceTitle={service.title} />
    </>
  );
}