// WattIQ Product Detail Page — single component, content-driven
// Alle 9 secties renderen vanuit window.WATTIQ_PRODUCTS data

const { useState, useMemo, useEffect } = React;

// ============== ICONS (inline SVG) ==============
const Icon = ({ name, size = 24, stroke = 1.6 }) => {
  const props = {
    width: size, height: size, fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    // problem icons (used inside .icon)
    case "queue": return <svg {...props} viewBox="0 0 32 32"><path d="M4 8h24M4 16h24M4 24h24"/><circle cx="6" cy="8" r="1.5" fill="currentColor"/><circle cx="14" cy="16" r="1.5" fill="currentColor"/><circle cx="22" cy="24" r="1.5" fill="currentColor"/></svg>;
    case "scale": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="22" width="6" height="6"/><rect x="13" y="14" width="6" height="14"/><rect x="22" y="6" width="6" height="22"/></svg>;
    case "isolated": return <svg {...props} viewBox="0 0 32 32"><rect x="6" y="6" width="20" height="20"/><circle cx="16" cy="16" r="3"/><path d="M3 3l3 3M29 3l-3 3M3 29l3-3M29 29l-3-3" strokeDasharray="2 2"/></svg>;
    case "report": return <svg {...props} viewBox="0 0 32 32"><rect x="6" y="4" width="20" height="24"/><path d="M11 11h10M11 16h10M11 21h6"/></svg>;
    case "hours": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M16 8v8l5 3"/></svg>;
    case "noise": return <svg {...props} viewBox="0 0 32 32"><path d="M6 12v8h5l7 5V7l-7 5H6z"/><path d="M22 12c1.5 1.2 2.5 2.4 2.5 4s-1 2.8-2.5 4M26 8c2.5 2 4 4.8 4 8s-1.5 6-4 8" strokeDasharray="2 2"/></svg>;
    case "cost": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M19 12c0-1.5-1.5-2.5-3-2.5s-3 1-3 2.5c0 3 6 1.5 6 4.5 0 1.5-1.5 2.5-3 2.5s-3-1-3-2.5M16 9v2M16 21v2"/></svg>;
    case "wait": return <svg {...props} viewBox="0 0 32 32"><path d="M10 4h12v6l-4 5 4 5v6H10v-6l4-5-4-5V4z"/><path d="M10 26h12"/></svg>;
    case "fixed": return <svg {...props} viewBox="0 0 32 32"><rect x="6" y="6" width="20" height="20"/><path d="M11 11h10v10H11z"/></svg>;
    case "spike": return <svg {...props} viewBox="0 0 32 32"><path d="M3 24h7l3-12 4 18 3-14 4 8h5"/></svg>;
    case "solar": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="12" r="3"/><path d="M16 4v3M16 17v3M8 12H5M27 12h-3M10 6l-2-2M24 6l-2 2"/><rect x="6" y="22" width="20" height="6"/></svg>;
    case "fuel": return <svg {...props} viewBox="0 0 32 32"><rect x="6" y="6" width="14" height="20"/><path d="M20 12h4l3 3v9a2 2 0 01-2 2 2 2 0 01-2-2v-7"/></svg>;
    case "ban": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M8 8l16 16"/></svg>;
    case "refuel": return <svg {...props} viewBox="0 0 32 32"><path d="M6 28V8h14v20"/><path d="M20 14h4l3 3v9a2 2 0 01-2 2 2 2 0 01-2-2v-5"/><path d="M10 4l3 3-3 3"/></svg>;
    case "noroof": return <svg {...props} viewBox="0 0 32 32"><path d="M4 16l12-9 12 9"/><path d="M8 14v14h16V14" strokeDasharray="3 3"/></svg>;
    case "time": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M16 8v8l5 3"/></svg>;
    case "loss": return <svg {...props} viewBox="0 0 32 32"><path d="M4 12l8 8 8-8"/><path d="M16 4v16"/><path d="M28 24h-8" strokeDasharray="2 2"/></svg>;

    // flow icons
    case "grid": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="4" width="8" height="8"/><rect x="20" y="4" width="8" height="8"/><rect x="4" y="20" width="8" height="8"/><rect x="20" y="20" width="8" height="8"/><path d="M12 8h8M12 24h8M8 12v8M24 12v8"/></svg>;
    case "core": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="8" width="24" height="16" rx="1"/><path d="M9 8v16M14 8v16M19 8v16M24 8v16"/></svg>;
    case "ems": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M16 8v8l5 3"/><circle cx="16" cy="16" r="2" fill="currentColor"/></svg>;
    case "balance": return <svg {...props} viewBox="0 0 32 32"><path d="M4 26h24"/><path d="M16 4v22"/><path d="M8 14L4 22h8L8 14zM24 10l-4 8h8l-4-8z"/></svg>;
    case "load": return <svg {...props} viewBox="0 0 32 32"><path d="M4 16h8l3-8 4 16 3-8h6"/></svg>;
    case "battery": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="10" width="22" height="12" rx="1"/><rect x="26" y="13" width="3" height="6"/><rect x="7" y="13" width="3" height="6" fill="currentColor"/><rect x="11" y="13" width="3" height="6" fill="currentColor"/><rect x="15" y="13" width="3" height="6" fill="currentColor"/></svg>;
    case "genset": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="10" width="24" height="14" rx="1"/><circle cx="11" cy="17" r="3"/><path d="M19 14h6M19 18h6M19 22h4"/></svg>;
    case "bridge": return <svg {...props} viewBox="0 0 32 32"><path d="M4 22h24"/><path d="M4 22V14a4 4 0 014-4M28 22V14a4 4 0 00-4-4"/><path d="M10 22v-6M22 22v-6M16 22v-8"/></svg>;
    case "charger": return <svg {...props} viewBox="0 0 32 32"><rect x="6" y="4" width="14" height="24" rx="1"/><path d="M10 12h6l-3 6h3M22 8l4 4-4 4"/></svg>;
    case "ev": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="14" width="24" height="8" rx="1"/><circle cx="9" cy="24" r="2"/><circle cx="23" cy="24" r="2"/><path d="M7 14l3-6h12l3 6"/></svg>;
    case "fleet": return <svg {...props} viewBox="0 0 32 32"><rect x="2" y="14" width="14" height="6" rx="1"/><circle cx="6" cy="22" r="2"/><circle cx="13" cy="22" r="2"/><rect x="18" y="10" width="12" height="10" rx="1"/><circle cx="22" cy="22" r="2"/><circle cx="27" cy="22" r="2"/></svg>;
    case "container": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="8" width="24" height="16"/><path d="M8 8v16M14 8v16M20 8v16M26 8v16"/></svg>;
    case "deploy": return <svg {...props} viewBox="0 0 32 32"><path d="M16 4v12M16 16l-6 4 6 8 6-8-6-4z"/></svg>;
    case "led": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="12" r="6"/><path d="M16 18v8M12 26h8M10 6l-3-2M22 6l3-2M16 4v2"/></svg>;
    case "auto": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M11 16l3 3 7-7"/></svg>;
    case "dc": return <svg {...props} viewBox="0 0 32 32"><path d="M6 16h8M14 16l-3-3M14 16l-3 3"/><path d="M18 16h8M22 12v8"/></svg>;
    case "rental": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="8" width="24" height="20"/><path d="M4 14h24M9 4v6M23 4v6"/></svg>;
    case "stage": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M16 9l3 5h-6l3-5z" fill="currentColor"/><path d="M11 22h10"/></svg>;

    // feature icons
    case "peak": return <svg {...props} viewBox="0 0 32 32"><path d="M4 24h24"/><path d="M4 18l5-2 4-8 4 12 5-6 4 4 6-4"/><path d="M4 24v-2"/></svg>;
    case "modular": return <svg {...props} viewBox="0 0 32 32"><rect x="4" y="4" width="10" height="10"/><rect x="18" y="4" width="10" height="10"/><rect x="4" y="18" width="10" height="10"/><rect x="18" y="18" width="10" height="10"/></svg>;
    case "plug": return <svg {...props} viewBox="0 0 32 32"><path d="M11 4v6M21 4v6"/><rect x="6" y="10" width="20" height="8" rx="2"/><path d="M16 18v4l-3 6h6l-3-6v-4"/></svg>;
    case "remote": return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/><path d="M11 13a8 8 0 0110 0M13 17a4 4 0 016 0"/><circle cx="16" cy="20" r="1.2" fill="currentColor"/></svg>;
    case "hybrid": return <svg {...props} viewBox="0 0 32 32"><circle cx="11" cy="16" r="5"/><circle cx="21" cy="16" r="5"/></svg>;
    default: return <svg {...props} viewBox="0 0 32 32"><circle cx="16" cy="16" r="11"/></svg>;
  }
};

// ============== HERO STAGE (product image + meta overlay) ==============
const HeroStage = ({ product }) => {
  return (
    <div className="hero-stage">
      <div className="stage-meta">
        {product.stageMeta.map((m, i) => <span key={i}>{m}</span>)}
      </div>
      <div className="stage-status">{product.stageStatus}</div>
      <img src={product.image} alt={product.name} loading="eager" />
      <div className="stage-corner">
        <span>{product.stageCorner[0]}</span>
        <span>{product.stageCorner[1]}</span>
      </div>
    </div>
  );
};

// ============== HERO (Section 1) ==============
const Hero = ({ product }) => (
  <section className="hero" data-screen-label={`P · ${product.name} · 01 Hero`}>
    <div className="hero-grid-bg"></div>
    <div className="hero-glow"></div>
    <div className="wrap hero-inner">
      <div>
        <div className="kicker">
          <span className="bar"></span>Product · {product.family} — {product.category}
        </div>
        <h1 className="h1">{product.headline}</h1>
        <p className="lead">{product.sublead}</p>
        <div className="hero-cta">
          <a href="#cta" className="btn primary">Plan een gesprek <span className="arrow">→</span></a>
          <a href="#flow" className="btn ghost">Bekijk hoe het werkt</a>
        </div>
        <div className="hero-meta">
          {product.heroMeta.map((m, i) => (
            <div key={i}>
              <div className="v" dangerouslySetInnerHTML={{ __html: m.v }} />
              <div className="k">{m.k}</div>
            </div>
          ))}
        </div>
      </div>
      <HeroStage product={product} />
    </div>
  </section>
);

// ============== PROBLEM ICONS (mini diagrams) ==============
const ProblemIcon = ({ kind }) => (
  <div className="icon">
    <svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid meet">
      {/* grid */}
      <defs>
        <pattern id={`pat-${kind}`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0v20" fill="none" stroke="rgba(244,239,226,.06)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="200" height="110" fill={`url(#pat-${kind})`} />
      {kind === "queue" && (<>
        <rect x="20" y="50" width="14" height="14" fill="rgba(255,107,43,.4)" />
        <rect x="40" y="50" width="14" height="14" fill="rgba(255,107,43,.3)" />
        <rect x="60" y="50" width="14" height="14" fill="rgba(255,107,43,.2)" />
        <rect x="80" y="50" width="14" height="14" fill="rgba(244,239,226,.15)" />
        <rect x="100" y="50" width="14" height="14" fill="rgba(244,239,226,.1)" />
        <rect x="120" y="50" width="14" height="14" fill="rgba(244,239,226,.08)" />
        <text x="20" y="80" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">12</text>
        <text x="60" y="80" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">24</text>
        <text x="100" y="80" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">36 mnd</text>
        <line x1="160" y1="40" x2="180" y2="40" stroke="#FF6B2B" strokeDasharray="3 3"/>
        <text x="148" y="35" fontFamily="JetBrains Mono" fontSize="8" fill="#FF6B2B">project</text>
      </>)}
      {kind === "hours" && (<>
        <circle cx="100" cy="55" r="36" fill="none" stroke="rgba(244,239,226,.18)" strokeWidth="1"/>
        <circle cx="100" cy="55" r="36" fill="none" stroke="#FF6B2B" strokeWidth="2"
                strokeDasharray="226" strokeDashoffset="0" transform="rotate(-90 100 55)"/>
        <text x="100" y="58" fontFamily="JetBrains Mono" fontSize="13" fill="#FDF8F2"
              textAnchor="middle" fontWeight="700">24/7</text>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">DRAAIUREN</text>
      </>)}
      {kind === "noise" && (<>
        {[1,2,3,4,5,6].map((i) => (
          <rect key={i} x={30 + i*22} y={60 - i*7} width="14" height={20 + i*7} fill="rgba(255,107,43,.5)"/>
        ))}
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">65+ dB(A)</text>
      </>)}
      {kind === "cost" && (<>
        <path d="M30 80 L60 70 L90 60 L120 45 L150 30 L180 18" fill="none" stroke="#FF6B2B" strokeWidth="2"/>
        <circle cx="180" cy="18" r="3" fill="#FF6B2B"/>
        <text x="36" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182">€/dag</text>
        <text x="160" y="14" fontFamily="JetBrains Mono" fontSize="8" fill="#FF6B2B">+340%</text>
      </>)}
      {kind === "report" && (<>
        <rect x="50" y="20" width="100" height="70" fill="none" stroke="rgba(244,239,226,.18)"/>
        <line x1="65" y1="35" x2="135" y2="35" stroke="rgba(244,239,226,.2)"/>
        <line x1="65" y1="48" x2="135" y2="48" stroke="rgba(244,239,226,.2)"/>
        <line x1="65" y1="61" x2="115" y2="61" stroke="rgba(244,239,226,.2)"/>
        <line x1="65" y1="74" x2="125" y2="74" stroke="rgba(244,239,226,.2)"/>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">CSRD ?</text>
        <path d="M50 20 L150 90M150 20 L50 90" stroke="#E76F51" strokeWidth="1.4"/>
      </>)}
      {kind === "scale" && (<>
        <rect x="20" y="60" width="20" height="30" fill="rgba(244,239,226,.15)"/>
        <rect x="50" y="50" width="20" height="40" fill="rgba(244,239,226,.2)"/>
        <rect x="80" y="40" width="20" height="50" fill="rgba(255,107,43,.4)"/>
        <rect x="110" y="30" width="20" height="60" fill="rgba(244,239,226,.2)"/>
        <rect x="140" y="20" width="20" height="70" fill="rgba(244,239,226,.15)"/>
        <line x1="80" y1="14" x2="100" y2="14" stroke="#FF6B2B" strokeDasharray="2 2"/>
        <text x="74" y="11" fontFamily="JetBrains Mono" fontSize="7" fill="#FF6B2B">VAST</text>
      </>)}
      {kind === "isolated" && (<>
        <rect x="80" y="40" width="40" height="30" fill="rgba(244,239,226,.18)" stroke="rgba(244,239,226,.3)"/>
        <text x="100" y="58" fontFamily="JetBrains Mono" fontSize="9" fill="#FDF8F2" textAnchor="middle">BATT</text>
        <circle cx="40" cy="55" r="6" fill="none" stroke="rgba(244,239,226,.18)"/>
        <circle cx="160" cy="55" r="6" fill="none" stroke="rgba(244,239,226,.18)"/>
        <line x1="46" y1="55" x2="80" y2="55" stroke="rgba(244,239,226,.18)" strokeDasharray="3 3"/>
        <line x1="120" y1="55" x2="154" y2="55" stroke="rgba(244,239,226,.18)" strokeDasharray="3 3"/>
        <line x1="50" y1="50" x2="70" y2="60" stroke="#E76F51" strokeWidth="1.5"/>
        <line x1="50" y1="60" x2="70" y2="50" stroke="#E76F51" strokeWidth="1.5"/>
        <line x1="130" y1="50" x2="150" y2="60" stroke="#E76F51" strokeWidth="1.5"/>
        <line x1="130" y1="60" x2="150" y2="50" stroke="#E76F51" strokeWidth="1.5"/>
      </>)}
      {kind === "wait" && (<>
        <rect x="40" y="30" width="120" height="50" fill="none" stroke="rgba(244,239,226,.18)"/>
        {[0,1,2,3,4,5].map((i) => (
          <rect key={i} x={50+i*18} y="45" width="12" height="20"
                fill={i<3 ? "rgba(255,107,43,.4)" : "rgba(244,239,226,.1)"}/>
        ))}
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">12 / 24 / 36 MND</text>
      </>)}
      {kind === "fixed" && (<>
        <rect x="60" y="35" width="80" height="40" fill="rgba(244,239,226,.1)" stroke="rgba(244,239,226,.2)"/>
        <text x="100" y="58" fontFamily="JetBrains Mono" fontSize="10" fill="#FDF8F2" textAnchor="middle">FIXED</text>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#E76F51" textAnchor="middle">€280k CapEx</text>
      </>)}
      {kind === "spike" && (<>
        <path d="M20 80 L60 80 L70 30 L80 80 L120 80 L130 50 L140 80 L180 80"
              fill="none" stroke="#FF6B2B" strokeWidth="2"/>
        <line x1="20" y1="55" x2="180" y2="55" stroke="rgba(244,239,226,.25)" strokeDasharray="3 3"/>
        <text x="186" y="58" fontFamily="JetBrains Mono" fontSize="7" fill="#9A9182">MAX</text>
      </>)}
      {kind === "solar" && (<>
        <circle cx="60" cy="40" r="10" fill="rgba(255,215,0,.3)"/>
        <rect x="100" y="55" width="60" height="25" fill="rgba(244,239,226,.1)" stroke="rgba(244,239,226,.2)"/>
        <text x="130" y="72" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182" textAnchor="middle">EXPORT 0,02€</text>
        <line x1="70" y1="48" x2="100" y2="60" stroke="rgba(255,215,0,.3)" strokeDasharray="2 2"/>
      </>)}
      {kind === "fuel" && (<>
        <rect x="50" y="30" width="100" height="50" fill="none" stroke="rgba(244,239,226,.18)"/>
        <rect x="50" y="55" width="100" height="25" fill="rgba(255,107,43,.3)"/>
        <text x="100" y="50" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B" textAnchor="middle">1L/uur</text>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">VOOR 1.2 kW LED</text>
      </>)}
      {kind === "ban" && (<>
        <circle cx="100" cy="55" r="30" fill="none" stroke="#E76F51" strokeWidth="2"/>
        <line x1="80" y1="35" x2="120" y2="75" stroke="#E76F51" strokeWidth="2"/>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">STAGE IIIA · BANNED</text>
      </>)}
      {kind === "refuel" && (<>
        <rect x="60" y="40" width="80" height="35" fill="rgba(244,239,226,.1)" stroke="rgba(244,239,226,.2)"/>
        <path d="M30 55 L55 55 M50 50 L55 55 L50 60" stroke="#FF6B2B" strokeWidth="1.5" fill="none"/>
        <text x="100" y="62" fontFamily="JetBrains Mono" fontSize="9" fill="#FDF8F2" textAnchor="middle">REFUEL</text>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">02:00 · OPERATOR</text>
      </>)}
      {kind === "noroof" && (<>
        <path d="M40 60 L100 25 L160 60" fill="none" stroke="rgba(244,239,226,.2)" strokeDasharray="4 4"/>
        <rect x="40" y="60" width="120" height="20" fill="none" stroke="rgba(244,239,226,.2)" strokeDasharray="3 3"/>
        <text x="100" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">NO ROOF</text>
      </>)}
      {kind === "time" && (<>
        <line x1="20" y1="55" x2="180" y2="55" stroke="rgba(244,239,226,.2)"/>
        {[0,1,2,3,4].map((i) => (
          <g key={i}>
            <line x1={30+i*38} y1="50" x2={30+i*38} y2="60" stroke="rgba(244,239,226,.3)"/>
            <text x={30+i*38} y="74" fontFamily="JetBrains Mono" fontSize="8" fill="#9A9182" textAnchor="middle">{i+1}d</text>
          </g>
        ))}
        <rect x="30" y="48" width="152" height="2" fill="#FF6B2B"/>
      </>)}
      {kind === "loss" && (<>
        <rect x="20" y="40" width="40" height="30" fill="rgba(244,239,226,.1)"/>
        <text x="40" y="60" fontFamily="JetBrains Mono" fontSize="9" fill="#FDF8F2" textAnchor="middle">AC</text>
        <path d="M62 55 L78 55" stroke="rgba(244,239,226,.3)"/>
        <rect x="80" y="40" width="40" height="30" fill="rgba(244,239,226,.1)"/>
        <text x="100" y="60" fontFamily="JetBrains Mono" fontSize="9" fill="#FDF8F2" textAnchor="middle">DC</text>
        <path d="M122 55 L138 55" stroke="rgba(244,239,226,.3)"/>
        <rect x="140" y="40" width="40" height="30" fill="rgba(244,239,226,.1)"/>
        <text x="160" y="60" fontFamily="JetBrains Mono" fontSize="9" fill="#FDF8F2" textAnchor="middle">AC</text>
        <text x="100" y="92" fontFamily="JetBrains Mono" fontSize="8" fill="#E76F51" textAnchor="middle">−18% LOSS</text>
      </>)}
    </svg>
  </div>
);

// ============== PROBLEM (Section 2) — Diagonal Hero (V6) ==============
const Problem = ({ product }) => (
  <section data-screen-label={`P · ${product.name} · 02 Problem`}>
    <div className="wrap">
      <div className="prob-head">
        <div className="kicker"><span className="bar"></span>02 — Probleem</div>
      </div>
      <div className="prob-hero">
        <h2 className="prob-statement">
          Vier blokkades.<br/>
          <span>Eén oorzaak:</span><br/>
          starre infrastructuur.
        </h2>
        <p className="prob-lead">
          {product.problemLead} Hieronder de patronen die we op elke locatie tegenkomen — en waarom geen losse oplossing volstaat.
        </p>
      </div>
      <div className="prob-tabs">
        {product.problems.map((p, i) => (
          <div className="prob-tab" key={i} style={{ "--prog": `${(i + 1) * 24}%` }}>
            <div className="prob-tab-bar" />
            <div className="prob-tab-num">{p.num}</div>
            <h4 className="prob-tab-title">{p.title}</h4>
            <p className="prob-tab-body">{p.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============== FLOW (Section 3) ==============
const Flow = ({ product }) => (
  <section id="flow" data-screen-label={`P · ${product.name} · 03 Flow`}>
    <div className="wrap">
      <div className="sec-head">
        <div>
          <div className="kicker"><span className="bar"></span>03 — Hoe het werkt</div>
          <h2 className="h2">{product.flowHead}</h2>
        </div>
        <p className="lead">{product.flowLead}</p>
      </div>
      <div className="flow">
        <div className="flow-grid-bg"></div>
        <div className="flow-pulse"></div>
        <div className="flow-row">
          {product.flow.map((n, i) => (
            <div className={`flow-node${n.core ? " is-core" : ""}`} key={i}>
              <div className="badge"><Icon name={n.ico} size={28} /></div>
              <h5>{n.t}</h5>
              <div className="meta" dangerouslySetInnerHTML={{ __html: n.k }} />
            </div>
          ))}
        </div>
        <div className="flow-caption">
          {product.flowCaption.map((c, i) => (
            <div key={i}>
              <div className="k">{c.k}</div>
              <div className="v" dangerouslySetInnerHTML={{ __html: c.v }} />
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ============== FEATURES (Section 4) — Icon Strip Compact ==============
const Features = ({ product }) => (
  <section data-screen-label={`P · ${product.name} · 04 Features`}>
    <div className="wrap">
      <div className="sec-head">
        <div>
          <div className="kicker"><span className="bar"></span>04 — Eigenschappen</div>
          <h2 className="h2">{product.featuresHead}</h2>
        </div>
        <p className="lead">Iedere feature toont operationeel voordeel — niet alleen wat het is.</p>
      </div>
      <div className="features-strip">
        {product.features.map((f, i) => (
          <div className="fs-cell" key={i}>
            <div className="fs-ico"><Icon name={f.ico} size={22} /></div>
            <div className="fs-num">{String(i + 1).padStart(2, "0")}</div>
            <h4 className="fs-title">{f.title}</h4>
            <p className="fs-body">{f.body}</p>
            <div className="fs-gain"><span dangerouslySetInnerHTML={{ __html: f.gain }} /></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============== SCENARIO STAGE (mini diagram per type) ==============
const ScenarioStage = ({ kind }) => (
  <div className="scenario-stage">
    <div className="scenario-meta">
      <span>SIM_001</span><span>REAL-WORLD</span>
    </div>
    <div className="scenario-time">LIVE</div>
    <svg viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="scenGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#FF6B2B" stopOpacity="0.4"/>
          <stop offset="1" stopColor="#FF6B2B" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="scenGrad2" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#F4EFE2" stopOpacity="0.18"/>
          <stop offset="1" stopColor="#F4EFE2" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* y-axis labels */}
      <text x="20" y="60" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">100%</text>
      <text x="20" y="140" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">50%</text>
      <text x="20" y="220" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">0%</text>
      <line x1="50" y1="55" x2="380" y2="55" stroke="rgba(244,239,226,.08)"/>
      <line x1="50" y1="135" x2="380" y2="135" stroke="rgba(244,239,226,.08)"/>
      <line x1="50" y1="215" x2="380" y2="215" stroke="rgba(244,239,226,.08)"/>

      {kind === "site-load" && (<>
        {/* battery SoC area */}
        <path d="M50 80 L110 90 L160 130 L210 100 L260 70 L310 75 L360 90 L360 220 L50 220 Z" fill="url(#scenGrad)"/>
        <path d="M50 80 L110 90 L160 130 L210 100 L260 70 L310 75 L360 90" stroke="#FF6B2B" strokeWidth="2" fill="none"/>
        {/* genset bursts */}
        <rect x="155" y="170" width="10" height="45" fill="rgba(231,111,81,.5)"/>
        <rect x="170" y="170" width="10" height="45" fill="rgba(231,111,81,.5)"/>
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B">SoC</text>
        <text x="160" y="158" fontFamily="JetBrains Mono" fontSize="8" fill="#E76F51">GENSET</text>
        <text x="50" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">06:00</text>
        <text x="195" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">12:00</text>
        <text x="340" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">22:00</text>
        <text x="55" y="295" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">14-DAY · ROTTERDAM SITE</text>
      </>)}
      {kind === "fuel-curve" && (<>
        {/* stacked curves */}
        <path d="M50 200 L130 180 L200 130 L270 165 L340 195 L360 200 L360 220 L50 220 Z" fill="url(#scenGrad2)"/>
        <path d="M50 200 L130 180 L200 130 L270 165 L340 195 L360 200" stroke="#F4EFE2" strokeOpacity=".5" strokeWidth="1.5" fill="none"/>
        <path d="M50 165 L130 145 L200 75 L270 100 L340 140 L360 150 L360 220 L50 220 Z" fill="url(#scenGrad)"/>
        <path d="M50 165 L130 145 L200 75 L270 100 L340 140 L360 150" stroke="#FF6B2B" strokeWidth="2" fill="none"/>
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B">BATTERY</text>
        <text x="60" y="208" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">GENSET</text>
        <text x="55" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">DAG 1</text>
        <text x="195" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">DAG 11</text>
        <text x="335" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">DAG 21</text>
        <text x="55" y="295" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">21-DAY OFF-GRID PROJECT</text>
      </>)}
      {kind === "peak-shave" && (<>
        <line x1="50" y1="100" x2="360" y2="100" stroke="#FF6B2B" strokeDasharray="3 3"/>
        <text x="365" y="103" fontFamily="JetBrains Mono" fontSize="8" fill="#FF6B2B">CAP</text>
        <path d="M50 180 L100 170 L130 140 L160 70 L190 80 L220 110 L260 140 L300 110 L340 175 L360 180"
              fill="url(#scenGrad)" fillOpacity=".4"/>
        <path d="M50 180 L100 170 L130 140 L160 70 L190 80 L220 110 L260 140 L300 110 L340 175 L360 180" 
              stroke="#FF6B2B" strokeWidth="2" fill="none"/>
        {/* shaved peak */}
        <path d="M150 70 L170 70 L170 100 L150 100 Z" fill="rgba(255,107,43,.3)" stroke="#FF6B2B" strokeWidth="1.2" strokeDasharray="2 2"/>
        <text x="180" y="65" fontFamily="JetBrains Mono" fontSize="8" fill="#FF6B2B">SHAVED</text>
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">AANSLUITINGSLAST</text>
        <text x="55" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">07:00</text>
        <text x="200" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">12:00</text>
        <text x="335" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">18:00</text>
      </>)}
      {kind === "charge-curve" && (<>
        {/* multiple charging trucks */}
        {[0,1,2,3].map(i => (
          <path key={i}
                d={`M${60+i*70} 180 L${75+i*70} 100 L${110+i*70} 90 L${130+i*70} 120 L${150+i*70} 195`}
                fill="none" stroke={i===0?"#FF6B2B":"rgba(244,239,226,.4)"} strokeWidth="1.5"/>
        ))}
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B">8 TRUCKS · DC SESSIONS</text>
        <text x="55" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">18:00</text>
        <text x="195" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">00:00</text>
        <text x="335" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">06:00</text>
        <text x="55" y="295" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">2.4 MWh DELIVERED · 80kW GRID</text>
      </>)}
      {kind === "backup-curve" && (<>
        <path d="M50 80 L120 75 L170 70 L195 215 L210 215 L235 90 L300 85 L360 95 L360 220 L50 220 Z" fill="url(#scenGrad)"/>
        <path d="M50 80 L120 75 L170 70 L195 215 L210 215 L235 90 L300 85 L360 95" stroke="#FF6B2B" strokeWidth="2" fill="none"/>
        <rect x="195" y="160" width="40" height="55" fill="rgba(231,111,81,.5)"/>
        <text x="215" y="155" fontFamily="JetBrains Mono" fontSize="8" fill="#E76F51" textAnchor="middle">FORGE 22 MIN</text>
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B">BATTERY SoC</text>
        <text x="55" y="295" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">SCHALEN VAN PIEK · 4-UURS WINDOW</text>
      </>)}
      {kind === "light-cycle" && (<>
        {/* solar/battery cycle */}
        {[0,1,2].map(d => (
          <g key={d}>
            <path d={`M${50+d*105} 100 Q${75+d*105} 60 ${100+d*105} 100`} fill="none" stroke="rgba(255,215,0,.3)" strokeWidth="2"/>
            <path d={`M${100+d*105} 100 L${100+d*105} 200`} fill="none" stroke="#FF6B2B" strokeWidth="2"/>
            <text x={75+d*105} y="55" fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,215,0,.8)" textAnchor="middle">DAG{d+1}</text>
          </g>
        ))}
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">SOLAR HARVEST + LED RUNTIME</text>
        <text x="55" y="295" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">14 NACHTEN · 0L DIESEL</text>
      </>)}
      {kind === "harvest-curve" && (<>
        <path d="M50 220 L80 215 L120 130 L160 60 L200 40 L240 60 L280 130 L320 215 L360 220 L360 220 L50 220 Z" fill="url(#scenGrad)"/>
        <path d="M50 220 L80 215 L120 130 L160 60 L200 40 L240 60 L280 130 L320 215 L360 220" stroke="#FF6B2B" strokeWidth="2" fill="none"/>
        <text x="195" y="30" fontFamily="JetBrains Mono" fontSize="9" fill="#FF6B2B" textAnchor="middle">30 kWp PIEK</text>
        <text x="60" y="40" fontFamily="JetBrains Mono" fontSize="9" fill="#9A9182">SOLAR HARVEST</text>
        <text x="55" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">06:00</text>
        <text x="195" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">13:00</text>
        <text x="335" y="265" fontFamily="JetBrains Mono" fontSize="9" fill="#6B6256">20:00</text>
      </>)}
    </svg>
  </div>
);

// ============== SCENARIO (Section 5) — Three-Phase Cards + Sparklines ==============
const SCN_LINES = [
  "M0,40 L40,38 L80,18 L120,8 L160,12 L200,30 L240,42",
  "M0,30 L40,22 L80,16 L120,18 L160,28 L200,38 L240,42",
  "M0,40 L40,42 L80,32 L120,18 L160,10 L200,12 L240,22",
];
const Scenario = ({ product }) => {
  // pak eerste 3 stappen — als minder, vul aan
  const phases = product.scenarioSteps.slice(0, 3);
  return (
    <section data-screen-label={`P · ${product.name} · 05 Scenario`}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="kicker"><span className="bar"></span>05 — Scenario</div>
            <h2 className="h2">{product.scenarioHead}</h2>
          </div>
          <p className="lead">{product.scenarioLead}</p>
        </div>
        <div className="scn-phases">
          {phases.map((p, i) => (
            <div className="scn-cell" key={i}>
              <div className="scn-tag">PHASE 0{i + 1}</div>
              <div className="scn-time">{p.t}</div>
              <h4 className="scn-title">{p.title}</h4>
              <p className="scn-body">{p.body}</p>
              <svg className="scn-spark" viewBox="0 0 240 50">
                <path d={SCN_LINES[i]} stroke="#FF6B2B" strokeWidth="1.6" fill="none" />
                <path d={SCN_LINES[i] + " L240,50 L0,50 Z"} fill="#FF6B2B" opacity=".12" />
              </svg>
              <div className="scn-foot">
                <span>SAMPLE / 5 MIN</span>
                <span className="scn-foot-r">LIVE</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============== VARIANTS (Section 6a) — Sub-tab strip + Hero variant in focus ==============
// Parses a model name into a series label + short variant identifier
// "WattIQ Core 260"      → { series: "CORE", variant: "260" }
// "WattIQ Core Lite 40"  → { series: "LITE", variant: "40" }
// "WattIQ Forge D60"     → { series: "FORGE", variant: "D60" }
// "WattIQ Beacon H"      → { series: "BEACON", variant: "H" }
const parseModelName = (fullName, productName) => {
  let n = (fullName || "").replace(/^WattIQ\s+/i, "");
  const base = (productName || "").replace(/^WattIQ\s+/i, "");
  if (n.toLowerCase().startsWith(base.toLowerCase() + " ")) n = n.slice(base.length + 1);
  const parts = n.split(/\s+/).filter(Boolean);
  if (parts.length === 0) return { series: base.toUpperCase(), variant: "" };
  const looksLikeSeries = /^[A-Za-z]+$/.test(parts[0]) && parts.length > 1;
  if (looksLikeSeries) {
    return { series: parts[0].toUpperCase(), variant: parts.slice(1).join(" ") };
  }
  return { series: base.toUpperCase(), variant: parts.join(" ") };
};

// Per-variant photos — slug = lowercased model name with spaces → hyphens, "WattIQ " prefix stripped.
// Fallback is the product's main image when no specific photo exists.
const VARIANT_IMAGES = {
  // CORE
  "core-125":         "assets/products/core-125.png",
  "core-260":         "assets/products/core-260.png",
  "core-1000":        "assets/products/core-2000.png",
  "core-2000":        "assets/products/core-2000.png",
  "core-lite-40":     "assets/products/core-lite-100.png",
  "core-lite-100":    "assets/products/core-lite-100.png",
  "core-flex-50":     "assets/products/core-flex-100-1.png",
  "core-flex-100":    "assets/products/core-flex-100-1.png",
  // FUSION
  "fusion-gb30":      "assets/products/fusion.png",
  "fusion-gsb20":     "assets/products/fusion-2.png",
  "fusion-gsb60":     "assets/products/fusion-3.png",
  // BRIDGE
  "bridge-30":        "assets/products/bridge-1.png",
  "bridge-60":        "assets/products/bridge-2.png",
  // GRID
  "grid-80":          "assets/products/grid-80-1.png",
  "grid-200":         "assets/products/grid-200-1.png",
  "grid-600":         "assets/products/grid-600-1.png",
  "grid-800":         "assets/products/grid-1000-1.png",
  "grid-1000":        "assets/products/grid-1000-1.png",
  // FORGE
  "forge-d30":        "assets/products/forge-d60.png",
  "forge-d60":        "assets/products/forge-d60.png",
  "forge-d120":       "assets/products/forge-d120.png",
  // BEACON
  "beacon-h":         "assets/products/beacon-h-1.png",
  "beacon-d-hydra":   "assets/products/beacon-d-hydra-1.png",
  "beacon-d-manual":  "assets/products/beacon-d-manual.png",
  // RAY
  "ray-fold-10":      "assets/products/ray-fold-1.png",
  "ray-fold-30":      "assets/products/ray-fold-2.png",
  "ray-flex-10":      "assets/products/ray-flex-1.png",
  "ray-flex-30":      "assets/products/ray-flex-2.png",
};
const getVariantImage = (fullName, fallback) => {
  if (!fullName) return fallback;
  const slug = fullName.replace(/^WattIQ\s+/i, "").replace(/\s+/g, "-").toLowerCase();
  return VARIANT_IMAGES[slug] || fallback;
};

const Variants = ({ product }) => {
  const models = product.models || [];
  if (models.length === 0) return null;
  // Reset selection back to first variant whenever the product family changes
  const [pickIdx, setPickIdx] = useState(0);
  useEffect(() => { setPickIdx(0); }, [product.id]);

  const m = models[pickIdx] || models[0];
  const [name, useCase, capacity, power, specific, housing] = m;
  const code = name.replace(/^WattIQ\s+/i, "").replace(/\s+/g, "-").toUpperCase();
  const photo = getVariantImage(name, product.image);

  return (
    <section className="variants-sec" data-screen-label={`P · ${product.name} · 06a Varianten`}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="kicker"><span className="bar"></span>06 — Varianten</div>
            <h2 className="h2">{models.length} configuraties.<br/>Eén platform.</h2>
          </div>
          <p className="lead">Kies de variant die past bij je locatie. Onder elke configuratie zit hetzelfde EMS en dezelfde Control-koppeling — alleen capaciteit, vermogen en behuizing verschillen.</p>
        </div>

        <div className="variants-strip" role="tablist">
          {models.map((row, i) => {
            const p = parseModelName(row[0], product.name);
            return (
              <button
                key={i}
                type="button"
                role="tab"
                aria-selected={pickIdx === i}
                className={"var-tab" + (pickIdx === i ? " active" : "")}
                onClick={() => setPickIdx(i)}
              >
                <span className="var-ix">{p.series}</span>
                <span className="var-nm">{p.variant}</span>
                <span className="var-sub">{row[2]}</span>
              </button>
            );
          })}
        </div>

        <div className="var-stage">
          <div className="var-stage-l">
            <div className="var-photo">
              <span className="var-photo-tag">WIQ-{code}</span>
              <span className="var-photo-status">SELECTED</span>
              <img src={photo} alt={name} loading="lazy" key={photo} />
            </div>
            <div className="var-code">WIQ-{code}</div>
            <div className="var-name">{name}</div>
          </div>
          <div className="var-stage-r">
            <div className="var-specs">
              <div className="var-spec">
                <span className="k">— Capaciteit / Output</span>
                <span className="v o" dangerouslySetInnerHTML={{ __html: capacity || "—" }} />
              </div>
              <div className="var-spec">
                <span className="k">— Vermogen / Battery</span>
                <span className="v o" dangerouslySetInnerHTML={{ __html: power || "—" }} />
              </div>
              <div className="var-spec">
                <span className="k">— Specifiek</span>
                <span className="v" dangerouslySetInnerHTML={{ __html: specific || "—" }} />
              </div>
              <div className="var-spec">
                <span className="k">— Behuizing</span>
                <span className="v" dangerouslySetInnerHTML={{ __html: housing || "—" }} />
              </div>
              <div className="var-spec">
                <span className="k">— Use-case</span>
                <span className="v txt" dangerouslySetInnerHTML={{ __html: useCase || "—" }} />
              </div>
            </div>
            <div className="var-cta">
              <a href="#cta" className="btn primary">Aanvraag deze variant <span className="arrow">→</span></a>
              <a href="#" className="btn ghost">Datasheet PDF</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============== SPECS (Section 6) — Card Grid Dense ==============
// Pakt 3 representatieve modellen uit product.models — middelste = "POPULAIR"
const Specs = ({ product }) => {
  const all = product.models || [];
  // pick 3: first, middle, last (or all if fewer)
  let picks;
  if (all.length >= 3) {
    picks = [all[0], all[Math.floor(all.length / 2)], all[all.length - 1]];
  } else {
    picks = all.slice(0, 3);
  }
  // common spec rows pulled from product.specs (k/v pairs)
  const sp = product.specs || [];
  const findSpec = (re) => {
    const m = sp.find((s) => re.test(s.k));
    return m ? m.v : "";
  };
  const ipRow = findSpec(/behuizing|housing|ip/i) || "IP54";
  const tempRow = findSpec(/temp|operating/i) || "−20 / +50 °C";
  const warrRow = findSpec(/garantie|warranty|inzetduur/i) || "10 jaar";

  return (
    <section data-screen-label={`P · ${product.name} · 06 Specs`}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="kicker"><span className="bar"></span>06 — Specificaties</div>
            <h2 className="h2">{product.specsHead}</h2>
          </div>
          <p className="lead">{product.specsLead}</p>
        </div>
        <div className="sku-grid">
          {picks.map((m, i) => {
            const isMid = i === 1 && picks.length === 3;
            return (
              <div className={`sku-card${isMid ? " is-pop" : ""}`} key={i}>
                {isMid && <div className="sku-pop">POPULAIR</div>}
                <div className="sku-head">
                  <div className="sku-ix">SKU 0{i + 1}</div>
                  <h4 className="sku-name">{m[0]}</h4>
                  <div className="sku-use">{(m[1] || "").toUpperCase()}</div>
                </div>
                <div className="sku-rows">
                  {[
                    ["Capaciteit / Output", m[2]],
                    ["Vermogen / Battery", m[3]],
                    ["Specifiek", m[4]],
                    ["Behuizing", m[5] || ipRow],
                    ["Temp", tempRow],
                  ].map(([k, v], j) => (
                    <div className="sku-row" key={j}>
                      <span className="sku-k">{k}</span>
                      <span className="sku-v" dangerouslySetInnerHTML={{ __html: v || "—" }} />
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
        <div className="sku-fineprint">
          <span>{all.length} configuraties beschikbaar</span>
          <span>·</span>
          <span>PDF datasheet op aanvraag</span>
          <span>·</span>
          <span>Garantie: {warrRow}</span>
        </div>
      </div>
    </section>
  );
};

// ============== ECOSYSTEM (Section 7) — Constellation Map (V19) ==============
const ECO_FAMILY = [
  { id: "core", code: "CORE", t: "Core", role: "Storage", desc: "Modulaire BESS · 40 kWh – 2 MWh" },
  { id: "fusion", code: "FUSN", t: "Fusion", role: "Hybrid", desc: "Hybrid skid · genset + battery" },
  { id: "bridge", code: "BRDG", t: "Bridge", role: "Bridge", desc: "Net-tijdelijke aansluiting" },
  { id: "grid", code: "GRID", t: "Grid", role: "Grid", desc: "Vaste netinfrastructuur" },
  { id: "forge", code: "FRGE", t: "Forge", role: "Charge", desc: "EV-laadcluster · 50–400 kW" },
  { id: "beacon", code: "BCON", t: "Beacon", role: "Light", desc: "Mobile lighting · solar-first" },
  { id: "ray", code: "RAY", t: "Ray", role: "Solar", desc: "Solar harvest · direct-DC" },
];
// 6 omringende posities (60° intervallen) — actief product zit altijd in centrum
const ECO_ORBIT = [
  { x: 50, y: 14 }, { x: 84, y: 30 },
  { x: 86, y: 72 }, { x: 50, y: 88 },
  { x: 14, y: 72 }, { x: 16, y: 30 },
];
const Ecosystem = ({ product }) => {
  const others = ECO_FAMILY.filter((p) => p.id !== product.id).slice(0, 6);
  const hub = ECO_FAMILY.find((p) => p.id === product.id) || { code: product.family, t: product.name };
  return (
    <section data-screen-label={`P · ${product.name} · 07 Ecosystem`}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="kicker"><span className="bar"></span>07 — Ecosystem</div>
            <h2 className="h2">Werkt zelfstandig.<br/>Schaalt als systeem.</h2>
          </div>
          <p className="lead">{product.ecoNote} {product.name} klikt in op WattIQ Control en werkt samen met andere modules.</p>
        </div>

        <div className="constellation">
          {/* tiny background stars */}
          <div className="stars" aria-hidden="true">
            {Array.from({ length: 80 }).map((_, i) => {
              const x = (i * 37) % 100;
              const y = (i * 53) % 100;
              const s = ((i * 7) % 3) + 1;
              return <span key={i} style={{ left: `${x}%`, top: `${y}%`, width: s, height: s }} />;
            })}
          </div>

          {/* connecting lines from hub to others */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="cnst-lines" aria-hidden="true">
            {others.map((_, i) => {
              const o = ECO_ORBIT[i];
              return (
                <line key={i} x1="50" y1="50" x2={o.x} y2={o.y}
                  stroke="rgba(255,107,43,.28)" strokeWidth=".15" vectorEffect="non-scaling-stroke" />
              );
            })}
          </svg>

          {/* hub (active product, big orange) */}
          <div className="cnst-node cnst-hub" style={{ left: "50%", top: "50%" }}>
            <div className="cn-dot cn-dot--hub" />
            <div className="cn-code cn-code--hub">{hub.code}</div>
            <div className="cn-role">{hub.role || "Hub"}</div>
          </div>

          {/* orbiting nodes */}
          {others.map((p, i) => {
            const o = ECO_ORBIT[i];
            return (
              <div key={p.id} className="cnst-node" style={{ left: `${o.x}%`, top: `${o.y}%` }}>
                <div className="cn-dot" />
                <div className="cn-code">{p.code}</div>
                <div className="cn-role">{p.role}</div>
              </div>
            );
          })}

          {/* footer caption */}
          <div className="cnst-foot">
            <span>● MAP · 7 PRODUCTS · ONE PLATFORM</span>
            <span>{hub.code} ★ ACTIVE</span>
          </div>
        </div>

        {/* legend grid below */}
        <div className="hub-legend">
          {others.map((p) => (
            <div className="hub-legend-item" key={p.id}>
              <div className="hl-code">{p.code}</div>
              <div className="hl-name">WattIQ {p.t}</div>
              <div className="hl-desc">{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============== RESULTS (Section 8) — Live Dashboard ==============
const Results = ({ product }) => {
  // pak 4 meest indrukwekkende uit 6 — eerste 4 voldoet
  const metrics = product.results.slice(0, 4);
  const sites = ["ALMERE-DC1 99.98%", "SCHIPHOL-B 99.91%", "R'DAM-FEST 100%", "UTRECHT-S2 99.87%", "ANTWERPEN-P3 99.94%"];
  return (
    <section data-screen-label={`P · ${product.name} · 08 Results`}>
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="kicker"><span className="bar"></span>08 — Resultaten</div>
            <h2 className="h2">{product.resultsHead}</h2>
          </div>
          <p className="lead">Operationele cijfers per product. Gemeten op real-world deployments.</p>
        </div>
        <div className="dash">
          <div className="dash-head">
            <div className="dash-status">
              <span className="dash-dot" />
              <span>LIVE · ALL {product.name.replace("WattIQ ", "").toUpperCase()} DEPLOYMENTS</span>
            </div>
            <div className="dash-meta">UPDATED 14:32 · NL 21 · BE 7</div>
          </div>
          <div className="dash-metrics">
            {metrics.map((m, i) => (
              <div className="dm" key={i}>
                <div className="dm-k">{m.title.toUpperCase()}</div>
                <div className="dm-v" dangerouslySetInnerHTML={{ __html: m.big }} />
                <svg viewBox="0 0 100 24" className="dm-spark">
                  <polyline fill="none" stroke="#FF6B2B" strokeWidth="1.5"
                    points={i % 2 ? "0,18 14,16 28,12 42,14 56,8 70,10 84,4 100,2" : "0,16 14,18 28,14 42,12 56,10 70,8 84,6 100,4"} />
                  <polyline fill="rgba(255,107,43,.1)" stroke="none"
                    points="0,18 14,16 28,12 42,14 56,8 70,10 84,4 100,2 100,24 0,24" />
                </svg>
                <div className="dm-trend">▲ TRENDING UP · 12W</div>
                <div className="dm-body">{m.body}</div>
              </div>
            ))}
          </div>
          <div className="dash-ticker">
            {sites.map((s, i) => <span key={i}>● {s}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============== CTA (Section 9) ==============
const CTA = ({ product }) => (
  <section id="cta" data-screen-label={`P · ${product.name} · 09 CTA`}>
    <div className="situaties-final">
      <section className="opl-shell bg-paper">
        <div className="opl-wrap">
          <div className="sit-tp-hd">
            <div className="sit-tp-ix"><span className="bar"></span>09 — Twee paden</div>
            <h2 className="sit-tp-h">Wat past bij <em>nu</em>?</h2>
            <p className="sit-tp-lead">Twee manieren om verder te gaan met {product.name}. Eén voor mensen die concreet zoeken; één voor mensen die eerst willen begrijpen.</p>
          </div>
          <div className="sit-tp-paths">
            <a href="#" className="sit-tp-path primary">
              <div className="ix">● PAD A · CONCREET</div>
              <h3>Ik heb een<br/>locatie in beeld.</h3>
              <p>Stuur de basisgegevens — type project, vermogen, duur. Wij komen binnen 24u terug met een eerste configuratie en richtprijs.</p>
              <ul>
                <li>Quick-scan binnen 24u</li>
                <li>Eerste configuratie + richtprijs</li>
                <li>Inplannen technisch bezoek</li>
                <li>Vrijblijvend, geen verplichting</li>
              </ul>
              <span className="cta-btn">START QUICK-SCAN <span className="arr">→</span></span>
            </a>
            <a href="#" className="sit-tp-path">
              <div className="ix">● PAD B · ORIËNTEREND</div>
              <h3>Ik wil eerst<br/>begrijpen.</h3>
              <p>30 minuten met een van onze engineers. Geen sales-praat — een werksessie waarin we je situatie doorlopen en de mogelijkheden uitleggen.</p>
              <ul>
                <li>30 minuten · video of locatie</li>
                <li>Met engineer, niet account-mgr</li>
                <li>Doorlopen van vergelijkbare projecten</li>
                <li>Geen verplichting tot vervolg</li>
              </ul>
              <span className="cta-btn">PLAN 30-MIN GESPREK <span className="arr">→</span></span>
            </a>
          </div>
        </div>
      </section>
    </div>
  </section>
);

// ============== PICKER ==============
const Picker = ({ products, current, onPick }) => (
  <div className="picker">
    <div className="picker-inner">
      <div className="picker-label">Productfamilies →</div>
      <div className="picker-list">
        {products.map((p) => (
          <div
            key={p.id}
            className={`picker-item${current === p.id ? " active" : ""}`}
            onClick={() => onPick(p.id)}
          >
            <span className="ix">{p.family}</span>
            <span>WattIQ {p.name.replace("WattIQ ", "")}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ============== TICKER ==============
const Ticker = ({ product }) => (
  <div className="ticker">
    <span className="dot"></span>
    <span>WIQ-PRODUCT-DOC v3.4</span>
    <span>·</span>
    <span>{product.family} · {product.name.toUpperCase()}</span>
    <span>·</span>
    <span>{product.category}</span>
    <span>·</span>
    <span>EMS-INTEGRATED</span>
    <span>·</span>
    <span>NL-ROTTERDAM</span>
  </div>
);

// ============== APP ==============
const ProductDetailApp = () => {
  const products = window.WATTIQ_PRODUCTS;
  const [currentId, setCurrentId] = useState(products[0].id);

  // Allow URL hash to drive product
  useEffect(() => {
    const fromHash = window.location.hash.replace("#", "");
    if (fromHash && products.find((p) => p.id === fromHash)) {
      setCurrentId(fromHash);
    }
    const handler = () => {
      const h = window.location.hash.replace("#", "");
      if (h && products.find((p) => p.id === h)) setCurrentId(h);
    };
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);

  const product = useMemo(
    () => products.find((p) => p.id === currentId) || products[0],
    [currentId]
  );

  const handlePick = (id) => {
    setCurrentId(id);
    window.history.replaceState(null, "", `#${id}`);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div className="pdp" data-product={product.id}>
      <Ticker product={product} />
      <Picker products={products} current={currentId} onPick={handlePick} />
      <Hero product={product} />
      <Problem product={product} />
      <Flow product={product} />
      <Features product={product} />
      <Scenario product={product} />
      <Variants product={product} />
      <Specs product={product} />
      <Ecosystem product={product} />
      <Results product={product} />
      <CTA product={product} />
    </div>
  );
};

window.ProductDetailApp = ProductDetailApp;