import React, { useState } from 'react';
import { Phone, MapPin, Building2, Send, CheckCircle2, ShoppingBag, Menu, X } from 'lucide-react';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [formData, setFormData] = useState({ name: '', phone: '', message: '' });
  const [submitStatus, setSubmitStatus] = useState('idle'); // idle, sending, success

  const products = [
    { name: "Kurti Pant Dupatta Sets", image: "https://images.unsplash.com/photo-1583391733958-650fac5eb369?auto=format&fit=crop&w=600&q=80" },
    { name: "Coord Sets", image: "https://images.unsplash.com/photo-1604176354204-9268737828e4?auto=format&fit=crop&w=600&q=80" },
    { name: "Single Kurtis", image: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?auto=format&fit=crop&w=600&q=80" },
    { name: "Kurti Pants", image: "https://images.unsplash.com/photo-1595777457583-95e059d581b8?auto=format&fit=crop&w=600&q=80" },
    { name: "Nighties", image: "https://images.unsplash.com/photo-1616084606184-7a2e8c159844?auto=format&fit=crop&w=600&q=80" },
    { name: "Sarees", image: "https://images.unsplash.com/photo-1610189014605-e1106ab0ce4e?auto=format&fit=crop&w=600&q=80" }
  ];

  const team = [
    { name: "Sripal Jain", image: "https://ui-avatars.com/api/?name=Sripal+Jain&background=0D8ABC&color=fff&size=256" },
    { name: "Rashi Jain", image: "https://ui-avatars.com/api/?name=Rashi+Jain&background=F59E0B&color=fff&size=256" },
    { name: "Jainam Shah", image: "https://ui-avatars.com/api/?name=Jainam+Shah&background=10B981&color=fff&size=256" },
    { name: "Sarthak Shah", image: "https://ui-avatars.com/api/?name=Sarthak+Shah&background=8B5CF6&color=fff&size=256" }
  ];

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitStatus('sending');
    
    // This simulates the connection to your PHP backend. 
    // In production on Hostgator, you would uncomment the fetch block below.
    setTimeout(() => {
      setSubmitStatus('success');
      setFormData({ name: '', phone: '', message: '' });
      setTimeout(() => setSubmitStatus('idle'), 4000);
    }, 1500);

    /* // ACTUAL PHP BACKEND CALL (Uncomment for Hostgator deployment):
    fetch('https://yourdomain.com/contact.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    }).then(res => res.json()).then(data => {
       setSubmitStatus('success');
       setFormData({ name: '', phone: '', message: '' });
    }).catch(err => {
       console.error("Error submitting form", err);
    });
    */
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
    setIsMenuOpen(false);
  };

  return (
    <div className="min-h-screen bg-neutral-50 font-sans text-neutral-800">
      
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm 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-20">
            {/* Dual Firm Logos/Names */}
            <div className="flex flex-col">
              <span className="text-xl font-bold tracking-tight text-neutral-900 leading-tight">Hithvi Creations</span>
              <span className="text-sm font-semibold text-rose-600 flex items-center gap-1">
                &amp; JP Enterprise
              </span>
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8">
              <button onClick={() => scrollToSection('home')} className="text-neutral-600 hover:text-rose-600 font-medium transition-colors">Home</button>
              <button onClick={() => scrollToSection('products')} className="text-neutral-600 hover:text-rose-600 font-medium transition-colors">Wholesale Collection</button>
              <button onClick={() => scrollToSection('team')} className="text-neutral-600 hover:text-rose-600 font-medium transition-colors">Our Team</button>
              <button onClick={() => scrollToSection('contact')} className="bg-rose-600 text-white px-5 py-2 rounded-full font-medium hover:bg-rose-700 transition-colors shadow-md">Bulk Inquiry</button>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden flex items-center">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-neutral-600 focus:outline-none">
                {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-neutral-100 px-4 pt-2 pb-4 space-y-1 shadow-lg">
            <button onClick={() => scrollToSection('home')} className="block w-full text-left px-3 py-2 text-base font-medium text-neutral-700 hover:text-rose-600 hover:bg-neutral-50 rounded-md">Home</button>
            <button onClick={() => scrollToSection('products')} className="block w-full text-left px-3 py-2 text-base font-medium text-neutral-700 hover:text-rose-600 hover:bg-neutral-50 rounded-md">Wholesale Collection</button>
            <button onClick={() => scrollToSection('team')} className="block w-full text-left px-3 py-2 text-base font-medium text-neutral-700 hover:text-rose-600 hover:bg-neutral-50 rounded-md">Our Team</button>
            <button onClick={() => scrollToSection('contact')} className="block w-full text-left px-3 py-2 text-base font-medium text-rose-600 hover:bg-rose-50 rounded-md">Bulk Inquiry</button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="pt-32 pb-20 md:pt-40 md:pb-28 px-4 text-center bg-gradient-to-b from-rose-50 to-neutral-50">
        <div className="max-w-4xl mx-auto">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-100 text-rose-700 font-semibold text-sm mb-6">
            <Building2 size={16} /> Premium Ladies Wear Wholesalers
          </div>
          <h1 className="text-4xl md:text-6xl font-extrabold text-neutral-900 tracking-tight mb-6">
            Elevate Your Retail Business with Premium Fashion
          </h1>
          <p className="text-lg md:text-xl text-neutral-600 mb-10 max-w-2xl mx-auto">
            Proudly operated by <span className="font-semibold text-neutral-800">Hithvi Creations</span> and <span className="font-semibold text-neutral-800">JP Enterprise</span>. We supply high-quality ladies' ethnic and casual wear in bulk quantities at unbeatable wholesale prices.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <button onClick={() => scrollToSection('products')} className="px-8 py-4 bg-neutral-900 text-white rounded-full font-semibold text-lg hover:bg-neutral-800 transition-all shadow-lg w-full sm:w-auto">
              Explore Collection
            </button>
            <button onClick={() => scrollToSection('contact')} className="px-8 py-4 bg-white border-2 border-neutral-200 text-neutral-800 rounded-full font-semibold text-lg hover:border-neutral-300 transition-all shadow-sm w-full sm:w-auto flex justify-center items-center gap-2">
              <Phone size={20} /> Call 9000668609
            </button>
          </div>
        </div>
      </section>

      {/* Products Section */}
      <section id="products" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">Our Wholesale Range</h2>
            <p className="text-neutral-500 max-w-2xl mx-auto text-lg">Browse our premium categories available for bulk purchase. We ensure quality fabrics and the latest trends.</p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {products.map((product, index) => (
              <div key={index} className="group relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-neutral-100">
                <div className="aspect-[4/5] w-full overflow-hidden bg-neutral-200">
                  <img 
                    src={product.image} 
                    alt={product.name} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    loading="lazy"
                  />
                </div>
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
                <div className="absolute bottom-0 left-0 right-0 p-6 flex justify-between items-end">
                  <h3 className="text-2xl font-bold text-white">{product.name}</h3>
                  <div className="bg-white/20 backdrop-blur-sm p-2 rounded-full text-white">
                    <ShoppingBag size={20} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section id="team" className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">Meet Our Team</h2>
            <p className="text-neutral-500 max-w-2xl mx-auto text-lg">The dedicated faces behind Hithvi Creations & JP Enterprise.</p>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 gap-10 md:gap-12">
            {team.map((member, index) => (
              <div key={index} className="flex flex-col items-center">
                <div className="w-32 h-32 md:w-48 md:h-48 rounded-full overflow-hidden shadow-lg border-4 border-white mb-6">
                  <img 
                    src={member.image} 
                    alt={member.name} 
                    className="w-full h-full object-cover"
                    loading="lazy"
                  />
                </div>
                <h3 className="text-xl font-bold text-neutral-900 text-center">{member.name}</h3>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            
            {/* Contact Info */}
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-6">Let's Do Business</h2>
              <p className="text-neutral-600 text-lg mb-10">
                Interested in stocking our products? Contact us for our complete wholesale catalog, minimum order quantities, and pricing details.
              </p>
              
              <div className="space-y-8">
                <div className="flex items-start gap-4">
                  <div className="bg-rose-100 p-3 rounded-full text-rose-600 shrink-0">
                    <Phone size={24} />
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-1">Call Us</h4>
                    <p className="text-2xl font-bold text-neutral-900">9000668609</p>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="bg-rose-100 p-3 rounded-full text-rose-600 shrink-0 mt-1">
                    <MapPin size={24} />
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold text-neutral-500 uppercase tracking-wider mb-1">Our Address</h4>
                    <h5 className="font-bold text-neutral-900 text-lg">J P ENTERPRISE</h5>
                    <p className="text-neutral-600 leading-relaxed mt-1">
                      B. 2014 CITY CENTRE 2<br />
                      AHMEDABAD
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="bg-white rounded-3xl shadow-xl border border-neutral-100 p-8 md:p-10">
              <h3 className="text-2xl font-bold text-neutral-900 mb-6">Request Wholesale Details</h3>
              
              {submitStatus === 'success' ? (
                <div className="bg-green-50 text-green-800 p-6 rounded-2xl flex flex-col items-center text-center">
                  <CheckCircle2 size={48} className="text-green-500 mb-4" />
                  <h4 className="text-xl font-bold mb-2">Message Sent Successfully!</h4>
                  <p>Our team will contact you shortly regarding your bulk order inquiry.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div>
                    <label className="block text-sm font-semibold text-neutral-700 mb-2">Full Name / Business Name *</label>
                    <input 
                      type="text" 
                      name="name"
                      required
                      value={formData.name}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition-all"
                      placeholder="Enter your name"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-neutral-700 mb-2">Phone Number *</label>
                    <input 
                      type="tel" 
                      name="phone"
                      required
                      value={formData.phone}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition-all"
                      placeholder="e.g. 9000668609"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-neutral-700 mb-2">Requirements / Message</label>
                    <textarea 
                      name="message"
                      rows="4"
                      value={formData.message}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:ring-2 focus:ring-rose-500 focus:border-rose-500 outline-none transition-all resize-none"
                      placeholder="Tell us about the quantities and categories you are interested in..."
                    ></textarea>
                  </div>
                  <button 
                    type="submit" 
                    disabled={submitStatus === 'sending'}
                    className="w-full bg-rose-600 text-white font-bold py-4 rounded-xl hover:bg-rose-700 transition-colors flex justify-center items-center gap-2 disabled:opacity-70"
                  >
                    {submitStatus === 'sending' ? 'Sending...' : (
                      <>Send Inquiry <Send size={20} /></>
                    )}
                  </button>
                </form>
              )}
            </div>

          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-neutral-900 text-neutral-400 py-12 border-t border-neutral-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-center md:text-left">
            <h3 className="text-white text-xl font-bold mb-1">Hithvi Creations & JP Enterprise</h3>
            <p>Premium Ladies Wear Wholesale</p>
          </div>
          <div className="text-center md:text-right">
            <p>&copy; {new Date().getFullYear()} All Rights Reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}