import { Metadata } from "next";
import { experiences } from "@/lib/constants";
import { generatePageMetadata } from "@/lib/metadata";
import { generateTouristTripSchema, generateBreadcrumbSchema } from "@/lib/structured-data";
import { ExperienceHero } from "@/components/experiences/ExperienceHero";
import { Itinerary } from "@/components/experiences/Itinerary";
import { BookingWidget } from "@/components/experiences/BookingWidget";
import { Testimonials } from "@/components/home/Testimonials";
import { FinalCTA } from "@/components/home/FinalCTA";

const experience = experiences.find((e) => e.slug === "first-light")!;

export const metadata: Metadata = generatePageMetadata({
  title: "First Light — The Asian Side Breakfast Experience",
  description: "Istanbul's breakfast culture is legendary. The best of it happens on the Asian side. Serpme kahvaltı, Kadıköy market, Turkish coffee ritual.",
  path: "/experiences/first-light",
});

export default function FirstLightPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(generateTouristTripSchema(experience)) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateBreadcrumbSchema([
            { name: "Home", url: "https://theanatolianedit.com" },
            { name: "Experiences", url: "https://theanatolianedit.com/experiences" },
            { name: "First Light", url: "https://theanatolianedit.com/experiences/first-light" },
          ])),
        }}
      />

      <ExperienceHero experience={experience} />

      <section className="py-12 section-padding">
        <div className="max-w-4xl mx-auto">
          <div className="flex flex-wrap justify-center gap-4">
            {experience.highlights.map((h, i) => (
              <div key={i} className="inline-flex items-center gap-2 bg-warm-sand rounded-full px-5 py-3 text-sm text-deep-nazar font-medium">
                <span className="text-lg">{h.icon}</span>
                {h.text}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-12 section-padding bg-warm-sand">
        <div className="max-w-3xl mx-auto">
          <h2 className="font-display text-2xl md:text-3xl font-bold text-deep-nazar mb-8 text-center">What&apos;s Included</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {experience.includes.map((item, i) => (
              <div key={i} className="flex items-start gap-3 bg-white rounded-2xl p-4">
                <span className="text-bosphorus mt-0.5">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </span>
                <span className="text-deep-nazar/80 text-sm">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {experience.itinerary && <Itinerary stops={experience.itinerary} />}
      <BookingWidget experience={experience} />
      <Testimonials />
      <FinalCTA />
    </>
  );
}