// live-b.jsx — VARIANT B "Get It in 10 Seconds" (analogy + guided steps + AI assistant)
// Clean white design. Hero = analogy + 3 steps + assistant entry. Uses the shared LiveAssistant.

function StepStrip() {
  const steps = [
  { ic: ICON.wallet, t: 'Book', d: 'Reserve online' },
  { ic: ICON.video, t: 'Connect on video', d: 'No app — just a link' },
  { ic: ICON.eye, t: 'Walk the car together', d: 'Up to 20 min, guided' }];

  return (
    <div style={{ display: 'flex', alignItems: 'stretch', gap: 8 }}>
      {steps.map((s, i) =>
      <div key={i} style={{ flex: 1, background: '#fff', border: '1px solid ' + LV.g200, borderRadius: 12, padding: '9px 7px', textAlign: 'center' }}>
          <div style={{ width: 30, height: 30, borderRadius: 9, background: LV.yellowBg, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 5px' }}>
            <Icon d={s.ic} size={16} color={LV.yellowText} />
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 800, color: LV.ink, lineHeight: 1.15 }}>{s.t}</div>
          <div style={{ fontSize: 10.5, color: LV.g500, marginTop: 2, lineHeight: 1.25 }}>{s.d}</div>
        </div>
      )}
    </div>);

}

function VariantB() {
  const wide = useIsWide(920);
  const W = wide ? 820 : MAXW;
  const scrollToAssistant = () => {
    const el = document.getElementById('assistant');
    if (el) window.scrollTo({ top: el.offsetTop - 8, behavior: 'smooth' });
  };
  return (
    <div style={{ fontFamily: FONT, background: LV.g50, color: LV.ink, minHeight: '100%' }}>
      <LeadSheet theme={{ accent: LV.red, eyebrow: 'Get ready' }} />
      <LiveHeader showPhone />

      {/* HERO — analogy + steps + assistant entry */}
      <section style={{ background: '#fff', padding: wide ? '34px 20px 32px' : '22px 20px 28px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}><TrustPill /></div>
          <h1 style={{ fontSize: wide ? 34 : 25, lineHeight: 1.18, fontWeight: 800, letterSpacing: '-0.02em', textAlign: 'center', margin: '0 auto 12px', maxWidth: 760 }}>
            {COPY.heroLead}<span style={{ color: LV.red }}>{COPY.heroAccent}</span>
          </h1>
          <p style={{ fontSize: wide ? 16 : 15, lineHeight: 1.55, color: LV.g600, textAlign: 'center', margin: '0 auto 18px', maxWidth: 600 }}>
            {COPY.heroSub}
          </p>
          <div style={{ marginBottom: 14 }}><ExplainerVideo mode="ambient" rounded={18} variant="B" /></div>
          <CtaButton label="Get an expert ready" onClick={() => openLead({ v: 'B' })} track="varB-cta-book" anchor="a3b5873a47-button-69-11" style={{ boxShadow: '0 14px 30px -12px rgba(230,59,46,0.5)' }} />
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 11 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: LV.greenBg, border: '1px solid ' + LV.g200 }}>
              <Icon d={ICON.shieldCheck} size={15} color={LV.green} />
              <span style={{ fontSize: 12.5, fontWeight: 800, color: LV.ink, whiteSpace: 'nowrap' }}>{COPY.guaranteeHead}</span>
            </div>
          </div>
          <div style={{ marginTop: 18 }}><StepStrip /></div>
        </div>
      </section>

      {/* ASSISTANT */}
      <section id="assistant" style={{ background: LV.g50, padding: '32px 20px', scrollMarginTop: 8 }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 16 }}>
            <H2>Have a question? Just ask.</H2>
          </div>
          <LiveAssistant variant="B" />
        </div>
      </section>

      {/* PAYS FOR ITSELF */}
      <section style={{ background: '#fff', padding: '38px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <Eyebrow>Pays for itself</Eyebrow>
          <H2>{COPY.valueHead}</H2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: LV.g600, margin: '12px 0 0' }}>
            <strong style={{ color: LV.ink, textDecoration: 'underline' }}>{COPY.valueLead}</strong>{COPY.valueBody}
          </p>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 14, marginTop: 18, padding: '16px 18px', borderRadius: 14, background: LV.g50, border: '1px solid ' + LV.g200 }}>
            <div style={{ textAlign: 'center', flexShrink: 0 }}>
              <div style={{ fontSize: 26, fontWeight: 800, color: LV.red, lineHeight: 1, letterSpacing: '-0.02em' }}>$59.99</div>
              <div style={{ fontSize: 10.5, color: LV.g500, marginTop: 4 }}>Live session</div>
            </div>
            <div style={{ width: 1, background: LV.g200 }} />
            <div style={{ fontSize: 13.5, lineHeight: 1.5, color: LV.g600 }}>vs. a single missed issue — a repaint, a leak, worn tires — that can cost <strong style={{ color: LV.ink }}>hundreds or thousands</strong> after you’ve signed.</div>
          </div>
        </div>
      </section>

      {/* WHAT YOU GET */}
      <section style={{ background: LV.g50, padding: '38px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ marginBottom: 18 }}><Eyebrow>What you get</Eyebrow><H2>An expert in your corner</H2></div>
          <div style={{ display: 'grid', gridTemplateColumns: wide ? '1fr 1fr' : '1fr', gap: 12 }}>
            {[
            <span>Up to <strong>20 minutes</strong> 1-on-1 with a certified inspection specialist.</span>,
            <span>A guided <strong>visual walkthrough</strong> — fluids, rust, panel gaps, tires, lights, engine bay.</span>,
            <span><strong>Ask anything in real time</strong> and get straight, professional answers.</span>,
            <span>They help you <strong>catch red flags</strong> before you commit — for a fraction of a full inspection.</span>].
            map((t, i) =>
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: '#fff', border: '1px solid ' + LV.g200, borderRadius: 14, padding: 16 }}>
                <div style={{ width: 28, height: 28, borderRadius: 9, background: LV.redBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon d={ICON.check} size={16} color={LV.red} sw={2.5} /></div>
                <div style={{ fontSize: 14.5, lineHeight: 1.5, color: LV.ink }}>{t}</div>
              </div>
            )}
          </div>
          <div style={{ marginTop: 18 }}><GuaranteeRow /></div>
        </div>
      </section>

      {/* TRUST */}
      <section style={{ background: '#fff', padding: '38px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ marginBottom: 18 }}><Eyebrow>Trusted by buyers</Eyebrow><H2>Real specialists. Real reviews.</H2></div>
          <TrustStats />
          <div style={{ height: 16 }} />
          <Testimonials items={TESTIMONIALS.slice(0, 2)} />
        </div>
      </section>

      {/* FAQ (lighter) */}
      <section style={{ background: LV.g50, padding: '38px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ marginBottom: 6 }}><Eyebrow>A few more answers</Eyebrow><H2>Still wondering?</H2></div>
          <FAQ items={FAQ_ITEMS.slice(0, 3)} />
          <div style={{ textAlign: 'center', marginTop: 18 }}>
            <button data-track="varB-faq-ask" onClick={scrollToAssistant} style={{ background: LV.redBg, border: '1px solid ' + LV.redBorder, color: LV.redDark, fontWeight: 700, fontSize: 13.5, padding: '11px 18px', borderRadius: 999, cursor: 'pointer', fontFamily: FONT }}>
              Have another question? Ask the assistant →
            </button>
          </div>
        </div>
      </section>

      <LiveFooter />
      <FloatingCTA onClick={() => openLead({ v: 'B' })} track="varB-sticky-cta" />
    </div>);

}

window.VariantB = VariantB;