// WhatWeDo.jsx — 9-card services grid inspired by reference
function WhatWeDo() {
  const services = [
    {
      title: 'Reverse Osmosis',
      desc: 'A semipermeable membrane under pressure separates contaminants from water at the molecular level, yielding 99.9% clean output suitable for residential and commercial use.',
      icon: 'ro',
    },
    {
      title: 'Remineralised',
      desc: 'After RO strips the water of impurities, we reintroduce calcium and magnesium. Flavor returns, pH is rebalanced, and daily mineral intake is supported.',
      icon: 'mineral',
    },
    {
      title: 'Magnesium Water',
      desc: 'Magnesium supports muscle and nerve function, blood sugar control, and blood pressure regulation. Our Mg-fortified water is a valuable source of this essential mineral.',
      icon: 'mg',
    },
    {
      title: 'Under-Counter Systems',
      desc: 'Designed to mount beneath a kitchen countertop and deliver filtered water for drinking and cooking. Reduces lead, chlorine, and other pollutants at the tap.',
      icon: 'undersink',
    },
    {
      title: 'Filtration',
      desc: 'High-quality cartridges remove impurities, contaminants, and unpleasant tastes from your supply — cleaner, safer, better-tasting water for drinking, cooking, or industrial use.',
      icon: 'filter',
    },
    {
      title: 'Dispensers',
      desc: 'Refrigerated and ambient dispensers in a range of styles and sizes — perfect for homes, offices, and commercial spaces. Clean water always within reach.',
      icon: 'dispenser',
    },
    {
      title: 'Delivery',
      desc: 'Coming soon — we\'re setting up a convenient delivery service to bring clean, filtered water and products straight to your door. Stay tuned for route details.',
      icon: 'delivery',
      soon: true,
    },
    {
      title: 'Bottles & Cups',
      desc: 'A range of reusable cups and bottles built for durability and sustainability. Perfect for staying hydrated on the go — BPA-free, stylish, and built to last.',
      icon: 'bottles',
    },
    {
      title: 'Crates',
      desc: 'Reusable water crates designed for eco-friendly storage and transport. Each crate holds clean, purified water and is built from durable, sustainable materials.',
      icon: 'crate',
    },
  ];

  const Icon = ({ name }) => {
    const stroke = '#00E5FF';
    const glow = 'drop-shadow(0 0 6px rgba(0,229,255,0.7))';
    const common = { stroke, strokeWidth: 1.3, fill: 'none', style: { filter: glow } };
    switch (name) {
      case 'ro':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M22 6 Q10 22 10 30 A12 12 0 0 0 34 30 Q34 22 22 6 Z"/>
            <circle cx="18" cy="26" r="1.4" fill={stroke}/>
            <circle cx="24" cy="22" r="1.4" fill={stroke}/>
            <circle cx="26" cy="30" r="1.4" fill={stroke}/>
          </svg>
        );
      case 'mineral':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M22 6 Q10 22 10 30 A12 12 0 0 0 34 30 Q34 22 22 6 Z"/>
            <path {...common} d="M17 24 L19 26 L23 22"/>
            <path {...common} d="M25 28 L27 30 L30 25"/>
          </svg>
        );
      case 'mg':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M22 6 Q10 22 10 30 A12 12 0 0 0 34 30 Q34 22 22 6 Z"/>
            <text x="22" y="30" textAnchor="middle" fontFamily="IBM Plex Mono" fontWeight="600" fontSize="9" fill={stroke} style={{ filter: glow }}>Mg</text>
          </svg>
        );
      case 'undersink':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <rect {...common} x="10" y="12" width="24" height="24" rx="2"/>
            <rect {...common} x="16" y="18" width="12" height="12" rx="1"/>
            <path {...common} d="M22 6 L22 12"/>
          </svg>
        );
      case 'filter':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M22 6 Q10 22 10 30 A12 12 0 0 0 34 30 Q34 22 22 6 Z"/>
            <path {...common} d="M14 26 L30 26 M14 29 L30 29 M14 32 L30 32"/>
          </svg>
        );
      case 'dispenser':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M22 6 Q10 22 10 30 A12 12 0 0 0 34 30 Q34 22 22 6 Z"/>
            <rect {...common} x="20" y="20" width="4" height="12" rx="1"/>
          </svg>
        );
      case 'delivery':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <rect {...common} x="6" y="16" width="20" height="14" rx="1"/>
            <path {...common} d="M26 20 L34 20 L38 26 L38 30 L26 30 Z"/>
            <circle {...common} cx="14" cy="32" r="3"/>
            <circle {...common} cx="32" cy="32" r="3"/>
          </svg>
        );
      case 'bottles':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <path {...common} d="M16 6 L20 6 L20 12 Q20 14 21 15 Q23 17 23 22 L23 36 Q23 38 21 38 L15 38 Q13 38 13 36 L13 22 Q13 17 15 15 Q16 14 16 12 Z"/>
            <path {...common} d="M26 10 L30 10 L30 14 Q30 16 31 17 Q33 19 33 24 L33 36 Q33 38 31 38 L25 38 Q23 38 23 36"/>
          </svg>
        );
      case 'crate':
        return (
          <svg viewBox="0 0 44 44" width="28" height="28">
            <rect {...common} x="8" y="12" width="28" height="22" rx="1"/>
            <path {...common} d="M8 20 L36 20 M8 26 L36 26 M15 12 L15 34 M22 12 L22 34 M29 12 L29 34"/>
          </svg>
        );
      default: return null;
    }
  };

  return (
    <section className="section wwd-section" data-screen-label="05 What we do">
      <div className="wrap">
        <div className="wwd-head">
          <div className="eyebrow">Services</div>
          <h2 className="wwd-title">What we <span className="glow">do.</span></h2>
          <div className="wwd-rule" />
        </div>

        <div className="wwd-grid">
          {services.map((s, i) => (
            <article className={`wwd-card${s.soon ? ' soon' : ''}`} key={i}>
              <div className="wwd-icon">
                <Icon name={s.icon} />
              </div>
              <h3 className="wwd-card-title">
                {s.title}
                {s.soon && <span className="wwd-badge">Soon</span>}
              </h3>
              <p className="wwd-desc">{s.desc}</p>
              <div className="wwd-num">{String(i + 1).padStart(2, '0')}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatWeDo = WhatWeDo;