import { useCallback, useState } from "react";
import { StoryOne } from "./Story1";
import { StoryTwo } from "./Story2";
import { StoryThree } from "./Story3";

export function StorySec() {
  const [activeStory, setActiveStory] = useState("1");

  const handleStoryChange = useCallback((storyId: string) => {
    setActiveStory(storyId);
  }, []);

  const stories = [
    {
      id: "1",
      title: "Brand Story",
      subtitle: "What is ANTL?",
      component: <StoryOne />
    },
    {
      id: "2", 
      title: "Operations",
      subtitle: "Fractal structure",
      component: <StoryTwo />
    },
    {
      id: "3",
      title: "Organization", 
      subtitle: "Excellence in structure",
      component: <StoryThree />
    }
  ];

  return (
    <div className="w-full max-w-7xl mx-auto px-6 py-20">
      {/* Navigation Pills */}
      <div className="flex flex-wrap gap-2 mb-12 justify-center lg:justify-start">
        {stories.map((story) => (
          <button
            key={story.id}
            onClick={() => handleStoryChange(story.id)}
            onMouseEnter={() => handleStoryChange(story.id)}
            className={`
              group relative px-6 py-3 rounded-full transition-all duration-500 ease-out bg-white/10 border border-black/20
              ${activeStory === story.id 
                ? 'text-gray-900 shadow-2xl' 
                : 'text-gray-700 hover:text-gray-900 hover:bg-white/5'
              }
            `}
          >
            {/* Active background gradient */}
            {activeStory === story.id && (
              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 opacity-90 animate-pulse" />
            )}
            
            {/* Content */}
            <div className="relative z-10 flex flex-col items-center">
              <span className="text-sm font-semibold text-gray-900">{story.title}</span>
              <span className="text-xs opacity-80 text-gray-700">{story.subtitle}</span>
            </div>
            
            {/* Hover effect */}
            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-yellow-400/20 via-red-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          </button>
        ))}
      </div>

      {/* Story Content */}
      <div className="relative min-h-[300px]">
        {/* Background decoration */}
        <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-yellow-400/10 to-pink-500/10 rounded-full blur-3xl" />
        <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-gradient-to-tr from-blue-500/10 to-purple-500/10 rounded-full blur-3xl" />
        
        {/* Content with smooth transitions */}
        <div className="relative z-10">
          {stories.map((story) => (
            <div
              key={story.id}
              className={`
                transition-all duration-700 ease-out
                ${activeStory === story.id 
                  ? 'opacity-100 translate-y-0' 
                  : 'opacity-0 translate-y-8 absolute inset-0 pointer-events-none'
                }
              `}
            >
              {story.component}
            </div>
          ))}
        </div>
      </div>

      {/* Progress indicator */}
      <div className="flex justify-center mt-8 space-x-2">
        {stories.map((story) => (
          <div
            key={story.id}
            className={`
              h-1 rounded-full transition-all duration-500
              ${activeStory === story.id 
                ? 'w-12 bg-gradient-to-r from-yellow-400 to-pink-500' 
                : 'w-6 bg-white/20'
              }
            `}
          />
        ))}
      </div>
    </div>
  );
}