import React, { useState, useEffect } from 'react';

const WhyChooseUs: React.FC = () => {
  const points = [
    { title: "99.2% Settlement", subtitle: "Industry leading claim record", icon: "🏆" },
    { title: "24/7 Support", subtitle: "Round the clock assistance", icon: "📞" },
    { title: "Instant Policy", subtitle: "Buy and download in 2 minutes", icon: "⚡" },
    { title: "Paperless Claims", subtitle: "Fully digital hassle-free process", icon: "📲" },
    { title: "Lowest Prices", subtitle: "Best quotes guaranteed", icon: "💰" }
  ];

  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % points.length);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="bg-[#f1f5f9] rounded-3xl p-6 border border-slate-200 overflow-hidden relative">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-[#1a2b4b] text-xs font-black uppercase tracking-widest">Why Choose Us?</h3>
        <div className="flex gap-1">
          {points.map((_, i) => (
            <div 
              key={i} 
              className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${i === currentIndex ? 'bg-[#e31e24] w-4' : 'bg-slate-300'}`}
            />
          ))}
        </div>
      </div>
      
      <div className="relative h-16">
        {points.map((point, idx) => (
          <div
            key={idx}
            className={`absolute inset-0 flex items-center gap-4 transition-all duration-700 ease-in-out ${
              idx === currentIndex ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-8 pointer-events-none'
            }`}
          >
            <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm border border-slate-100">
              {point.icon}
            </div>
            <div>
              <h4 className="text-[#1a2b4b] font-bold text-sm leading-none mb-1">{point.title}</h4>
              <p className="text-slate-500 text-[11px] font-medium">{point.subtitle}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default WhyChooseUs;