import React, { useState } from 'react';
import { Shield, Lock, FileCheck, Video, Package, Menu, X, ChevronRight } from 'lucide-react';

const BookEmBotWebsite = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Content management system
  const [content, setContent] = useState({
    home: {
      title: "NIST-Compliant AI-Powered Booking System",
      subtitle: "Streamline arrestee processing with intelligent automation and uncompromising security",
      description: "Book 'Em Bot leverages artificial intelligence to assist law enforcement agencies in efficient, accurate, and compliant arrestee booking procedures. Our system maintains complete chain of custody documentation while reducing administrative burden on officers.",
      videoUrl: "https://www.youtube.com/embed/demo-video-1"
    },
    booking: {
      title: "Intelligent Booking Software",
      subtitle: "AI-Assisted Arrestee Processing & Documentation",
      description: "Our booking software automates data collection and validation during arrestee intake. The AI assistant guides officers through NIST-compliant procedures, capturing biometric data, demographic information, and charge documentation. Real-time validation ensures accuracy and completeness while maintaining full audit trails for legal compliance.",
      features: [
        "Biometric capture and verification",
        "Automated warrant checking",
        "Digital fingerprint integration",
        "Real-time NCIC/state database queries",
        "Customizable booking workflows",
        "Multi-jurisdiction support"
      ],
      videoUrl: "https://www.youtube.com/embed/demo-video-2"
    },
    holding: {
      title: "Secure Holding Video System",
      subtitle: "Continuous Monitoring & Evidence Documentation",
      description: "Our holding video system provides tamper-proof recording and storage of detainee monitoring footage. Chain of custody is automatically maintained for all video evidence, with timestamps, metadata, and access logs meeting federal evidence standards. Integration with booking records ensures complete documentation.",
      features: [
        "Encrypted video storage",
        "Tamper-evident chain of custody",
        "Automatic retention management",
        "Multi-camera support",
        "Incident tagging and retrieval",
        "Court-ready export formats"
      ],
      videoUrl: "https://www.youtube.com/embed/demo-video-3"
    },
    products: [
      {
        sku: "BEB-SW-001",
        name: "Book 'Em Bot Enterprise License",
        category: "Software",
        description: "Full booking software suite with AI assistant, unlimited users",
        price: "Contact Sales"
      },
      {
        sku: "BEB-SW-002",
        name: "Holding Video Module",
        category: "Software",
        description: "Secure video monitoring and chain of custody management",
        price: "Contact Sales"
      },
      {
        sku: "BEB-HW-101",
        name: "Biometric Capture Station",
        category: "Hardware",
        description: "Integrated fingerprint, photo, and iris scanning workstation",
        price: "Contact Sales"
      },
      {
        sku: "BEB-HW-102",
        name: "Mugshot Camera System",
        category: "Hardware",
        description: "Professional-grade camera with automated positioning",
        price: "Contact Sales"
      },
      {
        sku: "BEB-HW-201",
        name: "Video Storage Array",
        category: "Hardware",
        description: "RAID-configured encrypted storage for video evidence",
        price: "Contact Sales"
      },
      {
        sku: "BEB-HW-202",
        name: "HD Surveillance Camera",
        category: "Hardware",
        description: "Holding cell monitoring camera with night vision",
        price: "Contact Sales"
      }
    ]
  });

  const NavBar = () => (
    <nav className="bg-slate-900 border-b border-slate-700 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <h1 className="text-xl font-bold text-cyan-400">BOOK 'EM BOT</h1>
            </div>
          </div>
          
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-4">
              <button onClick={() => setCurrentPage('home')} className={`px-3 py-2 rounded-md text-sm font-medium ${currentPage === 'home' ? 'bg-slate-800 text-white' : 'text-slate-300 hover:bg-slate-700'}`}>
                Home
              </button>
              <button onClick={() => setCurrentPage('booking')} className={`px-3 py-2 rounded-md text-sm font-medium ${currentPage === 'booking' ? 'bg-slate-800 text-white' : 'text-slate-300 hover:bg-slate-700'}`}>
                Booking Software
              </button>
              <button onClick={() => setCurrentPage('holding')} className={`px-3 py-2 rounded-md text-sm font-medium ${currentPage === 'holding' ? 'bg-slate-800 text-white' : 'text-slate-300 hover:bg-slate-700'}`}>
                Holding Video
              </button>
              <button onClick={() => setCurrentPage('products')} className={`px-3 py-2 rounded-md text-sm font-medium ${currentPage === 'products' ? 'bg-slate-800 text-white' : 'text-slate-300 hover:bg-slate-700'}`}>
                Products
              </button>
              <button onClick={() => setCurrentPage('contact')} className="px-4 py-2 rounded-md text-sm font-medium bg-cyan-600 text-white hover:bg-cyan-700">
                Contact
              </button>
            </div>
          </div>
          
          <div className="md:hidden">
            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-slate-300 hover:text-white">
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>
      
      {mobileMenuOpen && (
        <div className="md:hidden bg-slate-800">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <button onClick={() => { setCurrentPage('home'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-300 hover:bg-slate-700">
              Home
            </button>
            <button onClick={() => { setCurrentPage('booking'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-300 hover:bg-slate-700">
              Booking Software
            </button>
            <button onClick={() => { setCurrentPage('holding'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-300 hover:bg-slate-700">
              Holding Video
            </button>
            <button onClick={() => { setCurrentPage('products'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-300 hover:bg-slate-700">
              Products
            </button>
            <button onClick={() => { setCurrentPage('contact'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-slate-300 hover:bg-slate-700">
              Contact
            </button>
          </div>
        </div>
      )}
    </nav>
  );

  const HomePage = () => (
    <div className="bg-gradient-to-b from-slate-900 to-slate-800 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <div className="flex justify-center mb-8">
            <img src="https://placeholder.svg/200x200?text=Badge+Logo" alt="Book Em Bot Logo" className="w-48 h-48" />
          </div>
          <h1 className="text-5xl font-bold text-white mb-4">{content.home.title}</h1>
          <p className="text-xl text-cyan-400 mb-6">{content.home.subtitle}</p>
          <p className="text-lg text-slate-300 max-w-4xl mx-auto leading-relaxed">
            {content.home.description}
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-12">
          <div className="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-cyan-500 transition-all">
            <Shield className="text-cyan-400 mb-4" size={48} />
            <h3 className="text-xl font-semibold text-white mb-2">NIST Compliant</h3>
            <p className="text-slate-300">Meets federal standards for biometric data collection and evidence handling</p>
          </div>
          <div className="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-cyan-500 transition-all">
            <Lock className="text-cyan-400 mb-4" size={48} />
            <h3 className="text-xl font-semibold text-white mb-2">Chain of Custody</h3>
            <p className="text-slate-300">Automated tracking and documentation for all evidence and biometric data</p>
          </div>
          <div className="bg-slate-800 border border-slate-700 rounded-lg p-6 hover:border-cyan-500 transition-all">
            <FileCheck className="text-cyan-400 mb-4" size={48} />
            <h3 className="text-xl font-semibold text-white mb-2">AI-Assisted</h3>
            <p className="text-slate-300">Intelligent automation reduces errors and streamlines booking procedures</p>
          </div>
        </div>

        <div className="bg-slate-800 rounded-lg p-8 border border-slate-700">
          <h2 className="text-2xl font-bold text-white mb-4">Product Demo</h2>
          <div className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center">
            <iframe 
              width="100%" 
              height="100%" 
              src={content.home.videoUrl}
              title="Book Em Bot Demo"
              className="rounded-lg"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  );

  const BookingSoftwarePage = () => (
    <div className="bg-gradient-to-b from-slate-900 to-slate-800 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <div className="flex justify-center mb-8">
            <img src="https://placeholder.svg/200x200?text=Booking+Software" alt="Booking Software" className="w-48 h-48" />
          </div>
          <h1 className="text-4xl font-bold text-white mb-4">{content.booking.title}</h1>
          <p className="text-xl text-cyan-400 mb-6">{content.booking.subtitle}</p>
          <p className="text-lg text-slate-300 max-w-4xl mx-auto leading-relaxed">
            {content.booking.description}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <div className="bg-slate-800 rounded-lg p-6 border border-slate-700">
            <h3 className="text-2xl font-semibold text-white mb-4">Key Features</h3>
            <ul className="space-y-3">
              {content.booking.features.map((feature, idx) => (
                <li key={idx} className="flex items-start">
                  <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                  <span className="text-slate-300">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="bg-slate-800 rounded-lg p-6 border border-slate-700">
            <h3 className="text-2xl font-semibold text-white mb-4">Compliance Standards</h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">NIST SP 800-53 Security Controls</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">FBI CJIS Security Policy Compliant</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">HIPAA Privacy Standards</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">State & Federal Evidence Standards</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="bg-slate-800 rounded-lg p-8 border border-slate-700">
          <h2 className="text-2xl font-bold text-white mb-4">Software Demonstration</h2>
          <div className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center">
            <iframe 
              width="100%" 
              height="100%" 
              src={content.booking.videoUrl}
              title="Booking Software Demo"
              className="rounded-lg"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  );

  const HoldingVideoPage = () => (
    <div className="bg-gradient-to-b from-slate-900 to-slate-800 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <div className="flex justify-center mb-8">
            <img src="https://placeholder.svg/200x200?text=Holding+Video" alt="Holding Video System" className="w-48 h-48" />
          </div>
          <h1 className="text-4xl font-bold text-white mb-4">{content.holding.title}</h1>
          <p className="text-xl text-cyan-400 mb-6">{content.holding.subtitle}</p>
          <p className="text-lg text-slate-300 max-w-4xl mx-auto leading-relaxed">
            {content.holding.description}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <div className="bg-slate-800 rounded-lg p-6 border border-slate-700">
            <h3 className="text-2xl font-semibold text-white mb-4">System Capabilities</h3>
            <ul className="space-y-3">
              {content.holding.features.map((feature, idx) => (
                <li key={idx} className="flex items-start">
                  <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                  <span className="text-slate-300">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="bg-slate-800 rounded-lg p-6 border border-slate-700">
            <h3 className="text-2xl font-semibold text-white mb-4">Evidence Integrity</h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">SHA-256 cryptographic hashing</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">Immutable audit logs</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">Automatic backup verification</span>
              </li>
              <li className="flex items-start">
                <ChevronRight className="text-cyan-400 mr-2 flex-shrink-0 mt-1" size={20} />
                <span className="text-slate-300">Digital signature authentication</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="bg-slate-800 rounded-lg p-8 border border-slate-700">
          <h2 className="text-2xl font-bold text-white mb-4">System Demonstration</h2>
          <div className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center">
            <iframe 
              width="100%" 
              height="100%" 
              src={content.holding.videoUrl}
              title="Holding Video System Demo"
              className="rounded-lg"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  );

  const ProductsPage = () => {
    const [editMode, setEditMode] = useState(false);
    
    return (
      <div className="bg-gradient-to-b from-slate-900 to-slate-800 min-h-screen">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="flex justify-between items-center mb-12">
            <div>
              <h1 className="text-4xl font-bold text-white mb-4">Products & Solutions</h1>
              <p className="text-xl text-slate-300">Complete hardware and software packages for your agency</p>
            </div>
            <button 
              onClick={() => setEditMode(!editMode)}
              className="px-4 py-2 bg-cyan-600 text-white rounded-lg hover:bg-cyan-700 transition-colors"
            >
              {editMode ? 'Done Editing' : 'Edit Products'}
            </button>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {content.products.map((product, idx) => (
              <div key={idx} className="bg-slate-800 rounded-lg p-6 border border-slate-700 hover:border-cyan-500 transition-all">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center">
                    <Package className="text-cyan-400 mr-3" size={32} />
                    <div>
                      <span className="text-xs text-slate-400 block">{product.sku}</span>
                      <h3 className="text-xl font-semibold text-white">{product.name}</h3>
                    </div>
                  </div>
                  <span className="px-3 py-1 bg-slate-700 text-cyan-400 rounded-full text-sm">
                    {product.category}
                  </span>
                </div>
                <p className="text-slate-300 mb-4">{product.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-semibold text-white">{product.price}</span>
                  <button className="px-4 py-2 bg-cyan-600 text-white rounded hover:bg-cyan-700 transition-colors">
                    Request Quote
                  </button>
                </div>
              </div>
            ))}
          </div>

          {editMode && (
            <div className="mt-8 bg-slate-800 rounded-lg p-6 border border-cyan-500">
              <p className="text-slate-300 text-center">
                <strong className="text-white">Admin Mode:</strong> In production, connect to your CMS or database to manage products.
                For Cloudflare Workers deployment, use KV storage or D1 database.
              </p>
            </div>
          )}
        </div>
      </div>
    );
  };

  const ContactPage = () => {
    const [formData, setFormData] = useState({
      agency: '',
      name: '',
      email: '',
      phone: '',
      product: 'Booking Software',
      message: ''
    });

    const handleSubmit = (e) => {
      e.preventDefault();
      alert('Thank you for your interest! Our team will contact you shortly.');
      console.log('Form submitted:', formData);
    };

    return (
      <div className="bg-gradient-to-b from-slate-900 to-slate-800 min-h-screen">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Contact Sales</h1>
            <p className="text-xl text-slate-300">Get a personalized quote for your agency</p>
          </div>

          <div className="bg-slate-800 rounded-lg p-8 border border-slate-700">
            <div className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-white mb-2">Agency Name</label>
                  <input 
                    type="text" 
                    value={formData.agency}
                    onChange={(e) => setFormData({...formData, agency: e.target.value})}
                    className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none" 
                  />
                </div>
                <div>
                  <label className="block text-white mb-2">Contact Name</label>
                  <input 
                    type="text" 
                    value={formData.name}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                    className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none" 
                  />
                </div>
              </div>
              
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-white mb-2">Email</label>
                  <input 
                    type="email" 
                    value={formData.email}
                    onChange={(e) => setFormData({...formData, email: e.target.value})}
                    className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none" 
                  />
                </div>
                <div>
                  <label className="block text-white mb-2">Phone</label>
                  <input 
                    type="tel" 
                    value={formData.phone}
                    onChange={(e) => setFormData({...formData, phone: e.target.value})}
                    className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none" 
                  />
                </div>
              </div>

              <div>
                <label className="block text-white mb-2">Products of Interest</label>
                <select 
                  value={formData.product}
                  onChange={(e) => setFormData({...formData, product: e.target.value})}
                  className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none"
                >
                  <option>Booking Software</option>
                  <option>Holding Video System</option>
                  <option>Complete Solution</option>
                  <option>Hardware Only</option>
                </select>
              </div>

              <div>
                <label className="block text-white mb-2">Message</label>
                <textarea 
                  rows="4" 
                  value={formData.message}
                  onChange={(e) => setFormData({...formData, message: e.target.value})}
                  className="w-full px-4 py-2 bg-slate-700 text-white rounded border border-slate-600 focus:border-cyan-500 focus:outline-none"
                ></textarea>
              </div>

              <button 
                onClick={handleSubmit}
                className="w-full px-6 py-3 bg-cyan-600 text-white rounded-lg hover:bg-cyan-700 transition-colors font-semibold"
              >
                Submit Request
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-900">
      <NavBar />
      {currentPage === 'home' && <HomePage />}
      {currentPage === 'booking' && <BookingSoftwarePage />}
      {currentPage === 'holding' && <HoldingVideoPage />}
      {currentPage === 'products' && <ProductsPage />}
      {currentPage === 'contact' && <ContactPage />}
      
      <footer className="bg-slate-950 border-t border-slate-800 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center text-slate-400">
            <p className="mb-2">© 2025 Book 'Em Bot. NIST-Compliant Booking Solutions.</p>
            <p className="text-sm">Established 2025 | Serving Law Enforcement Nationwide</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default BookEmBotWebsite;