import { useEffect, useRef, useState } from "react";
import { Shield, Lock, CheckCircle } from "lucide-react";

const brokers = [
  { name: "Zerodha", initials: "Z" },
  { name: "Groww", initials: "G" },
  { name: "Upstox", initials: "U" },
  { name: "Angel One", initials: "A" },
  { name: "ICICI Direct", initials: "I" },
  { name: "HDFC Securities", initials: "H" },
];

const trustPoints = [
  { icon: <Shield className="w-5 h-5" />, text: "SEBI Registered" },
  { icon: <Lock className="w-5 h-5" />, text: "Bank-grade Security" },
  { icon: <CheckCircle className="w-5 h-5" />, text: "Audited Annually" },
];

export default function TrustSection() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [hoveredBroker, setHoveredBroker] = useState<number | null>(null);

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

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

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

  return (
    <section
      ref={sectionRef}
      className="py-32 px-6 bg-card/30 relative overflow-hidden"
      data-testid="section-trust"
    >
      <div className="absolute inset-0 pointer-events-none">
        <div 
          className={`absolute -left-32 top-1/2 -translate-y-1/2 w-64 h-64 bg-chart-2/5 rounded-full blur-3xl transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-20"
          }`}
        />
        <div 
          className={`absolute -right-32 top-1/3 w-64 h-64 bg-primary/5 rounded-full blur-3xl transition-all duration-1000 delay-300 ${
            isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-20"
          }`}
        />
      </div>

      <div className="max-w-4xl 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"
            }`}
          >
            Your Money, Your Control
          </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-trust-headline"
          >
            We Never Hold Your Money
          </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"
            }`}
          >
            Your investments stay with your broker. We only provide the strategy.
          </p>
        </div>

        <div className="flex items-center justify-center gap-3 mb-12 flex-wrap">
          {trustPoints.map((point, index) => (
            <div
              key={point.text}
              className={`flex items-center gap-2 px-4 py-2 rounded-full bg-card border border-card-border transition-all duration-500 group cursor-default ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
              style={{ transitionDelay: `${300 + index * 100}ms` }}
            >
              <span className="text-primary transition-transform duration-300 group-hover:scale-110">
                {point.icon}
              </span>
              <span className="text-sm font-medium">{point.text}</span>
            </div>
          ))}
        </div>

        <div className="text-center mb-8">
          <p 
            className={`text-sm text-muted-foreground uppercase tracking-wide transition-all duration-500 delay-500 ${
              isVisible ? "opacity-100" : "opacity-0"
            }`}
          >
            Trusted Partner Brokers
          </p>
        </div>

        <div className="flex items-center justify-center gap-6 flex-wrap">
          {brokers.map((broker, index) => (
            <div
              key={broker.name}
              className={`relative transition-all duration-500 ${
                isVisible ? "opacity-100 scale-100" : "opacity-0 scale-90"
              }`}
              style={{ transitionDelay: `${600 + index * 80}ms` }}
              onMouseEnter={() => setHoveredBroker(index)}
              onMouseLeave={() => setHoveredBroker(null)}
            >
              <div
                className={`w-16 h-16 rounded-xl bg-card border border-card-border flex items-center justify-center transition-all duration-300 cursor-pointer ${
                  hoveredBroker === index 
                    ? "bg-primary/10 border-primary/30 scale-110 shadow-lg shadow-primary/10" 
                    : ""
                }`}
                title={broker.name}
                data-testid={`logo-broker-${broker.name.toLowerCase().replace(/\s/g, "-")}`}
              >
                <span 
                  className={`text-xl font-bold transition-colors duration-300 ${
                    hoveredBroker === index ? "text-primary" : "text-muted-foreground"
                  }`}
                >
                  {broker.initials}
                </span>
              </div>
              <div 
                className={`absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs text-muted-foreground whitespace-nowrap transition-all duration-300 ${
                  hoveredBroker === index ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
                }`}
              >
                {broker.name}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
