/* =========================================================
   M-FLOW — sections (Hero, Manifesto, Services, Differentials,
   Stack, Contact, Footer)
   ========================================================= */
const { useState: useStateSec, useEffect: useEffectSec, useRef: useRefSec, useMemo } = React;

/* ============== HERO ===================================== */
function Hero({ variant = "default", onContactClick, onServicesClick }) {
  const ref = useReveal();
  return (
    <section className="hero" id="top" data-variant={variant} ref={ref}>
            <div className="hero-atmosphere" />
            <div className="grid-overlay" aria-hidden="true" />
            <div className="container">
                <div className="hero-eyebrow-row reveal">
                    <StatusPill>Aceitando novos projetos · Q3 2026</StatusPill>
                    <span className="mono" style={{ color: "var(--text-mute)" }}>
                        v.06 · São Paulo / Remoto global
                    </span>
                </div>

                {variant === "split" ?
        <div className="hero-grid">
                        <div>
                            <h1 className="hero-headline reveal delay-1">
                                Engenharia de <span className="serif">sistemas</span> e <em>consultoria</em> estratégica.
                            </h1>
                            <div className="hero-meta">
                                <div>
                                    <p className="hero-lede reveal delay-2">
                                        <strong>M-FLOW</strong> projeta, implementa e opera a infraestrutura digital de empresas que não podem falhar — automação de fluxos, arquitetura de atendimento, IA aplicada.
                                    </p>
                                </div>
                                <div className="hero-cta-row reveal delay-3">
                                    <button className="btn btn-primary btn-lg" onClick={onContactClick}>
                                        Agendar consulta <Icon name="arrow" size={14} />
                                    </button>
                                    <button className="btn btn-ghost btn-lg" onClick={onServicesClick}>
                                        Ver serviços
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div className="hero-stone reveal delay-2" />
                    </div> :

        <div className="hero-grid">
                        <h1 className="hero-headline reveal delay-1">
                            Engenharia de <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>sistemas</span> e <em>consultoria</em> estratégica.
                        </h1>
                        <div className="hero-meta">
                            <p className="hero-lede reveal delay-2">
                                <strong>M-FLOW</strong> projeta, implementa e opera a infraestrutura digital de empresas que não podem falhar — automação de fluxos, arquitetura de atendimento e IA aplicada onde ela realmente gera resultado.
                            </p>
                            <div className="hero-cta-row reveal delay-3">
                                <button className="btn btn-primary btn-lg" onClick={onContactClick}>
                                    Agendar consulta <Icon name="arrow" size={14} />
                                </button>
                                <button className="btn btn-ghost btn-lg" onClick={onServicesClick}>
                                    Ver serviços
                                </button>
                            </div>
                        </div>
                    </div>
        }
            </div>

            <div className="hero-marquee" aria-hidden="true">
                <div className="hero-marquee-track">
                    {Array.from({ length: 2 }).map((_, k) =>
          <React.Fragment key={k}>
                            <span>Engenharia rigorosa</span>
                            <span>Operações 24/7</span>
                            <span>Privacidade por design</span>
                            <span>IA com propósito</span>
                            <span>Integrações sob medida</span>
                            <span>Implementação em semanas</span>
                            <span>Equipe dedicada</span>
                            <span>Feito de futuro</span>
                        </React.Fragment>
          )}
                </div>
            </div>
        </section>);

}

/* ============== MANIFESTO ================================ */
function Manifesto() {
  const ref = useReveal();
  return (
    <section className="manifesto" id="manifesto" ref={ref}>
            <div className="manifesto-bg" style={{ opacity: "0.1", backgroundSize: "cover", backgroundPosition: "left center" }} />
            <div className="container manifesto-content">
                <div className="eyebrow reveal" style={{ color: "rgba(245,241,234,0.7)", marginBottom: 48 }}>
                    Manifesto · 001
                </div>
                <h2 className="manifesto-headline reveal delay-1">
                    Feito de <em>futuro.</em>
                </h2>
                <p className="manifesto-body reveal delay-2">Acreditamos em sistemas que duram. Software que cabe na operação real, não em apresentações. Automação que devolve tempo ao time, não o substitui. Arquitetura que escala porque foi pensada para escalar — não porque um vendedor prometeu.

        </p>
                <p className="manifesto-body reveal delay-2" style={{ marginTop: 18 }}>
                    Trabalhamos com poucas empresas por vez. Cada projeto começa em uma conversa franca sobre o que precisa funcionar — e o que pode ser desligado. O resto é engenharia.
                </p>
                <div className="manifesto-signature reveal delay-3">
                    <div className="item">
                        <strong>+10 anos</strong>
                        operando sistemas críticos
                    </div>
                    <div className="item">
                        <strong>SLA 99,9%</strong>
                        em produção contínua
                    </div>
                    <div className="item">
                        <strong>0 dados</strong>
                        treinados em terceiros
                    </div>
                </div>
            </div>
        </section>);

}

/* ============== SERVICES ================================= */
const SERVICES = [
{
  num: "01",
  title: ["Atendimento que ", "escala"],
  body: "Chatbots e copilotos integrados aos sistemas legados, com handoff humano quando precisa. Operação 24/7 sem fila, sem script engessado, sem cliente esperando.",
  capabilities: [
  "Roteamento inteligente por intenção e prioridade",
  "Integração com CRM, ERP e bases internas",
  "Handoff humano com contexto completo",
  "Métricas em tempo real e auditoria de conversas",
  "Privacidade: dados nunca saem do seu domínio"],

  deliverable: "Funcionando em produção em 4–8 semanas, com playbook de operação e treinamento do time interno.",
  tags: ["LLM", "RAG", "Webhooks", "OAuth", "Observability"]
},
{
  num: "02",
  title: ["Fluxos que não ", "param"],
  body: "Orquestração de processos entre sistemas que nunca foram desenhados para conversar entre si. Eliminamos planilhas-cola, exportações manuais e o famoso 'só fulano sabe fazer'.",
  capabilities: [
  "Mapeamento completo de processos críticos",
  "Integrações via API, RPA ou eventos",
  "Filas resilientes com retry e dead-letter",
  "Aprovações, escalations e SLAs auditáveis",
  "Visibilidade e controle total da operação em tempo real"],

  deliverable: "Fluxos entregues documentados (runbooks) e com a sua equipe treinada para operá-los. Sua operação detecta gargalos antes do cliente final.",
  tags: ["Workflow", "Event-driven", "ETL", "Queueing", "Audit"]
},
{
  num: "03",
  title: ["Times que dominam ", "IA"],
  body: "A melhor tecnologia é inútil sem as pessoas certas para operá-la. Elevamos a maturidade digital do seu time com treinamentos focados, garantindo que sua equipe pilote as novas ferramentas com segurança, autonomia e adoção real.",
  capabilities: [
  "Diagnóstico de maturidade digital por área e cargo",
  "Trilhas de treinamento sob medida — do operacional à liderança",
  "Workshops práticos com casos reais da sua operação",
  "Políticas de uso responsável e governança de IA",
  "Métricas de adoção e impacto no dia a dia"],

  deliverable: "Programa estruturado em ciclos curtos, com material próprio, sessões ao vivo e mentoria contínua. O time sai operando — não assistindo.",
  tags: ["Treinamento", "Workshops", "Adoção", "Governança", "Change Mgmt"]
}];


function Service({ s }) {
  const [open, setOpen] = useStateSec(false);
  return (
    <article className="service reveal" data-open={open} onClick={() => setOpen((o) => !o)}>
            <div className="service-num">{s.num}</div>
            <div>
                <h3 className="service-title">
                    {s.title[0]}
                    <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>{s.title[1]}</span>
                </h3>
            </div>
            <p className="service-body">{s.body}</p>
            <span className="service-toggle" aria-hidden="true">
                <Icon name="plus" size={14} />
            </span>
            <div className="service-detail">
                <div>
                    <div className="service-detail-inner">
                        <div>
                            <h4 style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-dim)", margin: "0 0 16px", fontWeight: 400 }}>
                                Capacidades
                            </h4>
                            <ul className="service-list">
                                {s.capabilities.map((c, i) => <li key={i}>{c}</li>)}
                            </ul>
                        </div>
                        <div className="service-detail-aside">
                            <h4>Entrega</h4>
                            <p>{s.deliverable}</p>
                            <h4 style={{ marginTop: 20 }}>Stack típica</h4>
                            <div className="service-tags">
                                {s.tags.map((t) => <span key={t}>{t}</span>)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>);

}

function Services() {
  const ref = useReveal();
  return (
    <section className="section services" id="servicos" ref={ref}>
            <div className="container">
                <SectionHead
          num="§ 01 / 04"
          eyebrow="Serviços"
          title={<>Três frentes. Uma única <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>disciplina.</span></>}
          aside="Trabalhamos em pilares interligados. Cada projeto pode começar por um deles — mas o valor real aparece quando os três operam juntos, dentro da mesma arquitetura." />
        
                <div className="services-stack">
                    {SERVICES.map((s) => <Service key={s.num} s={s} />)}
                </div>
            </div>
        </section>);

}

/* ============== DIFFERENTIALS ============================ */
const DIFFS = [
{
  num: "i.",
  icon: "compass",
  title: ["Engenharia", "rigorosa"],
  body: "Cada arquitetura é desenhada para escalar. Fluxos validados, integrações robustas e uma documentação que evolui junto com a sua operação."
},
{
  num: "ii.",
  icon: "fingerprint",
  title: ["Segurança", "por desenho"],
  body: "Privacidade não é checkbox no fim do projeto. É premissa desde a primeira linha: dados blindados, acessos restritos e governança contínua."
},
{
  num: "iii.",
  icon: "zap",
  title: ["Entrega", "cirúrgica"],
  body: "Operação fluindo em semanas, não trimestres. Entregas curtas e modulares, focadas em resolver o seu gargalo real sem burocracias de TI."
},
{
  num: "iv.",
  icon: "loop",
  title: ["Evolução", "contínua"],
  body: "Nosso compromisso não termina na entrega. Realizamos revisões estratégicas e ajustes finos para que a sua IA acompanhe o ritmo do negócio."
}];


function Differentials() {
  const ref = useReveal();
  return (
    <section className="section differentials" id="diferenciais" ref={ref}>
            <div className="container">
                <SectionHead
          num="§ 02 / 04"
          eyebrow="O nosso padrão"
          title={<>Quatro princípios <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>inegociáveis.</span></>}
          aside="Não somos uma agência. Somos uma consultoria de engenharia que entrega — e assume a responsabilidade pela sua operação." />
        
                <div className="diff-grid reveal delay-1">
                    {DIFFS.map((d) =>
          <div className="diff-cell" key={d.num}>
                            <span className="diff-num">{d.num}</span>
                            <div className="diff-icon">
                                <Icon name={d.icon} size={36} />
                            </div>
                            <div>
                                <h3 className="diff-title">
                                    {d.title[0]}<br /><span className="serif" style={{ color: "rgb(201, 169, 110)" }}>{d.title[1]}</span>
                                </h3>
                                <p className="diff-body">{d.body}</p>
                            </div>
                        </div>
          )}
                </div>
            </div>
        </section>);

}

/* ============== STACK ==================================== */
const STACK_CATEGORIES = [
{
  num: "/01",
  title: "Modelos & IA",
  body: "Selecionamos a inteligência exata para o seu cenário. Orquestramos modelos abertos ou proprietários guiados pela segurança do dado, eficiência de custo e precisão técnica — nunca por tendências de mercado."
},
{
  num: "/02",
  title: "Integrações & Automação",
  body: "Desenhamos o fluxo perfeito para a sua operação. Conectamos seu ecossistema de software, CRMs e canais de comunicação através de integrações precisas, transformando tarefas manuais em processos invisíveis e contínuos."
},
{
  num: "/03",
  title: "Letramento & Maturidade Digital",
  body: "A melhor tecnologia exige o operador certo. Elevamos a fluência digital do seu time com treinamentos focados no uso prático e seguro da IA, garantindo adoção real e blindando sua operação."
}];

const STACK_TILES = [
"OpenAI", "Anthropic", "Llama", "Mistral", "Gemini", "OSS-LLM",
"Postgres", "Redis", "Vector DB", "Kafka", "Temporal", "Airbyte",
"AWS", "GCP", "Azure", "Cloudflare", "Vercel", "Bare-metal",
"HubSpot", "Salesforce", "Zendesk", "Slack", "MS Teams", "Notion"];


function Stack() {
  const ref = useReveal();
  return (
    <section className="section stack" id="stack" ref={ref}>
            <div className="container">
                <SectionHead
          num="§ 03 / 04"
          eyebrow="Stack & Integrações"
          title={<>Tecnologia <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>agnóstica.</span> Decisão técnica.</>}
          aside="Não temos fornecedor preferido. Recomendamos o que faz sentido para o seu caso — e justificamos por escrito." />
        

                <div className="stack-categories reveal delay-1">
                    {STACK_CATEGORIES.map((c) =>
          <div key={c.num}>
                            <div className="stack-cat-num">{c.num}</div>
                            <h3 className="stack-cat-title" style={{ color: "rgb(245, 241, 234)" }}>{c.title}</h3>
                            <p className="stack-cat-body">{c.body}</p>
                        </div>
          )}
                </div>

                <div className="stack-grid reveal delay-2">
                    {STACK_TILES.map((t) =>
          <div className="stack-tile" key={t}>{t}</div>
          )}
                </div>
            </div>
        </section>);

}

/* ============== CONTACT ================================== */
function Contact({ phone, email }) {
  const ref = useReefRef();
  const [data, setData] = useStateSec({ name: "", company: "", email: "", scope: "", message: "" });
  const [errors, setErrors] = useStateSec({});
  const [submitted, setSubmitted] = useStateSec(false);
  const [submitting, setSubmitting] = useStateSec(false);

  const onChange = (k) => (e) => {
    setData((d) => ({ ...d, [k]: e.target.value }));
    if (errors[k]) setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const er = {};
    if (!data.name.trim()) er.name = "Informe seu nome";
    if (!data.email.trim() || !/^\S+@\S+\.\S+$/.test(data.email)) er.email = "E-mail inválido";
    if (!data.message.trim() || data.message.trim().length < 10) er.message = "Conte um pouco mais (10+ caracteres)";
    setErrors(er);
    if (Object.keys(er).length) return;
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
    }, 900);
  };

  const wa = `https://wa.me/${phone.replace(/\D/g, "")}`;

  return (
    <section className="contact" id="contato" ref={ref}>
            <div className="contact-bg" style={{ backgroundPosition: "left center", opacity: "0.1" }} />
            <div className="container">
                <div className="eyebrow reveal" style={{ marginBottom: 32 }}>§ 04 / 04 · Próximo passo</div>
                <div className="contact-grid">
                    <div>
                        <h2 className="contact-heading reveal delay-1">
                            Sua operação merece mais que soluções <span className="serif" style={{ color: "rgb(201, 169, 110)" }}>genéricas.</span>
                        </h2>
                        <p className="contact-aside reveal delay-2">
                            Conte em uma frase o que precisa funcionar. Respondemos em até um dia útil com um próximo passo concreto — não com um deck de venda.
                        </p>
                        <div className="contact-channels reveal delay-3">
                            <a href={`mailto:${email}`} className="contact-channel">
                                <span className="icn-wrap"><Icon name="arrowUpRight" size={14} /></span>
                                <span>
                                    <span className="label">E-mail direto</span>
                                    <span className="val">{email}</span>
                                </span>
                            </a>
                            <a href={wa} target="_blank" rel="noopener noreferrer" className="contact-channel">
                                <span className="icn-wrap"><Icon name="whatsapp" size={14} /></span>
                                <span>
                                    <span className="label">WhatsApp · seg–sex 9h–18h BRT</span>
                                    <span className="val">{phone}</span>
                                </span>
                            </a>
                            <div className="contact-channel" style={{ cursor: "default" }}>
                                <span className="icn-wrap"><Icon name="clock" size={14} /></span>
                                <span>
                                    <span className="label">Janela de resposta</span>
                                    <span className="val">&lt; 24 horas úteis</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <form className="contact-form reveal delay-2" onSubmit={onSubmit} noValidate>
                        {submitted ?
            <div className="form-success">
                                <div className="ok-mark"><Icon name="check" size={22} /></div>
                                <h3>Mensagem recebida.</h3>
                                <p>Vamos responder em até um dia útil em <strong>{data.email}</strong>.</p>
                            </div> :

            <>
                                <div className="form-row-2">
                                    <div className="form-field">
                                        <label>Nome <span className="req">*</span></label>
                                        <input type="text" value={data.name} onChange={onChange("name")} placeholder="Como devemos te chamar?" />
                                        {errors.name && <span className="error">{errors.name}</span>}
                                    </div>
                                    <div className="form-field">
                                        <label>Empresa</label>
                                        <input type="text" value={data.company} onChange={onChange("company")} placeholder="Onde você opera" />
                                    </div>
                                </div>
                                <div className="form-field">
                                    <label>E-mail <span className="req">*</span></label>
                                    <input type="email" value={data.email} onChange={onChange("email")} placeholder="você@empresa.com" />
                                    {errors.email && <span className="error">{errors.email}</span>}
                                </div>
                                <div className="form-field">
                                    <label>Escopo</label>
                                    <select value={data.scope} onChange={onChange("scope")} style={{ appearance: "none", backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23c9a96e' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 14px center" }}>
                                        <option value="">Selecione o tipo de projeto</option>
                                        <option value="atendimento">Atendimento & copilotos</option>
                                        <option value="fluxos">Automação de fluxos</option>
                                        <option value="ia">Treinamento & letramento digital</option>
                                        <option value="outro">Outro / não tenho certeza</option>
                                    </select>
                                </div>
                                <div className="form-field">
                                    <label>Mensagem <span className="req">*</span></label>
                                    <textarea rows="4" value={data.message} onChange={onChange("message")} placeholder="O que precisa funcionar? O que está travado hoje?" />
                                    {errors.message && <span className="error">{errors.message}</span>}
                                </div>
                                <button type="submit" className="form-submit" disabled={submitting}>
                                    {submitting ? "Enviando…" : <>Enviar mensagem <Icon name="arrow" size={14} /></>}
                                </button>
                            </>
            }
                    </form>
                </div>
            </div>
        </section>);

}
/* fallback for typo — alias */
function useReefRef() {return useReveal();}

/* ============== FOOTER =================================== */
function SiteFooter({ email, phone }) {
  return (
    <footer className="site-footer">
            <div className="container">
                <div className="footer-grid">
                    <div className="footer-col">
                        <Brand />
                        <p className="footer-tagline">
                            Engenharia de sistemas e consultoria estratégica.<br />
                            <span style={{ color: "var(--accent)" }}>Feito de futuro.</span>
                        </p>
                    </div>
                    <div className="footer-col">
                        <h4>Navegação</h4>
                        <ul>
                            <li><a href="#servicos">Serviços</a></li>
                            <li><a href="#manifesto">Manifesto</a></li>
                            <li><a href="#diferenciais">Diferenciais</a></li>
                            <li><a href="#stack">Stack</a></li>
                            <li><a href="#contato">Contato</a></li>
                        </ul>
                    </div>
                    <div className="footer-col">
                        <h4>Contato</h4>
                        <ul>
                            <li><a href={`mailto:${email}`}>{email}</a></li>
                            <li><a href={`https://wa.me/${phone.replace(/\D/g, "")}`} target="_blank" rel="noopener noreferrer">{phone}</a></li>
                            <li style={{ color: "var(--text-mute)", fontSize: 13 }}>Seg–Sex · 9h–18h BRT</li>
                        </ul>
                    </div>
                    <div className="footer-col">
                        <h4>Legal</h4>
                        <ul>
                            <li><a href="#">Política de privacidade</a></li>
                            <li><a href="#">Termos de uso</a></li>
                            <li><a href="#">Status</a></li>
                            <li style={{ color: "var(--text-mute)", fontSize: 12, fontFamily: "var(--font-mono)" }}>CNPJ 00.000.000/0001-00</li>
                        </ul>
                    </div>
                </div>

                <div className="footer-wordmark" aria-hidden="true">
                    M-FLOW<span className="serif">.</span>
                </div>

                <div className="footer-meta">
                    <div>© 2026 M-FLOW Engenharia de Sistemas e Consultoria LTDA · Todos os direitos reservados.</div>
                    <div>v2026.05 · São Paulo / Remoto global · <a href="#top">↑ Topo</a></div>
                </div>
            </div>
        </footer>);

}

Object.assign(window, {
  Hero, Manifesto, Services, Differentials, Stack, Contact, SiteFooter
});