import React, { useState, useEffect } from 'react';
import { 
  Search, 
  Menu, 
  X, 
  ChevronRight, 
  ChevronDown, 
  MessageCircle, 
  Globe, 
  Truck, 
  CheckCircle2, 
  Star, 
  ArrowRight,
  ShieldCheck,
  Zap,
  PhoneCall,
  Mail,
  MapPin,
  Building2,
  PackageCheck,
  Award,
  Clock,
  Send,
  Users,
  Factory
} from 'lucide-react';

const App = () => {
  const [scrolled, setScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showExpert, setShowExpert] = useState(false);
  const [openFaq, setOpenFaq] = useState(null);
  
  // Consolidated Lead Form State
  const [leadData, setLeadData] = useState({
    type: 'Domestic',
    category: '',
    product: '',
    location: '',
    countryPort: '',
    name: '',
    mobile: '',
    email: '',
    timeline: 'Immediately'
  });

  const companyData = {
    name: "Paramount Threads Pvt. Ltd",
    gst: "27AACCP3558M1ZZ",
    phone1: "+91 93240 10422",
    phone2: "+91 81696 53538",
    email: "ptpl_80@rediffmail.com",
    address: "A/122, Shanti Industrial Estate, Mulund (W), Mumbai- 400080",
    waNumber: "919324010422"
  };

  const productMap = {
    "Polyester-Spun Polyester": ["Standard Spun", "High Tenacity", "Industrial Grade"],
    "Polyester Core Spun": ["Poly-Poly Core", "Poly-Cotton Core", "Heavy Duty Core"],
    "Cotton RFD": ["Premium RFD Cotton", "Organic RFD", "Eco-Friendly Base"],
    "Continuous Filament Thread": ["Lustrous Filament", "Textured Filament", "Embroidery Special"]
  };

  const domesticCities = ["Ahmedabad", "Mumbai", "Kolhapur", "Amravati", "Indore", "Surat", "Vapi", "Umargaon", "Ranchi", "Delhi", "Kolkata", "Others"];
  const internationalContinents = ["Africa (Kenya/Mombasa)", "Asia", "Europe", "North America", "Middle East"];

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    const timer = setTimeout(() => setShowExpert(true), 5000); 
    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearTimeout(timer);
    };
  }, []);

  const handleWhatsAppLead = (e) => {
    if(e) e.preventDefault();
    const text = `*New Business Inquiry*%0A%0A*Interest:* ${leadData.type}%0A*Category:* ${leadData.category}%0A*Product:* ${leadData.product}%0A*Location:* ${leadData.location}${leadData.countryPort ? ` (${leadData.countryPort})` : ''}%0A*Timeline:* ${leadData.timeline}%0A%0A*Name:* ${leadData.name}%0A*Mobile:* ${leadData.mobile}`;
    window.open(`https://wa.me/${companyData.waNumber}?text=${text}`, '_blank');
  };

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

  return (
    <div className="min-h-screen bg-white font-sans text-slate-900 selection:bg-[#1A1B4B] selection:text-white">
      
      {/* --- TOP EXPORT FLOATER --- */}
      <div className="fixed top-24 right-6 z-[60] hidden xl:block animate-fade-in-right">
        <div className="bg-white/95 backdrop-blur-md shadow-2xl rounded-3xl p-5 border border-slate-100 max-w-[280px]">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-[#1A1B4B] rounded-full flex items-center justify-center text-white">
              <Truck size={20} />
            </div>
            <div>
              <p className="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Logistics Hub</p>
              <p className="text-xs font-black text-slate-800">FCL or LCL Specialist</p>
            </div>
          </div>
          <p className="text-[11px] text-slate-500 mb-4 leading-relaxed">Direct support for full containers to Mombasa and key global ports.</p>
          <button onClick={() => scrollToId('home')} className="w-full bg-[#1A1B4B] text-white py-3 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-blue-900 transition-all flex items-center justify-center gap-2">
            Get Export Rates <ArrowRight size={14}/>
          </button>
        </div>
      </div>

      {/* --- NAVIGATION --- */}
      <nav className={`fixed w-full z-[100] transition-all duration-500 ${scrolled ? 'bg-white/95 backdrop-blur-md py-3 shadow-lg' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-4 group cursor-pointer" onClick={() => scrollToId('home')}>
             <div className="w-12 h-12 bg-[#1A1B4B] rounded-xl flex items-center justify-center text-white group-hover:rotate-6 transition-transform shadow-xl">
               <span className="text-xl font-black">P</span>
             </div>
             <div>
                <h1 className="text-lg font-black tracking-tight text-[#1A1B4B] leading-none">PARAMOUNT</h1>
                <p className="text-[9px] tracking-[0.3em] font-bold text-slate-400 uppercase">Threads Pvt. Ltd.</p>
             </div>
          </div>

          <div className="hidden lg:flex items-center space-x-10">
            {[
              { label: 'Home', id: 'home' },
              { label: 'Products', id: 'products' },
              { label: 'About Us', id: 'aboutus' },
              { label: 'Inquiry', id: 'inquiry-bottom' },
              { label: 'Contact', id: 'contact' }
            ].map((item) => (
              <button key={item.label} onClick={() => scrollToId(item.id)} className="text-[11px] font-bold tracking-widest uppercase text-slate-600 hover:text-[#1A1B4B] transition-colors relative group">
                {item.label}
                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#1A1B4B] group-hover:w-full transition-all duration-300"></span>
              </button>
            ))}
          </div>

          <div className="flex items-center gap-4">
            <a href={`tel:${companyData.phone1}`} className="hidden md:flex items-center gap-2 bg-[#1A1B4B] text-white px-5 py-2.5 rounded-full text-xs font-bold shadow-xl shadow-blue-900/20 hover:scale-105 transition-all">
              <PhoneCall size={14} /> <span className="tracking-wide">Expert Advice</span>
            </a>
            <button onClick={() => setIsMenuOpen(true)} className="lg:hidden p-2 text-slate-900"><Menu size={28} /></button>
          </div>
        </div>
      </nav>

      {/* --- HERO SECTION --- */}
      <section id="home" className="relative min-h-screen flex items-center pt-24 overflow-hidden bg-slate-50">
        <div className="absolute top-0 right-0 w-1/3 h-full bg-[#1A1B4B]/5 -skew-x-12 translate-x-20"></div>
        <div className="max-w-7xl mx-auto px-6 w-full grid lg:grid-cols-2 gap-16 items-center relative z-10">
          
          <div className="animate-fade-in-up">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold uppercase tracking-widest mb-8">
              <ShieldCheck size={14} /> Premium Industrial Standards
            </div>
            <h2 className="text-5xl lg:text-7xl font-black text-[#1A1B4B] leading-[1.05] mb-8">
              The Gold Standard <br/>of <span className="text-blue-600">Sewing Threads.</span>
            </h2>
            <p className="text-lg text-slate-600 mb-10 leading-relaxed max-w-lg">
              Engineered for endurance. Trusted by global fashion houses and heavy industrial units for over 40 years.
            </p>
            <div className="grid grid-cols-3 gap-6 py-8 border-t border-slate-200">
               <div><p className="text-3xl font-black text-[#1A1B4B]">40+</p><p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Years Mastery</p></div>
               <div><p className="text-3xl font-black text-[#1A1B4B]">12+</p><p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Hubs Covered</p></div>
               <div><p className="text-3xl font-black text-[#1A1B4B]">24/7</p><p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Export Support</p></div>
            </div>
          </div>

          {/* --- UNIFIED PREMIUM LEAD FORM --- */}
          <div className="relative animate-fade-in-right">
            <div className="bg-white rounded-[40px] shadow-2xl p-8 lg:p-10 border border-slate-100 relative">
              <div className="flex items-center justify-between mb-8">
                 <h3 className="text-xl font-black text-[#1A1B4B] uppercase tracking-tight">Quick Requirement Tool</h3>
                 <div className="flex bg-slate-100 p-1 rounded-xl">
                    <button 
                      onClick={() => setLeadData({...leadData, type: 'Domestic'})}
                      className={`px-4 py-2 rounded-lg text-[10px] font-bold transition-all ${leadData.type === 'Domestic' ? 'bg-[#1A1B4B] text-white shadow-lg' : 'text-slate-500'}`}
                    >Domestic</button>
                    <button 
                      onClick={() => setLeadData({...leadData, type: 'Import'})}
                      className={`px-4 py-2 rounded-lg text-[10px] font-bold transition-all ${leadData.type === 'Import' ? 'bg-[#1A1B4B] text-white shadow-lg' : 'text-slate-500'}`}
                    >International</button>
                 </div>
              </div>

              <form onSubmit={handleWhatsAppLead} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-widest ml-1">Thread Category</label>
                      <select 
                        required
                        className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 focus:ring-2 focus:ring-[#1A1B4B] text-sm outline-none transition-all"
                        onChange={(e) => setLeadData({...leadData, category: e.target.value})}
                      >
                        <option value="">Select Category</option>
                        {Object.keys(productMap).map(cat => <option key={cat} value={cat}>{cat}</option>)}
                      </select>
                   </div>
                   <div className="space-y-2">
                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-widest ml-1">Specific Variant</label>
                      <select 
                        required
                        disabled={!leadData.category}
                        className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 focus:ring-2 focus:ring-[#1A1B4B] text-sm outline-none transition-all disabled:opacity-50"
                        onChange={(e) => setLeadData({...leadData, product: e.target.value})}
                      >
                        <option value="">Select Product</option>
                        {leadData.category && productMap[leadData.category].map(prod => <option key={prod} value={prod}>{prod}</option>)}
                      </select>
                   </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-widest ml-1">{leadData.type === 'Domestic' ? 'Delivery City' : 'Region'}</label>
                      <select 
                        required
                        className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 focus:ring-2 focus:ring-[#1A1B4B] text-sm outline-none transition-all"
                        onChange={(e) => setLeadData({...leadData, location: e.target.value})}
                      >
                        <option value="">Select Location</option>
                        {(leadData.type === 'Domestic' ? domesticCities : internationalContinents).map(loc => <option key={loc} value={loc}>{loc}</option>)}
                      </select>
                   </div>
                   {leadData.type === 'Import' ? (
                     <div className="space-y-2">
                        <label className="text-[9px] font-bold text-slate-400 uppercase tracking-widest ml-1">Port/Country</label>
                        <input 
                          placeholder="Mombasa, etc."
                          className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 outline-none text-sm focus:ring-2 focus:ring-[#1A1B4B] transition-all"
                          onChange={(e) => setLeadData({...leadData, countryPort: e.target.value})}
                        />
                     </div>
                   ) : (
                    <div className="space-y-2">
                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-widest ml-1">Timeline</label>
                      <select 
                        className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 focus:ring-2 focus:ring-[#1A1B4B] text-sm outline-none transition-all"
                        onChange={(e) => setLeadData({...leadData, timeline: e.target.value})}
                      >
                        <option value="Immediately">Immediately</option>
                        <option value="In a week">In a week</option>
                        <option value="In a month">In a month</option>
                      </select>
                    </div>
                   )}
                </div>

                <div className="pt-2">
                   <input 
                    required
                    placeholder="Full Name"
                    className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 outline-none text-sm mb-3 focus:ring-2 focus:ring-[#1A1B4B]"
                    onChange={(e) => setLeadData({...leadData, name: e.target.value})}
                   />
                   <input 
                    required
                    placeholder="Mobile Number"
                    className="w-full p-3.5 rounded-xl bg-slate-50 border-none ring-1 ring-slate-200 outline-none text-sm mb-4 focus:ring-2 focus:ring-[#1A1B4B]"
                    onChange={(e) => setLeadData({...leadData, mobile: e.target.value})}
                   />
                   <button 
                    type="submit"
                    className="w-full bg-[#25D366] text-white py-4 rounded-2xl font-black shadow-xl hover:shadow-green-500/20 flex items-center justify-center gap-3 transition-all transform hover:-translate-y-1"
                  >
                    <MessageCircle size={20} /> Connect for Quote
                  </button>
                  <p className="text-[9px] text-center text-slate-400 mt-4 font-bold uppercase tracking-widest">Response Time: Within 15 Minutes</p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* --- USP SCROLLER --- */}
      <div className="bg-[#1A1B4B] py-8 overflow-hidden whitespace-nowrap">
        <div className="flex animate-scroll space-x-20">
          {[1, 2, 3].map(i => (
            <div key={i} className="flex space-x-20 items-center">
              <span className="text-white font-bold text-[10px] tracking-[0.4em] uppercase flex items-center gap-4">
                <CheckCircle2 size={16} className="text-blue-400" /> Exporting to Kenya & Mombasa
              </span>
              <span className="text-white font-bold text-[10px] tracking-[0.4em] uppercase flex items-center gap-4">
                <ShieldCheck size={16} className="text-blue-400" /> GST: {companyData.gst}
              </span>
              <span className="text-white font-bold text-[10px] tracking-[0.4em] uppercase flex items-center gap-4">
                <PackageCheck size={16} className="text-blue-400" /> Full Container & LCL Experts
              </span>
              <span className="text-white font-bold text-[10px] tracking-[0.4em] uppercase flex items-center gap-4">
                <Star size={16} className="text-blue-400" /> 40 Years Industry Mastery
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* --- PRODUCT SHOWCASE --- */}
      <section id="products" className="py-24 px-6 max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <h3 className="text-xs font-bold text-blue-600 uppercase tracking-[0.4em] mb-4">Core Range</h3>
          <h2 className="text-4xl lg:text-5xl font-black text-[#1A1B4B]">Quality Across Categories</h2>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            { 
              title: "Polyester-Spun", 
              desc: "Engineered for high-speed industrial sewing machines.", 
              img: "https://images.unsplash.com/photo-1520032484190-e5ef81d87978?auto=format&fit=crop&q=80&w=600" 
            },
            { 
              title: "Polyester Core Spun", 
              desc: "Superior strength for structural garment seams.", 
              img: "https://images.unsplash.com/photo-1605518216938-7c31b7b14ad0?auto=format&fit=crop&q=80&w=600" 
            },
            { 
              title: "Cotton RFD", 
              desc: "Premium Ready-for-Dyeing base for custom textile projects.", 
              img: "https://images.unsplash.com/photo-1528291151377-165f5107c82a?auto=format&fit=crop&q=80&w=600" 
            },
            { 
              title: "Continuous Filament", 
              desc: "High-lustre filament for decorative and high-stress use.", 
              img: "https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?auto=format&fit=crop&q=80&w=600" 
            }
          ].map((item, idx) => (
            <div key={idx} className="group bg-white rounded-[32px] p-6 shadow-xl border border-slate-50 hover:shadow-2xl transition-all duration-500 overflow-hidden relative">
              <div className="relative z-10">
                <div className="h-44 mb-6 overflow-hidden rounded-2xl">
                  <img src={item.img} alt={item.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                </div>
                <h4 className="text-lg font-black text-[#1A1B4B] mb-2">{item.title}</h4>
                <p className="text-xs text-slate-500 mb-6 leading-relaxed">{item.desc}</p>
                <button 
                  onClick={() => scrollToId('inquiry-bottom')}
                  className="w-full py-3 bg-slate-50 text-[#1A1B4B] rounded-xl text-[10px] font-black uppercase tracking-widest group-hover:bg-[#1A1B4B] group-hover:text-white transition-all border border-slate-100"
                >
                  Inquire Now
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* --- ABOUT US / DIRECTORS --- */}
      <section id="aboutus" className="py-24 bg-slate-50 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-2 gap-20 items-center mb-24">
             <div className="animate-fade-in">
                <h2 className="text-5xl font-black text-[#1A1B4B] mb-8 leading-[1.1]">The Visionaries Behind <br/><span className="text-blue-600">Paramount.</span></h2>
                <p className="text-base text-slate-600 leading-relaxed mb-8">
                  A legacy spanning four decades, built on the principles of integrity, employee value, and a relentless focus on global textile innovation.
                </p>
                <div className="grid grid-cols-2 gap-6">
                  <div className="flex gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                    <div className="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600"><Award size={20}/></div>
                    <div><p className="font-bold text-sm">Legacy</p><p className="text-[10px] text-slate-400 font-bold uppercase">40 Year Trust</p></div>
                  </div>
                  <div className="flex gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                    <div className="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600"><Globe size={20}/></div>
                    <div><p className="font-bold text-sm">Reach</p><p className="text-[10px] text-slate-400 font-bold uppercase">Global Exports</p></div>
                  </div>
                </div>
             </div>
             <div className="flex gap-4">
                <div className="flex-1 h-96 bg-white rounded-[40px] shadow-2xl overflow-hidden border-8 border-white animate-bounce-slow">
                   <div className="w-full h-full flex flex-col items-center justify-center italic text-slate-300 font-bold p-8 text-center">
                      <Users size={48} className="mb-4 opacity-20"/>
                      <span className="text-xs uppercase tracking-widest">Manish Shah</span>
                   </div>
                </div>
                <div className="flex-1 h-96 bg-white rounded-[40px] shadow-2xl overflow-hidden mt-12 border-8 border-white animate-bounce-slow delay-200">
                   <div className="w-full h-full flex flex-col items-center justify-center italic text-slate-300 font-bold p-8 text-center">
                      <Factory size={48} className="mb-4 opacity-20"/>
                      <span className="text-xs uppercase tracking-widest">Harsh Shah</span>
                   </div>
                </div>
             </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-10 rounded-[48px] shadow-xl relative overflow-hidden group border border-slate-100">
               <div className="relative z-10">
                  <div className="flex items-center gap-4 mb-8">
                    <div className="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center italic text-[10px] text-slate-400 font-bold">Photo</div>
                    <div>
                      <h3 className="text-2xl font-black text-[#1A1B4B]">Manish Shah</h3>
                      <p className="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Founder & Managing Director</p>
                    </div>
                  </div>
                  <p className="text-sm text-slate-600 leading-relaxed italic border-l-2 border-blue-600 pl-6">
                    "With 40 years of profound expertise, Manish Shah built Paramount from scratch. His mission centers on Great Heights through Employee Values and giving back to society."
                  </p>
               </div>
            </div>

            <div className="bg-[#1A1B4B] p-10 rounded-[48px] shadow-xl text-white relative overflow-hidden group">
               <div className="relative z-10">
                  <div className="flex items-center gap-4 mb-8">
                    <div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center italic text-[10px] text-white/50 font-bold">Photo</div>
                    <div>
                      <h3 className="text-2xl font-black">Harsh Shah</h3>
                      <p className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Director of Global Vision</p>
                    </div>
                  </div>
                  <p className="text-sm text-slate-300 leading-relaxed italic border-l-2 border-blue-400 pl-6">
                    "Driving the company globally, Harsh Shah inherits his father's vast experience to scale our core values across international textile markets with a modern vision."
                  </p>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- FAQ SECTION --- */}
      <section className="py-24 max-w-4xl mx-auto px-6">
        <div className="text-center mb-16">
           <h2 className="text-4xl font-black text-[#1A1B4B] mb-4">Frequently Asked Questions</h2>
           <p className="text-slate-500 font-bold text-xs uppercase tracking-widest">Quick Answers for Industrial Partners</p>
        </div>
        <div className="space-y-3">
           {[
             { q: "What is the lead time for export to Mombasa?", a: "Standard sea-freight shipments take 15-20 days. Our export team manages all documentation for seamless Kenya port clearance." },
             { q: "Do you offer sample testing cones?", a: "Yes, we provide 1000m or 5000m sample cones for industrial machine testing upon initial verification of business inquiry." },
             { q: "What is your MOQ for domestic supply?", a: "For major cities like Surat, Ahmedabad, and Mumbai, we maintain high stock levels. Minimum orders typically start from 1 standard carton per variant." },
             { q: "Is GST billing provided for all purchases?", a: "Absolutely. As a registered Pvt Ltd firm (27AACCP3558M1ZZ), all invoices are fully GST-compliant for input credit." }
           ].map((faq, i) => (
             <div key={i} className="border border-slate-100 rounded-2xl overflow-hidden bg-white hover:border-[#1A1B4B] transition-all group">
                <button 
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full p-6 flex justify-between items-center text-left"
                >
                   <span className="font-bold text-[#1A1B4B] text-sm md:text-base">{faq.q}</span>
                   <div className={`p-2 rounded-lg transition-all ${openFaq === i ? 'bg-[#1A1B4B] text-white rotate-180' : 'bg-slate-50 text-slate-400'}`}>
                      <ChevronDown size={18} />
                   </div>
                </button>
                <div className={`transition-all duration-300 ease-in-out ${openFaq === i ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'} overflow-hidden`}>
                   <div className="px-6 pb-6 text-slate-500 text-sm leading-relaxed border-t border-slate-50 pt-4">
                      {faq.a}
                   </div>
                </div>
             </div>
           ))}
        </div>
      </section>

      {/* --- BOTTOM LEAD FORM --- */}
      <section id="inquiry-bottom" className="py-24 bg-slate-900 relative overflow-hidden">
         <div className="absolute top-0 left-0 w-full h-full bg-[#1A1B4B]/20"></div>
         <div className="max-w-7xl mx-auto px-6 relative z-10">
            <div className="bg-white rounded-[60px] p-10 md:p-20 shadow-2xl flex flex-col lg:row gap-16 items-center">
               <div className="flex-1">
                  <h2 className="text-4xl md:text-5xl font-black text-[#1A1B4B] mb-6 leading-tight">Request a <br/>Bulk Quote.</h2>
                  <p className="text-slate-500 mb-8 text-lg">Connect with our domestic or export specialists for tailored pricing on bulk orders.</p>
                  <div className="space-y-4">
                     {[
                       'Immediate WhatsApp Support',
                       'Customized Color Dyeing Support',
                       'FCL / LCL Container Expertise',
                       'Official GST Billing'
                     ].map(t => (
                       <div key={t} className="flex items-center gap-3 font-bold text-slate-800 text-sm">
                          <CheckCircle2 className="text-green-500" size={18} /> {t}
                       </div>
                     ))}
                  </div>
               </div>
               <div className="flex-1 w-full max-w-md">
                  <form onSubmit={handleWhatsAppLead} className="space-y-4">
                     <div className="grid grid-cols-2 gap-4">
                        <input required placeholder="Name" className="p-4 rounded-2xl bg-slate-50 border-none ring-1 ring-slate-100 outline-none w-full text-sm" onChange={(e) => setLeadData({...leadData, name: e.target.value})} />
                        <input required placeholder="Mobile" className="p-4 rounded-2xl bg-slate-50 border-none ring-1 ring-slate-100 outline-none w-full text-sm" onChange={(e) => setLeadData({...leadData, mobile: e.target.value})} />
                     </div>
                     <select required className="w-full p-4 rounded-2xl bg-slate-50 border-none ring-1 ring-slate-100 outline-none text-sm" onChange={(e) => setLeadData({...leadData, category: e.target.value})}>
                        <option value="">Thread Category</option>
                        {Object.keys(productMap).map(cat => <option key={cat} value={cat}>{cat}</option>)}
                     </select>
                     <textarea placeholder="Message (Optional)" className="w-full p-4 rounded-2xl bg-slate-50 border-none ring-1 ring-slate-100 outline-none text-sm h-24"></textarea>
                     <button type="submit" className="w-full bg-[#1A1B4B] text-white py-5 rounded-2xl font-black flex items-center justify-center gap-3 hover:bg-blue-900 transition-all shadow-xl">
                        <Send size={20} /> Submit Partnership Request
                     </button>
                  </form>
               </div>
            </div>
         </div>
      </section>

      {/* --- FOOTER --- */}
      <footer id="contact" className="bg-[#1A1B4B] text-white pt-24 pb-12 overflow-hidden relative border-t border-white/5">
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-4 gap-16 mb-20">
             <div className="col-span-2">
                <div className="flex items-center gap-4 mb-8">
                  <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-[#1A1B4B] font-black text-xl shadow-lg">P</div>
                  <h2 className="text-2xl font-black tracking-tight">PARAMOUNT THREADS</h2>
                </div>
                <p className="text-slate-400 max-w-md mb-10 text-sm leading-relaxed">Pioneering the future of industrial stitching since 1980. From domestic supremacy to global export excellence.</p>
                <div className="grid sm:grid-cols-2 gap-6">
                   <div className="flex gap-4">
                      <MapPin className="text-blue-400 shrink-0" size={18}/>
                      <p className="text-xs text-slate-300">{companyData.address}</p>
                   </div>
                   <div className="flex gap-4">
                      <Mail className="text-blue-400 shrink-0" size={18}/>
                      <p className="text-xs text-slate-300">{companyData.email}</p>
                   </div>
                </div>
             </div>
             <div>
                <h4 className="text-[10px] font-bold uppercase tracking-[0.4em] text-blue-400 mb-8">Quick Navigation</h4>
                <ul className="space-y-4 text-slate-400 font-bold text-xs uppercase tracking-widest">
                   <li className="hover:text-white transition-colors cursor-pointer" onClick={() => scrollToId('home')}>Home</li>
                   <li className="hover:text-white transition-colors cursor-pointer" onClick={() => scrollToId('products')}>Core Range</li>
                   <li className="hover:text-white transition-colors cursor-pointer" onClick={() => scrollToId('aboutus')}>About Founders</li>
                   <li className="hover:text-white transition-colors cursor-pointer" onClick={() => scrollToId('inquiry-bottom')}>Global Quote</li>
                </ul>
             </div>
             <div>
                <h4 className="text-[10px] font-bold uppercase tracking-[0.4em] text-blue-400 mb-8">Tax & Legal</h4>
                <div className="p-6 bg-white/5 rounded-2xl border border-white/10">
                   <p className="text-[8px] uppercase font-bold text-slate-500 mb-2">GST Identification</p>
                   <p className="text-lg font-mono font-black tracking-tighter text-blue-400 leading-none">{companyData.gst}</p>
                   <div className="mt-6 pt-6 border-t border-white/10 flex gap-4">
                      <Award size={24} className="text-slate-400" />
                      <ShieldCheck size={24} className="text-slate-400" />
                      <PackageCheck size={24} className="text-slate-400" />
                   </div>
                </div>
             </div>
          </div>
          <div className="pt-12 border-t border-white/10 text-center text-slate-500 text-[8px] font-bold uppercase tracking-[0.5em]">
             © 2024 Paramount Threads Pvt. Ltd. | mulund, mumbai | kenya-mombasa export hub.
          </div>
        </div>
      </footer>

      {/* --- POPUPS & FLOATERS --- */}

      {/* Expert Assistant Popup (RELOCATED TO LEFT) */}
      {showExpert && (
        <div className="fixed bottom-28 left-8 z-[110] w-72 animate-fade-in-up hidden md:block">
           <div className="bg-white rounded-[32px] shadow-2xl border border-slate-50 overflow-hidden relative">
              <div className="bg-[#1A1B4B] p-5 text-white flex justify-between items-center">
                 <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-slate-200 rounded-xl border-2 border-white/20 overflow-hidden">
                       <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=100" className="w-full h-full object-cover" alt="Expert" />
                    </div>
                    <div>
                       <p className="text-xs font-black">Aditi Sharma</p>
                       <p className="text-[8px] text-blue-400 font-bold uppercase tracking-widest leading-none">Senior Consultant</p>
                    </div>
                 </div>
                 <button onClick={() => setShowExpert(false)} className="hover:rotate-90 transition-all opacity-60"><X size={16}/></button>
              </div>
              <div className="p-6">
                 <p className="text-[11px] text-slate-600 mb-4 font-bold leading-relaxed italic">"Hi! I can help you with domestic supply or international export logistics. What's on your mind?"</p>
                 <div className="grid grid-cols-2 gap-2">
                    <button onClick={() => {setLeadData({...leadData, type: 'Domestic'}); scrollToId('home'); setShowExpert(false);}} className="py-2.5 bg-blue-50 text-blue-700 rounded-lg text-[10px] font-black uppercase transition-all">Domestic</button>
                    <button onClick={() => {setLeadData({...leadData, type: 'Import'}); scrollToId('home'); setShowExpert(false);}} className="py-2.5 bg-[#1A1B4B] text-white rounded-lg text-[10px] font-black uppercase transition-all">Export</button>
                 </div>
              </div>
           </div>
        </div>
      )}

      {/* WhatsApp Floater */}
      <button 
        onClick={handleWhatsAppLead}
        className="fixed bottom-8 right-8 z-[110] bg-[#25D366] text-white w-16 h-16 rounded-2xl shadow-2xl flex items-center justify-center hover:scale-110 active:scale-95 transition-all group"
      >
        <MessageCircle size={32} />
        <span className="absolute right-full mr-4 bg-white text-slate-900 px-4 py-2 rounded-xl shadow-xl text-xs font-black whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all pointer-events-none uppercase tracking-widest">Chat with Us</span>
      </button>

      {/* Custom Global Styles */}
      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(40px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-in-right {
          from { opacity: 0; transform: translateX(40px); }
          to { opacity: 1; transform: translateX(0); }
        }
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-15px); }
        }
        .animate-scroll { animation: scroll 50s linear infinite; }
        .animate-fade-in-up { animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .animate-fade-in-right { animation: fade-in-right 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .animate-bounce-slow { animation: bounce-slow 6s ease-in-out infinite; }
        .delay-200 { animation-delay: 0.2s; }
      `}} />

    </div>
  );
};

export default App;