import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, Smartphone, Car, Package, DollarSign, Clock, CheckCircle, TrendingUp, Users, Layers } from 'lucide-react';

export default function ProposalPresentation() {
  const [slide, setSlide] = useState(0);
  
  const slides = [
    // Slide 0: Title
    {
      content: (
        <div className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 text-white p-8">
          <div className="text-6xl mb-6">🚀</div>
          <h1 className="text-4xl font-bold text-center mb-4">On-Demand Mobile Apps</h1>
          <h2 className="text-2xl text-purple-200 text-center mb-8">Development Proposal</h2>
          <div className="flex gap-4 mt-4">
            <div className="bg-white/10 backdrop-blur px-4 py-2 rounded-full flex items-center gap-2">
              <Smartphone size={20}/> Food Delivery
            </div>
            <div className="bg-white/10 backdrop-blur px-4 py-2 rounded-full flex items-center gap-2">
              <Car size={20}/> Ride Hailing
            </div>
            <div className="bg-white/10 backdrop-blur px-4 py-2 rounded-full flex items-center gap-2">
              <Package size={20}/> Logistics
            </div>
          </div>
          <p className="mt-12 text-purple-200">Prepared by Your Agency Name</p>
        </div>
      )
    },
    // Slide 1: Market Opportunity
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8">
          <h2 className="text-3xl font-bold mb-8 text-cyan-400">📈 Market Opportunity</h2>
          <div className="grid grid-cols-3 gap-6">
            <div className="bg-gradient-to-br from-orange-500 to-red-600 p-6 rounded-2xl">
              <Smartphone className="mb-4" size={40}/>
              <h3 className="text-xl font-bold mb-2">Food Delivery</h3>
              <p className="text-3xl font-bold">$48B</p>
              <p className="text-sm opacity-80">Market Size 2026</p>
              <p className="mt-2 text-sm">9.49% CAGR growth</p>
            </div>
            <div className="bg-gradient-to-br from-blue-500 to-cyan-600 p-6 rounded-2xl">
              <Car className="mb-4" size={40}/>
              <h3 className="text-xl font-bold mb-2">Ride Hailing</h3>
              <p className="text-3xl font-bold">$22B</p>
              <p className="text-sm opacity-80">Projected by 2029</p>
              <p className="mt-2 text-sm">100M users expected</p>
            </div>
            <div className="bg-gradient-to-br from-green-500 to-emerald-600 p-6 rounded-2xl">
              <Package className="mb-4" size={40}/>
              <h3 className="text-xl font-bold mb-2">Logistics</h3>
              <p className="text-3xl font-bold">$33.5B</p>
              <p className="text-sm opacity-80">Digital Logistics 2030</p>
              <p className="mt-2 text-sm">17.54% CAGR</p>
            </div>
          </div>
          <div className="mt-8 bg-slate-800 p-4 rounded-xl">
            <p className="text-center text-lg">✨ Combined addressable market exceeds <span className="text-cyan-400 font-bold">$103.5 Billion</span></p>
          </div>
        </div>
      )
    },
    // Slide 2: Solution Overview
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8">
          <h2 className="text-3xl font-bold mb-6 text-cyan-400">🎯 Our Solution</h2>
          <p className="text-lg mb-6 text-slate-300">Three integrated platforms built with cutting-edge technology</p>
          <div className="space-y-4">
            <div className="bg-slate-800 p-4 rounded-xl flex items-start gap-4">
              <div className="bg-orange-500 p-3 rounded-lg"><Smartphone size={24}/></div>
              <div>
                <h3 className="text-xl font-bold text-orange-400">Food Delivery App</h3>
                <p className="text-slate-400">Customer App + Restaurant Panel + Driver App + Admin Dashboard</p>
              </div>
            </div>
            <div className="bg-slate-800 p-4 rounded-xl flex items-start gap-4">
              <div className="bg-blue-500 p-3 rounded-lg"><Car size={24}/></div>
              <div>
                <h3 className="text-xl font-bold text-blue-400">Ride Hailing App</h3>
                <p className="text-slate-400">Passenger App + Driver App + Admin Dashboard + Analytics</p>
              </div>
            </div>
            <div className="bg-slate-800 p-4 rounded-xl flex items-start gap-4">
              <div className="bg-green-500 p-3 rounded-lg"><Package size={24}/></div>
              <div>
                <h3 className="text-xl font-bold text-green-400">Logistics App</h3>
                <p className="text-slate-400">Sender App + Courier App + Fleet Management + Real-time Tracking</p>
              </div>
            </div>
          </div>
          <div className="mt-6 flex gap-4 justify-center">
            <span className="bg-purple-600/30 px-3 py-1 rounded-full text-sm">React Native</span>
            <span className="bg-purple-600/30 px-3 py-1 rounded-full text-sm">Node.js</span>
            <span className="bg-purple-600/30 px-3 py-1 rounded-full text-sm">AWS/Firebase</span>
            <span className="bg-purple-600/30 px-3 py-1 rounded-full text-sm">Google Maps API</span>
          </div>
        </div>
      )
    },
    // Slide 3: Key Features
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8 overflow-auto">
          <h2 className="text-3xl font-bold mb-6 text-cyan-400">⚡ Key Features</h2>
          <div className="grid grid-cols-3 gap-4 text-sm">
            <div className="bg-orange-500/10 border border-orange-500/30 p-4 rounded-xl">
              <h3 className="font-bold text-orange-400 mb-3">🍕 Food Delivery</h3>
              <ul className="space-y-1 text-slate-300">
                <li>• User registration & profiles</li>
                <li>• Restaurant discovery & search</li>
                <li>• Real-time order tracking</li>
                <li>• Multiple payment options</li>
                <li>• Ratings & reviews</li>
                <li>• Push notifications</li>
                <li>• Promo codes & offers</li>
                <li>• Order history</li>
              </ul>
            </div>
            <div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-xl">
              <h3 className="font-bold text-blue-400 mb-3">🚗 Ride Hailing</h3>
              <ul className="space-y-1 text-slate-300">
                <li>• GPS-based ride matching</li>
                <li>• Fare estimation</li>
                <li>• Driver tracking</li>
                <li>• In-app payments</li>
                <li>• Ride history</li>
                <li>• Driver/rider ratings</li>
                <li>• SOS emergency button</li>
                <li>• Surge pricing logic</li>
              </ul>
            </div>
            <div className="bg-green-500/10 border border-green-500/30 p-4 rounded-xl">
              <h3 className="font-bold text-green-400 mb-3">📦 Logistics</h3>
              <ul className="space-y-1 text-slate-300">
                <li>• Package booking</li>
                <li>• Real-time tracking</li>
                <li>• Route optimization</li>
                <li>• Proof of delivery</li>
                <li>• Fleet management</li>
                <li>• Driver assignment</li>
                <li>• Delivery scheduling</li>
                <li>• Analytics dashboard</li>
              </ul>
            </div>
          </div>
        </div>
      )
    },
    // Slide 4: Investment Summary
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8">
          <h2 className="text-3xl font-bold mb-6 text-cyan-400">💰 Investment Summary</h2>
          <div className="grid grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="bg-slate-800 p-4 rounded-xl">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-orange-400 font-bold">Food Delivery App</span>
                  <span className="text-2xl font-bold">₹6,50,000 - ₹7,50,000</span>
                </div>
                <div className="h-2 bg-slate-700 rounded-full">
                  <div className="h-full w-3/5 bg-gradient-to-r from-orange-500 to-red-500 rounded-full"></div>
                </div>
              </div>
              <div className="bg-slate-800 p-4 rounded-xl">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-blue-400 font-bold">Ride Hailing App</span>
                  <span className="text-2xl font-bold">₹7,50,000 - ₹8,00,000</span>
                </div>
                <div className="h-2 bg-slate-700 rounded-full">
                  <div className="h-full w-1/2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"></div>
                </div>
              </div>
              <div className="bg-slate-800 p-4 rounded-xl">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-green-400 font-bold">Logistics App</span>
                  <span className="text-2xl font-bold">₹5,50,000 - ₹6,50,000</span>
                </div>
                <div className="h-2 bg-slate-700 rounded-full">
                  <div className="h-full w-2/5 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full"></div>
                </div>
              </div>
            </div>
            <div className="bg-gradient-to-br from-purple-600 to-pink-600 p-6 rounded-2xl flex flex-col justify-center">
              <p className="text-lg mb-2">Complete Bundle</p>
              <p className="text-4xl font-bold mb-2">₹16,50,000 - ₹19,00,000</p>
              <p className="text-purple-200">All three platforms with shared backend infrastructure</p>
              <p className="mt-4 text-sm bg-white/20 p-2 rounded-lg">💡 Bundle discount: Save up to 20%</p>
            </div>
          </div>
        </div>
      )
    },
    // Slide 5: Timeline
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8">
          <h2 className="text-3xl font-bold mb-6 text-cyan-400">📅 Development Timeline</h2>
          <div className="relative">
            <div className="absolute left-8 top-0 bottom-0 w-1 bg-gradient-to-b from-cyan-500 via-purple-500 to-pink-500"></div>
            <div className="space-y-6 ml-16">
              {[
                {phase: "Discovery & Planning", duration: "2-3 weeks", tasks: "Requirements, wireframes, architecture"},
                {phase: "UI/UX Design", duration: "3-4 weeks", tasks: "Prototypes, user flows, brand integration"},
                {phase: "MVP Development", duration: "12-16 weeks", tasks: "Core features, APIs, testing"},
                {phase: "Beta Testing", duration: "2-3 weeks", tasks: "User testing, bug fixes, optimization"},
                {phase: "Launch & Support", duration: "Ongoing", tasks: "Deployment, monitoring, updates"}
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-4">
                  <div className="w-4 h-4 rounded-full bg-cyan-500 -ml-10 mt-1 ring-4 ring-slate-900"></div>
                  <div className="bg-slate-800 p-4 rounded-xl flex-1">
                    <div className="flex justify-between">
                      <h3 className="font-bold text-lg">{item.phase}</h3>
                      <span className="text-cyan-400">{item.duration}</span>
                    </div>
                    <p className="text-slate-400 text-sm">{item.tasks}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <p className="mt-4 text-center text-slate-400">Total: 5-7 months per app | 8-12 months for full suite</p>
        </div>
      )
    },
    // Slide 6: Why Choose Us
    {
      content: (
        <div className="h-full bg-slate-900 text-white p-8">
          <h2 className="text-3xl font-bold mb-6 text-cyan-400">🏆 Why Choose Us</h2>
          <div className="grid grid-cols-2 gap-6">
            {[
              {icon: <CheckCircle size={32}/>, title: "Proven Expertise", desc: "Years of experience in on-demand app development"},
              {icon: <TrendingUp size={32}/>, title: "Scalable Architecture", desc: "Built to handle millions of users from day one"},
              {icon: <Users size={32}/>, title: "Dedicated Team", desc: "Full-stack developers, designers & QA specialists"},
              {icon: <Layers size={32}/>, title: "End-to-End Support", desc: "From concept to launch and beyond"},
              {icon: <Clock size={32}/>, title: "Agile Development", desc: "Regular updates and transparent communication"},
              {icon: <DollarSign size={32}/>, title: "Competitive Pricing", desc: "Best value without compromising quality"}
            ].map((item, i) => (
              <div key={i} className="bg-slate-800 p-4 rounded-xl flex items-start gap-4">
                <div className="text-cyan-400">{item.icon}</div>
                <div>
                  <h3 className="font-bold text-lg">{item.title}</h3>
                  <p className="text-slate-400 text-sm">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )
    },
    // Slide 7: Next Steps
    {
      content: (
        <div className="flex flex-col items-center justify-center h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 text-white p-8">
          <h2 className="text-4xl font-bold mb-8">🤝 Let's Get Started</h2>
          <div className="bg-white/10 backdrop-blur p-8 rounded-2xl max-w-md">
            <h3 className="text-xl font-bold mb-4">Next Steps:</h3>
            <ol className="space-y-3">
              <li className="flex items-center gap-3"><span className="bg-cyan-500 w-8 h-8 rounded-full flex items-center justify-center font-bold">1</span> Schedule discovery call</li>
              <li className="flex items-center gap-3"><span className="bg-cyan-500 w-8 h-8 rounded-full flex items-center justify-center font-bold">2</span> Define requirements & scope</li>
              <li className="flex items-center gap-3"><span className="bg-cyan-500 w-8 h-8 rounded-full flex items-center justify-center font-bold">3</span> Receive detailed proposal</li>
              <li className="flex items-center gap-3"><span className="bg-cyan-500 w-8 h-8 rounded-full flex items-center justify-center font-bold">4</span> Begin development</li>
            </ol>
          </div>
          <div className="mt-8 text-center">
            <p className="text-purple-200 mb-2">Contact Us</p>
            <p className="text-xl">info@shreevarupromotion.com | +91 97394 97333</p>
          </div>
        </div>
      )
    }
  ];

  return (
    <div className="w-full h-screen bg-slate-900 flex flex-col">
      <div className="flex-1 overflow-hidden">
        {slides[slide].content}
      </div>
      <div className="bg-slate-800 p-4 flex items-center justify-between">
        <button 
          onClick={() => setSlide(Math.max(0, slide - 1))}
          disabled={slide === 0}
          className="flex items-center gap-2 px-4 py-2 bg-slate-700 text-white rounded-lg disabled:opacity-30"
        >
          <ChevronLeft size={20}/> Previous
        </button>
        <div className="flex gap-2">
          {slides.map((_, i) => (
            <button
              key={i}
              onClick={() => setSlide(i)}
              className={`w-3 h-3 rounded-full transition-all ${i === slide ? 'bg-cyan-400 w-8' : 'bg-slate-600'}`}
            />
          ))}
        </div>
        <button 
          onClick={() => setSlide(Math.min(slides.length - 1, slide + 1))}
          disabled={slide === slides.length - 1}
          className="flex items-center gap-2 px-4 py-2 bg-cyan-600 text-white rounded-lg disabled:opacity-30"
        >
          Next <ChevronRight size={20}/>
        </button>
      </div>
    </div>
  );
}