property-management-network/app/(marketing)/cookie-policy/page.tsx

export const metadata = {
  title: "Cookie Policy — Property Management Network",
  description: "How Property Management Network uses cookies and similar tracking technologies.",
}

const SECTIONS = [
  {
    title: "What are cookies?",
    body: "Cookies are small text files stored on your device by your browser when you visit a website. They help websites remember your preferences, keep you logged in, and understand how the site is being used.",
  },
  {
    title: "Cookies we use",
    body: "We use the following types of cookies: (1) Essential cookies — required for the application to function, such as session authentication tokens. Without these, you cannot log in. (2) Analytics cookies — we use Vercel Analytics (privacy-preserving, no personal data stored) to understand page performance. (3) Preference cookies — we store your dashboard preferences (dark/light mode, column visibility) in browser localStorage.",
  },
  {
    title: "Third-party cookies",
    body: "Stripe may set cookies when you make a payment for fraud prevention and PCI compliance purposes. We do not use advertising, retargeting, or social media tracking cookies.",
  },
  {
    title: "How to control cookies",
    body: "You can manage cookies through your browser settings. Most browsers allow you to block or delete cookies. Note that blocking essential cookies will prevent you from logging in to Property Management Network. For analytics cookies, you can opt out by enabling the Do Not Track header in your browser.",
  },
  {
    title: "Cookie retention",
    body: "Session cookies expire when you close your browser. Authentication tokens are refreshed automatically and expire after 7 days of inactivity. Analytics data is retained for 90 days in aggregate, with no individual identifiers stored.",
  },
  {
    title: "Changes to this policy",
    body: "We may update this Cookie Policy as we add new features. Significant changes will be announced via the in-app notification banner. The date at the bottom of this page reflects the most recent update.",
  },
  {
    title: "Contact",
    body: "For questions about cookies or this policy, contact us at privacy@propertymanagement.network.",
  },
]

export default function CookiePolicyPage() {
  return (
    <div className="bg-[#09090b] text-white min-h-screen">
      <div className="mx-auto max-w-3xl px-6 pt-32 pb-24">
        <div className="mb-10">
          <h1 className="text-3xl font-bold text-white mb-2">Cookie Policy</h1>
          <p className="text-xs text-white/30">Last updated: April 2026</p>
        </div>

        <div className="space-y-8">
          {SECTIONS.map((s) => (
            <div key={s.title}>
              <h2 className="text-base font-semibold text-white mb-2">{s.title}</h2>
              <p className="text-sm text-white/50 leading-relaxed">{s.body}</p>
            </div>
          ))}
        </div>

        {/* Cookie types summary table */}
        <div className="mt-10 rounded-2xl border border-white/[0.06] bg-[#111118] overflow-hidden">
          <div className="px-5 py-3.5 border-b border-white/[0.04]">
            <p className="text-xs font-semibold uppercase tracking-wider text-white/30">Cookie Summary</p>
          </div>
          {[
            { name: "pf_session", type: "Essential", purpose: "Authentication session token", expires: "7 days" },
            { name: "pf_prefs", type: "Preference", purpose: "Dashboard layout preferences", expires: "1 year" },
            { name: "_vercel_*", type: "Analytics", purpose: "Anonymous page performance data", expires: "90 days" },
            { name: "__stripe_*", type: "Third-party", purpose: "Stripe payment fraud prevention", expires: "Session" },
          ].map((row, i, arr) => (
            <div key={row.name} className={`grid grid-cols-4 gap-4 px-5 py-3.5 text-xs ${i !== arr.length - 1 ? "border-b border-white/[0.04]" : ""}`}>
              <code className="font-mono text-indigo-300">{row.name}</code>
              <span className="text-white/60">{row.type}</span>
              <span className="text-white/40 col-span-1">{row.purpose}</span>
              <span className="text-white/40">{row.expires}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}