/* global React, ZIcons */
const { useState, useRef, useEffect } = React;
const {
  ArrowUR, ArrowR, ArrowL, ArrowDown, ChevDown, InstagramIcon, WhatsappIcon
} = ZIcons;

/* ===========================================================
   HOME - scrollable: hero + o que fazemos + onde atuamos +
   como atuamos + diferenciais + CTA + footer
   =========================================================== */
function HomePage({ go }) {
  return (
    <div className="page page--home" data-screen-label="home">
      <HomeHero go={go} />
      <HomeWhat go={go} />
      <HomeFocus />
      <HomeMission />
      <HomeHow />
      <HomeWhy />
      <HomeOutro go={go} />
    </div>
  );
}

function HomeHero({ go }) {
  return (
    <section className="hero">
      <div className="hero__eyebrow">
        <span className="dot dot--magenta"></span>
        <span>Automações e Sites · Consultoria em IA · Brasil</span>
      </div>

      <h1 className="hero__title">
        <span className="line">Automações que</span>
        <span className="line"><span className="hl-magenta">economizam tempo</span>.</span>
        <span className="line">Processos que</span>
        <span className="line"><span className="hl-blue">geram resultado</span>.</span>
      </h1>

      <p className="hero__sub">
        Soluções digitais sob medida para empresas que querem crescer com
        mais organização, eficiência e escala. Automação de processos,
        IA aplicada e sites de alto desempenho.
      </p>

      <div className="hero__cta">
        <a className="btn btn--primary" href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
          Falar com a Zemploo <ArrowUR />
        </a>
        <button className="btn btn--secondary" onClick={() => go("services")}>
          Ver serviços
        </button>
      </div>

      <div className="hero__meta">
        <div className="hero__meta-item">
          <span className="hero__meta-num">01</span>
          <span className="hero__meta-label">Diagnóstico<br/>da rotina</span>
        </div>
        <div className="hero__meta-divider"></div>
        <div className="hero__meta-item">
          <span className="hero__meta-num">02</span>
          <span className="hero__meta-label">Desenho<br/>do fluxo</span>
        </div>
        <div className="hero__meta-divider"></div>
        <div className="hero__meta-item">
          <span className="hero__meta-num">03</span>
          <span className="hero__meta-label">Implementação<br/>e suporte</span>
        </div>
      </div>

      <div className="hero__scroll-wrap">
        <button className="hero__scroll" onClick={() => {
          const el = document.querySelector(".home-what");
          if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        }} aria-label="Rolar para baixo">
          <span>Continuar</span>
          <ArrowDown />
        </button>
      </div>
    </section>
  );
}

/* O QUE FAZEMOS - numeric cards, no icons */
function HomeWhat({ go }) {
  const items = [
    {
      n: "01", accent: "magenta",
      title: "Automação de processos",
      desc: "Tiramos o trabalho repetitivo da mão do seu time. Conectamos planilhas, e-mail, CRM, WhatsApp e IAs em um fluxo único - atendimento, vendas, financeiro, operação.",
      points: ["n8n, Make, Zapier", "Bots e parsers", "Integrações sob medida"],
    },
    {
      n: "02", accent: "blue",
      title: "Consultoria de IA",
      desc: "Um diagnóstico honesto da sua operação. Mostramos onde a IA gera resultado, onde é hype puro e onde o risco é alto demais. Depois treinamos seu time pra ganhar autonomia, sem ficar refém de fornecedor.",
      points: ["Mapa de aplicações", "Workshops e mentoria", "Compliance e métricas"],
    },
    {
      n: "03", accent: "amber",
      title: "Sites & Landing pages",
      desc: "Páginas rápidas, focadas em conversão. Desenho, copy, performance e SEO técnico. Entrega em menos de uma semana, com acompanhamento direto no WhatsApp.",
      points: ["Design customizado", "SEO + performance", "Entrega rápida"],
    },
  ];

  return (
    <section className="home-what" id="o-que-fazemos">
      <header className="section-head">
        <span className="eyebrow">O que fazemos</span>
        <h2>Três frentes que <span className="hl-magenta">reduzem a demanda manual</span> e <span className="hl-blue">trazem clareza</span> pra operação.</h2>
      </header>

      <div className="what-grid">
        {items.map((it, i) => (
          <article key={i} className={"what-card what-card--" + it.accent}>
            <div className="what-card__top">
              <span className={"what-card__num what-card__num--" + it.accent}>{it.n}</span>
              <span className={"what-card__rule what-card__rule--" + it.accent}></span>
            </div>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
            <ul>
              {it.points.map((p, j) => (
                <li key={j}>
                  <span className={"what-card__dot what-card__dot--" + it.accent}></span>{p}
                </li>
              ))}
            </ul>
            <button className="what-card__more" onClick={() => go("services")}>
              Ver mais <ArrowR />
            </button>
          </article>
        ))}
      </div>
    </section>
  );
}

/* PARA QUEM - single editorial statement, no grid */
function HomeFocus() {
  return (
    <section className="home-focus">
      <span className="eyebrow">Para quem</span>
      <p className="home-focus__statement">
        <span className="home-focus__lead">A Zemploo ajuda PMEs a trocar</span>{" "}
        <span className="hl-magenta">processos manuais</span> por{" "}
        <span className="hl-blue">operações mais ágeis</span>, inteligentes e escaláveis.
      </p>
      <p className="home-focus__sub">
        Sem nicho fechado, sem localidade fixa: atendemos remoto, com contato direto.
        Se sua rotina tem repetição, planilha, e-mail copiado mil vezes, lá cabe a gente.
      </p>
    </section>
  );
}

/* MISSÃO & VISÃO */
function HomeMission() {
  return (
    <section className="home-mission">
      <header className="section-head">
        <span className="eyebrow">Missão &amp; visão</span>
        <h2>Por que <span className="hl-magenta">a Zemploo existe</span> - e <span className="hl-blue">onde queremos chegar</span>.</h2>
      </header>

      <div className="mission-grid">
        <article className="mission-card mission-card--mission">
          <span className="mission-card__tag">Missão</span>
          <p>
            Capacitar empresas e pessoas a usarem IA e automações
            para <strong>eliminar tarefas repetitivas e manuais</strong>,
            fazendo pessoas gerarem mais valor e liberando sua criatividade.
          </p>
        </article>
        <article className="mission-card mission-card--vision">
          <span className="mission-card__tag">Visão</span>
          <p>
            Ser <strong>referência em capacitar PMEs</strong> no uso prático de IA
            e automação - mostrando como essas ferramentas podem auxiliar
            o dia a dia, os processos, as equipes e os resultados.
          </p>
        </article>
      </div>
    </section>
  );
}

/* COMO ATUAMOS - 5 steps, big numerals, no icons */
function HomeHow() {
  const steps = [
    { n: "01", title: "Análise de perfil",  desc: "Você solicita uma call ou nos chama por mensagem. A gente conversa pra entender o que você precisa antes de qualquer proposta." },
    { n: "02", title: "Mapeamento de processos manuais", desc: "Se for site, alinhamos o desejo e seguimos. Se for consultoria ou automação, sentamos juntos e mapeamos as dores reais da operação." },
    { n: "03", title: "Desenho do fluxo",    desc: "Modelamos o processo ponta a ponta: ferramentas, integrações, pontos de IA, checkpoints humanos. Você aprova antes da gente construir." },
    { n: "04", title: "Implementação",        desc: "Construímos em etapas curtas, com entrega parcial e validação contínua. Documentamos tudo pra você não ficar refém de ninguém." },
    { n: "05", title: "Suporte &amp; evolução", desc: "30 dias de suporte incluídos. Depois, plano opcional de manutenção com SLA claro, monitoramento e melhorias conforme sua operação cresce." },
  ];

  return (
    <section className="home-how">
      <header className="section-head">
        <span className="eyebrow">Como atuamos</span>
        <h2>Um método em <span className="hl-amber">cinco etapas</span>. Sem enrolação, sem promessa irreal.</h2>
      </header>

      <div className="how-grid">
        {steps.map((s, i) => (
          <article key={i} className="how-step">
            <span className="how-step__num">{s.n}</span>
            <h4 dangerouslySetInnerHTML={{ __html: s.title }}></h4>
            <p dangerouslySetInnerHTML={{ __html: s.desc }}></p>
          </article>
        ))}
      </div>
    </section>
  );
}

/* DIFERENCIAIS / POR QUE A ZEMPLOO */
function HomeWhy() {
  const cards = [
    { color: "magenta", kicker: "01", title: "Atendimento 1×1",  desc: "Você fala direto com nosso pessoal. Sem time de contas, sem chatbot, sem robotização na conversa." },
    { color: "blue",    kicker: "02", title: "Escopo fechado",    desc: "Cada projeto é orçado por escopo, não por hora. Sem surpresa no fim." },
    { color: "amber",   kicker: "03", title: "Entregas personalizadas", desc: "Sites em até 5 dias. Automações e consultorias no seu ritmo, do seu jeito." },
  ];
  return (
    <section className="home-why">
      <header className="section-head">
        <span className="eyebrow">Por que Zemploo</span>
        <h2>O que muda quando a empresa é <span className="hl-blue">focada no cliente</span>.</h2>
      </header>

      <div className="why-grid">
        {cards.map((c, i) => (
          <article key={i} className={"why-card why-card--" + c.color}>
            <span className={"why-card__kicker why-card__kicker--" + c.color}>{c.kicker}</span>
            <h4>{c.title}</h4>
            <p>{c.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

/* OUTRO CTA */
function HomeOutro({ go }) {
  return (
    <section className="home-outro">
      <div className="home-outro__halo" aria-hidden="true"></div>
      <span className="eyebrow">Próximo passo</span>
      <h2>
        Automatizar não é apenas usar tecnologia.<br/>
        É transformar <span className="hl-magenta">tempo perdido</span> em <span className="hl-blue">resultado</span>.
      </h2>
      <p>
        Conta pra gente o que sua empresa faz hoje. Em 30 minutos a gente devolve
        um diagnóstico inicial e indica onde cabe automação, IA ou redesenho de processo.
      </p>
      <div className="home-outro__cta">
        <a className="btn btn--primary" href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
          Falar com a Zemploo <ArrowUR />
        </a>
      </div>
    </section>
  );
}

/* ===========================================================
   SERVICES - three sections, each with an auto-rotating carousel
   =========================================================== */
const SERVICES = [
  {
    id: "sites",
    eyebrow: "01 · Sites & Landing pages",
    title: "Páginas que carregam rápido e convertem.",
    paragraphs: [
      "Sites institucionais, landing pages e mostruários são o cartão de visita digital da empresa: é onde o cliente decide se confia em você antes mesmo de falar com alguém. Fazemos site institucional, landing page de objetivo único (captar lead, vender curso, divulgar lançamento) e mostruário/catálogo para profissionais com vários serviços (dentista, veterinário), foco específico (contador de imposto de renda) ou venda de produtos (carimbos, bebidas, roupas).",
    ],
    accent: "amber",
    bullets: ["Design customizado", "Otimização para SEO técnico", "Mostruário e catálogo de produtos", "Entrega rápida em poucos dias"],
    projects: [
      { tag: "E-commerce",         name: "Luxè",               line: "Loja de moda autoral",                img: "assets/sites/sites-01-luxe.png" },
      { tag: "E-commerce",         name: "Nexora Tech",        line: "Marketplace de eletrônicos",          img: "assets/sites/sites-02-nexora.png" },
      { tag: "E-commerce",         name: "Nordic Casa",        line: "Móveis e decoração escandinava",      img: "assets/sites/sites-03-nordic.png" },
      { tag: "Landing page",       name: "Fuel Coaching",      line: "Captação para coach fitness",         img: "assets/sites/sites-04-fuel.png" },
      { tag: "Landing page",       name: "FlowAI",             line: "SaaS de automação com IA",            img: "assets/sites/sites-05-flowai.png" },
      { tag: "Landing page",       name: "Carreira+",          line: "Curso online de habilidades digitais", img: "assets/sites/sites-06-curso.png" },
      { tag: "Site institucional", name: "Vitàlis",            line: "Clínica médica multiespecialidade",   img: "assets/sites/sites-07-vitalis.png" },
      { tag: "Site institucional", name: "Martins & Advogados", line: "Advocacia empresarial",              img: "assets/sites/sites-08-martins.png" },
      { tag: "Site institucional", name: "Âmbar",              line: "Estúdio de arquitetura autoral",      img: "assets/sites/sites-09-ambar.png" },
      { tag: "Landing page",       name: "Maison Residences",  line: "Lançamento imobiliário de luxo",      img: "assets/sites/sites-10-maison.png" },
    ],
  },
  {
    id: "consultoria",
    eyebrow: "02 · Consultoria de IA",
    title: "Onde usar IA, e onde ainda não usar.",
    paragraphs: [
      "Antes de comprar uma ferramenta de IA, a pergunta certa é simples: ela resolve um problema real da minha empresa? A gente faz um diagnóstico honesto da operação, mostra onde a IA gera resultado, onde é hype e onde o risco é alto. Depois treinamos seu time pra usar IA com autonomia, sem ficar refém de fornecedor.",
    ],
    accent: "blue",
    bullets: ["Mapa de aplicações por área", "Análise de riscos e compliance", "Treinamentos para o time", "Definição de métricas de adoção"],
    projects: [
      { tag: "Palestra",     name: "Expo Tech BR",         line: "Keynote sobre IA aplicada a negócios",        img: "assets/sites/cons-01-expo.png" },
      { tag: "Palestra",     name: "Mulheres em Dados",    line: "Talk sobre IA que transforma indústrias",     img: "assets/sites/cons-02-mulheres-dados.png" },
      { tag: "Mentoria",     name: "Equipe Mira",          line: "IA aplicada em Operações e Finanças",         img: "assets/sites/cons-03-mentoria-time.png" },
      { tag: "Painel",       name: "Future Lab",           line: "Debate sobre IA, inovação e dados",           img: "assets/sites/cons-04-painel.png" },
      { tag: "Palestra",     name: "Expert Summit 2025",   line: "IA conectando pessoas, dados e decisão",      img: "assets/sites/cons-05-summit.png" },
      { tag: "Workshop",     name: "Mapa de Automações",   line: "Time identifica gargalos e oportunidades",    img: "assets/sites/cons-06-mapa.png" },
      { tag: "Diagnóstico",  name: "Fluxos Atuais",        line: "Mapeamento do processo antes de automatizar", img: "assets/sites/cons-07-diagnostico.png" },
      { tag: "Workshop",     name: "Transformação Digital", line: "Roadmap de adoção de IA na empresa",         img: "assets/sites/cons-08-transformacao.png" },
    ],
  },
  {
    id: "automacoes",
    eyebrow: "03 · Automações",
    title: "Substitua o trabalho repetitivo por fluxos inteligentes.",
    paragraphs: [
      "Automatizar é tirar da mão das pessoas tudo o que pode ser feito por um sistema: cadastros copiados de planilha pra planilha, e-mails padrão respondidos manualmente, atendimento básico no WhatsApp, controle de estoque atualizado à mão. A Zemploo conecta as ferramentas que você já usa (planilha, Sheets, Gmail, WhatsApp, sistema de gestão) em fluxos únicos, e sua equipe passa a investir tempo no que importa: decisão, cliente e melhoria da operação.",
    ],
    accent: "magenta",
    bullets: ["Atendimento com automação", "Bots de WhatsApp e e-mail com IA", "Expansão da parte manual e contínua", "Suporte e manutenção contínua"],
    projects: [
      { tag: "Atendimento", name: "Conversão Multicanal", line: "Dashboard de atendimento + bot WhatsApp",      img: "assets/sites/auto-01-conversao.png" },
      { tag: "Operação",    name: "Obras & Engenharia",   line: "Painel de acompanhamento de obras em tempo real", img: "assets/sites/auto-02-obras.png" },
      { tag: "Comercial",   name: "Grano & Pão",          line: "Padaria com pedidos centralizados em painel",     img: "assets/sites/auto-03-grano-pao.png" },
      { tag: "RH",          name: "Gestão Remota",        line: "People analytics + reuniões 1×1 automatizadas",  img: "assets/sites/auto-04-remoto.png" },
      { tag: "Atendimento", name: "Clínica Harmonia",     line: "Confirmação WhatsApp + dashboard de agenda",     img: "assets/sites/auto-05-clinica.png" },
      { tag: "Operação",    name: "Centro de Comando",    line: "Triagem automática de alertas e incidentes",     img: "assets/sites/auto-06-alertas.png" },
    ],
  },
];

function ServicesPage() {
  return (
    <div className="page page--services" data-screen-label="services">
      <header className="page__header">
        <span className="eyebrow">Serviços</span>
        <h2>Três frentes. Um objetivo: <span className="hl-magenta">tempo de volta</span> e <span className="hl-blue">resultado mensurável</span>.</h2>
      </header>

      <div className="services-stack">
        {SERVICES.map((s) => <ServiceSection key={s.id} svc={s} />)}
      </div>
    </div>
  );
}

function ServiceSection({ svc }) {
  return (
    <section className={"svc svc--" + svc.accent} id={svc.id}>
      <div className="svc__head">
        <div className="svc__head-text">
          <span className="eyebrow">{svc.eyebrow}</span>
          <h3>{svc.title}</h3>
          {svc.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
        </div>
        <ul className="svc__bullets">
          {svc.bullets.map((b, i) => (
            <li key={i}>
              <span className={"svc__bullet-dot svc__bullet-dot--" + svc.accent}></span>{b}
            </li>
          ))}
        </ul>
      </div>

      <ProjectCarousel projects={svc.projects} accent={svc.accent} />
    </section>
  );
}

/* AUTO-ROTATING CAROUSEL
   - duplicates projects so scroll loops seamlessly
   - rAF auto-scrolls at constant pixels-per-second
   - pauses on hover or when arrow controls are used
*/
function ProjectCarousel({ projects, accent }) {
  const ref = useRef(null);
  const pausedRef = useRef(false);
  const items = [...projects, ...projects];

  // Distinct gradient placeholders, recolored from brand palette
  const grads = [
    "linear-gradient(135deg, rgba(233,30,120,0.85), rgba(45,125,255,0.85))",
    "linear-gradient(135deg, rgba(45,125,255,0.85), rgba(242,193,78,0.75))",
    "linear-gradient(135deg, rgba(242,193,78,0.75), rgba(233,30,120,0.85))",
    "linear-gradient(135deg, rgba(20,22,27,0.6), rgba(45,125,255,0.85))",
    "linear-gradient(135deg, rgba(233,30,120,0.85), rgba(20,22,27,0.6))",
  ];

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf;
    let last = performance.now();
    let pos = el.scrollLeft;        // sub-pixel accumulator - scrollLeft floors to int on write
    const speed = 60;                // pixels per second
    const tick = (now) => {
      const dt = (now - last) / 1000;
      last = now;
      if (!pausedRef.current && el.scrollWidth > el.clientWidth + 1) {
        pos += speed * dt;
        const half = el.scrollWidth / 2;
        if (pos >= half) pos -= half;
        el.scrollLeft = pos;
        // If user dragged the track, snap our accumulator to the new position so we don't fight them.
        if (Math.abs(el.scrollLeft - pos) > 2) pos = el.scrollLeft;
      } else {
        pos = el.scrollLeft;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [projects.length]);

  const scrollByCard = (dir) => {
    const el = ref.current;
    if (!el) return;
    const w = el.querySelector(".proj")?.offsetWidth || 360;
    el.scrollBy({ left: dir * (w + 16), behavior: "smooth" });
  };

  return (
    <div className="carousel">
      <div className="carousel__track" ref={ref}>
        {items.map((p, i) => (
          <article
            className={"proj proj--" + accent}
            key={i}
            onMouseEnter={() => { pausedRef.current = true; }}
            onMouseLeave={() => { pausedRef.current = false; }}
          >
            <div
              className={"proj__cover" + (p.img ? " proj__cover--img" : "")}
              style={p.img
                ? { backgroundImage: `url(${p.img})` }
                : { background: grads[i % grads.length] }}
            >
              {!p.img && <div className="proj__cover-grid"></div>}
              {!p.img && (
                <span className="proj__cover-mark">{p.name.split(" ").map(w => w[0]).slice(0, 2).join("")}</span>
              )}
            </div>
            <div className="proj__body">
              <span className={"proj__tag proj__tag--" + accent}>{p.tag}</span>
              <h4>{p.name}</h4>
              <p>{p.line}</p>
            </div>
          </article>
        ))}
      </div>

      <div className="carousel__controls">
        <button onClick={() => scrollByCard(-1)} aria-label="Anterior"><ArrowL /></button>
        <button onClick={() => scrollByCard(1)} aria-label="Próximo"><ArrowR /></button>
      </div>
    </div>
  );
}

/* ===========================================================
   CARTA DE APRESENTAÇÃO
   =========================================================== */
function CartaPage() {
  return (
    <div className="page page--carta" data-screen-label="carta">
      <header className="page__header">
        <span className="eyebrow">Carta de apresentação</span>
        <h2>Um documento. Tudo sobre a <span className="hl-magenta">Zemploo</span>.</h2>
        <p className="page__lead">
          Um PDF de 10 páginas com nosso método, escopo, diferenciais, etapas
          de trabalho e contato - pensado para você enviar internamente quando
          precisar justificar um projeto.
        </p>
      </header>

      <div className="carta-grid">
        <article className="carta-preview">
          <div className="carta-preview__frame">
            <div className="carta-preview__page">
              <span className="carta-preview__brand">Zemploo</span>
              <span className="carta-preview__num">01 / 10</span>
              <div className="carta-preview__head">
                <span className="eyebrow">Carta de apresentação</span>
                <h3>Automações que <span className="hl-magenta">economizam tempo</span>.<br/>Processos que <span className="hl-blue">geram resultado</span>.</h3>
                <p>Soluções digitais sob medida para empresas que querem crescer com mais organização, eficiência e escala.</p>
              </div>
              <div className="carta-preview__halo"></div>
            </div>
          </div>
          <div className="carta-preview__caption">Pré-visualização da capa</div>
        </article>

        <div className="carta-summary">
          <ol className="carta-toc">
            <li><span>01</span> Capa</li>
            <li><span>02</span> Quem somos</li>
            <li><span>03</span> Problemas que resolvemos</li>
            <li><span>04</span> Serviços</li>
            <li><span>05</span> Benefícios</li>
            <li><span>06</span> Como trabalhamos</li>
            <li><span>07</span> Diferenciais</li>
            <li><span>08</span> Projetos</li>
            <li><span>09</span> Investimento</li>
            <li><span>10</span> Contato</li>
          </ol>

          <div className="carta-actions">
            <a className="btn btn--primary" href="uploads/carta de apresentação.pdf" target="_blank" rel="noreferrer">
              Baixar a carta (PDF) <ArrowUR />
            </a>
            <a className="btn btn--secondary" href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
              Quero conversar
            </a>
          </div>

          <div className="carta-stats">
            <div><strong>10</strong><span>páginas</span></div>
            <div><strong>3</strong><span>frentes de serviço</span></div>
            <div><strong>1×1</strong><span>atendimento direto</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===========================================================
   FAQ
   =========================================================== */
const FAQ_ITEMS = [
  {
    q: "Em quanto tempo a Zemploo entrega um projeto?",
    a: "Depende do escopo. Sites são entregues em até 5 dias úteis. Automações pontuais costumam ficar prontas em 1 a 3 semanas. Consultorias de IA variam conforme a profundidade do diagnóstico, sempre com entregas parciais por etapa para você acompanhar."
  },
  {
    q: "Vocês atendem empresas de qualquer porte?",
    a: "Sim, atendemos. Trabalhamos principalmente com empresas de pequeno e médio porte (PMEs), além de profissionais liberais com operação digital. Para times muito grandes, fazemos um mapeamento prévio antes de seguir."
  },
  {
    q: "Preciso ter sistemas prontos para automatizar?",
    a: "Não. A primeira etapa é o diagnóstico: entendemos sua rotina hoje, mesmo que ela rode só em planilhas. A partir disso, desenhamos o fluxo ideal."
  },
  {
    q: "Como funciona o suporte após a entrega?",
    a: "Todo projeto inclui 30 dias de suporte após a entrega. Depois, oferecemos um plano de manutenção mensal opcional, em dois formatos: (1) sob demanda — você nos chama quando precisar ajustar ou expandir algo; (2) acompanhamento contínuo — a gente segue evoluindo o projeto, atualizando ferramentas e melhorando o que já existe."
  },
  {
    q: "Qual é o investimento médio?",
    a: "Cada projeto é orçado por escopo, não por hora. Após o diagnóstico, enviamos uma proposta fechada, sem surpresa. Para ter uma referência, chama a gente no WhatsApp."
  },
  {
    q: "Vocês usam quais ferramentas de IA?",
    a: "Trabalhamos de forma agnóstica: escolhemos a ferramenta pelo caso de uso. Usamos modelos da OpenAI, Anthropic, Google e modelos open-source quando a privacidade é prioridade."
  },
];

function FaqPage() {
  const [open, setOpen] = useState(0);
  return (
    <div className="page page--faq" data-screen-label="faq">
      <header className="page__header">
        <span className="eyebrow">FAQ · Perguntas frequentes</span>
        <h2>Dúvidas comuns. Respostas <span className="hl-blue">diretas</span>.</h2>
        <p className="page__lead">
          Se não encontrar a sua aqui, chame a gente no WhatsApp.
          Respondemos em horário comercial, com pessoa de verdade do outro lado.
        </p>
      </header>

      <div className="faq-list">
        {FAQ_ITEMS.map((it, i) => (
          <details key={i} open={open === i} onClick={(e) => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
            <summary>
              <span className="faq-list__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="faq-list__q">{it.q}</span>
              <span className={"faq-list__chev" + (open === i ? " is-open" : "")}><ChevDown /></span>
            </summary>
            <div className="faq-list__a">{it.a}</div>
          </details>
        ))}
      </div>

      <div className="faq-cta">
        <div>
          <span className="eyebrow">Sua dúvida não está aqui?</span>
          <h3>Fala com a gente.</h3>
        </div>
        <div className="faq-cta__buttons">
          <a className="btn btn--primary" href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
            WhatsApp <ArrowUR />
          </a>
          <a className="btn btn--secondary" href="https://instagram.com/zemploo" target="_blank" rel="noreferrer">
            Instagram
          </a>
        </div>
      </div>
    </div>
  );
}

/* ===========================================================
   FOOTER - shown across all pages, at the bottom
   =========================================================== */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <span className="footer__brand-mark">
            <img src="assets/logo-zemploo.png" alt="" />
          </span>
          <span className="footer__brand-word">Zemploo</span>
        </div>
      </div>

      <div className="footer__cols">
        <div className="footer__col">
          <span className="eyebrow">Contato</span>
          <a href="https://wa.me/5514997021668" target="_blank" rel="noreferrer">
            <WhatsappIcon /> +55 (14) 99702-1668
          </a>
          <a href="mailto:contato@zemploo.com.br">contato@zemploo.com.br</a>
        </div>
        <div className="footer__col">
          <span className="eyebrow">Social</span>
          <a href="https://instagram.com/zemploo" target="_blank" rel="noreferrer">
            <InstagramIcon /> @zemploo
          </a>
        </div>
        <div className="footer__col">
          <span className="eyebrow">Atendimento</span>
          <p>Segunda a sexta<br/>09h às 18h (BRT)</p>
          <p className="footer__col-sub">Remoto, atendimento direto.</p>
        </div>
      </div>

      <div className="footer__bottom">
        <span>© {new Date().getFullYear()} Zemploo - Empresa de automação.</span>
        <span className="footer__bottom-meta">Brasil</span>
      </div>
    </footer>
  );
}

/* ===========================================================
   FORMULÁRIO (página oculta - não vai no menu)
   Acesso só por link direto: /#formulario
   Cliente preenche depois de fechar com o comercial.
   =========================================================== */
function MultiPhone({ label, placeholder, values, onChange }) {
  const updateAt = (i, v) => {
    const next = values.slice();
    next[i] = v;
    onChange(next);
  };
  const add = () => onChange([...values, ""]);
  const remove = (i) => onChange(values.filter((_, j) => j !== i));

  return (
    <div className="field">
      <span className="field__label">{label}</span>
      <div className="field__multi">
        {values.map((v, i) => (
          <div className="field__multi-row" key={i}>
            <input
              className="field__input"
              type="tel"
              inputMode="tel"
              placeholder={placeholder}
              value={v}
              onChange={(e) => updateAt(i, e.target.value)}
            />
            {values.length > 1 && (
              <button
                type="button"
                className="field__multi-btn field__multi-btn--remove"
                onClick={() => remove(i)}
                aria-label="Remover este número"
                title="Remover"
              >
                ×
              </button>
            )}
          </div>
        ))}
        <button
          type="button"
          className="field__multi-add"
          onClick={add}
        >
          + Adicionar outro número
        </button>
      </div>
    </div>
  );
}

function FormularioPage({ tier }) {
  // tier: null | 'single' | 'basic' | 'expert' | 'custom'
  // Vem do hash #formulario-{tier}. Quando presente, exibe badge + campos extras.
  const TIER_INFO = {
    single: { label: "Single",  preco: "R$ 800",              prazo: "5 dias úteis" },
    basic:  { label: "Basic",   preco: "R$ 1.100 – 1.400",    prazo: "5 dias úteis" },
    expert: { label: "Expert",  preco: "R$ 1.500 – 2.000",    prazo: "6 dias úteis" },
    custom: { label: "Custom",  preco: "R$ 2.000+",           prazo: "7+ dias úteis" },
  };
  const tierInfo = tier ? TIER_INFO[tier] : null;

  const [submitted, setSubmitted] = useState(false);
  const [pessoaisTel, setPessoaisTel] = useState([""]);
  const [empresaTel, setEmpresaTel] = useState([""]);
  const [semEndereco, setSemEndereco] = useState(false);
  const [abasSelecionadas, setAbasSelecionadas] = useState([]);
  const [abasOutroDesc, setAbasOutroDesc] = useState("");
  const [briefing, setBriefing] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    // submit real conecta no webhook depois - por enquanto só feedback visual
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  if (submitted) {
    return (
      <div className="page page--form" data-screen-label="formulario">
        <header className="page__header">
          <span className="eyebrow">Recebido</span>
          <h2>Obrigado! Já chegou pra gente.</h2>
          <p className="page__lead">
            Em até 1 dia útil você recebe o primeiro retorno no WhatsApp.
            Se precisar adicionar algo agora, fala com o comercial direto.
          </p>
        </header>
      </div>
    );
  }

  return (
    <div className="page page--form" data-screen-label="formulario">
      <header className="page__header">
        <span className="eyebrow">
          Formulário · acesso privado
          {tierInfo && (
            <> · <span className="hl-magenta">Pacote {tierInfo.label}</span> · {tierInfo.preco} · {tierInfo.prazo}</>
          )}
        </span>
        <h2>Conta pra gente sobre <span className="hl-magenta">você</span> e sua <span className="hl-blue">empresa</span>.</h2>
        <p className="page__lead">
          Esta página é enviada manualmente pelo comercial depois que você
          fecha o escopo. Preenche com calma - é com base no que tá aqui
          que a gente monta seu site.
        </p>
      </header>

      <form className="form-grid" onSubmit={handleSubmit}>
        {/* SOBRE VOCÊ */}
        <section className="form-section">
          <header className="form-section__head">
            <span className="form-section__rule" aria-hidden="true"></span>
            <span className="eyebrow">Sobre você</span>
          </header>
          <div className="form-section__body">
            <label className="field">
              <span className="field__label">Nome do contratante</span>
              <input className="field__input" type="text" name="nome" required autoComplete="name" />
            </label>
            <MultiPhone
              label="Telefone pessoal"
              placeholder="(00) 00000-0000"
              values={pessoaisTel}
              onChange={setPessoaisTel}
            />
          </div>
        </section>

        {/* SOBRE A EMPRESA */}
        <section className="form-section">
          <header className="form-section__head">
            <span className="form-section__rule" aria-hidden="true"></span>
            <span className="eyebrow">Sobre a empresa</span>
          </header>
          <div className="form-section__body">
            <label className="field">
              <span className="field__label">Nome da empresa</span>
              <input className="field__input" type="text" name="empresa" required />
            </label>
            <MultiPhone
              label="Telefones da empresa"
              placeholder="(00) 0000-0000"
              values={empresaTel}
              onChange={setEmpresaTel}
            />

            <label className="field">
              <span className="field__label">Email da empresa</span>
              <input
                className="field__input"
                type="email"
                name="empresa_email"
                placeholder="contato@empresa.com.br"
                autoComplete="email"
              />
            </label>

            <label className="field">
              <span className="field__label">Endereço da empresa</span>
              <input
                className="field__input"
                type="text"
                name="empresa_endereco"
                placeholder="Rua, número, bairro, cidade, UF"
                disabled={semEndereco}
              />
            </label>
            <label className="field__check">
              <input
                type="checkbox"
                checked={semEndereco}
                onChange={(e) => setSemEndereco(e.target.checked)}
              />
              <span>Não tem endereço fixo (Freelancer, atende a domicílio, digital)</span>
            </label>

            <div className="field-row">
              <label className="field">
                <span className="field__label">Instagram da empresa</span>
                <input className="field__input" type="text" name="instagram" placeholder="@usuario ou link" />
              </label>
              <label className="field">
                <span className="field__label">Facebook da empresa</span>
                <input className="field__input" type="text" name="facebook" placeholder="link da página" />
              </label>
            </div>
          </div>
        </section>

        {/* SOBRE O PROJETO */}
        <section className="form-section">
          <header className="form-section__head">
            <span className="form-section__rule" aria-hidden="true"></span>
            <span className="eyebrow">Sobre o projeto</span>
          </header>
          <div className="form-section__body">
            <label className="field">
              <span className="field__label">Descreva sua ideia do site</span>
              <textarea
                className="field__input field__input--area"
                name="ideia"
                rows="6"
                placeholder={
                  "ex.: quero um site com galeria de fotos, paleta em tons de azul (nada de degradê chamativo), "
                  + "hero com uma foto grande e bonita, contato direto pelo WhatsApp, algo limpo e moderno. "
                  + "Se tiver alguma referência (link de outro site que gostou), cola aqui também."
                }
              />
            </label>
            <label className="field">
              <span className="field__label">Conte mais sobre a empresa</span>
              <textarea
                className="field__input field__input--area"
                name="empresa_sobre"
                rows="6"
                placeholder={
                  "ex.: fundada em 2018, atendemos cães, gatos e exóticos. Principais serviços: "
                  + "cirurgia ortopédica, check-up preventivo e laboratório interno. Diferencial: "
                  + "atendimento humanizado e plantão 24h."
                }
              />
            </label>
          </div>
        </section>

        <div className="form-actions">
          <button type="submit" className="btn btn--primary">
            Enviar formulário <ArrowUR />
          </button>
          <span className="form-actions__hint">
            As fotos você manda à parte por WhatsApp ou email - o que for mais fácil.
          </span>
        </div>
      </form>
    </div>
  );
}

window.ZPages = { HomePage, ServicesPage, CartaPage, FaqPage, FormularioPage, Footer };