import { Metadata } from "next";
import Image from "next/image";
import { generatePageMetadata } from "@/lib/metadata";
import { generateBreadcrumbSchema } from "@/lib/structured-data";
import { Button } from "@/components/shared/Button";
import { FinalCTA } from "@/components/home/FinalCTA";

export const metadata: Metadata = generatePageMetadata({
  title: "About Us — The Anatolian Edit",
  description:
    "We're not guides. We're editors. We edit out the noise and show you only the good parts of Istanbul's Asian side.",
  path: "/about",
});

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

      <section className="pt-28 md:pt-36 pb-16 section-padding">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <div>
              <p className="text-bosphorus font-semibold text-sm tracking-widest uppercase mb-3">
                Our Story
              </p>
              <h1 className="font-display text-4xl md:text-5xl font-bold text-deep-nazar leading-tight mb-6">
                We Started Because <span className="text-bosphorus italic">Nobody Else Would</span>
              </h1>

              <div className="space-y-4 text-deep-nazar/70 leading-relaxed">
                <p>
                  Every year, 17 million tourists visit Istanbul. They see the Hagia Sophia.
                  They cruise the Bosphorus. They haggle at the Grand Bazaar. And then they leave.
                </p>
                <p>
                  Almost none of them cross the water.
                </p>
                <p>
                  We grew up on the Asian side. We ate breakfast in Kadıköy, studied in Moda,
                  had our first dates on Bağdat Caddesi, and watched a thousand sunsets from
                  Caddebostan. We knew, with absolute certainty, that we were living in the
                  best part of one of the world&apos;s greatest cities.
                </p>
                <p>
                  But nobody was telling that story.
                </p>
                <p>
                  So we started The Anatolian Edit. Not a tour company — an editorial service
                  for the city we love. We edit out the noise, the crowds, the clichés, and
                  the tourist traps. We show you only the good parts.
                </p>
                <p className="font-display font-semibold text-deep-nazar text-lg italic">
                  We&apos;re not guides. We&apos;re editors. And the Asian side is our best work.
                </p>
              </div>

              <div className="mt-8">
                <Button href="/experiences" variant="primary" size="lg">
                  See Our Experiences
                </Button>
              </div>
            </div>

            <div className="relative">
              <div className="relative aspect-[4/5] rounded-3xl overflow-hidden">
                <Image
                  src="/images/manifesto_coastline.jpg"
                  alt="The Anatolian Edit team on the waterfront of Istanbul's Asian side"
                  fill
                  className="object-cover"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                />
              </div>
              <div className="absolute -bottom-4 -right-4 bg-sun-yolk text-deep-nazar rounded-2xl px-5 py-3 font-display font-bold text-sm shadow-lg rotate-[3deg]">
                Based in Kadıköy since day one
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="py-16 md:py-24 section-padding bg-warm-sand">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="font-display text-3xl md:text-4xl font-bold text-deep-nazar mb-12">
            How We Think About This
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                title: "Small by Design",
                text: "Max 8 guests per experience. If you wanted a crowd, you'd stay on the European side.",
              },
              {
                title: "Local, Always",
                text: "Every restaurant, café, and stop on our routes is a place we go ourselves. No kickbacks. No tourist menus.",
              },
              {
                title: "Editors, Not Guides",
                text: "We don't read from scripts. We share stories, adapt to the group, and make sure every moment earns its place.",
              },
            ].map((item, i) => (
              <div key={i} className="bg-white rounded-3xl p-8 shadow-sm">
                <h3 className="font-display text-xl font-bold text-deep-nazar mb-3">
                  {item.title}
                </h3>
                <p className="text-deep-nazar/60 text-sm leading-relaxed">
                  {item.text}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA />
    </>
  );
}