import Link from "next/link";
import { Background } from "../../components/background";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "Privacy Policy",
  description: "How LedgerOne collects, uses, and protects your data.",
  keywords: siteInfo.keywords
};

const sections = [
  { id: "collect", title: "1. Information We Collect" },
  { id: "use", title: "2. How We Use Information" },
  { id: "security", title: "3. Data Security" },
  { id: "ccpa", title: "4. California Privacy Rights (CCPA)" },
  { id: "pipeda", title: "5. Canadian Privacy Rights (PIPEDA)" },
  { id: "contact", title: "6. Contact Us" }
];

export default function PrivacyPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "Privacy Policy",
      description: "How LedgerOne collects, uses, and protects your data.",
      url: `${siteInfo.url}/privacy-policy`
    }
  ];

  return (
    <div className="page-soft-bg min-h-screen font-sans text-foreground flex flex-col relative overflow-hidden">
      <Background />
      <SiteHeader />

      <main className="relative z-10 flex-1 pt-24 pb-16">
        <div className="max-w-3xl mx-auto px-6 lg:px-8">
          <div className="rounded-3xl border border-border/60 bg-gradient-to-b from-background/95 via-background to-background/90 p-6 shadow-glass backdrop-blur-sm sm:p-10">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 pb-6 border-b border-border/60">
              <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Privacy Policy
              </h1>
              <p className="text-sm text-muted-foreground">
                Last updated: October 24, 2023
              </p>
            </div>

            <nav className="mb-10 rounded-xl bg-secondary/20 border border-border/50 p-4" aria-label="On this page">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3">On this page</p>
              <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                {sections.map(({ id, title }) => (
                  <li key={id}>
                    <a href={`#${id}`} className="text-primary hover:underline">
                      {title.replace(/^\d+\.\s/, "")}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>

            <div className="space-y-10 text-muted-foreground leading-relaxed">
              <section id="collect">
                <h2 className="text-foreground font-bold text-xl mb-3">1. Information We Collect</h2>
                <p>
                  We collect information you provide directly to us, such as when you create an account, connect a bank account, or request customer support.
                </p>
              </section>

              <section id="use">
                <h2 className="text-foreground font-bold text-xl mb-3">2. How We Use Information</h2>
                <p>
                  We use the information we collect to provide, maintain, and improve our services, such as to sync your transactions and generate reports.
                </p>
              </section>

              <section id="security">
                <h2 className="text-foreground font-bold text-xl mb-3">3. Data Security</h2>
                <p>
                  We use industry-standard encryption and security measures to protect your data. We do not store your bank login credentials; they are handled by our secure partners (Plaid).
                </p>
              </section>

              <section id="ccpa">
                <h2 className="text-foreground font-bold text-xl mb-3">4. California Privacy Rights (CCPA)</h2>
                <p>
                  If you are a California resident, you have specific rights regarding your personal information, including the right to request access to and deletion of your data. We do not sell your personal information. To exercise your rights, please{" "}
                  <Link href="/contact" className="text-primary hover:underline font-medium">
                    contact us
                  </Link>.
                </p>
              </section>

              <section id="pipeda">
                <h2 className="text-foreground font-bold text-xl mb-3">5. Canadian Privacy Rights (PIPEDA)</h2>
                <p>
                  If you are a Canadian resident, you have the right to access your personal information and request corrections. We comply with the Personal Information Protection and Electronic Documents Act (PIPEDA) regarding the collection, use, and disclosure of personal information.
                </p>
              </section>

              <section id="contact">
                <h2 className="text-foreground font-bold text-xl mb-3">6. Contact Us</h2>
                <p>
                  If you have any questions about this Privacy Policy, please contact us at{" "}
                  <a href="mailto:privacy@ledgerone.com" className="text-primary hover:underline font-medium">
                    privacy@ledgerone.com
                  </a>{" "}
                  or visit our{" "}
                  <Link href="/contact" className="text-primary hover:underline font-medium">
                    contact page
                  </Link>.
                </p>
              </section>
            </div>

            <div className="mt-12 pt-6 border-t border-border/60 flex flex-wrap gap-6 text-sm">
              <Link href="/terms" className="text-primary hover:underline font-medium">
                Terms of Service
              </Link>
              <Link href="/contact" className="text-primary hover:underline font-medium">
                Contact us
              </Link>
            </div>
          </div>
        </div>
      </main>

      <div className="relative z-10">
        <SiteFooter />
      </div>
      <PageSchema schema={schema} />
    </div>
  );
}