// Products section — bilingual via window.useI18n. Catalog is structured as a
// list of stable product IDs; the i18n layer supplies the strings per locale.

const { useI18n: useI18nProd } = window;

// Real PeopleLink product photography hotlinked from peoplelinkvc.com. Falls
// back to geometric SVG art for products without an upstream image.
const PRODUCT_IMG = {
  'panel':        'https://www.peoplelinkvc.com/images/webp-images/Video%20Conferencing%20Endpoints.webp',
  'tracking':     'https://www.peoplelinkvc.com/images/webp-images/Camera%20Conferencing%20Products.webp',
  'cam4k':        'https://www.peoplelinkvc.com/images/webp-images/Camera%20Conferencing%20Products.webp',
  'ceiling':      'https://www.peoplelinkvc.com/images/webp-images/Audio%20Conferencing%20Products_V2.webp',
  'huddle':       'https://www.peoplelinkvc.com/images/webp-images/Audio%20Conferencing%20Products_V2.webp',
  'inclass':      'https://www.peoplelinkvc.com/images/webp-images/case-studies/learning-made-easier.webp',
};

// Catalog — only stable data here (id, art kind, sector tags). Localized
// strings (nm, en, desc, cat, catEn) come from t('products.<id>.<field>').
const CATALOG = [
  // Education
  { id: 'panel',    art: 'panel',           tagsKey: ['edu', 'biz'] },
  { id: 'inclass',  art: 'platform-class',  tagsKey: ['edu'], clickable: 'inclass' },
  { id: 'epodium',  art: 'podium',          tagsKey: ['edu', 'biz'] },
  { id: 'tracking', art: 'ptz',             tagsKey: ['edu'] },
  { id: 'ceiling',  art: 'ceiling',         tagsKey: ['edu', 'biz'] },
  // Healthcare
  { id: 'inclinic', art: 'platform-clinic', tagsKey: ['health'] },
  { id: 'hybrid',   art: 'surg',            tagsKey: ['health'] },
  { id: 'rpm',      art: 'rpm',             tagsKey: ['health'] },
  { id: 'ems',      art: 'ems',             tagsKey: ['health'] },
  { id: 'cam4k',    art: 'ptz',             tagsKey: ['health'] },
  // Business
  { id: 'huddle',   art: 'huddle',          tagsKey: ['biz'] },
  { id: 'outdoor',  art: 'outdoor',         tagsKey: ['biz'] },
];

function ProductArt({ kind }) {
  const stroke = "currentColor";
  const acc = "var(--accent)";
  switch(kind) {
    case 'ptz':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <rect x="30" y="55" width="100" height="55" rx="10" stroke={stroke} strokeWidth="1.2" fill="none" opacity="0.5"/>
          <circle cx="130" cy="82" r="34" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <circle cx="130" cy="82" r="22" stroke={stroke} strokeWidth="1" fill="var(--bg-0)"/>
          <circle cx="130" cy="82" r="10" fill={acc} opacity="0.8"/>
          <circle cx="125" cy="78" r="3" fill="white" opacity="0.6"/>
          <rect x="40" y="44" width="14" height="4" rx="1" fill={acc}/>
          <line x1="80" y1="125" x2="80" y2="135" stroke={stroke} strokeWidth="1"/>
          <rect x="55" y="135" width="50" height="3" rx="1" stroke={stroke} strokeWidth="1" fill="none"/>
        </svg>
      );
    case 'platform-clinic':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <rect x="20" y="25" width="160" height="100" rx="10" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <rect x="20" y="25" width="160" height="20" rx="10" fill={stroke} opacity="0.06"/>
          <circle cx="32" cy="35" r="3" fill={acc}/>
          <circle cx="44" cy="35" r="3" fill={stroke} opacity="0.3"/>
          <rect x="35" y="60" width="60" height="50" rx="4" stroke={stroke} strokeWidth="1" fill="none" opacity="0.4"/>
          <circle cx="65" cy="80" r="10" stroke={stroke} strokeWidth="1" fill="none" opacity="0.6"/>
          <path d="M55 95 Q65 85 75 95" stroke={stroke} strokeWidth="1" fill="none" opacity="0.6"/>
          <rect x="105" y="60" width="60" height="6" rx="2" fill={acc} opacity="0.6"/>
          <rect x="105" y="72" width="45" height="3" rx="1" fill={stroke} opacity="0.4"/>
          <rect x="105" y="80" width="55" height="3" rx="1" fill={stroke} opacity="0.4"/>
          <path d="M105 100 L115 100 L120 90 L125 110 L130 95 L135 100 L165 100" stroke={acc} strokeWidth="1.4" fill="none"/>
        </svg>
      );
    case 'platform-class':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <rect x="15" y="20" width="170" height="110" rx="8" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <rect x="25" y="32" width="100" height="50" rx="3" stroke={stroke} strokeWidth="1" fill="none" opacity="0.4"/>
          <text x="35" y="55" fontSize="14" fill={acc} fontFamily="JetBrains Mono" fontWeight="500" direction="ltr">∫f(x)dx</text>
          <text x="35" y="72" fontSize="8" fill={stroke} fontFamily="JetBrains Mono" opacity="0.5" direction="ltr">= F(x) + C</text>
          {[0,1,2,3].map(i => (
            <g key={i}>
              <rect x={25 + i*28} y={95} width={22} height={22} rx={2} stroke={stroke} strokeWidth="0.8" fill="none" opacity="0.5"/>
              <circle cx={36 + i*28} cy={104} r={3} fill={i===0 ? acc : stroke} opacity={i===0 ? 0.8 : 0.3}/>
              <rect x={29 + i*28} y={109} width={14} height={2} rx={1} fill={stroke} opacity="0.3"/>
            </g>
          ))}
          <rect x="142" y="40" width="36" height="36" rx="3" fill={acc} opacity="0.15"/>
          <circle cx="160" cy="58" r="6" fill={acc}/>
        </svg>
      );
    case 'podium':
      return (
        <svg viewBox="0 0 200 150" width="78%" height="78%">
          <path d="M70 35 L130 35 L140 60 L60 60 Z" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <rect x="68" y="40" width="64" height="14" rx="1" fill="var(--bg-0)" stroke={acc} strokeWidth="0.8"/>
          <path d="M60 60 L66 130 L134 130 L140 60 Z" stroke={stroke} strokeWidth="1.2" fill="var(--bg-3)"/>
          <line x1="70" y1="75" x2="130" y2="75" stroke={stroke} opacity="0.3"/>
          <line x1="72" y1="90" x2="128" y2="90" stroke={stroke} opacity="0.2"/>
          <circle cx="100" cy="28" r="3" fill={acc}/>
          <line x1="100" y1="28" x2="100" y2="35" stroke={stroke}/>
        </svg>
      );
    case 'huddle':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <ellipse cx="100" cy="100" rx="78" ry="22" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <ellipse cx="100" cy="98" rx="78" ry="22" stroke={stroke} strokeWidth="1" fill="var(--bg-3)"/>
          {[40, 70, 100, 130, 160].map((x, i) => (
            <g key={i}>
              <circle cx={x} cy={i % 2 === 0 ? 78 : 82} r={5} fill={stroke} opacity="0.5"/>
              <rect x={x-6} y={i % 2 === 0 ? 84 : 88} width={12} height={6} rx={3} fill={stroke} opacity="0.4"/>
            </g>
          ))}
          <rect x="80" y="30" width="40" height="22" rx="3" stroke={acc} strokeWidth="1.2" fill="var(--bg-0)"/>
          <circle cx="100" cy="41" r="5" fill={acc} opacity="0.9"/>
        </svg>
      );
    case 'outdoor':
      return (
        <svg viewBox="0 0 200 150" width="84%" height="84%">
          <rect x="20" y="20" width="160" height="80" rx="2" stroke={stroke} strokeWidth="1.2" fill="var(--bg-3)"/>
          {Array.from({length: 80}).map((_, i) => {
            const r = Math.floor(i / 10), c = i % 10;
            return <circle key={i} cx={28 + c*16} cy={28 + r*10} r={1.6}
              fill={acc} opacity={0.2 + ((c + r) % 4) * 0.18}/>;
          })}
          <rect x="95" y="100" width="10" height="35" fill={stroke} opacity="0.5"/>
          <rect x="80" y="133" width="40" height="4" rx="1" fill={stroke} opacity="0.5"/>
        </svg>
      );
    case 'surg':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <rect x="20" y="30" width="160" height="85" rx="6" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <rect x="28" y="38" width="144" height="69" rx="2" fill="var(--bg-0)"/>
          <circle cx="100" cy="72" r="22" stroke={acc} strokeWidth="1.4" fill="none"/>
          <line x1="78" y1="72" x2="92" y2="72" stroke={acc} strokeWidth="0.8"/>
          <line x1="108" y1="72" x2="122" y2="72" stroke={acc} strokeWidth="0.8"/>
          <line x1="100" y1="50" x2="100" y2="64" stroke={acc} strokeWidth="0.8"/>
          <line x1="100" y1="80" x2="100" y2="94" stroke={acc} strokeWidth="0.8"/>
          <path d="M38 100 L48 100 L54 90 L60 110 L66 95 L72 100 L162 100" stroke={acc} strokeWidth="1" fill="none" opacity="0.7"/>
          <text x="36" y="48" fontSize="6" fill={acc} fontFamily="JetBrains Mono" direction="ltr">REC</text>
          <circle cx="48" cy="46" r="2" fill={acc}/>
          <text x="146" y="48" fontSize="6" fill={stroke} fontFamily="JetBrains Mono" opacity="0.5" direction="ltr">CAM-A</text>
          <circle cx="100" cy="130" r="3" fill={acc}/>
        </svg>
      );
    case 'rpm':
      return (
        <svg viewBox="0 0 200 150" width="82%" height="82%">
          <rect x="15" y="20" width="170" height="110" rx="8" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
          <rect x="22" y="28" width="156" height="74" rx="3" fill="var(--bg-0)" stroke={stroke} strokeWidth="0.5" opacity="0.6"/>
          <path d="M55 50 q-6 -8 -14 0 q-8 8 14 22 q22 -14 14 -22 q-8 -8 -14 0 z" fill={acc} opacity="0.85"/>
          <text x="80" y="58" fontSize="18" fill={stroke} fontFamily="Rubik" fontWeight="700" direction="ltr">72</text>
          <text x="108" y="58" fontSize="7" fill={stroke} fontFamily="JetBrains Mono" opacity="0.5" direction="ltr">bpm</text>
          <path d="M28 88 L48 88 L54 82 L58 96 L62 70 L66 102 L70 88 L88 88 L96 88 L100 82 L104 96 L108 70 L112 102 L116 88 L132 88 L140 88 L144 82 L148 96 L152 70 L156 102 L160 88 L172 88"
                stroke={acc} strokeWidth="1.4" fill="none"/>
          {[0,1,2].map(i => (
            <g key={i}>
              <rect x={28 + i*52} y={110} width={44} height={14} rx={2} stroke={stroke} strokeWidth="0.5" fill="none" opacity="0.4"/>
              <circle cx={36 + i*52} cy={117} r={3} fill={i===0 ? acc : stroke} opacity={i===0 ? 0.85 : 0.3}/>
              <rect x={44 + i*52} y={113} width={22} height={2} rx={1} fill={stroke} opacity="0.3"/>
              <rect x={44 + i*52} y={117} width={16} height={2} rx={1} fill={stroke} opacity="0.3"/>
            </g>
          ))}
        </svg>
      );
    case 'ems':
      return (
        <svg viewBox="0 0 200 150" width="84%" height="84%">
          <g transform="translate(15, 60)">
            <rect x="0" y="10" width="48" height="32" rx="3" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
            <rect x="34" y="0" width="20" height="20" rx="2" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
            <circle cx="10" cy="44" r="5" stroke={stroke} strokeWidth="1.2" fill="var(--bg-1)"/>
            <circle cx="42" cy="44" r="5" stroke={stroke} strokeWidth="1.2" fill="var(--bg-1)"/>
            <rect x="14" y="18" width="14" height="14" rx="1" fill={acc} opacity="0.9"/>
            <line x1="21" y1="20" x2="21" y2="30" stroke="white" strokeWidth="2"/>
            <line x1="16" y1="25" x2="26" y2="25" stroke="white" strokeWidth="2"/>
          </g>
          <path d="M75 90 Q100 60 125 90" stroke={acc} strokeDasharray="3 3" strokeWidth="1.4" fill="none"/>
          <circle cx="100" cy="73" r="3" fill={acc}>
            <animate attributeName="opacity" values="0.3;1;0.3" dur="1.4s" repeatCount="indefinite"/>
          </circle>
          <g transform="translate(130, 50)">
            <path d="M0 40 L0 18 L25 4 L50 18 L50 40 Z" stroke={stroke} strokeWidth="1.2" fill="var(--bg-2)"/>
            <rect x="14" y="22" width="22" height="18" stroke={stroke} strokeWidth="0.8" fill="var(--bg-1)"/>
            <line x1="25" y1="26" x2="25" y2="36" stroke={acc} strokeWidth="2"/>
            <line x1="20" y1="31" x2="30" y2="31" stroke={acc} strokeWidth="2"/>
          </g>
          <text x="36" y="130" fontSize="7" fill={stroke} opacity="0.5" fontFamily="JetBrains Mono" direction="ltr">LIVE · 2-WAY · 6 FEEDS</text>
        </svg>
      );
    case 'ceiling':
      return (
        <svg viewBox="0 0 200 150" width="80%" height="80%">
          <rect x="22" y="22" width="156" height="106" rx="6" stroke={stroke} strokeWidth="1" fill="var(--bg-2)" opacity="0.5"/>
          <circle cx="100" cy="75" r="60" stroke={acc} strokeWidth="0.8" fill="none" opacity="0.18" strokeDasharray="2 4"/>
          <circle cx="100" cy="75" r="42" stroke={acc} strokeWidth="0.8" fill="none" opacity="0.28" strokeDasharray="2 4"/>
          <circle cx="100" cy="75" r="24" stroke={acc} strokeWidth="0.8" fill="none" opacity="0.4" strokeDasharray="2 4"/>
          <circle cx="100" cy="75" r="13" stroke={stroke} strokeWidth="1.4" fill="var(--bg-1)"/>
          <circle cx="100" cy="75" r="8" fill={acc}/>
          {[0, 60, 120, 180, 240, 300].map(deg => {
            const rad = deg * Math.PI / 180;
            const x = 100 + Math.cos(rad) * 6;
            const y = 75 + Math.sin(rad) * 6;
            return <circle key={deg} cx={x} cy={y} r={1.3} fill="white"/>;
          })}
          <text x="62" y="125" fontSize="7" fill={stroke} opacity="0.5" fontFamily="JetBrains Mono" direction="ltr">DANTE · POE · 8M PICKUP</text>
        </svg>
      );
    case 'panel':
      return (
        <svg viewBox="0 0 200 150" width="82%" height="82%">
          <rect x="15" y="20" width="170" height="105" rx="6" stroke={stroke} strokeWidth="1.4" fill="var(--bg-2)"/>
          <rect x="22" y="27" width="156" height="91" rx="2" stroke={stroke} strokeWidth="0.7" fill="var(--bg-0)" opacity="0.6"/>
          <path d="M40 95 L60 70 L80 80 L100 50 L120 65 L140 55 L160 75" stroke={acc} strokeWidth="1.6" fill="none"/>
          <circle cx="100" cy="50" r="3" fill={acc}/>
          <text x="35" y="115" fontSize="6" fill={stroke} opacity="0.4" fontFamily="JetBrains Mono" direction="ltr">4K · UHD · TOUCH</text>
          <rect x="92" y="130" width="16" height="3" rx="1" fill={stroke} opacity="0.3"/>
        </svg>
      );
    default:
      return null;
  }
}

function ProductsSection({ onExploreInClass }) {
  const { t } = useI18nProd();
  const [filter, setFilter] = React.useState('all');

  const filters = [
    { id: 'all', label: t('products.filter_all') },
    { id: 'health', label: t('products.filter_health') },
    { id: 'edu', label: t('products.filter_edu') },
    { id: 'biz', label: t('products.filter_biz') },
  ];
  const visible = CATALOG.filter(p => filter === 'all' || p.tagsKey.includes(filter));

  return (
    <section className="products-section shell" id="products">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('products.eyebrow')}</div>
          <h2 className="section-title">{t('products.title')}</h2>
        </div>
        <div className="prod-filter">
          {filters.map(f => (
            <button
              key={f.id}
              className={filter === f.id ? 'active' : ''}
              onClick={() => setFilter(f.id)}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>

      <div className="prod-grid">
        {visible.map(p => {
          const s = t(`products.${p.id}`);
          const isClickable = p.clickable === 'inclass';
          return (
            <article
              className={`prod-card ${isClickable ? 'is-clickable' : ''}`}
              key={p.id}
              onClick={isClickable ? onExploreInClass : undefined}
              role={isClickable ? 'button' : undefined}
              tabIndex={isClickable ? 0 : undefined}
              onKeyDown={isClickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onExploreInClass(); } } : undefined}
            >
              <div className="frame">
                {PRODUCT_IMG[p.id]
                  ? <img className="prod-photo" src={PRODUCT_IMG[p.id]} alt={s.en} loading="lazy" />
                  : <div className="pic"><ProductArt kind={p.art} /></div>}
              </div>
              <div className="body">
                <div className="cat">{s.catEn} · {s.cat}</div>
                <div className="nm">{s.nm}</div>
                <div className="en">{s.en}</div>
                <p className="desc">{s.desc}</p>
                <div className="foot">
                  <div className="sectors-pills">
                    {p.tagsKey.map(k => (
                      <span key={k} className="pill">{t(`products.tags.${k}`)}</span>
                    ))}
                  </div>
                  {isClickable && (
                    <span className="prod-cta">
                      {s.deep_label} <span className="arrow">→</span>
                    </span>
                  )}
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

window.ProductsSection = ProductsSection;