// Nav, LiveBadge, Hero, Marquee, Stats
// Reads from window.locale set by index.html

function Nav() {
  const C = COPY[window.locale];
  return (
    <nav className="tvm-nav glass" role="navigation">
      <div className="tvm-nav-inner">
        <a href="#" className="tvm-logo" aria-label="Tvmomento">
          <span>TV</span><span>momento</span>
        </a>
        <div className="tvm-nav-links">
          <a href={C.navIds[0]} className="tvm-nav-link">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="2" y="2" width="12" height="9" rx="1.5"/>
              <path d="M5 14h6"/>
              <path d="M8 11v3"/>
            </svg>
            {C.nav[0]}
          </a>
          <a href={C.navIds[1]} className="tvm-nav-link">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M2 2h5l7 7-5 5-7-7V2z"/>
              <circle cx="5" cy="5" r="1" fill="currentColor" stroke="none"/>
            </svg>
            {C.nav[1]}
          </a>
          <a href={C.navIds[2]} className="tvm-nav-link">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0z"/>
              <path d="M5 13l-2 2 1-3"/>
            </svg>
            {C.nav[2]}
          </a>
        </div>
        <a href="#bestall" className="btn btn-primary btn-sm">{C.cta}</a>
      </div>
    </nav>
  );
}

function LiveBadge() {
  const C = COPY[window.locale];
  const [n, setN] = React.useState(() => Math.floor(Math.random() * 3000) + 11000);
  React.useEffect(() => {
    const interval = 3000 + Math.random() * 4000;
    const t = setInterval(() => {
      setN(v => v + Math.floor(Math.random() * 5) - 2);
    }, interval);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="live-pill" aria-live="polite" aria-atomic="true">
      <span className="live-dot" aria-hidden="true" />
      <span>{C.live(n)}</span>
    </div>
  );
}

function Hero() {
  const C = COPY[window.locale];
  return (
    <section className="hero">
      <div className="reveal">
        <LiveBadge />
      </div>
      <h1 className="display reveal reveal-d1">
        {C.hero1}<br />
        <em>{C.hero2}</em>
      </h1>
      <p className="hero-sub reveal reveal-d2">{C.heroSub}</p>
      <p className="anchor reveal reveal-d2">
        <span className="anchor-bad">{C.anchor1}</span>
        <span className="anchor-good">{C.anchor2}</span>
      </p>
      <div className="cta-row reveal reveal-d3">
        <a href="bestall.html" className="btn btn-blue">{C.cta}</a>
        <a href={C.whatsappTestUrl} target="_blank" rel="noopener" className="btn-text">{C.cta2}</a>
      </div>
      <div className="trust-row reveal reveal-d3">
        {C.trust.map(t => (
          <div className="trust-item" key={t}>
            <CheckSvg />
            <span>{t}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Marquee() {
  const C = COPY[window.locale];
  const r1a = row1partners.map((logo, i) => React.cloneElement(logo, { key: 'r1a' + i }));
  const r1b = row1partners.map((logo, i) => React.cloneElement(logo, { key: 'r1b' + i }));
  const r2a = row2partners.map((logo, i) => React.cloneElement(logo, { key: 'r2a' + i }));
  const r2b = row2partners.map((logo, i) => React.cloneElement(logo, { key: 'r2b' + i }));
  return (
    <section className="marquee" aria-label={C.marqueeLabel}>
      <div className="m-label">{C.marqueeLabel}</div>
      <div className="m-track m-track-fwd" aria-hidden="true">{r1a}{r1b}</div>
      <div className="m-track m-track-rev" aria-hidden="true">{r2a}{r2b}</div>
    </section>
  );
}

function Stats() {
  const C = COPY[window.locale];
  const items = [
    ["2 400+", C.statsLabels[0]],
    ["4.9 / 5", C.statsLabels[1]],
    ["15 min", C.statsLabels[2]],
    ["99 %",   C.statsLabels[3]],
  ];
  return (
    <section className="stats" aria-label="Statistik">
      {items.map(([num, lbl]) => (
        <div className="stat reveal" key={lbl}>
          <div className="stat-num">{num}</div>
          <div className="stat-lbl">{lbl}</div>
        </div>
      ))}
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Stats });