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

type BlogPost = {
  title: string;
  summary: string;
  date: string;
  tag: string;
};

const posts: BlogPost[] = [
  {
    title: "How we structure Golden Nifty for patience through cycles",
    summary: "From frequency controls to eligibility checks, here’s how we keep SIPs disciplined when markets whipsaw.",
    date: "Jan 2026",
    tag: "Strategies",
  },
  {
    title: "Execution health: heartbeats, stalls, and restarts",
    summary: "Why engine liveness matters more than timing luck, and how we guard against silent failures.",
    date: "Jan 2026",
    tag: "Infrastructure",
  },
  {
    title: "Reading market structure without prediction",
    summary: "Using rules and thresholds instead of forecasts to stay consistent in uncertain regimes.",
    date: "Dec 2025",
    tag: "Research",
  },
];

export default function Blog() {
  const prefersReducedMotion = useReducedMotion();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const id = setTimeout(() => setLoading(false), 500);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Navigation />
      <PageEnter>
        <main className="pt-24 pb-16">
          <motion.section
            className="relative overflow-hidden px-6 py-16"
            {...(prefersReducedMotion
              ? {}
              : { initial: pageEnterMotion.initial, animate: pageEnterMotion.animate })}
          >
            <div className="absolute inset-0 pointer-events-none">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(59,130,246,0.12),transparent_0)] [background-size:120px_120px] opacity-40" />
              <div className="absolute -top-10 right-10 h-64 w-64 rounded-full bg-chart-2/20 blur-[120px]" />
            </div>
            <div className="relative max-w-4xl 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"
              >
                Insights & Research
              </motion.h1>
              <motion.p
                className="text-lg text-muted-foreground max-w-2xl mx-auto"
                variants={fadeUp}
                initial="hidden"
                animate="visible"
                transition={{ delay: 0.08, duration: 0.6 }}
              >
                Market structure, strategy logic, long-term thinking.
              </motion.p>
            </div>
          </motion.section>

          <section className="max-w-6xl mx-auto px-6 pb-12">
            <motion.div
              className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
              variants={staggerContainer(0.12)}
              initial="hidden"
              animate="visible"
            >
              {loading
                ? Array.from({ length: 3 }).map((_, idx) => (
                    <div
                      key={idx}
                      className="h-48 rounded-2xl border border-border/50 bg-muted/20 animate-pulse"
                    />
                  ))
                : posts.map((post) => (
                    <motion.article
                      key={post.title}
                      className="relative overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-6 shadow-lg"
                      variants={fadeUp}
                      {...(prefersReducedMotion ? {} : cardHover)}
                    >
                      <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
                        <span className="uppercase tracking-[0.18em] text-primary">{post.tag}</span>
                        <span>{post.date}</span>
                      </div>
                      <h3 className="text-lg font-semibold mb-2">{post.title}</h3>
                      <p className="text-sm text-muted-foreground leading-relaxed">{post.summary}</p>
                    </motion.article>
                  ))}
            </motion.div>
          </section>
        </main>
      </PageEnter>
      <Footer />
    </div>
  );
}
