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 termsCards = [
  {
    title: "Acceptance of Terms",
    body: "By accessing QuantFortune you agree to these Terms, our Privacy Policy, and Disclosures. Do not use the service if you disagree.",
  },
  {
    title: "No Investment Advice",
    body: "Content and tools are for information and execution support only. We do not provide personalized recommendations or portfolio advice.",
  },
  {
    title: "Eligibility & Accounts",
    body: "You are responsible for keeping credentials secure and ensuring you are authorized to operate linked brokerage accounts.",
  },
  {
    title: "Execution & Data",
    body: "Broker connectivity, pricing, and P&L are subject to third-party APIs. Interruptions may occur; verify before acting.",
  },
  {
    title: "Liability",
    body: "You bear market, execution, and connectivity risks. QuantFortune is not liable for losses arising from use of the service.",
  },
];

const timeline = [
  { label: "Use of Service", text: "Use only for lawful purposes and comply with broker and exchange rules." },
  { label: "Changes", text: "We may update terms, features, and availability; continued use implies acceptance." },
  { label: "Termination", text: "We may suspend or terminate access for misuse, fraud, or regulatory requirements." },
  { label: "Governing Law", text: "These terms are governed by Indian law; disputes subject to appropriate jurisdiction." },
];

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

  useEffect(() => {
    document.title = "Terms of Service | 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"
              >
                Terms of Service
              </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 }}
              >
                Clear obligations, limited scope, and disciplined usage expectations.
              </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" }}
            >
              {termsCards.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}>
                Key Clauses
              </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 · Subject to change with product or regulatory updates.
              </div>
              <div className="text-xs text-primary/80 animate-[pulse_3s_ease-in-out_infinite]">
                Compliance note: Use at your discretion; verify execution and data before acting.
              </div>
            </div>
          </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}