// ========================================
// BoltX Power Tools — React Components
// ========================================

const { useState, useEffect, useRef } = React;

// ========== Icons ==========
const Icon = {
  Grinder: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 3v6" />
      <path d="M8 12h8" />
      <circle cx="12" cy="12" r="9" />
      <path d="M12 15v6" />
      <path d="M9 7l6 10" />
    </svg>
  ),
  Drill: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M14 2l-2 4h4l-2 4" />
      <path d="M12 6H7a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1l4 2" />
      <path d="M17 13v4" />
      <path d="M14 17h6" />
    </svg>
  ),
  Hammer: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M15 12l-8.5 8.5a2.12 2.12 0 0 1-3-3L12 9" />
      <path d="M17 8.5l3.5-3.5" />
      <path d="M15 7l2 2 4-4" />
      <path d="M9 15l-2 2" />
    </svg>
  ),
  Saw: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M2 12h18" />
      <path d="M20 8v8" />
      <path d="M4 8l2 4-2 4" />
      <path d="M8 8l2 4-2 4" />
      <path d="M12 8l2 4-2 4" />
      <path d="M16 8l2 4-2 4" />
    </svg>
  ),
  Garden: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 2v20" />
      <path d="M12 8c-3-2-6-2-8 0 0 4 4 5 8 6" />
      <path d="M12 8c3-2 6-2 8 0 0 4-4 5-8 6" />
      <path d="M5 21h14" />
    </svg>
  ),
  Clean: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M3 12h4l3-8 4 16 3-8h4" />
    </svg>
  ),
  Wrench: (props) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
    </svg>
  ),
  MapPin: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  Phone: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  ),
  Mail: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
      <polyline points="22,6 12,13 2,6" />
    </svg>
  ),
  Globe: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="10" />
      <line x1="2" y1="12" x2="22" y2="12" />
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
    </svg>
  ),
  Award: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="8" r="6" />
      <path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" />
    </svg>
  ),
  Shield: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  ),
  Factory: (props) => (
    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 20V10l5 3V10l5 3V10l5 3V10l3 1v10z" />
      <path d="M7 17h2" />
      <path d="M13 17h2" />
      <path d="M19 17h2" />
    </svg>
  ),
  X: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  ArrowRight: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  Check: (props) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  Star: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" {...props}>
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
    </svg>
  ),
  Facebook: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>
  ),
  Linkedin: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect x="2" y="9" width="4" height="12" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  ),
  Youtube: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
      <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="white" />
    </svg>
  ),
  Instagram: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>
  ),
  ExternalLink: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15 3 21 3 21 9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>
  ),
};

// ========== Navigation ==========
function Navbar({ activeSection, onNavigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#home" className="nav-brand" onClick={(e) => { e.preventDefault(); onNavigate('home'); }}>
          <div className="nav-logo">
            <svg viewBox="0 0 32 32" fill="none">
              <path d="M18 2L6 20h6l-2 10 12-18h-6l2-10z" fill="#FF6B1A" />
              <path d="M20 6l6 7M26 6l-6 7" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </div>
          <div className="nav-brand-text">
            <span className="nav-brand-name">BoltX</span>
            <span className="nav-brand-sub">Power Tools</span>
          </div>
        </a>

        <ul className="nav-links">
          {NAV_LINKS.map(link => (
            <li key={link.id}>
              <a
                href={`#${link.id}`}
                className={activeSection === link.id ? 'active' : ''}
                onClick={(e) => { e.preventDefault(); onNavigate(link.id); }}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="nav-cta">
          <button className="nav-lang">EN / 中文</button>
          <button className="btn btn-primary" onClick={() => onNavigate('contact')}>
            Get Quote <Icon.ArrowRight />
          </button>
          <button className="nav-hamburger" onClick={() => setMobileOpen(!mobileOpen)}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

// ========== Hero ==========
function Hero({ onNavigate }) {
  return (
    <section className="hero" id="home">
      <div className="hero-bg" style={{ backgroundImage: `url(${IMG.heroBanner})` }}></div>
      <div className="hero-overlay"></div>
      <div className="container hero-inner">
        <div className="hero-badge">
          <span className="hero-badge-dot"></span>
          <span className="hero-badge-text">Industrial Power Tools · SGS Certified</span>
        </div>
        <h1 className="hero-title">
          <em>BoltX</em> — Power That Strikes
        </h1>
        <p className="hero-subtitle">
          BoltX — Power That Strikes. Professional power tools engineered by BoltX Power Tools. Industrial-grade angle grinders, cordless drills,
          rotary hammers and more, trusted in 50+ countries. SGS certified.
        </p>
        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg" onClick={() => onNavigate('products')}>
            Explore Products <Icon.ArrowRight />
          </button>
          <button className="btn btn-outline btn-lg" style={{ borderColor: 'rgba(255,255,255,0.3)', color: '#fff' }} onClick={() => onNavigate('contact')}>
            Request Catalog
          </button>
        </div>
        <div className="hero-stats">
          <div>
            <div className="hero-stat-num">{COMPANY_INFO.years}+<em>yrs</em></div>
            <div className="hero-stat-label">Factory Experience</div>
          </div>
          <div>
            <div className="hero-stat-num">50+<em></em></div>
            <div className="hero-stat-label">Export Countries</div>
          </div>
          <div>
            <div className="hero-stat-num">200+<em></em></div>
            <div className="hero-stat-label">Product Models</div>
          </div>
          <div>
            <div className="hero-stat-num">SGS<em></em></div>
            <div className="hero-stat-label">Certified Quality</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== Category Sticky Nav ==========
function CategoryNav({ activeCategory, categories, onSelect }) {
  return (
    <div className="cat-nav">
      <div className="container">
        <div className="cat-nav-inner">
          {categories.map(cat => (
            <div
              key={cat.id}
              className={`cat-nav-item ${activeCategory === cat.id ? 'active' : ''}`}
              onClick={() => onSelect(cat.id)}
            >
              {cat.name}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ========== Product Card ==========
function ProductCard({ product, category, onView }) {
  const tagClass = product.tag ? product.tag.toLowerCase().replace(/\s+/g, '-') : '';
  const specPairs = Object.entries(product.specs).slice(0, 4);

  return (
    <div className="product-card">
      <div className="product-img-wrap">
        {product.tag && <span className={`product-tag ${tagClass === 'new' || tagClass === 'hot' ? tagClass : ''}`}>{product.tag}</span>}
        <img src={product.image} alt={`${product.model} ${category.name}`} />
      </div>
      <div className="product-info">
        <div className="product-category">{category.name}</div>
        <div className="product-model">{product.model}</div>
        <div className="product-specs">
          {specPairs.map(([label, value]) => (
            <div key={label} className="product-spec">
              <span className="product-spec-label">{label}</span>
              <span className="product-spec-value">{value}</span>
            </div>
          ))}
        </div>
        <div className="product-card-footer">
          <button className="product-btn primary" onClick={() => onView(product, category)}>View Details</button>
          <button className="product-btn ghost">Inquiry</button>
        </div>
      </div>
    </div>
  );
}

// ========== Product Section ==========
function ProductSection({ category, onViewProduct }) {
  const iconMap = {
    grinder: Icon.Grinder,
    drill: Icon.Drill,
    hammer: Icon.Hammer,
    saw: Icon.Saw,
    garden: Icon.Garden,
    clean: Icon.Clean,
    wrench: Icon.Wrench,
  };
  const IconComp = iconMap[category.icon] || Icon.Grinder;

  return (
    <div className="category-section" id={`cat-${category.id}`}>
      <div className="category-header">
        <div className="category-icon">
          <IconComp width="24" height="24" />
        </div>
        <div className="category-title-wrap">
          <h3 className="category-title">{category.name}</h3>
          <div className="category-count">{category.products.length} models available · More models coming soon</div>
        </div>
        <a href="#contact" className="category-more" onClick={(e) => e.preventDefault()}>
          Request Full Catalog <Icon.ArrowRight />
        </a>
      </div>
      <div className="product-grid">
        {category.products.map(product => (
          <ProductCard
            key={product.model}
            product={product}
            category={category}
            onView={onViewProduct}
          />
        ))}
      </div>
    </div>
  );
}

// ========== Products Section ==========
function Products({ categories, onViewProduct, onNavigate }) {
  return (
    <section className="products" id="products">
      <div className="container">
        <div className="products-header">
          <div>
            <div className="section-label">Our Products</div>
            <h2 className="section-title">Complete Range of Professional Power Tools</h2>
            <p className="section-sub">
              From angle grinders to cordless garden tools — browse our curated selection.
              More models available upon request, OEM/ODM services welcome.
            </p>
          </div>
        </div>

        {categories.map(cat => (
          <ProductSection
            key={cat.id}
            category={cat}
            onViewProduct={onViewProduct}
          />
        ))}
      </div>
    </section>
  );
}

// ========== About Section ==========
function About({ onNavigate }) {
  return (
    <section className="about" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-visual">
            <div className="about-visual-main">
              <div className="about-factory-text">
                <svg className="factory-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M2 20V10l5 3V10l5 3V10l5 3V10l3 1v10z" />
                  <path d="M7 17h2" />
                  <path d="M13 17h2" />
                  <path d="M19 17h2" />
                </svg>
                <h3>Yongkang Factory</h3>
                <p>15,000 m² production base · Zhejiang, China</p>
              </div>
            </div>
            <div className="about-badge-float">
              <div className="about-badge-icon">
                <Icon.Award />
              </div>
              <div className="about-badge-text">
                <h4>SGS Certified</h4>
                <p>Quality Assurance</p>
              </div>
            </div>
          </div>

          <div className="about-content">
            <div className="section-label">About BoltX</div>
            <h2>Engineered for Performance, Built for Reliability</h2>
            <p className="about-desc">
              BoltX is a professional power tool brand focused on industrial-grade performance and reliability. Headquartered in Yongkang, Zhejiang — the hardware capital of China.
              With over 8 years
              of professional manufacturing experience, we specialize in designing and producing
              a comprehensive range of electric power tools and cordless lithium-ion tools.
              <br /><br />
              Our products are exported to Europe, America, Southeast Asia and Africa, serving
              professional tradesmen, industrial users and DIY enthusiasts worldwide.
            </p>

            <div className="about-features">
              <div className="about-feature">
                <div className="about-feature-icon">
                  <Icon.Factory width="20" height="20" />
                </div>
                <div>
                  <h4>Direct Factory</h4>
                  <p>Own manufacturing with full quality control and competitive pricing</p>
                </div>
              </div>
              <div className="about-feature">
                <div className="about-feature-icon">
                  <Icon.Shield width="20" height="20" />
                </div>
                <div>
                  <h4>SGS Certified</h4>
                  <p>All products tested and certified to international safety standards</p>
                </div>
              </div>
              <div className="about-feature">
                <div className="about-feature-icon">
                  <Icon.Globe width="20" height="20" />
                </div>
                <div>
                  <h4>Global Export</h4>
                  <p>Serving 50+ countries across 4 continents with reliable logistics</p>
                </div>
              </div>
              <div className="about-feature">
                <div className="about-feature-icon">
                  <Icon.Wrench width="20" height="20" />
                </div>
                <div>
                  <h4>OEM / ODM</h4>
                  <p>Custom branding, packaging and product design services available</p>
                </div>
              </div>
            </div>

            <div className="certs">
              <div className="cert-badge">
                <div className="cert-icon">
                  <Icon.Award width="16" height="16" />
                </div>
                <div className="cert-text">
                  <strong>SGS Certified</strong>
                  <span>Quality Management</span>
                </div>
              </div>
              <div className="cert-badge">
                <div className="cert-icon">
                  <Icon.Shield width="16" height="16" />
                </div>
                <div className="cert-text">
                  <strong>Safety Standardized</strong>
                  <span>Production Safety</span>
                </div>
              </div>
              <div className="cert-badge">
                <div className="cert-icon">
                  <Icon.Globe width="16" height="16" />
                </div>
                <div className="cert-text">
                  <strong>8 Years Export</strong>
                  <span>Global Trade</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== Contact Section ==========
function Contact() {
  const [submitted, setSubmitted] = useState(false);

  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="section-label">Get in Touch</div>
        <h2 className="section-title">Ready to Power Your Business?</h2>
        <p className="section-sub">
          Contact our sales team for product catalogs, pricing and OEM/ODM inquiries.
          We respond to all inquiries within 24 hours.
        </p>

        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-item">
              <div className="contact-icon">
                <Icon.MapPin />
              </div>
              <div>
                <h4>Address</h4>
                <p>{COMPANY_INFO.address}</p>
                <p style={{ color: 'var(--c-steel)', fontSize: '13px', marginTop: '4px' }}>
                  {COMPANY_INFO.addressZh}
                </p>
              </div>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <Icon.Phone />
              </div>
              <div>
                <h4>Phone / WhatsApp</h4>
                <a href={`tel:${COMPANY_INFO.phone}`}>{COMPANY_INFO.phone}</a>
              </div>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <Icon.Mail />
              </div>
              <div>
                <h4>Email</h4>
                <a href={`mailto:${COMPANY_INFO.email}`}>{COMPANY_INFO.email}</a>
              </div>
            </div>
            <div className="contact-item">
              <div className="contact-icon">
                <Icon.Globe />
              </div>
              <div>
                <h4>Websites</h4>
                <p>
                  <a href={`https://${COMPANY_INFO.alibaba}`} target="_blank" rel="noopener">
                    {COMPANY_INFO.alibaba} <Icon.ExternalLink style={{ display: 'inline' }} />
                  </a>
                </p>
              </div>
            </div>
          </div>

          <div className="contact-form-card">
            {submitted ? (
              <div className="form-success">
                <div className="form-success-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
                <h3>Thank You!</h3>
                <p>Your inquiry has been sent successfully. Our sales team will review it and get back to you within 24 hours.</p>
              </div>
            ) : (
              <>
                <h3>Request a Quote</h3>
                <p>Tell us about your needs and get a reply within 24 hours.</p>
                <form
                  action="https://formsubmit.co/5266039111@qq.com"
                  method="POST"
                  onSubmit={() => setTimeout(() => setSubmitted(true), 200)}
                >
                  <input type="hidden" name="_subject" value="BoltX Website Inquiry" />
                  <input type="hidden" name="_captcha" value="false" />
                  <input type="hidden" name="_template" value="table" />
                  <div className="form-row">
                    <div className="form-group">
                      <label>Your Name *</label>
                      <input type="text" name="name" placeholder="John Smith" required />
                    </div>
                    <div className="form-group">
                      <label>Company</label>
                      <input type="text" name="company" placeholder="Your Company" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="form-group">
                      <label>Email *</label>
                      <input type="email" name="email" placeholder="john@company.com" required />
                    </div>
                    <div className="form-group">
                      <label>WhatsApp</label>
                      <input type="text" name="whatsapp" placeholder="+86 138 0000 0000" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="form-group">
                      <label>Country</label>
                      <input type="text" name="country" placeholder="Indonesia / Philippines..." />
                    </div>
                    <div className="form-group">
                      <label>Quantity</label>
                      <input type="text" name="qty" placeholder="e.g. 500 pcs" />
                    </div>
                  </div>
                  <div className="form-group">
                    <label>Product Model</label>
                    <select name="product">
                      <option value="">Select a product category...</option>
                      {CATEGORIES.map(cat => (
                        <optgroup key={cat.id} label={cat.name}>
                          {cat.products.map(p => (
                            <option key={p.model} value={p.model}>{p.model}</option>
                          ))}
                        </optgroup>
                      ))}
                      <option value="other">Other / Not sure</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label>Message</label>
                    <textarea name="message" placeholder="Tell us about your requirements, target price, certifications needed..."></textarea>
                  </div>
                  <button type="submit" className="btn btn-primary">
                    Send Inquiry <Icon.ArrowRight />
                  </button>
                </form>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== Footer ==========
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-brand" style={{ marginBottom: 0 }}>
              <div className="nav-logo">
                <svg viewBox="0 0 32 32" fill="none">
                  <path d="M18 2L6 20h6l-2 10 12-18h-6l2-10z" fill="#FF6B1A" />
                  <path d="M20 6l6 7M26 6l-6 7" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" />
                </svg>
              </div>
              <div className="nav-brand-text">
                <span className="nav-brand-name" style={{ color: '#fff' }}>BoltX</span>
                <span className="nav-brand-sub">Power Tools</span>
              </div>
            </div>
            <p>
              Professional power tools by BoltX Power Tools
              SGS certified, exporting to 50+ countries worldwide.
            </p>
            <div className="footer-social">
              <a href="#" title="Facebook"><Icon.Facebook /></a>
              <a href="#" title="LinkedIn"><Icon.Linkedin /></a>
              <a href="#" title="YouTube"><Icon.Youtube /></a>
              <a href="#" title="Instagram"><Icon.Instagram /></a>
            </div>
          </div>

          <div className="footer-col">
            <h4>Products</h4>
            <ul>
              {CATEGORIES.slice(0, 5).map(cat => (
                <li key={cat.id}>
                  <a href={`#cat-${cat.id}`} onClick={(e) => { e.preventDefault(); onNavigate('products'); }}>
                    {cat.name}
                  </a>
                </li>
              ))}
              <li><a href="#products" onClick={(e) => { e.preventDefault(); onNavigate('products'); }}>View All →</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); onNavigate('about'); }}>About Us</a></li>
              <li><a href="#about">Certifications</a></li>
              <li><a href="#contact">OEM / ODM Service</a></li>
              <li><a href="#contact">Contact Sales</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Contact</h4>
            <ul className="footer-contact">
              <li>
                <Icon.MapPin width="16" height="16" />
                <span>Yongkang, Zhejiang, China</span>
              </li>
              <li>
                <Icon.Mail width="16" height="16" />
                <span>sales@boltx-tools.com</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2024 BoltX Power Tools. All rights reserved.</span>
          <span>BoltX Power Tools Co., Ltd.</span>
        </div>
      </div>
    </footer>
  );
}

// ========== Product Modal ==========
function ProductModal({ product, category, onClose }) {
  const [showInquiry, setShowInquiry] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  if (!product) return null;

  const handleInquirySubmit = () => {
    setTimeout(() => setSubmitted(true), 200);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className={`modal ${showInquiry ? 'modal-wide' : ''}`} onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div className="modal-title">{showInquiry ? 'Send Inquiry' : 'Product Details'}</div>
          <button className="modal-close" onClick={onClose}>
            <Icon.X />
          </button>
        </div>
        <div className="modal-body">
          {showInquiry ? (
            submitted ? (
              <div className="form-success form-success-light" style={{ gridColumn: '1 / -1' }}>
                <div className="form-success-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
                <h3 style={{ color: 'var(--c-ink)' }}>Thank You!</h3>
                <p style={{ color: 'var(--c-steel)' }}>Your inquiry for <strong style={{ color: 'var(--c-ink)' }}>{product.model}</strong> has been sent. Our sales team will contact you within 24 hours.</p>
                <button className="btn btn-outline" onClick={onClose} style={{ marginTop: '20px' }}>Close</button>
              </div>
            ) : (
              <div className="modal-inquiry" style={{ gridColumn: '1 / -1' }}>
                <div className="modal-inquiry-product">
                  <img src={product.image} alt={product.model} />
                  <div>
                    <div style={{ fontSize: '12px', color: 'var(--c-steel)', textTransform: 'uppercase', letterSpacing: '0.5px' }}>{category.name}</div>
                    <div style={{ fontFamily: "'Oswald', sans-serif", fontSize: '20px', fontWeight: '600', color: 'var(--c-ink)' }}>{product.model}</div>
                  </div>
                </div>
                <form
                  action="https://formsubmit.co/5266039111@qq.com"
                  method="POST"
                  onSubmit={handleInquirySubmit}
                  className="modal-inquiry-form"
                >
                  <input type="hidden" name="_subject" value="BoltX Website Inquiry" />
                  <input type="hidden" name="_captcha" value="false" />
                  <input type="hidden" name="_template" value="table" />
                  <input type="hidden" name="product" value={product.model} />
                  <div className="form-row">
                    <div className="form-group form-group-light">
                      <label>Your Name *</label>
                      <input type="text" name="name" placeholder="John Smith" required />
                    </div>
                    <div className="form-group form-group-light">
                      <label>Company</label>
                      <input type="text" name="company" placeholder="Your Company" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="form-group form-group-light">
                      <label>Email *</label>
                      <input type="email" name="email" placeholder="john@company.com" required />
                    </div>
                    <div className="form-group form-group-light">
                      <label>WhatsApp</label>
                      <input type="text" name="whatsapp" placeholder="+86 138 0000 0000" />
                    </div>
                  </div>
                  <div className="form-row">
                    <div className="form-group form-group-light">
                      <label>Country</label>
                      <input type="text" name="country" placeholder="Indonesia / Philippines..." />
                    </div>
                    <div className="form-group form-group-light">
                      <label>Quantity</label>
                      <input type="text" name="qty" placeholder="e.g. 500 pcs" />
                    </div>
                  </div>
                  <div className="form-group form-group-light">
                    <label>Message</label>
                    <textarea name="message" placeholder="Tell us about your requirements, target price, certifications needed..."></textarea>
                  </div>
                  <div className="modal-cta">
                    <button type="submit" className="btn btn-primary">
                      Send Inquiry
                    </button>
                    <button type="button" className="btn btn-outline" onClick={() => setShowInquiry(false)}>
                      Back
                    </button>
                  </div>
                </form>
              </div>
            )
          ) : (
            <>
              <div className="modal-img">
                <img src={product.image} alt={product.model} />
              </div>
              <div className="modal-info">
                <div className="modal-category">{category.name}</div>
                <h3>{product.model}</h3>
                <p className="modal-desc">{product.description}</p>

                <div className="modal-specs">
                  <h4>Specifications</h4>
                  <div className="modal-spec-grid">
                    {Object.entries(product.specs).map(([label, value]) => (
                      <div key={label} className="modal-spec-item">
                        <label>{label}</label>
                        <span>{value}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="modal-cta">
                  <button className="btn btn-primary" onClick={() => setShowInquiry(true)}>
                    <Icon.Mail width="16" height="16" /> Send Inquiry
                  </button>
                  <button className="btn btn-outline" onClick={onClose}>
                    Close
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// 导出到全局作用域
Object.assign(window, {
  Navbar, Hero, CategoryNav, Products, ProductCard, About, Contact, Footer, ProductModal, Icon
});
