// ===== How it works (4 steps) =====
function HowItWorks() {
  const steps = [
  { n: "01", t: "Você diz o que vende", d: "Empreendimento, região, ticket. A gente entende seu produto e seu público." },
  { n: "02", t: "A Leadys roda as campanhas", d: "Meta Ads, Google Ads e demais canais — sem precisar do seu acesso." },
  { n: "03", t: "A IA qualifica os leads", d: "Modelos próprios filtram quem realmente quer comprar. Nada de curioso." },
  { n: "04", t: "Você atende no celular", d: "Lead entrou? Notificação na hora. Atenda antes do concorrente." }];

  return (
    <section className="section" id="como-funciona">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>COMO FUNCIONA</div>
          <h2 className="section-h">4 passos. <span className="accent">Privacidade total.</span></h2>
          <p className="section-sub">Você pede, a gente entrega o resultado. Simples assim.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) =>
          <div key={i} className="step">
              <div className="step-n">{s.n}</div>
              <div className="step-t">{s.t}</div>
              <div className="step-d">{s.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Property types =====
function PTIcon({ name }) {
  const s = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "mcmv":
      return <svg {...s}><path d="M3 11l9-7 9 7" /><path d="M5 10v10h14V10" /><path d="M12 20v-5a2 2 0 0 1 4 0v5" /><path d="M9 13.5h.01" /></svg>;
    case "medio":
      return <svg {...s}><path d="M3 21V9l6-4 6 4v12" /><path d="M15 21V11l6 4v6" /><path d="M3 21h18" /><path d="M7 13h2M7 17h2" /></svg>;
    case "alto":
      return <svg {...s}><path d="M5 21V5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v16" /><path d="M14 21V9h4a1 1 0 0 1 1 1v11" /><path d="M3 21h18" /><path d="M8 8h3M8 12h3M8 16h3M16 12h1M16 16h1" /></svg>;
    case "lancamento":
      return <svg {...s}><path d="M4 21V7l11-3v17" /><path d="M15 9l5 2v10" /><path d="M4 21h18" /><path d="M4 7l11 2" /><path d="M8 12h3M8 16h3" /></svg>;
    case "usado":
      return <svg {...s}><path d="M3 11l9-7 9 7" /><path d="M5 10v10h14V10" /><circle cx="14" cy="15" r="1.6" /><path d="M14 16.6V19" /><path d="M13 18h2" /></svg>;
    case "comercial":
      return <svg {...s}><path d="M3 9l1.5-4h15L21 9" /><path d="M4 9v12h16V9" /><path d="M3 9h18" /><path d="M9 21v-6h6v6" /><path d="M7 13h2" /></svg>;
    case "terreno":
      return <svg {...s}><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z" /><path d="M9 4v16M15 6v16" /></svg>;
    case "locacao":
      return <svg {...s}><circle cx="8" cy="12" r="3.5" /><path d="M11.5 12H21" /><path d="M17 12v3" /><path d="M20 12v2.5" /></svg>;
    default:
      return null;
  }
}

function PropertyTypes() {
  const types = [
  { ic: "mcmv", t: "MCMV", d: "Minha Casa Minha Vida" },
  { ic: "medio", t: "Médio padrão", d: "2–3 dorms, classe B" },
  { ic: "alto", t: "Alto padrão", d: "Coberturas e luxo" },
  { ic: "lancamento", t: "Lançamento", d: "Pré-obra e tabela" },
  { ic: "usado", t: "Usado", d: "Pronto pra morar" },
  { ic: "comercial", t: "Comercial", d: "Salas e lojas" },
  { ic: "terreno", t: "Terreno", d: "Urbano e rural" },
  { ic: "locacao", t: "Locação", d: "Aluguel e Short stay" }];

  return (
    <section className="section section-alt" id="imoveis">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>PARA TODO TIPO DE IMÓVEL</div>
          <h2 className="section-h">Do MCMV ao <span className="accent">ALTO PADRÃO.</span></h2>
          <p className="section-sub">Adaptamos a campanha, a criação e o filtro de IA ao seu produto. Você não muda o que vende — a gente muda como acha quem compra.</p>
        </div>
        <div className="ptype-grid">
          {types.map((p, i) =>
          <div key={i} className="ptype">
              <div className="ptype-ic"><PTIcon name={p.ic} /></div>
              <div className="ptype-t">{p.t}</div>
              <div className="ptype-d">{p.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Features grid =====
function Features() {
  const features = [
  { ic: "◎", eyebrow: "META + GOOGLE ADS + LANDING PAGE", t: "Tráfego pago, do jeito certo", d: "Campanhas otimizadas usando o que é mais moderno em inteligência artificial, para o mercado imobiliário, segmentações, ticket e perfil. A gente faz — e você só recebe." },
  { ic: "✦", eyebrow: "INTELIGÊNCIA ARTIFICIAL", t: "Estruturação e Automação", d: "O que há de mais moderno em IA e automação acompanha cada campanha, ajusta lances em tempo real sem nenhum custo adicional a você.", brand: true },
  { ic: "▤", eyebrow: "CRM PERSONALIZADO", t: "Leads na sua mão", d: "Quando você usa Leadys, ganha um CRM personalizado, para o acompanhamento de cada lead recebido, você recebe o lead no celular e ele entra automaticamente no Crm para realização dos follow-ups." },
  { ic: "◉", eyebrow: "TEMPO REAL", t: "Push no celular na hora", d: "Lead entrou na campanha? Você é o primeiro a saber. Notificação imediata para responder antes da concorrência, chega de receber leads via email ou ter que pagar sistemas caros." },
  { ic: "⌧", eyebrow: "PRIVACIDADE TOTAL", t: "Sem acesso a suas contas", d: "Não precisamos do seu Facebook nem do seu Google Ads. Você pede, a gente entrega o resultado direto na palma da sua mão." },
  { ic: "↻", eyebrow: "EM CONSTANTE ATUALIZAÇÃO", t: "Somos um Ecossistema", d: "Usamos as Tecnologias mais modernas do mercado.Temos ferramentas sob medida, criadas por nós que facilita a vida do corretor, feito por quem entende das dificuldade do corretor." }];

  return (
    <section className="section section-alt" id="diferenciais">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>O QUE FAZ A LEADYS SER DIFERENTE</div>
          <h2 className="section-h">Da campanha ao corretor.<br /><span className="accent">SEM VOCÊ SE PREOCUPAR.</span></h2>
        </div>
        <div className="feat-grid">
          {features.map((f, i) =>
          <div key={i} className={"feat-card" + (f.brand ? " brand" : "")}>
              <div className="feat-ic">{f.ic}</div>
              <div className="feat-eyebrow">{f.eyebrow}</div>
              <h3 className="feat-t">{f.t}</h3>
              <p className="feat-d">{f.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Live demo: phone with toasts =====
function LiveDemo() {
  const allLeads = [
  { ini: 'CM', name: 'Carlos M. · (21) 9981…', sub: '2 dorms · Barra da Tijuca' },
  { ini: 'AL', name: 'Ana L. · (21) 9820…', sub: 'Cobertura · Leblon' },
  { ini: 'RT', name: 'Rafael T. · (21) 9947…', sub: '3 dorms · Botafogo' },
  { ini: 'BS', name: 'Beatriz S. · (21) 9886…', sub: 'Studio · Ipanema' }];

  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % allLeads.length), 3000);
    return () => clearInterval(t);
  }, []);
  const visible = [0, 1, 2].map((i) => allLeads[(idx + i) % allLeads.length]);

  return (
    <section className="section">
      <div className="section-inner">
        <div className="demo-stage">
          <div className="demo-phone">
            <div className="demo-phone-notch"></div>
            <div className="demo-phone-screen">
              <div className="demo-phone-time"><strong>Quarta-feira · 14:32</strong></div>
              {visible.map((l, i) =>
              <div key={`${idx}-${i}`} className="demo-toast">
                  <div className="demo-avatar">{l.ini}</div>
                  <div className="demo-toast-body">
                    <div className="demo-toast-tag">NOVO LEAD · LEADYS</div>
                    <div className="demo-toast-name">{l.name}</div>
                    <div className="demo-toast-sub">{l.sub}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="demo-right">
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="eyebrow-dot"></span>EM TEMPO REAL</div>
            <h2>O lead chega <span className="accent">no seu celular</span><br />em tempo<br />real.</h2>
            <p>Cada lead que entra você uma notificação imediata, pela nossa automação. Você abre, atende o lead e fecha o negócio enquanto a concorrência ainda está procurando o nome do novo lead, no email ou Crm.</p>
            <p>No setor imobiliário, a velocidade de atendimento do lead determina a conversão.</p>
            <a href="#form" className="btn btn-primary btn-lg">QUERO RECEBER ASSIM <span>→</span></a>
          </div>
        </div>
      </div>
    </section>);

}

// ===== Privacy / "sem acesso às contas" =====
function Privacy() {
  return (
    <section className="section privacy" id="privacidade">
      <div className="section-inner">
        <div className="privacy-inner">
          <div className="privacy-left">
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="eyebrow-dot"></span>PRIVACIDADE TOTAL</div>
            <h2>Não precisamos do seu <span className="accent">Facebook</span> nem do seu <span className="accent">Google Ads</span>.</h2>
            <p>A maioria das agências pede acesso completo às suas contas de anúncios. A Leadys não. Operamos com nossas próprias estruturas, contas e dados — você pede o resultado, a gente entrega.</p>
            <p>O cliente Leadys tem CRM personalizado, leads organizados na mão, push no celular em tempo real e <strong style={{ color: 'var(--fg-1)' }}>zero exposição</strong> da sua conta.</p>
          </div>
          <div className="privacy-shield">
            <div className="shield-row">
              <div className="shield-ic x">✕</div>
              <div className="shield-text">
                <div className="shield-t">Sem acesso à sua conta Facebook / Meta</div>
                <div className="shield-d">Você nunca compartilha login, senha ou Business Manager.</div>
              </div>
            </div>
            <div className="shield-row">
              <div className="shield-ic x">✕</div>
              <div className="shield-text">
                <div className="shield-t">Sem acesso ao seu Google Ads</div>
                <div className="shield-d">Sem conta MCC vinculada, sem token, sem dependência.</div>
              </div>
            </div>
            <div className="shield-row">
              <div className="shield-ic">✓</div>
              <div className="shield-text">
                <div className="shield-t">CRM personalizado incluso</div>
                <div className="shield-d">Cada lead chega com origem, interesse e estágio organizados.</div>
              </div>
            </div>
            <div className="shield-row">
              <div className="shield-ic">✓</div>
              <div className="shield-text">
                <div className="shield-t">Notificações push em tempo real</div>
                <div className="shield-d">Aviso no celular no segundo em que o lead entra.</div>
              </div>
            </div>
            <div className="shield-row">
              <div className="shield-ic">✓</div>
              <div className="shield-text">
                <div className="shield-t">IA monitorando 24/7</div>
                <div className="shield-d">Performance, ajustes e métricas acompanhados pelo que há de mais moderno.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ===== Testimonials =====
function Testimonials() {
  const items = [
  { ini: 'PM', q: "Cortamos três ferramentas e ainda dobramos os leads no trimestre. O melhor: o lead toca no meu celular antes do concorrente nem ver o anúncio.", name: "Patrícia Moraes", role: "Gerente comercial · Rio de Janeiro" },
  { ini: 'RB', q: "A privacidade foi o que me convenceu. Não dei nenhum acesso e mesmo assim os leads começaram a entrar na primeira semana. Suporte rápido no WhatsApp.", name: "Ricardo Bertolini", role: "Corretor autônomo · Rio de Janeiro" }];

  return (
    <section className="section">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>QUEM USA, FALA</div>
          <h2 className="section-h">Os resultados<br /><span className="accent">FALAM POR NÓS.</span></h2>
        </div>
        <div className="testi-wrap">
          {items.map((t, i) =>
          <div key={i} className="testi">
              <div className="testi-mark">"</div>
              <p className="testi-q">{t.q}</p>
              <div className="testi-by">
                <div className="testi-avatar">{t.ini}</div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== FAQ =====
function FAQ() {
  const items = [
  { q: "Preciso dar acesso ao meu Facebook ou Google Ads?", a: "Não. Operamos com nossas próprias estruturas. Você nunca compartilha login, senha, Business Manager ou MCC. Privacidade total." },
  { q: "Como funciona o CRM personalizado?", a: "Quando Lead chega você recebe a notificação no celular e ele automaticamente entra no Crm, organizado por origem (Meta, Google, etc.), interesse (tipo de imóvel, região, ticket) e estágio. Você acessa o Crm pelo desktop ou celular, e realiza toda a  interação lá, que fica armazenado." },
  { q: "Que tipo de imóvel funciona melhor?", a: "Trabalhamos desde MCMV até Alto padrão, lançamento e imoveis usados. Adaptamos a campanha ao seu produto." },
  { q: "Como vocês qualificam os leads?", a: "Nossa IA cruza dados da campanha, comportamento do contato e contexto. Quem chega no seu CRM já passou pelo filtro de intenção de compra." },
  { q: "Existe fidelidade?", a: "Trabalhamos com ciclos mensais. Se não estiver feliz com o resultado, você pausa quando quiser — sem multa, sem letrinha miúda." }];

  const [open, setOpen] = useState(0);
  return (
    <section className="section section-alt" id="duvidas">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow"><span className="eyebrow-dot"></span>DÚVIDAS FREQUENTES</div>
          <h2 className="section-h">Tudo o que você quer saber.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) =>
          <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon">+</span>
              </div>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ===== Final CTA =====
function FinalCTA() {
  return (
    <section className="cta-final">
      <div className="cta-final-inner">
        <div>
          <h2>QUER CONHECER<br />UM RESULTADO DE VERDADE?</h2>
          <p>Preencha o formulário. Em alguns minutos um especialista da Leadys irá ligar para você.</p>
          <ul>
            <li>Sem acesso à sua conta Facebook ou Google Ads.</li>
            <li>Sem fidelidade, Pausa quando quiser.</li>
            <li>CRM personalizado e push em tempo real inclusos.</li>
            <li>Sem letras miúdas somos direto ao ponto.</li>
          </ul>
        </div>
        <LeadForm variant="final" title="Falar com a Leadys" sub="Preencha em 30 segundos. que entraremos em contato." cta="QUERO TER LEADS" />
      </div>
    </section>);

}

// ===== Footer =====
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-left">
          <div className="footer-mark"><img src="assets/leadys-wordmark-clean.png" alt="Leadys" className="footer-wordmark" /></div>
          <div className="footer-tag">Ecossistema de geração e captação de leads qualificados para o setor imobiliário.</div>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h">Produto</div>
            <a href="#como-funciona">Como funciona</a>
            <a href="#diferenciais">Diferenciais</a>
            <a href="#privacidade">Privacidade</a>
          </div>
          <div>
            <div className="footer-h">Fale com a gente</div>
            <a>contato@leadys.com.br</a>
            <a>WhatsApp · (21) 97967-5968</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Leadys · Todos os direitos reservados</span>
        <span className="mono">CNPJ 43.284.419/0001-25</span>
      </div>
    </footer>);

}