import React from "react"
import { motion } from "framer-motion"
import {
  ShieldCheck,
  Database,
  Lock,
  Users,
  Bell,
  Mail,
} from "lucide-react"

/* ========= reusable card ========= */
function PolicyCard({ icon: Icon, title, children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 25 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="
        bg-white/[0.04]
        border border-white/10
        rounded-2xl
        p-6
        backdrop-blur-xl
        hover:border-amber-400/40
        transition
      "
    >
      <div className="flex items-start gap-4">
        <Icon className="text-amber-400 mt-1" size={22} />
        <div>
          <h3 className="text-white font-semibold mb-2">{title}</h3>
          <div className="text-gray-400 text-sm leading-relaxed">
            {children}
          </div>
        </div>
      </div>
    </motion.div>
  )
}

export default function PrivacyPolicy() {
  return (
    <div className="bg-black text-white min-h-screen">

      {/* ================= HERO ================= */}
      <section className="relative overflow-hidden py-28">

        {/* amber glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[500px] bg-amber-400/10 blur-[150px] rounded-full" />

        <div className="mx-auto w-full max-w-7xl px-6 lg:px-12 text-center">

          <h1 className="text-4xl md:text-5xl font-bold">
            Privacy <span className="text-amber-400">Policy</span>
          </h1>

          <p className="text-gray-400 mt-4 max-w-2xl mx-auto">
            Your trust matters. Here’s how LDMA collects, uses and protects
            your information when you use our app and services.
          </p>

          <p className="text-amber-400 text-sm mt-3">
            Effective date: 2026-03-02
          </p>
        </div>
      </section>


      {/* ================= CARDS GRID ================= */}
      <section className="pb-28">
        <div className="mx-auto w-full max-w-7xl px-6 lg:px-12">

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">

            <PolicyCard
              icon={Database}
              title="Information We Collect"
            >
              Account details, profile info, project records, device data
              and notification tokens necessary for app functionality.
            </PolicyCard>

            <PolicyCard
              icon={Users}
              title="How We Use Data"
            >
              Authentication, project management, notifications,
              admin tools and improving the app experience.
            </PolicyCard>

            <PolicyCard
              icon={ShieldCheck}
              title="Security"
            >
              Firebase authentication, server checks and Firestore
              security rules protect your information.
            </PolicyCard>

            <PolicyCard
              icon={Lock}
              title="Data Retention"
            >
              We keep data only as long as necessary. You may request
              deletion anytime from your account settings.
            </PolicyCard>

            <PolicyCard
              icon={Bell}
              title="Notifications"
            >
              Push notifications use FCM tokens. You can disable
              them anytime from device settings.
            </PolicyCard>

            <PolicyCard
              icon={Mail}
              title="Contact Us"
            >
              support@ldma.in  
              <br />
              +91 77094173777  
              <br />
              Latur, Maharashtra, India
            </PolicyCard>

          </div>
        </div>
      </section>


      {/* ================= FULL TEXT (legal) ================= */}
      <section className="pb-32">
        <div className="mx-auto w-full max-w-4xl px-6 lg:px-12">

          <div className="bg-white/[0.04] border border-white/10 rounded-2xl p-8 text-sm text-gray-400 leading-relaxed space-y-4">

            <p>
              This Privacy Policy explains how LDMA collects, uses,
              shares and protects information when you use our mobile app.
            </p>

            <p>
              We do not sell or rent personal data. Third-party services such as
              Firebase are used strictly for hosting and infrastructure.
            </p>

            <p>
              You may update your profile, reset password or delete your account
              at any time. For questions contact support@ldma.in.
            </p>

          </div>
        </div>
      </section>
    </div>
  )
}