// live-a.jsx — VARIANT A "Show It" — WARM VISUAL PINBOARD
// Cream + clay, warm serif headlines, the video framed as a soft saved "pin",
// a masonry of relatable buyer moments. Female-focused, reassuring, confident.

const A = {
  bg: '#FBF5EC', card: '#FFFFFF', cream2: '#F4E8D9',
  red: '#E63B2E', redBg: '#FAE6E1',
  clay: '#9A7257', clayDeep: '#7D5C45', clayBg: '#F0E6DA',
  ink: '#3B302A', sub: '#7C6B5E', line: '#ECDDCC',
  sage: '#7E8C63', gold: '#C2902F'
};
const ASERIF = "'Newsreader', Georgia, 'Times New Roman', serif";

function AHeader() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, padding: '13px 20px', background: 'rgba(251,245,236,0.9)', backdropFilter: 'blur(10px)', borderBottom: '1px solid ' + A.line }}>
      <div style={{ maxWidth: 820, margin: '0 auto', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <a href="https://www.lemonsquad.com" aria-label="Lemon Squad home" data-track="varA-logo">
        <img src={window.LS_LOGO_COLOR} alt="Lemon Squad" style={{ height: 25, display: 'block' }} />
      </a>
      <a href={`tel:${phoneNumber.replace(/[^0-9]/g, '')}`} data-track="varA-call" style={{ display: 'flex', alignItems: 'center', gap: 6, textDecoration: 'none', color: A.ink, fontWeight: 700, fontSize: 13.5 }}>
        <Icon d={ICON.phone} size={15} color={A.clay} /> {phoneNumber}
      </a>
      </div>
    </header>);

}

const HEART = ['M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z'];

function APin({ label, tag, h, caption }) {
  return (
    <div style={{ borderRadius: 18, overflow: 'hidden', background: A.card, border: '1px solid ' + A.line, boxShadow: '0 8px 22px -16px rgba(90,60,40,0.4)' }}>
      <div style={{ position: 'relative' }}>
        <PhotoSlot warm label={label} tag={tag} minH={h} radius={0} icon={ICON.user} style={{ height: h }} />
        <div style={{ position: 'absolute', top: 9, right: 9, width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(0,0,0,0.12)' }}>
          <Icon d={HEART} size={14} color={A.red} fill={A.red} sw={0} />
        </div>
      </div>
      {caption && <div style={{ padding: '11px 13px', fontSize: 13, fontWeight: 600, color: A.ink, lineHeight: 1.35 }}>{caption}</div>}
    </div>);

}

function ABenefit({ children }) {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <div style={{ width: 26, height: 26, borderRadius: '50%', background: A.redBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
        <Icon d={ICON.check} size={15} color={A.red} sw={2.5} />
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.5, color: A.ink }}>{children}</div>
    </div>);

}

function AWarmFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      {FAQ_ITEMS.map((it, i) =>
      <div key={i} style={{ borderBottom: '1px solid ' + A.line }}>
          <button data-track={`varA-faq-${i}`} onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', fontFamily: FONT, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '17px 2px', textAlign: 'left' }}>
            <span style={{ fontWeight: 700, fontSize: 15, color: A.ink, lineHeight: 1.4 }}>{it.q}</span>
            <Icon d={ICON.chevronDown} size={18} color={A.sub} style={{ transform: open === i ? 'rotate(180deg)' : 'none', transition: 'transform .2s', flexShrink: 0 }} />
          </button>
          <div style={{ maxHeight: open === i ? 340 : 0, overflow: 'hidden', transition: 'max-height .28s ease' }}>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: A.sub, padding: '0 2px 17px' }}>{it.a}</div>
          </div>
        </div>
      )}
    </div>);

}

function VariantA() {
  const book = () => openLead({ v: 'A' });
  const wide = useIsWide(920);
  const W = wide ? 820 : MAXW; // keep the mobile column; site-width on desktop

  return (
    <div style={{ fontFamily: FONT, background: A.bg, color: A.ink, minHeight: '100%' }}>
      <LeadSheet theme={{ accent: A.red, eyebrow: 'Get ready', headFont: ASERIF }} />
      <AHeader />

      {/* HERO */}
      <section style={{ padding: wide ? '40px 20px 12px' : '24px 20px 8px' }}>
        <div style={{ maxWidth: W, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 13px', borderRadius: 999, background: A.card, border: '1px solid ' + A.line, marginBottom: 18, boxShadow: '0 2px 6px -3px rgba(90,60,40,0.25)' }}>
            <Icon d={ICON.shieldCheck} size={14} color={A.sage} />
            <span style={{ fontSize: 12.5, fontWeight: 700, color: A.ink }}>America’s Largest &amp; Most Trusted · since 2005</span>
          </div>
          <h1 style={{ fontFamily: ASERIF, fontSize: wide ? 36 : 32, lineHeight: 1.14, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 14px', color: A.ink, textWrap: 'balance' }}>
            {COPY.heroLead}<span style={{ fontStyle: 'italic', color: A.red }}>{COPY.heroAccent}</span>
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: A.sub, margin: '0 auto', maxWidth: 600 }}>
            {COPY.heroSub}
          </p>
        </div>
      </section>

      {/* video framed as a soft pin */}
      <section style={{ padding: '0 20px 10px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ borderRadius: 20, overflow: 'hidden', background: A.card, padding: 6, border: '1px solid ' + A.line, boxShadow: '0 20px 44px -24px rgba(90,60,40,0.45)' }}>
            <ExplainerVideo mode="ambient" rounded={15} variant="A" />
          </div>
        </div>
      </section>

      <section style={{ padding: '16px 20px 28px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <CtaButton label="Get an expert ready" onClick={book} track="varA-cta-hero" radius={999} style={{ boxShadow: '0 14px 30px -12px rgba(230,59,46,0.55)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, marginTop: 24 }}>
            {COPY.bullets.map((b, i) => <ABenefit key={i}><strong>{b[0]}</strong>{b[1]}</ABenefit>)}
          </div>
          <div style={{ marginTop: 18 }}>
            <GuaranteeRow theme={{ bg: A.card, sealBg: A.redBg, sealIcon: A.red, ink: A.ink, sub: A.sub, border: A.line }} />
          </div>
        </div>
      </section>

      {/* PINBOARD — relatable moments */}
      <section style={{ padding: '34px 20px', background: A.cream2 }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: A.clay, marginBottom: 6 }}>Real moments</div>
          <h2 style={{ fontFamily: ASERIF, fontSize: 26, fontWeight: 500, color: A.ink, margin: '0 0 18px', lineHeight: 1.18 }}>You don’t have to do this alone.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'start' }}>
            <APin h={168} tag="LIFESTYLE PHOTO" label="Buyer on her phone, inspector on the call" caption="“I found it online and wasn’t sure.”" />
            <APin h={168} tag="LIFESTYLE PHOTO" label="Walking the lot with the seller" caption="Met the seller with backup." />
            <APin h={168} tag="LIFESTYLE PHOTO" label="Smiling buyer holding keys" caption="First car. Zero stress." />
            <APin h={168} tag="LIFESTYLE PHOTO" label="Phone showing the inspector on video" caption="Not a car person — and that’s okay." />
          </div>
        </div>
      </section>

      {/* REASSURANCE */}
      <section style={{ padding: '36px 20px' }}>
        <div style={{ maxWidth: W, margin: '0 auto', background: A.card, borderRadius: 22, padding: 24, border: '1px solid ' + A.line, boxShadow: '0 12px 30px -22px rgba(90,60,40,0.4)' }}>
          <div style={{ width: 46, height: 46, borderRadius: '50%', background: A.clayBg, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
            <Icon d={ICON.shieldCheck} size={24} color={A.clay} />
          </div>
          <h2 style={{ fontFamily: ASERIF, fontSize: 25, fontWeight: 500, color: A.ink, margin: '0 0 10px', lineHeight: 1.2 }}>You don’t need to know engines. That’s our job.</h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: A.sub, margin: 0 }}>
            Your inspector asks the seller the right questions, points the camera at the things that matter, and tells you — in plain language — what they see. You just hold your phone and feel confident.
          </p>
        </div>
      </section>

      {/* PAYS FOR ITSELF */}
      <section style={{ padding: '8px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: A.clay, marginBottom: 8 }}>Pays for itself</div>
          <h2 style={{ fontFamily: ASERIF, fontSize: 26, fontWeight: 500, color: A.ink, margin: '0 0 12px', lineHeight: 1.2 }}>{COPY.valueHead}</h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: A.sub, margin: 0 }}>
            <strong style={{ color: A.ink, textDecoration: 'underline' }}>{COPY.valueLead}</strong>{COPY.valueBody}
          </p>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 14, marginTop: 18, padding: '16px 18px', borderRadius: 16, background: A.cream2, border: '1px solid ' + A.line }}>
            <div style={{ textAlign: 'center', flexShrink: 0 }}>
              <div style={{ fontFamily: ASERIF, fontSize: 28, fontWeight: 600, color: A.red, lineHeight: 1 }}>$59.99</div>
              <div style={{ fontSize: 10.5, color: A.sub, marginTop: 4 }}>Live session</div>
            </div>
            <div style={{ width: 1, background: A.line }} />
            <div style={{ fontSize: 13.5, lineHeight: 1.5, color: A.sub }}>vs. a single missed issue — a repaint, a leak, worn tires — that can cost <strong style={{ color: A.ink }}>hundreds or thousands</strong> after you’ve signed.</div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ padding: '8px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: A.clay, marginBottom: 14 }}>How it works</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[['Book in 2 minutes', 'Reserve online. Use it now, or save the link for when you go see the car.'], ['Connect on video — no app', 'Tap one link in your phone’s browser. A certified inspector joins you live.'], ['Walk the car together', 'Up to 20 minutes. They guide every check and flag what an untrained eye misses.']].map((s, i) =>
            <div key={i} style={{ display: 'flex', gap: 15, alignItems: 'flex-start', padding: '17px', background: A.card, borderRadius: 16, border: '1px solid ' + A.line }}>
                <div style={{ width: 34, height: 34, borderRadius: '50%', background: A.clay, color: '#fff', fontFamily: ASERIF, fontSize: 18, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{i + 1}</div>
                <div><div style={{ fontWeight: 700, fontSize: 15.5, color: A.ink, marginBottom: 3 }}>{s[0]}</div><div style={{ fontSize: 13.5, lineHeight: 1.5, color: A.sub }}>{s[1]}</div></div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ASK ANYTHING — assistant */}
      <section style={{ padding: '8px 20px 36px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: A.clay, marginBottom: 8 }}>New to this?</div>
          <h2 style={{ fontFamily: ASERIF, fontSize: 26, fontWeight: 500, color: A.ink, margin: '0 0 8px', lineHeight: 1.18 }}>Ask us anything.</h2>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: A.sub, margin: '0 0 16px' }}>Tap a question — we’ll explain it in plain language and set you up when you’re ready.</p>
          <LiveAssistant variant="A" theme={{ accent: A.red, panelBg: A.cream2, headerBg: A.card, botBg: A.card, botText: A.ink, botBorder: A.line, ink: A.ink, sub: A.sub, border: A.line, online: A.sage, chipBg: A.redBg, chipBorder: A.line, chipText: A.clayDeep, fieldBg: A.card, fieldText: A.ink }} />
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: '34px 20px', background: A.cream2 }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontFamily: ASERIF, fontSize: 26, fontWeight: 500, color: A.ink, margin: '0 0 18px' }}>Buyers like you</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {TESTIMONIALS.slice(0, 3).map((t, i) =>
            <div key={i} style={{ background: A.card, borderRadius: 18, padding: 18, border: '1px solid ' + A.line }}>
                <Stars value={t.stars} size={14} />
                <div style={{ fontSize: 14.5, lineHeight: 1.55, color: A.ink, margin: '10px 0 14px' }}>“{t.text}”</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Avatar name={t.name} size={38} />
                  <div><div style={{ fontWeight: 700, fontSize: 13.5, color: A.ink }}>{t.name}</div><div style={{ fontSize: 12, color: A.sub }}>{t.loc} · Verified buyer</div></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '34px 20px 40px' }}>
        <div style={{ maxWidth: W, margin: '0 auto' }}>
          <h2 style={{ fontFamily: ASERIF, fontSize: 26, fontWeight: 500, color: A.ink, margin: '0 0 6px' }}>Questions, answered</h2>
          <AWarmFAQ />
        </div>
      </section>

      <LiveFooter />
      <FloatingCTA onClick={book} track="varA-sticky-cta" />
    </div>);

}

window.VariantA = VariantA;