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

(function injectNavStyles() {
  if (document.getElementById('tvm-nav-styles')) return;
  const s = document.createElement('style');
  s.id = 'tvm-nav-styles';
  s.textContent = `
    .tvm-hamburger {
      display: none;
      background: none;
      border: none;
      padding: 6px;
      cursor: pointer;
      color: var(--tvm-text, #1d1d1f);
      border-radius: 8px;
      transition: background 0.2s ease;
      flex-shrink: 0;
    }
    .tvm-hamburger:hover { background: rgba(0,0,0,0.06); }
    .tvm-mobile-backdrop {
      display: none;
      position: fixed; inset: 0; z-index: 98;
      background: rgba(0,0,0,0.18);
    }
    .tvm-mobile-backdrop.open { display: block; }
    .tvm-mobile-nav {
      display: none;
      position: fixed;
      top: 56px; left: 0; right: 0;
      z-index: 99;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(40px) saturate(1.8);
      -webkit-backdrop-filter: blur(40px) saturate(1.8);
      border-bottom: 0.5px solid rgba(0,0,0,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 32px rgba(0,0,0,0.10);
    }
    .tvm-mobile-nav-inner {
      padding: 16px 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .tvm-mobile-nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      font-size: 17px;
      font-weight: 500;
      color: var(--tvm-text, #1d1d1f);
      text-decoration: none;
      border-radius: 12px;
      transition: background 0.15s ease;
    }
    .tvm-mobile-nav-link svg { flex-shrink: 0; opacity: 0.55; }
    .tvm-mobile-nav-link:hover, .tvm-mobile-nav-link:active { background: rgba(0,0,0,0.05); }
    @media (max-width: 768px) {
      .tvm-hamburger { display: flex; align-items: center; justify-content: center; }
      .tvm-nav-links { display: none !important; }
      .tvm-nav-cta { display: none !important; }
      .tvm-mobile-nav { display: block; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.24s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.24s ease; }
      .tvm-mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    }
  `;
  document.head.appendChild(s);
})();

function Nav() {
  const C = COPY[window.locale];
  const [open, setOpen] = React.useState(false);
  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">
                <rect x="3" y="1" width="10" height="14" rx="1.5"/>
                <path d="M6 5h4"/><path d="M6 8h4"/><path d="M6 11h2.5"/>
              </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="M2 2h5l7 7-5 5-7-7V2z"/>
                <circle cx="5" cy="5" r="1" fill="currentColor" stroke="none"/>
              </svg>
              {C.nav[2]}
            </a>
            <a href={C.navIds[3]} 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[3]}
            </a>
            <a href={C.navIds[4]} 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 3h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3z"/>
                <path d="M5 3V1.5"/><path d="M11 3V1.5"/>
                <path d="M5 7h6"/><path d="M5 10h4"/>
              </svg>
              {C.nav[4]}
            </a>
          </div>
          <a href="/#checkout" className="btn btn-primary btn-sm tvm-nav-cta">{C.cta}</a>
          <button className="tvm-hamburger" onClick={() => setOpen(o => !o)} aria-label="Meny">
            {open
              ? <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/></svg>
              : <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="3" y1="6" x2="17" y2="6"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="14" x2="17" y2="14"/></svg>
            }
          </button>
        </div>
      </nav>
      {open && <div className="tvm-mobile-backdrop open" onClick={() => setOpen(false)} />}
      <div className={"tvm-mobile-nav" + (open ? " open" : "")}>
        <div className="tvm-mobile-nav-inner">
          {[
            <svg width="18" height="18" 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>,
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="1" width="10" height="14" rx="1.5"/><path d="M6 5h4"/><path d="M6 8h4"/><path d="M6 11h2.5"/></svg>,
            <svg width="18" height="18" 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>,
            <svg width="18" height="18" 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>,
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 3h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3z"/><path d="M5 3V1.5"/><path d="M11 3V1.5"/><path d="M5 7h6"/><path d="M5 10h4"/></svg>,
          ].map((icon, i) => (
            <a key={C.nav[i]} href={C.navIds[i]} className="tvm-mobile-nav-link" onClick={() => setOpen(false)}>{icon}{C.nav[i]}</a>
          ))}
          <a href="/#checkout" className="btn btn-primary" style={{marginTop:'8px', textAlign:'center'}} onClick={() => setOpen(false)}>{C.cta}</a>
        </div>
      </div>
    </>
  );
}

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];
  function scrollToCheckout(e) {
    e.preventDefault();
    var el = document.getElementById('checkout');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  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="#checkout" className="btn btn-blue" onClick={scrollToCheckout}>
          {C.heroCta}
        </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 });