/* global React, ReactDOM, Nav, Footer, Mark, Wordmark, useReveal, fmtBRL, SeverityBadge, Sparkline */
const { useEffect, useState, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// HERO — animated dashboard with alerts streaming in
// ─────────────────────────────────────────────────────────────

const HEADLINES = [
  ["Sua empresa perde dinheiro todo mês.", " Agora você vai saber onde."],
  ["Inteligência operacional", " em tempo real para PMEs brasileiras."],
  ["Conecte seu ERP.", " Receba o primeiro alerta em 30 minutos."],
  ["Pare de descobrir problemas operacionais", " semanas depois que aconteceram."],
];

const SEED_ALERTS = [
  {
    process: "Faturamento",
    severity: "critico",
    title: "12 pedidos aprovados há +24h sem NF emitida",
    impact: 184_300,
    rec: "Notificar fiscal para emissão urgente — risco de quebra de SLA com 3 clientes-chave.",
    meta: "Pedidos #4821, #4827, #4831 +9",
    elapsed: "há 2 min",
  },
  {
    process: "Inadimplência",
    severity: "alto",
    title: "Boletos vencidos +30 dias sem ação de cobrança",
    impact: 96_750,
    rec: "Enviar fluxo de régua de cobrança nível 2 para 7 títulos identificados.",
    meta: "7 títulos · cliente Atacadão Norte",
    elapsed: "há 14 min",
  },
  {
    process: "Cancelamentos",
    severity: "alto",
    title: "Pico de cancelamentos por 'fora de estoque' (+312% MoM)",
    impact: 41_200,
    rec: "Verificar curva ABC. Itens X-110 e Y-228 representam 68% das perdas.",
    meta: "Categoria: linha branca",
    elapsed: "há 38 min",
  },
  {
    process: "Logística",
    severity: "medio",
    title: "SLA de entrega abaixo de 92% na praça SP capital",
    impact: 22_800,
    rec: "Revisar rota da transportadora B — atraso médio subiu de 1,1d para 2,7d.",
    meta: "Transportadora Loggi · 142 entregas",
    elapsed: "há 1h",
  },
  {
    process: "Conversão",
    severity: "info",
    title: "Queda de 18% na conversão estágio Negociação → Fechado",
    impact: 58_400,
    rec: "Revisar 14 leads parados há +9 dias com vendedor Carlos M.",
    meta: "CRM HubSpot · pipeline Enterprise",
    elapsed: "há 1h 24min",
  },
];

function HeroAlertCard({ alert, isNew }) {
  const colors = {
    critico: { bar: "var(--critical)", soft: "var(--critical-soft)" },
    alto:    { bar: "var(--warning)",  soft: "var(--warning-soft)" },
    medio:   { bar: "var(--text-3)",   soft: "rgba(255,255,255,0.04)" },
    info:    { bar: "var(--accent)",   soft: "var(--accent-soft)" },
  }[alert.severity];

  return (
    <div className={isNew ? "slide-in" : ""} style={{
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: 12,
      padding: "14px 16px",
      display: "grid",
      gridTemplateColumns: "auto 1fr auto",
      gap: 14,
      alignItems: "flex-start",
      position: "relative",
      overflow: "hidden",
      boxShadow: isNew ? "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(129,140,248,0.15)" : "var(--shadow-sm)",
      transition: "box-shadow 300ms",
    }}>
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: colors.bar, borderRadius: "12px 0 0 12px" }}/>
      <div style={{
        width: 34, height: 34, borderRadius: 9,
        background: colors.soft, color: colors.bar,
        display: "grid", placeItems: "center", flexShrink: 0,
      }}>
        <ProcessIcon name={alert.process} size={17}/>
      </div>
      <div style={{ minWidth: 0 }}>
        <div className="row gap-8" style={{ alignItems: "center", marginBottom: 4 }}>
          <SeverityBadge level={alert.severity}/>
          <span className="caption mono">{alert.process}</span>
          <span className="caption mono" style={{ color: "var(--text-3)" }}>· {alert.elapsed}</span>
        </div>
        <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--text)", lineHeight: 1.4, marginBottom: 4 }}>
          {alert.title}
        </div>
        <div className="caption mono" style={{ color: "var(--text-3)" }}>{alert.meta}</div>
      </div>
      <div style={{ textAlign: "right", flexShrink: 0 }}>
        <div className="caption mono" style={{ color: "var(--text-3)", marginBottom: 2 }}>IMPACTO</div>
        <div className="mono" style={{ fontSize: 16, fontWeight: 500, color: "var(--text)", letterSpacing: "-0.02em" }}>
          {fmtBRL(alert.impact)}
        </div>
      </div>
    </div>
  );
}

function ProcessIcon({ name, size = 16 }) {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "Faturamento": return <svg {...props}><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/><path d="M9 13h6M9 17h4"/></svg>;
    case "Inadimplência": return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v6"/><circle cx="12" cy="16.5" r=".7" fill="currentColor" stroke="none"/></svg>;
    case "Cancelamentos": return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 8l8 8M16 8l-8 8"/></svg>;
    case "Logística": return <svg {...props}><rect x="1" y="7" width="14" height="10" rx="1"/><path d="M15 10h4l3 3v4h-7"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg>;
    case "Conversão": return <svg {...props}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg>;
    default: return null;
  }
}

function HeroDashboard() {
  const [alerts, setAlerts] = useState(SEED_ALERTS.slice(0, 3));
  const [newId, setNewId] = useState(null);
  const [tick, setTick] = useState(0);
  const cycle = useRef(3);

  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 1000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    const i = setInterval(() => {
      const next = SEED_ALERTS[cycle.current % SEED_ALERTS.length];
      cycle.current += 1;
      setAlerts(prev => [next, ...prev].slice(0, 4));
      setNewId(next.title);
      setTimeout(() => setNewId(null), 600);
    }, 4200);
    return () => clearInterval(i);
  }, []);

  const kpis = [
    { label: "ALERTAS ATIVOS", value: 14, delta: "+3 hoje", trend: [4, 6, 5, 8, 7, 9, 11, 14], color: "var(--accent)" },
    { label: "IMPACTO 30D", value: "R$ 412k", delta: "+R$ 96k esta semana", trend: [120, 180, 160, 240, 280, 320, 380, 412], color: "var(--critical)" },
    { label: "TEMPO P/ AÇÃO", value: "2h 14m", delta: "−38min vs. baseline", trend: [320, 280, 240, 200, 180, 160, 140, 134], color: "var(--success)" },
  ];

  return (
    <div style={{
      background: "rgba(26,29,39,0.85)",
      backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      border: "1px solid rgba(255,255,255,0.10)",
      borderRadius: 20,
      boxShadow: "0 0 0 1px rgba(129,140,248,0.12), 0 32px 80px -24px rgba(0,0,0,0.8)",
      overflow: "hidden",
      maxWidth: "100%",
    }}>
      {/* dashboard chrome */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 16px", borderBottom: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.03)" }}>
        <div className="row center gap-12">
          <div className="row gap-6">
            <span style={{ width: 10, height: 10, borderRadius: 5, background: "#FF5F57" }}/>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: "#FEBC2E" }}/>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: "#28C840" }}/>
          </div>
          <div className="caption mono" style={{ color: "var(--text-3)" }}>app.arctmind.com / inbox</div>
        </div>
        <div className="row center gap-8">
          <span className="tag tag-success">
            <span className="dot pulse"/> Ao vivo
          </span>
          <span className="caption mono" style={{ color: "var(--text-3)" }}>{new Date().toLocaleTimeString("pt-BR").slice(0,5)}{tick % 2 ? "·" : " "}</span>
        </div>
      </div>

      {/* KPI strip */}
      <div className="grid grid-3" style={{ gap: 0 }}>
        {kpis.map((k, i) => (
          <div key={k.label} style={{
            padding: "14px 16px",
            borderRight: i < kpis.length - 1 ? "1px solid rgba(255,255,255,0.06)" : "none",
            borderBottom: "1px solid rgba(255,255,255,0.06)",
            background: "rgba(255,255,255,0.02)",
          }}>
            <div className="caption mono" style={{ color: "var(--text-3)", marginBottom: 7, fontSize: 10 }}>{k.label}</div>
            <div className="row between" style={{ alignItems: "flex-end", gap: 8 }}>
              <div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--text)" }}>{k.value}</div>
                <div className="caption mono" style={{ color: "var(--text-3)", marginTop: 3, fontSize: 10 }}>{k.delta}</div>
              </div>
              <Sparkline values={k.trend} color={k.color} fill={k.color} w={72} h={28}/>
            </div>
          </div>
        ))}
      </div>

      {/* alerts list */}
      <div style={{ padding: "12px 12px", display: "grid", gap: 8, background: "rgba(0,0,0,0.2)" }}>
        {alerts.map(a => (
          <HeroAlertCard key={a.title + a.elapsed} alert={a} isNew={a.title === newId}/>
        ))}
        <div className="row center gap-8" style={{ justifyContent: "center", padding: "6px 0" }}>
          <span className="caption mono" style={{ color: "var(--text-3)" }}>Atualizando · próximo alerta em &lt; 1min</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO DASHBOARD — mobile static version (no animations)
// ─────────────────────────────────────────────────────────────
function HeroDashboardMobile() {
  const kpis = [
    { label: "ALERTAS ATIVOS", value: "14", delta: "+3 hoje", color: "var(--accent)" },
    { label: "IMPACTO 30D", value: "R$412k", delta: "+R$96k/sem", color: "var(--critical)" },
    { label: "TEMPO P/AÇÃO", value: "2h14m", delta: "−38min base", color: "var(--success)" },
  ];
  return (
    <div style={{
      background: "rgba(26,29,39,0.92)",
      border: "1px solid rgba(255,255,255,0.10)",
      borderRadius: 16,
      overflow: "hidden",
      maxWidth: "100%",
      boxShadow: "0 0 0 1px rgba(129,140,248,0.10), 0 16px 48px -12px rgba(0,0,0,0.7)",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", borderBottom: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.02)" }}>
        <div className="caption mono" style={{ color: "var(--text-3)", fontSize: 11 }}>app.arctmind.com / inbox</div>
        <span className="tag tag-success" style={{ fontSize: 10 }}><span className="dot pulse"/> Ao vivo</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
        {kpis.map((k, i) => (
          <div key={k.label} style={{ padding: "10px 10px", borderRight: i < 2 ? "1px solid rgba(255,255,255,0.06)" : "none", background: "rgba(255,255,255,0.02)" }}>
            <div style={{ fontSize: 9, fontFamily: "var(--font-mono)", color: "var(--text-3)", marginBottom: 3, letterSpacing: "0.04em" }}>{k.label}</div>
            <div style={{ fontSize: 15, fontWeight: 600, fontFamily: "var(--font-mono)", color: "var(--text)" }}>{k.value}</div>
            <div style={{ fontSize: 9, fontFamily: "var(--font-mono)", color: k.color, marginTop: 2 }}>{k.delta}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: "8px 8px", display: "grid", gap: 6, background: "rgba(0,0,0,0.2)" }}>
        {SEED_ALERTS.slice(0, 2).map(a => (
          <HeroAlertCard key={a.title} alert={a} isNew={false}/>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PROBLEM section
// ─────────────────────────────────────────────────────────────
function ProblemSection() {
  const items = [
    {
      stat: "R$ 184k", label: "/mês",
      title: "Faturamento atrasado",
      body: "Pedidos aprovados ficam dias parados antes da NF ser emitida. Cada hora custa caixa.",
      mono: "DELTA APROVAÇÃO → NF",
      color: "var(--critical)",
    },
    {
      stat: "23%", label: "dos cancelamentos",
      title: "Por motivo invisível",
      body: "Cancelamentos por estoque, prazo ou erro de cadastro nunca chegam à mesa do gestor.",
      mono: "MOTIVO ≠ CLIENTE",
      color: "var(--warning)",
    },
    {
      stat: "R$ 96k", label: "em aberto",
      title: "Inadimplência sem ação",
      body: "Títulos vencem, mas a régua de cobrança não dispara. O dinheiro fica parado por 30, 60, 90 dias.",
      mono: "TÍTULOS SEM AÇÃO",
      color: "var(--info)",
    },
  ];
  return (
    <section>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 56 }}>
          <span className="eyebrow-accent">O Problema</span>
          <h2 className="h-1" style={{ marginTop: 14 }}>
            PMEs perdem receita silenciosamente <span style={{ color: "var(--text-3)" }}>todos os meses.</span>
          </h2>
          <p className="body-lg" style={{ marginTop: 18 }}>
            O dinheiro está vazando dentro do ERP que você já usa. Ninguém tem tempo, ferramenta ou fôlego para monitorar — então as perdas só aparecem no fechamento. Tarde demais.
          </p>
        </div>
        <div className="grid grid-3">
          {items.map((it, i) => (
            <div key={it.title} className={`card hoverable reveal reveal-delay-${i+1}`} style={{ padding: 28 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: "rgba(255,255,255,0.04)",
                border: "1px solid var(--border)",
                display: "grid", placeItems: "center",
                color: it.color,
                marginBottom: 20,
              }}>
                <ProcessIcon name={it.title === "Faturamento atrasado" ? "Faturamento" : it.title === "Por motivo invisível" ? "Cancelamentos" : "Inadimplência"} size={20}/>
              </div>
              <div className="row" style={{ alignItems: "baseline", gap: 8, marginBottom: 14 }}>
                <span className="mono" style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.03em", color: it.color }}>{it.stat}</span>
                <span className="caption mono" style={{ color: "var(--text-3)" }}>{it.label}</span>
              </div>
              <h3 className="h-4" style={{ marginBottom: 10 }}>{it.title}</h3>
              <p className="body-sm" style={{ color: "var(--text-2)", lineHeight: 1.6 }}>{it.body}</p>
              <div className="divider" style={{ marginTop: 22, marginBottom: 14 }}/>
              <div className="caption mono" style={{ color: "var(--text-3)" }}>{it.mono}</div>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ marginTop: 40, padding: "20px 24px", background: "var(--surface-2)", borderRadius: 12, border: "1px solid var(--border)" }}>
          <span className="mono" style={{ fontSize: 13, color: "var(--text-2)" }}>
            Estudos de mercado indicam que empresas de pequeno e médio porte podem perder entre 2% e 5% do faturamento anual devido a ineficiências operacionais, retrabalho, falhas de processo e baixa integração de dados. Fonte: <strong style={{ color: "var(--text)" }}>IstoÉ Dinheiro.</strong>
          </span>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// HOW IT WORKS — timeline
// ─────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: "01", time: "5 min", title: "Cadastro & onboarding", body: "Quatro perguntas sobre o negócio: segmento, ERP em uso, principal dor, tamanho da equipe." },
    { n: "02", time: "10–15 min", title: "Conexão com ERP / CRM", body: "Wizard de configuração com template pré-preenchido. A TI do cliente ajusta credenciais e testa conexão." },
    { n: "03", time: "5–10 min", title: "Mapeamento de campos", body: "Define quais dados extrair e como transformar. Editável em tela. Sem código." },
    { n: "04", time: "≤ 30 min", title: "Primeiro alerta real", body: "O sistema detecta a primeira anomalia, estima o impacto em R$ e recomenda a próxima ação." },
  ];
  return (
    <section className="section-tinted">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="eyebrow-accent">Como funciona</span>
          <h2 className="h-1" style={{ marginTop: 14 }}>Do cadastro ao primeiro alerta em <span className="mono" style={{ fontWeight: 600, color: "var(--accent)" }}>menos de 30 minutos.</span></h2>
        </div>
        <div className="grid grid-4" style={{ position: "relative" }}>
          <div style={{ position: "absolute", top: 28, left: "12.5%", right: "12.5%", height: 1, background: "rgba(129,140,248,0.2)", zIndex: 0 }}/>
          {steps.map((s, i) => (
            <div key={s.n} className={`reveal reveal-delay-${i+1}`} style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: i === 0 ? "var(--accent)" : "var(--surface-2)",
                color: i === 0 ? "#fff" : "var(--accent)",
                border: "1px solid " + (i === 0 ? "var(--accent)" : "rgba(129,140,248,0.2)"),
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: 16, letterSpacing: "-0.01em",
                marginBottom: 20,
                boxShadow: i === 0 ? "var(--shadow-glow)" : "none",
              }}>{s.n}</div>
              <div className="caption mono" style={{ color: "var(--accent)", marginBottom: 8 }}>{s.time}</div>
              <h4 className="h-4" style={{ marginBottom: 8 }}>{s.title}</h4>
              <p className="body-sm" style={{ color: "var(--text-2)" }}>{s.body}</p>
            </div>
          ))}
        </div>

        {/* trust ribbon */}
        <div className="reveal" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "rgba(255,255,255,0.06)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--border)" }}>
          {[
            ["Conexão somente leitura", "Nunca escreve nos seus sistemas."],
            ["Credenciais isoladas", "Permanecem na sua infraestrutura."],
            ["Dados no Brasil", "Conforme LGPD · AES-256."],
            ["Sem cartão de crédito", "Trial de 14 dias. Cancele quando quiser."],
          ].map(([t, sub]) => (
            <div key={t} style={{ background: "var(--surface-2)", padding: "20px 22px" }}>
              <div className="row gap-8" style={{ alignItems: "center", marginBottom: 6 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{t}</span>
              </div>
              <div className="caption" style={{ color: "var(--text-3)" }}>{sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PROCESSES MONITORED
// ─────────────────────────────────────────────────────────────
function Processes() {
  const items = [
    { name: "Faturamento", icon: "Faturamento", desc: "Delta entre aprovação do pedido e emissão da NF.", metric: "Horas até emissão da NF", color: "var(--accent)", status: "Saudável" },
    { name: "Cancelamentos", icon: "Cancelamentos", desc: "Taxa de cancelamento por motivo não-cliente.", metric: "Cancelamentos/mês por motivo", color: "var(--warning)", status: "Atenção" },
    { name: "Logística", icon: "Logística", desc: "SLA prometido vs. data de entrega efetiva.", metric: "% entregas dentro do prazo", color: "var(--info)", status: "Saudável" },
    { name: "Conversão", icon: "Conversão", desc: "Taxa de fechamento por estágio do funil de CRM.", metric: "Conversão por estágio (%)", color: "#A78BFA", status: "Crítico" },
    { name: "Inadimplência", icon: "Inadimplência", desc: "Títulos vencidos sem ação de cobrança disparada.", metric: "R$ em aberto sem ação", color: "var(--critical)", status: "Crítico" },
  ];
  const statusStyle = {
    "Saudável": { color: "var(--success)", bg: "var(--success-soft)" },
    "Atenção": { color: "var(--warning)", bg: "var(--warning-soft)" },
    "Crítico": { color: "var(--critical)", bg: "var(--critical-soft)" },
  };
  return (
    <section>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 56 }}>
          <span className="eyebrow-accent">Processos monitorados</span>
          <h2 className="h-1" style={{ marginTop: 14 }}>Cinco fontes de perda <span style={{ color: "var(--text-3)" }}>vigiadas continuamente.</span></h2>
        </div>
        <div className="grid grid-3">
          {items.map((it, i) => {
            const st = statusStyle[it.status];
            return (
              <div key={it.name} className={`card hoverable reveal reveal-delay-${(i%3)+1}`} style={{ padding: 24, display: "flex", flexDirection: "column" }}>
                <div className="row between" style={{ alignItems: "flex-start", marginBottom: 18 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: "rgba(255,255,255,0.04)", color: it.color,
                    border: "1px solid var(--border)",
                    display: "grid", placeItems: "center",
                  }}>
                    <ProcessIcon name={it.icon} size={20}/>
                  </div>
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 5,
                    fontSize: 10.5, fontFamily: "var(--font-mono)", letterSpacing: "0.04em",
                    textTransform: "uppercase", padding: "3px 8px", borderRadius: 999,
                    color: st.color, background: st.bg,
                  }}>
                    {it.status === "Crítico" && <span style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor", animation: "pulse-dot 1.6s infinite" }}/>}
                    {it.status}
                  </span>
                </div>
                <h3 className="h-4" style={{ marginBottom: 8 }}>{it.name}</h3>
                <p className="body-sm" style={{ color: "var(--text-2)", marginBottom: 20, flex: 1 }}>{it.desc}</p>
                <div style={{ paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                  <div className="caption mono" style={{ color: "var(--text-3)", marginBottom: 4 }}>MÉTRICA-CHAVE</div>
                  <div className="mono" style={{ fontSize: 13, color: "var(--text)" }}>{it.metric}</div>
                </div>
              </div>
            );
          })}
          <div className="card reveal reveal-delay-3" style={{ padding: 24, display: "flex", flexDirection: "column", justifyContent: "center", background: "rgba(129,140,248,0.04)", borderStyle: "dashed", borderColor: "rgba(129,140,248,0.2)" }}>
            <div className="caption mono" style={{ color: "var(--accent)", marginBottom: 10 }}>+ ROADMAP</div>
            <h3 className="h-4" style={{ marginBottom: 8 }}>Processos sob medida</h3>
            <p className="body-sm" style={{ color: "var(--text-2)", marginBottom: 16 }}>Plano Business permite definir métricas e regras próprias, com mapeamento por consultor.</p>
            <a href="pages/contato.html" className="row gap-6" style={{ color: "var(--accent)", fontSize: 13, fontWeight: 500 }}>
              Conversar com o time
              <svg className="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CONNECTORS
// ─────────────────────────────────────────────────────────────
const CONNECTORS = [
  { n: "TOTVS Protheus", s: "ERP", st: "ativo" },
  { n: "SAP Business One", s: "ERP", st: "ativo" },
  { n: "Sankhya", s: "ERP", st: "ativo" },
  { n: "Senior", s: "ERP", st: "em-breve" },
  { n: "Questor", s: "ERP Legado · Agente local", st: "em-breve" },
  { n: "HubSpot", s: "CRM", st: "ativo" },
  { n: "RD Station", s: "CRM/Mkt", st: "em-breve" },
  { n: "Salesforce", s: "CRM", st: "em-breve" },
  { n: "Planilhas / CSV", s: "Fallback manual", st: "ativo" },
  { n: "API genérica", s: "Mapping Engine", st: "ativo" },
];

function ConnectorTile({ c }) {
  return (
    <div className="card hoverable" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12, minHeight: 110 }}>
      <div className="row between" style={{ alignItems: "flex-start" }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: "var(--surface-2)",
          border: "1px solid var(--border)",
          display: "grid", placeItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600,
          color: "var(--accent)",
        }}>{c.n.split(" ").map(w => w[0]).slice(0,2).join("")}</div>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 5,
          fontSize: 9.5, fontFamily: "var(--font-mono)", letterSpacing: "0.05em",
          textTransform: "uppercase", padding: "3px 7px", borderRadius: 999,
          color: c.st === "ativo" ? "var(--success)" : "var(--text-3)",
          background: c.st === "ativo" ? "var(--success-soft)" : "rgba(255,255,255,0.04)",
          border: "1px solid " + (c.st === "ativo" ? "rgba(45,212,191,0.25)" : "var(--border)"),
        }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor" }}/>{c.st === "ativo" ? "MVP" : "EM BREVE"}
        </span>
      </div>
      <div>
        <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.3 }}>{c.n}</div>
        <div className="caption mono" style={{ color: "var(--text-3)", marginTop: 3 }}>{c.s}</div>
      </div>
    </div>
  );
}

function Connectors() {
  return (
    <section className="section-dark" style={{ position: "relative", overflow: "hidden" }}>
      <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.6 }}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 48 }}>
          <span className="eyebrow-accent">Conectores</span>
          <h2 className="h-1" style={{ marginTop: 14 }}>
            Funciona com o ERP <span style={{ color: "var(--text-3)" }}>que você já tem.</span>
          </h2>
          <p className="body-lg" style={{ marginTop: 18 }}>
            Conectores nativos para os principais ERPs e CRMs brasileiros. ERP legado sem API? Um agente local <span className="mono">.exe</span> resolve.
          </p>
        </div>

        <div className="grid reveal" style={{ gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
          {CONNECTORS.map(c => <ConnectorTile key={c.n} c={c}/>)}
        </div>

        <div className="reveal" style={{ marginTop: 40, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, alignItems: "center" }}>
          <div className="caption mono" style={{ color: "var(--text-3)" }}>
            Não vê seu ERP? &nbsp;<a href="pages/contato.html" style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>Fale com o time →</a>
          </div>
          <a href="pages/conectores.html" className="btn btn-ghost btn-sm">
            Ver detalhes técnicos
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SOCIAL PROOF
// ─────────────────────────────────────────────────────────────
function Proof() {
  const stats = [
    { v: "R$ 1.4M", l: "Recuperados em 90 dias", sub: "Soma de impactos atribuídos a alertas no piloto." },
    { v: "1.832", l: "Alertas gerados", sub: "Em 42 empresas-piloto, jan a abr/2026." },
    { v: "27 min", l: "Tempo médio para 1º alerta", sub: "Da finalização do mapping até a primeira anomalia." },
    { v: "94%", l: "Alertas com ação realizada", sub: "Marcados como 'tratado' em até 7 dias." },
  ];
  return (
    <section>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
          <div className="reveal">
            <span className="eyebrow-accent">Resultado real</span>
            <blockquote style={{ margin: "20px 0 28px", fontSize: 24, lineHeight: 1.4, letterSpacing: "-0.015em", color: "var(--text)", fontWeight: 500, textWrap: "balance", borderLeft: "3px solid var(--accent)", paddingLeft: 20 }}>
              "Em três semanas o ARCTMIND identificou R$ 312 mil em pedidos parados na fila do fiscal. Antes a gente só descobria isso no fechamento — quando o estrago já estava feito."
            </blockquote>
            <div className="row gap-12" style={{ alignItems: "center" }}>
              <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", fontWeight: 600, fontFamily: "var(--font-mono)", border: "1px solid rgba(129,140,248,0.3)" }}>RV</div>
              <div>
                <div style={{ fontWeight: 500, fontSize: 14 }}>Renata Vasconcelos</div>
                <div className="caption mono" style={{ color: "var(--text-3)" }}>CFO · Distribuidora Norte Sul · 87 colaboradores · Totvs Protheus</div>
              </div>
            </div>
          </div>
          <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "rgba(255,255,255,0.06)", borderRadius: 14, overflow: "hidden", border: "1px solid var(--border)" }}>
            {stats.map(s => (
              <div key={s.l} style={{ background: "var(--surface)", padding: 22 }}>
                <div className="mono" style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.025em", color: "var(--accent)" }}>{s.v}</div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--text)", marginTop: 6 }}>{s.l}</div>
                <div className="caption" style={{ color: "var(--text-3)", marginTop: 6 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PRINCIPLE callout — IA detecta, humano decide
// ─────────────────────────────────────────────────────────────
function Principle() {
  return (
    <section className="section-tinted tight">
      <div className="container">
        <div className="reveal" style={{
          padding: "40px 48px",
          background: "var(--surface-2)",
          border: "1px solid rgba(129,140,248,0.15)",
          borderRadius: 16,
          display: "grid",
          gridTemplateColumns: "auto 1fr",
          gap: 36,
          alignItems: "center",
          boxShadow: "0 0 0 1px rgba(129,140,248,0.08)",
        }}>
          <div style={{ width: 60, height: 60, borderRadius: 16, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", border: "1px solid rgba(129,140,248,0.2)" }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/><circle cx="12" cy="12" r="3"/></svg>
          </div>
          <div>
            <div className="eyebrow-accent" style={{ marginBottom: 10 }}>Princípio inegociável</div>
            <h3 className="h-2" style={{ marginBottom: 10 }}>
              A IA detecta e alerta. <span style={{ color: "var(--text-3)" }}>O humano decide e age.</span>
            </h3>
            <p className="body" style={{ maxWidth: 720, color: "var(--text-2)" }}>
              ARCTMIND nunca executa ação autônoma nos seus sistemas. Toda conexão é somente leitura. As recomendações são sugestões com contexto e impacto estimado — quem aperta o botão é o seu time.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PLANS
// ─────────────────────────────────────────────────────────────
function Plans() {
  const plans = [
    { tier: "STARTER", price: "R$ 197", per: "/mês", cta: "Começar grátis", featured: false,
      desc: "Para times pequenos validando os primeiros alertas.",
      feats: ["Todos conectores disponíveis","Todos processos monitorados","Histórico 90 dias","Alertas por email","Relatório semanal IA","Suporte prioritário","1 usuário"] },
    { tier: "GROWTH", price: "R$ 297", per: "/mês", cta: "Começar grátis", featured: true,
      desc: "Para PMEs em operação contínua, com múltiplos analistas.",
      feats: ["Todos conectores disponíveis","Todos processos monitorados","Histórico 12 meses","Alertas por email & Slack","Relatório semanal IA","Suporte prioritário","Multi-usuário ilimitado"] },
    { tier: "BUSINESS", price: "Sob consulta", per: "anual", cta: "Falar com vendas", featured: false,
      desc: "Multi-unidade, regras customizadas, SLA dedicado.",
      feats: ["Múltiplos conectores por unidade","Processos customizados","Histórico de 1 ano +","Alertas por canais customizados","Consultor dedicado de mapping","SLA de suporte dedicado","API própria"] },
  ];
  return (
    <section className="section-dark">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <span className="eyebrow-accent">Planos</span>
          <h2 className="h-1" style={{ marginTop: 14 }}>Pague pelo que <span style={{ color: "var(--text-3)" }}>realmente recupera.</span></h2>
          <p className="body-lg" style={{ marginTop: 18 }}>
            Trial de 14 dias com ERP real conectado. Sem cartão. O valor aparece antes de qualquer cobrança.
          </p>
        </div>
        <div className="grid grid-3" style={{ alignItems: "stretch" }}>
          {plans.map((p, i) => (
            <div key={p.tier} className={`reveal reveal-delay-${i+1}`} style={{
              padding: 28,
              background: p.featured ? "linear-gradient(180deg, rgba(99,102,241,.14), rgba(99,102,241,.04))" : "var(--surface)",
              border: p.featured ? "1px solid rgba(129,140,248,.35)" : "1px solid var(--border)",
              borderRadius: 16,
              display: "flex", flexDirection: "column", gap: 18,
              position: "relative",
              boxShadow: p.featured ? "0 0 0 1px rgba(129,140,248,0.12), 0 16px 48px -12px rgba(99,102,241,.30)" : "var(--shadow-sm)",
            }}>
              {p.featured && (
                <div style={{
                  position: "absolute", top: -10, right: 20,
                  background: "linear-gradient(135deg, #6366F1, #4F46E5)", color: "#fff",
                  padding: "3px 10px", fontSize: 10, borderRadius: 999,
                  fontFamily: "var(--font-mono)", letterSpacing: "0.1em",
                  fontWeight: 500,
                }}>MAIS POPULAR</div>
              )}
              <div>
                <div className="eyebrow" style={{ color: p.featured ? "var(--accent)" : "var(--text-3)" }}>{p.tier}</div>
                <div className="row" style={{ alignItems: "baseline", gap: 6, marginTop: 14 }}>
                  <span className="mono" style={{ fontSize: 36, fontWeight: 600, color: "var(--text)", letterSpacing: "-0.025em" }}>{p.price}</span>
                  <span className="caption mono" style={{ color: "var(--text-3)" }}>{p.per}</span>
                </div>
                <p className="body-sm" style={{ color: "var(--text-2)", marginTop: 10 }}>{p.desc}</p>
              </div>
              <a href="pages/contato.html" className={`btn ${p.featured ? "btn-primary" : "btn-ghost"}`}>
                {p.cta}
              </a>
              {(p.tier === "STARTER" || p.tier === "GROWTH") && (
                <div style={{ textAlign: "center", marginTop: -8 }}>
                  <span style={{ fontSize: 12, color: "var(--text-3)", fontFamily: "var(--font-mono)" }}>✓ 14 dias grátis</span>
                </div>
              )}
              <div style={{ height: 1, background: "rgba(255,255,255,0.08)" }}/>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
                {p.feats.map(f => (
                  <li key={f} className="row gap-8" style={{ alignItems: "flex-start", color: "var(--text-2)", fontSize: 13.5 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={p.featured ? "var(--accent)" : "var(--text-3)"} strokeWidth="2.4" style={{ marginTop: 4, flexShrink: 0 }}><path d="M20 6L9 17l-5-5"/></svg>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
function FAQ() {
  const faqs = [
    { q: "O ARCTMIND acessa os dados da minha empresa?", a: "Sim, mas em modo somente leitura. Nunca escrevemos nos seus sistemas. Toda autenticação é com credenciais específicas, com escopo limitado às tabelas/endpoints que o cliente aprova durante o mapping." },
    { q: "Funciona com o meu ERP?", a: "Cobrimos nativamente Totvs Protheus, SAP Business One, Sankhya, Senior, Questor (via agente .exe), HubSpot, RD Station e Salesforce. ERPs sem conector? O Mapping Engine permite plugar qualquer API REST. Para ERPs legados sem API, o agente local roda on-premise com acesso SQL read-only." },
    { q: "Precisa de TI para configurar?", a: "Não. Qualquer analista financeiro ou controller configura em menos de 30 minutos. O wizard tem templates pré-preenchidos por ERP, e o mapeamento é todo em tela. TI é necessária apenas se quiser revisar permissões antes de criar o usuário de leitura no ERP." },
    { q: "Meus dados ficam seguros?", a: "Criptografia AES-256 em trânsito e em repouso. Row-level security por empresa. Dados armazenados em São Paulo (AWS sa-east-1). Conformidade com LGPD. DPA e relatório de penetração disponíveis sob NDA." },
    { q: "Quanto tempo até ver o primeiro alerta?", a: "Menos de 30 minutos após a conexão validada. O sistema começa a processar histórico imediatamente após o mapping ser aprovado e gera o primeiro alerta assim que detecta um desvio relevante (≥ 2 desvios padrão da baseline do cliente)." },
    { q: "Posso cancelar a qualquer momento?", a: "Sim. Sem fidelidade. Sem multa. Cancelamento self-service direto na conta. O acesso permanece ativo até o fim do ciclo já pago." },
    { q: "A IA toma decisões automaticamente?", a: "Não. Princípio inegociável: a IA detecta e alerta, o humano decide e age. Toda recomendação é apenas sugestão. Nenhuma ação é executada sem confirmação humana." },
    { q: "Como vocês precificam impacto em R$?", a: "Cada classe de alerta tem um modelo de impacto: faturamento atrasado considera a média de NF/dia, inadimplência usa o saldo aberto, cancelamentos usam o ticket médio do produto, e assim por diante. Os modelos são calibrados por segmento e auditáveis." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "1fr 2fr", gap: 56 }}>
          <div className="reveal">
            <span className="eyebrow-accent">FAQ</span>
            <h2 className="h-1" style={{ marginTop: 14 }}>Perguntas que <span style={{ color: "var(--text-3)" }}>todo decisor faz.</span></h2>
            <p className="body" style={{ marginTop: 18, color: "var(--text-2)" }}>
              Não encontrou a sua? <a href="pages/contato.html" style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>Fale com o time</a>.
            </p>
          </div>
          <div className="reveal" style={{ borderTop: "1px solid var(--border)" }}>
            {faqs.map((f, i) => (
              <button key={f.q} onClick={() => setOpen(open === i ? -1 : i)} style={{
                all: "unset",
                display: "block",
                width: "100%",
                cursor: "pointer",
                padding: "20px 0",
                borderBottom: "1px solid var(--border)",
                transition: "border-color 200ms",
              }}>
                <div className="row between" style={{ alignItems: "center", gap: 16 }}>
                  <span style={{ fontSize: 16, fontWeight: 500, color: open === i ? "var(--text)" : "var(--text)", textAlign: "left" }}>{f.q}</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                       style={{ transform: open === i ? "rotate(45deg)" : "none", transition: "transform 200ms", flexShrink: 0, color: "var(--accent)" }}>
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                </div>
                {open === i && (
                  <div style={{ marginTop: 12, color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.65, paddingRight: 32, textAlign: "left" }}>
                    {f.a}
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CTA FINAL
// ─────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="section-tinted" style={{ position: "relative", overflow: "hidden" }}>
      {/* linha de luz no topo */}
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, rgba(129,140,248,0.4), transparent)" }}/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(600px at 50% 0%, rgba(99,102,241,0.12), transparent 70%)", pointerEvents: "none" }}/>
      <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.4 }}/>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div className="reveal" style={{ maxWidth: 800, margin: "0 auto" }}>
          <span className="eyebrow-accent">Trial de 14 dias</span>
          <h2 className="h-display" style={{ marginTop: 18 }}>
            Em 30 minutos, o primeiro alerta.<br/>
            <span style={{ color: "var(--text-3)" }}>Em 14 dias, o ROI.</span>
          </h2>
          <p className="body-lg" style={{ marginTop: 24, maxWidth: 640, margin: "24px auto 0" }}>
            Conecte um ERP real. Receba alertas reais. Veja impacto financeiro real — antes de pagar qualquer coisa.
          </p>
          <div className="row center gap-12" style={{ justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
            <a href="pages/contato.html" className="btn btn-primary btn-lg">
              Começar grátis · 14 dias
              <svg className="arr" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a href="pages/como-funciona.html" className="btn btn-ghost btn-lg">
              Ver demonstração
            </a>
          </div>
          <div className="row center gap-24" style={{ justifyContent: "center", marginTop: 28, color: "var(--text-3)", fontSize: 13, flexWrap: "wrap" }}>
            <span className="row gap-6" style={{ alignItems: "center" }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
              Sem cartão de crédito
            </span>
            <span className="row gap-6" style={{ alignItems: "center" }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
              Setup em &lt; 30 min
            </span>
            <span className="row gap-6" style={{ alignItems: "center" }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
              Cancele quando quiser
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// expose for other pages
Object.assign(window, {
  HeroAlertCard, HeroDashboard, HeroDashboardMobile, ProblemSection, HowItWorks, Processes,
  Connectors, Proof, Principle, Plans, FAQ, FinalCTA,
  CONNECTORS, ProcessIcon, HEADLINES,
});