// mockups.jsx — Small UI-fragment components used inline in sections.
// Each one is an "evidence artifact": a real-looking screen fragment that
// shows the product in action. Aligned to the real LUE flow:
//   catálogo → chat web (link público) → IA qualifica e captura contato
//   → lead entra na fila do painel (ialue.com.br/leads) → vendedor fecha.

/* ---- small garment glyphs (line icons, consistent w/ the rest) ---- */
const GARMENT = {
  blusa: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M8.5 3.5 5 6 3 8.5 5.5 11l1.5-1.2V20h10V9.8L18.5 11 21 8.5 19 6l-3.5-2.5"/><path d="M8.5 3.5c0 2 1.5 3 3.5 3s3.5-1 3.5-3"/></svg>,
  vestido: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 3h6l-1.2 3.2L17 11l-1.5 1.5L18 21H6l2.5-8.5L7 11l3.2-4.8z"/></svg>,
  calca: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3h12l-.6 18H14l-1.2-11h-1.6L10 21H6.6z"/><path d="M6 3h12"/></svg>,
  camisa: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 3l3 2 3-2 4 2.5L17 9l-1-.8V20H8V8.2L7 9 5 5.5 9 3z"/><path d="M9 3l3 4 3-4"/></svg>,
};

const PIcon = {
  lock: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>,
  copy: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>,
  eye: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>,
  check: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
};

/* =========================================================
   1) Unread-at-23h47 chat card  (Pain — main visual)
   ========================================================= */
function UnreadChat() {
  return (
    <div className="m-unread">
      <div className="m-unread__head">
        <div className="m-unread__ava">B</div>
        <div className="m-unread__who">
          <b>Bia Cardoso</b>
          <span>via Instagram · 23:47</span>
        </div>
        <span className="m-unread__time">terça-feira</span>
      </div>
      <div className="m-unread__msgs">
        <div className="m-unread__msg">oi! aquela blusa lilás que você postou no story ainda tem em P?</div>
        <div className="m-unread__msg">e o preço? 😍</div>
      </div>
      <div className="m-unread__footer">
        <span className="m-unread__dot"/>
        <span>visualizada às 23:47 · sem resposta</span>
        <span className="m-unread__lost">venda perdida</span>
      </div>
    </div>
  );
}

/* =========================================================
   2) Same question, 40 times (Pain — small)
   ========================================================= */
function RepeatedAsks() {
  const rows = [
    { name: 'Camila', q: 'qual o preço dessa blusa?', t: '14:02' },
    { name: 'Larissa', q: 'oi, quanto custa essa peça?', t: '14:08' },
    { name: 'Aline', q: 'qual o valor?', t: '14:11' },
    { name: 'Bruna', q: 'preço da blusa lilás?', t: '14:14' },
  ];
  return (
    <div className="m-repeat">
      <div className="m-repeat__head">
        <span>hoje · 14h</span>
        <span className="m-repeat__count">+36 hoje</span>
      </div>
      {rows.map((r, i) => (
        <div className="m-repeat__row" key={i}>
          <div className="m-repeat__ava">{r.name[0]}</div>
          <div className="m-repeat__body">
            <b>{r.name}</b>
            <span><mark>{r.q}</mark></span>
          </div>
          <span className="m-repeat__t">{r.t}</span>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   3) Abandoned inbox 70%  (Pain — small)
   ========================================================= */
function AbandonedInbox() {
  const items = [
    { n: 'Bruna G.', m: 'tá disponivel ainda?', cold: true },
    { n: 'Cliente novo', m: 'oi vi seu insta', cold: true },
    { n: 'Yasmin', m: 'tem em P?', cold: false },
    { n: 'Karen', m: 'me chama no privado', cold: true },
    { n: 'Cliente novo', m: '?', cold: true },
    { n: 'Júlia', m: 'tem essa em outras cores', cold: true },
    { n: 'Renata', m: 'oii', cold: true },
  ];
  return (
    <div className="m-inbox">
      <div className="m-inbox__head">
        <span>caixa de entrada</span>
        <span className="m-inbox__stat">7 leads · 5 perdidos</span>
      </div>
      <ul className="m-inbox__list">
        {items.map((it, i) => (
          <li key={i} className={it.cold ? 'cold' : ''}>
            <span className="dot"/>
            <b>{it.n}</b>
            <em>"{it.m}"</em>
            {it.cold && <span className="tag">sem resposta</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

/* =========================================================
   4) Lead card — output of LUE (Solution "o que sai")
   nome · número · email · resumo de interesse + ações
   ========================================================= */
function LeadSheet() {
  return (
    <div className="m-sheet">
      <div className="m-sheet__head">
        <span className="m-sheet__pill"><span className="m-sheet__dot"/>lead na fila</span>
        <span className="m-sheet__time">há 12s · 03:18</span>
      </div>
      <div className="m-sheet__name">
        <div className="m-sheet__ava">M</div>
        <div>
          <b>Marina Silva</b>
          <span>+55 11 9 8842-1109</span>
        </div>
      </div>
      <div className="m-sheet__rows">
        <div><span>Email</span><b>marina@email.com</b></div>
        <div><span>Resumo</span><b>Quer Blusa Cropped Lilac · P. Perguntou frete pra SP.</b></div>
      </div>
      <div className="m-sheet__actions">
        <button className="m-act"><span className="ic">{PIcon.eye}</span>Ver detalhes</button>
        <button className="m-act"><span className="ic">{PIcon.copy}</span>Copiar nº</button>
        <button className="m-act m-act--done"><span className="ic">{PIcon.check}</span>Marcar contatado</button>
      </div>
    </div>
  );
}

/* =========================================================
   5) Inbox flooded (Solution — left side, "o que entra")
   ========================================================= */
function FloodedInbox() {
  const samples = [
    'oi tem essa em M?',
    'qto é o frete pra SP?',
    'recebe pix?',
    'tem catálogo?',
    'oi',
    'olha esse modelo',
    'pra atacado?',
    'tem em outras cores?',
    'qual o preço?',
    'aceita cartão?',
    'só perguntando',
    'depois te chamo',
    'esse aqui ainda tem?',
    'oi bom dia',
    'tem entrega hj?',
  ];
  return (
    <div className="m-flood">
      <div className="m-flood__head">
        <span>WhatsApp + chat · entrada</span>
        <span className="m-flood__count">112 mensagens</span>
      </div>
      <div className="m-flood__list">
        {samples.map((s, i) => (
          <div className="m-flood__row" key={i}>
            <span className="b"/>
            <span className="t">{s}</span>
          </div>
        ))}
      </div>
      <div className="m-flood__fade"/>
    </div>
  );
}

/* =========================================================
   HOW · Passo 1 — Catálogo JÁ CONFIGURADO (estado ativo, sem progresso)
   ========================================================= */
function CatalogConfigured() {
  const lines = [
    { g: GARMENT.blusa, t: 'Blusa Cropped Lilac', s: 'P · M · G · GG', p: 'R$ 79', ok: true },
    { g: GARMENT.vestido, t: 'Vestido Midi Estampado', s: 'P · M · G', p: 'R$ 149', ok: true },
    { g: GARMENT.calca, t: 'Calça Wide Off-White', s: '36 · 38 · 40 · 42', p: 'R$ 189', ok: true },
    { g: GARMENT.camisa, t: 'Camisa Linho Cru', s: '— esgotada', p: '—', ok: false },
  ];
  return (
    <div className="m-catalog">
      <div className="m-catalog__head">
        <div>
          <b>Catálogo conectado</b>
          <span>FácilZap ou JSON</span>
        </div>
        <span className="m-catalog__active"><i/>ativo</span>
      </div>
      <ul className="m-catalog__list">
        {lines.map((l, i) => (
          <li key={i} className={l.ok ? '' : 'off'}>
            <span className="thumb">{l.g}</span>
            <div>
              <b>{l.t}</b>
              <span>{l.s}</span>
            </div>
            <em>{l.p}</em>
          </li>
        ))}
      </ul>
      <div className="m-catalog__foot">2.481 peças disponíveis · atualiza sozinho</div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 2 — CHAT WEB aberto pelo cliente
   ========================================================= */
function ChatWebScreen() {
  return (
    <div className="m-web">
      <div className="m-web__bar">
        <span className="m-web__lock">{PIcon.lock}</span>
        <span className="m-web__url">lue-ateliedabia.vercel.app/chat/9f2a</span>
      </div>
      <div className="m-web__chat">
        <div className="m-web__head">
          <div className="m-web__ava">L</div>
          <div className="m-web__who">
            <b>LUE · Atelier da Bia</b>
            <span className="on"><i/>online</span>
          </div>
        </div>
        <div className="m-web__body">
          <div className="m-web__bub in">Oi! 😊 Me conta o que você está procurando que eu te mostro as opções.</div>
        </div>
        <div className="m-web__input">
          <span className="m-web__pill">Mensagem…</span>
          <span className="m-web__send">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 3 — A IA qualifica e CAPTURA o contato
   ========================================================= */
function CaptureConvo() {
  return (
    <div className="m-capture">
      <span className="m-capture__seal"><span className="dot"/>contato capturado</span>
      <div className="m-capture__chat">
        <div className="m-web__bub out">amei! quero sim</div>
        <div className="m-web__bub in">Ótimo! Me passa seu nome, número e email que eu anoto aqui pra você. 😊</div>
        <div className="m-web__bub out">Marina, 11 98842-1109, marina@email.com</div>
        <div className="m-web__bub in">Anotado, Marina! Em breve nosso time entra em contato. ✨</div>
      </div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 4 — Lead entra na fila do painel (1 novo)
   ========================================================= */
function LeadPanelArrived() {
  return (
    <div className="m-panel">
      <div className="m-panel__bar">
        <span className="m-panel__lock">{PIcon.lock}</span>
        <span className="m-panel__url">ialue.com.br/leads</span>
      </div>
      <div className="m-panel__head">
        <b>LUE · Fila de leads</b>
        <span className="m-panel__new">+1 NOVO</span>
      </div>
      <div className="m-panel__lead is-new">
        <div className="m-panel__ava">M</div>
        <div className="m-panel__info">
          <div className="m-panel__row1">
            <b>Marina Silva</b>
            <span className="m-panel__badge">NOVO</span>
          </div>
          <span className="m-panel__phone">+55 11 9 8842-1109</span>
          <p className="m-panel__resumo">Quer Blusa Cropped Lilac · P. Perguntou frete pra SP.</p>
          <span className="m-panel__when"><i/>Chegou agora · 03:18</span>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 5 — Vendedor lê o resumo e contata (fila + ações)
   ========================================================= */
function LeadQueue() {
  const leads = [
    { i: 'M', n: 'Marina Silva', p: '+55 11 9 8842-1109', r: 'Quer Blusa Cropped Lilac · P. Perguntou frete pra SP.' },
    { i: 'C', n: 'Camila Duarte', p: '+55 21 9 9471-3380', r: 'Vestido Midi Estampado · G. Quer parcelar em 3x.' },
  ];
  return (
    <div className="m-panel m-panel--queue">
      <div className="m-panel__head">
        <b>LUE · Fila de leads</b>
        <span className="m-panel__new">3 novos</span>
      </div>
      {leads.map((l, k) => (
        <div className="m-panel__lead" key={k}>
          <div className="m-panel__ava">{l.i}</div>
          <div className="m-panel__info">
            <div className="m-panel__row1">
              <b>{l.n}</b>
              <span className="m-panel__badge">NOVO</span>
            </div>
            <span className="m-panel__phone">{l.p}</span>
            <p className="m-panel__resumo">{l.r}</p>
            <div className="m-panel__acts">
              <button className="m-act"><span className="ic">{PIcon.eye}</span>Ver detalhes</button>
              <button className="m-act"><span className="ic">{PIcon.copy}</span>Copiar nº</button>
              <button className="m-act m-act--done"><span className="ic">{PIcon.check}</span>Marcar contatado</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   Feature mockups (bento)
   ========================================================= */
function FNoStock() {
  return (
    <div className="f-nostock">
      <div className="f-nostock__bubble in">tem aquela jaqueta de couro que vocês tinham no inverno passado?</div>
      <div className="f-nostock__bubble out">
        essa peça eu não tenho mais no estoque. mas chegou uma jaqueta corduroy parecida, posso te mostrar? 💜
      </div>
      <span className="f-nostock__seal">
        <span className="dot"/>0 alucinação · só fala o que está no seu catálogo
      </span>
    </div>
  );
}

function FMulti() {
  const examples = [
    { q: '"blusinha estampada P, sabe? pra trampo"', cap: '→ entendeu gíria + tamanho + ocasião' },
    { q: '"qto q ta a calça wide off white 38"', cap: '→ leu abreviação e achou a peça certa' },
    { q: '"oi… aquela do story… ainda tem?"', cap: '→ frase quebrada, intenção identificada' },
  ];
  return (
    <div className="f-multi">
      {examples.map((e, i) => (
        <div className="f-multi__item" key={i}>
          <div className="f-multi__txt">{e.q}</div>
          <span className="f-multi__cap">{e.cap}</span>
        </div>
      ))}
    </div>
  );
}

function FClock() {
  return (
    <div className="f-clock">
      <div className="f-clock__time">
        <b>03:14</b>
        <span>quarta-feira</span>
      </div>
      <div className="f-clock__rows">
        <div><span className="d hot"/>Bia entrou · 03:18</div>
        <div><span className="d hot"/>Camila entrou · 03:42</div>
        <div><span className="d"/>Yasmin · 02:11</div>
      </div>
      <div className="f-clock__cap">3 leads qualificados enquanto seu time dormia</div>
    </div>
  );
}

function FSearch() {
  return (
    <div className="f-search">
      <div className="f-search__bar">
        <span className="f-search__ic">⌕</span>
        <span>"blusinha estampada P, pra trabalho"</span>
      </div>
      <div className="f-search__hit">
        <div className="f-search__thumb"/>
        <div>
          <b>Blusa Soltinha Floral</b>
          <span>P · M · G — R$ 89</span>
          <em>96% match · entendeu "estampada" e "P"</em>
        </div>
      </div>
    </div>
  );
}

function FName() {
  return (
    <div className="f-name">
      <div className="f-name__bub out">amei, quero sim!</div>
      <div className="f-name__bub in">Que bom! Me passa nome, número e email que o time já te chama. 😊</div>
      <div className="f-name__capture">
        <span className="f-name__lbl">capturado naturalmente</span>
        <div className="f-name__rows">
          <div><span>nome</span><b>Marina</b></div>
          <div><span>número</span><b>11 98842-1109</b></div>
          <div><span>email</span><b>marina@email.com</b></div>
        </div>
      </div>
    </div>
  );
}

function FFacilZap() {
  return (
    <div className="f-fz">
      <div className="f-fz__row">
        <span className="f-fz__brand">FácilZap</span>
        <span className="f-fz__plug">⇆</span>
        <span className="f-fz__brand lue">LUE</span>
      </div>
      <div className="f-fz__rows">
        <div><span>catálogo</span><b className="ok">sincronizado</b></div>
        <div><span>estoque</span><b className="ok">tempo real</b></div>
        <div><span>preço</span><b className="ok">automático</b></div>
      </div>
      <div className="f-fz__cap">Ou importe um arquivo JSON · setup em 1 clique</div>
    </div>
  );
}

/* =========================================================
   Day timeline (Compare)
   ========================================================= */
function DayTimeline() {
  const hours = [9, 12, 15, 18, 21, 23];
  const sem = [
    { h: 9,  l: 'time chega', kind:'ok' },
    { h: 12, l: 'qual preço? (38ª vez)', kind:'mid' },
    { h: 15, l: 'orçamento perdido', kind:'bad' },
    { h: 18, l: 'time vai embora', kind:'mid' },
    { h: 21, l: '"tá ai?" sem resposta', kind:'bad' },
    { h: 23, l: 'Bia desiste · concorrente fecha', kind:'bad' },
  ];
  const com = [
    { h: 9,  l: 'LUE já qualificou 12 da madrugada', kind:'ok' },
    { h: 12, l: 'time só abre lead quente', kind:'ok' },
    { h: 15, l: 'cliente atendido no chat', kind:'ok' },
    { h: 18, l: 'time sai · LUE continua', kind:'ok' },
    { h: 21, l: 'Bia entra · LUE responde em 4s', kind:'ok' },
    { h: 23, l: 'lead pronto na fila do painel', kind:'ok' },
  ];
  return (
    <div className="m-day">
      <div className="m-day__rail">
        {hours.map((h, i) => <span key={i} className="m-day__h">{h}h</span>)}
      </div>
      <div className="m-day__track sem">
        <div className="m-day__label">sem LUE</div>
        <div className="m-day__line"/>
        <div className="m-day__events">
          {sem.map((e, i) => (
            <div className={`m-day__ev ${e.kind}`} key={i} style={{left: `${(i/(sem.length-1))*100}%`}}>
              <span className="m-day__dot"/>
              <span className="m-day__txt">{e.l}</span>
              <span className="m-day__t">{e.h}h</span>
            </div>
          ))}
        </div>
      </div>
      <div className="m-day__track com">
        <div className="m-day__label">com LUE</div>
        <div className="m-day__line on"/>
        <div className="m-day__events">
          {com.map((e, i) => (
            <div className={`m-day__ev on`} key={i} style={{left: `${(i/(com.length-1))*100}%`}}>
              <span className="m-day__dot on"/>
              <span className="m-day__txt">{e.l}</span>
              <span className="m-day__t">{e.h}h</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 2 (ALT) — WhatsApp da loja (canal principal)
   Representação neutra do canal: cabeçalho verde + rótulo
   "WhatsApp", sem clonar a interface oficial.
   ========================================================= */
function WhatsAppScreen() {
  return (
    <div className="m-wa">
      <div className="m-wa__bar">
        <span className="m-wa__lock">{PIcon.lock}</span>
        <span className="m-wa__url">wa.me/ateliedabia</span>
        <span className="m-wa__tag">WhatsApp</span>
      </div>
      <div className="m-wa__chat">
        <div className="m-wa__head">
          <div className="m-wa__ava">L</div>
          <div className="m-wa__who">
            <b>LUE · Atelier da Bia</b>
            <span className="on"><i/>online</span>
          </div>
        </div>
        <div className="m-wa__body">
          <div className="m-wa__bub in">Oi! 😊 Me conta o que você está procurando que eu te mostro as opções.</div>
          <div className="m-wa__bub out">oi! queria ver blusa lilás</div>
        </div>
        <div className="m-wa__input">
          <span className="m-wa__pill">Mensagem…</span>
          <span className="m-wa__send">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   FEATURE — também atende no chat do navegador (2º canal)
   ========================================================= */
function FBrowserChat() {
  return (
    <div className="f-web">
      <div className="f-web__bar">
        <span className="f-web__dots"><i/><i/><i/></span>
        <span className="f-web__url">lue-ateliedabia.vercel.app/chat/9f2a</span>
      </div>
      <div className="f-web__body">
        <div className="f-web__bub in">Oi! Sou a LUE 💜 posso te ajudar a escolher?</div>
        <div className="f-web__bub out">quero ver vestidos midi</div>
      </div>
    </div>
  );
}

/* =========================================================
   FEATURE — dispara a foto do produto na conversa
   ========================================================= */
function FPhotos() {
  return (
    <div className="f-photos">
      <div className="f-photos__bub in">me manda foto dessa blusa lilás?</div>
      <div className="f-photos__card">
        <div className="f-photos__img">
          <svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="fph" patternUnits="userSpaceOnUse" width="18" height="18" patternTransform="rotate(35)">
                <rect width="18" height="18" fill="transparent"/>
                <circle cx="5" cy="5" r="2" fill="rgba(124,58,237,.35)"/>
                <path d="M0 12 L18 12" stroke="rgba(124,58,237,.18)" strokeWidth="1.5"/>
              </pattern>
            </defs>
            <rect width="200" height="120" fill="url(#fph)"/>
          </svg>
          <span className="f-photos__sent">enviada pela LUE</span>
        </div>
        <div className="f-photos__cap"><b>Blusa Cropped Lilac</b><span>P · M · G — R$ 79</span></div>
      </div>
    </div>
  );
}

/* =========================================================
   FEATURE — responde as perguntas frequentes do cliente
   ========================================================= */
function FFaq() {
  const qs = ['Aceita Pix?', 'Faz troca?', 'Qual o prazo de entrega?', 'Tem parcelamento?'];
  return (
    <div className="f-faq">
      {qs.map((q, i) => (
        <div className="f-faq__row" key={i}>
          <span className="f-faq__q">“{q}”</span>
          <span className="f-faq__a"><span className="dot"/>respondida</span>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   HOW · Passo 3 — mostra a peça e dispara a foto (WhatsApp)
   ========================================================= */
function ShowcaseChat() {
  return (
    <div className="m-show">
      <div className="m-show__head">
        <div className="m-show__ava">L</div>
        <div className="m-show__who">
          <b>LUE · Atelier da Bia</b>
          <span className="on"><i/>online</span>
        </div>
        <span className="m-show__tag">WhatsApp</span>
      </div>
      <div className="m-show__body">
        <div className="m-show__bub out">me manda foto da blusa lilás?</div>
        <div className="m-show__card">
          <div className="m-show__img">
            <svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="msh" patternUnits="userSpaceOnUse" width="18" height="18" patternTransform="rotate(35)">
                  <rect width="18" height="18" fill="transparent"/>
                  <circle cx="5" cy="5" r="2" fill="rgba(124,58,237,.35)"/>
                  <path d="M0 12 L18 12" stroke="rgba(124,58,237,.18)" strokeWidth="1.5"/>
                </pattern>
              </defs>
              <rect width="200" height="120" fill="url(#msh)"/>
            </svg>
            <span className="m-show__sent">foto enviada pela LUE</span>
          </div>
          <div className="m-show__cap">
            <b>Blusa Cropped Lilac</b>
            <span>P · M · G — R$ 79</span>
          </div>
        </div>
        <div className="m-show__bub in">Essa! 💜 Tenho em P, M e G. Aceita Pix e faz em até 3x 😊</div>
      </div>
    </div>
  );
}

/* =========================================================
   HOW · Passo 3 (VIDEO) — demonstração real do disparo de foto
   ========================================================= */
function ShowcaseVideo() {
  return (
    <div className="m-video">
      <video
        className="m-video__el"
        src="assets/step3.mp4"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
      />
    </div>
  );
}

Object.assign(window, {
  UnreadChat, RepeatedAsks, AbandonedInbox,
  LeadSheet, FloodedInbox,
  CatalogConfigured, ChatWebScreen, WhatsAppScreen, ShowcaseChat, ShowcaseVideo, CaptureConvo, LeadPanelArrived, LeadQueue,
  FNoStock, FMulti, FClock, FSearch, FBrowserChat, FPhotos, FFaq, FName, FFacilZap,
  DayTimeline,
});