import React, { useState } from 'react';
import { Menu, X, Search, ChevronRight, Star, TrendingUp, Heart, DollarSign, BookOpen, Users, Smartphone, Sparkles } from 'lucide-react';

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

  const categories = [
    { name: 'Health & Fitness', icon: Heart, color: 'bg-red-500' },
    { name: 'Business & Marketing', icon: TrendingUp, color: 'bg-blue-500' },
    { name: 'Personal Development', icon: Sparkles, color: 'bg-purple-500' },
    { name: 'Relationships & Dating', icon: Users, color: 'bg-pink-500' },
    { name: 'Finance & Investing', icon: DollarSign, color: 'bg-green-500' },
    { name: 'Hobbies & Lifestyle', icon: Star, color: 'bg-yellow-500' },
    { name: 'Spirituality & Self-Help', icon: BookOpen, color: 'bg-teal-500' },
    { name: 'Technology & Software', icon: Smartphone, color: 'bg-indigo-500' }
  ];

  const Navigation = () => (
    <nav className="bg-white shadow-md 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">
            <h1 className="text-2xl font-bold text-blue-600">SanaaShop</h1>
          </div>
          
          {/* Desktop Navigation */}
          <div className="hidden md:flex space-x-8">
            <button onClick={() => setCurrentPage('home')} className={`${currentPage === 'home' ? 'text-blue-600' : 'text-gray-700'} hover:text-blue-600 font-medium`}>Home</button>
            <button onClick={() => setCurrentPage('blog')} className={`${currentPage === 'blog' ? 'text-blue-600' : 'text-gray-700'} hover:text-blue-600 font-medium`}>Blog</button>
            <button onClick={() => setCurrentPage('categories')} className={`${currentPage === 'categories' ? 'text-blue-600' : 'text-gray-700'} hover:text-blue-600 font-medium`}>Categories</button>
            <button onClick={() => setCurrentPage('about')} className={`${currentPage === 'about' ? 'text-blue-600' : 'text-gray-700'} hover:text-blue-600 font-medium`}>About</button>
            <button onClick={() => setCurrentPage('contact')} className={`${currentPage === 'contact' ? 'text-blue-600' : 'text-gray-700'} hover:text-blue-600 font-medium`}>Contact</button>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-gray-700">
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="md:hidden pb-4">
            <button onClick={() => { setCurrentPage('home'); setMobileMenuOpen(false); }} className="block w-full text-left py-2 text-gray-700 hover:text-blue-600">Home</button>
            <button onClick={() => { setCurrentPage('blog'); setMobileMenuOpen(false); }} className="block w-full text-left py-2 text-gray-700 hover:text-blue-600">Blog</button>
            <button onClick={() => { setCurrentPage('categories'); setMobileMenuOpen(false); }} className="block w-full text-left py-2 text-gray-700 hover:text-blue-600">Categories</button>
            <button onClick={() => { setCurrentPage('about'); setMobileMenuOpen(false); }} className="block w-full text-left py-2 text-gray-700 hover:text-blue-600">About</button>
            <button onClick={() => { setCurrentPage('contact'); setMobileMenuOpen(false); }} className="block w-full text-left py-2 text-gray-700 hover:text-blue-600">Contact</button>
          </div>
        )}
      </div>
    </nav>
  );

  const HomePage = () => (
    <div>
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">Discover Premium Digital Products</h1>
          <p className="text-xl md:text-2xl mb-8">Curated resources to transform your life and achieve your goals</p>
          <button className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold text-lg hover:bg-gray-100 transition">
            Explore Products
          </button>
        </div>
      </div>

      {/* Featured Categories */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">Popular Categories</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {categories.slice(0, 8).map((cat, idx) => {
            const Icon = cat.icon;
            return (
              <div key={idx} className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition cursor-pointer">
                <div className={`${cat.color} w-12 h-12 rounded-full flex items-center justify-center mb-4`}>
                  <Icon className="text-white" size={24} />
                </div>
                <h3 className="font-semibold text-gray-800">{cat.name}</h3>
              </div>
            );
          })}
        </div>
      </div>

      {/* Featured Products */}
      <div className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-12">Featured Products</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[1, 2, 3].map((item) => (
              <div key={item} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
                <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-400"></div>
                <div className="p-6">
                  <h3 className="text-xl font-bold mb-2">Product Title {item}</h3>
                  <p className="text-gray-600 mb-4">Brief description of the product and its benefits...</p>
                  <div className="flex items-center justify-between">
                    <span className="text-2xl font-bold text-blue-600">$XX.XX</span>
                    <button className="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">
                      Learn More
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  const BlogPage = () => (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <h1 className="text-4xl font-bold mb-8">Blog</h1>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {[1, 2, 3, 4, 5, 6].map((post) => (
          <article key={post} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
            <div className="h-48 bg-gradient-to-br from-green-400 to-blue-400"></div>
            <div className="p-6">
              <span className="text-sm text-blue-600 font-semibold">Category</span>
              <h2 className="text-xl font-bold mt-2 mb-3">Blog Post Title {post}</h2>
              <p className="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
              <button className="text-blue-600 font-semibold hover:underline flex items-center">
                Read More <ChevronRight size={16} />
              </button>
            </div>
          </article>
        ))}
      </div>
    </div>
  );

  const CategoriesPage = () => (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <h1 className="text-4xl font-bold mb-8">All Categories</h1>
      <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-6">
        {categories.map((cat, idx) => {
          const Icon = cat.icon;
          return (
            <div key={idx} className="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition cursor-pointer">
              <div className={`${cat.color} w-16 h-16 rounded-full flex items-center justify-center mb-4`}>
                <Icon className="text-white" size={32} />
              </div>
              <h3 className="text-xl font-semibold text-gray-800 mb-2">{cat.name}</h3>
              <p className="text-gray-600 text-sm">Explore premium products in {cat.name.toLowerCase()}</p>
            </div>
          );
        })}
      </div>
    </div>
  );

  const AboutPage = () => (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <h1 className="text-4xl font-bold mb-8">About Us</h1>
      <div className="bg-white rounded-lg shadow-md p-8">
        <h2 className="text-3xl font-bold text-blue-600 mb-6">Welcome to SanaaShop - Your Digital Marketplace for Life Transformation</h2>
        
        <p className="text-gray-700 text-lg leading-relaxed mb-6">
          Discover a curated collection of premium digital products designed to enhance every aspect of your life. From health and wellness to financial freedom, from personal development to creative pursuits, we bring you carefully selected resources from trusted experts and creators worldwide.
        </p>

        <h3 className="text-2xl font-bold text-gray-800 mb-4">What We Offer:</h3>

        <div className="space-y-4 mb-6">
          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Health & Fitness</h4>
            <p className="text-gray-700 leading-relaxed">Transform your body and vitality with proven workout programs, nutrition guides, weight loss systems, and holistic wellness solutions tailored to your lifestyle.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Business & Marketing</h4>
            <p className="text-gray-700 leading-relaxed">Unlock your entrepreneurial potential with cutting-edge training on digital marketing, e-commerce, affiliate strategies, and business growth systems.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Personal Development</h4>
            <p className="text-gray-700 leading-relaxed">Invest in yourself with life-changing programs on productivity, confidence building, mindset mastery, and success strategies from leading coaches.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Relationships & Dating</h4>
            <p className="text-gray-700 leading-relaxed">Build stronger connections with expert advice on dating, marriage enrichment, communication skills, and relationship psychology.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Finance & Investing</h4>
            <p className="text-gray-700 leading-relaxed">Take control of your financial future with resources on trading, investing, cryptocurrency, debt elimination, and wealth building.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Hobbies & Lifestyle</h4>
            <p className="text-gray-700 leading-relaxed">Explore your passions with guides on cooking, gardening, pet care, travel, arts and crafts, and unique skill development.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Spirituality & Self-Help</h4>
            <p className="text-gray-700 leading-relaxed">Find inner peace and purpose through meditation programs, manifestation guides, spiritual growth courses, and mindfulness practices.</p>
          </div>

          <div>
            <h4 className="text-xl font-semibold text-gray-800 mb-2">Technology & Software</h4>
            <p className="text-gray-700 leading-relaxed">Stay ahead with the latest tools, apps, training programs, and tech solutions for productivity and innovation.</p>
          </div>
        </div>

        <p className="text-gray-700 text-lg leading-relaxed mb-6">
          Every product in our store comes with detailed information, user reviews, and money-back guarantees to ensure your satisfaction. We're committed to helping you find the right solutions to achieve your goals and live your best life.
        </p>

        <p className="text-gray-700 text-lg leading-relaxed font-semibold">
          Start your transformation today - browse our categories and discover resources that truly make a difference.
        </p>
      </div>
    </div>
  );

  const ContactPage = () => {
    const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', message: '' });
    
    const handleSubmit = () => {
      alert('Thank you for your message! We will get back to you soon.');
      setFormData({ firstName: '', lastName: '', email: '', message: '' });
    };

    return (
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <h1 className="text-4xl font-bold mb-8">Contact Us</h1>
        
        <div className="bg-white rounded-lg shadow-md p-8 mb-8">
          <p className="text-gray-700 text-lg leading-relaxed mb-6">
            Do you have questions about Health & Fitness, Business & Marketing, Personal Development, Relationships & Dating, Finance & Investing, Hobbies & Lifestyle, Spirituality & Self-Help OR Technology & Software? We're here to help! Fill out the contact form below to inquire, get advice, or provide feedback.
          </p>
          
          <div className="bg-blue-50 border-l-4 border-blue-600 p-6 mb-6">
            <h3 className="text-xl font-bold text-gray-800 mb-3">Contact Us</h3>
            <p className="text-gray-700 flex items-center">
              <span className="font-semibold mr-2">• Email:</span>
              <a href="mailto:info@sanaashop.com" className="text-blue-600 hover:underline">info@sanaashop.com</a>
            </p>
            <p className="text-gray-600 italic mt-2">We'll get back to you soon</p>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-8">
          <div className="space-y-6">
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <label className="block text-gray-700 font-semibold mb-2">Name <span className="text-red-500">*</span></label>
                <input 
                  type="text" 
                  placeholder="First"
                  value={formData.firstName}
                  onChange={(e) => setFormData({...formData, firstName: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" 
                />
                <span className="text-sm text-gray-500">First</span>
              </div>
              <div>
                <label className="block text-gray-700 font-semibold mb-2 opacity-0">Last</label>
                <input 
                  type="text" 
                  placeholder="Last"
                  value={formData.lastName}
                  onChange={(e) => setFormData({...formData, lastName: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" 
                />
                <span className="text-sm text-gray-500">Last</span>
              </div>
            </div>
            
            <div>
              <label className="block text-gray-700 font-semibold mb-2">Email <span className="text-red-500">*</span></label>
              <input 
                type="email" 
                value={formData.email}
                onChange={(e) => setFormData({...formData, email: e.target.value})}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" 
              />
            </div>
            
            <div>
              <label className="block text-gray-700 font-semibold mb-2">Comment or Message</label>
              <textarea 
                rows="6" 
                value={formData.message}
                onChange={(e) => setFormData({...formData, message: e.target.value})}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
              ></textarea>
            </div>
            
            <button 
              onClick={handleSubmit}
              className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
            >
              Submit
            </button>
          </div>
        </div>
      </div>
    );
  };

  const Footer = () => (
    <footer className="bg-gray-800 text-white py-12 mt-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-4 gap-8">
          <div>
            <h3 className="text-xl font-bold mb-4">SanaaShop</h3>
            <p className="text-gray-400">Your trusted source for premium digital products.</p>
          </div>
          <div>
            <h4 className="font-semibold mb-4">Quick Links</h4>
            <ul className="space-y-2 text-gray-400">
              <li><button onClick={() => setCurrentPage('home')} className="hover:text-white">Home</button></li>
              <li><button onClick={() => setCurrentPage('blog')} className="hover:text-white">Blog</button></li>
              <li><button onClick={() => setCurrentPage('categories')} className="hover:text-white">Categories</button></li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-4">Company</h4>
            <ul className="space-y-2 text-gray-400">
              <li><button onClick={() => setCurrentPage('about')} className="hover:text-white">About Us</button></li>
              <li><button onClick={() => setCurrentPage('contact')} className="hover:text-white">Contact</button></li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-4">Newsletter</h4>
            <p className="text-gray-400 mb-4">Subscribe for updates and exclusive offers</p>
            <input type="email" placeholder="Your email" className="w-full px-4 py-2 rounded-lg text-gray-800" />
          </div>
        </div>
        <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
          <p>&copy; 2026 SanaaShop. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );

  return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />
      {currentPage === 'home' && <HomePage />}
      {currentPage === 'blog' && <BlogPage />}
      {currentPage === 'categories' && <CategoriesPage />}
      {currentPage === 'about' && <AboutPage />}
      {currentPage === 'contact' && <ContactPage />}
      <Footer />
    </div>
  );
};

export default ClickBankWebsite;