/* ============================================================
   sections.jsx — page sections
   ============================================================ */

const SERVICES_DATA = [
  { key: "trafego", num: "01", title: "Tráfego pago", desc: "Campanhas em Google, Meta e TikTok com foco em vendas, não em curtidas. Cada real investido tem que voltar.", iconKey: "trafego" },
  { key: "site", num: "02", title: "Site & landing pages", desc: "Sites e LPs desenhadas para converter. Carregamento rápido, copy afiada e estrutura testada para o seu nicho.", iconKey: "site" },
  { key: "branding", num: "03", title: "Branding", desc: "Identidade visual, tom de voz e posicionamento. Sua marca consistente e memorável em qualquer canal.", iconKey: "branding" },
  { key: "seo", num: "04", title: "SEO", desc: "Conteúdo técnico e estratégico para você ser encontrado no Google sem depender só de mídia paga.", iconKey: "seo" },
  { key: "gmb", num: "05", title: "Google Business", desc: "Otimização do seu perfil para aparecer no mapa, captar avaliações e dominar buscas locais.", iconKey: "pin" },
  { key: "social", num: "06", title: "Social Media", desc: "Gestão de redes sociais com conteúdo que conecta e engaja.", iconKey: "social" },
];

const PROCESS_DATA = [
  { num: "FASE 01", title: "Diagnóstico", desc: "Auditoria honesta. Vemos o que está sangrando dinheiro e o que pode escalar." },
  { num: "FASE 02", title: "Estratégia", desc: "Plano com metas, canais e prazos. Sem firula, só o que move o ponteiro." },
  { num: "FASE 03", title: "Execução", desc: "Sprint contínua: criativos, campanhas, páginas e testes rodando toda semana." },
  { num: "FASE 04", title: "Otimização", desc: "Reuniões quinzenais, dashboards transparentes, decisão baseada em dado real." },
];

const TESTIMONIALS_DATA = [
  { quote: "Em 4 meses dobramos o faturamento sem aumentar o budget. A Mimicus achou furo onde a gente nem olhava.", nom: "Ana Reis", co: "DTC / Moda", initials: "AR" },
  { quote: "Pararam de me mandar relatório bonito e começaram a mandar resultado. Custo por venda caiu 38%.", nom: "Caio Mendes", co: "E-commerce / Pet", initials: "CM" },
  { quote: "Time sênior de verdade. Resposta rápida, ideias originais e zero achismo nas decisões.", nom: "Júlia Tavares", co: "Educação / SaaS", initials: "JT" },
];

const FAQ_DATA = [
  { q: "Quanto custa trabalhar com a Mimicus?", a: "Não temos pacote padrão de prateleira. O investimento é definido depois do diagnóstico, considerando seu estágio, canais e meta. A primeira conversa é sem compromisso e sem custo." },
  { q: "Em quanto tempo vejo resultado?", a: "Tráfego pago e LPs costumam mostrar movimento já no primeiro mês. SEO e branding são jogo de médio prazo (3 a 6 meses). Somos honestos sobre o que dá pra esperar em cada janela." },
  { q: "Vocês atendem que tipo de empresa?", a: "Marcas que vendem direto para o consumidor (DTC), e-commerce, SaaS e negócios locais que querem virar a chave em performance. Se a sua operação ainda é muito inicial, te indicamos o caminho." },
  { q: "Como funciona o contrato?", a: "Trabalhamos com fee mensal e ciclos de 3 meses. Sem multa abusiva, sem letra miúda. Se a gente não entregar, você não fica preso." },
  { q: "Vocês fazem só uma das frentes (ex: só tráfego)?", a: "Sim. Nem todo mundo precisa de tudo. A gente entra onde faz sentido — e te avisa quando outra frente vai destravar mais resultado." },
  { q: "Quem vai cuidar da minha conta no dia a dia?", a: "Você fala direto com gente sênior. Sem júnior gerenciando milhão em mídia. Cada cliente tem um lead estratégico fixo + o time de execução." },
];

const CLIENT_LOGOS = [
  { name: "Philco",    src: "assets/clients/logo-philco.webp" },
  { name: "Britânia",  src: "assets/clients/logo-britania.webp" },
  { name: "Sicredi",   src: "assets/clients/logo-sicredi.webp" },
  { name: "Cricket",   src: "assets/clients/logo-cricket.webp" },
  { name: "Aliança",   src: "assets/clients/logo-alianca.webp" },
  { name: "Minâncora", src: "assets/clients/logo-minancora.webp" },
  { name: "Bergerson", src: "assets/clients/logo-bergerson.webp" },
  { name: "BigBen",    src: "assets/clients/logo-bigben.webp" },
];

/* ───── HERO ───── */
function Hero({ headline, sub }) {
  return (
    <section className="hero" id="top">
      <HeroPixels />
      <div className="hero-grid">
        <div className="hero-copy">
          <Reveal><span className="eyebrow">ESTRATÉGIA · CRIATIVIDADE · RESULTADOS</span></Reveal>
          <Reveal stagger="1"><h1 dangerouslySetInnerHTML={{ __html: headline }} /></Reveal>
          <Reveal stagger="2"><p className="sub">{sub}</p></Reveal>
          <Reveal stagger="3">
            <div className="cta-row">
              <a href="#contato" className="btn primary">Quero crescer<span className="arrow">↗</span></a>
              <a href="#servicos" className="btn ghost">Ver serviços<span className="arrow">↗</span></a>
            </div>
          </Reveal>
        </div>
        <Reveal className="hero-visual" stagger="2" style={{ height: "560px" }}>
          <img className="hero-octopus" src="assets/mimicus-octopus-v2.png" alt="" aria-hidden="true" />
          <HeroDashboard />
          <HeroPhone />
        </Reveal>
      </div>
    </section>
  );
}

/* ───── LOGOS STRIP ───── */
function LogosStrip() {
  const doubled = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <section className="logos">
      <div className="logos-cap">Marcas que já confiaram em nosso trabalho</div>
      <div className="logos-marquee-wrap">
        <div className="logos-marquee">
          {doubled.map((l, i) => (
            <div key={i} className="logo-item">
              <img src={l.src} alt={l.name} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── SERVICES ───── */
function Services({ layout = "grid" }) {
  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">O QUE FAZEMOS</span>
            <h2 style={{ marginTop: 18 }}>Soluções para marcas que querem crescer.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Estratégia, criatividade e performance para gerar impacto onde realmente importa: nos seus resultados.
          </Reveal>
        </div>
        <div className={`svc-grid layout-${layout}`}>
          {SERVICES_DATA.map((s, i) => (
            <Reveal key={s.key} stagger={Math.min(i + 1, 5)} className="svc">
              <span className="svc-num">{s.num}</span>
              <div className="svc-icon"><PixelIcon map={ICONS[s.iconKey]} size={36} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="svc-arrow" aria-hidden="true">↗</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section" id="processo" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">METODOLOGIA</span>
            <h2 style={{ marginTop: 18 }}>Um processo simples — feito pra escalar.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Sem mistério, sem caixa-preta. Você sabe o que estamos fazendo, por quê, e o que vai mudar.
          </Reveal>
        </div>
        <div className="process-track">
          {PROCESS_DATA.map((p, i) => (
            <Reveal key={i} stagger={Math.min(i + 1, 5)} className="process-step">
              <span className="num">{p.num}</span>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── ABOUT ───── */
function About() {
  return (
    <section className="section" id="sobre">
      <div className="container">
        <div className="about">
          <div>
            <Reveal><span className="eyebrow">SOBRE A MIMICUS</span></Reveal>
            <Reveal stagger="1">
              <h2 style={{ marginTop: 18, maxWidth: "16ch" }}>
                Pequena no tamanho. <Glitch>Cirúrgica</Glitch> no resultado.
              </h2>
            </Reveal>
            <Reveal stagger="2">
              <p className="muted" style={{ marginTop: 22, maxWidth: "58ch", fontSize: 16.5, lineHeight: 1.65 }}>
                A Mimicus nasceu para inverter a lógica das agências tradicionais. Nosso nome
                vem do Polvo Mimicus, um mestre da adaptação estratégica que assume diferentes
                formas para resolver problemas com inteligência e agilidade. Como publicitário,
                fundei a Mimicus para ser uma operação de elite: estratégica, sênior e focada
                no que realmente importa. Aqui você não perde tempo com intermediários; você
                trabalha direto com especialistas que vieram de grandes operações para entregar
                execução de alto nível, sem o excesso de PowerPoint e com foco total nos dados.
                Somos uma estrutura enxuta que prioriza a agilidade no diagnóstico e a precisão
                cirúrgica na escala.
              </p>
            </Reveal>
            <div className="about-stats">
              {[
                { n: "+R$ 2M", l: "Em mídia gerenciada." },
                { n: "27", l: "Clientes ativos." },
                { n: "3,8x", l: "ROAS médio das contas ativas." },
                { n: "92%", l: "Taxa de retenção depois do primeiro ciclo." },
              ].map((s, i) => (
                <Reveal key={i} stagger={Math.min(i + 1, 5)} className="about-stat">
                  <div className="num">{s.n}</div>
                  <div className="lbl">{s.l}</div>
                </Reveal>
              ))}
            </div>
          </div>
          <div>
            <Reveal><span className="eyebrow">QUEM ESTÁ NA SUA CONTA</span></Reveal>
            <Reveal stagger="1">
              <h3 style={{ marginTop: 18, marginBottom: 22 }}>Sem intermediário. Sênior do começo ao fim.</h3>
            </Reveal>
            <Reveal stagger="2" className="founder-card" style={{ gridTemplateColumns: "240px 1fr" }}>
              <div className="founder-photo">
                <img src="assets/rodrigo.png" alt="Rodrigo Neves" />
                <span className="founder-badge">FUNDADOR</span>
              </div>
              <div className="founder-meta">
                <div className="founder-name">Rodrigo Neves</div>
                <div className="founder-role">Publicitário & Head de Performance</div>
                <div className="founder-bio">
                  Mais de uma década resolvendo problema de marca grande. Hoje, no comando da Mimicus, com a mão dentro de cada conta.
                </div>
                <div className="founder-pixel-line" aria-hidden="true">
                  {Array.from({ length: 28 }).map((_, i) => <span key={i} />)}
                </div>
              </div>
            </Reveal>
            <Reveal stagger="3" className="certs-strip">
              <span className="certs-label">Parceiro certificado</span>
              <div className="certs-logos">
                <img src="assets/certs/cert-google.webp" alt="Certificação Google" />
                <img src="assets/certs/cert-meta.webp" alt="Certificação Meta" />
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───── TESTIMONIALS ───── */
function Testimonials() {
  return (
    <section className="section" id="depoimentos" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">QUEM TRABALHA CONOSCO</span>
            <h2 style={{ marginTop: 18 }}>Resultado que <Glitch>fala</Glitch> por si.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Marcas que largaram a roleta de agência genérica e encontraram um time que entrega o combinado.
          </Reveal>
        </div>
        <div className="testimonials">
          {TESTIMONIALS_DATA.map((t, i) => (
            <Reveal key={i} stagger={Math.min(i + 1, 3)} className="test-card">
              <div className="quote-mark">“</div>
              <blockquote>{t.quote}</blockquote>
              <footer>
                <div className="ava">{t.initials}</div>
                <div className="meta">
                  <div className="nom">{t.nom}</div>
                  <div className="co">{t.co}</div>
                </div>
              </footer>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── FAQ ───── */
function FAQ() {
  const [open, setOpen] = useState(null);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">PERGUNTAS FREQUENTES</span>
            <h2 style={{ marginTop: 18 }}>O que você ainda quer saber.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Sem ser cético: se a sua dúvida não está aqui, manda no contato. A gente responde de verdade.
          </Reveal>
        </div>
        <div className="faq">
          {FAQ_DATA.map((f, i) => (
            <Reveal key={i} className={`faq-item${open === i ? " open" : ""}`} stagger={Math.min(i + 1, 5)}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="plus" aria-hidden="true" />
              </button>
              {open === i && <div className="ans">{f.a}</div>}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── CTA FINAL ───── */
function CtaFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="cta-final-bg" />
      <Reveal><span className="tag-pill"><span className="dot" /> VAGAS LIMITADAS · MAIO/2026</span></Reveal>
      <Reveal stagger="1"><h2>Bora colocar sua marca <Glitch>onde importa?</Glitch></h2></Reveal>
      <Reveal stagger="2">
        <p>
          Conta o seu desafio. Em até 48h te respondemos com um diagnóstico inicial — gratuito, sem pegadinha, sem proposta genérica.
        </p>
      </Reveal>
      <Reveal stagger="3">
        <div className="cta-row">
          <a href="mailto:contato@mimicus.com.br" className="btn primary">Falar com especialista<span className="arrow">↗</span></a>
          <a href="#servicos" className="btn ghost">Ver serviços<span className="arrow">↗</span></a>
        </div>
      </Reveal>
    </section>
  );
}

/* ───── FOOTER ───── */
function Footer() {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3500);
  };
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <a href="#top" className="nav-brand">
            <img className="nav-logo-full" src="assets/logotipo.webp" alt="Mimicus — Marketing de Performance" />
          </a>
          <p className="tag">
            Estratégia, criativo e performance pra marcas que querem virar a chave.
          </p>
          <ul className="footer-contacts">
            <li><span className="ic" aria-hidden="true">✆</span> (41) 9 8772-4141</li>
            <li><span className="ic" aria-hidden="true">✉</span> contato@mimicus.com.br</li>
          </ul>
          <div className="footer-social" aria-label="Redes sociais">
            <a href="https://instagram.com/" aria-label="Instagram"><svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="14" height="14" rx="4"/><circle cx="10" cy="10" r="3.4"/><circle cx="14.5" cy="5.5" r=".8" fill="currentColor"/></svg></a>
            <a href="https://wa.me/" aria-label="WhatsApp"><svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor"><path d="M10 2.5a7.5 7.5 0 0 0-6.5 11.3L2.5 18l4.4-1A7.5 7.5 0 1 0 10 2.5zm0 13.6a6.1 6.1 0 0 1-3.1-.85l-.22-.13-2.6.6.7-2.5-.15-.24A6.1 6.1 0 1 1 10 16.1zm3.4-4.5c-.18-.1-1.1-.55-1.27-.6-.17-.07-.3-.1-.42.1-.13.18-.48.6-.6.72-.1.13-.22.14-.4.05-.18-.1-.78-.3-1.5-.94-.55-.5-.93-1.1-1.04-1.28-.1-.18-.01-.27.08-.36.08-.08.18-.22.27-.32.1-.1.13-.18.2-.3.07-.13.03-.24-.01-.34-.04-.1-.42-1.02-.58-1.4-.15-.36-.3-.31-.42-.32h-.36c-.13 0-.34.05-.52.24-.18.18-.68.66-.68 1.6 0 .96.7 1.88.79 2 .1.13 1.4 2.1 3.4 2.95.48.2.86.32 1.15.4.48.16.92.13 1.27.08.39-.06 1.18-.48 1.34-.95.16-.46.16-.86.12-.94-.05-.07-.18-.13-.36-.22z"/></svg></a>
          </div>
        </div>
        <div className="footer-col">
          <h4>Navegação</h4>
          <ul>
            <li><a href="#sobre">A Agência</a></li>
            <li><a href="#processo">Processo</a></li>
            <li><a href="#servicos">Serviços</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contato">Contato</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Serviços</h4>
          <ul>
            <li><a href="#servicos">Tráfego pago</a></li>
            <li><a href="#servicos">Site & landing pages</a></li>
            <li><a href="#servicos">Branding</a></li>
            <li><a href="#servicos">SEO</a></li>
            <li><a href="#servicos">Google Business</a></li>
            <li><a href="#servicos">Social Media</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Conteúdo</h4>
          <ul>
            <li><a href="blog/index.html">Blog</a></li>
            <li><a href="https://instagram.com/">Instagram</a></li>
          </ul>
        </div>
        <form className="footer-form" onSubmit={onSubmit}>
          <div className="ff-eyebrow">FALE CONOSCO</div>
          <div className="ff-title">Envie uma mensagem rápida</div>
          <input type="text" placeholder="Seu nome" required />
          <input type="email" placeholder="Seu e-mail" required />
          <textarea rows="3" placeholder="Como podemos ajudar?" required />
          <button type="submit" className="ff-submit">
            {sent ? "Recebido ✓" : "Enviar →"}
          </button>
        </form>
      </div>
      <div className="footer-bottom">
        <span>© 2026 · Curitiba / BR</span>
        <span>v.1.0 · build pixel</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, LogosStrip, Services, Process, About, Testimonials, FAQ, CtaFinal, Footer });