/* Retailers.jsx — buy-everywhere list with country flags.
   Stores without a live product page yet carry a "Coming soon" label. */

function Retailers() {
  const { t } = useI18n();
  return (
    <section className="section retailers" id="retailers">
      <div className="container">
        <div className="section-thread" aria-hidden="true"></div>
        <h2>{t('retailers.heading')}</h2>
        <div className="retailer-grid">
          {(window.RETAILERS || []).map(r => (
            <a key={r.name} className={"retailer" + (r.soon ? " soon" : "")} href={r.href} target="_blank" rel="noopener">
              <span className="retailer-name">
                <span className="retailer-flag" role="img" aria-label={r.tag}>{r.flag}</span>
                <span>{r.name}</span>
              </span>
              {r.soon
                ? <span className="retailer-soon">{t('retailers.soon')}</span>
                : <span className="arrow">↗ {r.tag}</span>}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Retailers = Retailers;