// calc-payg.jsx — the pay-per-use shop on /calculator (PAYG_ENABLED).
// Every price comes from the server (/api/payg/catalog, /api/payg/quote); this
// file never holds a price - it only shows what the server returns. Every async button shows
// three states: working / done / failed (with the real reason).

const PAYG_FMT = (n) => (n == null || isNaN(n)) ? '—' : ('€' + (Math.round(n * 100) % 100 === 0 ? Math.round(n) : Number(n).toFixed(2)));

// VAT words follow STRIPE_TAX_BEHAVIOR via the catalog (never hard-coded here).
const PAYG_VAT_ADD = (cat) => (cat && cat.tax_behavior === 'inclusive') ? ' incl. VAT' : ' + VAT';
const PAYG_EU = ['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','DE','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE'];
const paygGuessCountry = () => {
  try { const l = (navigator.language || '').split('-')[1]; if (l && l.length === 2) return l.toUpperCase(); } catch (e) {}
  return '';
};

// The total THIS buyer pays (Stripe Tax for their country) next to the listed price.
function PaygVatPrice({ sku, minutes, net, cat }) {
  const [country, setCountry] = React.useState(paygGuessCountry());
  const [biz, setBiz] = React.useState(false);
  const [vatId, setVatId] = React.useState('');
  const [d, setD] = React.useState(null);
  React.useEffect(() => {
    if (!sku || net == null || !(cat && cat.vat_display)) { setD(null); return; }
    const qs = new URLSearchParams({ sku, country: biz ? '' : country });
    if (minutes) qs.set('minutes', minutes);
    if (biz && vatId.trim().length >= 4) qs.set('vat_id', vatId.trim());
    let live = true;
    paygJSON('/api/payg/price-display?' + qs.toString()).then((r) => { if (live) setD(r.ok ? r.data : null); });
    return () => { live = false; };
  }, [sku, minutes, net, country, biz, vatId]);
  const note = (cat && cat.price_note) || 'excl. VAT';
  let main;
  if (d && d.known && d.reverse_charge) {
    main = <div style={{ fontSize: '0.86rem', color: 'var(--muted)', marginTop: 6 }}>{PAYG_FMT(net)} excl. VAT - reverse charge (business with a VAT number).</div>;
  } else if (d && d.known && d.tax_cents > 0) {
    main = <div style={{ fontSize: '0.86rem', color: 'var(--muted)', marginTop: 6 }}><b>{PAYG_FMT(d.total_cents / 100)}</b> incl. {d.rate_pct != null ? (Math.round(d.rate_pct * 100) / 100) + '% ' : ''}VAT for {d.country || 'your country'} · {PAYG_FMT(d.net_cents / 100)} {note}</div>;
  } else {
    main = <div style={{ fontSize: '0.86rem', color: 'var(--muted)', marginTop: 6 }}>{PAYG_FMT(net)} {note}. VAT for your country is added at checkout.</div>;
  }
  if (!(cat && cat.vat_display)) return null;
  return (
    <div>
      {main}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 8, flexWrap: 'wrap', fontSize: '0.82rem', color: 'var(--muted)' }}>
        {!biz ? (
          <select value={country} onChange={(e) => setCountry(e.target.value)} style={{ padding: '6px 8px', borderRadius: 6, border: '1px solid var(--line-soft)' }}>
            <option value="">Your country…</option>
            {PAYG_EU.concat(['NO', 'GB', 'CH', 'US']).map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        ) : (
          <input value={vatId} placeholder="VAT number, e.g. DE123456789" onChange={(e) => setVatId(e.target.value)} style={{ padding: '6px 8px', borderRadius: 6, border: '1px solid var(--line-soft)' }} />
        )}
        <label style={{ display: 'flex', gap: 6, alignItems: 'center' }}><input type="checkbox" checked={biz} onChange={(e) => setBiz(e.target.checked)} />Business with a VAT number</label>
      </div>
    </div>
  );
}

async function paygJSON(url, opts) {
  const r = await fetch(url, Object.assign({ credentials: 'same-origin' }, opts || {}));
  let d = {};
  try { d = await r.json(); } catch (e) { d = {}; }
  return { status: r.status, ok: r.ok, data: d };
}

function PaygStatusLine({ state, okText, errText }) {
  if (!state || state === 'idle') return null;
  if (state === 'working') return <div className="calc-reassure"><i className="ti ti-clock"></i>Working on it…</div>;
  if (state === 'done') return <div className="calc-reassure" style={{ color: 'var(--lime-deep)' }}><i className="ti ti-circle-check"></i>{okText || 'Done.'}</div>;
  return <div className="calc-reassure" style={{ color: 'var(--danger)' }}><i className="ti ti-info"></i>{errText || 'Something went wrong.'}</div>;
}

function PaygAccountGate({ account, resumeSel }) {
  const [email, setEmail] = React.useState('');
  const [st, setSt] = React.useState('idle');
  const [msg, setMsg] = React.useState('');
  const next = '/calculator' + (resumeSel ? ('?sku=' + encodeURIComponent(resumeSel.sku)) : '');
  const stash = () => { try { localStorage.setItem('payg_resume', JSON.stringify({ sel: resumeSel, ts: Date.now() })); } catch (e) {} };
  const sendLink = async () => {
    if (!email.trim()) { setSt('failed'); setMsg('Please enter your e-mail address.'); return; }
    stash(); setSt('working'); setMsg('');
    try {
      const r = await paygJSON('/api/payg/magic-link', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), next }) });
      if (r.ok) { setSt('done'); setMsg(r.data.message || 'Check your inbox.'); }
      else { setSt('failed'); setMsg(r.data.message || 'We could not send the link.'); }
    } catch (e) { setSt('failed'); setMsg('No connection - please try again.'); }
  };
  const sso = (account && account.sso) || {};
  return (
    <div style={{ marginTop: 18, padding: 16, border: '1px solid var(--line)', borderRadius: 12, background: 'var(--bg-2)' }}>
      <div style={{ fontWeight: 800, color: 'var(--ink)', marginBottom: 6 }}>Sign in to buy</div>
      <div style={{ fontSize: '0.88rem', color: 'var(--muted)', marginBottom: 12 }}>A free account is all you need - it is where your video lands, and it lets us handle consent and the AI label properly. No subscription.</div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
        {sso.google ? <a className="calc-btn calc-btn-ghost calc-btn-sm" onClick={stash} href={'/auth/google/login?next=' + encodeURIComponent(next)}>Continue with Google</a> : null}
        {sso.microsoft ? <a className="calc-btn calc-btn-ghost calc-btn-sm" onClick={stash} href={'/auth/microsoft/login?next=' + encodeURIComponent(next)}>Continue with Microsoft</a> : null}
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <input className="calc-input" style={{ flex: 1, padding: '10px 12px', border: '1px solid var(--line-soft)', borderRadius: 8 }} type="email" placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value)} />
        <button className="calc-btn calc-btn-primary calc-btn-sm" disabled={st === 'working'} onClick={sendLink}><i className="ti ti-mail"></i>{st === 'working' ? 'Sending…' : 'E-mail me a sign-in link'}</button>
      </div>
      <PaygStatusLine state={st} okText={msg} errText={msg} />
    </div>
  );
}

function PaygOrderView({ orderId, account }) {
  const [o, setO] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [rf, setRf] = React.useState('idle');
  const [rfMsg, setRfMsg] = React.useState('');
  const [nudge, setNudge] = React.useState(null);
  const load = React.useCallback(async () => {
    try {
      const r = await paygJSON('/api/payg/orders/' + orderId);
      if (r.ok) { setO(r.data); setErr(''); } else { setErr(r.status === 401 ? 'Please sign in to see this order.' : (r.data.message || 'Order not found.')); }
    } catch (e) { setErr('No connection - retrying…'); }
  }, [orderId]);
  React.useEffect(() => { load(); }, [load]);
  React.useEffect(() => {
    if (o && ['delivered', 'credited', 'refunded', 'expired'].includes(o.status)) return;
    const iv = setInterval(load, 4000);
    return () => clearInterval(iv);
  }, [o, load]);
  React.useEffect(() => {
    if (o && o.status === 'delivered') paygJSON('/api/payg/nudge').then((r) => { if (r.ok && r.data.show) setNudge(r.data); }).catch(() => {});
  }, [o && o.status]);
  const refund = async () => {
    setRf('working'); setRfMsg('');
    try {
      const r = await paygJSON('/api/payg/orders/' + orderId + '/refund', { method: 'POST' });
      if (r.ok) { setRf('done'); setRfMsg('Refund started - it usually shows on your card within 5-10 working days.'); load(); }
      else { setRf('failed'); setRfMsg(r.data.message || 'The refund could not be started.'); }
    } catch (e) { setRf('failed'); setRfMsg('No connection - please try again.'); }
  };
  if (err && !o) return <div className="calc-wrap" style={{ padding: '70px 28px', textAlign: 'center' }}><h2>{err}</h2>{account && !account.signed_in ? <PaygAccountGate account={account} /> : null}</div>;
  if (!o) return <div className="calc-wrap" style={{ padding: '70px 28px', textAlign: 'center', color: 'var(--muted)' }}>Loading your order…</div>;
  const s = o.status;
  const title = { created: 'Waiting for your payment', paid: 'Payment received', rendering: 'Your video is being made', delivered: 'Your video is ready', credited: 'We could not finish your video', refunded: 'Refunded', expired: 'This payment page has expired' }[s] || s;
  return (
    <div className="calc-wrap" style={{ padding: '60px 28px 90px', maxWidth: 760 }}>
      <div className="calc-eyebrow"><i className="ti ti-receipt"></i>Order #{o.order_id} · {o.label} · {PAYG_FMT(o.price_eur)} {o.price_note || 'excl. VAT'}</div>
      <h2 style={{ fontSize: '2rem', margin: '6px 0 12px' }}>{title}</h2>
      {(s === 'paid' || s === 'rendering') ? <p style={{ color: 'var(--muted)' }}>This usually takes a few minutes. You can close this page - we e-mail you when it is ready, and it will be in My Videos.</p> : null}
      {s === 'delivered' ? (
        <div>
          {o.result_url ? <video src={o.result_url} controls style={{ width: '100%', borderRadius: 12, background: '#000', margin: '10px 0' }}></video> : null}
          <p style={{ color: 'var(--muted)', fontSize: '0.92rem' }}><i className="ti ti-shield-check"></i> The video carries the "AI-generated" label required by the EU AI Act (article 50).</p>
          <a className="calc-btn calc-btn-primary" href="/videos"><i className="ti ti-play"></i>Open My Videos</a>
        </div>
      ) : null}
      {s === 'credited' ? (
        <div>
          <p style={{ color: 'var(--muted)' }}>Something went wrong on our side. You have not been charged for it: the {PAYG_FMT(o.price_eur)} is on your MyAvatar account as {o.tokens} credits, ready for your next video.</p>
          <p style={{ color: 'var(--muted)' }}>Prefer the money back on your card instead?</p>
          <button className="calc-btn calc-btn-ghost" disabled={rf === 'working'} onClick={refund}><i className="ti ti-credit-card"></i>{rf === 'working' ? 'Starting refund…' : 'Refund to my card'}</button>
          <PaygStatusLine state={rf} okText={rfMsg} errText={rfMsg} />
        </div>
      ) : null}
      {s === 'refunded' ? <p style={{ color: 'var(--muted)' }}>The payment has been refunded to your card.</p> : null}
      {s === 'created' || s === 'expired' ? <a className="calc-btn calc-btn-ghost" href="/calculator">Back to the shop</a> : null}
      {nudge ? (
        <div className="calc-upsell-gap" style={{ margin: '26px 0 0' }}>
          <i className="ti ti-trending"></i>
          <div className="t">
            You have bought <b>{nudge.count} videos</b> in the last 30 days for <b>{PAYG_FMT(nudge.spent_eur)}</b>.
            {nudge.saving_eur > 0
              ? <span> The <b>{nudge.plan}</b> plan ({PAYG_FMT(nudge.plan_price_eur)}/month) would have saved you <b>{PAYG_FMT(nudge.saving_eur)}</b>. <a href="/pricing" style={{ textDecoration: 'underline' }}>See plans</a></span>
              : <span> Plans start at {PAYG_FMT(nudge.plans_from_eur)}/month and add your own actor library, brand kit and distribution. <a href="/pricing" style={{ textDecoration: 'underline' }}>See plans</a></span>}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function PaygShop() {
  const params = new URLSearchParams(window.location.search);
  const orderId = params.get('order');
  const [cat, setCat] = React.useState(null);
  const [catErr, setCatErr] = React.useState('');
  const [account, setAccount] = React.useState(null);
  const [pres, setPres] = React.useState(null);
  const startSku = params.get('sku') || 'talking_head_30';
  const [kind, setKind] = React.useState(startSku.indexOf('translate') === 0 ? 'translation' : 'talking_head');
  const [sku, setSku] = React.useState(startSku);
  const [who, setWho] = React.useState('house');
  const [actorId, setActorId] = React.useState(null);
  const [likeness, setLikeness] = React.useState(false);
  const [script, setScript] = React.useState('');
  const [videoUrl, setVideoUrl] = React.useState('');
  const [lang, setLang] = React.useState('English');
  const [tq, setTq] = React.useState(null);
  const [tqSt, setTqSt] = React.useState('idle');
  const [tqMsg, setTqMsg] = React.useState('');
  const [buySt, setBuySt] = React.useState('idle');
  const [buyMsg, setBuyMsg] = React.useState('');
  const [needLogin, setNeedLogin] = React.useState(false);

  React.useEffect(() => {
    paygJSON('/api/payg/catalog').then((r) => { if (r.ok) setCat(r.data); else setCatErr(r.data.message || 'The shop is not available right now.'); }).catch(() => setCatErr('No connection.'));
    paygJSON('/api/payg/account').then((r) => setAccount(r.data)).catch(() => setAccount({ signed_in: false, sso: {} }));
    paygJSON('/api/payg/presenters').then((r) => { if (r.ok) { setPres(r.data); setActorId(r.data.default_id); } }).catch(() => {});
    try {
      const st = JSON.parse(localStorage.getItem('payg_resume') || 'null');
      if (st && st.sel && Date.now() - (st.ts || 0) < 30 * 60 * 1000) {
        const s = st.sel;
        if (s.sku) { setSku(s.sku); setKind(s.sku.indexOf('translate') === 0 ? 'translation' : 'talking_head'); }
        if (s.params) {
          if (s.params.script) setScript(s.params.script);
          if (s.params.actor_id) setActorId(s.params.actor_id);
          if (s.params.presenter) setWho(s.params.presenter);
          if (s.params.video_url) setVideoUrl(s.params.video_url);
          if (s.params.target_language) setLang(s.params.target_language);
        }
      }
      localStorage.removeItem('payg_resume');
    } catch (e) {}
  }, []);

  if (orderId) return (<div className="calc-root"><CalcNav onStart={() => { window.location.href = '/calculator'; }} /><PaygOrderView orderId={orderId} account={account} /><CalcFooter /></div>);

  const prod = (k) => (cat && cat.products || []).find((p) => p.sku === k) || null;
  const cur = prod(sku);
  const twinSetup = prod('twin_setup');
  const ownTwin = pres && pres.own_twin;
  const params_ = () => kind === 'translation'
    ? { video_url: videoUrl.trim(), target_language: lang }
    : { presenter: who, actor_id: actorId, script: script, likeness_confirmed: likeness };
  const priceShown = kind === 'translation' ? (tq ? tq.price_eur : null) : (cur ? cur.price_eur : null);

  const checkTranslation = async () => {
    setTqSt('working'); setTqMsg(''); setTq(null);
    try {
      const r = await paygJSON('/api/payg/quote', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sku, video_url: videoUrl.trim() }) });
      if (r.ok) { setTq(r.data); setTqSt('done'); setTqMsg(r.data.minutes + ' min (' + Math.round(r.data.duration_s) + ' s) at ' + PAYG_FMT(r.data.per_minute_eur) + ' per started minute' + (r.data.min_order_applied ? ' - minimum order ' + PAYG_FMT(cat.min_order_eur) : '')); }
      else if (r.status === 401) { setNeedLogin(true); setTqSt('failed'); setTqMsg('Sign in first so we can read your video.'); }
      else { setTqSt('failed'); setTqMsg(r.data.message || 'Could not price that video.'); }
    } catch (e) { setTqSt('failed'); setTqMsg('No connection - please try again.'); }
  };

  const buy = async (buySku, buyParams) => {
    setBuySt('working'); setBuyMsg('');
    try {
      const r = await paygJSON('/api/payg/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sku: buySku, params: buyParams }) });
      if (r.ok && r.data.url) { setBuySt('done'); setBuyMsg('Opening the secure payment page…'); window.location.href = r.data.url; return; }
      if (r.status === 401) { setNeedLogin(true); setBuySt('failed'); setBuyMsg('Sign in to continue - your choices are kept.'); return; }
      setBuySt('failed'); setBuyMsg(r.data.message || 'Could not open the payment page.');
    } catch (e) { setBuySt('failed'); setBuyMsg('No connection - nothing was charged. Please try again.'); }
  };

  const tile = (k, title, desc, sel, onClick, locked) => (
    <button key={k} className={'calc-opt' + (sel ? ' sel' : '') + (locked ? ' lockedopt' : '')} onClick={locked ? null : onClick}>
      {sel ? <span className="tick"><i className="ti ti-check"></i></span> : null}
      <span className="ot">{title}</span>
      <span className="od">{desc}</span>
      {locked ? <span className="olock"><i className="ti ti-lock"></i>{locked}</span> : null}
    </button>
  );

  return (
    <div className="calc-root">
      <CalcNav onStart={() => window.scrollTo({ top: 0, behavior: 'smooth' })} />
      <div className="calc-flow">
        <div className="calc-wrap">
          <div className="calc-flow-head">
            <div className="step-of">Buy one video · no subscription</div>
            <h2>Pick it, pay once, get it in minutes</h2>
            <p>Fixed price, shown before you pay. {window.MAVat ? null : ((cat && cat.tax_behavior === 'inclusive') ? 'Prices include VAT.' : 'Prices exclude VAT, which is added at checkout for your country.')}</p>
            <VatToggle />
          </div>
          {catErr ? <div className="calc-reassure" style={{ color: 'var(--danger)' }}><i className="ti ti-info"></i>{catErr}</div> : null}
          <div className="calc-flow-grid">
            <div>
              <div className="calc-q">
                <div className="calc-q-label"><span className="qn done">1</span>What do you need?</div>
                <div className="calc-opts two">
                  {tile('th', 'Talking-head video', 'A presenter speaks your message to camera - up to 30 s or up to 60 s.', kind === 'talking_head', () => { setKind('talking_head'); setSku('talking_head_30'); })}
                  {tile('tr', 'Translate my video', 'Same voice, new language, lips re-synced. Up to ' + ((prod('translate_standard') || {}).max_minutes || 5) + ' minutes.', kind === 'translation', () => { setKind('translation'); setSku('translate_standard'); })}
                  {tile('fs', 'Short film', 'Cinematic scenes with a cast.', false, null, 'Coming soon')}
                  {tile('f35', 'Longer film', 'About 35 seconds, several scenes.', false, null, 'Coming soon')}
                </div>
              </div>

              {kind === 'talking_head' ? (
                <React.Fragment>
                  <div className="calc-q">
                    <div className="calc-q-label"><span className="qn done">2</span>How long?</div>
                    <div className="calc-opts two">
                      {['talking_head_30', 'talking_head_60'].map((k) => { const p = prod(k); return tile(k, (p ? (p.length_label || p.label) : k), p ? <VatText net={p.price_eur} fallback={PAYG_FMT(p.price_eur) + PAYG_VAT_ADD(cat)} /> : '…', sku === k, () => setSku(k)); })}
                    </div>
                  </div>
                  <div className="calc-q">
                    <div className="calc-q-label"><span className="qn done">3</span>Who presents it?</div>
                    <div className="calc-opts two">
                      {tile('house', 'A House Cast presenter', 'Included in the price.', who === 'house', () => setWho('house'))}
                      {tile('own', 'My own digital twin', ownTwin && ownTwin.ready ? ('Your twin: ' + (ownTwin.name || 'ready')) : 'Needs your trained twin and recorded consent.', who === 'own', () => setWho('own'), ownTwin && ownTwin.ready ? null : 'Set up once first')}
                    </div>
                    {who === 'house' && pres ? (
                      <select style={{ marginTop: 10, padding: '10px 12px', borderRadius: 8, border: '1px solid var(--line-soft)', width: '100%' }} value={actorId || ''} onChange={(e) => setActorId(parseInt(e.target.value, 10))}>
                        {pres.presenters.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
                      </select>
                    ) : null}
                    {who === 'own' && ownTwin && ownTwin.ready ? (
                      <label style={{ display: 'flex', gap: 8, marginTop: 10, fontSize: '0.88rem', color: 'var(--muted)' }}>
                        <input type="checkbox" checked={likeness} onChange={(e) => setLikeness(e.target.checked)} />
                        I confirm the twin is me, or that I have the written permission of the person shown to use their face and voice.
                      </label>
                    ) : null}
                    {!(ownTwin && ownTwin.ready) && twinSetup && twinSetup.for_sale ? (
                      <div style={{ marginTop: 10, fontSize: '0.86rem', color: 'var(--muted)' }}>
                        Your own twin: one-time setup <VatAmt net={twinSetup.price_eur} amtClass="vat-b" fallback={<React.Fragment><b>{PAYG_FMT(twinSetup.price_eur)}</b>{PAYG_VAT_ADD(cat)}</React.Fragment>} />, reused on every future video.{' '}
                        <button className="calc-btn calc-btn-ghost calc-btn-sm" disabled={buySt === 'working'} onClick={() => buy('twin_setup', {})}>Buy twin setup</button>
                      </div>
                    ) : null}
                  </div>
                  <div className="calc-q">
                    <div className="calc-q-label"><span className="qn done">4</span>Your script <span style={{ fontWeight: 600, color: 'var(--faint)', fontSize: '0.86rem' }}>- or just describe the idea</span></div>
                    <div className="calc-script">
                      <textarea maxLength={2000} value={script} placeholder="Paste your script, or describe what the video should say. We fit it to the length you picked and never invent facts." onChange={(e) => setScript(e.target.value)}></textarea>
                      <div className="calc-script-foot"><span className="cc">{script.length}/2000</span></div>
                    </div>
                  </div>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div className="calc-q">
                    <div className="calc-q-label"><span className="qn done">2</span>Quality</div>
                    <div className="calc-opts two">
                      {['translate_standard', 'translate_premium'].map((k) => { const p = prod(k); return tile(k, k === 'translate_standard' ? 'Standard lip-sync' : 'Premium lip-sync', p ? <VatText net={p.per_minute_eur} suffix=" per started minute" fallback={PAYG_FMT(p.per_minute_eur) + ' per started minute' + PAYG_VAT_ADD(cat)} /> : '…', sku === k, () => { setSku(k); setTq(null); setTqSt('idle'); }); })}
                    </div>
                  </div>
                  <div className="calc-q">
                    <div className="calc-q-label"><span className="qn done">3</span>Your video and the new language</div>
                    <input style={{ width: '100%', padding: '11px 12px', borderRadius: 8, border: '1px solid var(--line-soft)', marginBottom: 10 }} placeholder="https://… direct link to the video file (max 5 minutes)" value={videoUrl} onChange={(e) => { setVideoUrl(e.target.value); setTq(null); setTqSt('idle'); }} />
                    <select style={{ padding: '10px 12px', borderRadius: 8, border: '1px solid var(--line-soft)', marginRight: 10 }} value={lang} onChange={(e) => setLang(e.target.value)}>
                      {((cat && cat.languages) || ['English']).map((l) => <option key={l} value={l}>{l}</option>)}
                    </select>
                    <button className="calc-btn calc-btn-ghost calc-btn-sm" disabled={tqSt === 'working' || !videoUrl.trim()} onClick={checkTranslation}>{tqSt === 'working' ? 'Reading the video…' : 'Get the exact price'}</button>
                    <PaygStatusLine state={tqSt} okText={tqMsg} errText={tqMsg} />
                    <div style={{ fontSize: '0.82rem', color: 'var(--faint)', marginTop: 8 }}>Lip-sync needs one person on screen. With nobody or several people only the voice is translated - the price stays the same and the result says so.</div>
                  </div>
                </React.Fragment>
              )}
            </div>

            <div className="calc-quote">
              <div className="calc-quote-glow"></div>
              <div className="calc-quote-head">
                <div className="ql">Your price</div>
                <div className="calc-quote-price"><VatAmt net={priceShown} amtClass="amt" tagClass="vat" fallback={<React.Fragment><span className="amt">{PAYG_FMT(priceShown)}</span><span className="vat">{PAYG_VAT_ADD(cat)}</span></React.Fragment>} /></div>
                <VatSub net={priceShown} />
                {priceShown != null && !window.MAVat ? <PaygVatPrice sku={sku} minutes={kind === 'translation' && tq ? tq.minutes : null} net={priceShown} cat={cat} /> : null}
                {kind === 'translation' && !tq ? <div style={{ fontSize: '0.84rem', color: 'var(--muted)', marginTop: 6 }}>Add your video link to see the exact price.</div> : null}
              </div>
              <div className="calc-quote-body">
                <div className="calc-incl">
                  <div className="calc-incl-row"><i className="ti ti-receipt"></i><span>One fixed price, paid once - <b>no subscription</b></span></div>
                  <div className="calc-incl-row"><i className="ti ti-shield-check"></i><span>Labelled as AI-generated (EU AI Act art. 50)</span></div>
                  <div className="calc-incl-row"><i className="ti ti-circle-check"></i><span>If it fails on our side you are not charged: credit, or your money back</span></div>
                </div>
                <div className="calc-quote-cta">
                  <button className="calc-btn calc-btn-primary calc-btn-lg" disabled={buySt === 'working' || priceShown == null || (who === 'own' && kind === 'talking_head' && !(ownTwin && ownTwin.ready && likeness))}
                    onClick={() => buy(sku, params_())}>
                    <i className="ti ti-rocket"></i>{buySt === 'working' ? 'Opening payment…' : <React.Fragment>{'Buy this video – '}<VatText net={priceShown} fallback={PAYG_FMT(priceShown)} /></React.Fragment>}
                  </button>
                </div>
                <PaygStatusLine state={buySt} okText={buyMsg} errText={buyMsg} />
                {(needLogin || (account && !account.signed_in)) ? <PaygAccountGate account={account} resumeSel={{ sku, params: params_() }} /> : null}
              </div>
              <div className="calc-quote-foot"><i className="ti ti-receipt"></i>VAT is added at checkout for your country. Business? Add your VAT number there.</div>
            </div>
          </div>
        </div>
      </div>
      <CalcFooter />
    </div>
  );
}

Object.assign(window, { PaygShop, PaygOrderView, PaygAccountGate });