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";
import { ArrowUpRight, ShieldCheck, Repeat, BarChart3 } from "lucide-react";

const painPoints = [
  { title: "Emotional decisions", body: "Buying highs, selling lows, and reacting to noise instead of process." },
  { title: "Timing mistakes", body: "Overconfidence in entries and exits without a tested framework." },
  { title: "Overtrading", body: "Chasing moves increases cost, taxes, and errors." },
  { title: "Lack of process", body: "No repeatable rules to stay invested through cycles." },
];

const approachSteps = [
  { label: "Rule-based strategies", text: "Every move is codified and testable. No discretionary overrides." },
  { label: "Regime awareness", text: "Frequency and eligibility checks respect market sessions and state." },
  { label: "Risk bands", text: "Sizing and bands to contain drawdowns and avoid overexposure." },
  { label: "Rebalancing discipline", text: "Periodic, rules-driven actions to keep portfolios aligned." },
];

const benefits = [
  {
    title: "Long-term focus",
    body: "Built to stay patient through volatility, compounding over time.",
    icon: <ShieldCheck className="h-5 w-5" />,
  },
  {
    title: "Automated execution",
    body: "Runs when eligible; pauses when not. Heartbeats monitor health.",
    icon: <Repeat className="h-5 w-5" />,
  },
  {
    title: "Transparent logic",
    body: "You see the strategy state, timeline, and rules—no black boxes.",
    icon: <BarChart3 className="h-5 w-5" />,
  },
  {
    title: "Lower decision fatigue",
    body: "Clear rules reduce the urge to tinker; focus on staying the course.",
    icon: <ArrowUpRight className="h-5 w-5" />,
  },
];

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

  useEffect(() => {
    document.title = "Learn More | 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-16 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-[140px]" />
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(59,130,246,0.08),transparent_0)] [background-size:160px_160px] opacity-40" />
            </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"
              >
                Built for Clarity. Designed for the Long Term.
              </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 }}
              >
                A systematic approach to investing that replaces noise with process.
              </motion.p>
            </div>
          </motion.section>

          <section className="max-w-6xl mx-auto px-6 pb-12 space-y-10">
            <motion.div
              className="space-y-6"
              variants={staggerContainer(0.12)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-60px" }}
            >
              <motion.h2 className="text-2xl font-semibold" variants={fadeUp}>
                The Problem with Traditional Investing
              </motion.h2>
              <motion.div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4" variants={fadeUp}>
                {painPoints.map((item) => (
                  <motion.div
                    key={item.title}
                    className="rounded-2xl border border-border/60 bg-card/80 p-5 shadow-lg 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}>
                The QuantFortune Approach
              </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_5s_ease-in-out_infinite]" />
                {approachSteps.map((item, idx) => (
                  <motion.div
                    key={item.label}
                    className="relative pl-4"
                    variants={fadeUp}
                    transition={{ delay: idx * 0.06, 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>

            <motion.div
              className="space-y-6"
              variants={staggerContainer(0.12)}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-60px" }}
            >
              <motion.h2 className="text-2xl font-semibold" variants={fadeUp}>
                What You Get
              </motion.h2>
              <motion.div className="grid gap-6 md:grid-cols-2" variants={fadeUp}>
                {benefits.map((item, idx) => (
                  <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 flex gap-3"
                    variants={fadeUp}
                    transition={{ delay: idx * 0.05 }}
                    {...(prefersReducedMotion ? {} : cardHover)}
                  >
                    <div className="h-10 w-10 rounded-full bg-primary/10 text-primary flex items-center justify-center">
                      {item.icon}
                    </div>
                    <div>
                      <p className="text-base font-semibold">{item.title}</p>
                      <p className="text-sm text-muted-foreground leading-relaxed">{item.body}</p>
                    </div>
                  </motion.div>
                ))}
              </motion.div>
            </motion.div>

            <motion.div
              className="rounded-2xl border border-border/60 bg-card/80 p-8 shadow-2xl backdrop-blur-lg mt-4"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-40px" }}
            >
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div className="space-y-2">
                  <p className="text-lg font-semibold">Ready to see it in action?</p>
                  <p className="text-sm text-muted-foreground">
                    Explore live strategy flows or view a portfolio demo built for disciplined, long-term investing.
                  </p>
                </div>
                <div className="flex flex-wrap gap-3">
                  <motion.a
                    href="/strategies/golden-nifty"
                    className="inline-flex items-center gap-2 rounded-xl bg-primary text-primary-foreground px-4 py-2 text-sm font-semibold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition hover:-translate-y-0.5 hover:shadow-[0_14px_36px_rgba(59,130,246,0.35)]"
                    whileHover={prefersReducedMotion ? undefined : { scale: 1.02 }}
                    whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
                  >
                    Explore Strategies
                  </motion.a>
                  <motion.a
                    href="/portfolio/paper"
                    className="inline-flex items-center gap-2 rounded-xl border border-primary/50 px-4 py-2 text-sm font-semibold text-primary bg-primary/10 transition hover:-translate-y-0.5 hover:border-primary hover:bg-primary/15"
                    whileHover={prefersReducedMotion ? undefined : { scale: 1.02 }}
                    whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
                  >
                    View Portfolio Demo
                  </motion.a>
                </div>
              </div>
            </motion.div>
          </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}
