// calc-flow.jsx — the hook (hero) + the guided quote flow + the live quote panel.

function Hero({ onStart, sampleSel, margin }) {
  const q = window.quotePrice(sampleSel, margin);
  return (
    <div className="calc-hero">
      <div className="calc-glow" style={{ width: 380, height: 380, background: '#8DC63F', top: -120, right: -60 }}></div>
      <div className="calc-wrap">
        <div className="calc-hero-inner">
          <div>
            <span className="calc-eyebrow"><i className="ti ti-bolt"></i>One video · no subscription</span>
            <h1>What does an AI video cost? <span className="accent">Make one</span> — no subscription.</h1>
            <p className="lede">Answer a few quick questions and get an instant price. Buy a single video, your script, your voice — ready in minutes. Subscribe later only if you want to.</p>
            <div className="calc-hero-actions">
              <button className="calc-btn calc-btn-primary calc-btn-lg" onClick={onStart}>Get my price<i className="ti ti-arrow-right"></i></button>
              <span style={{ fontSize: '0.88rem', color: 'var(--faint)' }}>Free to quote · no card to see your price</span>
            </div>
            <div className="calc-hero-trust">
              <span className="calc-trust"><i className="ti ti-bolt"></i><span><b>Ready in minutes</b>, not days</span></span>
              <span className="calc-trust"><i className="ti ti-shield-check"></i><span><b>No subscription</b> required</span></span>
              <span className="calc-trust"><i className="ti ti-receipt"></i><span>One clear price <b>+ VAT</b></span></span>
            </div>
          </div>

          <div className="calc-hero-card">
            <span className="hc-glance">Example</span>
            <div className="hc-label">A 1-minute video, your voice</div>
            <div className="hc-price">{window.fmt(q.render)} <span className="vat">+ VAT</span></div>
            {q.oneTime > 0 ? <div style={{ fontSize: '0.82rem', color: 'var(--lime)', marginTop: 4 }}>+ {window.fmt(q.oneTime)} one-time twin setup — reused forever</div> : null}
            <div className="hc-rows">
              <div className="calc-hcrow"><i className="ti ti-user-plus"></i>Your own digital twin, reusable</div>
              <div className="calc-hcrow"><i className="ti ti-microphone"></i>Narrated in your cloned voice</div>
              <div className="calc-hcrow"><i className="ti ti-bolt"></i>Rendered and ready in minutes</div>
            </div>
            <div className="hc-cta">
              <button className="calc-btn calc-btn-ghost" style={{ width: '100%' }} onClick={onStart}>Price your own<i className="ti ti-arrow-right"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Opt({ sel, onClick, icon, title, desc, add, incl, lockedMsg }) {
  const locked = !!lockedMsg;
  return (
    <button 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">{icon ? <i className={'ti ti-' + icon}></i> : null}{title}</span>
      {desc ? <span className="od">{desc}</span> : null}
      {add ? <span className="oadd">{add}</span> : null}
      {incl ? <span className="oincl">{incl}</span> : null}
      {locked ? <span className="olock"><i className="ti ti-info"></i>{lockedMsg}</span> : null}
    </button>
  );
}

function ModeToggle({ mode, setMode }) {
  return (
    <div className="calc-modetoggle">
      <button className={mode === 'build' ? 'on' : ''} onClick={() => setMode('build')}><i className="ti ti-pencil"></i>Build it yourself</button>
      <button className={mode === 'budget' ? 'on' : ''} onClick={() => setMode('budget')}><i className="ti ti-wand"></i>Name your budget</button>
    </div>
  );
}

function BudgetMode({ budget, setBudget, margin }) {
  const opt = window.optimizeForBudget(budget, margin);
  const cfg = opt.sel;
  const next = window.nextUnlock(budget, margin);
  const MIN = 3, MAX = 120;
  const pct = ((budget - MIN) / (MAX - MIN)) * 100;
  const L = window.PRICE.length[cfg.length].label;
  const minPrice = window.quotePrice(window.BASE_SEL, margin).total;

  return (
    <div>
      <div className="calc-flow-head">
        <div className="step-of">Name your budget</div>
        <h2>What can I make for…?</h2>
        <p>Drag your budget — we build the best possible video that fits. No account needed to see it.</p>
      </div>

      <div className="calc-budget-big">{window.fmt(budget)}<small>my budget</small></div>
      <input
        type="range" className="calc-range" min={MIN} max={MAX} step={1} value={budget}
        onChange={(e) => setBudget(Number(e.target.value))}
        style={{ background: `linear-gradient(to right, var(--lime) 0%, var(--lime) ${pct}%, var(--panel-hi) ${pct}%, var(--panel-hi) 100%)` }}
      />
      <div className="calc-range-scale"><span>{window.fmt(MIN)}</span><span>{window.fmt(MAX)}+</span></div>

      <div className="calc-bresult">
        {opt.affordable ? (
          <React.Fragment>
            <div className="rtag">Best video for {window.fmt(budget)}</div>
            <div className="rmain">
              A <b>{L.toLowerCase()}</b> {cfg.style === 'cinematic' ? <b>cinematic</b> : 'talking-head'} video
              {cfg.avatar === 'twin' ? <span> with <b>your own digital twin</b></span> : <span> with a ready-made avatar</span>}
              {cfg.voice === 'cloned' ? <span>, in <b>your cloned voice</b></span> : null}
              {cfg.music ? <span>, plus music</span> : null}.
            </div>
            <div className="calc-bchips">
              <span className="calc-bchip"><i className="ti ti-clock"></i>{L}</span>
              <span className="calc-bchip"><i className={'ti ti-' + (cfg.style === 'cinematic' ? 'film' : 'user')}></i>{cfg.style === 'cinematic' ? 'Cinematic' : 'Talking-head'}</span>
              <span className="calc-bchip"><i className={'ti ti-' + (cfg.avatar === 'twin' ? 'user-plus' : 'user')}></i>{cfg.avatar === 'twin' ? 'Your digital twin' : 'Ready avatar'}</span>
              <span className="calc-bchip"><i className="ti ti-microphone"></i>{cfg.voice === 'cloned' ? 'Your cloned voice' : 'Stock voice'}</span>
              {cfg.music ? <span className="calc-bchip"><i className="ti ti-music"></i>Music</span> : null}
            </div>
            <div className="calc-buse">
              <i className="ti ti-circle-check"></i>
              <span>Uses <b>{window.fmt(opt.price.total)}</b> of your {window.fmt(budget)}{budget - opt.price.total > 0 ? <span> · {window.fmt(budget - opt.price.total)} to spare</span> : null}.</span>
            </div>
            {next ? (
              <div className="calc-unlock"><i className="ti ti-sparkle-up"></i><span>Add <b>{window.fmt(next.at - budget)}</b> → unlock <b>{next.label}</b></span></div>
            ) : (
              <div className="calc-unlock"><i className="ti ti-star"></i><span>That's the highest quality we make — you've maxed it out.</span></div>
            )}
          </React.Fragment>
        ) : (
          <div className="rmain">The minimum is <b>{window.fmt(minPrice)}</b> for a 10-second video. Nudge your budget up a touch.</div>
        )}
      </div>
    </div>
  );
}

function QuoteFlow({ sel, set, onBuy, margin, mode, setMode, budget, setBudget }) {
  const answeredCount = (sel.avatar ? 1 : 0) + (sel.length ? 1 : 0) + (sel.style ? 1 : 0) + (sel.voice ? 1 : 0) + 1;
  const pct = Math.min(100, (answeredCount / 6) * 100);

  return (
    <div className="calc-flow">
      <div className="calc-wrap">
        <ModeToggle mode={mode} setMode={setMode} />
        <div className="calc-flow-grid">
          {mode === 'budget' ? (
            <BudgetMode budget={budget} setBudget={setBudget} margin={margin} />
          ) : (
          <div>
            <div className="calc-flow-head">
              <div className="step-of">Build your quote <span className="bar"><span style={{ width: pct + '%' }}></span></span></div>
              <h2>A few quick taps</h2>
              <p>Each choice updates your price on the right. No account needed to see it.</p>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className={'qn' + (sel.avatar ? ' done' : '')}>1</span>Who's in the video?</div>
              <div className="calc-opts two">
                <Opt sel={sel.avatar === 'ready'} onClick={() => set({ avatar: 'ready', voice: sel.voice === 'cloned' ? 'stock' : sel.voice })}
                  icon="user" title="Ready-made avatar" desc="Pick a polished presenter from our library." incl="Included" />
                <Opt sel={sel.avatar === 'twin'} onClick={() => set({ avatar: 'twin' })}
                  icon="user-plus" title="My own digital twin" desc="A lifelike twin of you, set up once and reused forever." add={'+ ' + window.fmt(window.twinSetupPrice(margin)) + ' one-time setup'} />
              </div>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className={'qn' + (sel.length ? ' done' : '')}>2</span>How long?</div>
              <div className="calc-opts four">
                {Object.entries(window.PRICE.length).map(([k, v]) => (
                  <Opt key={k} sel={sel.length === k} onClick={() => set({ length: k })} title={v.label} desc={v.hint} />
                ))}
              </div>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className={'qn' + (sel.style ? ' done' : '')}>3</span>What style?</div>
              <div className="calc-opts two">
                <Opt sel={sel.style === 'talking'} onClick={() => set({ style: 'talking' })}
                  icon="user" title="Simple talking-head" desc="Clean, direct presenter to camera. Great for most posts." incl="Standard" />
                <Opt sel={sel.style === 'cinematic'} onClick={() => set({ style: 'cinematic' })}
                  icon="film" title="Cinematic" desc="B-roll, scenes and motion — a richer, produced look." add="Premium render" />
              </div>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className={'qn' + (sel.voice ? ' done' : '')}>4</span>Whose voice?</div>
              <div className="calc-opts two">
                <Opt sel={sel.voice === 'stock'} onClick={() => set({ voice: 'stock' })}
                  icon="microphone" title="Stock voice" desc="A natural, professional voice from our library." incl="Included" />
                <Opt sel={sel.voice === 'cloned'} onClick={() => sel.avatar === 'twin' && set({ voice: 'cloned' })}
                  icon="microphone" title="My cloned voice" desc="Sounds like you — comes with your digital twin."
                  lockedMsg={sel.avatar !== 'twin' ? 'Choose “My own digital twin” to unlock' : null}
                  incl={sel.avatar === 'twin' ? 'Included with your twin' : null} />
              </div>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className="qn done">5</span>Add background music?</div>
              <div className="calc-opts two">
                <Opt sel={sel.music} onClick={() => set({ music: true })} icon="music" title="Yes, add music" desc="A licensed track that fits the mood." add={'+ ' + window.fmt(window.musicPrice(margin))} />
                <Opt sel={!sel.music} onClick={() => set({ music: false })} icon="music-off" title="No music" desc="Just the voice." incl="—" />
              </div>
            </div>

            <div className="calc-q">
              <div className="calc-q-label"><span className={'qn' + (sel.script.trim() ? ' done' : '')}>6</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 value={sel.script} placeholder="Paste your script here, or describe what the video should say and we'll help you write it…" onChange={(e) => set({ script: e.target.value })}></textarea>
                <div className="calc-script-foot">
                  <span className="cc">{sel.script.trim() ? sel.script.trim().split(/\s+/).length + ' words' : 'Optional to quote'}</span>
                  <span className="assist"><i className="ti ti-wand"></i>Help me write it</span>
                </div>
              </div>
            </div>
          </div>
          )}

          <LiveQuote sel={sel} onBuy={onBuy} margin={margin} budgetCap={mode === 'budget' ? budget : null} />
        </div>
      </div>
    </div>
  );
}

function LiveQuote({ sel, onBuy, margin, budgetCap }) {
  const q = window.quotePrice(sel, margin);
  const incl = window.included(sel);
  return (
    <div className="calc-quote">
      <div className="calc-quote-glow"></div>
      <div className="calc-quote-head">
        <div className="ql">Your video</div>
        <div className="calc-quote-price">
          <span className="amt">{window.fmt(q.render)}</span>
          <span className="vat">+ VAT at checkout</span>
        </div>
        {q.oneTime > 0 ? (
          <div className="calc-quote-onetime"><i className="ti ti-user-plus"></i>+ {window.fmt(q.oneTime)} one-time — build your digital twin, reused on every future video</div>
        ) : null}
      </div>
      <div className="calc-quote-body">
        <div className="calc-quote-incl-h">What's included</div>
        <div className="calc-incl">
          {incl.map((it, i) => (
            <div key={i} className="calc-incl-row"><i className={'ti ti-' + it.icon}></i><span>{it.text}</span></div>
          ))}
        </div>
        <div className="calc-quote-cta">
          <button className="calc-btn calc-btn-primary calc-btn-lg" onClick={onBuy}><i className="ti ti-rocket"></i>Make this video</button>
        </div>
        <div className="calc-quote-reassure">
          {budgetCap ? <span className="calc-reassure"><i className="ti ti-circle-check"></i>Fits your {window.fmt(budgetCap)} budget</span> : null}
          <span className="calc-reassure"><i className="ti ti-bolt"></i>Ready in minutes after checkout</span>
          <span className="calc-reassure"><i className="ti ti-shield-check"></i>No subscription · pay once for this video</span>
        </div>
      </div>
      <div className="calc-quote-foot"><i className="ti ti-receipt"></i>One clear price. VAT is added at checkout for your country.</div>
    </div>
  );
}

Object.assign(window, { Hero, ModeToggle, BudgetMode, QuoteFlow, LiveQuote });