import { Button } from "@/components/shared/Button";

export default function NotFound() {
  return (
    <section className="min-h-screen flex items-center justify-center section-padding">
      <div className="text-center max-w-lg">
        <div className="w-24 h-24 rounded-full bg-bosphorus/10 flex items-center justify-center mx-auto mb-8">
          <span className="text-4xl">🚢</span>
        </div>

        <h1 className="font-display text-4xl md:text-5xl font-bold text-deep-nazar mb-4">
          Wrong Side of the Water
        </h1>

        <p className="text-deep-nazar/60 text-lg mb-8">
          Looks like you&apos;ve drifted off course. This page doesn&apos;t exist —
          but Istanbul&apos;s Asian side definitely does.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button href="/" variant="primary" size="lg">
            Back to Shore
          </Button>
          <Button href="/experiences" variant="outline" size="lg">
            Explore Experiences
          </Button>
        </div>
      </div>
    </section>
  );
}