// Brand catalog — dark section with typographic grid of brand names
function Brands() {
  // Each brand uses a different typographic style to emulate a logo wall
  const brands = [
    { name: 'Zara', style: 'bold' },
    { name: 'Sézane', style: 'italic' },
    { name: 'L\'Exception', style: 'small' },
    { name: 'Maje', style: 'sans' },
    { name: 'Maison 123', style: 'small' },
    { name: 'The Kooples', style: 'sans' },
    { name: 'Maison Lemahieu', style: 'small' },
    { name: 'Sandro', style: 'italic' },
    { name: 'ROAE Paris', style: 'italic' },
    { name: 'Rouje', style: 'italic' },
    { name: 'Smallable', style: 'sans' },
    { name: 'H&M', style: 'bold' },
    { name: 'Angarde', style: 'italic' },
    { name: 'COS', style: 'sans' },
    { name: 'Rip Curl', style: 'bold' },
    { name: 'Arket', style: 'sans' },
    { name: 'Massimo Dutti', style: 'small' },
    { name: 'Uniqlo', style: 'sans' },
    { name: '& Other Stories', style: 'small' },
    { name: 'Ba&sh', style: 'sans' },
    { name: 'Zadig & Voltaire', style: 'small' },
    { name: 'Mango', style: 'sans' },
    { name: 'Reformation', style: 'italic' },
    { name: '+ 320 autres', style: 'italic' },
  ];

  return (
    <section className="brands" id="marques">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>iv</em></div>
          <div className="section-label">Marques partenaires<span className="dot"></span>Un seul vestiaire, des centaines de griffes</div>
        </div>

        <h2>
          Toutes tes marques. <em>Un seul</em> miroir.
        </h2>
        <p className="lede" style={{whiteSpace:'nowrap'}}>
          Du fast à la nouvelle vague française, en passant par les pépites
          minimales scandinaves.<br />
          Myrrae rassemble les marques que tu aimes déjà
          et celles que tu n'as pas encore découvertes.
        </p>

        <div className="brand-grid">
          {brands.map((b, i) => (
            <div key={i} className={'brand-cell ' + b.style}>{b.name}</div>
          ))}
        </div>

        <div className="footer">
          <div className="meta">
            <strong>+10</strong> marques disponibles · enrichissement chaque mois
          </div>
          <a href="#telecharger" style={{
            color: 'white',
            fontSize: 13,
            fontWeight: 500,
            letterSpacing: '0.04em',
            padding: '14px 24px',
            border: '1px solid rgba(255,255,255,0.3)',
            borderRadius: 999,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 10,
            transition: 'all 300ms cubic-bezier(0.22,1,0.36,1)',
          }}>
            Voir toutes les marques →
          </a>
        </div>
      </div>
    </section>
  );
}

window.Brands = Brands;