// Medway MSS — Catalogue page
// Consumes window.MEDWAY_CATALOGUE from public/catalogue/data.js

const ACCENT = '#1ea34d';

// ── Subcategory illustrations (Halo-style geometric specimens) ────────────────
function SubcatIllustration({ sub, accent = ACCENT }) {
  const ink = '#171717';
  const sw = 1.75;
  const wrap = (children) => (
    <svg viewBox="0 0 220 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">{children}</svg>
  );
  switch (sub) {
    case 'biochem':
      return wrap(<>
        <rect x="60" y="40" width="20" height="80" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="100" y="40" width="20" height="80" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="140" y="40" width="20" height="80" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="60" y="80"  width="20" height="40" fill={accent} />
        <rect x="100" y="70" width="20" height="50" fill={accent} opacity="0.6" />
        <rect x="140" y="95" width="20" height="25" fill={accent} opacity="0.4" />
        <line x1="50" y1="120" x2="170" y2="120" stroke={ink} strokeWidth="2" />
      </>);
    case 'hematology':
      return wrap(<>
        <circle cx="80" cy="80" r="22" fill="none" stroke={ink} strokeWidth={sw} />
        <circle cx="80" cy="80" r="8" fill={accent} />
        <circle cx="140" cy="60" r="14" fill="none" stroke={ink} strokeWidth={sw} />
        <circle cx="140" cy="60" r="5" fill={accent} opacity="0.7" />
        <circle cx="155" cy="100" r="18" fill="none" stroke={ink} strokeWidth={sw} />
        <circle cx="155" cy="100" r="7" fill={accent} opacity="0.5" />
        <line x1="40" y1="125" x2="180" y2="125" stroke={ink} strokeWidth="2" />
      </>);
    case 'control_calib':
      return wrap(<>
        <rect x="60" y="35" width="100" height="14" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="60" y="60" width="100" height="14" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="60" y="85" width="100" height="14" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="60" y="60" width="60" height="14" fill={accent} />
        <rect x="60" y="85" width="35" height="14" fill={accent} opacity="0.5" />
        <line x1="50" y1="115" x2="170" y2="115" stroke={ink} strokeWidth="2" />
      </>);
    case 'hplc_cleaning':
      return wrap(<>
        <path d="M70 30 L70 90 Q70 120 90 120 L130 120 Q150 120 150 90 L150 30 Z" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="78" y="85" width="64" height="20" fill={accent} />
        <line x1="70" y1="50" x2="150" y2="50" stroke={ink} strokeWidth="1" />
        <line x1="100" y1="20" x2="120" y2="20" stroke={ink} strokeWidth="3" />
      </>);
    case 'gel_cards':
      return wrap(<>
        <rect x="40" y="40" width="140" height="60" fill="none" stroke={ink} strokeWidth={sw} />
        {[0,1,2,3,4,5,6,7].map(i => (
          <g key={i}>
            <rect x={48 + i*16} y="48" width="12" height="36" fill="none" stroke={ink} strokeWidth="1" />
            <rect x={48 + i*16} y={48 + (i%3)*8} width="12" height={36 - (i%3)*8} fill={accent} opacity={0.5 + (i%2)*0.3} />
          </g>
        ))}
        <line x1="30" y1="115" x2="190" y2="115" stroke={ink} strokeWidth="2" />
      </>);
    case 'rbc':
      return wrap(<>
        {[60, 110, 160].map((cx,i) => (
          <g key={cx}>
            <circle cx={cx} cy="75" r="22" fill="none" stroke={ink} strokeWidth={sw} />
            <circle cx={cx} cy="75" r="14" fill={accent} opacity={0.4 + i*0.2} />
            <circle cx={cx} cy="75" r="6" fill={ink} />
          </g>
        ))}
      </>);
    case 'diluents':
      return wrap(<>
        <path d="M85 35 L85 50 L75 55 L75 110 Q75 120 85 120 L135 120 Q145 120 145 110 L145 55 L135 50 L135 35 Z" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="78" y="80" width="64" height="36" fill={accent} opacity="0.6" />
        <line x1="100" y1="35" x2="120" y2="35" stroke={ink} strokeWidth="3" />
      </>);
    case 'equipment':
      return wrap(<>
        <rect x="40" y="55" width="140" height="60" fill="none" stroke={ink} strokeWidth={sw} />
        <rect x="50" y="65" width="50" height="20" fill={accent} />
        <rect x="50" y="92" width="120" height="3" fill={ink} />
        <rect x="50" y="100" width="60" height="3" fill={ink} opacity="0.5" />
        <circle cx="155" cy="75" r="6" fill={accent} />
        <line x1="30" y1="125" x2="190" y2="125" stroke={ink} strokeWidth="2" />
      </>);
    default: // x-ray subcategories use photos, but keep a default
      return wrap(<>
        <rect x="60" y="40" width="100" height="80" fill="none" stroke={ink} strokeWidth={sw} />
        <line x1="80" y1="60" x2="140" y2="60" stroke={ink} strokeWidth="1" />
        <line x1="80" y1="75" x2="140" y2="75" stroke={ink} strokeWidth="1" />
        <line x1="80" y1="90" x2="140" y2="90" stroke={ink} strokeWidth="1" />
        <rect x="100" y="100" width="20" height="20" fill={accent} />
      </>);
  }
}

// ── Product card ──────────────────────────────────────────────────────────────
function ProductCard({ p, accent = ACCENT }) {
  const hasPhoto = !!p.image;
  return (
    <div style={{
      border: '1px solid var(--border)',
      background: 'var(--bg)',
      padding: hasPhoto ? 0 : 20,
      transition: 'border-color 200ms ease, transform 200ms ease',
      display: 'flex', flexDirection: 'column',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--fg-1)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}
    >
      {hasPhoto ? (
        <div style={{
          width: '100%', aspectRatio: '4/3',
          background: 'var(--gray-50)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          overflow: 'hidden',
          borderBottom: '1px solid var(--border)',
        }}>
          <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 12 }} loading="lazy" />
        </div>
      ) : (
        <div style={{
          width: '100%', aspectRatio: '11/8',
          background: 'var(--gray-50)',
          border: '1px solid var(--border-muted)',
          padding: 24, marginBottom: 16, boxSizing: 'border-box',
        }}>
          <SubcatIllustration sub={p.sub} accent={accent} />
        </div>
      )}
      <div style={{ padding: hasPhoto ? 20 : 0, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 500,
          letterSpacing: '-0.015em', color: 'var(--fg-1)', lineHeight: 1.25,
        }}>{p.name}</div>
        {p.method && (
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 13, lineHeight: 1.5,
            color: 'var(--fg-3)',
          }}>{p.method}</div>
        )}
        {p.refs && p.refs.length > 0 && (
          <div style={{
            marginTop: 'auto', paddingTop: 12,
            borderTop: '1px solid var(--border-muted)',
            display: 'flex', flexWrap: 'wrap', gap: 6,
          }}>
            {p.refs.slice(0, 6).map((r) => (
              <span key={r} style={{
                fontFamily: 'SF Mono, Monaco, monospace',
                fontSize: 10.5, fontWeight: 500,
                padding: '3px 7px',
                background: 'var(--gray-100)',
                color: 'var(--fg-2)',
                borderRadius: 3,
                letterSpacing: '0.02em',
              }}>{r}</span>
            ))}
            {p.refs.length > 6 && (
              <span style={{ fontSize: 11, color: 'var(--fg-3)', alignSelf: 'center' }}>
                +{p.refs.length - 6}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Subcategory section ───────────────────────────────────────────────────────
function SubcategorySection({ sub, products, t, lang, meta, accent = ACCENT }) {
  const isMobile = useIsMobile();
  const label = meta.subcategories[sub]?.[lang] || meta.subcategories[sub]?.fr || sub;
  return (
    <div style={{ marginBottom: isMobile ? 44 : 64 }}>
      <div style={{
        display: 'flex', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between',
        flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 8 : 0,
        paddingBottom: 16, marginBottom: 24,
        borderBottom: '1px solid var(--border)',
      }}>
        <h3 style={{
          margin: 0, fontFamily: 'Inter, sans-serif',
          fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
          color: 'var(--fg-1)',
        }}>{label}</h3>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 500,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          color: 'var(--fg-3)',
          fontVariantNumeric: 'tabular-nums',
        }}>
          {products.length} {t('cat.items')}
        </div>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
        gap: 16,
      }}>
        {products.map((p, i) => <ProductCard key={`${p.sub}-${i}-${p.name}`} p={p} accent={accent} />)}
      </div>
    </div>
  );
}

// ── Category section ──────────────────────────────────────────────────────────
function CategorySection({ cat, products, t, lang, meta, n }) {
  const isMobile = useIsMobile();
  const label = meta.labels[cat]?.[lang] || meta.labels[cat]?.fr || cat;
  // Preserve subcategory order from data (first-occurrence)
  const subOrder = [];
  for (const p of products) if (!subOrder.includes(p.sub)) subOrder.push(p.sub);

  return (
    <section id={`cat-${cat}`} style={{
      padding: isMobile ? '56px 20px' : '80px 32px',
      borderTop: '1px solid var(--border)',
      background: cat === 'kan_gruplama'
        ? `linear-gradient(180deg, var(--gray-50) 0%, ${ACCENT}0b 100%)`
        : `linear-gradient(180deg, var(--bg) 0%, ${ACCENT}08 100%)`,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 24 : 64, marginBottom: isMobile ? 40 : 56,
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)',
            }}>
              <span style={{ width: 18, height: 1, background: ACCENT, display: 'inline-block' }} />
              <span>§ 0{n}</span>
            </div>
            <div style={{
              marginTop: 16, fontFamily: 'Inter, sans-serif', fontSize: 13,
              color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums',
            }}>
              {products.length} {t('cat.items')}
            </div>
          </div>
          <h2 style={{
            margin: 0, fontFamily: 'Inter, sans-serif',
            fontSize: 'clamp(30px, 4.6vw, 56px)',
            fontWeight: 500, lineHeight: 1.06, letterSpacing: isMobile ? '-0.02em' : '-0.035em',
            color: 'var(--fg-1)',
          }}>{label}</h2>
        </div>

        {subOrder.map((sub) => {
          const list = products.filter((p) => p.sub === sub);
          if (!list.length) return null;
          return (
            <SubcategorySection key={sub} sub={sub} products={list} t={t} lang={lang} meta={meta} />
          );
        })}
      </div>
    </section>
  );
}

// ── Top bar (sticky) ──────────────────────────────────────────────────────────
function CatalogueTopBar({ t, lang, setLang, query, setQuery, scrollToCat }) {
  const [scrolled, setScrolled] = React.useState(false);
  const isMobile = useIsMobile();
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className="no-print" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'saturate(180%) blur(14px)',
      WebkitBackdropFilter: 'saturate(180%) blur(14px)',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'border-color 250ms ease',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: isMobile ? '12px 20px' : '14px 32px',
        display: 'flex', alignItems: 'center', gap: isMobile ? 10 : 18, flexWrap: 'wrap',
      }}>
        <a href="/" style={{ textDecoration: 'none', display: 'inline-flex' }}>
          <MedwayMark height={26} accent={ACCENT} />
        </a>
        <div style={{ width: 1, height: 22, background: 'var(--border)', display: isMobile ? 'none' : 'block' }} />
        <a href="/" style={{
          fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'var(--fg-2)',
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <I name="arrow-left" size={14} stroke={1.75} />
          {t('cat.back')}
        </a>
        <div style={{ flex: 1 }} />
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={t('cat.search.ph')}
          style={{
            padding: '9px 14px',
            border: '1px solid var(--border-strong)',
            borderRadius: 6,
            fontSize: 13, fontFamily: 'Inter, sans-serif',
            background: 'var(--bg)', color: 'var(--fg-1)',
            minWidth: isMobile ? 0 : 240, width: isMobile ? '100%' : 'auto', outline: 'none',
          }}
        />
        <LangSwitcher lang={lang} onChange={setLang} />
        <a href="/catalogue/medway-mss-catalogue.pdf" target="_blank" rel="noopener" style={{
          padding: '9px 14px',
          fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
          color: 'var(--fg-1)', background: 'transparent',
          border: '1px solid var(--fg-1)', borderRadius: 6,
          textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <I name="download" size={14} stroke={1.75} />
          {t('cat.download')}
        </a>
        <a href="/#contact" style={{
          padding: '9px 14px',
          fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
          color: '#fff', background: 'var(--fg-1)',
          borderRadius: 6, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          {t('cat.contact_cta')}
          <I name="arrow-up-right" size={14} stroke={1.75} color="#fff" />
        </a>
      </div>
    </nav>
  );
}

// ── Hero ──────────────────────────────────────────────────────────────────────
function CatalogueHero({ t, lang, meta, productsByCat, scrollToCat }) {
  const isMobile = useIsMobile();
  const cats = Object.keys(productsByCat);
  return (
    <section style={{
      padding: isMobile ? '56px 20px 44px' : '80px 32px 60px',
      position: 'relative', overflow: 'hidden',
      background: `linear-gradient(135deg, var(--bg) 0%, var(--bg) 58%, ${ACCENT}12 100%)`,
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, opacity: 0.45,
        backgroundImage: 'linear-gradient(var(--border-muted) 1px, transparent 1px), linear-gradient(90deg, var(--border-muted) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', top: -100, right: -200, width: 600, height: 600,
        background: `radial-gradient(circle, ${ACCENT}2d 0%, ${ACCENT}14 38%, transparent 68%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <Eyebrow accent={ACCENT}>Medway MSS · Lomé, Togo</Eyebrow>
        <h1 style={{
          margin: '20px 0 0', fontFamily: 'Inter, sans-serif',
          fontSize: 'clamp(38px, 6vw, 88px)',
          fontWeight: 500, lineHeight: isMobile ? 1.04 : 0.98, letterSpacing: isMobile ? '-0.025em' : '-0.04em',
          color: 'var(--fg-1)', maxWidth: 1000,
        }}>{t('cat.title')}</h1>
        <p style={{
          margin: isMobile ? '24px 0 0' : '32px 0 0', maxWidth: 720,
          fontFamily: 'Inter, sans-serif', fontSize: isMobile ? 16 : 18, lineHeight: 1.5,
          color: 'var(--fg-2)',
        }}>{t('cat.subtitle')}</p>
        <div className="no-print" style={{
          marginTop: isMobile ? 32 : 48, display: 'flex', gap: 12, flexWrap: 'wrap',
          flexDirection: isMobile ? 'column' : 'row',
        }}>
          {cats.map((cat) => {
            const list = productsByCat[cat] || [];
            const label = meta.labels[cat]?.[lang] || meta.labels[cat]?.fr || cat;
            return (
              <button key={cat} onClick={() => scrollToCat(cat)} style={{
                padding: '13px 20px',
                fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                color: 'var(--fg-1)', background: 'transparent',
                border: '1px solid var(--border-strong)', borderRadius: 6,
                cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
              }}>
                {label}
                <span style={{
                  fontFamily: 'SF Mono, monospace', fontSize: 11,
                  color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums',
                }}>{list.length}</span>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── App ───────────────────────────────────────────────────────────────────────
function CategoryButton({ cat, label, count, onClick }) {
  return (
    <button onClick={onClick} style={{
      padding: '13px 20px',
      fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
      color: 'var(--fg-1)', background: 'transparent',
      border: '1px solid var(--border-strong)', borderRadius: 6,
      cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 10,
    }}>
      {label}
      <span style={{ fontFamily: 'SF Mono, monospace', fontSize: 11, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums' }}>{count}</span>
    </button>
  );
}

function App() {
  const { lang, setLang, t } = useI18n();
  const isMobile = useIsMobile();
  const [query, setQuery] = React.useState('');

  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const data = window.MEDWAY_CATALOGUE || { _meta: { labels: {}, subcategories: {} }, products: [] };
  const meta = data._meta;
  const all = data.products;

  // Apply name overrides per language where present
  const translated = all.map((p) => {
    if (lang === 'en' && p.name_en) return { ...p, name: p.name_en };
    return p;
  });

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return translated;
    return translated.filter((p) => {
      if (p.name.toLowerCase().includes(q)) return true;
      if (p.method && p.method.toLowerCase().includes(q)) return true;
      if (p.refs && p.refs.some((r) => r.toLowerCase().includes(q))) return true;
      const subLabel = meta.subcategories[p.sub]?.[lang] || '';
      if (subLabel.toLowerCase().includes(q)) return true;
      return false;
    });
  }, [query, translated, lang]);

  // Group by category in fixed order
  const CAT_ORDER = ['reaktif', 'kan_gruplama', 'radyoloji'];
  const byCat = {};
  for (const c of CAT_ORDER) byCat[c] = filtered.filter((p) => p.category === c);

  const scrollToCat = (cat) => {
    const el = document.getElementById(`cat-${cat}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 68;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <div style={{ background: 'var(--bg)', minHeight: '100vh' }}>
      <CatalogueTopBar
        t={t} lang={lang} setLang={setLang}
        query={query} setQuery={setQuery}
        scrollToCat={scrollToCat}
      />
      <CatalogueHero t={t} lang={lang} meta={meta} productsByCat={byCat} scrollToCat={scrollToCat} />

      {filtered.length === 0 ? (
        <div style={{
          maxWidth: 1320, margin: '0 auto', padding: '80px 32px',
          textAlign: 'center',
          fontFamily: 'Inter, sans-serif', fontSize: 16, color: 'var(--fg-3)',
        }}>
          {t('cat.no_results')}
        </div>
      ) : (
        CAT_ORDER.map((cat, i) => {
          const list = byCat[cat];
          if (!list || list.length === 0) return null;
          return (
            <CategorySection
              key={cat}
              cat={cat}
              products={list}
              t={t} lang={lang} meta={meta}
              n={i + 1}
            />
          );
        })
      )}

      <section style={{
        padding: '60px 32px',
        background: 'var(--fg-1)',
        color: '#fafafa',
      }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 64, alignItems: 'center' }}>
          <div>
            <Eyebrow accent={ACCENT} color="#a3a3a3">Medway MSS</Eyebrow>
            <h3 style={{
              margin: '16px 0 0', fontFamily: 'Inter, sans-serif',
              fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em',
              color: '#fafafa', lineHeight: 1.1,
            }}>{t('cat.note')}</h3>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <a href="/#contact" style={{
              padding: '14px 22px',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: 'var(--fg-1)', background: '#fafafa', borderRadius: 6,
              textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              {t('cat.contact_cta')}
              <I name="arrow-right" size={15} stroke={1.75} color="var(--fg-1)" />
            </a>
            <a href="https://wa.me/22890712020" target="_blank" rel="noopener" style={{
              padding: '13px 18px',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: '#fafafa', background: 'transparent',
              border: '1px solid #404040', borderRadius: 6, textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <I name="message-circle" size={15} stroke={1.75} color="#fafafa" />
              WhatsApp
            </a>
          </div>
        </div>
      </section>
      {isMobile && (
        <a
          href="https://wa.me/22890712020"
          target="_blank"
          rel="noopener"
          aria-label="WhatsApp"
          style={{
            position: 'fixed',
            right: 18,
            bottom: 18,
            zIndex: 70,
            width: 54,
            height: 54,
            borderRadius: '50%',
            background: '#25D366',
            color: '#fff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 12px 28px rgba(0,0,0,0.22)',
            textDecoration: 'none',
          }}
        >
          <I name="message-circle" size={26} stroke={2.1} color="#fff" />
        </a>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
