// Products.jsx — neon dark version
function BottleShape({ variant }) {
  const stroke = "rgba(0, 229, 255, 0.8)";
  const fill = "rgba(0, 229, 255, 0.08)";
  const shapes = {
    undersink: (
      <svg viewBox="0 0 160 220" style={{ width: '55%', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', filter: 'drop-shadow(0 0 16px rgba(0,229,255,0.35))' }}>
        <rect x="55" y="20" width="50" height="14" rx="3" fill={fill} stroke={stroke}/>
        <rect x="30" y="34" width="100" height="170" rx="12" fill={fill} stroke={stroke}/>
        <circle cx="80" cy="90" r="18" fill="none" stroke={stroke} strokeOpacity="0.5"/>
        <rect x="55" y="130" width="50" height="50" rx="4" fill="none" stroke={stroke} strokeOpacity="0.5"/>
      </svg>
    ),
    pitcher: (
      <svg viewBox="0 0 160 220" style={{ width: '60%', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', filter: 'drop-shadow(0 0 16px rgba(124,92,255,0.4))' }}>
        <path d="M40 40 L120 40 L130 60 L130 190 Q130 200 120 200 L50 200 Q40 200 40 190 Z" fill="rgba(124,92,255,0.1)" stroke="rgba(124,92,255,0.85)"/>
        <path d="M120 55 Q140 75 140 110 Q140 135 130 135" fill="none" stroke="rgba(124,92,255,0.7)" strokeWidth="2"/>
        <ellipse cx="85" cy="50" rx="40" ry="6" fill="none" stroke="rgba(124,92,255,0.5)"/>
      </svg>
    ),
    bottle: (
      <svg viewBox="0 0 120 220" style={{ width: '35%', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', filter: 'drop-shadow(0 0 20px rgba(74,158,255,0.5))' }}>
        <path d="M50 12 L70 12 L70 40 Q70 46 74 50 Q90 66 90 96 L90 196 Q90 208 78 208 L42 208 Q30 208 30 196 L30 96 Q30 66 46 50 Q50 46 50 40 Z" fill="rgba(74,158,255,0.1)" stroke="rgba(74,158,255,0.9)"/>
        <rect x="48" y="4" width="24" height="12" rx="2" fill="rgba(74,158,255,0.25)" stroke="rgba(74,158,255,0.7)"/>
      </svg>
    ),
    dispenser: (
      <svg viewBox="0 0 160 220" style={{ width: '55%', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', filter: 'drop-shadow(0 0 22px rgba(74,158,255,0.55))' }}>
        {/* cap + handle */}
        <rect x="64" y="6" width="32" height="10" rx="2" fill="rgba(74,158,255,0.35)" stroke="rgba(74,158,255,0.9)"/>
        <path d="M68 16 L92 16 L88 34 L72 34 Z" fill="rgba(74,158,255,0.18)" stroke="rgba(74,158,255,0.8)"/>
        {/* shoulders + body (5-gallon jug silhouette) */}
        <path d="M70 34 L90 34 Q108 34 120 54 Q130 72 130 96 L130 196 Q130 208 118 208 L42 208 Q30 208 30 196 L30 96 Q30 72 40 54 Q52 34 70 34 Z"
              fill="rgba(74,158,255,0.10)" stroke="rgba(74,158,255,0.9)"/>
        {/* water level line */}
        <path d="M33 120 Q60 114 80 120 Q100 126 127 120" fill="none" stroke="rgba(0,229,255,0.55)" strokeWidth="1.2"/>
        {/* bubbles */}
        <circle cx="60" cy="150" r="3" fill="none" stroke="rgba(0,229,255,0.5)"/>
        <circle cx="90" cy="170" r="2" fill="none" stroke="rgba(0,229,255,0.5)"/>
        <circle cx="72" cy="188" r="2.5" fill="none" stroke="rgba(0,229,255,0.4)"/>
      </svg>
    ),
    cartridge: (
      <svg viewBox="0 0 120 220" style={{ width: '40%', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', filter: 'drop-shadow(0 0 16px rgba(0,229,255,0.4))' }}>
        <rect x="35" y="14" width="50" height="192" rx="4" fill={fill} stroke={stroke}/>
        <rect x="35" y="30" width="50" height="3" fill={stroke}/>
        <rect x="35" y="186" width="50" height="3" fill={stroke}/>
        <rect x="45" y="80" width="30" height="60" fill="none" stroke={stroke} strokeOpacity="0.4"/>
      </svg>
    )
  };
  return shapes[variant] || shapes.bottle;
}

function ProductCard({ tag, tagStyle, name, sub, price, shape, bg, onAdd }) {
  return (
    <article className="pcard">
      <div className={`pcard-media ${bg}`}>
        <BottleShape variant={shape} />
        {tag && <span className={`pcard-tag${tagStyle ? ' ' + tagStyle : ''}`}>{tag}</span>}
        <button className="pcard-add" onClick={onAdd} aria-label="Add to cart">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
      </div>
      <div className="pcard-body">
        <div className="pcard-name">{name}</div>
        <div className="pcard-sub">{sub}</div>
        <div className="pcard-meta">
          <span className="pcard-price">{price}</span>
          <span className="mono" style={{ color: 'var(--text-dim)' }}>IN STOCK</span>
        </div>
      </div>
    </article>
  );
}

function Products({ onAdd }) {
  const items = [
    { tag: 'Bestseller', name: 'System 03', sub: '5-stage under-sink', price: 'R 8 499', shape: 'undersink', bg: '' },
    { tag: 'New', tagStyle: 'new', name: 'Carafe 1.2L', sub: 'Glass pitcher filter', price: 'R 1 099', shape: 'pitcher', bg: 'alt-a' },
    { tag: 'Refill', name: 'Dispenser 19L', sub: 'Delivered monthly', price: 'R 149 /mo', shape: 'dispenser', bg: 'alt-b' },
    { tag: 'Service', name: 'Core 6', sub: 'Replacement cartridge', price: 'R 759', shape: 'cartridge', bg: 'alt-c' },
  ];
  return (
    <section className="section" data-screen-label="02 Products">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Catalog / 24 products</div>
            <h2 className="section-title">
              The <span className="outline">shortlist.</span>
            </h2>
          </div>
          <p className="section-note">
            Four systems cover 90% of homes. Our team helps you choose based on
            your water report — not our margins.
          </p>
        </div>
        <div className="products">
          {items.map((p, i) => <ProductCard key={i} {...p} onAdd={() => onAdd(p.name)} />)}
        </div>
      </div>
    </section>
  );
}

window.Products = Products;