"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Shield, Lock, Cookie, Globe, Mail, Info } from "lucide-react"
import Link from "next/link"

export function PrivacyPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* Hero / Header */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 opacity-[0.03]">
          <img
            src="/united-logo-full.jpg"
            alt=""
            className="w-full h-full object-cover object-center scale-150 blur-[2px]"
          />
        </div>

        <div className="relative z-10 pt-28 pb-16 px-8 lg:px-16">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="font-playfair text-5xl lg:text-7xl font-bold mb-6 tracking-tight">Privacy Policy</h1>
            <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
              We respect your privacy. This policy explains what information we collect, how we use it, and the choices
              you have. We keep it practical and transparent.
            </p>
            <div className="mt-6">
              <Badge variant="outline" className="border-white/30 text-white">Last updated: 2025-09-16</Badge>
            </div>
          </div>
        </div>
      </section>

      {/* Summary Notice */}
      <section className="px-8 lg:px-16">
        <div className="max-w-4xl mx-auto">
          <Alert className="bg-white/5 border-white/10">
            <Info className="h-5 w-5 text-white" />
            <AlertDescription className="text-gray-300">
              This Privacy Policy applies to united-tattoo.com and services offered by United Tattoo. For questions, email{" "}
              <Link href="mailto:info@united-tattoo.com" className="underline">info@united-tattoo.com</Link> or call{" "}
              <Link href="tel:+17196989004" className="underline">(719) 698-9004</Link>.
            </AlertDescription>
          </Alert>
        </div>
      </section>

      {/* Sections */}
      <section className="px-8 lg:px-16 mt-12">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Information We Collect */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Shield className="w-5 h-5" /> Information We Collect
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• Contact details (name, email, phone) when booking or contacting us.</p>
              <p>• Tattoo consultation details you provide (style, size, placement, references).</p>
              <p>• Basic device/browser data for site functionality and security.</p>
              <p>• Optional social media links you share for portfolio references.</p>
            </CardContent>
          </Card>

          {/* How We Use Information */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Lock className="w-5 h-5" /> How We Use Your Info
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• To schedule appointments and communicate about your booking.</p>
              <p>• To match you with an artist that fits your style and timeline.</p>
              <p>• To improve the website experience and studio operations.</p>
              <p>• To comply with health and safety regulations where applicable.</p>
            </CardContent>
          </Card>

          {/* Cookies */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Cookie className="w-5 h-5" /> Cookies & Analytics
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• We may use basic cookies for site functionality (e.g., forms, navigation).</p>
              <p>• We may use privacy-friendly analytics to understand site usage at an aggregate level.</p>
              <p>• You can control cookies via your browser settings.</p>
            </CardContent>
          </Card>

          {/* Data Sharing */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Globe className="w-5 h-5" /> Sharing & Third Parties
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• We do not sell your personal information.</p>
              <p>• We may share information with service providers (e.g., payment processors) to complete your request.</p>
              <p>• If legally required, we may disclose information to comply with applicable laws.</p>
            </CardContent>
          </Card>

          {/* Retention & Security */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Lock className="w-5 h-5" /> Retention & Security
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• We retain information only as long as necessary for the purpose it was collected.</p>
              <p>• We implement reasonable safeguards to protect your information.</p>
              <p>• No method of transmission or storage is 100% secure, but we take your privacy seriously.</p>
            </CardContent>
          </Card>

          {/* Your Choices */}
          <Card className="bg-white/5 border-white/10">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Mail className="w-5 h-5" /> Your Choices & Contact
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>• You can request updates, corrections, or deletion of your information where applicable.</p>
              <p>
                • To exercise your choices, contact us at{" "}
                <Link href="mailto:info@united-tattoo.com" className="underline">info@united-tattoo.com</Link>{" "}
                or call{" "}
                <Link href="tel:+17196989004" className="underline">(719) 698-9004</Link>.
              </p>
              <p>• We’ll respond within a reasonable timeframe.</p>
            </CardContent>
          </Card>

          {/* Changes */}
          <Card className="bg-white/5 border-white/10 lg:col-span-2">
            <CardHeader>
              <CardTitle className="text-white/90 flex items-center gap-2">
                <Info className="w-5 h-5" /> Updates to This Policy
              </CardTitle>
            </CardHeader>
            <CardContent className="text-gray-300 space-y-3">
              <p>
                We may update this Privacy Policy as our practices evolve. We’ll post the latest version on this page
                with the updated date. Continued use of our services means you accept any changes.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Footer Note */}
      <section className="px-8 lg:px-16 mt-12 pb-24">
        <div className="max-w-4xl mx-auto">
          <Card className="bg-white/5 border-white/10">
            <CardContent className="p-6 text-gray-300">
              <p>If you have privacy concerns, reach out. We’re real humans and we’ll help you out.</p>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  )
}
