// Medway MSS — Products section (3 real categories: Réactifs / Groupage sanguin / Radiologie)

function CategorySpecimen({ category, accent }) {
  const ink = 'var(--fg-1)';
  const sw = 2;
  const wrap = (children) => (
    <svg viewBox="0 0 220 180" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">{children}</svg>
  );
  switch (category) {
    case 'reaktif':
      // Lab reagent / biochemistry — three vials of varying fill levels
      return wrap(<>
        <rect x="40"  y="40" width="32" height="105" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="94"  y="40" width="32" height="105" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="148" y="40" width="32" height="105" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="40"  y="92"  width="32" height="53" fill={accent} />
        <rect x="94"  y="72"  width="32" height="73" fill={accent} opacity="0.6" />
        <rect x="148" y="115" width="32" height="30" fill={accent} opacity="0.4" />
        <line x1="30" y1="145" x2="190" y2="145" stroke={ink} strokeWidth="2" />
        <circle cx="56"  cy="30" r="4" fill={ink} />
        <circle cx="110" cy="30" r="4" fill={ink} />
        <circle cx="164" cy="30" r="4" fill={ink} />
      </>);
    case 'kan_gruplama':
      // Blood-grouping gel card — 8-well rack with coloured reactions
      return wrap(<>
        <rect x="20" y="50" width="180" height="80" fill="none" stroke={ink} strokeWidth={sw} />
        {[0,1,2,3,4,5,6,7].map(i => (
          <g key={i}>
            <rect x={30 + i*20} y={60} width="16" height="62" fill="none" stroke={ink} strokeWidth="1" />
            <rect x={30 + i*20} y={60 + (i%4)*10} width="16" height={62 - (i%4)*10}
                  fill={accent} opacity={0.5 + (i%2)*0.4} />
          </g>
        ))}
        <line x1="14" y1="148" x2="206" y2="148" stroke={ink} strokeWidth="2" />
      </>);
    case 'radyoloji':
      // Radiology — vertical detector column + table + control monitor
      return wrap(<>
        <rect x="38"  y="40" width="20" height="100" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="38"  y="62" width="20" height="22" fill={accent} />
        <rect x="72"  y="92" width="80" height="14" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="80"  y1="106" x2="80"  y2="140" stroke={ink} strokeWidth={sw} />
        <line x1="144" y1="106" x2="144" y2="140" stroke={ink} strokeWidth={sw} />
        <line x1="30"  y1="145" x2="190" y2="145" stroke={ink} strokeWidth="2" />
        <rect x="160" y="56" width="28" height="22" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="166" y1="64" x2="182" y2="64" stroke={ink} strokeWidth="1" />
        <line x1="166" y1="70" x2="178" y2="70" stroke={ink} strokeWidth="1" />
        <line x1="174" y1="78" x2="174" y2="92" stroke={ink} strokeWidth={sw} />
      </>);
    default:
      return null;
  }
}

function Products({ accent, t, lang }) {
  const isMobile = useIsMobile();

  // Per-language highlight items per category.
  const highlightsByLang = {
    fr: {
      reaktif:      ['Biochimie : glucose, HbA1c, HDL/LDL, GOT, GPT', 'Immunologie : CRP, ASO, RF, ferritine', 'Hématologie : diluants, lyse, nettoyants', 'Contrôles et calibrateurs multiparamètres'],
      kan_gruplama: ['Groupage ABO/Rh — Forward & Reverse', 'Coombs direct & indirect (DAT / IAT)', 'Phénotypage Rh + Coombs nouveau-né', 'Centrifugeuse, incubateur, lecteur de cartes gel'],
      radyoloji:    ['Systèmes DR fixes — sol et plafond', 'Systèmes DR mobiles 100 mA / 500 mA', 'Arceau C-Arm avec détecteurs plats', 'Systèmes analogiques et générateurs X'],
    },
    en: {
      reaktif:      ['Biochemistry: Glucose, HbA1c, HDL/LDL, GOT, GPT', 'Immunology: CRP, ASO, RF, Ferritin', 'Haematology: diluents, lyse, cleaners', 'Multi-parameter controls & calibrators'],
      kan_gruplama: ['ABO/Rh grouping — Forward & Reverse', 'Direct & indirect Coombs (DAT / IAT)', 'Rh phenotyping & newborn Coombs', 'Gel-card centrifuge, incubator, reader'],
      radyoloji:    ['Floor- and ceiling-mounted DR systems', 'Mobile DR systems 100 mA / 500 mA', 'C-Arm with flat-panel detectors', 'Analog systems & X-ray generators'],
    },
    tr: {
      reaktif:      ['Biyokimya: glukoz, HbA1c, HDL/LDL, GOT, GPT', 'İmmünoloji: CRP, ASO, RF, ferritin', 'Hematoloji: diluentler, lyse, temizlik', 'Çok parametreli kontrol ve kalibratörler'],
      kan_gruplama: ['ABO/Rh gruplama — Forward & Reverse', 'Direkt ve indirekt Coombs (DAT / IAT)', 'Rh fenotiplendirme ve yenidoğan Coombs', 'Jel kart santrifüj, inkübatör, okuyucu'],
      radyoloji:    ['Yer ve tavan tipi DR sistemleri', '100 mA / 500 mA Mobil DR sistemler', 'C-Kollu sistem ve flat-panel dedektör', 'Analog sistemler ve X-ray jeneratörler'],
    },
  };
  const il = highlightsByLang[lang] || highlightsByLang.fr;

  const cats = [
    { id: 'reaktif',      n: '01', href: '/diagnostic-reagents', t: t('products.cat.reaktif.t'), sub: t('products.cat.reaktif.s'), items: il.reaktif },
    { id: 'kan_gruplama', n: '02', href: '/blood-grouping',       t: t('products.cat.kan.t'),     sub: t('products.cat.kan.s'),     items: il.kan_gruplama },
    { id: 'radyoloji',    n: '03', href: '/radiology-equipment',  t: t('products.cat.rad.t'),     sub: t('products.cat.rad.s'),     items: il.radyoloji },
  ];

  return (
    <section id="products" data-screen-label="03 Products" style={{
      padding: isMobile ? '72px 20px' : '120px 32px',
      background: `linear-gradient(180deg, ${accent}0a 0%, var(--bg) 34%, var(--bg) 100%)`,
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 28 : 64,
          marginBottom: isMobile ? 48 : 72,
        }}>
          <div>
            <Eyebrow accent={accent}>{t('products.eyebrow')}</Eyebrow>
            <div style={{ marginTop: 16, fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-3)' }}>
              <Num size={13}>§ 02 / 04</Num>
            </div>
          </div>
          <div>
            <h2 style={{
              margin: 0,
              fontFamily: 'Inter, sans-serif',
              fontSize: 'clamp(28px, 4.6vw, 64px)',
              fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.035em',
              color: 'var(--fg-1)', maxWidth: 980,
            }}>
              {t('products.title.1')} <span style={{ color: 'var(--fg-3)' }}>{t('products.title.2')}</span>
            </h2>
            <p style={{
              margin: isMobile ? '20px 0 0' : '28px 0 0', maxWidth: 700,
              fontFamily: 'Inter, sans-serif', fontSize: 16.5, lineHeight: 1.6,
              color: 'var(--fg-2)',
            }}>{t('products.intro')}</p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 16 : 24,
        }}>
          {cats.map((c) => (
            <a key={c.id} href={c.href} style={{
              border: `1px solid ${accent}22`,
              background: `linear-gradient(180deg, var(--bg) 0%, ${accent}08 100%)`,
              padding: 24,
              textDecoration: 'none',
              color: 'inherit',
              display: 'flex',
              flexDirection: 'column',
              transition: 'border-color 200ms ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--fg-1)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}
            >
              <div style={{
                width: '100%', aspectRatio: '11/9',
                background: `linear-gradient(135deg, var(--gray-50), ${accent}10)`,
                border: `1px solid ${accent}24`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 24, boxSizing: 'border-box',
              }}>
                <CategorySpecimen category={c.id} accent={accent} />
              </div>
              <div style={{ marginTop: 24, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <Num size={11}>{c.n} —</Num>
                <Num size={11}>Cat. {c.n}</Num>
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 500,
                letterSpacing: '-0.02em', color: 'var(--fg-1)', lineHeight: 1.15,
              }}>{c.t}</div>
              <div style={{
                marginTop: 8,
                fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.5,
                color: 'var(--fg-3)',
              }}>{c.sub}</div>
              <div style={{
                marginTop: 20, paddingTop: 16,
                borderTop: '1px solid var(--border)',
                display: 'flex', flexDirection: 'column', gap: 6,
                flex: 1,
              }}>
                {c.items.map((it) => (
                  <div key={it} style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-2)',
                    display: 'flex', alignItems: 'flex-start', gap: 8,
                  }}>
                    <span style={{ width: 4, height: 4, marginTop: 7, background: accent, flexShrink: 0 }} />
                    {it}
                  </div>
                ))}
              </div>
              <div style={{
                marginTop: 20, paddingTop: 14,
                borderTop: '1px solid var(--border-muted)',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontFamily: 'Inter, sans-serif', fontSize: 12.5, fontWeight: 500,
                color: 'var(--fg-1)', letterSpacing: '0.02em',
              }}>
                {t('products.catalog.cta')}
                <I name="arrow-up-right" size={13} stroke={1.75} />
              </div>
            </a>
          ))}
        </div>

        <div style={{
          marginTop: isMobile ? 32 : 48,
          padding: isMobile ? '20px 20px' : '28px 32px',
          background: `linear-gradient(90deg, ${accent}12, var(--gray-50) 52%, ${accent}0c)`,
          border: `1px solid ${accent}24`,
          display: 'flex', alignItems: isMobile ? 'flex-start' : 'center',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 16 : 24,
        }}>
          <I name="file-text" size={20} stroke={1.5} />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500, color: 'var(--fg-1)' }}>
              {t('products.catalog.title')}
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-3)' }}>
              {t('products.catalog.sub')}
            </div>
          </div>
          <a href="/catalogue" style={{
            padding: '11px 18px',
            fontFamily: 'Inter, sans-serif', fontSize: 13.5, fontWeight: 500,
            color: 'var(--fg-1)', background: 'transparent',
            border: '1px solid var(--fg-1)', borderRadius: 6,
            textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            alignSelf: isMobile ? 'stretch' : 'auto',
            justifyContent: 'center',
          }}>
            {t('products.catalog.cta')} <I name="arrow-up-right" size={14} stroke={1.75} />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Products });