// Products.jsx — Products listing with filter

const { useState, useEffect } = React;
const { Link, useSearchParams } = window.ReactRouterDOM;

function ProductsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [activeFilter, setActiveFilter] = useState(searchParams.get('cat') || 'All');
  const [ref, visible] = window.useScrollReveal({ threshold: 0, margin: '0px' });

  useEffect(() => {
    const cat = searchParams.get('cat');
    if (cat) setActiveFilter(cat);
  }, [searchParams]);

  const filters = ['All', 'Insecticide', 'Fungicide', 'Fertilizer', 'Plant Growth Regulator', 'Adjuvant'];
  const filtered = activeFilter === 'All'
    ? window.PRODUCTS
    : window.PRODUCTS.filter(p => p.category === activeFilter);

  const handleFilter = (f) => {
    setActiveFilter(f);
    if (f === 'All') setSearchParams({});
    else setSearchParams({ cat: f });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div style={{ background: '#EEF5F1', minHeight: '100vh' }}>
      {/* Hero */}
      <div style={{ padding: '120px 2rem 60px', background: '#EEF5F1' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
            <Link to="/" style={{ color: '#8A8A8A', fontFamily: 'Inter, sans-serif', fontSize: 13, textDecoration: 'none' }}>Home</Link>
            <span style={{ color: '#A9BEA9', fontSize: 12 }}>›</span>
            <span style={{ color: '#1A1A1A', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>Products</span>
          </div>
          <h1 style={{ color: '#1A1A1A', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2rem,5vw,3.5rem)', margin: '0 0 12px' }}>Our Products</h1>
          <p style={{ color: '#595959', fontFamily: 'Inter, sans-serif', fontSize: 16, margin: 0 }}>
            Advanced formulations engineered for every crop protection need.
          </p>
        </div>
      </div>

      {/* Sticky Filter Bar */}
      <div style={{
        position: 'sticky', top: 70, zIndex: 100,
        background: '#EEF5F1F7', backdropFilter: 'blur(8px)',
        borderBottom: '1px solid rgba(51,51,51,0.1)',
        padding: '14px 2rem',
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {filters.map(f => (
            <button key={f} onClick={() => handleFilter(f)} className="cv-filter-chip" style={{
              padding: '9px 22px', borderRadius: 999, border: 'none', cursor: 'pointer',
              fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
              background: activeFilter === f ? '#264A31' : 'transparent',
              color: activeFilter === f ? '#fff' : '#333333',
              border: `1.5px solid ${activeFilter === f ? '#264A31' : 'rgba(51,51,51,0.25)'}`,
              transition: 'all 0.2s ease',
              transform: activeFilter === f ? 'scale(1.03)' : 'scale(1)',
            }}>{f}</button>
          ))}
          <span style={{ color: 'rgba(51,51,51,0.4)', fontFamily: 'Inter, sans-serif', fontSize: 13, alignSelf: 'center', marginLeft: 'auto' }}>
            {filtered.length} product{filtered.length !== 1 ? 's' : ''}
          </span>
        </div>
      </div>

      {/* Product Grid */}
      <div ref={ref} style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 2rem 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 28 }}>
          {filtered.map((product, i) => (
            <div key={product.id} style={{
              opacity: visible ? 1 : 0,
              transform: visible ? 'none' : 'translateY(28px)',
              transition: `opacity 0.5s ease ${i * 0.09}s, transform 0.5s ease ${i * 0.09}s`,
              height: '100%',
            }}>
              <window.ProductCard product={product} />
            </div>
          ))}

          {/* Coming Soon cards */}
          {[1, 2].map(i => (
            <ComingSoonCard key={`cs-${i}`} index={i} visible={visible} />
          ))}
        </div>
      </div>
    </div>
  );
}

function ComingSoonCard({ index, visible }) {
  return (
    <div style={{
      opacity: visible ? 0.7 : 0,
      transform: visible ? 'none' : 'translateY(28px)',
      transition: `opacity 0.5s ease ${(window.PRODUCTS.length + index) * 0.09}s, transform 0.5s ease ${(window.PRODUCTS.length + index) * 0.09}s`,
    }}>
      <div style={{
        background: '#fff', borderRadius: 16, overflow: 'hidden',
        border: '2px dashed rgba(51,51,51,0.15)',
        opacity: 0.65,
      }}>
        <div style={{ background: 'rgba(51,51,51,0.06)', padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ color: 'rgba(51,51,51,0.35)', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 16 }}>New Product</div>
            <div style={{ color: 'rgba(51,51,51,0.25)', fontFamily: 'Inter, sans-serif', fontSize: 12, marginTop: 2 }}>In Development</div>
          </div>
          <span style={{
            background: '#F27D16', color: '#fff', padding: '4px 10px', borderRadius: 999,
            fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 10, letterSpacing: '0.12em',
          }}>COMING SOON</span>
        </div>
        <div style={{ padding: '24px 20px', textAlign: 'center' }}>
          <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'rgba(51,51,51,0.06)', margin: '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="9" stroke="rgba(51,51,51,0.25)" strokeWidth="1.8"/>
              <path d="M12 8v4M12 16h.01" stroke="rgba(51,51,51,0.25)" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </div>
          <p style={{ color: 'rgba(51,51,51,0.4)', fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.6 }}>
            New formulation under development.<br />Stay tuned for our next breakthrough.
          </p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductsPage });