import { useEffect, useRef, useState } from "react";
import StrategyCard from "./StrategyCard";
import { TrendingUp, Shield, Sparkles } from "lucide-react";
import { GOLDEN_NIFTY_PATH } from "@/lib/routes";
import { motion } from "framer-motion";

const strategies = [
  {
    title: "Golden Nifty",
    description: "A balanced approach combining Nifty 50 index with tactical gold allocation for stability.",
    returnRange: "12-15% p.a.",
    riskLevel: "Low" as const,
    icon: <TrendingUp className="w-6 h-6" />,
    href: GOLDEN_NIFTY_PATH,
  },
  {
    title: "Bluechip Growth",
    description: "Focused on large-cap leaders with proven track records and consistent dividend yields.",
    returnRange: "13-18% p.a.",
    riskLevel: "Medium" as const,
    icon: <Shield className="w-6 h-6" />,
    comingSoon: true,
  },
  {
    title: "Flexi Momentum",
    description: "Dynamic allocation across market caps based on momentum signals and sector strength.",
    returnRange: "14-18% p.a.",
    riskLevel: "Moderate" as const,
    icon: <Sparkles className="w-6 h-6" />,
    comingSoon: true,
  },
];

export default function StrategiesSection() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const cardContainer = {
    hidden: {},
    show: {
      transition: {
        staggerChildren: 0.12,
      },
    },
  };

  const cardItem = {
    hidden: { opacity: 0, y: 14 },
    show: { opacity: 1, y: 0 },
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.2 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      id="strategies"
      className="py-32 px-6 relative overflow-hidden"
      data-testid="section-strategies"
    >
      <div 
        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl transition-all duration-1000 ${
          isVisible ? "opacity-100 scale-100" : "opacity-0 scale-50"
        }`}
      />

      <div className="max-w-6xl mx-auto relative">
        <div className="text-center mb-16">
          <p 
            className={`text-sm uppercase tracking-widest text-muted-foreground mb-4 transition-all duration-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
          >
            Strategies
          </p>
          <h2 
            className={`text-4xl md:text-5xl font-bold mb-4 transition-all duration-700 delay-100 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
            data-testid="text-strategies-headline"
          >
            Choose Your Path
          </h2>
          <p 
            className={`text-xl text-muted-foreground max-w-2xl mx-auto transition-all duration-700 delay-200 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
          >
            Proven approaches designed for steady, long-term growth.
          </p>
        </div>

        <motion.div
          className="grid md:grid-cols-3 gap-6"
          variants={cardContainer}
          initial="hidden"
          animate={isVisible ? "show" : "hidden"}
        >
          {strategies.map((strategy, index) => (
            <motion.div
              key={strategy.title}
              variants={cardItem}
              onMouseEnter={() => setHoveredIndex(index)}
              onMouseLeave={() => setHoveredIndex(null)}
              className={`transition-all duration-500 ${
                hoveredIndex !== null && hoveredIndex !== index
                  ? "opacity-60 scale-[0.98]"
                  : "opacity-100 scale-100"
              }`}
              whileHover={{
                y: -6,
                boxShadow: "0 20px 40px rgba(0,0,0,0.18)",
              }}
              transition={{ type: "spring", stiffness: 300, damping: 24 }}
            >
              {strategy.href ? (
                <a
                  href={strategy.href}
                  target="_blank"
                  rel="noreferrer"
                  className="block"
                >
                  <StrategyCard
                    {...strategy}
                    isVisible={isVisible}
                    delay={300 + index * 150}
                    clickable
                  />
                </a>
              ) : (
                <StrategyCard
                  {...strategy}
                  isVisible={isVisible}
                  delay={300 + index * 150}
                  clickable={false}
                />
              )}
            </motion.div>
          ))}
        </motion.div>
        <p className="text-center text-sm text-muted-foreground mt-8">
          Detailed playbook is live for Golden Nifty. More strategies are coming soon.
        </p>
      </div>
    </section>
  );
}
