import React, { useState, useEffect } from 'react';
import { 
  Monitor, 
  Map, 
  Key, 
  Globe, 
  Clock, 
  Zap, 
  MessageSquare, 
  Shield, 
  HelpCircle, 
  CheckCircle, 
  Code, 
  Smartphone, 
  Layout, 
  ChevronRight, 
  ChevronLeft,
  Timer as TimerIcon,
  Play,
  RotateCcw
} from 'lucide-react';

const App = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

const slides = [
    { id: 1, type: 'title', time: '30s' },
    { id: 2, type: 'icebreaker', time: '1m' },
    { id: 3, type: 'outcomes', time: '30s' },
    { id: 4, type: 'groundrules', time: '30s' },
    { id: 5, type: 'why', time: '30s' },
    { id: 6, type: 'roadmap-full', time: '1m' },
    { id: 7, type: 'roadmap-step-1-2', time: '45s' },
    { id: 8, type: 'roadmap-step-3-4', time: '45s' },
    { id: 9, type: 'roadmap-step-5-6', time: '45s' },
    { id: 10, type: 'crf-formula', time: '1m' },
    { id: 11, type: 'demo', time: '1m 45s' },
    { id: 12, type: 'activity', time: '3m' },
    { id: 13, type: 'summary', time: '1m' },
    { id: 14, type: 'assessment', time: '1m' },
    { id: 15, type: 'qanda', time: '1m 30s' },
    { id: 16, type: 'closing', time: '30s' },
  ];

const nextSlide = () => {
    if (currentSlide < slides.length - 1) setCurrentSlide(currentSlide + 1);
  };

const prevSlide = () => {
    if (currentSlide > 0) setCurrentSlide(currentSlide - 1);
  };

useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowRight') nextSlide();
      if (e.key === 'ArrowLeft') prevSlide();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentSlide]);

return (
    <div className="flex flex-col h-screen w-full bg-[#0a0f1a] text-slate-100 font-sans overflow-hidden selection:bg-emerald-500/30">
      {/* Background Grid Pattern */}
      <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'radial-gradient(#3b82f6 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>

{/* Slide Content Area */}
      <div className="flex-grow flex items-center justify-center p-8 relative z-10">
        <SlideRenderer slideType={slides[currentSlide].type} />
      </div>

{/* Footer / Controls */}
      <div className="h-20 bg-black/40 backdrop-blur-xl border-t border-white/10 flex items-center justify-between px-10 relative z-20">
        <div className="flex items-center gap-4">
          <span className="text-xs font-mono text-cyan-400 bg-cyan-400/10 px-2 py-1 rounded">SLIDE {currentSlide + 1} / {slides.length}</span>
          <span className="text-xs font-mono text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded">EST: {slides[currentSlide].time}</span>
        </div>

<div className="flex gap-4">
          <button onClick={prevSlide} disabled={currentSlide === 0} className="p-2 rounded-full bg-white/5 hover:bg-white/10 disabled:opacity-30 transition-all">
            <ChevronLeft size={24} />
          </button>
          <button onClick={nextSlide} disabled={currentSlide === slides.length - 1} className="p-2 rounded-full bg-gradient-to-r from-cyan-500 to-emerald-500 hover:shadow-[0_0_20px_rgba(16,185,129,0.4)] transition-all">
            <ChevronRight size={24} />
          </button>
        </div>
      </div>

{/* Progress Bar */}
      <div className="h-1 w-full bg-white/5 relative z-20">
        <div 
          className="h-full bg-gradient-to-r from-cyan-500 to-emerald-500 transition-all duration-300" 
          style={{ width: `${((currentSlide + 1) / slides.length) * 100}%` }}
        ></div>
      </div>
    </div>
  );
};

const SlideRenderer = ({ slideType }) => {
  switch (slideType) {
    case 'title': return <TitleSlide />;
    case 'icebreaker': return <IcebreakerSlide />;
    case 'outcomes': return <OutcomesSlide />;
    case 'groundrules': return <GroundRulesSlide />;
    case 'why': return <WhySlide />;
    case 'roadmap-full': return <RoadmapFullSlide />;
    case 'roadmap-step-1-2': return <RoadmapStepsSlide steps={[1, 2]} />;
    case 'roadmap-step-3-4': return <RoadmapStepsSlide steps={[3, 4]} />;
    case 'roadmap-step-5-6': return <RoadmapStepsSlide steps={[5, 6]} />;
    case 'crf-formula': return <CRFSlide />;
    case 'demo': return <DemoSlide />;
    case 'activity': return <ActivitySlide />;
    case 'summary': return <SummarySlide />;
    case 'assessment': return <AssessmentSlide />;
    case 'qanda': return <QASlide />;
    case 'closing': return <ClosingSlide />;
    default: return <TitleSlide />;
  }
};

// --- SLIDE COMPONENTS ---

const GlassCard = ({ children, className = "" }) => (
  <div className={`bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl shadow-2xl p-8 ${className}`}>
    {children}
  </div>
);

const TitleSlide = () => (
  <div className="text-center">
    <div className="inline-block px-4 py-1 bg-emerald-500/20 text-emerald-400 rounded-full text-sm font-semibold mb-6 border border-emerald-500/30 animate-pulse">
      AI TRANSFORMATION SERIES
    </div>
    <h1 className="text-7xl font-extrabold mb-4 bg-gradient-to-r from-white via-cyan-300 to-emerald-400 bg-clip-text text-transparent leading-tight">
      Rapid Personal Website <br /> Development
    </h1>
    <p className="text-2xl text-slate-400 mb-12 font-light">Using AI <span className="text-cyan-400 font-semibold italic">Vibe Coding</span></p>
    <div className="flex flex-col items-center">
      <div className="w-20 h-1 bg-gradient-to-r from-cyan-500 to-emerald-500 mb-6"></div>
      <p className="text-xl text-white font-medium">Ts Noridah Abu Bakar</p>
      <p className="text-sm text-slate-500 uppercase tracking-widest mt-1">Certified Trainer</p>
    </div>
  </div>
);

const IcebreakerSlide = () => (
  <div className="grid grid-cols-2 gap-12 max-w-5xl w-full">
    <GlassCard className="flex flex-col items-center justify-center border-emerald-500/30">
      <div className="w-48 h-48 bg-white p-2 rounded-xl">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://menti.com" alt="QR Code" className="w-full h-full" />
      </div>
      <p className="mt-4 text-cyan-400 font-mono">SCAN TO JOIN</p>
    </GlassCard>
    <div className="flex flex-col justify-center">
      <h2 className="text-4xl font-bold mb-8">Digital Icebreaker</h2>
      <div className="space-y-6">
        <div className="p-6 bg-white/5 rounded-xl border-l-4 border-emerald-500">
          <p className="text-xl">"How many hours did it take to build your first website?"</p>
        </div>
        <p className="text-slate-400 italic">Open Mentimeter and key in your thoughts!</p>
      </div>
    </div>
  </div>
);

const OutcomesSlide = () => (
  <div className="max-w-4xl w-full">
    <h2 className="text-4xl font-bold mb-12 text-center">Learning Outcomes</h2>
    <div className="grid grid-cols-3 gap-8">
      {[
        { icon: <Map className="text-emerald-400" />, text: "Explain the 6-step Vibe Coding roadmap." },
        { icon: <Key className="text-cyan-400" />, text: "Apply the C.R.F. framework for AI prompting." },
        { icon: <Monitor className="text-white" />, text: "Produce a functional personal website preview." }
      ].map((item, idx) => (
        <GlassCard key={idx} className="text-center group hover:bg-white/10 transition-all">
          <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
            {item.icon}
          </div>
          <p className="text-lg leading-relaxed">{item.text}</p>
        </GlassCard>
      ))}
    </div>
  </div>
);

const GroundRulesSlide = () => (
  <div className="max-w-3xl w-full">
    <h2 className="text-4xl font-bold mb-10 text-center">Ground Rules</h2>
    <div className="grid grid-cols-2 gap-6">
      {[
        { icon: <Clock />, label: "15 Minutes Total", sub: "Respect the timeline" },
        { icon: <Zap />, label: "Mic Muted", sub: "Unless in Q&A session" },
        { icon: <MessageSquare />, label: "Raise Hand", sub: "For questions or input" },
        { icon: <Shield />, label: "Environment", sub: "Stay focused & powered up" },
      ].map((rule, idx) => (
        <div key={idx} className="flex items-center gap-4 p-5 bg-white/5 rounded-2xl border border-white/5">
          <div className="text-emerald-400">{rule.icon}</div>
          <div>
            <p className="font-bold text-lg">{rule.label}</p>
            <p className="text-sm text-slate-500">{rule.sub}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const WhySlide = () => (
  <div className="max-w-5xl w-full flex flex-col items-center">
    <h2 className="text-4xl font-bold mb-12">The "Why" - Closing the Tech Gap</h2>
    <div className="flex gap-8 w-full">
      <GlassCard className="flex-1 border-red-500/20">
        <p className="text-red-400 uppercase text-xs tracking-widest mb-4 font-bold">Traditional Way</p>
        <ul className="space-y-4">
          <li className="flex items-center gap-2 text-slate-400"><div className="w-1.5 h-1.5 rounded-full bg-red-500"></div> 40+ Hours of development</li>
          <li className="flex items-center gap-2 text-slate-400"><div className="w-1.5 h-1.5 rounded-full bg-red-500"></div> Syntax errors & debugging</li>
          <li className="flex items-center gap-2 text-slate-400"><div className="w-1.5 h-1.5 rounded-full bg-red-500"></div> High design complexity</li>
        </ul>
      </GlassCard>
      <div className="flex items-center justify-center">
        <ChevronRight size={48} className="text-white/20" />
      </div>
      <GlassCard className="flex-1 border-emerald-500/40 bg-emerald-500/5">
        <p className="text-emerald-400 uppercase text-xs tracking-widest mb-4 font-bold">Vibe Coding Way</p>
        <ul className="space-y-4">
          <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> 1 Minute Generation</li>
          <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> Natural Language Logic</li>
          <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> Instant Visual Previews</li>
        </ul>
      </GlassCard>
    </div>
  </div>
);

const RoadmapFullSlide = () => (
  <div className="max-w-6xl w-full text-center">
    <h2 className="text-4xl font-bold mb-16 italic text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-emerald-400">The 6-Step Vibe Coding Roadmap</h2>
    <div className="relative flex justify-between items-center px-10">
      {/* Path Line */}
      <div className="absolute top-1/2 left-0 right-0 h-1 bg-white/10 -z-10 -translate-y-1/2 mx-20"></div>
      {[
        { n: 1, label: "Purpose" },
        { n: 2, label: "Domain" },
        { n: 3, label: "Hosting" },
        { n: 4, label: "Layout" },
        { n: 5, label: "Code" },
        { n: 6, label: "Deploy" }
      ].map((step) => (
        <div key={step.n} className="flex flex-col items-center">
          <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-emerald-500/20 border border-emerald-500/40 flex items-center justify-center text-2xl font-bold shadow-[0_0_15px_rgba(16,185,129,0.2)]">
            {step.n}
          </div>
          <p className="mt-4 font-semibold text-lg">{step.label}</p>
        </div>
      ))}
    </div>
  </div>
);

const RoadmapStepsSlide = ({ steps }) => (
  <div className="max-w-4xl w-full grid grid-cols-2 gap-8">
    {steps.map(s => {
      const info = [
        { title: "Define Purpose", desc: "Identify if you need a Professional CV, Portfolio, or a Business Landing Page." },
        { title: "Choose Domain", desc: "Select your digital address. Keep it memorable and professional." },
        { title: "Select Hosting", desc: "Choose where your files live (GitHub, Netlify, Vercel)." },
        { title: "Design Layout", desc: "Plan the visual structure and user journey map." },
        { title: "Code Frontend", desc: "This is the 'Vibe' stage! Use AI to generate HTML/CSS/JS." },
        { title: "Deploy", desc: "Go live! Copy-paste the code and hit publish." }
      ][s-1];
      return (
        <GlassCard key={s} className="border-cyan-500/30">
          <div className="text-5xl font-black text-cyan-500/20 mb-4">{s}</div>
          <h3 className="text-2xl font-bold mb-4">{info.title}</h3>
          <p className="text-slate-400 leading-relaxed text-lg">{info.desc}</p>
        </GlassCard>
      );
    })}
  </div>
);

const CRFSlide = () => (
  <div className="max-w-4xl w-full text-center">
    <h2 className="text-4xl font-bold mb-16">The Secret Sauce: C.R.F. Framework</h2>
    <div className="flex items-center justify-center gap-6">
      <div className="flex-1 p-8 rounded-3xl bg-cyan-500/10 border border-cyan-500/30">
        <h4 className="text-4xl font-bold text-cyan-400 mb-2">C</h4>
        <p className="font-semibold uppercase tracking-widest text-xs mb-4">Context</p>
        <p className="text-slate-300">Who are you and what is the goal?</p>
      </div>
      <div className="text-4xl font-bold text-white/20">+</div>
      <div className="flex-1 p-8 rounded-3xl bg-emerald-500/10 border border-emerald-500/30">
        <h4 className="text-4xl font-bold text-emerald-400 mb-2">R</h4>
        <p className="font-semibold uppercase tracking-widest text-xs mb-4">Requirements</p>
        <p className="text-slate-300">Features, colors, & specific sections.</p>
      </div>
      <div className="text-4xl font-bold text-white/20">+</div>
      <div className="flex-1 p-8 rounded-3xl bg-white/5 border border-white/20">
        <h4 className="text-4xl font-bold text-white mb-2">F</h4>
        <p className="font-semibold uppercase tracking-widest text-xs mb-4">Format</p>
        <p className="text-slate-300">How should the AI deliver results?</p>
      </div>
    </div>
    <div className="mt-12 text-5xl font-bold bg-gradient-to-r from-cyan-400 to-emerald-400 bg-clip-text text-transparent">
      = SUCCESSFUL VIBE
    </div>
  </div>
);

const DemoSlide = () => (
  <div className="max-w-5xl w-full">
    <h2 className="text-4xl font-bold mb-8 text-center">Live Demo: The "Gold Medal" Prompt</h2>
    <GlassCard className="bg-[#010a16] border-emerald-500/30 p-0 overflow-hidden font-mono text-sm leading-relaxed">
      <div className="bg-white/5 px-6 py-3 flex gap-2 border-b border-white/10">
        <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
        <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
        <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
      </div>
      <div className="p-8">
        <p className="text-cyan-400"><span className="text-slate-500">// Context</span></p>
        <p className="mb-4">"I am a professional developer building a high-end personal website using Vibe Coding..."</p>

<p className="text-emerald-400"><span className="text-slate-500">// Requirements</span></p>
        <p className="mb-4">"Visual Style: Modern card-based layout with Glassmorphism. Palette: Navy Blue (#002147) & Gold accents..."</p>

<p className="text-purple-400"><span className="text-slate-500">// Format</span></p>
        <p>"Provide solution in ONE single code block (HTML/CSS/JS) for immediate Copy and Paste experience."</p>
      </div>
    </GlassCard>
  </div>
);

const ActivitySlide = () => {
  const [seconds, setSeconds] = useState(180);
  const [isActive, setIsActive] = useState(false);

useEffect(() => {
    let interval = null;
    if (isActive && seconds > 0) {
      interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
      }, 1000);
    } else if (seconds === 0) {
      setIsActive(false);
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [isActive, seconds]);

const formatTime = (s) => {
    const mins = Math.floor(s / 60);
    const secs = s % 60;
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };

return (
    <div className="max-w-4xl w-full text-center">
      <div className="inline-flex items-center gap-3 px-6 py-2 bg-emerald-500/20 text-emerald-400 rounded-full mb-8 border border-emerald-500/30">
        <Zap size={20} />
        <span className="font-bold tracking-widest uppercase text-sm">Action Phase</span>
      </div>
      <h2 className="text-5xl font-black mb-12">Hands-on: The 1-Minute Build</h2>

<div className="grid grid-cols-2 gap-8 items-center">
        <div className="text-left space-y-6">
          {[
            "1. Access the AI Chat interface.",
            "2. Drag your 'Sample_Profile.txt' data.",
            "3. Apply the C.R.F. Master Prompt.",
            "4. Preview and tweak your 'Vibe'!"
          ].map((text, i) => (
            <div key={i} className="flex gap-4 items-start">
              <div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center flex-shrink-0 text-cyan-400 font-bold border border-cyan-500/30">{i+1}</div>
              <p className="text-xl text-slate-300">{text}</p>
            </div>
          ))}
        </div>

<GlassCard className="flex flex-col items-center justify-center p-12 bg-white/5 border-emerald-500/20">
          <TimerIcon size={48} className="text-emerald-500 mb-4" />
          <div className="text-7xl font-mono mb-8 font-bold tracking-tighter">
            {formatTime(seconds)}
          </div>
          <div className="flex gap-4">
            <button 
              onClick={() => setIsActive(!isActive)}
              className="px-6 py-2 rounded-xl bg-emerald-500 text-black font-bold flex items-center gap-2"
            >
              {isActive ? 'PAUSE' : 'START'}
            </button>
            <button 
              onClick={() => { setSeconds(180); setIsActive(false); }}
              className="p-2 rounded-xl bg-white/10"
            >
              <RotateCcw size={20} />
            </button>
          </div>
        </GlassCard>
      </div>
    </div>
  );
};

const SummarySlide = () => (
  <div className="max-w-3xl w-full">
    <h2 className="text-4xl font-bold mb-12 text-center">Summary Checklist</h2>
    <div className="space-y-6">
      {[
        "Followed the 6-Step Roadmap?",
        "Applied C.R.F. Framework correctly?",
        "Website Preview functional and live?",
        "Vibe confirmed and personal brand ready?"
      ].map((item, idx) => (
        <div key={idx} className="flex items-center gap-6 p-6 bg-white/5 rounded-2xl border border-white/5">
          <div className="w-10 h-10 rounded-full bg-emerald-500 flex items-center justify-center text-black">
            <CheckCircle size={24} />
          </div>
          <p className="text-2xl font-medium">{item}</p>
        </div>
      ))}
    </div>
  </div>
);

const AssessmentSlide = () => (
  <div className="max-w-4xl w-full">
    <h2 className="text-4xl font-bold mb-12 text-center">Knowledge Check</h2>
    <div className="grid grid-cols-2 gap-8">
      <GlassCard className="border-cyan-500/30">
        <p className="text-cyan-400 font-mono mb-2 uppercase tracking-widest text-xs">Question 1</p>
        <p className="text-xl font-bold">What does the 'F' in C.R.F. stand for?</p>
        <div className="mt-6 opacity-0 hover:opacity-100 transition-opacity p-4 bg-emerald-500/10 rounded-xl text-emerald-400 font-bold border border-emerald-500/30">
          ANSWER: Format
        </div>
      </GlassCard>
      <GlassCard className="border-cyan-500/30">
        <p className="text-cyan-400 font-mono mb-2 uppercase tracking-widest text-xs">Question 2</p>
        <p className="text-xl font-bold">Which roadmap step involves the actual coding process?</p>
        <div className="mt-6 opacity-0 hover:opacity-100 transition-opacity p-4 bg-emerald-500/10 rounded-xl text-emerald-400 font-bold border border-emerald-500/30">
          ANSWER: Step 5 (Code Frontend)
        </div>
      </GlassCard>
    </div>
  </div>
);

const QASlide = () => (
  <div className="max-w-5xl w-full grid grid-cols-2 gap-12 items-center">
    <div className="text-center">
      <div className="w-32 h-32 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-8 border border-white/20">
        <HelpCircle size={64} className="text-emerald-400" />
      </div>
      <h2 className="text-5xl font-bold mb-6">Any Questions?</h2>
      <p className="text-xl text-slate-400">Feel free to ask about Prompt Engineering or AI Vibe Coding.</p>
    </div>
    <GlassCard className="text-center border-emerald-500/30">
      <p className="text-xl font-bold mb-6">Post-Session Survey</p>
      <div className="w-48 h-48 bg-white p-2 rounded-xl mx-auto mb-4">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://docs.google.com/forms" alt="QR Code" className="w-full h-full" />
      </div>
      <p className="text-sm text-slate-500">Scan to share your feedback!</p>
      <div className="mt-6 pt-6 border-t border-white/10">
        <p className="text-emerald-400 font-medium italic">"On a scale of 1-5, how likely are you to use this for your CV?"</p>
      </div>
    </GlassCard>
  </div>
);

const ClosingSlide = () => (
  <div className="text-center">
    <div className="mb-8 flex justify-center">
      <div className="w-24 h-24 bg-gradient-to-r from-cyan-500 to-emerald-500 rounded-3xl p-1 shadow-[0_0_50px_rgba(6,182,212,0.5)]">
        <div className="w-full h-full bg-[#0a0f1a] rounded-[22px] flex items-center justify-center">
          <Code size={48} className="text-white" />
        </div>
      </div>
    </div>
    <h2 className="text-6xl font-black mb-6 italic tracking-tighter">Your brand is your vibe.</h2>
    <p className="text-3xl text-emerald-400 font-light mb-12">Now, go <span className="font-bold underline decoration-cyan-400 underline-offset-8 uppercase tracking-widest">code it.</span></p>
    <div className="space-y-1">
      <p className="text-xl font-bold">Ts Noridah Abu Bakar</p>
      <p className="text-sm text-slate-500">Thank you for attending!</p>
    </div>
  </div>
);

export default App;