import { Metadata } from "next";
import { experiences } from "@/lib/constants";
import { generatePageMetadata } from "@/lib/metadata";
import { generateBreadcrumbSchema } from "@/lib/structured-data";
import { ExperienceCard } from "@/components/experiences/ExperienceCard";
import { SectionHeader } from "@/components/shared/SectionHeader";
import { Button } from "@/components/shared/Button";
import { FinalCTA } from "@/components/home/FinalCTA";

export const metadata: Metadata = generatePageMetadata({
  title: "Experiences — Curated Tours on Istanbul's Asian Side",
  description:
    "Choose your edit: half-day coastal tours, legendary Turkish breakfasts, meyhane evenings, or the full all-day immersion. Small groups, max 8 people.",
  path: "/experiences",
});

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

      <section className="pt-28 md:pt-36 pb-16 section-padding">
        <div className="max-w-7xl mx-auto">
          <SectionHeader
            eyebrow="Our Experiences"
            title="Choose Your Edit"
            subtitle="Every experience is handcrafted, small-group, and designed around the places we'd take our own friends."
          />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {experiences.map((exp, i) => (
              <ExperienceCard key={exp.slug} experience={exp} index={i} />
            ))}
          </div>

          <div className="mt-16 bg-gradient-to-r from-deep-nazar to-deep-nazar/90 rounded-3xl p-8 md:p-12 text-white text-center">
            <h3 className="font-display text-2xl md:text-3xl font-bold mb-3">
              Private Editions
            </h3>
            <p className="text-white/80 text-lg mb-6 max-w-2xl mx-auto">
              Want The Anatolian Edit all to yourself? Every experience is
              available as a private edition for couples, families, or groups of up to 12.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button href="/contact" variant="coral" size="lg">
                Inquire About Private Experiences
              </Button>
              <span className="text-white/60 text-sm">Starting from &euro;250</span>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
    </>
  );
}