import type { Metadata } from "next";
import Link from "next/link";
import { privacyPolicy } from "@/content/legal";
import { pageSeo } from "@/content/page-seo";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { createPageMetadata } from "@/lib/seo";
import { Button } from "@/components/ui/button";

export const metadata: Metadata = createPageMetadata(pageSeo.privacy);

export default function PrivacyPage() {
  return (
    <>
      <PageRiftHeader
        variant="minimal"
        profilePath="/privacy"
        eyebrow="Legal"
        title={<h1 className="text-4xl font-bold">{privacyPolicy.title}</h1>}
        description={
          <p className="text-sm text-[#5b5b5b]">Last updated: {privacyPolicy.updated}</p>
        }
      />

      <Section>
        <TopoProseSurface className="max-w-2xl space-y-6">
          <p className="text-[#5b5b5b] leading-relaxed">{privacyPolicy.intro}</p>

          {privacyPolicy.sections.map((section) => (
            <section key={section.heading}>
              <h2 className="text-lg font-semibold text-[#37a47a]">{section.heading}</h2>
              <p className="mt-2 text-[#5b5b5b] leading-relaxed">{section.body}</p>
            </section>
          ))}

          <p className="border-t border-[#37a47a]/12 pt-6 text-[#5b5b5b] leading-relaxed">
            {privacyPolicy.moreDetails}
          </p>
        </TopoProseSurface>

        <div className="mt-8 flex flex-wrap gap-3">
          <Button className="rounded-full bg-[#37a47a] text-white hover:bg-[#30614c]" asChild>
            <Link href="/contact">Contact us</Link>
          </Button>
          <Button variant="outline" className="rounded-full border-[#37a47a]/30 text-[#37a47a]" asChild>
            <Link href={`mailto:${privacyPolicy.contactEmail}`}>{privacyPolicy.contactEmail}</Link>
          </Button>
        </div>
      </Section>
    </>
  );
}
