/** Shopify CDN: Minification failed

Line 16:14 Unexpected "{"
Line 16:24 Expected ":"
Line 16:43 Unexpected "'react'"
Line 17:21 Expected ":"
Line 17:114 Unexpected "'lucide-react'"
Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 43:104 Comments in CSS use "/* ... */" instead of "//"
Line 72:0 Comments in CSS use "/* ... */" instead of "//"
Line 75:7 Expected ":"
Line 76:7 Expected ":"
... and 17 more hidden warnings

**/
import React, { useState, useEffect } from 'react';
import { ShoppingCart, Search, Menu, X, ChevronRight, Star, ArrowRight, Play, Instagram, Youtube, Facebook } from 'lucide-react';

// --- Mock Data ---

const BRANDS = [
  { id: 1, name: 'BMW', logo: 'B', color: 'from-blue-600 to-blue-400' },
  { id: 2, name: 'Audi', logo: 'A', color: 'from-red-600 to-red-400' },
  { id: 3, name: 'Mercedes', logo: 'M', color: 'from-slate-400 to-slate-200' },
  { id: 4, name: 'Porsche', logo: 'P', color: 'from-yellow-600 to-yellow-400' },
  { id: 5, name: 'Ferrari', logo: 'F', color: 'from-yellow-500 to-red-500' },
  { id: 6, name: 'Chevrolet', logo: 'C', color: 'from-orange-500 to-yellow-500' },
];

const POPULAR_MODELS = [
  { id: 'g80', name: 'G80 M3 / G82 M4', image: 'https://images.unsplash.com/photo-1617788138017-80ad40651399?auto=format&fit=crop&q=80&w=600' },
  { id: 'e92', name: 'E9X M3', image: 'https://images.unsplash.com/photo-1607853202273-797f1c22a38e?auto=format&fit=crop&q=80&w=600' },
  { id: 'c63', name: 'C63 AMG W205', image: 'https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?auto=format&fit=crop&q=80&w=600' },
  { id: 'r8', name: 'Audi R8', image: 'https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?auto=format&fit=crop&q=80&w=600' },
];

const FEATURED_PRODUCTS = [
  {
    id: 1,
    name: 'NRP Signature Titanium Valved Exhaust',
    car: 'BMW E9x M3',
    price: 3499.00,
    image: 'https://images.unsplash.com/photo-1552055620-cd098547460b?auto=format&fit=crop&q=80&w=500', // Abstract metal/car part
    tag: 'Best Seller'
  },
  {
    id: 2,
    name: 'Valved Cat-back Exhaust System',
    car: 'BMW X5/X6 M50i',
    price: 2399.00,
    image: 'https://images.unsplash.com/photo-1626359570778-944a9919f96c?auto=format&fit=crop&q=80&w=500',
    tag: 'New Arrival'
  },
  {
    id: 3,
    name: 'G30 540i NRP Performance Exhaust',
    car: 'BMW 5 Series',
    price: 1999.00,
    image: 'https://images.unsplash.com/photo-1606577924006-27d976c69cd7?auto=format&fit=crop&q=80&w=500',
    tag: null
  },
  {
    id: 4,
    name: 'Carbon Fiber Intake System',
    car: 'Audi RS6 C8',
    price: 1250.00,
    image: 'https://images.unsplash.com/photo-1493238792015-1a419bac793c?auto=format&fit=crop&q=80&w=500',
    tag: 'Trending'
  }
];

// --- Components ---

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black/90 backdrop-blur-md border-b border-white/10' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          
          {/* Mobile Menu Button */}
          <div className="flex items-center md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-white hover:text-blue-500 transition-colors">
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>

          {/* Logo */}
          <div className="flex-shrink-0 flex items-center justify-center flex-1 md:justify-start md:flex-none">
            <a href="#" className="flex items-center gap-2 group">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-cyan-400 rounded-lg transform -skew-x-12 group-hover:skew-x-0 transition-transform flex items-center justify-center">
                <span className="text-white font-bold text-xl skew-x-12 group-hover:skew-x-0">N</span>
              </div>
              <div className="hidden sm:block">
                <h1 className="text-white font-bold text-lg tracking-wider font-display uppercase">Night<span className="text-blue-500">Runners</span></h1>
                <p className="text-xs text-gray-400 tracking-[0.2em] uppercase">Performance</p>
              </div>
            </a>
          </div>

          {/* Desktop Nav */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-8">
              <a href="#" className="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Shop by Car</a>
              <a href="#" className="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Exhausts</a>
              <a href="#" className="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Carbon</a>
              <a href="#" className="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Merch</a>
            </div>
          </div>

          {/* Icons */}
          <div className="flex items-center gap-4 text-white">
            <button className="hover:text-blue-400 transition-colors"><Search size={20} /></button>
            <button className="relative hover:text-blue-400 transition-colors group">
              <ShoppingCart size={20} />
              <span className="absolute -top-2 -right-2 bg-blue-600 text-xs font-bold w-4 h-4 rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-blue-600 transition-colors">0</span>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isOpen && (
        <div className="md:hidden bg-black/95 backdrop-blur-xl border-t border-white/10">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Select Vehicle</a>
            <a href="#" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Exhaust Systems</a>
            <a href="#" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Aero / Carbon</a>
            <a href="#" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
          </div>
        </div>
      )}
    </nav>
  );
};

const Hero = () => {
  return (
    <div className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden bg-black">
      {/* Background with overlay */}
      <div className="absolute inset-0 z-0">
        <img 
          src="https://images.unsplash.com/photo-1503376763036-066120622c74?auto=format&fit=crop&q=80&w=2000" 
          alt="Night Runner Car" 
          className="w-full h-full object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-transparent to-black/80" />
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="animate-fade-in-up">
          <h2 className="text-blue-500 font-bold tracking-widest uppercase text-sm mb-4">Premium Performance Parts</h2>
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-black text-white uppercase tracking-tighter mb-6">
            Own The <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-400">Night</span>
          </h1>
          <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-300 font-light mb-10">
            Engineered for sound, designed for speed. High-performance titanium valved exhausts for BMW, Audi, Mercedes, and more.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <button className="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold text-lg rounded-sm uppercase tracking-wider transition-all transform hover:scale-105 flex items-center gap-2 group shadow-[0_0_20px_rgba(37,99,235,0.3)]">
              Shop Now <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="px-8 py-4 bg-transparent border border-white/20 hover:border-white text-white font-bold text-lg rounded-sm uppercase tracking-wider transition-all hover:bg-white/5 backdrop-blur-sm flex items-center gap-2">
              <Play size={20} fill="currentColor" /> Hear The Sound
            </button>
          </div>
        </div>

        {/* Vehicle Selector Widget (Floating) */}
        <div className="mt-16 bg-white/5 backdrop-blur-md border border-white/10 p-4 rounded-lg max-w-3xl mx-auto hidden md:flex items-center gap-4 animate-fade-in-up delay-200">
          <span className="text-white font-bold uppercase text-sm whitespace-nowrap px-4 border-r border-white/10">Select Your Ride</span>
          <select className="bg-transparent text-gray-300 text-sm focus:outline-none w-full cursor-pointer hover:text-white transition-colors">
            <option>Select Make</option>
            <option>BMW</option>
            <option>Audi</option>
            <option>Mercedes</option>
          </select>
          <div className="h-6 w-px bg-white/10"></div>
          <select className="bg-transparent text-gray-300 text-sm focus:outline-none w-full cursor-pointer hover:text-white transition-colors">
            <option>Select Model</option>
          </select>
           <button className="bg-white text-black hover:bg-gray-200 px-6 py-2 rounded font-bold text-sm uppercase transition-colors">
            Go
          </button>
        </div>
      </div>
    </div>
  );
};

const BrandGrid = () => {
  return (
    <div className="bg-black py-20 border-t border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-white uppercase tracking-tighter">Shop By <span className="text-blue-500">Platform</span></h2>
          <div className="h-1 w-20 bg-blue-600 mx-auto mt-4"></div>
        </div>
        
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {BRANDS.map((brand) => (
            <a key={brand.id} href="#" className="group relative h-32 bg-zinc-900 rounded-xl overflow-hidden border border-white/5 hover:border-blue-500/50 transition-all duration-300 flex flex-col items-center justify-center">
              <div className={`absolute inset-0 bg-gradient-to-br ${brand.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`} />
              <span className="text-4xl font-black text-white/20 group-hover:text-white transition-colors duration-300 mb-2">{brand.logo}</span>
              <span className="text-gray-400 font-medium group-hover:text-white transition-colors text-sm uppercase tracking-wider">{brand.name}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

const ProductCard = ({ product }) => (
  <div className="group bg-zinc-900 rounded-lg overflow-hidden border border-white/5 hover:border-blue-500/30 transition-all duration-300 hover:shadow-[0_0_30px_rgba(37,99,235,0.15)] flex flex-col h-full">
    <div className="relative h-64 overflow-hidden bg-zinc-800">
      {product.tag && (
        <span className="absolute top-4 left-4 z-10 bg-blue-600 text-white text-xs font-bold px-3 py-1 uppercase tracking-wider rounded-sm shadow-lg">
          {product.tag}
        </span>
      )}
      <img 
        src={product.image} 
        alt={product.name} 
        className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100"
      />
      {/* Quick Add Overlay */}
      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
        <button className="bg-white text-black px-6 py-3 font-bold uppercase text-sm tracking-wider hover:bg-blue-500 hover:text-white transition-colors transform translate-y-4 group-hover:translate-y-0 duration-300">
          Quick View
        </button>
      </div>
    </div>
    
    <div className="p-6 flex flex-col flex-grow">
      <p className="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">{product.car}</p>
      <h3 className="text-white text-lg font-bold leading-tight mb-4 group-hover:text-blue-400 transition-colors">{product.name}</h3>
      <div className="mt-auto flex items-center justify-between border-t border-white/10 pt-4">
        <span className="text-xl font-medium text-white">${product.price.toLocaleString()}</span>
        <button className="text-gray-400 hover:text-white transition-colors">
          <ShoppingCart size={20} />
        </button>
      </div>
    </div>
  </div>
);

const BestSellers = () => {
  return (
    <section className="bg-black py-24 relative overflow-hidden">
      {/* Decorative background element */}
      <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-blue-900/10 to-transparent pointer-events-none"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
          <div>
            <h2 className="text-4xl md:text-5xl font-black text-white uppercase italic tracking-tighter">
              Performance <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-400">Upgrades</span>
            </h2>
            <p className="text-gray-400 mt-2 max-w-lg">
              Unlock the true potential of your engine with our signature titanium exhaust systems.
            </p>
          </div>
          <a href="#" className="flex items-center gap-2 text-white hover:text-blue-500 transition-colors uppercase text-sm font-bold tracking-widest">
            View All Products <ChevronRight size={16} />
          </a>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {FEATURED_PRODUCTS.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </section>
  );
};

const PopularChassis = () => {
  return (
    <section className="py-20 bg-zinc-950">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-2xl font-bold text-white uppercase tracking-widest mb-8 text-center">Trending Chassis</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {POPULAR_MODELS.map((model) => (
            <div key={model.id} className="group relative h-80 rounded-lg overflow-hidden cursor-pointer">
              <img 
                src={model.image} 
                alt={model.name} 
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 filter brightness-50 group-hover:brightness-75"
              />
              <div className="absolute inset-0 flex flex-col justify-end p-6 bg-gradient-to-t from-black/90 to-transparent">
                <h3 className="text-xl font-bold text-white uppercase mb-1 transform translate-y-2 group-hover:translate-y-0 transition-transform">{model.name}</h3>
                <div className="h-1 w-0 bg-blue-500 group-hover:w-12 transition-all duration-300"></div>
                <p className="text-xs text-gray-300 mt-2 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0 delay-100">Shop Parts &rarr;</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  return (
    <section className="py-24 bg-black border-y border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
          <div className="p-6 border border-white/5 rounded-2xl hover:bg-white/5 transition-colors">
            <div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-500">
              <Star size={32} />
            </div>
            <h3 className="text-xl font-bold text-white uppercase mb-4">Precision Engineering</h3>
            <p className="text-gray-400 leading-relaxed">
              3D scanned and CAD designed for perfect fitment. Every system is built to maximize flow and reduce weight.
            </p>
          </div>
          <div className="p-6 border border-white/5 rounded-2xl hover:bg-white/5 transition-colors">
            <div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-500">
              <Play size={32} />
            </div>
            <h3 className="text-xl font-bold text-white uppercase mb-4">Symphony of Sound</h3>
            <p className="text-gray-400 leading-relaxed">
              Tuned frequencies to eliminate drone while providing an exotic, high-pitched wail at wide open throttle.
            </p>
          </div>
          <div className="p-6 border border-white/5 rounded-2xl hover:bg-white/5 transition-colors">
            <div className="w-16 h-16 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-6 text-blue-500">
              <ShoppingCart size={32} />
            </div>
            <h3 className="text-xl font-bold text-white uppercase mb-4">Direct to Enthusiast</h3>
            <p className="text-gray-400 leading-relaxed">
              Premium quality without the distributor markup. World-wide shipping available for all platforms.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-zinc-950 pt-20 pb-10 border-t border-white/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          <div className="col-span-1 md:col-span-2">
            <h2 className="text-2xl font-bold text-white uppercase mb-6 tracking-wider">Night<span className="text-blue-500">Runners</span></h2>
            <p className="text-gray-400 max-w-sm mb-8">
              Redefining automotive performance with aerospace-grade titanium exhaust systems and carbon fiber aerodynamics.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center text-white hover:bg-blue-600 transition-colors"><Instagram size={20} /></a>
              <a href="#" className="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center text-white hover:bg-red-600 transition-colors"><Youtube size={20} /></a>
              <a href="#" className="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center text-white hover:bg-blue-800 transition-colors"><Facebook size={20} /></a>
            </div>
          </div>
          
          <div>
            <h3 className="text-white font-bold uppercase tracking-widest mb-6">Shop</h3>
            <ul className="space-y-4 text-gray-400">
              <li><a href="#" className="hover:text-blue-500 transition-colors">All Products</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Exhaust Systems</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Carbon Fiber</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Merch</a></li>
            </ul>
          </div>

          <div>
            <h3 className="text-white font-bold uppercase tracking-widest mb-6">Support</h3>
            <ul className="space-y-4 text-gray-400">
              <li><a href="#" className="hover:text-blue-500 transition-colors">Track Order</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Installation Guides</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Warranty Info</a></li>
              <li><a href="#" className="hover:text-blue-500 transition-colors">Contact Us</a></li>
            </ul>
          </div>
        </div>
        
        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-gray-500 text-sm">© 2026 NightRunners Performance. All rights reserved.</p>
          <div className="flex gap-6 text-sm text-gray-500">
            <a href="#" className="hover:text-white">Privacy Policy</a>
            <a href="#" className="hover:text-white">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

const App = () => {
  return (
    <div className="bg-black min-h-screen text-white font-sans selection:bg-blue-500 selection:text-white">
      <Navbar />
      <Hero />
      <BrandGrid />
      <BestSellers />
      <PopularChassis />
      <Features />
      <Footer />
    </div>
  );
};

export default App;