import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { LegalSections } from "@/components/legal-content";
import {
  DATA_DELETION_INTRO,
  DATA_DELETION_SECTIONS,
  DATA_DELETION_LAST_UPDATED,
} from "@/lib/legal-content";

export const metadata = {
  title: "Data Deletion Instructions · VibePass Tickets",
  description: "How to request deletion of your personal data from VibePass Tickets.",
};

export default function DataDeletionPage() {
  return (
    <div className="flex-1 bg-bg">
      <div className="bg-bg border-b border-line">
        <SiteNav />
      </div>

      <section className="bg-bg">
        <div className="max-w-3xl mx-auto px-4 pt-16 pb-10">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            Legal
          </p>
          <h1 className="mt-4 text-4xl sm:text-5xl font-black leading-[0.95] tracking-tight text-white">
            Data Deletion Instructions
          </h1>
          <p className="mt-4 text-sm text-muted">Last updated: {DATA_DELETION_LAST_UPDATED}</p>
          <div className="mt-6 space-y-4">
            {DATA_DELETION_INTRO.map((block, i) =>
              block.type === "p" ? (
                <p key={i} className="text-base leading-relaxed text-ink/80">
                  {block.text}
                </p>
              ) : null
            )}
          </div>
        </div>
      </section>

      <article className="bg-bg">
        <div className="max-w-3xl mx-auto px-4 pb-20">
          <LegalSections sections={DATA_DELETION_SECTIONS} />
        </div>
      </article>

      <SiteFooter />
    </div>
  );
}