function Products() {
  const [active, setActive] = React.useState(PRODUCT_CATEGORIES[0].id);
  const cat = PRODUCT_CATEGORIES.find(c => c.id === active);
  const [lightbox, setLightbox] = React.useState(null);

  return (
    <Section id="products" background="var(--ink)" color="var(--paper)" style={{ padding: '140px 0' }}>
      <GridOverlay color="rgba(255,255,255,0.025)" size={80} />

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Header */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end', marginBottom: 64 }} className="sse-prod-header">
          <div>
            <Kicker color="var(--amber)">§ 02 · Product catalogue</Kicker>
            <Display size={80} color="var(--paper)" style={{ marginTop: 24 }}>
              The complete range.<br/>
              <span style={{ color: 'var(--steel)' }}>One vendor.</span>
            </Display>
          </div>
          <div style={{ maxWidth: 360, color: 'var(--steel)', fontSize: 15, lineHeight: 1.55 }}>
            From 10-amp terminal connectors to 63-amp plug-and-socket assemblies, silicone gaskets, push button hardware, and precision-molded fittings — all engineered in-house.
          </div>
        </div>

        {/* Category tabs */}
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 8,
          padding: 8,
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 12,
          marginBottom: 48,
        }}>
          {PRODUCT_CATEGORIES.map(c => (
            <button key={c.id}
              onClick={() => setActive(c.id)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 10,
                padding: '14px 20px',
                borderRadius: 8,
                background: active === c.id ? 'var(--paper)' : 'transparent',
                color: active === c.id ? 'var(--ink)' : 'var(--steel)',
                transition: 'all 0.25s',
                flex: '1 1 auto',
                minWidth: 140,
                justifyContent: 'center',
              }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.6, letterSpacing: '0.1em' }}>{c.kicker}</span>
              <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em' }}>{c.label}</span>
            </button>
          ))}
        </div>

        {/* Active category panel */}
        <div key={active} style={{
          animation: 'sse-fadeup 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
        }}>
          {/* Summary */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 60,
            marginBottom: 48,
            paddingBottom: 40,
            borderBottom: '1px solid rgba(255,255,255,0.1)',
          }} className="sse-prod-summary">
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.2em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: 16 }}>
                Category {cat.kicker}
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--paper)', lineHeight: 1.05 }}>
                {cat.label}
              </div>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.5, color: 'var(--steel)', maxWidth: 520, textWrap: 'pretty' }}>
              {cat.summary}
            </p>
          </div>

          {/* Product grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
            gap: 20,
          }}>
            {cat.items.filter(item => (item.images && item.images.length > 0) || item.name === 'SSE Push Button (All colours)').map((item, i) => (
              <ProductCard key={item.name} item={item} idx={i} onZoom={() => setLightbox(item.images)} />
            ))}
          </div>

          {/* CTA rail */}
          <div style={{
            marginTop: 56,
            padding: '32px 36px',
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 10,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 24,
            flexWrap: 'wrap',
          }}>
            <div>
              <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--paper)', letterSpacing: '-0.01em', marginBottom: 4 }}>
                Need a spec sheet or volume pricing for {cat.label.toLowerCase()}?
              </div>
              <div style={{ fontSize: 14, color: 'var(--steel)' }}>
                Most enquiries answered within one business day.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <Button variant="amber" href="#contact">Request quote <Arrow /></Button>
              <Button variant="outlineLight" href="assets/SSE-Brochure.pdf" download>Download PDF</Button>
            </div>
          </div>
        </div>
      </div>

      {/* Lightbox Modal */}
      {lightbox && (
        <Lightbox images={lightbox} onClose={() => setLightbox(null)} />
      )}

      <style>{`
        @keyframes sse-fadeup {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes sse-zoomin {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
        }
        @media (max-width: 900px) {
          .sse-prod-header { grid-template-columns: 1fr !important; }
          .sse-prod-summary { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </Section>
  );
}

function ProductCard({ item, idx, onZoom }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'rgba(255,255,255,0.02)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 8,
        padding: 16,
        transition: 'all 0.2s',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        borderColor: hover ? 'rgba(212,160,23,0.4)' : 'rgba(255,255,255,0.08)',
        cursor: 'pointer',
      }}>
      {item.images ? (
        <ProductImageSlider images={item.images} onZoom={onZoom} />
      ) : (
        <ProductPlaceholder dark aspect="4/3" />
      )}
      <div style={{ padding: '18px 6px 4px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--amber)', textTransform: 'uppercase' }}>
            SKU · {String(idx + 1).padStart(2, '0')}
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--steel-dark)' }}>
            IN-STOCK
          </div>
        </div>
        <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--paper)', letterSpacing: '-0.01em', lineHeight: 1.25, marginBottom: 6, textWrap: 'balance' }}>
          {item.name}
        </div>
        <div style={{ fontSize: 13, color: 'var(--steel)', lineHeight: 1.4 }}>
          {item.spec}
        </div>
      </div>
    </div>
  );
}

function ProductImageSlider({ images, onZoom }) {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [hovered, setHovered] = React.useState(false);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % images.length);
    }, 4000);
    return () => clearInterval(interval);
  }, [images.length]);

  return (
    <div 
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={(e) => { e.stopPropagation(); onZoom(); }}
      style={{
        aspectRatio: '4/3',
        borderRadius: 4,
        position: 'relative',
        overflow: 'hidden',
        background: 'rgba(0,0,0,0.2)',
      }}>
      {images.map((img, idx) => (
        <img
          key={img}
          src={img}
          alt={`Product slide ${idx + 1}`}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            objectFit: 'contain',
            opacity: currentIndex === idx ? 1 : 0,
            transition: 'opacity 0.6s ease',
            zIndex: currentIndex === idx ? 1 : 0,
          }}
        />
      ))}

      {/* Hover zoom icon overlay */}
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'rgba(0,0,0,0.3)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        opacity: hovered ? 1 : 0,
        transition: 'opacity 0.2s',
        zIndex: 3,
      }}>
        <div style={{
          width: 48, height: 48,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.9)',
          color: 'var(--navy)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transform: hovered ? 'scale(1)' : 'scale(0.8)',
          transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="2"/>
            <path d="M15 15 L20 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            <path d="M11 8 V14 M8 11 H14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </div>
      </div>

      {/* Indicators */}
      <div style={{
        position: 'absolute',
        bottom: 8,
        left: 0,
        right: 0,
        display: 'flex',
        justifyContent: 'center',
        gap: 6,
        zIndex: 2,
      }}>
        {images.map((_, idx) => (
          <div key={idx} style={{
            width: 6,
            height: 6,
            borderRadius: '50%',
            background: currentIndex === idx ? 'var(--amber)' : 'rgba(255,255,255,0.4)',
            transition: 'background 0.3s',
          }} />
        ))}
      </div>
    </div>
  );
}

// Lightbox Modal Component
function Lightbox({ images, onClose }) {
  const [idx, setIdx] = React.useState(0);

  // Lock scroll
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(5, 13, 38, 0.95)',
      backdropFilter: 'blur(10px)',
      display: 'flex', flexDirection: 'column',
      animation: 'sse-zoomin 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    }}>
      {/* Top Bar */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 24 }}>
        <button onClick={onClose} style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'rgba(255,255,255,0.1)', color: 'var(--paper)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 0.2s',
        }} onMouseEnter={e => e.currentTarget.style.background = 'rgba(212,160,23,0.8)'} onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      {/* Main Image */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', padding: 20 }}>
        <img
          src={images[idx]}
          alt={`View ${idx + 1}`}
          style={{
            maxWidth: '100%', maxHeight: '100%', objectFit: 'contain',
            boxShadow: '0 20px 40px rgba(0,0,0,0.5)',
            border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 8,
          }}
        />
        
        {/* Navigation Arrows */}
        {images.length > 1 && (
          <>
            <button onClick={() => setIdx(i => (i - 1 + images.length) % images.length)} style={{
              position: 'absolute', left: 40, top: '50%', transform: 'translateY(-50%)',
              width: 56, height: 56, borderRadius: '50%',
              background: 'rgba(255,255,255,0.1)', color: 'var(--paper)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }} onMouseEnter={e => e.currentTarget.style.background = 'var(--amber)'} onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 18 L9 12 L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button onClick={() => setIdx(i => (i + 1) % images.length)} style={{
              position: 'absolute', right: 40, top: '50%', transform: 'translateY(-50%)',
              width: 56, height: 56, borderRadius: '50%',
              background: 'rgba(255,255,255,0.1)', color: 'var(--paper)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }} onMouseEnter={e => e.currentTarget.style.background = 'var(--amber)'} onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 18 L15 12 L9 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </>
        )}
      </div>

      {/* Thumbnails */}
      {images.length > 1 && (
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, padding: 32 }}>
          {images.map((img, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              width: 80, height: 60, borderRadius: 6, overflow: 'hidden',
              border: i === idx ? '2px solid var(--amber)' : '2px solid transparent',
              opacity: i === idx ? 1 : 0.5,
              transition: 'all 0.2s',
            }}>
              <img src={img} alt={`Thumb ${i + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Products });