import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, Lock, Zap, TrendingUp, Database, RefreshCw, DollarSign, Rocket, Award } from 'lucide-react';

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

  const slides = [
    {
      title: "Stop the Leak: Reclaim Lost Profit",
      icon: <Lock className="w-20 h-20 text-red-500" />,
      content: (
        <div className="space-y-6">
          <div className="bg-red-50 border-l-4 border-red-500 p-6 rounded">
            <h3 className="text-3xl font-bold text-red-700 mb-2">₹15-20 Crore</h3>
            <p className="text-xl text-gray-700">Lost annually due to attendance fraud & inefficiencies</p>
          </div>
          <div className="grid grid-cols-3 gap-4 mt-8">
            <div className="bg-white p-4 rounded shadow">
              <p className="text-lg font-semibold text-gray-800">Buddy Punching</p>
              <p className="text-sm text-gray-600">Ghost hours paid</p>
            </div>
            <div className="bg-white p-4 rounded shadow">
              <p className="text-lg font-semibold text-gray-800">Time Theft</p>
              <p className="text-sm text-gray-600">Inflated work hours</p>
            </div>
            <div className="bg-white p-4 rounded shadow">
              <p className="text-lg font-semibold text-gray-800">Manual Errors</p>
              <p className="text-sm text-gray-600">Costly mistakes</p>
            </div>
          </div>
          <p className="text-xl text-center text-gray-700 font-semibold mt-8">
            It's time to plug the leak.
          </p>
        </div>
      ),
      notes: "In pharma, precision and compliance are everything. But outdated attendance systems are quietly draining profits—₹15–20 crore annually across large operations."
    },
    {
      title: "Introducing QuickHR: The Smart Solution",
      icon: <Zap className="w-20 h-20 text-blue-500" />,
      content: (
        <div className="space-y-8">
          <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-8 rounded-lg shadow-lg">
            <h3 className="text-4xl font-bold mb-4">QuickHR</h3>
            <p className="text-2xl">AI-Powered Attendance System</p>
          </div>
          <div className="grid grid-cols-3 gap-6">
            <div className="text-center p-6 bg-blue-50 rounded-lg">
              <div className="text-5xl mb-3">🔒</div>
              <h4 className="text-xl font-bold text-gray-800">Tamper-Proof</h4>
              <p className="text-gray-600 mt-2">Biometric verification</p>
            </div>
            <div className="text-center p-6 bg-blue-50 rounded-lg">
              <div className="text-5xl mb-3">👋</div>
              <h4 className="text-xl font-bold text-gray-800">Touchless</h4>
              <p className="text-gray-600 mt-2">Hygienic & safe</p>
            </div>
            <div className="text-center p-6 bg-blue-50 rounded-lg">
              <div className="text-5xl mb-3">⚡</div>
              <h4 className="text-xl font-bold text-gray-800">Seamless</h4>
              <p className="text-gray-600 mt-2">3-second clock-in</p>
            </div>
          </div>
          <div className="text-center mt-8">
            <p className="text-xl text-gray-700 font-semibold">No cards. No passwords. Just your face.</p>
          </div>
        </div>
      ),
      notes: "QuickHR is a smart, AI-based attendance system. Employees clock in with just their face—no cards to forget, no passwords to share, and no room for manipulation."
    },
    {
      title: "AI-Powered Fraud Prevention",
      icon: <Lock className="w-20 h-20 text-green-500" />,
      content: (
        <div className="space-y-6">
          <div className="bg-green-50 border-2 border-green-500 p-6 rounded-lg">
            <h3 className="text-2xl font-bold text-green-700 mb-3">99.7% Accuracy</h3>
            <p className="text-lg text-gray-700">Only the right person clocks in—every time</p>
          </div>
          <div className="grid grid-cols-2 gap-6 mt-8">
            <div className="bg-white p-6 rounded shadow-lg border-l-4 border-red-500">
              <h4 className="text-xl font-bold text-gray-800 mb-3">❌ BLOCKS</h4>
              <ul className="space-y-2 text-gray-700">
                <li>• Buddy Punching</li>
                <li>• Time Theft</li>
                <li>• Ghost Entries</li>
                <li>• Credential Sharing</li>
              </ul>
            </div>
            <div className="bg-white p-6 rounded shadow-lg border-l-4 border-green-500">
              <h4 className="text-xl font-bold text-gray-800 mb-3">✓ ENSURES</h4>
              <ul className="space-y-2 text-gray-700">
                <li>• Full Audit Trail</li>
                <li>• Tamper-Proof Logs</li>
                <li>• Regulatory Compliance</li>
                <li>• Court-Admissible Data</li>
              </ul>
            </div>
          </div>
          <div className="bg-blue-100 p-4 rounded mt-6">
            <p className="text-center text-lg text-gray-800 font-semibold">
              🛡️ Perfect for FDA Audits & Compliance Checks
            </p>
          </div>
        </div>
      ),
      notes: "Facial recognition ensures only the right person can clock in. It blocks buddy punching, time theft, and ghost entries—critical in regulated pharma environments."
    },
    {
      title: "Automated Real-Time Overtime Calculations",
      icon: <TrendingUp className="w-20 h-20 text-purple-500" />,
      content: (
        <div className="space-y-6">
          <div className="grid grid-cols-2 gap-6">
            <div className="bg-red-50 p-6 rounded-lg border-2 border-red-300">
              <h4 className="text-xl font-bold text-red-700 mb-4">❌ Before: Manual</h4>
              <ul className="space-y-3 text-gray-700">
                <li>📊 3-5 days/month reconciling</li>
                <li>❌ Human errors & disputes</li>
                <li>📝 Spreadsheet chaos</li>
                <li>⚠️ Audit vulnerabilities</li>
                <li>💸 Over/underpayments</li>
              </ul>
            </div>
            <div className="bg-green-50 p-6 rounded-lg border-2 border-green-300">
              <h4 className="text-xl font-bold text-green-700 mb-4">✓ After: QuickHR</h4>
              <ul className="space-y-3 text-gray-700">
                <li>⚡ Real-time calculations</li>
                <li>✓ Zero manual errors</li>
                <li>🔄 Automatic rule application</li>
                <li>📋 Audit-ready reports</li>
                <li>💰 Accurate payroll</li>
              </ul>
            </div>
          </div>
          <div className="bg-purple-100 p-6 rounded-lg mt-6">
            <h3 className="text-2xl font-bold text-purple-800 text-center mb-2">
              Save 60+ Hours/Month
            </h3>
            <p className="text-center text-gray-700 text-lg">
              Free your HR team for strategic work, not data cleanup
            </p>
          </div>
        </div>
      ),
      notes: "QuickHR calculates overtime in real time. No spreadsheets, no disputes. Fully auditable—perfect for compliance and labor law adherence."
    },
    {
      title: "Real-Time Data & Visualization",
      icon: <Database className="w-20 h-20 text-indigo-500" />,
      content: (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-indigo-500 to-purple-500 text-white p-6 rounded-lg">
            <h3 className="text-2xl font-bold mb-2">Live Dashboard</h3>
            <p className="text-lg">Transparent insights. Instant alerts. Smarter decisions.</p>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-white p-5 rounded shadow border-t-4 border-blue-500">
              <div className="text-3xl mb-2">👥</div>
              <h4 className="font-bold text-gray-800 mb-1">Who's On-Site</h4>
              <p className="text-sm text-gray-600">Real-time headcount</p>
            </div>
            <div className="bg-white p-5 rounded shadow border-t-4 border-yellow-500">
              <div className="text-3xl mb-2">⏰</div>
              <h4 className="font-bold text-gray-800 mb-1">Punctuality</h4>
              <p className="text-sm text-gray-600">Department trends</p>
            </div>
            <div className="bg-white p-5 rounded shadow border-t-4 border-red-500">
              <div className="text-3xl mb-2">📈</div>
              <h4 className="font-bold text-gray-800 mb-1">Overtime</h4>
              <p className="text-sm text-gray-600">Cost hotspots</p>
            </div>
          </div>
          <div className="bg-indigo-50 p-6 rounded-lg mt-6">
            <p className="text-lg text-gray-800 font-semibold text-center">
              Act proactively on attendance issues—not reactively weeks later
            </p>
          </div>
          <div className="grid grid-cols-2 gap-4 mt-4">
            <div className="text-center p-4 bg-white rounded shadow">
              <p className="text-sm text-gray-600">Emergency Roll Call</p>
              <p className="font-bold text-gray-800">Instant</p>
            </div>
            <div className="text-center p-4 bg-white rounded shadow">
              <p className="text-sm text-gray-600">Compliance Reports</p>
              <p className="font-bold text-gray-800">One Click</p>
            </div>
          </div>
        </div>
      ),
      notes: "Management gets real-time visibility—who's on time, who's late, who's working overtime. Act instantly, not after the fact."
    },
    {
      title: "Seamless Integration with PACE",
      icon: <RefreshCw className="w-20 h-20 text-teal-500" />,
      content: (
        <div className="space-y-8">
          <div className="bg-teal-50 border-2 border-teal-500 p-6 rounded-lg">
            <h3 className="text-2xl font-bold text-teal-700 mb-3">No Disruption. No Retraining.</h3>
            <p className="text-lg text-gray-700">QuickHR works WITH your existing PACE system</p>
          </div>
          <div className="flex items-center justify-center space-x-4">
            <div className="bg-blue-500 text-white p-6 rounded-lg shadow-lg text-center flex-1">
              <div className="text-4xl mb-2">📱</div>
              <p className="font-bold">QuickHR Device</p>
              <p className="text-sm mt-1">Biometric Clock-in</p>
            </div>
            <div className="text-4xl text-gray-400">→</div>
            <div className="bg-green-500 text-white p-6 rounded-lg shadow-lg text-center flex-1">
              <div className="text-4xl mb-2">📊</div>
              <p className="font-bold">HR Reports</p>
              <p className="text-sm mt-1">Excel/CSV Ready</p>
            </div>
            <div className="text-4xl text-gray-400">→</div>
            <div className="bg-purple-500 text-white p-6 rounded-lg shadow-lg text-center flex-1">
              <div className="text-4xl mb-2">💼</div>
              <p className="font-bold">PACE System</p>
              <p className="text-sm mt-1">Your Workflow</p>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4 mt-6">
            <div className="bg-white p-4 rounded shadow text-center">
              <p className="font-bold text-green-600 text-lg">✓ Zero Downtime</p>
            </div>
            <div className="bg-white p-4 rounded shadow text-center">
              <p className="font-bold text-green-600 text-lg">✓ No Workflow Change</p>
            </div>
          </div>
          <p className="text-center text-lg text-gray-700 font-semibold mt-4">
            Better data into your existing system—that's it.
          </p>
        </div>
      ),
      notes: "QuickHR integrates directly with PACE. No need to change workflows. We provide clean, HR-ready reports in your preferred format."
    },
    {
      title: "The Financial Impact: Proven ROI",
      icon: <DollarSign className="w-20 h-20 text-yellow-500" />,
      content: (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white p-8 rounded-lg shadow-xl text-center">
            <h3 className="text-5xl font-bold mb-2">₹20 Crore</h3>
            <p className="text-2xl">Annual Savings Potential</p>
          </div>
          <div className="grid grid-cols-3 gap-4 mt-6">
            <div className="bg-white p-5 rounded-lg shadow-lg border-t-4 border-green-500">
              <h4 className="font-bold text-gray-800 mb-2">Fraud Elimination</h4>
              <p className="text-2xl font-bold text-green-600">₹8-12 Cr</p>
              <p className="text-sm text-gray-600 mt-1">5-10% labor cost recovery</p>
            </div>
            <div className="bg-white p-5 rounded-lg shadow-lg border-t-4 border-blue-500">
              <h4 className="font-bold text-gray-800 mb-2">OT Accuracy</h4>
              <p className="text-2xl font-bold text-blue-600">₹3-5 Cr</p>
              <p className="text-sm text-gray-600 mt-1">No overpayments/disputes</p>
            </div>
            <div className="bg-white p-5 rounded-lg shadow-lg border-t-4 border-purple-500">
              <h4 className="font-bold text-gray-800 mb-2">Admin Efficiency</h4>
              <p className="text-2xl font-bold text-purple-600">₹2-3 Cr</p>
              <p className="text-sm text-gray-600 mt-1">78% workload reduction</p>
            </div>
          </div>
          <div className="bg-yellow-50 border-2 border-yellow-400 p-6 rounded-lg">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="text-xl font-bold text-gray-800">Payback Period</h4>
                <p className="text-3xl font-bold text-yellow-600 mt-1">8-12 Months</p>
              </div>
              <div className="text-6xl">💰</div>
            </div>
          </div>
          <p className="text-center text-lg text-gray-700 font-semibold">
            Backed by case studies and industry testimonials
          </p>
        </div>
      ),
      notes: "Across industries, QuickHR has delivered up to ₹20 crore in annual savings and cut admin workload by 78%. We have the data to prove it."
    },
    {
      title: "Your Next Step: Pilot Deployment",
      icon: <Rocket className="w-20 h-20 text-orange-500" />,
      content: (
        <div className="space-y-8">
          <div className="bg-gradient-to-r from-orange-500 to-red-500 text-white p-8 rounded-lg shadow-xl text-center">
            <h3 className="text-4xl font-bold mb-3">Start Your Pilot Today</h3>
            <p className="text-xl">Validate ROI in weeks, not months</p>
          </div>
          <div className="grid grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-lg text-center">
              <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
                <span className="text-3xl font-bold text-blue-600">1</span>
              </div>
              <h4 className="font-bold text-gray-800 mb-2">Choose Location</h4>
              <p className="text-sm text-gray-600">One facility to start</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg text-center">
              <div className="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
                <span className="text-3xl font-bold text-green-600">2</span>
              </div>
              <h4 className="font-bold text-gray-800 mb-2">90-Day Trial</h4>
              <p className="text-sm text-gray-600">Parallel to existing system</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg text-center">
              <div className="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3">
                <span className="text-3xl font-bold text-purple-600">3</span>
              </div>
              <h4 className="font-bold text-gray-800 mb-2">Scale Fast</h4>
              <p className="text-sm text-gray-600">Roll out to all locations</p>
            </div>
          </div>
          <div className="bg-orange-50 border-2 border-orange-400 p-6 rounded-lg">
            <h4 className="text-xl font-bold text-orange-700 mb-3">What We'll Measure:</h4>
            <ul className="grid grid-cols-2 gap-3 text-gray-700">
              <li>✓ Fraud reduction percentage</li>
              <li>✓ Admin time saved</li>
              <li>✓ Overtime accuracy improvement</li>
              <li>✓ Employee satisfaction</li>
            </ul>
          </div>
          <div className="text-center">
            <button className="bg-orange-500 hover:bg-orange-600 text-white font-bold text-xl px-12 py-4 rounded-lg shadow-lg">
              Let's Start Your Pilot →
            </button>
          </div>
        </div>
      ),
      notes: "Start with one location. Validate ROI. Scale fast. You'll see the impact in weeks, and we'll help you scale across locations."
    },
    {
      title: "Why Choose Us",
      icon: <Award className="w-20 h-20 text-blue-500" />,
      content: (
        <div className="space-y-8">
          <div className="text-center mb-8">
            <h3 className="text-3xl font-bold text-gray-800 mb-2">Your Trusted Partner</h3>
            <p className="text-xl text-gray-600">Not just tech—a complete partnership</p>
          </div>
          <div className="grid grid-cols-2 gap-6">
            <div className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-8 rounded-lg shadow-xl">
              <div className="text-5xl mb-3">🏆</div>
              <h4 className="text-2xl font-bold mb-2">12 Years</h4>
              <p className="text-lg">Of expertise transforming HR operations</p>
            </div>
            <div className="bg-gradient-to-br from-green-500 to-green-600 text-white p-8 rounded-lg shadow-xl">
              <div className="text-5xl mb-3">🤝</div>
              <h4 className="text-2xl font-bold mb-2">Industry Leaders</h4>
              <p className="text-lg">Trusted by top manufacturers & pharma</p>
            </div>
            <div className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-8 rounded-lg shadow-xl">
              <div className="text-5xl mb-3">🤖</div>
              <h4 className="text-2xl font-bold mb-2">AI Innovation</h4>
              <p className="text-lg">Cutting-edge facial recognition tech</p>
            </div>
            <div className="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-8 rounded-lg shadow-xl">
              <div className="text-5xl mb-3">🛠️</div>
              <h4 className="text-2xl font-bold mb-2">End-to-End Support</h4>
              <p className="text-lg">24/7 tech support & account management</p>
            </div>
          </div>
          <div className="bg-blue-50 border-2 border-blue-300 p-8 rounded-lg text-center mt-8">
            <p className="text-2xl font-bold text-gray-800 mb-4">
              You need a partner who understands pharma.
            </p>
            <p className="text-xl text-gray-700">That's us. 🚀</p>
          </div>
        </div>
      ),
      notes: "We've been transforming HR for over a decade. Our solutions are trusted by leaders across industries. With QuickHR, you're gaining a partner."
    }
  ];

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  const goToSlide = (index) => {
    setCurrentSlide(index);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white p-8">
      <div className="max-w-7xl mx-auto">
        {/* Main Slide */}
        <div className="bg-white text-gray-800 rounded-2xl shadow-2xl p-12 mb-8 min-h-[600px]">
          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center space-x-4">
              {slides[currentSlide].icon}
              <h2 className="text-4xl font-bold">{slides[currentSlide].title}</h2>
            </div>
            <div className="text-sm text-gray-500">
              Slide {currentSlide + 1} of {slides.length}
            </div>
          </div>
          <div className="mt-8">
            {slides[currentSlide].content}
          </div>
        </div>

        {/* Speaker Notes */}
        <div className="bg-gray-700 rounded-xl p-6 mb-8">
          <h3 className="text-lg font-bold mb-2 text-yellow-400">📝 Speaker Notes:</h3>
          <p className="text-gray-200">{slides[currentSlide].notes}</p>
        </div>

        {/* Navigation */}
        <div className="flex items-center justify-between">
          <button
            onClick={prevSlide}
            disabled={currentSlide === 0}
            className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white px-6 py-3 rounded-lg flex items-center space-x-2 transition"
          >
            <ChevronLeft className="w-5 h-5" />
            <span>Previous</span>
          </button>

          {/* Slide Indicators */}
          <div className="flex space-x-2">
            {slides.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`w-3 h-3 rounded-full transition ${
                  index === currentSlide ? 'bg-blue-500 w-8' : 'bg-gray-500'
                }`}
              />
            ))}
          </div>

          <button
            onClick={nextSlide}
            disabled={currentSlide === slides.length - 1}
            className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white px-6 py-3 rounded-lg flex items-center space-x-2 transition"
          >
            <span>Next</span>
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>

        {/* Quick Navigation */}
        <div className="mt-8 bg-gray-700 rounded-xl p-4">
          <p className="text-sm text-gray-400 mb-2">Quick Jump:</p>
          <div className="grid grid-cols-3 gap-2">
            {slides.map((slide, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`text-left text-sm px-3 py-2 rounded transition ${
                  index === currentSlide
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-600 text-gray-300 hover:bg-gray-500'
                }`}
              >
                {index + 1}. {slide.title}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PresentationSlide;