/* ============================================================
   psi-site.jsx — posicionamento da Mimicus para psicólogos
   Reaproveita a identidade visual, componentes e estilos existentes.
   ============================================================ */

const PSI_SERVICES = [
  {
    key: "posicionamento",
    num: "01",
    title: "Posicionamento digital",
    desc: "Clareza sobre público, especialidades, mensagem e diferenciais para que sua presença digital represente o trabalho clínico de forma coerente.",
    iconKey: "branding"
  },
  {
    key: "google",
    num: "02",
    title: "Google Ads",
    desc: "Campanhas para alcançar pessoas que já estão procurando psicoterapia, atendimento psicológico ou ajuda para demandas específicas.",
    iconKey: "trafego"
  },
  {
    key: "site",
    num: "03",
    title: "Sites para psicólogos",
    desc: "Sites rápidos, responsivos e claros, preparados para busca, acessibilidade e uma jornada de contato sem atrito.",
    iconKey: "site"
  },
  {
    key: "conteudo",
    num: "04",
    title: "Conteúdo estratégico",
    desc: "Planejamento editorial para comunicar sua abordagem e seus temas de trabalho sem transformar a clínica em espetáculo ou fórmula pronta.",
    iconKey: "social"
  },
  {
    key: "mensuracao",
    num: "05",
    title: "Mensuração e análise",
    desc: "Configuração de eventos, formulários, WhatsApp e campanhas para entender onde a jornada funciona e onde as oportunidades são perdidas.",
    iconKey: "seo"
  },
  {
    key: "clinicas",
    num: "06",
    title: "Estrutura para clínicas",
    desc: "Estratégias para consultórios e clínicas com vários profissionais, especialidades, unidades ou diferentes formas de atendimento.",
    iconKey: "pin"
  }
];

const PSI_PROCESS = [
  {
    num: "FASE 01",
    title: "Diagnóstico",
    desc: "Analisamos posicionamento, site, conteúdo, canais, especialidades, região, investimento e processo de atendimento."
  },
  {
    num: "FASE 02",
    title: "Estratégia",
    desc: "Definimos prioridades, mensagens, canais, indicadores e o que precisa ser estruturado antes de aumentar a divulgação."
  },
  {
    num: "FASE 03",
    title: "Implementação",
    desc: "Organizamos páginas, rastreamento, campanhas, conteúdo e pontos de contato com uma lógica única de aquisição."
  },
  {
    num: "FASE 04",
    title: "Otimização",
    desc: "Ajustamos a estratégia com base em dados, qualidade dos contatos e aprendizados reais, não em métricas de vaidade."
  }
];

const PSI_PROBLEMS = [
  {
    num: "01",
    title: "Depender somente de indicações",
    desc: "Indicação é valiosa, mas não oferece controle sobre volume, perfil das demandas ou regularidade da procura."
  },
  {
    num: "02",
    title: "Produzir conteúdo sem posicionamento",
    desc: "Publicar mais não resolve uma mensagem genérica. Frequência sem clareza costuma ampliar esforço, não resultado."
  },
  {
    num: "03",
    title: "Anunciar uma estrutura que não converte",
    desc: "Campanhas não corrigem site confuso, resposta lenta, especialidade mal explicada ou uma jornada de contato com atrito."
  }
];

const PSI_PRINCIPLES = [
  {
    num: "01",
    title: "Sem promessas de agenda cheia",
    desc: "Marketing melhora visibilidade, posicionamento e aquisição. Ele não controla a decisão do paciente nem substitui o trabalho clínico."
  },
  {
    num: "02",
    title: "Sem transformar sofrimento em espetáculo",
    desc: "A comunicação precisa informar e criar identificação sem sensacionalismo, exploração emocional ou promessas de cura."
  },
  {
    num: "03",
    title: "Sem fórmula genérica de autoridade",
    desc: "A estratégia parte da sua abordagem, experiência, público e forma de trabalhar — não de um personagem produzido para redes sociais."
  }
];

const PSI_FAQ = [
  {
    q: "Marketing para psicólogos é permitido?",
    a: "Psicólogos podem divulgar seu trabalho, desde que respeitem as normas profissionais e evitem promessas, sensacionalismo, exposição indevida e comunicação enganosa. A estratégia da Mimicus é construída com esses limites em mente, sem substituir orientação jurídica ou do conselho profissional."
  },
  {
    q: "O serviço garante novos pacientes?",
    a: "Não. Nenhuma agência controla a decisão de uma pessoa iniciar terapia. O trabalho melhora posicionamento, visibilidade, experiência do site, geração de contatos e capacidade de analisar a jornada. Garantias de pacientes seriam irresponsáveis."
  },
  {
    q: "Preciso produzir conteúdo todos os dias?",
    a: "Não. Frequência excessiva não corrige posicionamento confuso. A prioridade é criar uma linha editorial sustentável, coerente com sua prática e conectada às dúvidas reais do público."
  },
  {
    q: "Google Ads funciona para psicólogos?",
    a: "Pode funcionar quando há demanda de busca, uma página adequada, segmentação regional coerente, mensuração e um processo de atendimento bem organizado. Antes de anunciar, avaliamos se esses elementos existem."
  },
  {
    q: "A Mimicus cria apenas campanhas?",
    a: "Sim, quando a estrutura existente já é suficiente. Quando site, mensagem ou rastreamento comprometem o resultado, isso é apontado antes do investimento aumentar."
  },
  {
    q: "Vocês atendem clínicas e profissionais de outras áreas?",
    a: "A comunicação principal da Mimicus é direcionada a psicólogos e clínicas de psicologia. Projetos de outros segmentos continuam possíveis quando houver aderência estratégica."
  }
];

function PsiNav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a href="#top" className="nav-brand" aria-label="Mimicus">
          <img className="nav-logo-full" src="assets/logotipo.webp" alt="Mimicus — Marketing de Performance" style={{ height: "100px" }} />
        </a>
        <ul className="nav-links">
          <li><a href="#para-psicologos">Para psicólogos</a></li>
          <li><a href="#servicos">Serviços</a></li>
          <li><a href="#processo">Processo</a></li>
          <li><a href="#sobre">Sobre</a></li>
          <li><a href="#principios">Princípios</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="blog/index.html">Blog</a></li>
        </ul>
        <a href="#contato" className="nav-cta nav-cta-desktop">
          Solicitar análise <span aria-hidden="true">↗</span>
        </a>
        <button
          className={`nav-hamburger${mobileOpen ? " open" : ""}`}
          aria-label="Abrir menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(true)}
        >
          <span /><span /><span />
        </button>
      </nav>

      <div className={`nav-mobile-menu${mobileOpen ? " open" : ""}`} aria-hidden={!mobileOpen}>
        <button className="nav-mobile-close" aria-label="Fechar menu" onClick={close}>✕</button>
        <ul>
          <li><a href="#para-psicologos" onClick={close}>Para psicólogos</a></li>
          <li><a href="#servicos" onClick={close}>Serviços</a></li>
          <li><a href="#processo" onClick={close}>Processo</a></li>
          <li><a href="#sobre" onClick={close}>Sobre</a></li>
          <li><a href="#principios" onClick={close}>Princípios</a></li>
          <li><a href="#faq" onClick={close}>FAQ</a></li>
          <li><a href="blog/index.html" onClick={close}>Blog</a></li>
        </ul>
        <a href="#contato" className="btn primary" onClick={close}>
          Solicitar análise <span>↗</span>
        </a>
      </div>
    </>
  );
}

function PsiHero({ headline, sub }) {
  return (
    <section className="hero" id="top">
      <HeroPixels />
      <div className="hero-grid">
        <div className="hero-copy">
          <Reveal><span className="eyebrow">MARKETING PARA PSICÓLOGOS · ESTRATÉGIA · PERFORMANCE</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">Solicitar análise<span className="arrow">↗</span></a>
              <a href="#processo" className="btn ghost">Como funciona<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" />
          <PsiHeroDashboard />
          <PsiHeroPhone />
        </Reveal>
      </div>
    </section>
  );
}

function PsiHeroDashboard() {
  const points = useMemo(() => [12, 18, 16, 25, 22, 31, 37, 35, 45, 43, 52, 57, 55, 66, 72, 78], []);
  const points2 = useMemo(() => [8, 11, 14, 16, 19, 21, 25, 27, 31, 34, 36, 40, 43, 45, 49, 52], []);
  const w = 360;
  const h = 110;
  const toPath = (vals) => {
    const max = Math.max(...vals);
    const step = w / (vals.length - 1);
    return vals.map((v, i) => `${i === 0 ? "M" : "L"} ${i * step} ${h - v / max * (h - 8)}`).join(" ");
  };

  return (
    <div className="dash">
      <div className="dash-head">
        <div className="title">Jornada digital</div>
        <div className="pill">Estrutura integrada ⌄</div>
      </div>
      <div className="dash-stats">
        <div className="dash-stat">
          <div className="lbl">Busca</div>
          <div className="num">Intenção</div>
          <div className="delta up">Google</div>
        </div>
        <div className="dash-stat">
          <div className="lbl">Site</div>
          <div className="num">Clareza</div>
          <div className="delta up">Mensagem</div>
        </div>
        <div className="dash-stat">
          <div className="lbl">Contato</div>
          <div className="num">Ação</div>
          <div className="delta up">WhatsApp</div>
        </div>
      </div>
      <div className="dash-chart">
        <div className="legend">
          <div className="title">Construção de demanda</div>
          <div className="keys">
            <span><i style={{ background: "var(--text-3)" }} /> Descoberta</span>
            <span><i style={{ background: "var(--primary)" }} /> Intenção</span>
          </div>
        </div>
        <svg className="svg-chart" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
          <defs>
            <linearGradient id="psi-fillg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--primary)" stopOpacity="0.35" />
              <stop offset="100%" stopColor="var(--primary)" stopOpacity="0" />
            </linearGradient>
          </defs>
          {[0, 1, 2, 3].map((i) => (
            <line key={i} x1="0" x2={w} y1={h * (i + 1) / 4} y2={h * (i + 1) / 4} stroke="var(--border)" strokeDasharray="2 4" />
          ))}
          <path d={`${toPath(points)} L ${w} ${h} L 0 ${h} Z`} fill="url(#psi-fillg)" />
          <path d={toPath(points2)} fill="none" stroke="var(--text-3)" strokeWidth="1.5" strokeLinecap="round" />
          <path d={toPath(points)} fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
        </svg>
      </div>
    </div>
  );
}

function PsiHeroPhone() {
  const pct = 0.82;
  const r = 38;
  const c = 2 * Math.PI * r;

  return (
    <div className="phone">
      <div className="phone-screen">
        <div className="ph-top">
          <span className="ph-pill">Estratégia ativa ⌄</span>
          <span className="ph-eyebrow ph-tiny">Presença digital</span>
        </div>
        <div className="ph-donut" aria-hidden="true">
          <svg viewBox="0 0 100 100" width="100%" height="100%">
            <circle cx="50" cy="50" r={r} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth="9" />
            <circle cx="50" cy="50" r={r} fill="none" stroke="var(--primary)" strokeWidth="9" strokeLinecap="round" strokeDasharray={`${c * pct} ${c}`} transform="rotate(-90 50 50)" />
          </svg>
          <div className="ph-donut-text">
            <div className="ph-donut-num">4</div>
            <div className="ph-donut-lbl">pilares</div>
          </div>
        </div>
        <div className="ph-mini-stats">
          <div>
            <div className="ph-tiny">Clareza</div>
            <div className="ph-num">Posicionamento</div>
          </div>
          <div>
            <div className="ph-tiny">Aquisição</div>
            <div className="ph-num">Google + Meta</div>
          </div>
        </div>
        <div className="ph-bars" aria-hidden="true">
          {[30, 42, 36, 58, 50, 72, 62, 86, 76, 90, 82, 96].map((height, i) => (
            <span key={i} style={{ height: `${height}%` }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function PsiLogosStrip() {
  const logos = typeof CLIENT_LOGOS !== "undefined" ? CLIENT_LOGOS : [];
  const logos3 = [...logos, ...logos, ...logos];

  return (
    <section className="logos">
      <div className="logos-cap">Experiência em performance aplicada a uma comunicação especializada em psicologia</div>
      <div className="logos-marquee-wrap">
        <div className="logos-marquee">
          {logos3.map((logo, i) => (
            <div key={i} className="logo-item">
              <img src={logo.src} alt={logo.name} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiProblemSection() {
  return (
    <section className="section" id="para-psicologos" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">PARA PSICÓLOGOS E CLÍNICAS</span>
            <h2 style={{ marginTop: 18 }}>Fazer um bom trabalho clínico não garante que as pessoas encontrem você.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            A Mimicus organiza posicionamento, presença digital e aquisição para que sua comunicação seja clara, profissional e coerente com a prática clínica.
          </Reveal>
        </div>
        <div className="testimonials">
          {PSI_PROBLEMS.map((item, i) => (
            <Reveal key={item.num} stagger={Math.min(i + 1, 3)} className="test-card">
              <div className="quote-mark">{item.num}</div>
              <blockquote>{item.title}</blockquote>
              <footer>
                <div className="meta">
                  <div className="co">{item.desc}</div>
                </div>
              </footer>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiServices({ 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 }}>Uma estrutura digital coerente com a seriedade do seu trabalho.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Nem todo psicólogo precisa de todos os canais. O trabalho começa pelo diagnóstico e entra apenas nas frentes que realmente destravam o projeto.
          </Reveal>
        </div>
        <div className={`svc-grid layout-${layout}`}>
          {PSI_SERVICES.map((service, i) => (
            <Reveal key={service.key} stagger={Math.min(i + 1, 5)} className="svc">
              <span className="svc-num">{service.num}</span>
              <div className="svc-icon"><PixelIcon map={ICONS[service.iconKey]} size={36} /></div>
              <h3>{service.title}</h3>
              <p>{service.desc}</p>
              <span className="svc-arrow" aria-hidden="true">↗</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiProcess() {
  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 }}>Antes de aumentar o investimento, identificamos onde a jornada está falhando.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Marketing não é somente campanha. Posicionamento, página, atendimento e mensuração precisam funcionar como um sistema.
          </Reveal>
        </div>
        <div className="process-track">
          {PSI_PROCESS.map((item, i) => (
            <Reveal key={item.num} stagger={Math.min(i + 1, 5)} className="process-step">
              <span className="num">{item.num}</span>
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiAbout({ content }) {
  const ct = content || {};
  const c = (key, fallback) => ct[key] != null && ct[key] !== "" ? ct[key] : fallback;
  const bio = c(
    "about.bio",
    "A Mimicus combina mais de uma década de experiência em marketing de performance com conhecimento real da prática psicológica. Essa integração permite construir estratégias mais precisas, responsáveis e adequadas à jornada de quem procura atendimento."
  );
  const stats = [
    { n: c("about.stat1_n", "+10 anos"), l: c("about.stat1_l", "de experiência em mídia paga e estratégia digital.") },
    { n: c("about.stat2_n", "2 áreas"), l: c("about.stat2_l", "marketing de performance e psicologia clínica.") },
    { n: c("about.stat3_n", "Google + Meta"), l: c("about.stat3_l", "aquisição conectada a site e mensuração.") },
    { n: c("about.stat4_n", "Brasil"), l: c("about.stat4_l", "atendimento online para psicólogos e clínicas.") }
  ];

  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: "17ch" }}>
                Marketing e psicologia na mesma <Glitch>estratégia.</Glitch>
              </h2>
            </Reveal>
            <Reveal stagger="2">
              <p className="muted" style={{ marginTop: 22, maxWidth: "58ch", fontSize: 16.5, lineHeight: 1.65 }}>
                {bio}
              </p>
            </Reveal>
            <div className="about-stats">
              {stats.map((stat, i) => (
                <Reveal key={i} stagger={Math.min(i + 1, 5)} className="about-stat">
                  <div className="num">{stat.n}</div>
                  <div className="lbl">{stat.l}</div>
                </Reveal>
              ))}
            </div>
          </div>
          <div>
            <Reveal><span className="eyebrow">QUEM CONDUZ O PROJETO</span></Reveal>
            <Reveal stagger="1">
              <h3 style={{ marginTop: 18, marginBottom: 22 }}>Uma visão integrada, sem fórmulas genéricas de agência.</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, psicólogo e estrategista de performance</div>
                <div className="founder-bio">
                  Mais de 10 anos em mídia paga, experiência com marcas de diferentes portes e atuação clínica orientada pelas abordagens comportamentais.
                </div>
                <div className="founder-pixel-line" aria-hidden="true">
                  {Array.from({ length: 28 }).map((_, i) => <span key={i} />)}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function PsiPrinciples() {
  return (
    <section className="section" id="principios" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">COMUNICAÇÃO RESPONSÁVEL</span>
            <h2 style={{ marginTop: 18 }}>Marketing sem distorcer a prática clínica.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            A estratégia busca visibilidade e clareza sem reduzir a psicologia a promessas, gatilhos agressivos ou exposição indevida do sofrimento.
          </Reveal>
        </div>
        <div className="testimonials">
          {PSI_PRINCIPLES.map((item, i) => (
            <Reveal key={item.num} stagger={Math.min(i + 1, 3)} className="test-card">
              <div className="quote-mark">{item.num}</div>
              <blockquote>{item.title}</blockquote>
              <footer>
                <div className="meta">
                  <div className="co">{item.desc}</div>
                </div>
              </footer>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiFAQ({ content }) {
  const [open, setOpen] = useState(null);
  const ct = content || {};
  const c = (key, fallback) => ct[key] != null && ct[key] !== "" ? ct[key] : fallback;
  const items = PSI_FAQ.map((item, i) => ({
    q: c(`faq.${i + 1}_q`, item.q),
    a: c(`faq.${i + 1}_a`, item.a)
  }));

  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 precisa estar claro antes de começar.</h2>
          </Reveal>
          <Reveal stagger="1" className="desc">
            Sem promessa fácil e sem pacote empurrado. O escopo depende do estágio do projeto e do que realmente precisa ser corrigido.
          </Reveal>
        </div>
        <div className="faq">
          {items.map((item, i) => (
            <Reveal key={i} stagger={Math.min(i + 1, 5)}>
              <div className={`faq-item${open === i ? " open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? null : i)} aria-expanded={open === i}>
                  <span>{item.q}</span>
                  <span className="plus" aria-hidden="true" />
                </button>
                <div className={`ans-wrap${open === i ? " open" : ""}`}>
                  <div className="ans">{item.a}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PsiCtaFinal({ content }) {
  const ct = content || {};
  const c = (key, fallback) => ct[key] != null && ct[key] !== "" ? ct[key] : fallback;
  const tag = c("cta.tag", "ANÁLISE INICIAL · SEM PROMESSAS GENÉRICAS");
  const headline = c("cta.headline", "Antes de investir mais,");
  const glitch = c("cta.glitch", "entenda o que está falhando.");
  const desc = c("cta.desc", "Converse com a Mimicus sobre seu posicionamento, site, campanhas e processo de contato. A análise inicial serve para definir prioridades — inclusive quando anunciar ainda não é o próximo passo.");

  return (
    <section className="cta-final" id="contato">
      <div className="cta-final-bg" />
      <Reveal><span className="tag-pill"><span className="dot" /> {tag}</span></Reveal>
      <Reveal stagger="1"><h2>{headline} <Glitch>{glitch}</Glitch></h2></Reveal>
      <Reveal stagger="2"><p>{desc}</p></Reveal>
      <Reveal stagger="3">
        <div className="cta-row">
          <a href="#formulario" className="btn primary">Solicitar análise<span className="arrow">↗</span></a>
          <a href="#servicos" className="btn ghost">Conhecer serviços<span className="arrow">↗</span></a>
        </div>
      </Reveal>
    </section>
  );
}

function PsiFooter({ content }) {
  const [sent, setSent] = useState(false);
  const ct = content || {};
  const c = (key, fallback) => ct[key] != null && ct[key] !== "" ? ct[key] : fallback;
  const phone = c("footer.phone", "(41) 9 8772-4141");
  const email = c("footer.email", "contato@mimicus.com.br");
  const instagram = c("footer.instagram", "https://instagram.com/");
  const whatsapp = c("footer.whatsapp", "5541987724141");

  const onSubmit = (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const nome = form.elements.nome.value.trim();
    const emailValue = form.elements.email.value.trim();
    const mensagem = form.elements.mensagem.value.trim();
    const text = [
      "Olá, vim do site da Mimicus e quero solicitar uma análise inicial.",
      "",
      `Nome: ${nome}`,
      `E-mail: ${emailValue}`,
      `Projeto: ${mensagem}`
    ].join("\n");
    window.open(`https://wa.me/${whatsapp}?text=${encodeURIComponent(text)}`, "_blank", "noopener,noreferrer");
    setSent(true);
    form.reset();
    window.setTimeout(() => setSent(false), 4000);
  };

  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">Marketing, posicionamento, sites e aquisição para psicólogos e clínicas de psicologia.</p>
          <ul className="footer-contacts">
            <li><span className="ic" aria-hidden="true">✆</span> {phone}</li>
            <li><span className="ic" aria-hidden="true">✉</span> {email}</li>
          </ul>
          <div className="footer-social" aria-label="Redes sociais">
            <a href={instagram} aria-label="Instagram" target="_blank" rel="noopener noreferrer">
              <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/${whatsapp}`} aria-label="WhatsApp" target="_blank" rel="noopener noreferrer">
              <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="#para-psicologos">Para psicólogos</a></li>
            <li><a href="#servicos">Serviços</a></li>
            <li><a href="#processo">Processo</a></li>
            <li><a href="#sobre">Sobre</a></li>
            <li><a href="#principios">Princípios</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Serviços</h4>
          <ul>
            <li><a href="#servicos">Posicionamento digital</a></li>
            <li><a href="#servicos">Google Ads</a></li>
            <li><a href="#servicos">Sites para psicólogos</a></li>
            <li><a href="#servicos">Conteúdo estratégico</a></li>
            <li><a href="#servicos">Mensuração</a></li>
            <li><a href="#servicos">Estrutura para clínicas</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={instagram} target="_blank" rel="noopener noreferrer">Instagram</a></li>
          </ul>
        </div>

        <form className="footer-form" id="formulario" onSubmit={onSubmit}>
          <div className="ff-eyebrow">SOLICITAR ANÁLISE</div>
          <div className="ff-title">Conte brevemente sobre seu projeto</div>
          <input type="text" name="nome" placeholder="Seu nome" required />
          <input type="email" name="email" placeholder="Seu e-mail" required />
          <textarea name="mensagem" rows="3" placeholder="Como está sua presença digital hoje?" required />
          <button type="submit" className="ff-submit">{sent ? "Abrindo WhatsApp ✓" : "Continuar no WhatsApp →"}</button>
        </form>
      </div>

      <div className="footer-certs">
        <span className="certs-label">Experiência em plataformas</span>
        <div className="certs-logos">
          <img src="assets/certs/cert-google.png" alt="Google Ads" />
          <img src="assets/certs/cert-meta.png" alt="Meta Ads" />
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 · Curitiba / BR</span>
        <span>Marketing para psicólogos · Mimicus</span>
      </div>
    </footer>
  );
}

function PsiMascot() {
  const [hidden] = useState(false);
  const [speech, setSpeech] = useState("");
  const timer = useRef(null);
  const phrases = [
    "Posicionamento antes de frequência.",
    "Mais anúncio não corrige site confuso.",
    "Marketing sem promessas fáceis.",
    "Vamos analisar seu projeto?"
  ];

  useEffect(() => () => window.clearTimeout(timer.current), []);

  const speak = () => {
    const phrase = phrases[Math.floor(Math.random() * phrases.length)];
    setSpeech(phrase);
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => setSpeech(""), 2800);
  };

  return (
    <>
      <div className={`mascot mascot-left ${hidden ? "hidden" : ""} ${speech ? "show-speech" : ""}`}>
        <div className="speech speech-right">{speech || "·"}</div>
        <div className="mascot-inner" style={{ pointerEvents: "auto", cursor: "pointer" }} onMouseEnter={speak} onClick={speak}>
          <img src="assets/mimicus-octopus-transparent.png" alt="" aria-hidden="true" />
        </div>
      </div>
      <a
        href="https://wa.me/5541987724141?text=Ol%C3%A1%2C%20vim%20do%20site%20da%20Mimicus%20e%20quero%20uma%20an%C3%A1lise%20inicial."
        target="_blank"
        rel="noopener noreferrer"
        className={`wa-fab ${hidden ? "hidden" : ""}`}
      >
        <span className="wa-fab-pulse" aria-hidden="true" />
        <svg viewBox="0 0 32 32" width="26" height="26" fill="currentColor" aria-hidden="true">
          <path d="M16 3a13 13 0 0 0-11.2 19.6L3 29l6.6-1.8A13 13 0 1 0 16 3zm0 23.6a10.6 10.6 0 0 1-5.4-1.5l-.4-.2-3.9.9 1-3.8-.2-.4A10.6 10.6 0 1 1 16 26.6zm5.9-7.9c-.3-.2-1.9-1-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.6.2-.2.3-.4.5-.6.2-.2.2-.3.3-.5.1-.2.1-.4 0-.5-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.2 1.4 3.4c.2.2 2.4 3.7 5.9 5.2.8.3 1.5.5 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.8 2.4-1.7.3-.8.3-1.6.2-1.7-.1-.1-.3-.2-.6-.4z"/>
        </svg>
        <span className="wa-fab-label">Solicitar análise</span>
      </a>
    </>
  );
}

Object.assign(window, {
  PsiNav,
  PsiHero,
  PsiLogosStrip,
  PsiProblemSection,
  PsiServices,
  PsiProcess,
  PsiAbout,
  PsiPrinciples,
  PsiFAQ,
  PsiCtaFinal,
  PsiFooter,
  PsiMascot
});
