// Landing sections: Logos · How it works · Features

// ─── LOGOS ───
const LP_LOGOS = [
  { name: 'Tecnoluz Solar',         mark: 'TS', color: 'oklch(0.55 0.16 250)' },
  { name: 'Construtora Paineiras',  mark: 'CP', color: 'oklch(0.50 0.13 18)'  },
  { name: 'Editora Pampa',          mark: 'EP', color: 'oklch(0.55 0.13 160)' },
  { name: 'Café do Vale',           mark: 'CV', color: 'oklch(0.50 0.14 60)'  },
  { name: 'Brasil Logística',       mark: 'BL', color: 'oklch(0.45 0.13 145)' },
  { name: 'Studio Maracá',          mark: 'SM', color: 'oklch(0.45 0.15 295)' },
];

function LpLogos() {
  return (
    <section className="logos">
      <div className="lp-container">
        <div className="logos-lbl">Times comerciais que dormem melhor com a Ezza</div>
        <div className="logos-row">
          {LP_LOGOS.map((l, i) => (
            <a key={i} className="logo-chip" href="#" onClick={(e) => e.preventDefault()}>
              <span className="logo-chip-mark" style={{ background: l.color }}>{l.mark}</span>
              <span>{l.name}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── HOW IT WORKS ───
function LpHow() {
  const steps = [
    {
      n: '01',
      title: 'Importe seus contatos',
      desc: 'CSV, planilha do RD ou do Pipedrive, ou via WhatsApp Business. Em segundos.',
      ic: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>,
    },
    {
      n: '02',
      title: 'Desenhe seu pipeline',
      desc: 'Etapas, ações automáticas, regras de SLA — tudo do jeito que seu time vende hoje.',
      ic: <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>,
    },
    {
      n: '03',
      title: 'Venda, atenda, fecha',
      desc: 'WhatsApp dentro do CRM, propostas com 1 clique, follow-ups que se mandam sozinhos.',
      ic: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
    },
    {
      n: '04',
      title: 'Analise e cresça',
      desc: 'Dashboards que mostram onde o time trava — e o que mudar pra fechar mais semana que vem.',
      ic: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>,
    },
  ];

  return (
    <section id="funciona" className="lp-section how">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />COMO FUNCIONA</span>
          <h2 className="lp-section-title">Do <em>caos</em> ao pipeline em<br/>menos de uma tarde.</h2>
          <p className="lp-section-sub">Não é mais uma ferramenta pra você configurar por 3 semanas — a Ezza já vem pronta pro jeito brasileiro de vender.</p>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="how-step">
              <div className="how-step-n">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="how-step-ic">{s.ic}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FEATURES ───
function LpFeatures() {
  const feats = [
    {
      ic: 'blue',
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>,
      title: 'Pipeline visual',
      desc: 'Arraste deals entre etapas no kanban. Veja o que está parado, o que vai virar — e o que você precisa correr atrás hoje.',
    },
    {
      ic: 'dark',
      hl: true,
      icon: lpICN.whatsapp,
      title: 'WhatsApp nativo, dentro do CRM',
      desc: 'Toda mensagem fica vinculada ao deal. Templates aprovados, respostas rápidas, indicador de leitura — e o histórico cola no contato pra sempre.',
    },
    {
      ic: 'yellow',
      icon: lpICN.bolt,
      title: 'Automações que entendem PT-BR',
      desc: 'Crie regras em linguagem natural: "se o lead não responde em 48h, manda follow-up no WhatsApp". Pronto.',
    },
    {
      ic: 'pink',
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-6"/></svg>,
      title: 'Relatórios sem mistério',
      desc: 'Conversão por etapa, tempo de ciclo, ROI por fonte de lead, performance da equipe — atualizado em tempo real, exportável em 1 clique.',
    },
    {
      ic: 'mint',
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
      title: 'Equipe colaborativa',
      desc: 'Atribua deals, mencione colegas em comentários, divida pipelines por time. Cada um vê só o que precisa ver.',
    },
    {
      ic: 'lav',
      icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
      title: 'LGPD por padrão',
      desc: 'Dados em servidores brasileiros, criptografia ponta-a-ponta, auditoria automática e exportação de dados do titular em 24h.',
    },
  ];

  return (
    <section id="produto" className="lp-section features">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />PRODUTO</span>
          <h2 className="lp-section-title">Seis razões para o seu<br/>time não querer voltar.</h2>
          <p className="lp-section-sub">Cada feature foi construída ouvindo time comercial brasileiro de verdade. Sem firula gringa.</p>
        </div>

        <div className="features-grid">
          {feats.map((f, i) => (
            <div key={i} className={`feat-card ${f.hl ? 'feat-card-hl' : ''}`}>
              <div className={`feat-card-ic feat-card-ic-${f.ic}`}>{f.icon}</div>
              <h3 className="feat-card-title">{f.title}</h3>
              <p className="feat-card-desc">{f.desc}</p>
              <a className="feat-card-link" href="#" onClick={(e) => e.preventDefault()}>
                Saiba mais {lpICN.arrowRight}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LpLogos, LpHow, LpFeatures });