// Hero.jsx
const Hero = () => {
  const t = useT();
  return (
    <section className="bp-hero" id="top">
      <div className="bp-hero__meta">
        <span className="bp-eyebrow"><span className="bp-pulse"></span>{t.hero.eyebrow}</span>
      </div>
      <h1 className="bp-hero__title">
        {t.hero.l1}<br />
        {t.hero.l2}<br />
        {t.hero.l3}<span className="bp-wm__dot bp-wm__dot--big"></span>
      </h1>
      <p className="bp-hero__sub">{t.hero.sub}</p>
      <div className="bp-hero__cta">
        <a className="bp-btn bp-btn--primary" href="#contact">{t.hero.cta1} <span>→</span></a>
        <a className="bp-btn bp-btn--link" href="#services">{t.hero.cta2}</a>
      </div>
      <div className="bp-hero__strip">
        <span className="bp-eyebrow bp-eyebrow--muted">{t.hero.strip}</span>
        <div className="bp-marquee" aria-hidden="false">
          <div className="bp-marquee__track">
            {[0, 1].map(copy => (
              <ul key={copy} className="bp-marquee__row" aria-hidden={copy === 1}>
                {[
                  'P58','50 Partners','Agoranov','Antler','Campus Cyber','Entrepreneur First',
                  'Euratech','Innes','Le Swave','Le Village CA','Paris&Co','Station F',
                  'Techstars','X-HEC','YC',
                ].map((name, i) => (
                  <li key={i} className="bp-stub">{name}</li>
                ))}
              </ul>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;