import React, { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

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

  const slides = [
    {
      title: "VSS Kitchen Appliances",
      subtitle: "Potential Investors Overview",
      content: (
        <div className="text-center space-y-6">
          <div className="text-6xl mb-4">🍳</div>
          <p className="text-xl text-gray-700">Smart Kitchen Ecosystem</p>
          <div className="grid grid-cols-2 gap-4 mt-8 text-left">
            <div className="bg-blue-50 p-4 rounded-lg">
              <div className="font-bold text-blue-900">UK Market</div>
              <div className="text-2xl font-bold text-blue-600">£2.35B</div>
              <div className="text-sm text-gray-600">by 2030</div>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <div className="font-bold text-green-900">Growth Rate</div>
              <div className="text-2xl font-bold text-green-600">16.8%</div>
              <div className="text-sm text-gray-600">annually</div>
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Target Investor Types",
      content: (
        <div className="space-y-4">
          <div className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
            <div className="font-bold text-lg mb-1">🔌 IoT & Hardware VCs</div>
            <div className="text-sm text-gray-600 mb-2">Specialists in smart home technology</div>
            <div className="text-sm">• Go Ahead Ventures • ATX Venture Partners • Wellington Partners</div>
          </div>
          
          <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
            <div className="font-bold text-lg mb-1">🇬🇧 UK Early-Stage VCs</div>
            <div className="text-sm text-gray-600 mb-2">London-based tech investors</div>
            <div className="text-sm">• Seedcamp • Passion Capital • Hoxton Ventures</div>
          </div>
          
          <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
            <div className="font-bold text-lg mb-1">🛒 Consumer Tech Specialists</div>
            <div className="text-sm text-gray-600 mb-2">E-commerce & D2C focused</div>
            <div className="text-sm">• Forward Partners • LocalGlobe</div>
          </div>
          
          <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
            <div className="font-bold text-lg mb-1">🍽️ Kitchen & Food Focused</div>
            <div className="text-sm text-gray-600 mb-2">Industry-specific expertise</div>
            <div className="text-sm">• Kitchen Fund</div>
          </div>
        </div>
      )
    },
    {
      title: "Government Funding (Non-Dilutive)",
      content: (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg shadow-lg">
            <div className="text-2xl font-bold mb-3">Innovate UK</div>
            <div className="space-y-2">
              <div className="flex justify-between items-center bg-white/20 p-3 rounded">
                <span>Smart Grants</span>
                <span className="font-bold">£25k - £500k</span>
              </div>
              <div className="flex justify-between items-center bg-white/20 p-3 rounded">
                <span>Equity Required</span>
                <span className="font-bold">None ✓</span>
              </div>
              <div className="text-sm mt-3 bg-white/10 p-3 rounded">
                Perfect for: Product development phase
              </div>
            </div>
          </div>
          
          <div className="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg shadow-lg">
            <div className="text-2xl font-bold mb-3">British Business Bank</div>
            <div className="space-y-2">
              <div className="flex justify-between items-center bg-white/20 p-3 rounded">
                <span>Startup Loans</span>
                <span className="font-bold">£500 - £25k</span>
              </div>
              <div className="text-sm mt-3 bg-white/10 p-3 rounded">
                Lower interest rates • UK business support
              </div>
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Investment Stage Roadmap",
      content: (
        <div className="space-y-4">
          <div className="bg-yellow-50 border-2 border-yellow-400 p-5 rounded-lg">
            <div className="flex justify-between items-center mb-3">
              <div className="text-xl font-bold text-yellow-900">Pre-Seed</div>
              <div className="text-2xl font-bold text-yellow-600">£50k - £250k</div>
            </div>
            <div className="text-sm space-y-1">
              <div><strong>For:</strong> Prototype development, initial manufacturing</div>
              <div><strong>Investors:</strong> Angels, Seedcamp, government grants</div>
              <div className="text-green-600 font-semibold">✓ You have: Working prototype & market research</div>
            </div>
          </div>
          
          <div className="bg-blue-50 border-2 border-blue-400 p-5 rounded-lg">
            <div className="flex justify-between items-center mb-3">
              <div className="text-xl font-bold text-blue-900">Seed Round</div>
              <div className="text-2xl font-bold text-blue-600">£250k - £1M</div>
            </div>
            <div className="text-sm space-y-1">
              <div><strong>For:</strong> Market launch, production, app development</div>
              <div><strong>Investors:</strong> Passion Capital, Forward Partners, Hoxton</div>
              <div><strong>Need:</strong> Pre-orders, beta results, initial customers</div>
            </div>
          </div>
          
          <div className="bg-purple-50 border-2 border-purple-400 p-5 rounded-lg">
            <div className="flex justify-between items-center mb-3">
              <div className="text-xl font-bold text-purple-900">Series A</div>
              <div className="text-2xl font-bold text-purple-600">£1M - £5M</div>
            </div>
            <div className="text-sm space-y-1">
              <div><strong>For:</strong> Mass production, retail expansion, team growth</div>
              <div><strong>Investors:</strong> Highland Europe, Tencent, larger VCs</div>
              <div><strong>Need:</strong> Proven sales, retention data, revenue growth</div>
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Why Investors Will Say YES",
      content: (
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
            <div className="text-3xl mb-2">📈</div>
            <div className="font-bold mb-1">Market Growth</div>
            <div className="text-sm text-gray-700">£2.35B UK market growing at 16.8% annually</div>
          </div>
          
          <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
            <div className="text-3xl mb-2">🔗</div>
            <div className="font-bold mb-1">Ecosystem Lock-in</div>
            <div className="text-sm text-gray-700">Integrated products create customer retention</div>
          </div>
          
          <div className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
            <div className="text-3xl mb-2">💰</div>
            <div className="font-bold mb-1">Recurring Revenue</div>
            <div className="text-sm text-gray-700">Spice cartridge subscriptions + hardware sales</div>
          </div>
          
          <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
            <div className="text-3xl mb-2">🌍</div>
            <div className="font-bold mb-1">Scalability</div>
            <div className="text-sm text-gray-700">Easy expansion to Europe & North America</div>
          </div>
          
          <div className="bg-red-50 p-4 rounded-lg border-l-4 border-red-500">
            <div className="text-3xl mb-2">⚡</div>
            <div className="font-bold mb-1">IoT + Hardware</div>
            <div className="text-sm text-gray-700">Proven business model with software integration</div>
          </div>
          
          <div className="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
            <div className="text-3xl mb-2">🎯</div>
            <div className="font-bold mb-1">Competitive Edge</div>
            <div className="text-sm text-gray-700">Integrated ecosystem vs single products</div>
          </div>
        </div>
      )
    },
    {
      title: "Key Investors - Quick Reference",
      content: (
        <div className="space-y-3 text-sm">
          <div className="grid grid-cols-3 gap-2 font-bold bg-gray-100 p-2 rounded">
            <div>Investor</div>
            <div>Focus</div>
            <div>Stage / Amount</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-purple-50 p-2 rounded border-l-2 border-purple-500">
            <div className="font-semibold">Seedcamp</div>
            <div className="text-xs">Early-stage tech</div>
            <div className="text-xs">£100k - £1M</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-blue-50 p-2 rounded border-l-2 border-blue-500">
            <div className="font-semibold">Hoxton Ventures</div>
            <div className="text-xs">Consumer tech</div>
            <div className="text-xs">Seed - Series A</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-green-50 p-2 rounded border-l-2 border-green-500">
            <div className="font-semibold">Forward Partners</div>
            <div className="text-xs">D2C brands</div>
            <div className="text-xs">Pre-seed - Series A</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-yellow-50 p-2 rounded border-l-2 border-yellow-500">
            <div className="font-semibold">LocalGlobe</div>
            <div className="text-xs">Early-stage tech</div>
            <div className="text-xs">£500k - £2M</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-orange-50 p-2 rounded border-l-2 border-orange-500">
            <div className="font-semibold">Kitchen Fund</div>
            <div className="text-xs">Food & kitchen</div>
            <div className="text-xs">Various stages</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-red-50 p-2 rounded border-l-2 border-red-500">
            <div className="font-semibold">Go Ahead Ventures</div>
            <div className="text-xs">IoT startups</div>
            <div className="text-xs">Pre-seed / Seed</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-indigo-50 p-2 rounded border-l-2 border-indigo-500">
            <div className="font-semibold">Passion Capital</div>
            <div className="text-xs">Tech partnerships</div>
            <div className="text-xs">Seed stage</div>
          </div>
          
          <div className="grid grid-cols-3 gap-2 bg-teal-50 p-2 rounded border-l-2 border-teal-500">
            <div className="font-semibold">Innovate UK</div>
            <div className="text-xs">Government grants</div>
            <div className="text-xs">£25k - £500k</div>
          </div>
        </div>
      )
    },
    {
      title: "Next Steps",
      content: (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-lg shadow-lg">
            <div className="text-2xl font-bold mb-4">Your Action Plan</div>
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <div className="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">1</div>
                <div>
                  <div className="font-semibold">Perfect Your Pitch Deck</div>
                  <div className="text-sm text-blue-100">Problem, solution, market, product, business model, team</div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-white text-purple-600 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">2</div>
                <div>
                  <div className="font-semibold">Build Traction</div>
                  <div className="text-sm text-blue-100">Gather pre-orders, beta testers, customer feedback</div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-white text-blue-600 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">3</div>
                <div>
                  <div className="font-semibold">Start with Government Grants</div>
                  <div className="text-sm text-blue-100">Non-dilutive funding to build momentum</div>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="bg-white text-purple-600 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">4</div>
                <div>
                  <div className="font-semibold">Target Seed Investors</div>
                  <div className="text-sm text-blue-100">Reach out to Seedcamp, Forward Partners, Kitchen Fund</div>
                </div>
              </div>
            </div>
          </div>
          
          <div className="bg-yellow-50 border-2 border-yellow-400 p-4 rounded-lg">
            <div className="font-bold text-yellow-900 mb-2">💡 Pro Tip</div>
            <div className="text-sm text-gray-700">Lead with your ecosystem advantage - it's what separates you from competitors like Instant Pot and Spicerr</div>
          </div>
        </div>
      )
    }
  ];

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

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
      <div className="w-full max-w-4xl">
        <div className="bg-white rounded-xl shadow-2xl overflow-hidden">
          {/* Slide Content */}
          <div className="p-12 min-h-[500px] flex flex-col">
            <div className="mb-6">
              <h1 className="text-4xl font-bold text-gray-800 mb-2">
                {slides[currentSlide].title}
              </h1>
              {slides[currentSlide].subtitle && (
                <p className="text-xl text-gray-600">{slides[currentSlide].subtitle}</p>
              )}
            </div>
            <div className="flex-grow">
              {slides[currentSlide].content}
            </div>
          </div>

          {/* Navigation */}
          <div className="bg-gray-50 px-12 py-6 flex items-center justify-between border-t">
            <button
              onClick={prevSlide}
              className="flex items-center gap-2 px-4 py-2 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50"
              disabled={currentSlide === 0}
            >
              <ChevronLeft size={20} />
              Previous
            </button>

            <div className="flex gap-2">
              {slides.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentSlide(index)}
                  className={`w-3 h-3 rounded-full transition-all ${
                    index === currentSlide
                      ? 'bg-blue-600 w-8'
                      : 'bg-gray-300 hover:bg-gray-400'
                  }`}
                />
              ))}
            </div>

            <button
              onClick={nextSlide}
              className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
              disabled={currentSlide === slides.length - 1}
            >
              Next
              <ChevronRight size={20} />
            </button>
          </div>

          {/* Slide Counter */}
          <div className="bg-gray-100 px-12 py-3 text-center text-sm text-gray-600">
            Slide {currentSlide + 1} of {slides.length}
          </div>
        </div>
      </div>
    </div>
  );
};

export default InvestorSlideshow;