// Receipt comparison, features, how it works, pricing, FAQ, final CTA, footer.

function ChipSvg({ type }) {
  const s = 28, r = 6;
  const chips = {
    netflix: (
      <>
        <rect width={s} height={s} rx={r} fill="#141414" />
        <path d="M7 7 L11 7 L11 12 L19 7 L22 7 L22 21 L19 21 L19 16 L11 21 L7 21 Z" fill="#E50914" />
      </>
    ),
    viaplay: (
      <>
        <rect width={s} height={s} rx={r} fill="#003F73" />
        <text x="4" y="20" fontSize="10" fontWeight="800" fontFamily="Arial,sans-serif" fill="#fff" letterSpacing="-0.3">via</text>
      </>
    ),
    disney: (
      <>
        <rect width={s} height={s} rx={r} fill="#0063E5" />
        <text x="14" y="21" fontSize="13" fontWeight="900" fontFamily="Arial Black,Arial,sans-serif" fill="#fff" textAnchor="middle" letterSpacing="-0.5">D+</text>
      </>
    ),
    max: (
      <>
        <rect width={s} height={s} rx={r} fill="#1a1535" />
        <text x="14" y="20.5" fontSize="9.5" fontWeight="900" fontFamily="Arial Black,Arial,sans-serif" fill="#fff" textAnchor="middle" letterSpacing="1">MAX</text>
      </>
    ),
    tv4: (
      <>
        <rect width={s} height={s} rx={r} fill="#E4041A" />
        <text x="14" y="21" fontSize="11" fontWeight="900" fontFamily="Arial Black,Arial,sans-serif" fill="#fff" textAnchor="middle" letterSpacing="0">TV4</text>
      </>
    ),
  };
  const key = /netflix/i.test(type) ? 'netflix'
    : /viaplay/i.test(type) ? 'viaplay'
    : /disney/i.test(type)  ? 'disney'
    : /hbo|max/i.test(type) ? 'max'
    : /tv4/i.test(type)     ? 'tv4'
    : 'netflix';
  return (
    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} aria-hidden="true" style={{flexShrink:0,display:'block'}}>
      {chips[key]}
    </svg>
  );
}

function BarcodeSvg() {
  const pat = [2,1,2,1,3,2,1,2,2,1,3,1,2,2,1,3,2,1,1,2,3,1,2,1,1,3,2,1,3,1,1,2,2,3,1,2,1,1,3,2,1,2,3,1,2,1,1,2,3,2];
  let x = 8;
  const bars = [];
  pat.forEach((w, i) => {
    const bw = w * 2.6;
    if (i % 2 === 0) bars.push(<rect key={i} x={x} y="1" width={bw} height="48" fill="#111" />);
    x += bw;
  });
  return (
    <svg width="218" height="54" viewBox="0 0 218 54" aria-hidden="true" style={{display:'block'}}>
      {bars}
    </svg>
  );
}

function ReceiptBad({ mini = false }) {
  const C = COPY[window.locale];
  const fmtPrice = p => p.replace(/\s*kr$/, ',00');

  return (
    <div className={"rbt-outer" + (mini ? " rbt-mini" : "")}>

      {/* Handwritten annotations (full version only) */}
      {!mini && (
        <div className="rbt-annotations">
          <div style={{
            position:'absolute', top:'52px', right:'-106px',
            color:'#d32f2f', fontFamily:'"Segoe Script","Bradley Hand",cursive',
            fontSize:'15px', fontWeight:'700', transform:'rotate(5deg)',
            pointerEvents:'none', whiteSpace:'nowrap', lineHeight:'1',
          }}>SERIÖST?</div>
          <svg style={{position:'absolute',top:'66px',right:'-50px',pointerEvents:'none',overflow:'visible'}}
               width="54" height="64" viewBox="0 0 54 64" aria-hidden="true">
            <path d="M48 4 Q22 18 6 58" fill="none" stroke="#d32f2f" strokeWidth="1.6" strokeLinecap="round"/>
            <path d="M2 52 L6 58 L13 54" fill="none" stroke="#d32f2f" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>

          <div style={{
            position:'absolute', top:'46%', left:'-98px',
            color:'#d32f2f', fontFamily:'"Segoe Script","Bradley Hand",cursive',
            fontSize:'13px', lineHeight:'1.55', transform:'rotate(-4deg)',
            pointerEvents:'none', textAlign:'right',
          }}>5 appar.<br/>5 lösen.</div>

          <div style={{
            position:'absolute', bottom:'22%', right:'-80px',
            color:'#d32f2f', fontFamily:'"Segoe Script","Bradley Hand",cursive',
            fontSize:'13px', lineHeight:'1.55', transform:'rotate(3deg)',
            pointerEvents:'none', textAlign:'center',
          }}>för<br/>alltid<br/>∞</div>
        </div>
      )}

      <div className="receipt-bad">
        <div className="r-tear-top" aria-hidden="true" />

        <div className="r-meta">
          <span>Kund 8842</span>
          <span>15.05.26 14:32</span>
        </div>
        <hr className="r-dash" />

        <div className="r-items">
          {C.receiptItems.map(([name, price]) => (
            <div className="r-item" key={name}>
              <div className="r-item-left">
                <ChipSvg type={name} />
                <span className="r-item-name">{name}</span>
              </div>
              <span className="r-item-price">{fmtPrice(price)}</span>
            </div>
          ))}
        </div>

        <hr className="r-divider" />

        <div className="r-bill-row">
          <span>ATT BETALA</span>
          <span className="r-bill-dots">· · · · · · ·</span>
        </div>

        <div className="r-total-wrap">
          <div className="r-total-inner">
            <span className="r-total-num">715</span>
            <span className="r-total-kr">kr</span>
          </div>
          <svg className="r-oval" viewBox="0 0 300 116" preserveAspectRatio="none" aria-hidden="true">
            <ellipse cx="150" cy="57" rx="138" ry="50"
              fill="none" stroke="#E50000" strokeWidth="2.8"
              transform="rotate(-1.5 150 57)" />
          </svg>
        </div>

        <div className="r-varje">VARJE MÅNAD</div>
        <div className="r-yearly">
          <span>eller </span>
          <span className="r-yearly-big">8 580</span>
          <span className="r-yearly-kr"> kr</span>
          <span> per år</span>
        </div>

        {!mini && (
          <>
            <hr className="r-foot-divider" />
            <div className="r-foot-row">
              <span>Varav moms 25&nbsp;%</span>
              <span>143,00</span>
            </div>
            <div className="r-foot-row">
              <span>Kort&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;4471</span>
              <span className="r-godkand">GODKÄND</span>
            </div>
            <div className="r-thanks">TACK FÖR DITT KÖP</div>
            <div className="r-barcode">
              <BarcodeSvg />
              <div className="r-barcode-num">7350&nbsp;&nbsp;0042&nbsp;&nbsp;8842&nbsp;&nbsp;9</div>
            </div>
          </>
        )}

        <div className="r-tear-btm" aria-hidden="true" />
      </div>
    </div>
  );
}

function ReceiptGood() {
  const C = COPY[window.locale];
  return (
    <div className="receipt-good">
      <div className="rg-head">TVMOMENTO</div>
      <div className="rg-price">58 <span className="rg-unit">{C.perMnd}</span></div>
      <div className="rg-sub">vid 1-årsplan</div>
      <ul className="rg-list">
        {C.goodFeatures.map(f => (
          <li key={f}>
            <CheckSvg stroke="var(--tvm-accent)" size={13} />
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <a href="#bestall" className="btn btn-blue btn-block">{C.cta}</a>
    </div>
  );
}

function ReceiptCompare() {
  return null;
}

function FeatureSavings() {
  const C = COPY[window.locale];
  return (
    <section className="compare" id="kanaler" aria-label="Jämförelse">
      <div className="compare-grid" style={{alignItems:'center'}}>
        <div className="compare-col reveal">
          <div className="eyebrow eyebrow-red">{C.badEyebrow}</div>
          <ReceiptBad />
        </div>
        <div className="compare-col reveal reveal-d1" style={{alignItems:'flex-start'}}>
          <div className="eyebrow">Pris</div>
          <h3 className="heading" style={{fontSize:'clamp(30px,3.2vw,42px)',letterSpacing:'-1.2px',margin:'0 0 14px'}}>
            Du sparar<br/>7 884 kr per år.
          </h3>
          <p style={{fontSize:'17px',fontWeight:300,color:'var(--tvm-text-2)',lineHeight:1.6,margin:'0 0 28px',maxWidth:'380px'}}>
            Det är vad du betalar extra med fem separata abonnemang. Inte hypotetiskt. Per år.
          </p>
          <table className="save-table">
            <tbody>
              <tr><td>Nuläget</td><td>715 kr/mån</td><td>8 580 kr/år</td></tr>
              <tr><td>Tvmomento</td><td>58 kr/mån</td><td>696 kr/år</td></tr>
              <tr className="save-row"><td>Du sparar</td><td>657 kr/mån</td><td>7 884 kr/år</td></tr>
            </tbody>
          </table>
        </div>
      </div>
      <div className="compare-punch reveal">
        <div className="punch-1">{C.punch1}</div>
        <div className="punch-2">{C.punch2}</div>
      </div>
    </section>
  );
}

function HowItWorks() {
  React.useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.how-step').forEach(s => io.observe(s));
    return () => io.disconnect();
  }, []);

  return (
    <section className="how" aria-label="Så fungerar det">
      <div className="how-head reveal">
        <div className="eyebrow eyebrow-muted">Så fungerar det</div>
        <h2 className="title">Tre steg.<br/><em>Femton minuter.</em></h2>
      </div>

      <div className="how-steps">
        {/* Step 01 — plan comparison */}
        <div className="how-step">
          <div className="how-num">01</div>
          <div className="how-copy">
            <h3 className="how-verb">Välj din plan.</h3>
            <p>Tre nivåer, samma innehåll. Inga dolda avgifter, ingen bindningstid.</p>
          </div>
          <div className="how-visual">
            <div className="how-plancmp">
              <div className="how-pcrow">
                <span className="how-pname">3 månader</span>
                <div className="how-pright">
                  <span className="how-pamount">349</span>
                  <span className="how-pmo">kr</span>
                </div>
              </div>
              <div className="how-pcrow how-pcrow-hl">
                <span className="how-pname">1 år</span>
                <div className="how-pright">
                  <span className="how-pamount">699</span>
                  <span className="how-pmo">kr</span>
                  <span className="how-pbadge">Populärast</span>
                </div>
              </div>
              <div className="how-pcrow">
                <span className="how-pname">3 år + 6 mån gratis</span>
                <div className="how-pright">
                  <span className="how-pamount">1 299</span>
                  <span className="how-pmo">kr</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Step 02 — payment sheet */}
        <div className="how-step">
          <div className="how-num">02</div>
          <div className="how-copy">
            <h3 className="how-verb">Betala <em>säkert.</em></h3>
            <p>Visa, Mastercard, Swish eller Apple Pay. Shopify Payments-skyddad betalning, kvitto direkt.</p>
          </div>
          <div className="how-visual">
            <div className="how-pay">
              <div className="how-pay-row"><span>Tvmomento</span><b>1 år</b></div>
              <div className="how-pay-row" style={{marginTop:'6px'}}><span>Plan</span><b>699 kr</b></div>
              <div className="how-pay-total"><span>Att betala</span><b>699 kr</b></div>
              <div className="how-pay-btn">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="white">
                  <path d="M11.18 2c.06.8-.23 1.6-.72 2.18-.5.6-1.28.98-2.02.92-.08-.76.24-1.56.72-2.1.52-.6 1.32-.98 2.02-1zm2.7 9.38c-.34.76-.5 1.1-.94 1.76-.6.92-1.46 2.06-2.52 2.08-.94.02-1.18-.6-2.46-.58-1.26.02-1.54.6-2.48.58-1.06-.02-1.86-1.06-2.46-1.98C1.56 11.1 1 8.86 1.78 7.24c.54-1.12 1.6-1.82 2.72-1.84 1.02-.02 1.66.62 2.5.62.82 0 1.32-.64 2.52-.62 1 .02 1.92.56 2.46 1.48-2.18 1.22-1.82 4.38.9 4.5z"/>
                </svg>
                Pay
              </div>
              <div className="how-pay-methods">
                <div className="how-pm" style={{width:'42px',background:'#1a1f71',padding:'0 6px'}}>
                  <svg width="30" height="10" viewBox="0 0 30 10"><text x="0" y="9" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="700" fontStyle="italic" fill="white" letterSpacing="-0.5">VISA</text></svg>
                </div>
                <div className="how-pm" style={{width:'38px',padding:'4px 6px'}}>
                  <svg width="26" height="16" viewBox="0 0 26 16"><circle cx="9" cy="8" r="8" fill="#EB001B"/><circle cx="17" cy="8" r="8" fill="#F79E1B"/><path d="M13 2.7a8 8 0 0 1 0 10.6A8 8 0 0 1 13 2.7z" fill="#FF5F00"/></svg>
                </div>
                <div className="how-pm" style={{width:'38px',background:'#fff',padding:'3px 5px'}}>
                  <svg width="28" height="18" viewBox="0 0 28 18">
                    <rect width="28" height="18" rx="2" fill="#fff"/>
                    <defs><linearGradient id="sw2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stopColor="#EF3782"/><stop offset="100%" stopColor="#9B1682"/></linearGradient></defs>
                    <text x="5" y="14" fontFamily="Arial,sans-serif" fontSize="14" fontWeight="900" fill="url(#sw2)">S</text>
                    <text x="13" y="14" fontFamily="Arial,sans-serif" fontSize="7.5" fontWeight="600" fill="#9B1682" letterSpacing="0.2">wish</text>
                  </svg>
                </div>
                <div className="how-pm" style={{width:'52px',background:'#000',padding:'4px 7px'}}>
                  <svg width="38" height="14" viewBox="0 0 38 14">
                    <path d="M7.2 1.4c-.5.6-1.3 1-2 .94-.1-.74.27-1.52.74-2.02.5-.56 1.3-.96 1.96-.98.08.76-.2 1.5-.7 2.06zm.72 1.14c-1.12-.06-2.08.62-2.62.62-.54 0-1.36-.6-2.26-.58C1.86 2.6.9 3.24.4 4.24c-1.04 2.06-.28 5.1.74 6.78.5.8 1.1 1.68 1.9 1.66.76-.02.98-.5 1.92-.5.94 0 1.14.5 1.94.48.82 0 1.36-.82 1.86-1.62.58-.92.82-1.82.84-1.86C9.56 9.12 8 8.22 8 6.36c0-1.54 1.26-2.28 1.32-2.34-.72-1.04-1.84-1.16-2.4-1.48z" fill="white"/>
                    <text x="12" y="11" fontFamily="-apple-system,BlinkMacSystemFont,sans-serif" fontSize="8" fontWeight="600" fill="white">Pay</text>
                  </svg>
                </div>
                <div className="how-pm" style={{width:'52px',background:'#fff',padding:'4px 7px'}}>
                  <svg width="38" height="14" viewBox="0 0 46 16">
                    <circle cx="7.5" cy="8" r="7" fill="#00D66B"/>
                    <path d="M5.6 5.4L8.8 8L5.6 10.6" stroke="#0C2713" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                    <text x="18" y="12.5" fontFamily="Arial Black,Arial,sans-serif" fontSize="9.5" fontWeight="900" fill="#111111">link</text>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Step 03 — cinematic image */}
        <div className="how-step">
          <div className="how-num">03</div>
          <div className="how-copy">
            <h3 className="how-verb">Tryck <em>play.</em></h3>
            <p>Inloggning till din e-post inom 15 minuter. Funkar på TV, mobil, surfplatta och dator.</p>
          </div>
          <div className="how-visual">
            <img className="how-step-img" src="assets/how-step3.webp" alt="Streama på TV och mobil" loading="lazy" decoding="async" />
          </div>
        </div>
      </div>
    </section>
  );
}

const DEVICE_IMAGES = ['assets/devices/tv.webp', 'assets/devices/phone.webp', 'assets/devices/tablet.webp', 'assets/devices/laptop.webp'];
const DEVICE_ALT    = ['Smart TV', 'Phone', 'Tablet', 'Laptop'];

const DEVICE_LOGOS = [
  /* TV */
  <React.Fragment>
    <div className="dvc-logo-mark" title="Samsung">
      <svg viewBox="0 0 74 12" height="11"><text y="11" fontFamily="Arial Black,Arial,sans-serif" fontSize="11" fontWeight="900" fill="#1d1d1f" letterSpacing="-0.3">SAMSUNG</text></svg>
    </div>
    <div className="dvc-logo-mark" title="LG">
      <svg viewBox="0 0 28 16" height="15" fill="none">
        <circle cx="8" cy="8" r="7" stroke="#1d1d1f" strokeWidth="1.8"/>
        <text x="3" y="12.5" fontFamily="Arial Black,sans-serif" fontSize="8.5" fontWeight="900" fill="#1d1d1f">LG</text>
        <path d="M19 5 H27 V11 H22" stroke="#1d1d1f" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
    <div className="dvc-logo-mark" title="Philips">
      <svg viewBox="0 0 48 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="11" fontWeight="700" fill="#1d1d1f" letterSpacing="0.3">PHILIPS</text></svg>
    </div>
    <div className="dvc-logo-mark" title="Android TV">
      <svg viewBox="0 0 62 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="600" fill="#1d1d1f">Android TV</text></svg>
    </div>
  </React.Fragment>,
  /* Mobile */
  <React.Fragment>
    <div className="dvc-logo-mark" title="Samsung">
      <svg viewBox="0 0 74 12" height="11"><text y="11" fontFamily="Arial Black,Arial,sans-serif" fontSize="11" fontWeight="900" fill="#1d1d1f" letterSpacing="-0.3">SAMSUNG</text></svg>
    </div>
    <div className="dvc-logo-mark" title="Apple">
      <svg viewBox="0 0 9 11" height="13" fill="#1d1d1f">
        <path d="M8.18 7.55c-.24.55-.36.8-.68 1.28-.44.67-1.06 1.5-1.83 1.51-.68.01-.86-.44-1.79-.43-.92.02-1.12.44-1.8.43-.77-.01-1.35-.77-1.79-1.44C-.06 7.43-.43 5.36.15 4.14c.4-.81 1.17-1.32 1.98-1.34.74-.01 1.2.45 1.82.45.6 0 .96-.46 1.83-.45.73.01 1.4.41 1.79 1.07-1.58.89-1.32 3.18.65 3.27zM5.5 1.37c.04.58-.17 1.16-.52 1.58-.36.43-.93.71-1.47.67-.06-.55.17-1.13.52-1.52.37-.43.96-.71 1.47-.73z"/>
      </svg>
    </div>
    <div className="dvc-logo-mark" title="Huawei">
      <svg viewBox="0 0 50 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10.5" fontWeight="700" fill="#1d1d1f">Huawei</text></svg>
    </div>
    <div className="dvc-logo-mark" title="Xiaomi">
      <svg viewBox="0 0 46 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10.5" fontWeight="700" fill="#1d1d1f">Xiaomi</text></svg>
    </div>
  </React.Fragment>,
  /* Tablet */
  <React.Fragment>
    <div className="dvc-logo-mark" title="Samsung">
      <svg viewBox="0 0 74 12" height="11"><text y="11" fontFamily="Arial Black,Arial,sans-serif" fontSize="11" fontWeight="900" fill="#1d1d1f" letterSpacing="-0.3">SAMSUNG</text></svg>
    </div>
    <div className="dvc-logo-mark" title="Apple iPad">
      <svg viewBox="0 0 38 13" height="13" fill="#1d1d1f">
        <path d="M8.18 7.55c-.24.55-.36.8-.68 1.28-.44.67-1.06 1.5-1.83 1.51-.68.01-.86-.44-1.79-.43-.92.02-1.12.44-1.8.43-.77-.01-1.35-.77-1.79-1.44C-.06 7.43-.43 5.36.15 4.14c.4-.81 1.17-1.32 1.98-1.34.74-.01 1.2.45 1.82.45.6 0 .96-.46 1.83-.45.73.01 1.4.41 1.79 1.07-1.58.89-1.32 3.18.65 3.27zM5.5 1.37c.04.58-.17 1.16-.52 1.58-.36.43-.93.71-1.47.67-.06-.55.17-1.13.52-1.52.37-.43.96-.71 1.47-.73z"/>
        <text x="10" y="11" fontFamily="-apple-system,BlinkMacSystemFont,Arial,sans-serif" fontSize="10" fontWeight="600">iPad</text>
      </svg>
    </div>
    <div className="dvc-logo-mark" title="Lenovo">
      <svg viewBox="0 0 50 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10.5" fontWeight="700" fill="#1d1d1f">Lenovo</text></svg>
    </div>
    <div className="dvc-logo-mark" title="Microsoft Surface">
      <svg viewBox="0 0 60 12" height="12" fill="#1d1d1f">
        <rect x="0" y="0" width="4.5" height="4.5" rx="0.5"/>
        <rect x="5.8" y="0" width="4.5" height="4.5" rx="0.5"/>
        <rect x="0" y="5.8" width="4.5" height="4.5" rx="0.5"/>
        <rect x="5.8" y="5.8" width="4.5" height="4.5" rx="0.5"/>
        <text x="13" y="10.5" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="600">Surface</text>
      </svg>
    </div>
  </React.Fragment>,
  /* Laptop */
  <React.Fragment>
    <div className="dvc-logo-mark" title="Windows">
      <svg viewBox="0 0 60 12" height="12" fill="#1d1d1f">
        <rect x="0" y="0" width="4.5" height="4.5" rx="0.5"/>
        <rect x="5.8" y="0" width="4.5" height="4.5" rx="0.5"/>
        <rect x="0" y="5.8" width="4.5" height="4.5" rx="0.5"/>
        <rect x="5.8" y="5.8" width="4.5" height="4.5" rx="0.5"/>
        <text x="13" y="10.5" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="600">Windows</text>
      </svg>
    </div>
    <div className="dvc-logo-mark" title="macOS">
      <svg viewBox="0 0 50 13" height="13" fill="#1d1d1f">
        <path d="M8.18 7.55c-.24.55-.36.8-.68 1.28-.44.67-1.06 1.5-1.83 1.51-.68.01-.86-.44-1.79-.43-.92.02-1.12.44-1.8.43-.77-.01-1.35-.77-1.79-1.44C-.06 7.43-.43 5.36.15 4.14c.4-.81 1.17-1.32 1.98-1.34.74-.01 1.2.45 1.82.45.6 0 .96-.46 1.83-.45.73.01 1.4.41 1.79 1.07-1.58.89-1.32 3.18.65 3.27zM5.5 1.37c.04.58-.17 1.16-.52 1.58-.36.43-.93.71-1.47.67-.06-.55.17-1.13.52-1.52.37-.43.96-.71 1.47-.73z"/>
        <text x="10" y="11" fontFamily="-apple-system,BlinkMacSystemFont,Arial,sans-serif" fontSize="10" fontWeight="600">macOS</text>
      </svg>
    </div>
    <div className="dvc-logo-mark" title="Linux">
      <svg viewBox="0 0 34 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10.5" fontWeight="500" fill="#1d1d1f">Linux</text></svg>
    </div>
    <div className="dvc-logo-mark" title="ChromeOS">
      <svg viewBox="0 0 58 12" height="11"><text y="11" fontFamily="Arial,sans-serif" fontSize="10.5" fontWeight="500" fill="#1d1d1f">ChromeOS</text></svg>
    </div>
  </React.Fragment>,
];

function DeviceCompat() {
  const C = COPY[window.locale];

  React.useEffect(() => {
    const grid = document.querySelector('.dvc-grid');
    if (grid && window.innerWidth <= 560) {
      const origCards = Array.from(grid.querySelectorAll('.dvc-card'));
      origCards.forEach(c => { c.classList.add('visible'); });
      origCards.forEach(c => grid.appendChild(c.cloneNode(true)));
      return;
    }
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.dvc-card').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="devcompat" id="enheter">
      <div className="devcompat-inner">
        <div className="feat-header reveal">
          <div className="eyebrow eyebrow-muted">Kompatibilitet</div>
          <h2 className="title">
            {C.deviceHeadline}<br />
            <em>{C.deviceSub}</em>
          </h2>
          <p className="sub-lg">{C.deviceIntro}</p>
        </div>

        <div className="dvc-grid">
          {C.devices.map((d, i) => (
            <div className="dvc-card" key={d.name}>
              <div className="dvc-visual">
                <img src={DEVICE_IMAGES[i]} alt={DEVICE_ALT[i]} width="400" height="300" loading="lazy" decoding="async" />
              </div>
              <div className="dvc-body">
                <h3 className="dvc-name">{d.name}</h3>
                <p className="dvc-desc">{d.desc}</p>
              </div>
              <div className="dvc-logos-wrap">
                <div className="dvc-logos-label">{C.devicesLogosLabel[i]}</div>
                <div className="dvc-logos">{DEVICE_LOGOS[i]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;

    const CO_COPY = {
      SE: {
        planNames:    { '3m': '3 Månader', '1y': '1 År', '3y': '3 År + 6 mån gratis' },
        planSub:      { '3m': 'Engångsbelopp', '1y': 'Spara vs månadsvis', '3y': 'Bästa värdet — 3,5 år totalt' },
        chipUnit1: 'skärm', chipUnitN: 'skärmar', chipIncluded: 'Ingår',
        sumExtra: n => '+' + n + ' skärm' + (n > 1 ? 'ar' : ''),
        numLocale: 'sv-SE',
      },
      NO: {
        planNames:    { '3m': '3 Måneder', '1y': '1 År', '3y': '3 År + 6 mnd gratis' },
        planSub:      { '3m': 'Engangsbetaling', '1y': 'Spar vs. månedlig', '3y': 'Beste verdi — 3,5 år totalt' },
        chipUnit1: 'skjerm', chipUnitN: 'skjermer', chipIncluded: 'Inkludert',
        sumExtra: n => '+' + n + ' skjerm' + (n > 1 ? 'er' : ''),
        numLocale: 'nb-NO',
      },
    };
    const C = CO_COPY[window.locale || 'SE'];
    const PLANS = {
      'SE': {
        '3m': { base: 349,  extra: 175 },
        '1y': { base: 699,  extra: 350 },
        '3y': { base: 1299, extra: 650 },
      },
      'NO': {
        '3m': { base: 379,  extra: 189 },
        '1y': { base: 749,  extra: 379 },
        '3y': { base: 1399, extra: 699 },
      }
    }[window.locale || 'SE'];

    let selPlan = '1y', selExtra = 0, planTapped = false, step2Active = false;

    function fmt(n) { return n.toLocaleString(C.numLocale); }
    function isMob() { return window.matchMedia('(max-width: 860px)').matches; }
    function q(id) { return root.querySelector('#' + id); }

    function updateChipPrices() {
      const ppu = PLANS[selPlan].extra;
      for (let i = 1; i <= 5; i++) {
        const el = q('chip-price-' + i);
        if (el) el.textContent = '+' + fmt(i * ppu) + ' kr';
      }
    }

    function updateSummary() {
      const plan = PLANS[selPlan], extra = selExtra * plan.extra, total = plan.base + extra;
      if (q('sum-plan-name'))  q('sum-plan-name').textContent  = C.planNames[selPlan];
      if (q('sum-base-price')) q('sum-base-price').textContent = fmt(plan.base) + ' kr';
      if (q('sum-total'))      q('sum-total').textContent      = fmt(total);
      if (q('cta-price'))      q('cta-price').textContent      = fmt(total);
      const extraRow = q('sum-extra-row');
      if (extraRow) {
        if (selExtra > 0) {
          extraRow.classList.add('visible');
          q('sum-extra-label').textContent = C.sumExtra(selExtra);
          q('sum-extra-price').textContent = '+' + fmt(extra) + ' kr';
        } else { extraRow.classList.remove('visible'); }
      }
      if (q('ps-name'))  q('ps-name').textContent  = C.planNames[selPlan];
      if (q('ps-price')) q('ps-price').textContent = fmt(plan.base) + ' kr';
      const mcbTotal = root.querySelector('.m-cta-total');
      const mcbAmt   = root.querySelector('.m-cta-amount');
      if (mcbTotal && mcbAmt) {
        mcbTotal.classList.add('updating');
        requestAnimationFrame(() => {
          mcbAmt.textContent = fmt(total);
          requestAnimationFrame(() => mcbTotal.classList.remove('updating'));
        });
      }
    }

    const mCtaEl  = root.querySelector('.m-cta');
    const mCtaBtn = root.querySelector('.m-cta-btn');
    const checkoutPanel = root.querySelector('.checkout-grid .co-panel');

    function syncCheckoutCtaState() {
      const active = !!(mCtaEl && isMob() && mCtaEl.classList.contains('m-cta-up'));
      document.body.classList.toggle('checkout-cta-active', active);
      document.documentElement.classList.toggle('checkout-cta-active', active);
    }

    function keepCheckoutInView() {
      if (!isMob() || !checkoutPanel) return;
      const rect = checkoutPanel.getBoundingClientRect();
      const ctaHeight = mCtaEl && mCtaEl.classList.contains('m-cta-up') ? mCtaEl.getBoundingClientRect().height : 0;
      const viewportSpace = Math.max(320, window.innerHeight - ctaHeight - 20);
      const target = window.scrollY + rect.top - Math.max(14, (viewportSpace - rect.height) / 2);
      window.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
    }

    function revealDevices() {
      root.querySelector('#plan-grid').classList.add('collapsed');
      root.querySelector('#plan-summary').classList.add('visible');
      root.querySelector('#xdev-block').classList.add('xdev-revealed');
      root.querySelector('#mstep-1').className = 'm-step done';
      root.querySelector('#mstep-2').className = 'm-step active';
      if (mCtaEl) mCtaEl.classList.add('m-cta-up');
      syncCheckoutCtaState();
      step2Active = true;
      refreshMobileCta();
      keepCheckoutInView();
    }

    function changePlan() {
      root.querySelector('#plan-grid').classList.remove('collapsed');
      root.querySelector('#plan-summary').classList.remove('visible');
      root.querySelector('#xdev-block').classList.remove('xdev-revealed');
      if (mCtaEl) mCtaEl.classList.remove('m-cta-up');
      syncCheckoutCtaState();
      step2Active = false; planTapped = false;
      root.querySelector('#mstep-1').className = 'm-step active';
      root.querySelector('#mstep-2').className = 'm-step';
      refreshMobileCta();
      keepCheckoutInView();
    }

    function selectPlan(tile) {
      root.querySelectorAll('.plan-tile').forEach(t => t.classList.remove('selected'));
      tile.classList.add('selected');
      selPlan = tile.dataset.plan;
      updateChipPrices();
      updateSummary();
      if (isMob()) {
        if (!planTapped) { planTapped = true; revealDevices(); }
        else if (mCtaEl) {
          mCtaEl.classList.add('m-cta-up');
          syncCheckoutCtaState();
        }
      }
    }

    function selectExtra(chip) {
      root.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));
      chip.classList.add('selected');
      selExtra = parseInt(chip.dataset.extra, 10);
      updateSummary();
    }

    function goToCheckout() {
      const links = window.CHECKOUT_LINKS;
      const url = links && links[selPlan] && links[selPlan][selExtra];
      if (url) window.location.href = url;
    }

    function refreshMobileCta() {
      if (!mCtaEl || !mCtaBtn) return;
      if (!isMob()) {
        mCtaEl.classList.remove('m-cta-up');
        syncCheckoutCtaState();
        return;
      }
      const rect = (checkoutPanel || root).getBoundingClientRect();
      const inView = rect.top < window.innerHeight - 80 && rect.bottom > 80;
      if (!inView) {
        mCtaEl.classList.remove('m-cta-up');
        syncCheckoutCtaState();
        return;
      }
      if (!step2Active) {
        mCtaBtn.textContent = 'Välj antal skärmar →';
        mCtaBtn.onclick = revealDevices;
      } else {
        mCtaEl.classList.add('m-cta-up');
        mCtaBtn.textContent = 'Gå till kassa →';
        mCtaBtn.onclick = goToCheckout;
      }
      syncCheckoutCtaState();
    }

    root.querySelectorAll('.plan-tile').forEach(t => t.addEventListener('click', () => selectPlan(t)));
    root.querySelectorAll('.chip').forEach(c => c.addEventListener('click', () => selectExtra(c)));
    root.querySelector('.ps-change')?.addEventListener('click', changePlan);
    root.querySelector('#cta-btn')?.addEventListener('click', goToCheckout);

    updateChipPrices();
    updateSummary();

    let snapCooled = false;
    let snapTimer = null;
    let lastClickInSection = 0;
    function noteCheckoutClick() {
      lastClickInSection = Date.now();
      snapCooled = true;
      setTimeout(() => { snapCooled = false; }, 1800);
    }
    root.addEventListener('pointerdown', noteCheckoutClick, { passive: true });
    root.addEventListener('click', noteCheckoutClick);
    function snapToSection() {
      if (snapCooled || !isMob()) return;
      if (Date.now() - lastClickInSection < 2000) return;
      const rect = root.getBoundingClientRect();
      const partial = rect.top < window.innerHeight * 0.7 && rect.top > -rect.height * 0.3;
      if (partial && Math.abs(rect.top) > 4) {
        snapCooled = true;
        keepCheckoutInView();
        setTimeout(() => { snapCooled = false; }, 1200);
      }
    }
    function onScroll() {
      refreshMobileCta();
      clearTimeout(snapTimer);
      snapTimer = setTimeout(snapToSection, 120);
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', refreshMobileCta);
    refreshMobileCta();

    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', refreshMobileCta);
      root.removeEventListener('pointerdown', noteCheckoutClick);
      root.removeEventListener('click', noteCheckoutClick);
      clearTimeout(snapTimer);
      document.body.classList.remove('checkout-cta-active');
      document.documentElement.classList.remove('checkout-cta-active');
    };
  }, []);

  return (
    <section className="pricing" id="bestall" aria-label="Priser" ref={ref}>
      <div className="feat-header reveal">
        <div className="eyebrow">Priser</div>
        <h2 className="title">Välj ditt paket.<br /><em>Börja streama direkt.</em></h2>
      </div>

      <div className="co-wrap">
        <div className="checkout-grid">

          <div className="co-panel">
            <div className="co-panel-label">Välj ditt paket</div>
            <div className="m-steps" id="m-steps">
              <div className="m-step active" id="mstep-1"></div>
              <div className="m-step" id="mstep-2"></div>
            </div>
            <div className="co-panel-section-label" style={{marginTop:0}}>Abonnemang</div>

            <div className="plan-summary" id="plan-summary">
              <div className="ps-info">
                <div className="ps-name" id="ps-name">1 År</div>
                <div className="ps-price" id="ps-price">699 kr</div>
              </div>
              <button className="ps-change">Ändra ↩</button>
            </div>

            <div className="plan-grid" id="plan-grid">
              <div className="plan-tile" data-plan="3m">
                <div className="pt-tick"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M2 5.2L4 7L8 3" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
                <div className="pt-row"><div className="pt-name">3 Månader</div></div>
                <div className="pt-price"><span className="pt-amount">349</span><span className="pt-unit">kr</span><div className="pt-sub">Engångsbelopp</div></div>
              </div>
              <div className="plan-tile selected" data-plan="1y">
                <div className="pt-tick"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M2 5.2L4 7L8 3" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
                <div className="pt-row"><div className="pt-name">1 År</div><div className="pt-badge">Populärast ★</div></div>
                <div className="pt-price"><span className="pt-amount">699</span><span className="pt-unit">kr</span><div className="pt-sub">Spara vs månadsvis</div></div>
              </div>
              <div className="plan-tile full-width" data-plan="3y">
                <div className="pt-tick"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M2 5.2L4 7L8 3" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
                <div className="pt-row"><div className="pt-name">3 År + 6 mån gratis <span style={{fontSize:'15px',lineHeight:'1'}}>🎁</span></div></div>
                <div className="pt-price"><span className="pt-amount">1 299</span><span className="pt-unit">kr</span><div className="pt-sub">Bästa värdet — 3,5 år totalt</div></div>
              </div>
            </div>

            <div className="xdev-block" id="xdev-block">
              <div className="xdev-title">Antal skärmar</div>
              <div className="xdev-icons">
                <svg width="36" height="28" viewBox="0 0 36 28" fill="none" aria-hidden="true"><rect x="1" y="1" width="34" height="22" rx="3" stroke="currentColor" strokeWidth="1.6"/><path d="M11 27h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M18 23v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                <svg width="18" height="30" viewBox="0 0 18 30" fill="none" aria-hidden="true"><rect x="1" y="1" width="16" height="28" rx="3.5" stroke="currentColor" strokeWidth="1.6"/><path d="M7 24.5h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><line x1="6" y1="4" x2="12" y2="4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                <svg width="22" height="30" viewBox="0 0 22 30" fill="none" aria-hidden="true"><rect x="1" y="1" width="20" height="28" rx="3.5" stroke="currentColor" strokeWidth="1.6"/><circle cx="11" cy="24.5" r="1.5" fill="currentColor"/></svg>
                <svg width="38" height="28" viewBox="0 0 38 28" fill="none" aria-hidden="true"><rect x="3" y="1" width="32" height="20" rx="2.5" stroke="currentColor" strokeWidth="1.6"/><path d="M1 22h36" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M14 22l1.5 5h7L24 22" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
              </div>
              <div className="device-chips" id="device-chips">
                <div className="chip selected" data-extra="0"><div className="ch-num">1</div><div className="ch-unit">skärm</div><div className="ch-price">Ingår</div></div>
                <div className="chip" data-extra="1"><div className="chip-pop-badge">Vanligast</div><div className="ch-num">2</div><div className="ch-unit">skärmar</div><div className="ch-price" id="chip-price-1"></div></div>
                <div className="chip" data-extra="2"><div className="ch-num">3</div><div className="ch-unit">skärmar</div><div className="ch-price" id="chip-price-2"></div></div>
                <div className="chip" data-extra="3"><div className="ch-num">4</div><div className="ch-unit">skärmar</div><div className="ch-price" id="chip-price-3"></div></div>
                <div className="chip" data-extra="4"><div className="ch-num">5</div><div className="ch-unit">skärmar</div><div className="ch-price" id="chip-price-4"></div></div>
                <div className="chip" data-extra="5"><div className="ch-num">6</div><div className="ch-unit">skärmar</div><div className="ch-price" id="chip-price-5"></div></div>
              </div>
              <p className="xdev-note">Varje skärm kan titta på olika kanaler samtidigt.</p>
              <div className="co-trust-row m-panel-trust">
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="2" y="5" width="10" height="8" rx="1.5" stroke="#34c759" strokeWidth="1.4"/><path d="M4.5 5V3.5a2.5 2.5 0 0 1 5 0V5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round"/></svg>Säker Shopify-betalning</div>
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="6" stroke="#34c759" strokeWidth="1.4"/><path d="M4.5 7.2L6.2 8.8L9.5 5.5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>Inloggning inom 15 minuter</div>
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1.5L12 4v4c0 2.5-2.2 4.4-5 5C4.2 12.4 2 10.5 2 8V4L7 1.5z" stroke="#34c759" strokeWidth="1.4" strokeLinejoin="round"/></svg>Krypterad anslutning (TLS 1.3)</div>
              </div>
            </div>
          </div>

          <div className="summary-panel">
            <div className="co-panel">
              <div className="co-panel-label">Din beställning</div>
              <div className="order-rows">
                <div className="order-row"><span className="or-label">Paket</span><span className="or-value" id="sum-plan-name">1 År</span></div>
                <div className="order-row"><span className="or-label">Baspris</span><span className="or-value mono" id="sum-base-price">699 kr</span></div>
                <div className="order-row extra-row" id="sum-extra-row"><span className="or-label" id="sum-extra-label">Tilläggsenheter</span><span className="or-value mono" id="sum-extra-price">+0 kr</span></div>
              </div>
              <div className="order-total">
                <div className="ot-label">Totalt att betala</div>
                <div className="ot-price"><span id="sum-total">699</span><span className="ot-kr">kr</span></div>
                <div className="ot-note">Engångsbetalning — ingen prenumeration</div>
              </div>
              <div className="co-trust-row">
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="2" y="5" width="10" height="8" rx="1.5" stroke="#34c759" strokeWidth="1.4"/><path d="M4.5 5V3.5a2.5 2.5 0 0 1 5 0V5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round"/></svg>Säker Shopify-betalning</div>
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><circle cx="7" cy="7" r="6" stroke="#34c759" strokeWidth="1.4"/><path d="M4.5 7.2L6.2 8.8L9.5 5.5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>Inloggning inom 15 minuter</div>
                <div className="co-trust-item"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M7 1.5L12 4v4c0 2.5-2.2 4.4-5 5C4.2 12.4 2 10.5 2 8V4L7 1.5z" stroke="#34c759" strokeWidth="1.4" strokeLinejoin="round"/></svg>Krypterad anslutning (TLS 1.3)</div>
              </div>
              <button className="co-cta-btn" id="cta-btn">
                Gå till säker kassa —&nbsp;<span className="cta-price" id="cta-price">699</span>&nbsp;kr →
              </button>
              <div className="pay-strip">
                <div className="pay-icon" style={{background:'#1a1f71',width:'42px'}}><svg width="30" height="10" viewBox="0 0 30 10" aria-hidden="true"><text x="0" y="9" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="700" fontStyle="italic" fill="white" letterSpacing="-0.5">VISA</text></svg></div>
                <div className="pay-icon" style={{width:'38px',padding:'4px 6px'}}><svg width="26" height="16" viewBox="0 0 26 16" aria-hidden="true"><circle cx="9" cy="8" r="8" fill="#EB001B"/><circle cx="17" cy="8" r="8" fill="#F79E1B"/><path d="M13 2.7a8 8 0 0 1 0 10.6A8 8 0 0 1 13 2.7z" fill="#FF5F00"/></svg></div>
                <div className="pay-icon" style={{background:'#FF3887',borderColor:'#e02d78',width:'56px',padding:'3px 7px'}}><svg width="42" height="16" viewBox="0 0 42 16" aria-hidden="true"><path d="M3.2 11.8 C2.1 9.6 2.6 7 4.8 5.5 C6.6 4.2 9 4.5 10.1 6 C10.9 7.1 10.5 8.6 9.2 9.4 C8.1 10.1 6.6 10 5.9 11.1 C5.1 12.4 5.9 13.9 7.4 14.3 C9.1 14.8 11 13.8 11.7 12.2" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round"/><text x="15" y="12.5" fontFamily="Arial,Helvetica,sans-serif" fontSize="9" fontWeight="700" fill="white">wish</text></svg></div>
                <div className="pay-icon" style={{background:'#fff',width:'54px',padding:'2px 6px',borderColor:'rgba(0,0,0,0.12)'}}><svg width="42" height="14" viewBox="0 0 42 14" aria-hidden="true"><circle cx="7" cy="7" r="7" fill="#00D66B"/><path d="M5.4 4.8L8.2 7L5.4 9.2" fill="none" stroke="#0A2E1A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><text x="16" y="10.5" fontFamily="Arial,Helvetica,sans-serif" fontSize="9" fontWeight="700" fill="#0A0A0A">link</text></svg></div>
                <div className="pay-icon" style={{background:'#000',width:'52px',padding:'4px 7px'}}><svg width="38" height="14" viewBox="0 0 38 14" aria-hidden="true"><path d="M7.2 1.4c-.5.6-1.3 1-2 .94-.1-.74.27-1.52.74-2.02.5-.56 1.3-.96 1.96-.98.08.76-.2 1.5-.7 2.06zm.72 1.14c-1.12-.06-2.08.62-2.62.62-.54 0-1.36-.6-2.26-.58C1.86 2.6.9 3.24.4 4.24c-1.04 2.06-.28 5.1.74 6.78.5.8 1.1 1.68 1.9 1.66.76-.02.98-.5 1.92-.5.94 0 1.14.5 1.94.48.82 0 1.36-.82 1.86-1.62.58-.92.82-1.82.84-1.86C9.56 9.12 8 8.22 8 6.36c0-1.54 1.26-2.28 1.32-2.34-.72-1.04-1.84-1.16-2.4-1.48z" fill="white"/><text x="12" y="11" fontFamily="-apple-system,BlinkMacSystemFont,sans-serif" fontSize="8" fontWeight="600" fill="white">Pay</text></svg></div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div className="m-cta" id="m-cta">
        <div className="m-cta-main">
          <div className="m-cta-price">
            <div className="m-cta-total"><span className="m-cta-amount">699</span> kr</div>
            <div className="m-cta-note">Engångsbetalning</div>
          </div>
          <button className="m-cta-btn">Välj antal skärmar →</button>
        </div>
        <div className="m-cta-icons">
          <div className="pay-icon" style={{background:'#1a1f71',width:'40px'}}><svg width="28" height="9" viewBox="0 0 30 10" aria-hidden="true"><text x="0" y="9" fontFamily="Arial,sans-serif" fontSize="10" fontWeight="700" fontStyle="italic" fill="white" letterSpacing="-0.5">VISA</text></svg></div>
          <div className="pay-icon" style={{width:'34px',padding:'3px 5px'}}><svg width="22" height="13" viewBox="0 0 26 16" aria-hidden="true"><circle cx="9" cy="8" r="8" fill="#EB001B"/><circle cx="17" cy="8" r="8" fill="#F79E1B"/><path d="M13 2.7a8 8 0 0 1 0 10.6A8 8 0 0 1 13 2.7z" fill="#FF5F00"/></svg></div>
          <div className="pay-icon" style={{background:'#FF3887',borderColor:'#e02d78',width:'50px',padding:'2px 6px'}}><svg width="38" height="14" viewBox="0 0 42 16" aria-hidden="true"><path d="M3.2 11.8 C2.1 9.6 2.6 7 4.8 5.5 C6.6 4.2 9 4.5 10.1 6 C10.9 7.1 10.5 8.6 9.2 9.4 C8.1 10.1 6.6 10 5.9 11.1 C5.1 12.4 5.9 13.9 7.4 14.3 C9.1 14.8 11 13.8 11.7 12.2" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round"/><text x="15" y="12.5" fontFamily="Arial,Helvetica,sans-serif" fontSize="9" fontWeight="700" fill="white">wish</text></svg></div>
          <div className="pay-icon" style={{background:'#fff',width:'54px',padding:'2px 6px',borderColor:'rgba(0,0,0,0.12)'}}><svg width="42" height="14" viewBox="0 0 42 14" aria-hidden="true"><circle cx="7" cy="7" r="7" fill="#00D66B"/><path d="M5.4 4.8L8.2 7L5.4 9.2" fill="none" stroke="#0A2E1A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><text x="16" y="10.5" fontFamily="Arial,Helvetica,sans-serif" fontSize="9" fontWeight="700" fill="#0A0A0A">link</text></svg></div>
          <div className="pay-icon" style={{background:'#000',width:'48px',padding:'3px 6px'}}><svg width="34" height="12" viewBox="0 0 38 14" aria-hidden="true"><path d="M7.2 1.4c-.5.6-1.3 1-2 .94-.1-.74.27-1.52.74-2.02.5-.56 1.3-.96 1.96-.98.08.76-.2 1.5-.7 2.06zm.72 1.14c-1.12-.06-2.08.62-2.62.62-.54 0-1.36-.6-2.26-.58C1.86 2.6.9 3.24.4 4.24c-1.04 2.06-.28 5.1.74 6.78.5.8 1.1 1.68 1.9 1.66.76-.02.98-.5 1.92-.5.94 0 1.14.5 1.94.48.82 0 1.36-.82 1.86-1.62.58-.92.82-1.82.84-1.86C9.56 9.12 8 8.22 8 6.36c0-1.54 1.26-2.28 1.32-2.34-.72-1.04-1.84-1.16-2.4-1.48z" fill="white"/><text x="12" y="11" fontFamily="-apple-system,BlinkMacSystemFont,sans-serif" fontSize="8" fontWeight="600" fill="white">Pay</text></svg></div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const listRef = React.useRef(null);
  const C = COPY[window.locale];

  React.useEffect(() => {
    const list = listRef.current;
    if (!list) return;
    const cards = Array.from(list.querySelectorAll('.faq-item'));
    const faqSection = list.closest('.faq');
    let openCount = 0;
    let ctaUpgraded = false;

    function upgradeWhatsappCta() {
      if (ctaUpgraded || !faqSection) return;
      const el = faqSection.querySelector('.faq-wa-link');
      if (!el) return;
      ctaUpgraded = true;
      el.classList.add('faq-wa-primary');
      el.setAttribute('aria-label', 'Kontakta oss på WhatsApp');
      if (!el.querySelector('svg')) {
        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        icon.setAttribute('width', '18');
        icon.setAttribute('height', '18');
        icon.setAttribute('viewBox', '0 0 24 24');
        icon.setAttribute('fill', 'white');
        icon.setAttribute('aria-hidden', 'true');
        icon.setAttribute('style', 'flex-shrink:0');
        icon.innerHTML = '<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>';
        el.insertBefore(icon, el.firstChild);
      }
    }

    cards.forEach(card => {
      const trigger = card.querySelector('.faq-q');
      function toggle(e) {
        e.stopPropagation();
        const isOpen = card.classList.contains('open');
        cards.forEach(c => {
          c.classList.remove('open');
          c.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
        });
        if (!isOpen) {
          card.classList.add('open');
          trigger.setAttribute('aria-expanded', 'true');
          openCount += 1;
          if (openCount >= 3) upgradeWhatsappCta();
        }
      }
      trigger.addEventListener('click', toggle);
      trigger.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(e); }
      });
    });
  }, []);

  return (
    <section className="faq" id="support" aria-label="Vanliga frågor">
      <h2 className="title">{C.faqTitle}</h2>
      <div className="faq-list" ref={listRef}>
        {C.faqItems.map(([q, a], i) => (
          <div className="faq-item" key={i}>
            <div className="faq-q" role="button" tabIndex={0} aria-expanded="false">
              <span>{q}</span>
              <div className="faq-pin" aria-hidden="true">+</div>
            </div>
            <div className="faq-a" dangerouslySetInnerHTML={{ __html: a }} />
          </div>
        ))}
      </div>
      <div className="faq-wa-wrap">
        <span>{C.faqNotFound}</span>
        <a href={C.whatsappSupportUrl} target="_blank" rel="noopener" className="faq-wa-link">
          {C.faqAsk}
        </a>
      </div>
    </section>
  );
}

function FinalCta() {
  const C = COPY[window.locale];
  return (
    <section className="final">
      <h2 className="title reveal">{C.finalTitle1} <em>{C.finalTitle2}</em></h2>
      <p className="sub-lg reveal reveal-d1">
        {C.finalSub}
      </p>
      <div className="cta-row reveal reveal-d2">
        <a href="#bestall" className="btn btn-blue">{C.cta}</a>
        <a href={C.whatsappTestUrl} target="_blank" rel="noopener" className="btn-text">{C.cta2}</a>
      </div>
      <p style={{marginTop:'16px', fontSize:'14px', color:'var(--tvm-text-3)', textAlign:'center'}}>
        {C.finalQuestions} <a href={C.whatsappSupportUrl} target="_blank" rel="noopener" style={{color:'#0071e3', fontWeight:500, textDecoration:'none'}}>{C.faqAsk}</a>
      </p>
    </section>
  );
}

function Footer() {
  const C = COPY[window.locale];
  return (
    <footer className="footer">
      <div className="foot-grid">
        <div className="foot-col">
          <div className="foot-brand">TVmomento</div>
          <p className="foot-tag">En prenumeration. Allt du älskar.</p>
        </div>
        <div className="foot-col">
          <h4>{C.footerService}</h4>
          <a href="index.html#bestall" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2 2h4l6 6-4 4-6-6V2z"/><circle cx="5" cy="5" r="0.8" fill="currentColor" stroke="none"/></svg>
            {C.footerLinksService[1]}
          </a>
          <a href="kanallista.html" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="1" y="2" width="12" height="8" rx="1.5"/><path d="M4.5 12.5h5"/><path d="M7 10v2.5"/></svg>
            {C.footerLinksService[0]}
          </a>
          <a href="instruktioner.html" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="1" width="8" height="12" rx="1.5"/><path d="M5 5h4"/><path d="M5 7.5h4"/><path d="M5 10h2.5"/></svg>
            {C.footerLinksSupport[0]}
          </a>
        </div>
        <div className="foot-col">
          <h4>{C.footerSupport}</h4>
          <a href="mailto:tvmomentoservice@gmail.com" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="1" y="3" width="12" height="9" rx="1.5"/><path d="M1 3l6 5.5L13 3"/></svg>
            {C.footerLinksSupport[1]}
          </a>
          <a href={C.whatsappSupportUrl} target="_blank" rel="noopener" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 7.5a5 5 0 1 1-7.5 4.3L1 13l1.2-3.5A5 5 0 1 1 12 7.5z"/></svg>
            {C.footerLinksSupport[2]}
          </a>
        </div>
        <div className="foot-col">
          <h4>{C.footerLegal}</h4>
          <a href="villkor.html" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="1" width="8" height="12" rx="1.5"/><path d="M5 5h4"/><path d="M5 7.5h3"/></svg>
            {C.footerLinksLegal[0]}
          </a>
          <a href="integritetspolicy.html" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M7 1l5 2v4c0 3-2.5 5.5-5 6.5C4.5 12.5 2 10 2 7V3l5-2z"/></svg>
            {C.footerLinksLegal[1]}
          </a>
          <a href="integritetspolicy.html#cookies" className="footer-link-icon">
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="7" cy="7" r="6"/><circle cx="5" cy="6" r="0.8" fill="currentColor" stroke="none"/><circle cx="9" cy="5" r="0.8" fill="currentColor" stroke="none"/><circle cx="8" cy="9" r="0.8" fill="currentColor" stroke="none"/></svg>
            Cookies
          </a>
        </div>
      </div>
      <div className="foot-bottom">© 2026 Tvmomento · SE / NO</div>
    </footer>
  );
}

function RecentlyBought() {
  const purchases = [
    { name:"Erik J.",      plan:"1-årsplan",       where:"Stockholm",  ago:"just nu",  color:"#6e6e73" },
    { name:"Amina K.",     plan:"3-årsplan",        where:"Göteborg",   ago:"1 min",    color:"#8e8e93" },
    { name:"Lars P.",      plan:"3-månadersplan",   where:"Oslo",       ago:"3 min",    color:"#636366" },
    { name:"Sara H.",      plan:"1-årsplan",        where:"Malmö",      ago:"5 min",    color:"#8e8e93" },
    { name:"Mohammed A.",  plan:"3-årsplan",        where:"Linköping",  ago:"7 min",    color:"#6e6e73" },
    { name:"Ingrid N.",    plan:"1-årsplan",        where:"Bergen",     ago:"9 min",    color:"#8e8e93" },
  ];
  const CYCLE   = 4500;
  const STEP_MS = 80;

  const [idx, setIdx]       = React.useState(0);
  const [out, setOut]       = React.useState(false);
  const [barPct, setBarPct] = React.useState(0);
  const barTimer            = React.useRef(null);

  const startBar = React.useCallback(() => {
    clearInterval(barTimer.current);
    setBarPct(0);
    let pct = 0;
    barTimer.current = setInterval(() => {
      pct = Math.min(100, pct + (STEP_MS / CYCLE) * 100);
      setBarPct(pct);
      if (pct >= 100) clearInterval(barTimer.current);
    }, STEP_MS);
  }, []);

  React.useEffect(() => {
    startBar();
    const cycle = setInterval(() => {
      setOut(true);
      setTimeout(() => {
        setIdx(i => (i + 1) % purchases.length);
        setOut(false);
        startBar();
      }, 400);
    }, CYCLE);
    return () => { clearInterval(cycle); clearInterval(barTimer.current); };
  }, [startBar]);

  const p = purchases[idx];

  return (
    <div className="rb-widget" aria-live="polite" aria-atomic="true">
      <div className={"rb-toast" + (out ? " rb-out" : "")}>
        <div className="rb-avatar" style={{ background: p.color }}>{p.name[0]}</div>
        <div className="rb-text">
          <div className="rb-eyebrow">Nytt köp</div>
          <div className="rb-name">{p.name}</div>
          <div className="rb-detail">{p.plan} · {p.where}</div>
        </div>
        <div className="rb-right">
          <div className="rb-time">{p.ago}</div>
          <div className="rb-check">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
              <path d="M2 5.2L4 7L8 3" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
      <div className="rb-bar">
        <div className="rb-bar-fill" style={{ width: barPct + '%', transition: barPct === 0 ? 'none' : 'width 0.08s linear' }} />
      </div>
    </div>
  );
}

function Testimonials() {
  React.useEffect(() => {
    const DIR    = 'assets/ugc/';
    const SPEED  = 0.45;
    const GAP    = 14;
    const VID_RE = /\.(webm|mp4|mov)$/i;
    const IMG_RE = /\.(webp|jpg|jpeg|png)$/i;

    const REVIEWS = [
      { name: 'Maria S.',   text: 'Fantastisk tjänst! Kanalkvaliteten är överlägsen och priset är helt obeatable.' },
      { name: 'Johan K.',   text: 'Fungerar perfekt på min Fire TV. Inga avbrott, skarp bild i 4K.' },
      { name: 'Anna L.',    text: 'Har haft Tvmomento i 8 månader. Aldrig haft problem. Rekommenderar varmt.' },
      { name: 'Erik M.',    text: 'Priset är löjligt lågt jämfört med vad man får. 10/10 utan tvekan.' },
      { name: 'Sara B.',    text: 'Support svarade på 5 minuter och löste mitt problem direkt. Imponerande.' },
      { name: 'Thomas N.',  text: 'Bästa köpet jag gjort. Hela familjen är nöjd med kanalutbudet.' },
      { name: 'Karin P.',   text: '10 000+ kanaler är inte ett skämt. Det är bokstavligen allt man önskar sig.' },
      { name: 'Mikael R.',  text: 'Installationen tog 10 minuter. Nu ser jag all sport live utan avbrott.' },
      { name: 'Lena A.',    text: 'Bytte från Viaplay och sparar 400 kr i månaden. Bättre utbud dessutom!' },
      { name: 'Peter H.',   text: 'Extremt stabil anslutning. Inga buffringsproblem ens under rusningstid.' },
      { name: 'Cecilia M.', text: 'Superenkel installation och supporten är otroligt hjälpsam och snabb.' },
      { name: 'Anders L.',  text: 'Har provat allt — inget slår Tvmomento på pris och kanalutbud.' },
    ];

    const track1 = document.getElementById('ugc-track-1');
    const track2 = document.getElementById('ugc-track-2');
    const wrap1  = document.getElementById('ugc-wrap-1');
    const wrap2  = document.getElementById('ugc-wrap-2');
    if (!track1 || !track2) return;

    let offset1 = 0, setWidth1 = 0;
    let offset2 = 0, setWidth2 = 0;
    let rafId = null, isPaused = false;

    function tick() {
      if (!isPaused) {
        offset1 -= SPEED;
        if (offset1 <= -setWidth1) offset1 += setWidth1;
        track1.style.transform = `translateX(${offset1}px)`;

        offset2 += SPEED;
        if (offset2 >= 0) offset2 -= setWidth2;
        track2.style.transform = `translateX(${offset2}px)`;
      }
      rafId = requestAnimationFrame(tick);
    }

    function wireVideo(vid, bg, btn, cardEl) {
      vid.muted = true; vid.loop = true;
      ['muted','playsinline','webkit-playsinline','x5-playsinline'].forEach(a => vid.setAttribute(a, ''));
      vid.setAttribute('preload', 'none');
      const show = () => { if (bg) bg.style.opacity='0'; if (btn) btn.classList.add('ugc-play-hidden'); };
      const hide = () => { if (btn) btn.classList.remove('ugc-play-hidden'); };
      vid.addEventListener('playing', show); vid.addEventListener('pause', hide);
      vid.addEventListener('waiting', hide); vid.addEventListener('stalled', hide);
      vid.addEventListener('error', () => { vid.style.display='none'; if(bg) bg.style.opacity='1'; if(btn) btn.style.display='none'; });
      const io = new IntersectionObserver(entries => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            if (!vid.querySelector('source')) {
              if (vid.dataset.mp4)  { const s=document.createElement('source'); s.src=vid.dataset.mp4;  s.type='video/mp4'; vid.appendChild(s); }
              if (vid.dataset.webm) { const s=document.createElement('source'); s.src=vid.dataset.webm; s.type='video/webm; codecs="vp9,opus"'; vid.appendChild(s); }
              vid.load();
            }
            vid.play().catch(() => {});
          } else { vid.pause(); }
        });
      }, { threshold: 0.1, rootMargin: '0px 80px' });
      io.observe(cardEl);
      cardEl.addEventListener('click', () => { vid.paused ? vid.play().catch(()=>{}) : vid.pause(); });
    }

    function makeVideo(src) {
      const card = document.createElement('div'); card.className = 'ugc-card ugc-video';
      const bg = document.createElement('div'); bg.className = 'ugc-vid-bg'; card.appendChild(bg);
      const vid = document.createElement('video');
      if (/\.(mp4|mov)$/i.test(src)) { vid.dataset.mp4 = DIR + src; }
      else if (/\.webm$/i.test(src)) { vid.dataset.mp4 = DIR + src.replace(/\.webm$/i, '.mp4'); vid.dataset.webm = DIR + src; }
      card.appendChild(vid);
      const btn = document.createElement('div'); btn.className = 'ugc-play';
      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16"><path fill="white" d="M5 3L13 8L5 13Z"/></svg>';
      card.appendChild(btn);
      wireVideo(vid, bg, btn, card);
      return card;
    }

    function makeImage(src) {
      const card = document.createElement('div'); card.className = 'ugc-card ugc-img';
      const img = document.createElement('img'); img.src = DIR + src; img.alt = 'Kundomdöme'; img.loading = 'lazy'; img.decoding = 'async';
      card.appendChild(img); return card;
    }

    const STAR = '<svg viewBox="0 0 24 24" width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path fill="#00b67a" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>';

    function makeTpCard(r) {
      const card = document.createElement('div'); card.className = 'ugc-card ugc-tp';
      const head = document.createElement('div'); head.className = 'ugc-tp-head';
      const stars = document.createElement('div'); stars.className = 'ugc-tp-stars'; stars.innerHTML = STAR.repeat(5);
      const logo = document.createElement('span'); logo.className = 'ugc-tp-logo'; logo.textContent = 'Trustpilot';
      head.appendChild(stars); head.appendChild(logo); card.appendChild(head);
      const txt = document.createElement('p'); txt.className = 'ugc-tp-text';
      txt.textContent = '“' + r.text + '”'; card.appendChild(txt);
      const foot = document.createElement('div'); foot.className = 'ugc-tp-foot';
      const name = document.createElement('span'); name.className = 'ugc-tp-name'; name.textContent = r.name;
      const badge = document.createElement('span'); badge.className = 'ugc-tp-badge'; badge.textContent = 'Verifierad köp';
      foot.appendChild(name); foot.appendChild(badge); card.appendChild(foot);
      return card;
    }

    function cloneCard(orig) {
      const clone = orig.cloneNode(true);
      const ov = orig.querySelector('video'), cv = clone.querySelector('video');
      if (ov && cv) {
        cv.dataset.mp4 = ov.dataset.mp4 || ''; cv.dataset.webm = ov.dataset.webm || '';
        Array.from(cv.querySelectorAll('source')).forEach(s => s.remove());
        cv.setAttribute('preload', 'none');
        wireVideo(cv, clone.querySelector('.ugc-vid-bg'), clone.querySelector('.ugc-play'), clone);
      }
      return clone;
    }

    async function init() {
      let files = [
        'téléchargement (1).webp',
        'téléchargement (2).webp',
        'téléchargement (3).webp',
        'téléchargement (4).webp',
        'téléchargement.webp'
      ];
      
      if (!files.length) return;

      const vids = files.filter(f => VID_RE.test(f)), imgs = files.filter(f => IMG_RE.test(f));
      const mediaList = []; let vi = 0, ii = 0;
      while (vi < vids.length || ii < imgs.length) {
        if (vi < vids.length) mediaList.push({ v: true,  s: vids[vi++] });
        if (ii < imgs.length) mediaList.push({ v: false, s: imgs[ii++] });
      }

      // pattern: [media, tp, tp] per group; phaseOffset shifts which slot starts
      function buildCards(phaseOffset) {
        const cards = []; const groupCount = Math.max(mediaList.length, 4);
        let mi = 0, ri = 0;
        for (let g = 0; g < groupCount; g++) {
          for (let p = 0; p < 3; p++) {
            const slot = (p + phaseOffset) % 3;
            if (slot === 0) { const m = mediaList[mi % mediaList.length]; mi++; cards.push(m.v ? makeVideo(m.s) : makeImage(m.s)); }
            else            { cards.push(makeTpCard(REVIEWS[ri % REVIEWS.length])); ri++; }
          }
        }
        return cards;
      }

      // row 1: media → tp → tp → …   row 2: tp → tp → media → …
      const cards1 = buildCards(0); cards1.forEach(c => track1.appendChild(c));
      const cards2 = buildCards(1); cards2.forEach(c => track2.appendChild(c));

      requestAnimationFrame(() => requestAnimationFrame(() => {
        setWidth1 = cards1.reduce((sum, c) => sum + c.offsetWidth + GAP, 0);
        setWidth2 = cards2.reduce((sum, c) => sum + c.offsetWidth + GAP, 0);
        const minW = (window.innerWidth || 800) * 3;
        let n1 = 0; while (n1 * setWidth1 < minW) { cards1.forEach(c => track1.appendChild(cloneCard(c))); n1++; }
        let n2 = 0; while (n2 * setWidth2 < minW) { cards2.forEach(c => track2.appendChild(cloneCard(c))); n2++; }
        offset2 = -setWidth2; // row 2 starts right, scrolls left-to-right
        tick();
      }));
    }

    document.addEventListener('visibilitychange', () => { isPaused = document.hidden; });

    init();
    return () => { if (rafId) cancelAnimationFrame(rafId); };
  }, []);

  return (
    <section className="ugc-section" aria-label="Kundomdömen">
      <div className="feat-header reveal">
        <div className="eyebrow">Omdömen</div>
        <h2 className="title">2 400+ nöjda kunder.<br /><em>De pratar för oss.</em></h2>
      </div>
      <div className="ugc-rows">
        <div className="ugc-wrap" id="ugc-wrap-1">
          <div className="ugc-track" id="ugc-track-1" />
        </div>
        <div className="ugc-wrap" id="ugc-wrap-2">
          <div className="ugc-track" id="ugc-track-2" />
        </div>
      </div>
    </section>
  );
}

function WhatsAppFloat() {
  return (
    <a
      className="wa-float"
      href={COPY[window.locale].whatsappSupportUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Kontakta oss på WhatsApp"
      style={{
        position:'fixed', bottom:'24px', right:'24px', zIndex:9999,
        width:'56px', height:'56px', borderRadius:'50%',
        background:'#25D366', display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow:'0 4px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.15)',
        textDecoration:'none', flexShrink:0,
        transition:'transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.2s cubic-bezier(0.25,0.46,0.45,0.94)',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform='scale(1.1)'; e.currentTarget.style.boxShadow='0 8px 32px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.18)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform='scale(1)'; e.currentTarget.style.boxShadow='0 4px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.15)'; }}
    >
      <svg viewBox="0 0 24 24" fill="white" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
      </svg>
    </a>
  );
}

Object.assign(window, {
  ReceiptBad, ReceiptGood, ReceiptCompare,
  FeatureSavings, HowItWorks, DeviceCompat, Testimonials,
  Pricing, FAQ, FinalCta, Footer, RecentlyBought, WhatsAppFloat,
});