import { useEffect, useRef, useState } from "react";
import StrategyCard from "./StrategyCard";
import { TrendingUp, Zap, Sparkles } from "lucide-react";
import { GOLDEN_NIFTY_PATH, ALPHA_SHIELD_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: "Alpha Shield",
    description: "High-growth midcap investing with intelligent gold protection. Allocates dynamically based on market valuation — more midcap when cheap, more gold when expensive.",
    returnRange: "15-18% p.a.",
    riskLevel: "Medium" as const,
    icon: <Zap className="w-6 h-6" />,
    href: ALPHA_SHIELD_PATH,
  },
  {
    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="relative overflow-hidden px-4 py-20 sm:px-6 sm:py-24 md:py-32"
      data-testid="section-strategies"
    >
      <div 
        className={`absolute top-1/2 left-1/2 h-[360px] w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/5 blur-3xl transition-all duration-1000 sm:h-[460px] sm:w-[460px] md:h-[600px] md:w-[600px] ${
          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={`mb-4 text-3xl font-bold transition-all duration-700 delay-100 sm:text-4xl md:text-5xl ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
            }`}
            data-testid="text-strategies-headline"
          >
            Choose Your Path
          </h2>
          <p 
            className={`mx-auto max-w-2xl text-base text-muted-foreground transition-all duration-700 delay-200 sm:text-lg md:text-xl ${
              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 gap-6 md:grid-cols-3"
          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">
          Golden Nifty and Alpha Shield are live. Flexi Momentum coming soon.
        </p>
      </div>
    </section>
  );
}
