import { Shield, Eye, Lock, Share2, Cookie, Mail } from "lucide-react";
import DynamicPageLayout from "@/components/layout/DynamicPageLayout";
import { getClientLocation } from "@/lib/location";
import { auth } from "@clerk/nextjs/server";

export const metadata = {
  title: "Privacy Policy - Vela",
  description: "How we handle your data.",
};

export default async function PrivacyPage() {
  const location = await getClientLocation();
  const { userId } = await auth();

  const sections = [
    {
      id: "information",
      title: "1. Information we collect",
      icon: Shield,
      content: "We only collect what we need to run Vela for you:",
      bullets: [
        "Account information (name, email, company name)",
        "Financial data you enter (invoices, expenses, payroll)",
        "Employee data you enter on behalf of your organisation",
        "Usage data and analytics (anonymised)",
        `IP address (${location?.ip || "unknown"}) — used only to determine your location and display prices in your local currency`,
      ],
    },
    {
      id: "usage",
      title: "2. How we use your information",
      icon: Eye,
      content: "Your data stays within Vela and is only used to:",
      bullets: [
        "Provide and improve the Vela service",
        "Process payroll calculations",
        "Determine local pricing based on IP-based location tracking",
        "Send transactional emails (invoice notifications, payslips)",
        "We never sell your data to third parties — ever",
      ],
    },
    {
      id: "security",
      title: "3. Data storage and security",
      icon: Lock,
      content: "We take security seriously — here's how we protect your data:",
      bullets: [
        "Data stored on Supabase (PostgreSQL) with row-level security",
        "All data encrypted in transit (TLS) and at rest",
        "Authentication handled securely by Clerk",
      ],
    },
    {
      id: "sharing",
      title: "4. Data sharing",
      icon: Share2,
      content: "We work with a small number of trusted providers to deliver Vela:",
      bullets: [
        "Supabase — data storage and database",
        "Clerk — authentication and user management",
        "Resend — transactional email delivery",
        "Google — AI features via Gemini API (your prompts are not used for training)",
        "No data is shared with advertisers or data brokers",
      ],
    },
    {
      id: "rights",
      title: "5. Your rights",
      icon: Eye,
      content: "It's your data. You're in control:",
      bullets: [
        "Access, correct, or delete your data at any time",
        "Export your data in CSV format from the dashboard",
        "Questions? Contact us at privacy@vela.app",
      ],
    },
    {
      id: "cookies",
      title: "6. Cookies",
      icon: Cookie,
      content: "We keep it simple:",
      bullets: [
        "We use essential cookies only for authentication sessions",
        "No advertising or tracking cookies",
        "No third-party analytics cookies",
      ],
    },
    {
      id: "contact",
      title: "7. Contact",
      icon: Mail,
      content: "If you have any questions about this policy or your data:",
      bullets: [
        "Email: privacy@vela.app",
        "We aim to respond to all privacy requests within 7 business days",
      ],
    },
  ];

  return (
    <DynamicPageLayout pageKey="privacy">
      <div className={`${userId ? "p-6 lg:p-8" : "py-16 px-4 sm:px-6 lg:px-8"}`}>
        <div className="max-w-3xl mx-auto">
          {/* Header */}
          <div className="mb-12">
            <h1 className={`${userId ? "text-3xl" : "text-4xl md:text-5xl"} font-serif text-gray-900 mb-4`}>
              Privacy Policy
            </h1>
            <p className="text-sm text-gray-500">Last updated: April 2026</p>
            <p className="text-gray-600 mt-4 leading-relaxed">
              Vela is built for small businesses, and we believe in being clear about what we do with your data. 
              {location?.countryCode && (
                <span className="ml-1 text-[#1D9E75] font-medium">
                  We've detected you're visiting from {location.country || location.countryCode.toUpperCase()} and adjusted our pricing accordingly.
                </span>
              )}
            </p>
          </div>

          {/* Sections */}
          <div className="space-y-10">
            {sections.map((section) => (
              <section key={section.id} id={section.id} className="scroll-mt-20">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 bg-teal-50 rounded-lg flex items-center justify-center">
                    <section.icon className="w-5 h-5 text-[#1D9E75]" />
                  </div>
                  <h2 className="text-xl font-semibold text-gray-900">
                    {section.title}
                  </h2>
                </div>

                <p className="text-gray-600 mb-4 leading-relaxed">{section.content}</p>

                <ul className="space-y-2.5">
                  {section.bullets.map((bullet, i) => (
                    <li key={i} className="flex items-start gap-2.5 text-gray-700 leading-relaxed">
                      <span className="w-1.5 h-1.5 rounded-full bg-[#1D9E75] mt-2 flex-shrink-0" />
                      {bullet}
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </div>
        </div>
      </div>
    </DynamicPageLayout>
  );
}