import { useEffect } from "react";
import Navigation from "@/components/landing/Navigation";
import Footer from "@/components/landing/Footer";
import PageEnter from "@/components/ui/page-enter";
import { fadeUp, staggerContainer, cardHover, pageEnterMotion } from "@/components/motion/variants";
import { motion, useReducedMotion } from "framer-motion";

const privacyCards = [
  {
    title: "Data Collection",
    body: "We collect only the data required to provide portfolio insights and broker connectivity. This includes identifiers, session tokens, and execution status logs.",
  },
  {
    title: "Use of Data",
    body: "Data is used solely for account authentication, syncing holdings, computing P&L, and improving reliability of the platform. We do not sell or rent your data.",
  },
  {
    title: "Storage & Security",
    body: "Credentials are stored using industry-standard encryption. Sensitive broker tokens are scoped and rotated as per broker policies.",
  },
  {
    title: "Third Parties",
    body: "Brokerage APIs (e.g., Zerodha and Groww) are accessed only with your consent. No unauthorized sharing with any other party.",
  },
  {
    title: "User Control",
    body: "You can disconnect brokers and request deletion of stored personal data and tokens, subject to applicable retention requirements.",
  },
];

const timeline = [
  {
    label: "Consent",
    text: "You authorize broker linking and data access through explicit user actions.",
  },
  {
    label: "Processing",
    text: "Data is processed to sync holdings, calculate metrics, and display portfolio views.",
  },
  {
    label: "Retention",
    text: "We retain only as long as needed for compliance, troubleshooting, and continuity of service.",
  },
  {
    label: "Revocation",
    text: "Broker access can be revoked anytime; cached data is then purged in line with policy.",
  },
];

export default function Privacy() {
  const prefersReducedMotion = useReducedMotion();

  useEffect(() => {
    document.title = "Privacy Policy | QuantFortune";
  }, []);

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <PageEnter className="pt-24 pb-16">
        <main>
          <motion.section
            className="relative overflow-hidden px-6 py-16"
            initial={prefersReducedMotion ? undefined : pageEnterMotion.initial}
            animate={prefersReducedMotion ? undefined : pageEnterMotion.animate}
          >
            <div className="absolute inset-0 pointer-events-none">
              <div className="absolute -left-24 top-0 h-80 w-80 bg-gradient-to-br from-primary/18 via-primary/5 to-transparent blur-[120px]" />
              <div className="absolute right-0 top-10 h-96 w-96 bg-gradient-to-br from-chart-2/15 via-chart-1/10 to-transparent blur-[120px]" />
            </div>
            <div className="relative max-w-5xl mx-auto text-center space-y-4">
              <motion.h1
                className="text-4xl md:text-5xl font-bold tracking-tight"
                variants={fadeUp}
                initial="hidden"
                animate="visible"
              >
                Privacy Policy
              </motion.h1>
              <motion.p
                className="text-lg text-muted-foreground max-w-3xl mx-auto"
                variants={fadeUp}
                initial="hidden"
                animate="visible"
                transition={{ delay: 0.08, duration: 0.6 }}
              >
                Your data stays secure, purpose-limited, and under your control.
              </motion.p>
            </div>
          </motion.section>

          <section className="max-w-6xl mx-auto px-6 pb-12 space-y-12">
            <motion.div
              className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
              variants={staggerContainer(0.12)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-60px" }}
            >
              {privacyCards.map((card) => (
                <motion.div
                  key={card.title}
                  className="rounded-2xl border border-border/60 bg-card/80 p-6 shadow-xl backdrop-blur-sm"
                  variants={fadeUp}
                  {...(prefersReducedMotion ? {} : cardHover)}
                >
                  <p className="text-base font-semibold mb-2">{card.title}</p>
                  <p className="text-sm text-muted-foreground leading-relaxed">{card.body}</p>
                </motion.div>
              ))}
            </motion.div>

            <motion.div
              className="space-y-6"
              variants={staggerContainer(0.1)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-80px" }}
            >
              <motion.h2 className="text-2xl font-semibold" variants={fadeUp}>
                Data Lifecycle
              </motion.h2>
              <motion.div className="relative space-y-6 border-l border-border/60 pl-6" variants={fadeUp}>
                <div className="absolute left-0 top-0 h-full w-px bg-gradient-to-b from-primary/40 via-border/60 to-transparent animate-[pulse_4s_ease-in-out_infinite]" />
                {timeline.map((item, idx) => (
                  <motion.div
                    key={item.label}
                    className="relative pl-4"
                    variants={fadeUp}
                    transition={{ delay: idx * 0.05, duration: 0.5 }}
                  >
                    <span className="absolute -left-[9px] top-1 h-3 w-3 rounded-full bg-primary shadow-[0_0_0_8px_rgba(59,130,246,0.15)]" />
                    <p className="text-sm font-semibold">{item.label}</p>
                    <p className="text-sm text-muted-foreground leading-relaxed">{item.text}</p>
                  </motion.div>
                ))}
              </motion.div>
            </motion.div>
          </section>

          <section className="max-w-6xl mx-auto px-6 pb-8">
            <div className="rounded-2xl border border-border/50 bg-card/70 p-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3 shadow-lg">
              <div className="text-sm text-muted-foreground">
                Last updated: Jan 2026 · This policy may change to align with regulatory requirements.
              </div>
              <div className="text-xs text-primary/80 animate-[pulse_3s_ease-in-out_infinite]">
                Compliance note: No investment advice is provided; see disclosures.
              </div>
            </div>
          </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}
