// Brands section — clean logo grid (first version)
function Featured({ t }) {
  const brands = [
    { name: 'La Sultane de Saba', src: 'assets/brands/sultane-de-saba.jpeg' },
    { name: 'Inocos',             src: 'assets/brands/inocos.jpeg' },
    { name: 'Elyamaje',           src: 'assets/brands/elyamaje.jpeg' },
    { name: 'Andreia Professional', src: 'assets/brands/andreia.png' },
    { name: 'Peggy Sage',         src: 'assets/brands/peggy-sage.jpeg' },
  ];

  return (
    <section id="brands" style={{
      background: 'var(--cream)',
      padding: 'clamp(70px, 9vw, 130px) 0',
      position:'relative',
    }}>
      <div className="wrap">
        <div style={{ textAlign:'center', maxWidth: 720, margin: '0 auto clamp(40px, 5vw, 70px)' }}>
          <div className="mono-tiny" style={{ color:'var(--gray-400)', marginBottom: 16 }}>
            {t.brandsKicker}
          </div>
          <h2 className="display" style={{ fontSize:'clamp(40px, 5.5vw, 72px)', lineHeight: 1.05 }}>
            {t.brandsTitle1} <span className="display-italic" style={{color:'var(--pink-500)'}}>{t.brandsTitle2}</span>
          </h2>
          <p style={{ marginTop: 18, fontSize: 15, lineHeight: 1.65, color:'var(--ink-soft)' }}>
            {t.brandsIntro}
          </p>
        </div>

        <div className="brands-grid" style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))',
          background:'var(--gray-200)',
          gap: 1,
          border:'1px solid var(--gray-200)',
          borderRadius: 18,
          overflow:'hidden',
          maxWidth: 1100,
          margin: '0 auto',
        }}>
          {brands.map(b => <BrandTile key={b.name} b={b} />)}
        </div>
      </div>

      <style>{`
        .brand-tile {
          padding: clamp(28px, 4vw, 48px) 24px;
          display:flex; align-items:center; justify-content:center;
          background: white;
          transition: background .25s ease;
          min-height: 160px;
          position: relative;
        }
        .brand-tile:hover { background: #fff5f8; }
        .brand-tile img {
          max-width: 80%;
          max-height: 90px;
          width: auto;
          height: auto;
          object-fit: contain;
          mix-blend-mode: multiply;
          transition: transform .35s ease;
        }
        .brand-tile:hover img { transform: scale(1.04); }
        @media (max-width: 760px) {
          .brand-tile { min-height: 120px; padding: 22px 16px; }
          .brand-tile img { max-height: 70px; }
        }
      `}</style>
    </section>
  );
}

function BrandTile({ b }) {
  return (
    <div className="brand-tile" title={b.name}>
      <img src={b.src} alt={b.name} loading="lazy" />
    </div>
  );
}

window.Featured = Featured;