// 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',
          }}>{C.rbtAnnot1}</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', whiteSpace:'pre-line',
          }}>{C.rbtAnnot2}</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', whiteSpace:'pre-line',
          }}>{C.rbtAnnot3}</div>
        </div>
      )}

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

        <div className="r-meta">
          <span>{C.rbtCustomer}</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>{C.rbtBillLabel}</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">{C.rbtMonthLabel}</div>
        <div className="r-yearly">
          <span>eller </span>
          <span className="r-yearly-big">8 580</span>
          <span className="r-yearly-kr"> kr</span>
          <span> {C.rbtYearLabel}</span>
        </div>

        {!mini && (
          <>
            <hr className="r-foot-divider" />
            <div className="r-foot-row">
              <span>{C.rbtMoms}</span>
              <span>143,00</span>
            </div>
            <div className="r-foot-row">
              <span>Kort&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;4471</span>
              <span className="r-godkand">{C.rbtApproved}</span>
            </div>
            <div className="r-thanks">{C.rbtThanks}</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];
  const monthlyPrice = 58;
  const annualPrice  = 699;
  return (
    <div className="receipt-good">
      <div className="rg-head">TVMOMENTO</div>
      <div className="rg-price">{monthlyPrice} <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="#checkout" 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">{C.compareEyebrow}</div>
          <h3 className="heading" style={{fontSize:'clamp(30px,3.2vw,42px)',letterSpacing:'-1.2px',margin:'0 0 14px'}}>
            {C.compareSaveH1}<br/>{C.compareSaveH2}
          </h3>
          <p style={{fontSize:'17px',fontWeight:300,color:'var(--tvm-text-2)',lineHeight:1.6,margin:'0 0 28px',maxWidth:'380px'}}>
            {C.compareSaveBody}
          </p>
          <table className="save-table">
            <tbody>
              <tr><td>{C.compareRows[0][0]}</td><td>{C.compareRows[0][1]}</td><td>{C.compareRows[0][2]}</td></tr>
              <tr><td>{C.compareRows[1][0]}</td><td>{C.compareRows[1][1]}</td><td>{C.compareRows[1][2]}</td></tr>
              <tr className="save-row"><td>{C.compareRows[2][0]}</td><td>{C.compareRows[2][1]}</td><td>{C.compareRows[2][2]}</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() {
  const C = COPY[window.locale];
  const hwPrices = { m3: 349, y1: 699, y3: 1299 };

  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={C.howEyebrow}>
      <div className="how-head reveal">
        <div className="eyebrow eyebrow-muted">{C.howEyebrow}</div>
        <h2 className="title">{C.howH1}<br/><em>{C.howH2}</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">{C.howS1Verb}</h3>
            <p>{C.howS1Body}</p>
          </div>
          <div className="how-visual">
            <div className="how-plancmp">
              <div className="how-pcrow">
                <span className="how-pname">{C.howPlans[0]}</span>
                <div className="how-pright">
                  <span className="how-pamount">{hwPrices.m3}</span>
                  <span className="how-pmo">kr</span>
                </div>
              </div>
              <div className="how-pcrow how-pcrow-hl">
                <span className="how-pname">{C.howPlans[1]}</span>
                <div className="how-pright">
                  <span className="how-pamount">{hwPrices.y1}</span>
                  <span className="how-pmo">kr</span>
                  <span className="how-pbadge">{C.howPopular}</span>
                </div>
              </div>
              <div className="how-pcrow">
                <span className="how-pname">{C.howPlans[2]}</span>
                <div className="how-pright">
                  <span className="how-pamount">{hwPrices.y3}</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">{C.howS2VerbA} <em>{C.howS2VerbB}</em></h3>
            <p>{C.howS2Body}</p>
          </div>
          <div className="how-visual">
            <div className="how-pay">
              <div className="how-pay-row"><span>Tvmomento</span><b>{C.howPlans[1]}</b></div>
              <div className="how-pay-row" style={{marginTop:'6px'}}><span>{C.howPayLabel}</span><b>{hwPrices.y1} kr</b></div>
              <div className="how-pay-total"><span>{C.howPayTotal}</span><b>{hwPrices.y1} 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">{C.howS3VerbA} <em>{C.howS3VerbB}</em></h3>
            <p>{C.howS3Body}</p>
          </div>
          <div className="how-visual">
            <picture>
              <source srcSet="assets/how-step3.webp" type="image/webp" />
              <img className="how-step-img" src="assets/how-step3.png" alt={C.howS3Alt}
                   width="300" height="190" loading="lazy" decoding="async" />
            </picture>
          </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];
  const headerRef = React.useRef(null);

  React.useEffect(() => {
    const el = headerRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { el.classList.add('visible'); io.disconnect(); }
    }, { threshold: 0.05 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section className="devcompat" id="enheter">
      <div className="devcompat-inner">
        <div className="feat-header dvc-header-reveal" ref={headerRef}>
          <div className="eyebrow eyebrow-muted">{C.deviceEyebrow}</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>
  );
}

const CHECKOUT_WEBHOOK_URL = (typeof window !== 'undefined' && window.CHECKOUT_WEBHOOK_URL) ? window.CHECKOUT_WEBHOOK_URL : 'https://script.google.com/macros/s/AKfycbx_h_RdOCwuWzqOOf9P3I3g_1en18nHc8Bz81urBZS6S8Sc6rHfloSpYirtfdT7jQDS/exec';

const PRICING_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' },
    popularBadge: 'Populärast ★',
    chipUnit1: 'skärm', chipUnitN: 'skärmar', chipIncluded: 'Ingår',
    sumExtra: n => '+' + n + ' skärm' + (n > 1 ? 'ar' : ''),
    numLocale: 'sv-SE', currency: 'SEK', locale: 'SE', defaultCC: '+46',
    mCtaStep1: 'Välj antal skärmar →', mCtaStep2: 'Fortsätt →', mCtaStep3: 'Slutför beställning →', mCtaNote: 'Engångsbetalning',
    scrollUpBtn: 'Välj plan ↑',
    trustItems: ['Vi ringer inom 15 min', 'Inga kortuppgifter krävs', 'Krypterad anslutning (TLS 1.3)'],
    panelLabel: 'Välj ditt paket', summaryLabel: 'Din beställning',
    sectionLabel: 'Abonnemang', changeBtn: 'Ändra ↩',
    devicesTitle: 'Antal skärmar', devicesNote: 'Varje skärm kan titta på olika kanaler samtidigt.',
    chipPop: 'Vanligast',
    sumPlan: 'Paket', sumBase: 'Baspris', sumTotal: 'Totalt att betala',
    sumNote: 'Engångsbetalning — ingen prenumeration',
    orderNote: 'Engångsbetalning — ingen prenumeration',
    viewersSuffix: ' ser på detta just nu', slotsSuffix: ' platser kvar',
    formPhoneLabel: 'Telefonnummer', formEmailLabel: 'E-postadress',
    formPhoneErr: 'Ange ett giltigt telefonnummer', formEmailErr: 'Ange en giltig e-postadress',
    formPrivacy: 'Vi använder dina uppgifter för att skicka inloggningen. Inget spam.',
    formError: 'Något gick fel. Försök igen.',
    submitLabel: 'Slutför beställning',
    successBadge: 'PRISET LÅST', successHeading: 'Du är inne.',
    successSavingsHero: 'Du sparar 7 884 kr det här året.',
    successFromBefore: '715 kr/mån', successFromAfter: '58 kr/mån',
    successFromNote: 'Från 5 separata appar till 1.',
    successCallLine: 'Vi hör av oss på {phone} inom 15 min.',
    successHumanNote: 'Ingen bot — en riktig människa hjälper dig igång på 10 minuter.',
    successWelcome: 'Välkommen till 2 400+ smarta streamers. Nu är du en av dem.',
    successFootnote: 'Bekräftelse skickas till {email}.',
    successBeforeLbl: 'Tidigare', successAfterLbl: 'Nu',
  },
};
const PRICING_PLANS = {
  SE: {
    '3m': { base: 349,  extra: 175 },
    '1y': { base: 699,  extra: 350 },
    '3y': { base: 1299, extra: 650 },
  },
};

function Pricing() {
  const ref = React.useRef(null);
  const loc = window.locale || 'SE';
  const TC = PRICING_COPY[loc];
  const TP = PRICING_PLANS[loc];

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

    const C = PRICING_COPY[window.locale || 'SE'];
    const PLANS = PRICING_PLANS[window.locale || 'SE'];

    let selPlan = '1y', selExtra = 0, planTapped = false, step2Active = false, step3Active = false;
    let emailRevealed = false;
    let selectedCC = C.defaultCC;

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

    function updateSummary() {
      const plan = PLANS[selPlan], extra = selExtra * plan.extra, total = plan.base + extra;
      const qe = id => root.querySelector('#' + id);
      if (qe('sum-plan-name'))  qe('sum-plan-name').textContent  = C.planNames[selPlan];
      if (qe('sum-base-price')) qe('sum-base-price').textContent = fmt(plan.base) + ' kr';
      if (qe('sum-total'))      qe('sum-total').textContent      = fmt(total);
      const lfPrePrice = root.querySelector('#lf-pre-price');
      if (lfPrePrice) lfPrePrice.textContent = fmt(total);
      const lfPrice = root.querySelector('#lf-price');
      if (lfPrice) lfPrice.textContent = fmt(total);
      const extraRow = qe('sum-extra-row');
      if (extraRow) {
        if (selExtra > 0) {
          extraRow.classList.add('visible');
          root.querySelector('#sum-extra-label').textContent = C.sumExtra(selExtra);
          root.querySelector('#sum-extra-price').textContent = '+' + fmt(extra) + ' kr';
        } else { extraRow.classList.remove('visible'); }
      }
      if (qe('ps-name'))  qe('ps-name').textContent  = C.planNames[selPlan];
      if (qe('ps-price')) qe('ps-price').textContent = fmt(plan.base) + ' kr';
      updateTopBar();
    }

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

    const mCtaEl  = root.querySelector('.m-cta');
    const mCtaBtn = root.querySelector('.m-cta-btn');
    const mTopBar = root.querySelector('#m-top-bar');
    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 ctaH = mCtaEl && mCtaEl.classList.contains('m-cta-up') ? mCtaEl.getBoundingClientRect().height : 0;
      const vp = Math.max(320, window.innerHeight - ctaH - 20);
      const target = window.scrollY + rect.top - Math.max(14, (vp - rect.height) / 2);
      window.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
    }

    function updateTopBar() {
      if (!mTopBar) return;
      var plan = PLANS[selPlan], extra = selExtra * plan.extra, total = plan.base + extra;
      var nameEl = root.querySelector('#mtb-plan');
      var priceEl = root.querySelector('#mtb-price');
      if (nameEl) nameEl.textContent = C.planNames[selPlan];
      if (priceEl) priceEl.textContent = fmt(total) + ' kr';
      if (step2Active || step3Active) mTopBar.classList.add('mtb-visible');
      else mTopBar.classList.remove('mtb-visible');
    }

    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';
      root.querySelector('#mstep-3').className = 'm-step';
      if (mCtaEl) mCtaEl.classList.add('m-cta-up');
      syncCheckoutCtaState();
      step2Active = true; step3Active = false;
      updateTopBar();
      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');
      var _form = root.querySelector('#lead-form');
      var _pre = root.querySelector('#lf-pre-form');
      var _div = root.querySelector('#lf-form-divider');
      if (_form) _form.classList.remove('lf-shown');
      if (_pre) _pre.classList.remove('co-hidden');
      if (_div) _div.style.display = 'none';
      // Restore form elements to right panel in case they were moved on mobile
      var rightPanel = root.querySelector('.summary-panel > .co-panel');
      if (rightPanel) {
        if (_pre) rightPanel.appendChild(_pre);
        if (_div) rightPanel.appendChild(_div);
        if (_form) rightPanel.appendChild(_form);
      }
      if (mCtaEl) mCtaEl.classList.remove('m-cta-up');
      syncCheckoutCtaState();
      step2Active = false; step3Active = false; planTapped = false;
      root.querySelector('#mstep-1').className = 'm-step active';
      root.querySelector('#mstep-2').className = 'm-step';
      root.querySelector('#mstep-3').className = 'm-step';
      updateTopBar();
      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();
    }

    // ── Form logic ──────────────────────────────────────────────────────────

    function showForm() {
      var pre = root.querySelector('#lf-pre-form');
      var form = root.querySelector('#lead-form');
      var divider = root.querySelector('#lf-form-divider');
      if (!form || form.classList.contains('lf-shown')) return;
      if (pre) pre.classList.add('co-hidden');
      if (divider) divider.style.display = '';
      form.classList.add('lf-shown');
      if (isMob()) {
        // Move form into left panel so step 3 is in the same viewport as steps 1 and 2
        var leftPanel = root.querySelector('.checkout-grid > .co-panel');
        if (leftPanel) {
          if (pre) leftPanel.appendChild(pre);
          if (divider) leftPanel.appendChild(divider);
          leftPanel.appendChild(form);
        }
        // Collapse chips — form replaces them
        var xdev = root.querySelector('#xdev-block');
        if (xdev) xdev.classList.remove('xdev-revealed');
        root.querySelector('#mstep-2').className = 'm-step done';
        root.querySelector('#mstep-3').className = 'm-step active';
        step2Active = false; step3Active = true;
        if (mCtaEl) { mCtaEl.classList.add('m-cta-up'); syncCheckoutCtaState(); }
        updateTopBar();
        refreshMobileCta();
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else {
        if (mCtaEl) mCtaEl.classList.remove('m-cta-up');
        syncCheckoutCtaState();
      }
    }

    function revealEmailField(focusAfter) {
      if (emailRevealed) {
        if (focusAfter) { var e = root.querySelector('#lf-email'); if (e) e.focus(); }
        return;
      }
      var step = root.querySelector('#lf-step-email');
      var submitBtn = root.querySelector('#lf-submit');
      if (!step) return;
      emailRevealed = true;
      step.classList.remove('hidden');
      void step.offsetWidth;
      step.classList.add('visible');
      if (submitBtn) submitBtn.classList.add('lf-submit-shown');
      if (focusAfter) { setTimeout(function() { var e = root.querySelector('#lf-email'); if (e) e.focus(); }, 360); }
    }

    function shakeEl(el) {
      if (!el) return;
      el.classList.remove('co-lf-shaking');
      void el.offsetWidth;
      el.classList.add('co-lf-shaking');
      el.addEventListener('animationend', function() { el.classList.remove('co-lf-shaking'); }, { once: true });
    }

    function autoCapture(phone, email) {
      try { localStorage.setItem('tvm_lead', JSON.stringify({ phone: phone || '', email: email || '', locale: C.locale, ts: new Date().toISOString() })); } catch(e) {}
    }

    const AC_DOMAINS = ['gmail.com','hotmail.com','outlook.com','yahoo.com','icloud.com','me.com','live.com','protonmail.com','msn.com','telia.com','bredband.net'];

    function attachEmailAC(input, onAccept) {
      if (!input) return;
      function suggest() {
        var val = input.value;
        if (input.selectionStart !== val.length) return;
        var atIdx = val.indexOf('@');
        if (atIdx < 0 && val.length > 0) { var s = val + '@gmail.com'; input.value = s; input.setSelectionRange(val.length, s.length); return; }
        if (atIdx < 1) return;
        var partial = val.slice(atIdx + 1).toLowerCase();
        if (!partial) { var s2 = val + 'gmail.com'; input.value = s2; input.setSelectionRange(val.length, s2.length); return; }
        var match = AC_DOMAINS.find(function(d) { return d.startsWith(partial) && d !== partial; });
        if (!match) return;
        var s3 = val.slice(0, atIdx + 1) + match; input.value = s3; input.setSelectionRange(val.length, s3.length);
      }
      input.addEventListener('input', suggest);
      input.addEventListener('keydown', function(e) {
        var sel = input.selectionStart, end = input.selectionEnd, hasSug = sel < end;
        if (hasSug) {
          if (e.key === 'Tab' || e.key === 'ArrowRight' || e.key === 'Enter') { e.preventDefault(); input.setSelectionRange(end, end); if (e.key === 'Enter' && onAccept) onAccept(); return; }
          if (e.key === 'Escape') { e.preventDefault(); input.value = input.value.slice(0, sel); input.setSelectionRange(sel, sel); return; }
        } else { if (e.key === 'Enter' && onAccept) { e.preventDefault(); onAccept(); } }
      });
    }

    function escapeHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

    function initPhoneField() {
      var phone = root.querySelector('#lf-phone');
      var phoneField = root.querySelector('#lf-phone-field');
      if (!phone || !phoneField) return;
      function checkPhoneValidity() {
        var val = phone.value.trim(), digits = val.replace(/\D/g, '').length, valid = digits >= 8;
        phoneField.classList.toggle('co-valid', valid);
        phoneField.classList.toggle('co-invalid', !valid && val.length > 2);
        return valid;
      }
      phone.addEventListener('input', function() {
        var pos = phone.selectionStart, raw = phone.value.replace(/[^\d\s+\-()]/g, '');
        if (raw !== phone.value) { phone.value = raw; try { phone.setSelectionRange(pos, pos); } catch(x){} }
        var valid = checkPhoneValidity();
        var err = root.querySelector('#lf-phone-err');
        if (err && valid) err.classList.remove('show');
        if (valid) revealEmailField(false);
      });
      phone.addEventListener('blur', function() {
        if (checkPhoneValidity()) { autoCapture(selectedCC + ' ' + phone.value.trim(), ''); revealEmailField(false); }
      });
      phone.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          if (checkPhoneValidity()) { revealEmailField(true); }
          else { shakeEl(phoneField); var err = root.querySelector('#lf-phone-err'); if (err) err.classList.add('show'); }
        }
      });
    }

    function initEmailField() {
      var email = root.querySelector('#lf-email');
      if (!email) return;
      email.addEventListener('blur', function() {
        if (/[^@\s]+@[^@\s]+\.[^@\s]+/.test(email.value.trim())) {
          autoCapture(selectedCC + ' ' + (root.querySelector('#lf-phone') || {value:''}).value.trim(), email.value.trim());
        }
      });
      email.addEventListener('input', function() {
        var err = root.querySelector('#lf-email-err');
        if (err && /[^@\s]+@[^@\s]+\.[^@\s]+/.test(email.value.trim())) err.classList.remove('show');
      });
      attachEmailAC(email, function() { var btn = root.querySelector('#lf-submit'); if (btn) btn.focus(); });
    }

    function initCCPicker() {
      var btn = root.querySelector('#lf-cc-btn');
      var dd = root.querySelector('#lf-cc-dd');
      var phoneField = root.querySelector('#lf-phone-field');
      var searchInput = root.querySelector('#lf-cc-search');
      var list = root.querySelector('#lf-cc-list');
      if (!btn || !dd || !phoneField) return;
      function openDD() { dd.classList.add('open'); phoneField.classList.add('co-lf-cc-open'); btn.setAttribute('aria-expanded','true'); if (searchInput) { searchInput.value=''; filterItems(''); setTimeout(function(){searchInput.focus();},60); } }
      function closeDD() { dd.classList.remove('open'); phoneField.classList.remove('co-lf-cc-open'); btn.setAttribute('aria-expanded','false'); }
      function filterItems(q) {
        var items = (list||dd).querySelectorAll('.co-lf-cc-item'), lq = q.toLowerCase().trim();
        items.forEach(function(item) {
          var name=(item.dataset.name||item.querySelector('.co-lf-cc-item-name').textContent).toLowerCase();
          item.classList.toggle('co-lf-cc-hidden', !(!lq||name.includes(lq)||(item.dataset.code||'').includes(lq)));
        });
      }
      btn.addEventListener('click', function(e) { e.stopPropagation(); dd.classList.contains('open')?closeDD():openDD(); });
      if (searchInput) { searchInput.addEventListener('input', function(e){filterItems(e.target.value);}); searchInput.addEventListener('click', function(e){e.stopPropagation();}); searchInput.addEventListener('keydown', function(e){if(e.key==='Escape'){closeDD();root.querySelector('#lf-phone').focus();}}); }
      dd.addEventListener('click', function(e) {
        var item = e.target.closest('.co-lf-cc-item'); if (!item) return;
        selectedCC = item.dataset.code;
        root.querySelector('#lf-cc-flag').textContent = item.dataset.flag;
        root.querySelector('#lf-cc-code').textContent = selectedCC;
        dd.querySelectorAll('.co-lf-cc-item').forEach(function(i){i.classList.toggle('selected',i.dataset.code===selectedCC);});
        closeDD(); root.querySelector('#lf-phone').focus();
      });
      var _ddClose = function(e) { if (!phoneField.contains(e.target)) closeDD(); };
      var _ddEsc = function(e) { if (e.key==='Escape') closeDD(); };
      document.addEventListener('click', _ddClose);
      document.addEventListener('keydown', _ddEsc);
      return function() { document.removeEventListener('click', _ddClose); document.removeEventListener('keydown', _ddEsc); };
    }

    function buildPayload() {
      var plan = PLANS[selPlan], total = plan.base + selExtra * plan.extra;
      var emailEl = root.querySelector('#lf-email');
      return { plan: selPlan, planLabel: C.planNames[selPlan], screens: 1+selExtra, totalPrice: total, currency: C.currency, phone: selectedCC+' '+(root.querySelector('#lf-phone')||{value:''}).value.trim(), email: emailEl ? emailEl.value.trim() : '', locale: C.locale, timestamp: new Date().toISOString(), pageUrl: location.href, captureType: 'full' };
    }

    async function postToWebhook(payload) {
      console.log('[tvm lead]', JSON.stringify(payload, null, 2));
      if (!CHECKOUT_WEBHOOK_URL) return { skipped: true };
      try {
        await fetch(CHECKOUT_WEBHOOK_URL, { method:'POST', mode:'no-cors', headers:{'Content-Type':'text/plain;charset=utf-8'}, body: JSON.stringify(payload) });
        return { ok: true };
      } catch(err) { console.error('[tvm webhook error]', err); return { error: err.message }; }
    }

    async function submitLead(e) {
      e.preventDefault();
      var form = e.target;
      if (form.website && form.website.value) return;
      var phoneVal = (root.querySelector('#lf-phone')||{value:''}).value.trim();
      if (phoneVal.replace(/\D/g,'').length < 8) {
        shakeEl(root.querySelector('#lf-phone-field'));
        var pErr = root.querySelector('#lf-phone-err'); if (pErr) pErr.classList.add('show');
        root.querySelector('#lf-phone').focus(); return;
      }
      var emailEl = root.querySelector('#lf-email'), emailVal = emailEl ? emailEl.value.trim() : '';
      if (!/[^@\s]+@[^@\s]+\.[^@\s]+/.test(emailVal)) {
        if (!emailRevealed) { revealEmailField(true); return; }
        shakeEl(root.querySelector('.co-lf-email-wrap'));
        var eErr = root.querySelector('#lf-email-err'); if (eErr) eErr.classList.add('show');
        if (emailEl) emailEl.focus(); return;
      }
      if (document.activeElement) document.activeElement.blur();
      var btn = root.querySelector('#lf-submit');
      btn.disabled = true;
      btn.innerHTML = '<svg class="co-btn-spinner" width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,0.35)" stroke-width="2.5"/><path d="M12 2a10 10 0 0 1 10 10" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>';
      var payload = buildPayload();
      autoCapture(payload.phone, payload.email);
      await postToWebhook(payload);
      showSuccess(payload);
    }

    function showSuccess(p) {
      var formEl = root.querySelector('#lead-form');
      var panel = (formEl && formEl.closest('.co-panel')) || root.querySelector('.summary-panel .co-panel');
      if (!panel) return;
      var confColors = ['#ff3b30','#34c759','#0071e3','#ff9500','#af52de','#5ac8fa','#ff2d55','#ffd60a'];
      var confHtml = '';
      for (var ci = 0; ci < 14; ci++) {
        var angle=(ci/14)*2*Math.PI, dist=38+Math.round(Math.random()*28);
        var tx=Math.round(Math.sin(angle)*dist), ty=Math.round(-Math.abs(Math.cos(angle))*dist-10);
        var r=Math.round(Math.random()*360), d=(ci*0.045).toFixed(2);
        confHtml += '<div class="co-confetti-piece" style="background:'+confColors[ci%confColors.length]+';--tx:'+tx+'px;--ty:'+ty+'px;--r:'+r+'deg;--d:'+d+'s"></div>';
      }
      var callLine = C.successCallLine.replace('{phone}','<strong>'+escapeHtml(p.phone)+'</strong>');
      var footLine = C.successFootnote.replace('{email}','<strong>'+escapeHtml(p.email)+'</strong>');
      panel.innerHTML =
        '<div class="co-success">'+
          '<div class="co-success-wrap">'+confHtml+
            '<svg class="co-success-svg" width="64" height="64" viewBox="0 0 60 60" fill="none">'+
              '<circle class="co-success-circle" cx="30" cy="30" r="23"/>'+
              '<path class="co-success-path" d="M20 30.5l8 8 13-15"/>'+
            '</svg>'+
          '</div>'+
          '<div class="co-success-badge"><svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 6.5L5 9l5-6" stroke="#34c759" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> '+C.successBadge+'</div>'+
          '<h3>'+C.successHeading+'</h3>'+
          '<p class="co-success-savings-hero">'+C.successSavingsHero.replace('7 884 kr','<em>7 884 kr</em>')+'</p>'+
          '<div class="co-success-fromto">'+
            '<div class="co-success-ft-col"><div class="co-success-ft-label">'+C.successBeforeLbl+'</div><div class="co-success-ft-bad">'+C.successFromBefore+'</div></div>'+
            '<div class="co-success-ft-arrow">→</div>'+
            '<div class="co-success-ft-col"><div class="co-success-ft-label">'+C.successAfterLbl+'</div><div class="co-success-ft-good">'+C.successFromAfter+'</div></div>'+
          '</div>'+
          '<p class="co-success-ft-note">'+C.successFromNote+'</p>'+
          '<div class="co-success-call-box"><div class="co-success-call-row">'+
            '<div class="co-success-call-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z" fill="#0071e3"/></svg></div>'+
            '<div><p class="co-success-call-text">'+callLine+'</p><p class="co-success-human">'+C.successHumanNote+'</p></div>'+
          '</div></div>'+
          '<p class="co-success-welcome">'+C.successWelcome.replace('2 400+','<strong>2 400+</strong>')+'</p>'+
          '<p class="co-lf-privacy" style="margin-top:12px">'+footLine+'</p>'+
        '</div>';
      if (mTopBar) mTopBar.classList.remove('mtb-visible');
      if (mCtaEl) mCtaEl.classList.remove('m-cta-up');
      step2Active = false; step3Active = false;
      syncCheckoutCtaState();
      try { localStorage.removeItem('tvm_lead'); } catch(x) {}
    }

    // Event wiring
    root.querySelectorAll('.plan-tile').forEach(t => t.addEventListener('click', () => selectPlan(t)));
    root.querySelectorAll('.chip').forEach(c => c.addEventListener('click', () => selectExtra(c)));
    root.querySelector('.plan-summary')?.addEventListener('click', changePlan);
    root.querySelector('#mtb-edit-btn')?.addEventListener('click', changePlan);
    var buyBtn = root.querySelector('#lf-buy-btn');
    if (buyBtn) buyBtn.addEventListener('click', showForm);
    var leadForm = root.querySelector('#lead-form');
    if (leadForm) leadForm.addEventListener('submit', submitLead);

    updateChipPrices();
    updateSummary();
    initPhoneField();
    var cleanupCC = initCCPicker();
    initEmailField();

    (function initViewers() {
      var el = root.querySelector('#co-viewers-count'); if (!el) return;
      var n = 14 + Math.floor(Math.random() * 18); el.textContent = n;
      setInterval(function() { n = Math.max(8, Math.min(40, n + Math.floor(Math.random() * 5) - 2)); el.textContent = n; }, 3500 + Math.random() * 3000);
    })();

    (function initSlots() {
      var el = root.querySelector('#co-slots-count'); if (!el) return;
      var n = 5 + Math.floor(Math.random() * 4); el.textContent = n;
      function tick() { if (n <= 2) return; n--; el.textContent = n; setTimeout(tick, 60000 + Math.random() * 60000); }
      setTimeout(tick, 45000 + Math.random() * 30000);
    })();

    let snapCooled = false, snapTimer = null, 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 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 (step3Active) {
        mCtaEl.classList.add('m-cta-up');
        mCtaBtn.textContent = C.mCtaStep3;
        mCtaBtn.onclick = function() { var f = root.querySelector('#lead-form'); if (f) f.dispatchEvent(new Event('submit', {bubbles:true,cancelable:true})); };
      } else if (step2Active) {
        mCtaEl.classList.add('m-cta-up');
        mCtaBtn.textContent = C.mCtaStep2;
        mCtaBtn.onclick = showForm;
      } else {
        mCtaBtn.textContent = C.mCtaStep1;
        mCtaBtn.onclick = revealDevices;
      }
      syncCheckoutCtaState();
    }

    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');
      if (typeof cleanupCC === 'function') cleanupCC();
    };
  }, []);

  const PC = PRICING_COPY[window.locale || 'SE'];
  const PP = PRICING_PLANS[window.locale || 'SE'];
  return (
    <section className="pricing" id="bestall" aria-label={PC.panelLabel} ref={ref}>
      <div id="m-top-bar" className="m-top-bar">
        <div className="mtb-left">
          <span id="mtb-plan">1 År</span>
          <span className="mtb-sep">—</span>
          <span id="mtb-price">699 kr</span>
        </div>
        <button type="button" id="mtb-edit-btn" className="mtb-edit">{PC.changeBtn}</button>
      </div>
      <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">{PC.panelLabel}</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 className="m-step" id="mstep-3"></div>
            </div>
            <div className="co-panel-section-label" style={{marginTop:0}}>{PC.sectionLabel}</div>

            <div className="plan-summary" id="plan-summary" style={{cursor:'pointer'}}>
              <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">{PC.changeBtn}</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">{PC.planNames['3m']}</div></div>
                <div className="pt-price"><span className="pt-amount">{PP['3m'].base.toLocaleString(PC.numLocale)}</span><span className="pt-unit">kr</span><div className="pt-sub">{PC.planSub['3m']}</div><div className="pt-per-month">~116 kr/mån <span className="pt-discount-tag">–84%</span></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">{PC.planNames['1y']}</div><div className="pt-badge">{PC.popularBadge}</div></div>
                <div className="pt-price"><span className="pt-amount">{PP['1y'].base.toLocaleString(PC.numLocale)}</span><span className="pt-unit">kr</span><div className="pt-sub">{PC.planSub['1y']}</div><div className="pt-per-month">~58 kr/mån <span className="pt-discount-tag">–92%</span></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">{PC.planNames['3y']} <span style={{fontSize:'15px',lineHeight:1}}>🎁</span></div></div>
                <div className="pt-price"><span className="pt-amount">{PP['3y'].base.toLocaleString(PC.numLocale)}</span><span className="pt-unit">kr</span><div className="pt-sub">{PC.planSub['3y']}</div><div className="pt-per-month">~31 kr/mån <span className="pt-discount-tag">–96%</span></div></div>
              </div>
            </div>

            <div className="xdev-block" id="xdev-block">
              <div className="xdev-title">{PC.devicesTitle}</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">{PC.chipUnit1}</div><div className="ch-price">{PC.chipIncluded}</div></div>
                <div className="chip" data-extra="1"><div className="chip-pop-badge">{PC.chipPop}</div><div className="ch-num">2</div><div className="ch-unit">{PC.chipUnitN}</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">{PC.chipUnitN}</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">{PC.chipUnitN}</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">{PC.chipUnitN}</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">{PC.chipUnitN}</div><div className="ch-price" id="chip-price-5"></div></div>
              </div>
              <p className="xdev-note">{PC.devicesNote}</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"><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>{PC.trustItems[0]}</div>
                <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>{PC.trustItems[1]}</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>{PC.trustItems[2]}</div>
              </div>
            </div>
          </div>

          <div className="summary-panel">
            <div className="co-panel">
              <div className="co-panel-label">{PC.summaryLabel}</div>
              <div className="order-rows">
                <div className="order-row"><span className="or-label">{PC.sumPlan}</span><span className="or-value" id="sum-plan-name">1 År</span></div>
                <div className="order-row"><span className="or-label">{PC.sumBase}</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">—</span><span className="or-value mono" id="sum-extra-price">+0 kr</span></div>
              </div>
              <div className="order-total">
                <div className="ot-label">{PC.sumTotal}</div>
                <div className="ot-price"><span id="sum-total">699</span><span className="ot-kr">kr</span></div>
                <div className="ot-note">{PC.orderNote}</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"><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>{PC.trustItems[0]}</div>
                <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>{PC.trustItems[1]}</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>{PC.trustItems[2]}</div>
              </div>

              <div id="lf-pre-form">
                <p className="co-lf-proof">
                  <span className="co-lf-proof-dot"></span>
                  <span><span id="co-viewers-count">23</span> ser på detta just nu</span>
                  <span className="co-lf-proof-sep">·</span>
                  <span><span id="co-slots-count" className="co-lf-proof-slots">5</span> platser kvar</span>
                </p>
                <button type="button" className="co-cta-btn" id="lf-buy-btn">
                  Köp nu — <span id="lf-pre-price">699</span> kr →
                </button>
              </div>

              <hr className="co-lf-divider" style={{display:'none'}} id="lf-form-divider"/>
              <form id="lead-form" className="co-lead-form" noValidate>
                <div className="co-lf-step visible" id="lf-step-phone">
                  <div className="co-lf-phone-field" id="lf-phone-field">
                    <button type="button" className="co-lf-cc-btn" id="lf-cc-btn" aria-label="Välj landskod" aria-expanded="false" aria-haspopup="listbox">
                      <span className="co-lf-cc-flag" id="lf-cc-flag">🇸🇪</span>
                      <span className="co-lf-cc-code" id="lf-cc-code">+46</span>
                      <svg className="co-lf-cc-caret" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M2 3.5l3 3 3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </button>
                    <div className="co-lf-phone-inner">
                      <input type="tel" name="phone" id="lf-phone" required pattern="[0-9 +\-()]{6,}" autoComplete="tel" placeholder=" " inputMode="tel"/>
                      <label className="co-lf-float" htmlFor="lf-phone">{PC.formPhoneLabel}</label>
                      <span className="co-lf-phone-status" aria-hidden="true">
                        <svg className="co-lf-phone-ok" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#34c759" strokeWidth="1.4"/><path d="M5 8.2L7 10l4-4.5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        <svg className="co-lf-phone-err-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#ff3b30" strokeWidth="1.4"/><line x1="5.5" y1="5.5" x2="10.5" y2="10.5" stroke="#ff3b30" strokeWidth="1.4" strokeLinecap="round"/><line x1="10.5" y1="5.5" x2="5.5" y2="10.5" stroke="#ff3b30" strokeWidth="1.4" strokeLinecap="round"/></svg>
                      </span>
                    </div>
                    <div className="co-lf-cc-dd" id="lf-cc-dd" role="listbox" aria-label="Välj landskod">
                      <div className="co-lf-cc-search-wrap">
                        <input type="text" className="co-lf-cc-search" id="lf-cc-search" placeholder="Sök land..." autoComplete="off" inputMode="search"/>
                      </div>
                      <div className="co-lf-cc-list" id="lf-cc-list">
                        <button type="button" className="co-lf-cc-item selected" data-code="+46" data-flag="🇸🇪" data-name="sverige" role="option"><span className="co-lf-cc-flag">🇸🇪</span><span className="co-lf-cc-item-name">Sverige</span><span className="co-lf-cc-item-code">+46</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+47" data-flag="🇳🇴" data-name="norge" role="option"><span className="co-lf-cc-flag">🇳🇴</span><span className="co-lf-cc-item-name">Norge</span><span className="co-lf-cc-item-code">+47</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+45" data-flag="🇩🇰" data-name="danmark" role="option"><span className="co-lf-cc-flag">🇩🇰</span><span className="co-lf-cc-item-name">Danmark</span><span className="co-lf-cc-item-code">+45</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+358" data-flag="🇫🇮" data-name="finland" role="option"><span className="co-lf-cc-flag">🇫🇮</span><span className="co-lf-cc-item-name">Finland</span><span className="co-lf-cc-item-code">+358</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+44" data-flag="🇬🇧" data-name="united kingdom england" role="option"><span className="co-lf-cc-flag">🇬🇧</span><span className="co-lf-cc-item-name">United Kingdom</span><span className="co-lf-cc-item-code">+44</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+49" data-flag="🇩🇪" data-name="deutschland germany" role="option"><span className="co-lf-cc-flag">🇩🇪</span><span className="co-lf-cc-item-name">Deutschland</span><span className="co-lf-cc-item-code">+49</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+33" data-flag="🇫🇷" data-name="france frankrike" role="option"><span className="co-lf-cc-flag">🇫🇷</span><span className="co-lf-cc-item-name">France</span><span className="co-lf-cc-item-code">+33</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+971" data-flag="🇦🇪" data-name="uae förenade arabemiraten dubai" role="option"><span className="co-lf-cc-flag">🇦🇪</span><span className="co-lf-cc-item-name">Förenade Arabemiraten</span><span className="co-lf-cc-item-code">+971</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+966" data-flag="🇸🇦" data-name="saudiarabien saudi arabia" role="option"><span className="co-lf-cc-flag">🇸🇦</span><span className="co-lf-cc-item-name">Saudiarabien</span><span className="co-lf-cc-item-code">+966</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+252" data-flag="🇸🇴" data-name="somalia" role="option"><span className="co-lf-cc-flag">🇸🇴</span><span className="co-lf-cc-item-name">Somalia</span><span className="co-lf-cc-item-code">+252</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+964" data-flag="🇮🇶" data-name="irak iraq" role="option"><span className="co-lf-cc-flag">🇮🇶</span><span className="co-lf-cc-item-name">Irak</span><span className="co-lf-cc-item-code">+964</span></button>
                        <button type="button" className="co-lf-cc-item" data-code="+98" data-flag="🇮🇷" data-name="iran" role="option"><span className="co-lf-cc-flag">🇮🇷</span><span className="co-lf-cc-item-name">Iran</span><span className="co-lf-cc-item-code">+98</span></button>
                      </div>
                    </div>
                  </div>
                  <p className="co-lf-errmsg" id="lf-phone-err">{PC.formPhoneErr}</p>
                </div>

                <div className="co-lf-step hidden" id="lf-step-email">
                  <div className="co-lf-field co-lf-email-wrap">
                    <svg className="co-lf-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M2 6l6 4 6-4"/></svg>
                    <input type="text" name="email" id="lf-email" className="co-lf-input" required autoComplete="email" inputMode="email" placeholder=" " pattern="[^@\s]+@[^@\s]+\.[^@\s]+"/>
                    <label className="co-lf-float" htmlFor="lf-email">{PC.formEmailLabel}</label>
                    <span className="co-lf-status" aria-hidden="true">
                      <svg className="co-lf-ok" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#34c759" strokeWidth="1.4"/><path d="M5 8.2L7 10l4-4.5" stroke="#34c759" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      <svg className="co-lf-err-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#ff3b30" strokeWidth="1.4"/><line x1="5.5" y1="5.5" x2="10.5" y2="10.5" stroke="#ff3b30" strokeWidth="1.4" strokeLinecap="round"/><line x1="10.5" y1="5.5" x2="5.5" y2="10.5" stroke="#ff3b30" strokeWidth="1.4" strokeLinecap="round"/></svg>
                    </span>
                  </div>
                  <p className="co-lf-errmsg" id="lf-email-err">{PC.formEmailErr}</p>
                </div>

                <input type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" className="co-lf-honey"/>
                <button type="submit" className="co-cta-btn" id="lf-submit">
                  {PC.submitLabel} — <span className="co-cta-btn-price" id="lf-price">699</span> kr →
                </button>
                <p className="co-lf-privacy">{PC.formPrivacy}</p>
              </form>
            </div>
          </div>

        </div>
      </div>

      <div className="m-cta" id="m-cta">
        <button className="m-cta-btn">{PC.mCtaStep1}</button>
      </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', COPY[window.locale].waAriaLabel);
      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={C.faqTitle}>
      <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="#checkout" 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>
        {' · '}
        <a href="mailto:tvmomentoservice@gmail.com" style={{color:'#0071e3', fontWeight:500, textDecoration:'none'}}>tvmomentoservice@gmail.com</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">{C.footerTagline}</p>
        </div>
        <div className="foot-col">
          <h4>{C.footerService}</h4>
          <a href="/#checkout" 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" 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" 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>
          <a href="/blog/" 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="M1 2.5h12v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-8z"/><path d="M4 2.5V1"/><path d="M10 2.5V1"/><path d="M4 6h6"/><path d="M4 8.5h4"/></svg>
            Blog
          </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>
            tvmomentoservice@gmail.com
          </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" 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" 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#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 _C = COPY[window.locale];
  const [p0, p1, p2] = _C.rbPlans;
  const purchases = [
    { name:"Erik J.",      plan: p0, where:"Stockholm",  ago: _C.rbNow,  color:"#6e6e73" },
    { name:"Amina K.",     plan: p1, where:"Göteborg",   ago:"1 min",    color:"#8e8e93" },
    { name:"Lars P.",      plan: p2, where:"Oslo",       ago:"3 min",    color:"#636366" },
    { name:"Sara H.",      plan: p0, where:"Malmö",      ago:"5 min",    color:"#8e8e93" },
    { name:"Mohammed A.",  plan: p1, where:"Linköping",  ago:"7 min",    color:"#6e6e73" },
    { name:"Ingrid N.",    plan: p0, 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">{_C.rbEyebrow}</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 = COPY[window.locale].ugcReviews;

    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;
    }

    let imgIdx = 0;
    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 = 'Kundrecension Tvmomento ' + (++imgIdx); 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 = COPY[window.locale].ugcVerified;
      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 = [
        'customer-review-1.webp',
        'customer-review-2.webp',
        'customer-review-3.webp',
        'customer-review-4.webp',
        'customer-review-5.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); };
  }, []);

  const C_ugc = COPY[window.locale];
  return (
    <section className="ugc-section" aria-label={C_ugc.ugcAriaLabel}>
      <div className="feat-header reveal">
        <div className="eyebrow">{C_ugc.ugcEyebrow}</div>
        <h2 className="title">{C_ugc.ugcH1}<br /><em>{C_ugc.ugcH2}</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].whatsappTestUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={COPY[window.locale].waAriaLabel}
      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,
});