"use client";

import { useState, useEffect } from "react";
import { Shield, Eye, Lock, Share2, Cookie, Mail } from "lucide-react";
import PageSkeleton from "./PageSkeleton";

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 — used 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",
    ],
  },
];

export default function PrivacyPage() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { setLoaded(true); }, []);

  if (!loaded) return <PageSkeleton name="Privacy Policy" />;

  return (
    <div className="p-6 lg:p-8">
      <div className="max-w-3xl mx-auto">
        <div className="mb-12">
          <h1 className="text-3xl 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.
            This policy covers the Vela service and all associated features.
          </p>
        </div>

        <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>
  );
}