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 philosophyPoints = [
  {
    title: "Evidence first",
    body: "We prioritize rules backed by data, not noise. Every decision is codified, tested, and repeatable.",
  },
  {
    title: "Risk discipline",
    body: "Position sizing and rebalancing are built to protect the downside while staying exposed to compounding.",
  },
  {
    title: "Transparency",
    body: "Clear logic, consistent reporting, and no opaque black boxes. You always know what drives your portfolio.",
  },
];

const buildItems = [
  {
    title: "Systematic Strategies",
    body: "Rule-based portfolios like Golden Nifty, built to stay patient through cycles.",
  },
  {
    title: "Execution Guardrails",
    body: "Eligibility checks, market state awareness, and heartbeat monitoring keep runs healthy.",
  },
  {
    title: "Live Monitoring",
    body: "Positions, P&L, and state timelines stay in sync with your broker for real-time clarity.",
  },
];

const trustTimeline = [
  { label: "Design", text: "Every strategy starts with a hypothesis, validation, and risk definition." },
  { label: "Simulate", text: "We test against varied regimes to avoid overfitting and fragility." },
  { label: "Deploy", text: "Live checks, session health, and incremental rollouts keep execution safe." },
  { label: "Adapt", text: "Feedback loops improve sizing, cadence, and monitoring without changing core rules." },
];

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

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <PageEnter>
        <main className="pt-24 pb-16">
          <motion.section
            className="relative overflow-hidden"
            {...(prefersReducedMotion
              ? {}
              : { initial: pageEnterMotion.initial, animate: 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/20 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 px-6 py-16 text-center space-y-4">
              <motion.h1
                className="text-4xl md:text-5xl font-bold tracking-tight"
                variants={fadeUp}
                initial="hidden"
                animate="visible"
              >
                About QuantFortune
              </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 }}
              >
                Systematic investing, built for long-term clarity.
              </motion.p>
            </div>
          </motion.section>

          <section className="max-w-6xl mx-auto px-6 py-12 space-y-12">
            <motion.div
              className="space-y-6"
              variants={staggerContainer(0.12)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-50px" }}
            >
              <motion.h2 className="text-2xl font-semibold" variants={fadeUp}>
                Philosophy
              </motion.h2>
              <motion.div className="grid gap-6 md:grid-cols-3" variants={fadeUp}>
                {philosophyPoints.map((item) => (
                  <motion.div
                    key={item.title}
                    className="rounded-2xl border border-border/60 bg-card/80 p-6 shadow-lg"
                    variants={fadeUp}
                    whileHover={prefersReducedMotion ? undefined : { y: -6, boxShadow: "0 18px 36px rgba(59,130,246,0.18)" }}
                    transition={{ type: "spring", stiffness: 260, damping: 24 }}
                  >
                    <p className="text-sm uppercase tracking-[0.2em] text-primary mb-2">{item.title}</p>
                    <p className="text-sm text-muted-foreground leading-relaxed">{item.body}</p>
                  </motion.div>
                ))}
              </motion.div>
            </motion.div>

            <motion.div
              className="space-y-6"
              variants={staggerContainer(0.12)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-50px" }}
            >
              <motion.h2 className="text-2xl font-semibold" variants={fadeUp}>
                What We Build
              </motion.h2>
              <motion.div className="grid gap-6 md:grid-cols-3" variants={fadeUp}>
                {buildItems.map((item) => (
                  <motion.div
                    key={item.title}
                    className="rounded-2xl border border-border/60 bg-gradient-to-br from-background/80 via-background/60 to-card/80 p-6 shadow-xl backdrop-blur-sm"
                    variants={fadeUp}
                    {...(prefersReducedMotion ? {} : cardHover)}
                  >
                    <p className="text-base font-semibold mb-2">{item.title}</p>
                    <p className="text-sm text-muted-foreground leading-relaxed">{item.body}</p>
                  </motion.div>
                ))}
              </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}>
                Trust & Discipline
              </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]" />
                {trustTimeline.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>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}