// BrandHero — uses the real Parleur icon PNG as the centerpiece.
// Floating multilingual "Hello" chips orbit the icon, with one cycling active.
const BrandHero = ({ lang }) => {
  const tokens = React.useMemo(() => ([
    { w: 'Bonjour',    l: 'fr',      t: 'Hello', x: 18, y: 14, s: 17 },
    { w: '你好',       l: 'zh-Hant', t: 'Hello', x: 80, y: 12, s: 22 },
    { w: 'こんにちは', l: 'ja',      t: 'Hello', x: 82, y: 70, s: 16 },
    { w: 'Hola',       l: 'es',      t: 'Hello', x: 14, y: 78, s: 18 },
    { w: '안녕하세요', l: 'ko',      t: 'Hello', x: 16, y: 46, s: 15 },
    { w: 'Ciao',       l: 'it',      t: 'Hello', x: 86, y: 42, s: 16 },
    { w: 'Hallo',      l: 'de',      t: 'Hello', x: 50, y: 6,  s: 15 },
    { w: 'Olá',        l: 'pt',      t: 'Hello', x: 50, y: 90, s: 16 },
  ]), []);

  const [activeIdx, setActiveIdx] = React.useState(2);
  React.useEffect(() => {
    const id = setInterval(() => {
      setActiveIdx(i => (i + 1) % tokens.length);
    }, 2200);
    return () => clearInterval(id);
  }, [tokens.length]);

  const caption = lang === 'zh'
    ? '16 種語言 · macOS 14+'
    : lang === 'ja'
    ? '16 言語 · macOS 14+'
    : '16 languages · macOS 14+';

  return (
    <div className="brand-hero" aria-hidden="true">
      <div className="brand-hero-stage">
        <img
          src="assets/parleur-icon.png"
          alt=""
          className="bh-icon"
          draggable="false"
        />
        <div className="bh-glow"/>
        {tokens.map((tok, i) => (
          <div
            key={tok.w}
            className={"bh-token" + (i === activeIdx ? " is-active" : "")}
            style={{
              left: `${tok.x}%`,
              top: `${tok.y}%`,
              fontSize: `${tok.s}px`,
              animationDelay: `${i * 0.35}s`,
            }}
            lang={tok.l}
          >
            <span className="bh-token-word">{tok.w}</span>
            <span className="bh-token-arrow">→</span>
            <span className="bh-token-trans">{tok.t}</span>
          </div>
        ))}
        <div className="bh-caption">
          <span className="bh-caption-dot"/>
          <span className="bh-caption-text">{caption}</span>
        </div>
      </div>
    </div>
  );
};

window.BrandHero = BrandHero;