import React, { useState } from 'react';
import { Sparkles, Zap, Newspaper, Heart, BarChart3, Layers, Rocket, Target } from 'lucide-react';

const StrategyCard = ({ label, title, content, icon: Icon }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  const handleFlip = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <div 
      className="group h-80 w-full perspective-1000 cursor-pointer"
      onClick={handleFlip}
    >
      <div className={`relative h-full w-full transition-all duration-500 transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`}>
        
        {/* --- Front of Card --- */}
        <div className="absolute inset-0 h-full w-full backface-hidden rounded-xl border border-white/10 bg-white/5 p-6 backdrop-blur-sm transition-all duration-500 group-hover:bg-white/10 group-hover:border-purple-500/50 group-hover:shadow-[0_0_30px_rgba(168,85,247,0.15)] flex flex-col items-center justify-center text-center shadow-xl overflow-hidden">
          
          {/* Neon Glowing Corner Animation */}
          {/* Top Left */}
          <div className="absolute top-2 left-2 w-2 h-2 border-t-2 border-l-2 border-transparent transition-all duration-500 ease-out group-hover:w-8 group-hover:h-8 group-hover:top-0 group-hover:left-0 group-hover:border-purple-400 group-hover:drop-shadow-[0_0_8px_rgba(192,132,252,0.8)] opacity-0 group-hover:opacity-100 rounded-tl-lg" />
          {/* Top Right */}
          <div className="absolute top-2 right-2 w-2 h-2 border-t-2 border-r-2 border-transparent transition-all duration-500 ease-out group-hover:w-8 group-hover:h-8 group-hover:top-0 group-hover:right-0 group-hover:border-purple-400 group-hover:drop-shadow-[0_0_8px_rgba(192,132,252,0.8)] opacity-0 group-hover:opacity-100 rounded-tr-lg" />
          {/* Bottom Left */}
          <div className="absolute bottom-2 left-2 w-2 h-2 border-b-2 border-l-2 border-transparent transition-all duration-500 ease-out group-hover:w-8 group-hover:h-8 group-hover:bottom-0 group-hover:left-0 group-hover:border-purple-400 group-hover:drop-shadow-[0_0_8px_rgba(192,132,252,0.8)] opacity-0 group-hover:opacity-100 rounded-bl-lg" />
          {/* Bottom Right */}
          <div className="absolute bottom-2 right-2 w-2 h-2 border-b-2 border-r-2 border-transparent transition-all duration-500 ease-out group-hover:w-8 group-hover:h-8 group-hover:bottom-0 group-hover:right-0 group-hover:border-purple-400 group-hover:drop-shadow-[0_0_8px_rgba(192,132,252,0.8)] opacity-0 group-hover:opacity-100 rounded-br-lg" />

          {/* Decorative Markers */}
          <div className="absolute top-5 left-5 text-purple-500/30 transition-all duration-700 group-hover:rotate-180 group-hover:text-purple-300 group-hover:scale-125">+</div>
          <div className="absolute top-5 right-5 text-purple-500/30 transition-all duration-700 group-hover:-rotate-180 group-hover:text-purple-300 group-hover:scale-125">+</div>
          <div className="absolute bottom-5 left-5 text-purple-500/30 transition-all duration-700 group-hover:-rotate-180 group-hover:text-purple-300 group-hover:scale-125">+</div>
          <div className="absolute bottom-5 right-5 text-purple-500/30 transition-all duration-700 group-hover:rotate-180 group-hover:text-purple-300 group-hover:scale-125">+</div>

          {/* Front Content */}
          <div className="mb-4 text-purple-400 opacity-80 group-hover:scale-110 transition-transform duration-500">
            <Icon size={40} />
          </div>
          <h2 className="text-2xl font-serif font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-100 to-white mb-2 relative z-10 transition-transform duration-500 group-hover:scale-105 group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]">
            {label}
          </h2>
          <p className="text-sm text-gray-500 font-light tracking-[0.2em] uppercase relative z-10 group-hover:text-purple-200 transition-colors duration-300">
            {title}
          </p>
        </div>

        {/* --- Back of Card --- */}
        <div className="absolute inset-0 h-full w-full backface-hidden rotate-y-180 rounded-xl border border-purple-400/30 bg-gradient-to-b from-[#1a1033] to-[#0d0714] p-6 backdrop-blur-md flex flex-col items-center justify-center text-center shadow-[0_0_30px_rgba(147,51,234,0.2)]">
           {/* Decorative Markers (Back) */}
          <div className="absolute top-3 left-3 text-purple-300/20">+</div>
          <div className="absolute top-3 right-3 text-purple-300/20">+</div>
          <div className="absolute bottom-3 left-3 text-purple-300/20">+</div>
          <div className="absolute bottom-3 right-3 text-purple-300/20">+</div>

          <h3 className="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-purple-200 mb-4 drop-shadow-sm uppercase tracking-wide leading-tight">
            {title}
          </h3>
          <div className="w-full h-[1px] bg-gradient-to-r from-transparent via-purple-500/50 to-transparent mb-4"></div>
          <div className="text-purple-100/80 text-sm leading-relaxed overflow-y-auto max-h-[160px] custom-scrollbar font-light whitespace-pre-line w-full text-left">
            {content}
          </div>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  // Strategy Data Mapped from your content
  const strategyData = [
    {
      id: 1,
      label: "Bucket 01",
      title: "Motivation + Build-in-Public",
      icon: Zap,
      content: "• Focused on motivating viewers to build, vibe-code, and generate apps using real case studies.\n• Inspires action rather than just consumption.\n• Uses high-energy BGM to keep engagement high.\n• Case-study-driven storytelling helps viewers relate.\n\nResult: Contributing significantly to follower growth and bonding."
    },
    {
      id: 2,
      label: "Bucket 02",
      title: "AI Updates & Breaking News",
      icon: Newspaper,
      content: "• We cover major developments: Google launches, new AI tools, Agents, and updates.\n• Speed is the key differentiator.\n• Positions the account as a go-to source for AI.\n\nResult: Consistently drives high reach and visibility."
    },
    {
      id: 3,
      label: "Bucket 03",
      title: "Resource-First Content",
      icon: Heart,
      content: "• Purely designed to give back to the audience.\n• Intent is long-term trust and attachment, not immediate conversion.\n• Resources act as a strong follower acquisition lever."
    },
    {
      id: 4,
      label: "Metrics",
      title: "Case Study Performance",
      icon: BarChart3,
      content: "Strong Top-of-Funnel Performance:\n\n• Motivation + Case Study videos have crossed 46K and 12K views.\n• Update-based content has hit 87.6K and 21.9K views."
    },
    {
      id: 5,
      label: "Format",
      title: "Carousels + Heavy Resources",
      icon: Layers,
      content: "• Experimenting with light but resource-dense carousels.\n• These are performing exceptionally well for Saves and Shares.\n• Validates that the audience values density of information."
    },
    {
      id: 6,
      label: "Next Steps",
      title: "Short-Term Plan",
      icon: Rocket,
      content: "1. Double down on Agentic AI videos (focus on market disruptors).\n2. Introduce Ajay’s tutorial snippets from sessions.\n\nWhy? Core content buckets are already validated and working."
    },
    {
      id: 7,
      label: "Summary",
      title: "Overall Strategy",
      icon: Target,
      content: "The strategy is stable, scalable, and performance-driven.\n\nWe have clear buckets serving specific goals:\n• Reach\n• Engagement\n• Trust\n• Growth"
    }
  ];

  return (
    <div className="min-h-screen bg-[#050505] text-white overflow-x-hidden selection:bg-purple-500/30 font-sans">
      
      {/* Background Ambience */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-purple-900/20 rounded-full blur-[120px] mix-blend-screen animate-pulse" />
        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px] mix-blend-screen" />
      </div>

      <div className="relative z-10 container mx-auto px-4 py-16 max-w-7xl">
        
        {/* Header Section */}
        <header className="text-center mb-20 space-y-6">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-medium text-purple-300 uppercase tracking-widest mb-4 shadow-[0_0_15px_rgba(168,85,247,0.1)]">
            <Sparkles size={14} className="text-purple-400" />
            Confidential Report
          </div>
          
          <h1 className="text-5xl md:text-7xl font-serif font-bold tracking-tight text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
            Ajay's <span className="text-transparent bg-clip-text bg-gradient-to-br from-purple-400 to-purple-600">Account</span>
          </h1>
          
          <p className="text-gray-400 max-w-2xl mx-auto text-lg leading-relaxed font-light">
            Content Strategy Summary & Performance Analysis
          </p>
          <div className="h-[1px] w-24 bg-gradient-to-r from-transparent via-purple-500 to-transparent mx-auto mt-6"></div>
        </header>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 md:gap-10 pb-20">
          {strategyData.map((item) => (
            <StrategyCard 
              key={item.id} 
              label={item.label} 
              title={item.title} 
              content={item.content}
              icon={item.icon}
            />
          ))}
        </div>

        {/* Footer */}
        <footer className="text-center text-gray-600 text-sm py-12 border-t border-white/5 flex flex-col gap-2">
          <p>Strategy stable and scalable.</p>
          <p className="text-xs font-mono text-purple-500/50">STATUS: ACTIVE</p>
        </footer>

      </div>

      {/* Global CSS for 3D Transforms and Scrollbars */}
      <style>{`
        .perspective-1000 {
          perspective: 1000px;
        }
        .transform-style-3d {
          transform-style: preserve-3d;
        }
        .backface-hidden {
          backface-visibility: hidden;
        }
        .rotate-y-180 {
          transform: rotateY(180deg);
        }
        /* Glowing Text Utility */
        .text-shadow-glow {
          text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
        }
        
        /* Custom Scrollbar for Card Backs */
        .custom-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.02);
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: rgba(168, 85, 247, 0.3);
          border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: rgba(168, 85, 247, 0.5);
        }
      `}</style>
    </div>
  );
}