// Landing sections: Showcase de telas · Testimonials · Compare

const { useState: useShowState } = React;

// Avatar de iniciais (SVG local) — nome sempre bate, sem depender de foto externa.
// Cor derivada do nome pra dar variedade, na paleta da marca.
const lpAv = (nome, tam) => {
  const n = (nome || '?').trim();
  const ini = n.split(/\s+/).filter(Boolean).slice(0, 2).map(s => s[0]).join('').toUpperCase() || '?';
  let h = 0; for (let i = 0; i < n.length; i++) h = (h * 31 + n.charCodeAt(i)) % 360;
  const hue = 250 + (h % 80) - 20; // roxo/azul da marca (230–310)
  const bg = `oklch(0.62 0.14 ${hue})`;
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tam}" height="${tam}"><rect width="${tam}" height="${tam}" rx="${tam}" fill="${bg}"/><text x="50%" y="50%" dy=".35em" text-anchor="middle" font-family="Manrope, Arial, sans-serif" font-size="${Math.round(tam*0.42)}" font-weight="700" fill="white">${ini}</text></svg>`;
  return 'data:image/svg+xml,' + encodeURIComponent(svg);
};

// ─── SHOWCASE ───
const SHOW_TABS = [
  {
    id: 'pipeline',
    label: 'Pipeline',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    eyebrow: 'KANBAN VIVO',
    title: 'Cada deal numa coluna. Cada coluna, uma decisão.',
    desc: 'Arrasta, marca como ganho, atribui pra alguém — tudo num gesto. O Ezza puxa contexto da última conversa pra você lembrar onde parou.',
    features: ['4 etapas customizáveis', 'Filtros por valor, prazo e responsável', 'Hover mostra última atividade'],
    render: () => <PipelineMockup />,
  },
  {
    id: 'wa',
    label: 'WhatsApp',
    icon: lpICN.whatsapp,
    eyebrow: 'CONVERSA + DEAL',
    title: 'WhatsApp e CRM no mesmo painel.',
    desc: 'Conversa do cliente do lado direito, contexto do deal em cima. Status de entrega, sugestões de resposta e templates aprovados pelo time.',
    features: ['Sem abrir o WhatsApp Web', 'Templates HSM aprovados', 'Histórico colado ao contato pra sempre'],
    render: () => <WaMockup />,
  },
  {
    id: 'dash',
    label: 'Dashboard',
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-6"/></svg>,
    eyebrow: 'NÚMEROS EM TEMPO REAL',
    title: 'A reunião de segunda já vem pronta.',
    desc: 'Receita, ticket médio, ciclo de venda, conversão por etapa — atualizados a cada minuto. Exportável em PDF, Excel ou Google Sheets.',
    features: ['Comparativo mês a mês', 'Drill-down por vendedor', 'Alertas quando algo cai'],
    render: () => <DashMockup />,
  },
  {
    id: 'auto',
    label: 'Automações',
    icon: lpICN.bolt,
    eyebrow: 'NA LINGUAGEM DO TIME',
    title: 'Crie regras como se estivesse falando.',
    desc: '"Se o lead vem de site, manda WhatsApp em 2 minutos". A Ezza traduz pra um workflow visual que qualquer um pode editar.',
    features: ['Linguagem natural em PT-BR', 'Triggers de WhatsApp, e-mail, slack', 'Histórico de execução auditável'],
    render: () => <AutoMockup />,
  },
];

function LpShowcase() {
  const [tab, setTab] = useShowState('pipeline');
  const cur = SHOW_TABS.find(t => t.id === tab);

  return (
    <section id="clientes" className="lp-section showcase">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />UM TOUR PELO PRODUTO</span>
          <h2 className="lp-section-title">É bonito porque<br/><em>foi pensado pra você.</em></h2>
        </div>

        <div className="showcase-tabs">
          {SHOW_TABS.map(t => (
            <button key={t.id} className={`showcase-tab ${tab === t.id ? 'showcase-tab-on' : ''}`} onClick={() => setTab(t.id)}>
              {t.icon} {t.label}
            </button>
          ))}
        </div>

        <div className="showcase-stage">
          <div className="showcase-content">
            <div className="showcase-eyebrow">{cur.eyebrow}</div>
            <h3 className="showcase-title">{cur.title}</h3>
            <p className="showcase-desc">{cur.desc}</p>
            <ul className="showcase-features">
              {cur.features.map((f, i) => (
                <li key={i}>
                  <span className="showcase-feat-check">{lpICN.check}</span>
                  {f}
                </li>
              ))}
            </ul>
            <a className="lp-link" href="#" onClick={(e) => e.preventDefault()}>Explorar essa tela →</a>
          </div>

          <div className="showcase-screen">
            {cur.render()}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── MOCKUPS pequenos ───
function PipelineMockup() {
  const cols = [
    {
      label: 'Qualificado', count: 3, total: 'R$ 920k',
      bg: 'oklch(0.96 0.05 245)', accent: 'oklch(0.55 0.16 250)',
      cards: [
        { name: 'Tecnoluz Solar',     val: 'R$ 482k', prob: 85, av: 12, tag: 'Hot',  prazo: '14 mai', tagBg: 'oklch(0.92 0.07 18)', tagFg: 'oklch(0.40 0.16 18)' },
        { name: 'Café do Vale',       val: 'R$ 128k', prob: 68, av: 23, tag: 'Novo', prazo: '18 mai', tagBg: 'oklch(0.93 0.06 250)', tagFg: 'oklch(0.40 0.16 250)' },
        { name: 'Editora Pampa',      val: 'R$ 64k',  prob: 52, av: 33, tag: null,   prazo: '22 mai' },
      ],
    },
    {
      label: 'Proposta', count: 2, total: 'R$ 670k',
      bg: 'oklch(0.97 0.07 95)', accent: 'oklch(0.65 0.13 80)',
      cards: [
        { name: 'Construtora Paineiras', val: 'R$ 420k', prob: 72, av: 44, tag: 'VIP', prazo: '15 mai', tagBg: 'oklch(0.18 0.01 250)', tagFg: 'white' },
        { name: 'Brasil Logística',      val: 'R$ 250k', prob: 60, av: 55, tag: null,  prazo: '20 mai' },
      ],
    },
    {
      label: 'Negociação', count: 2, total: 'R$ 482k', active: true,
      bg: 'oklch(0.96 0.05 18)', accent: 'oklch(0.62 0.18 25)',
      cards: [
        { name: 'Studio Maracá',     val: 'R$ 312k', prob: 80, av: 16, tag: 'SLA', prazo: 'hoje',  tagBg: 'oklch(0.92 0.07 18)', tagFg: 'oklch(0.40 0.16 18)' },
        { name: 'Agropecuária Cerrado', val: 'R$ 170k', prob: 65, av: 27, tag: null, prazo: '16 mai' },
      ],
    },
    {
      label: 'Fechado', count: 4, total: 'R$ 282k',
      bg: 'oklch(0.96 0.06 160)', accent: 'oklch(0.50 0.13 160)',
      cards: [
        { name: 'Indústria Aurora',  val: 'R$ 142k', prob: 100, av: 38, tag: 'Ganho', won: true, prazo: '12 mai', tagBg: 'oklch(0.93 0.07 160)', tagFg: 'oklch(0.30 0.12 160)' },
        { name: 'Tecno Sul',          val: 'R$ 88k',  prob: 100, av: 19, tag: 'Ganho', won: true, prazo: '10 mai', tagBg: 'oklch(0.93 0.07 160)', tagFg: 'oklch(0.30 0.12 160)' },
      ],
    },
  ];

  return (
    <div style={{padding: 18, background: 'white', minHeight: 380}}>
      {/* Top bar — strip */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 14, padding: '0 4px'}}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 20, color:'var(--ink)', letterSpacing:'-0.015em'}}>Pipeline</span>
          <span style={{fontSize: 10.5, fontWeight: 700, padding: '3px 9px', borderRadius: 999, background:'var(--acc-mint)', color:'oklch(0.32 0.12 160)'}}>+12% no mês</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap: 4}}>
          {['Ana Beatriz','Bruno Souza','Camila Lima','Diego Alves','Elena Rocha'].map((nome, i) => (
            <img key={i} src={lpAv(nome, 20)} alt="" style={{width: 20, height: 20, borderRadius: '50%', border:'1.5px solid white', boxShadow:'0 0 0 0.5px oklch(0.88 0.012 255)', marginLeft: i === 0 ? 0 : -6}} />
          ))}
          <span style={{fontSize: 9.5, fontWeight: 700, padding: '0 6px', height: 20, lineHeight: '20px', borderRadius: 99, background: 'oklch(0.93 0.012 250)', color:'var(--ink-muted)', marginLeft: -4}}>+3</span>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8}}>
        {cols.map((col, i) => (
          <div key={i} style={{background: col.bg, borderRadius: 12, padding: 10, border: col.active ? `1.5px solid ${col.accent}` : '0.5px solid transparent', position:'relative'}}>
            {col.active && (
              <span style={{position:'absolute', top: -8, left: 10, fontSize: 9, fontWeight: 800, letterSpacing:'.08em', padding:'2px 7px', borderRadius: 99, background: col.accent, color:'white'}}>ATIVA</span>
            )}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 6}}>
              <span style={{fontSize: 9.5, fontWeight: 700, letterSpacing:'.1em', textTransform:'uppercase', color:'oklch(0.28 0.04 250)'}}>{col.label}</span>
              <span style={{width: 18, height: 18, borderRadius: '50%', background: 'white', fontSize: 10, fontWeight: 700, display:'grid', placeItems:'center', color:'var(--ink)'}}>{col.count}</span>
            </div>
            <div style={{fontSize: 9.5, fontFamily:'var(--font-mono)', fontWeight: 600, color:'oklch(0.32 0.04 250)', marginBottom: 8, opacity: 0.75}}>{col.total}</div>

            <div style={{display:'flex', flexDirection:'column', gap: 6}}>
              {col.cards.map((c, k) => (
                <div key={k} style={{background: 'white', borderRadius: 8, padding: '8px 9px', boxShadow:'0 1px 2px rgba(20,30,60,.05)'}}>
                  {/* tag + status */}
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', minHeight: 14}}>
                    {c.tag ? (
                      <span style={{fontSize: 8.5, fontWeight: 700, padding:'1.5px 6px', borderRadius: 99, background: c.tagBg, color: c.tagFg, letterSpacing:'.02em'}}>{c.tag}</span>
                    ) : <span />}
                    {c.won ? (
                      <span style={{display:'inline-flex', color:'var(--ok)'}}>
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                      </span>
                    ) : (
                      <span style={{fontSize: 8.5, fontFamily:'var(--font-mono)', color:'var(--ink-faint)'}}>{c.prazo}</span>
                    )}
                  </div>

                  {/* nome + valor */}
                  <div style={{fontSize: 10.5, fontWeight: 600, color: 'var(--ink)', marginTop: 4, letterSpacing:'-0.005em', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.name}</div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize: 12, fontWeight: 700, marginTop: 2, color: 'var(--ink)'}}>{c.val}</div>

                  {/* barra prob + avatar */}
                  <div style={{display:'flex', alignItems:'center', gap: 6, marginTop: 6}}>
                    <div style={{flex: 1, height: 3, background: 'oklch(0.94 0.012 250)', borderRadius: 99, overflow: 'hidden'}}>
                      <div style={{height: '100%', width: `${c.prob}%`, background: col.accent, borderRadius: 99}} />
                    </div>
                    <img src={lpAv(c.name, 14)} alt="" style={{width: 14, height: 14, borderRadius:'50%', border:'1.5px solid white', boxShadow:'0 0 0 0.5px oklch(0.85 0.012 255)'}} />
                  </div>
                </div>
              ))}

              {/* + button no fim de cada coluna */}
              <button style={{background: 'transparent', border: '1.5px dashed oklch(0.85 0.04 245 / 0.5)', borderRadius: 8, padding: '6px', fontSize: 10, fontWeight: 600, color: 'oklch(0.40 0.04 250)', cursor: 'default', fontFamily:'inherit', letterSpacing:'-0.005em'}}>
                + Adicionar deal
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WaMockup() {
  return (
    <div style={{padding: 0, display:'grid', gridTemplateColumns: '1fr 220px', minHeight: 380, background:'#fff'}}>
      <div style={{background:'oklch(0.96 0.008 90)', display:'flex', flexDirection:'column'}}>
        <div style={{background: 'linear-gradient(180deg, oklch(0.42 0.10 160) 0%, oklch(0.38 0.09 160) 100%)', color:'white', padding: '10px 14px', display:'flex', alignItems:'center', gap: 10}}>
          <img src={lpAv('Ana Beatriz Carvalho', 32)} alt="" style={{width: 32, height: 32, borderRadius: '50%'}} />
          <div style={{flex: 1}}>
            <div style={{fontSize: 12, fontWeight: 600}}>Ana Beatriz Carvalho</div>
            <div style={{fontSize: 10, opacity: 0.85}}>online · digitando…</div>
          </div>
        </div>
        <div style={{flex: 1, padding: 14, display:'flex', flexDirection:'column', gap: 6, background: 'repeating-linear-gradient(45deg, oklch(0.94 0.008 90) 0 8px, oklch(0.93 0.008 90) 8px 16px)'}}>
          <div style={{alignSelf:'flex-start', background:'white', padding: '6px 10px', borderRadius: '10px 10px 10px 2px', maxWidth: '80%', fontSize: 11, boxShadow: '0 1px 1px rgba(0,0,0,.05)'}}>Bom dia! Tudo bem por aí?</div>
          <div style={{alignSelf:'flex-end', background:'oklch(0.92 0.06 140)', padding: '6px 10px', borderRadius: '10px 10px 2px 10px', maxWidth: '80%', fontSize: 11, boxShadow: '0 1px 1px rgba(0,0,0,.05)'}}>Oi Ana! Tudo. Te mandei a proposta atualizada 👍</div>
          <div style={{alignSelf:'flex-end', background:'oklch(0.92 0.06 140)', padding: '6px 10px', borderRadius: '10px 10px 2px 10px', maxWidth: '80%', fontSize: 11, boxShadow: '0 1px 1px rgba(0,0,0,.05)'}}>Topa marcar a apresentação 5ª às 14h?</div>
          <div style={{alignSelf:'flex-start', background:'white', padding: '6px 10px', borderRadius: '10px 10px 10px 2px', maxWidth: '80%', fontSize: 11, boxShadow: '0 1px 1px rgba(0,0,0,.05)'}}>Topo!! Tô olhando o doc agora.</div>
        </div>
      </div>
      <div style={{background:'oklch(0.97 0.012 250)', padding: 16, borderLeft: '0.5px solid oklch(0.92 0.012 255)'}}>
        <div style={{fontSize: 9.5, fontWeight: 700, letterSpacing: '.1em', color:'var(--ink-faint)', textTransform:'uppercase', marginBottom: 8}}>DEAL ATIVO</div>
        <div style={{fontFamily:'var(--font-mono)', fontSize: 16, fontWeight: 700, color:'var(--ink)'}}>R$ 482.300</div>
        <div style={{fontSize: 10, color:'var(--ink-muted)', marginTop: 2}}>Negociação · 65%</div>
        <div style={{height: 1, background:'oklch(0.92 0.012 250)', margin: '12px 0'}} />
        <div style={{fontSize: 9.5, fontWeight: 700, letterSpacing: '.1em', color:'var(--ink-faint)', textTransform:'uppercase', marginBottom: 6}}>EMPRESA</div>
        <div style={{fontSize: 12, fontWeight: 600, color:'var(--ink)'}}>Tecnoluz Solar</div>
        <div style={{fontSize: 10, color:'var(--ink-muted)', marginTop: 2}}>Diretora Comercial</div>
        <div style={{height: 1, background:'oklch(0.92 0.012 250)', margin: '12px 0'}} />
        <div style={{fontSize: 9.5, fontWeight: 700, letterSpacing: '.1em', color:'var(--ink-faint)', textTransform:'uppercase', marginBottom: 6}}>SUGESTÕES</div>
        <div style={{display:'flex', flexDirection: 'column', gap: 4}}>
          {['Enviar proposta', 'Agendar reunião', 'Marcar como ganho'].map((s, i) => (
            <div key={i} style={{background:'oklch(0.95 0.04 245)', color:'oklch(0.40 0.14 250)', fontSize: 10, fontWeight: 600, padding: '5px 8px', borderRadius: 99, textAlign: 'center'}}>{s}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashMockup() {
  return (
    <div style={{padding: 22, minHeight: 380}}>
      <div style={{display:'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 16}}>
        {[
          { l: 'Receita',       v: 'R$ 1,98M', d: '↑ 12%',  c: 'oklch(0.55 0.16 250)' },
          { l: 'Negócios',      v: '76',        d: '↑ 8',    c: 'oklch(0.45 0.13 145)' },
          { l: 'Ciclo médio',   v: '18d',       d: '↓ 3d',   c: 'oklch(0.62 0.13 80)'  },
          { l: 'Conversão',     v: '32,4%',     d: '↑ 5,8pp', c: 'oklch(0.55 0.16 18)' },
        ].map((s, i) => (
          <div key={i} style={{background:'oklch(0.97 0.012 250)', borderRadius: 10, padding: 10}}>
            <div style={{fontSize: 9.5, fontWeight: 700, color:'var(--ink-muted)', letterSpacing:'.08em', textTransform:'uppercase'}}>{s.l}</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize: 16, fontWeight: 700, marginTop: 4, color: 'var(--ink)'}}>{s.v}</div>
            <div style={{fontSize: 10, fontWeight: 700, color: s.c, marginTop: 2}}>{s.d}</div>
          </div>
        ))}
      </div>

      <div style={{background:'oklch(0.97 0.012 250)', borderRadius: 12, padding: 16, marginBottom: 14}}>
        <div style={{fontSize: 11, fontWeight: 600, marginBottom: 12, color: 'var(--ink)'}}>Receita por semana</div>
        <svg width="100%" height="120" viewBox="0 0 400 120" preserveAspectRatio="none">
          <defs>
            <linearGradient id="lp-area" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.55 0.16 250)" stopOpacity="0.3"/>
              <stop offset="100%" stopColor="oklch(0.55 0.16 250)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M 0 90 L 30 80 L 60 65 L 90 70 L 120 50 L 150 40 L 180 55 L 210 30 L 240 38 L 270 22 L 300 28 L 330 15 L 360 18 L 400 8 L 400 120 L 0 120 Z" fill="url(#lp-area)" />
          <path d="M 0 90 L 30 80 L 60 65 L 90 70 L 120 50 L 150 40 L 180 55 L 210 30 L 240 38 L 270 22 L 300 28 L 330 15 L 360 18 L 400 8" fill="none" stroke="oklch(0.55 0.16 250)" strokeWidth="2" vectorEffect="non-scaling-stroke"/>
        </svg>
      </div>

      <div style={{display:'flex', gap: 8, alignItems:'center'}}>
        {['Ana Beatriz','Bruno Souza','Camila Lima'].map((p, i) => (
          <div key={i} style={{flex: 1, background:'oklch(0.97 0.012 250)', borderRadius: 10, padding: 10, display:'flex', alignItems:'center', gap: 8}}>
            <img src={lpAv(p, 26)} alt="" style={{width: 26, height: 26, borderRadius: '50%'}} />
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 10.5, fontWeight: 600, color:'var(--ink)'}}>{p.split(' ')[0]}</div>
              <div style={{height: 4, background:'white', borderRadius: 99, marginTop: 4}}>
                <div style={{height: '100%', width: `${[88, 72, 64][i]}%`, background: ['var(--acc-mint)','var(--acc-yellow)','var(--acc-pink)'][i], borderRadius: 99}} />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AutoMockup() {
  return (
    <div style={{padding: 24, minHeight: 380}}>
      <div style={{background: 'oklch(0.97 0.012 250)', borderRadius: 14, padding: 16, marginBottom: 12}}>
        <div style={{fontSize: 10, fontWeight: 700, letterSpacing:'.1em', color:'var(--ink-muted)', textTransform:'uppercase', marginBottom: 12}}>NOVA AUTOMAÇÃO</div>
        <div style={{display:'flex', gap: 8, alignItems:'center', marginBottom: 10}}>
          <div style={{width: 28, height: 28, borderRadius: 8, background: 'var(--acc-yellow)', color:'oklch(0.34 0.13 80)', display:'grid', placeItems:'center', fontWeight: 800, fontSize: 11}}>SE</div>
          <div style={{flex: 1, background:'white', borderRadius: 10, padding: '8px 12px', fontSize: 12, color: 'var(--ink)'}}>
            lead chega <strong>via Instagram</strong> e ainda não foi <strong>contactado</strong>
          </div>
        </div>
        <div style={{display:'flex', gap: 8, alignItems:'center'}}>
          <div style={{width: 28, height: 28, borderRadius: 8, background: 'var(--acc-mint)', color:'oklch(0.32 0.12 160)', display:'grid', placeItems:'center', fontWeight: 800, fontSize: 11}}>FAZ</div>
          <div style={{flex: 1, background:'white', borderRadius: 10, padding: '8px 12px', fontSize: 12, color: 'var(--ink)'}}>
            envia mensagem no <strong>WhatsApp</strong> em <strong>2 minutos</strong>
          </div>
        </div>
      </div>

      <div style={{fontSize: 11, fontWeight: 600, color:'var(--ink-muted)', marginBottom: 8, marginTop: 18}}>ÚLTIMAS EXECUÇÕES</div>
      {[
        { who: 'Marcos Andrade',  ago: 'há 3 min',  ok: true  },
        { who: 'Júlia Mendonça',  ago: 'há 14 min', ok: true  },
        { who: 'Diego Saraiva',   ago: 'há 28 min', ok: true  },
        { who: 'Marina Costa',    ago: 'há 1 h',    ok: true  },
        { who: 'Tiago Ribeiro',   ago: 'há 2 h',    ok: false },
      ].map((r, i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap: 10, padding: '8px 4px', borderBottom: i < 4 ? '0.5px solid oklch(0.94 0.012 255)' : 'none'}}>
          <div style={{width: 16, height: 16, borderRadius:'50%', background: r.ok ? 'var(--acc-mint)' : 'oklch(0.92 0.07 18)', color: r.ok ? 'oklch(0.30 0.12 160)' : 'var(--danger)', display:'grid', placeItems:'center'}}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">{r.ok ? <polyline points="20 6 9 17 4 12"/> : <line x1="6" y1="6" x2="18" y2="18"/>}</svg>
          </div>
          <div style={{fontSize: 11.5, fontWeight: 500, flex: 1, color: 'var(--ink)'}}>{r.who}</div>
          <div style={{fontSize: 10, color: 'var(--ink-muted)', fontFamily: 'var(--font-mono)'}}>{r.ago}</div>
        </div>
      ))}
    </div>
  );
}

// ─── TESTIMONIALS ───
function LpTestimonials() {
  return (
    <section className="lp-section testimonials">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />HISTÓRIAS REAIS</span>
          <h2 className="lp-section-title">Quem usa, <em>fala melhor.</em></h2>
        </div>

        <div className="testimonials-grid">
          <div className="test-card test-card-hl">
            <div className="test-quote-mark">"</div>
            <p className="test-text">
              Trocamos um CRM gringo cheio de feature pela Ezza. Em 3 meses, batemos a meta que não batíamos há 5 trimestres.
            </p>
            <div className="test-author">
              <img src={lpAv('Mariana Tavares', 120)} alt="" />
              <div>
                <div className="test-name">Mariana Tavares</div>
                <div className="test-role">Diretora Comercial · Tecnoluz Solar</div>
              </div>
            </div>
            <div className="test-metric">
              <div className="test-metric-n">+42%</div>
              <div className="test-metric-l">em receita</div>
            </div>
          </div>

          <div className="test-card">
            <div className="test-quote-mark">"</div>
            <p className="test-text">
              O WhatsApp dentro do CRM mudou nossa vida. Não tem mais "vou perguntar no privado" sumindo do histórico.
            </p>
            <div className="test-author">
              <img src={lpAv('Rafael Cunha', 120)} alt="" />
              <div>
                <div className="test-name">Rafael Cunha</div>
                <div className="test-role">Head de Vendas · Café do Vale</div>
              </div>
            </div>
            <div className="test-metric">
              <div className="test-metric-n">8h</div>
              <div className="test-metric-l">/semana economizadas</div>
            </div>
          </div>

          <div className="test-card">
            <div className="test-quote-mark">"</div>
            <p className="test-text">
              Migrei 4 mil contatos em uma tarde. Em duas semanas, todo o time já estava produtivo. Inacreditável.
            </p>
            <div className="test-author">
              <img src={lpAv('Patrícia Lemos', 120)} alt="" />
              <div>
                <div className="test-name">Patrícia Lemos</div>
                <div className="test-role">Sócia · Studio Maracá</div>
              </div>
            </div>
            <div className="test-metric">
              <div className="test-metric-n">2sem</div>
              <div className="test-metric-l">pra adoção total</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── COMPARE ───
function LpCompare() {
  const rows = [
    ['Pipeline visual no kanban',     ['yes',     'yes',  'yes',  'partial']],
    ['WhatsApp nativo integrado',     ['yes',     'partial','no',  'partial']],
    ['Automações em linguagem natural', ['yes',   'no',   'no',   'no']],
    ['Suporte 100% em português',     ['yes',     'yes',  'no',   'partial']],
    ['LGPD com dados no Brasil',      ['yes',     'yes',  'no',   'no']],
    ['Implantação em até 2 semanas',  ['yes',     'partial','no',  'no']],
    ['Pagamento em Pix ou boleto',    ['yes',     'yes',  'no',   'no']],
    ['Preço a partir de',             ['R$ 39',   'R$ 67','US$ 24','US$ 18']],
  ];

  const renderCell = (val) => {
    if (val === 'yes') return <span className="compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>;
    if (val === 'no')  return <span className="compare-no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>;
    if (val === 'partial') return <span className="compare-partial">parcial</span>;
    return <span style={{fontFamily:'var(--font-mono)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink)'}}>{val}</span>;
  };

  return (
    <section className="lp-section compare">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />COMPARAÇÃO HONESTA</span>
          <h2 className="lp-section-title">Como a Ezza se compara<br/>com <em>os de sempre.</em></h2>
          <p className="lp-section-sub">Sem marketing, sem asterisco. Você decide.</p>
        </div>

        <table className="compare-table">
          <thead>
            <tr>
              <th></th>
              <th className="compare-col-ezza">
                <div className="compare-brand-ezza"><img src="assets/ezza-logo.png" alt=""/>ezza<em>CRM</em></div>
              </th>
              <th><div className="compare-brand">RD Station</div></th>
              <th><div className="compare-brand">HubSpot</div></th>
              <th><div className="compare-brand">Pipedrive</div></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td>{r[0]}</td>
                <td className="compare-col-ezza">{renderCell(r[1][0])}</td>
                <td>{renderCell(r[1][1])}</td>
                <td>{renderCell(r[1][2])}</td>
                <td>{renderCell(r[1][3])}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

Object.assign(window, { LpShowcase, LpTestimonials, LpCompare });