// sections.jsx — page sections for the Infoviz site.
// Each section is a self-contained component; App composes them.

// ─── data ───────────────────────────────────────────────────────────────────
const PARTNERS = [
  { name: "Tiago Marques",  role: "Diretor Comercial", years: "15+", photo: "fotos/foto_tiago.png"  },
  { name: "Saulo Teixeira", role: "Diretor de Operações", years: "25+", photo: "fotos/foto_saulo.png"  },
  { name: "Marcos Falcão",  role: "Diretor de Tecnologia", years: "15+", photo: "fotos/foto_marcos.png" },
];

const SERVICES = [
  {
    icon: "IconAuto",
    title: "Automação de Processos",
    desc: "Fluxos repetitivos viram pipelines inteligentes que aprendem a cada execução, eliminando trabalho operacional do seu time.",
    tag: "RPA + LLM",
  },
  {
    icon: "IconCustom",
    title: "Aplicações Customizadas",
    desc: "Software sob medida para problemas que produtos prontos não conseguem resolver, desenhado em torno da sua operação.",
    tag: "Full-stack · IA nativa",
  },
  {
    icon: "IconDash",
    title: "Dashboards Interativos",
    desc: "Visualizações em tempo real que respondem em linguagem natural — pergunte, e o painel reorganiza a resposta.",
    tag: "Tempo real",
  },
  {
    icon: "IconReport",
    title: "Relatórios Personalizados",
    desc: "Documentos gerados sob demanda com narrativa escrita por IA a partir dos seus dados — pronto para enviar ao cliente.",
    tag: "Geração via LLM",
  },
  {
    icon: "IconConsult",
    title: "Consultoria em Dados",
    desc: "Estratégia, arquitetura e governança para destravar o uso de dados em toda a empresa, do ETL ao boardroom.",
    tag: "Arquitetura · MLOps",
  },
  {
    icon: "IconIntegrate",
    title: "Integração de Sistemas",
    desc: "APIs, conectores e ETLs que conversam com qualquer stack — inclusive os sistemas legados que ninguém mais quer tocar.",
    tag: "Multi-stack",
  },
];

const BENEFITS = [
  {
    title: "Redução de Tempo",
    metric: "−87%",
    metricLabel: "Tempo médio por entrega",
    before: { label: "ANTES", value: "Semanas de trabalho manual para fechar um relatório operacional." },
    after:  { label: "COM INFOVIZ", value: "Resultado em minutos. A IA assume o trabalho pesado e o time decide." },
  },
  {
    title: "Personalização",
    metric: "1:1",
    metricLabel: "Feito sob a sua medida",
    before: { label: "ANTES", value: "Software genérico que força a empresa a mudar o próprio processo." },
    after:  { label: "COM INFOVIZ", value: "Solução desenhada em torno da sua dor, do seu fluxo e da sua linguagem." },
  },
  {
    title: "Disponibilidade",
    metric: "24/7",
    metricLabel: "Sempre disponível",
    before: { label: "ANTES", value: "Equipe disponível das 9 às 18, com pausas, férias e fila de demandas." },
    after:  { label: "COM INFOVIZ", value: "Sistemas operando ininterruptamente, todos os dias, sem janela de espera." },
  },
  {
    title: "Ausência de Erros",
    metric: "0%",
    metricLabel: "Erro manual",
    before: { label: "ANTES", value: "Erros de digitação, planilhas quebradas, retrabalho e auditorias intermináveis." },
    after:  { label: "COM INFOVIZ", value: "Validação automática em cada etapa — o sistema corrige antes de você ver." },
  },
];

const CASES = [
  { tag: "VOXMEDIA",    title: "Relatórios de Marketing Digital", meta: "Automação de coletas · -80% tempo",  viz: "bars"  },
  { tag: "VOXFORTIS",  title: "Canal de Denúncias e Escuta Ativa", meta: "Escuta, triagem e avaliação · –34% custo", viz: "flow"  },
];

// ─── Nav ────────────────────────────────────────────────────────────────────
function Nav({ onContact }) {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  return (
    <nav className="nav" data-screen-label="Nav">
      <a className="nav-logo" href="#top" onClick={close}>
        <img src="logo/infoviz_logo.png" alt="Infoviz" style={{ height: 36 }} />
      </a>

      <div className={"nav-links" + (open ? " open" : "")}>
        <a href="#sobre" onClick={close}>Sobre</a>
        <a href="#servicos" onClick={close}>Serviços</a>
        <a href="#beneficios" onClick={close}>Benefícios</a>
        <a href="#cases" onClick={close}>Cases</a>
        <button className="nav-cta nav-cta-mobile" onClick={() => { close(); onContact(); }}>
          Entrar em contato
        </button>
      </div>

      <div className="nav-right">
        <button className="nav-cta" onClick={onContact}>Entrar em contato</button>
        <button className="nav-hamburger" aria-label={open ? "Fechar menu" : "Abrir menu"}
                onClick={() => setOpen(!open)}>
          <span style={{ transform: open ? "rotate(45deg) translate(4px, 4px)" : "none" }} />
          <span style={{ opacity: open ? 0 : 1 }} />
          <span style={{ transform: open ? "rotate(-45deg) translate(4px, -4px)" : "none" }} />
        </button>
      </div>
    </nav>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────────
function Hero({ heroVariant, accent, accent2 }) {
  return (
    <header id="top" className="hero" data-screen-label="Hero">
      <HeroCanvas variant={heroVariant} accent={accent} accent2={accent2} />
      <div className="hero-fade" />

      <div className="hero-inner">
        <span className="hero-tag"><i />Estúdio de IA aplicada · desde 2025</span>
        <h1 className="h-display">
          Quando o software de<br />prateleira <em>não responde,</em><br />a gente constrói a resposta.
        </h1>
        <p className="lede hero-sub">
          A Infoviz desenha soluções sob medida para dores que produtos prontos não resolvem.
          Inteligência artificial em cada etapa — do desenho à manutenção — para você entregar mais com menos esforço.
        </p>
        <div className="hero-actions">
          <a href="#servicos" className="btn btn-primary">
            Ver o que fazemos <span className="btn-arrow">↗</span>
          </a>
          <a href="#contato" className="btn btn-ghost">
            Conversar com um sócio
          </a>
        </div>
      </div>

      <div className="hero-stats">
        <div className="hero-stat"><b>90%</b>mais rápido que a concorrência</div>
        <div className="hero-stat"><b>100%</b>projetos com IA embarcada</div>
        <div className="hero-stat"><b>24/7</b>operação contínua</div>
        <div className="hero-stat" style={{ marginLeft: "auto" }}>
          <span style={{ display: "block", marginBottom: 4 }}>↓ scroll</span>
        </div>
      </div>
    </header>
  );
}

// ─── Sobre ─────────────────────────────────────────────────────────────────
function Sobre() {
  return (
    <section id="sobre" className="section" data-screen-label="Sobre">
      <div className="wrap">
        <div className="section-num reveal">SEÇÃO · 01 / SOBRE</div>
        <div className="section-head">
          <h2 className="h-section reveal">
            Resolvemos o que ninguém<br />resolveu ainda.
          </h2>
          <div className="reveal" data-delay="1">
            <p className="lede" style={{ marginBottom: 18 }}>
              A Infoviz nasceu para atender empresas que conhecem a própria dor — mas não encontram no mercado
              um produto pronto que dê conta dela.
            </p>
            <p className="lede" style={{ opacity: .7 }}>
              Combinamos engenharia de dados, design de produto e inteligência artificial em
              cada projeto. Da primeira conversa à manutenção, a IA acompanha o processo —
              acelerando a entrega, mantendo o padrão e liberando o seu time para o que importa.
            </p>
          </div>
        </div>

        <div className="section-num reveal" style={{ marginTop: 80 }}>SÓCIOS · TRÊS PESSOAS, UMA OBSESSÃO</div>
        <div className="sobre-grid">
          {PARTNERS.map((p, i) => (
            <article key={p.name} className="partner reveal" data-delay={i + 1}>
              <div className="partner-photo">
                <img src={p.photo} alt={p.name} />
              </div>
              <div className="partner-name">{p.name}</div>
              <div className="partner-role">{p.role}</div>
              <div className="partner-meta">
                <div className="partner-years"><b>{p.years}</b>anos de carreira</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-faint)" }}>
                  0{i + 1} / 03
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Serviços ──────────────────────────────────────────────────────────────
const ICON_MAP = {
  IconAuto: () => <IconAuto />,
  IconCustom: () => <IconCustom />,
  IconDash: () => <IconDash />,
  IconReport: () => <IconReport />,
  IconConsult: () => <IconConsult />,
  IconIntegrate: () => <IconIntegrate />,
};

function Servicos({ layout }) {
  const containerClass =
    layout === "list" ? "services-list" :
    layout === "cards" ? "services-cards" :
    "services-grid";

  return (
    <section id="servicos" className="section" data-screen-label="Servicos" style={{ background: "var(--surface)" }}>
      <div className="wrap">
        <div className="section-num reveal">SEÇÃO · 02 / SERVIÇOS</div>
        <div className="section-head">
          <h2 className="h-section reveal">Seis frentes.<br />Uma mesma camada de IA.</h2>
          <p className="lede reveal" data-delay="1">
            Cada entrega é desenhada do zero, mas todas compartilham a mesma espinha dorsal:
            inteligência artificial trabalhando do design à manutenção, escondida onde precisa estar e visível onde gera valor.
          </p>
        </div>

        <div className={containerClass}>
          {SERVICES.map((s, i) => {
            const Icon = ICON_MAP[s.icon];
            const num = `0${i + 1}`;
            return (
              <article key={s.title} className="service reveal" data-delay={(i % 3) + 1}>
                {layout === "list" && <div className="service-num">{num}</div>}
                <div className="service-icon"><Icon /></div>
                <div className="service-body">
                  <h3 className="service-title">{s.title}</h3>
                  <p className="service-desc">{s.desc}</p>
                </div>
                <div className="service-tag">{s.tag}</div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Benefícios (with before/after slider) ─────────────────────────────────
function Beneficios() {
  const [idx, setIdx] = React.useState(0);
  const [clip, setClip] = React.useState(0);
  const compareRef = React.useRef(null);
  const viewerRef = React.useRef(null);

  const selectBenefit = (i) => {
    setIdx(i);
    if (window.innerWidth < 980) {
      setTimeout(() => {
        viewerRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 50);
    }
  };

  const b = BENEFITS[idx];

  // pointer drag on the compare zone — knob follows the mouse
  const onPointerDown = (e) => {
    const el = compareRef.current;
    if (!el) return;
    el.setPointerCapture?.(e.pointerId);
    const move = (ev) => {
      const r = el.getBoundingClientRect();
      const pct = Math.max(0, Math.min(100, ((ev.clientX - r.left) / r.width) * 100));
      setClip(pct);
    };
    move(e);
    const up = () => {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", up);
    };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
  };

  // auto-cycle hint: revela o depois da esquerda para direita e volta
  React.useEffect(() => {
    let cancelled = false;
    setClip(0);
    let t1 = setTimeout(() => {
      if (cancelled) return;
      let v = 0;
      const tick = setInterval(() => {
        v += 2;
        if (v >= 50) { clearInterval(tick); setClip(50); }
        else setClip(v);
      }, 30);
    }, 1100);
    return () => { cancelled = true; clearTimeout(t1); };
  }, [idx]);

  return (
    <section id="beneficios" className="section" data-screen-label="Beneficios">
      <div className="wrap">
        <div className="section-num reveal">SEÇÃO · 03 / BENEFÍCIOS</div>
        <div className="section-head">
          <h2 className="h-section reveal">Arraste para ver<br />o que muda com IA.</h2>
          <p className="lede reveal" data-delay="1">
            Cada benefício começa mostrando o cenário atual. Arraste para a direita para revelar o que muda com a Infoviz — ou escolha outro benefício na lista.
          </p>
        </div>

        <div className="benefits-wrap">
          {/* left: list */}
          <div className="benefit-list">
            {BENEFITS.map((bn, i) => (
              <div
                key={bn.title}
                className={"benefit-item" + (i === idx ? " active" : "")}
                onClick={() => selectBenefit(i)}
              >
                <span className="benefit-item-num">0{i + 1}</span>
                <span className="benefit-item-title">{bn.title}</span>
                <span className="benefit-arrow"><IconArrow size={20} /></span>
              </div>
            ))}
          </div>

          {/* right: viewer */}
          <div className="benefit-viewer" ref={viewerRef}>
            <div className="benefit-viewer-head">
              <div>
                <div className="benefit-viewer-title">{b.title}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-faint)", letterSpacing: ".14em", marginTop: 4 }}>
                  IMPACTO MEDIDO
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="benefit-viewer-metric">{b.metric}</div>
                <small>{b.metricLabel}</small>
              </div>
            </div>

            <div
              className="compare"
              ref={compareRef}
              style={{ "--clip": clip + "%" }}
              onPointerDown={onPointerDown}
            >
              {/* ANTES — base, ocupa tudo, visível à direita do divisor */}
              <div className="compare-pane compare-before">
                <span className="compare-label">{b.before.label}</span>
                <div className="compare-value">{b.before.value}</div>
              </div>
              {/* DEPOIS — overlay clipado, aparece à esquerda ao arrastar */}
              <div className="compare-pane compare-after">
                <span className="compare-label">{b.after.label}</span>
                <div className="compare-value">{b.after.value}</div>
              </div>
              <div className="compare-handle">
                <div className="compare-knob" style={{ left: 0 }}>
                  <IconDrag />
                </div>
              </div>
            </div>
            <div className="compare-hint">↔ ARRASTE PARA COMPARAR</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Cases ─────────────────────────────────────────────────────────────────
function Cases({ accent, accent2 }) {
  return (
    <section id="cases" className="section" data-screen-label="Cases" style={{ background: "var(--surface)" }}>
      <div className="wrap">
        <div className="section-num reveal">SEÇÃO · 04 / CASES</div>
        <div className="section-head">
          <h2 className="h-section reveal">Trabalhos<br />que entregamos.</h2>
          <p className="lede reveal" data-delay="1">
            Um recorte dos projetos onde a combinação custom + IA mudou a operação dos nossos clientes.
            Detalhes sob NDA — peça uma conversa para conhecer cada um.
          </p>
        </div>

        <div className="cases-grid">
          {CASES.map((c, i) => (
            <article key={c.title} className="case reveal" data-delay={(i % 2) + 1}>
              <div className="case-viz">
                <CaseViz variant={c.viz} accent={accent} accent2={accent2} />
              </div>
              <div className="case-body">
                <div className="case-tag">{c.tag}</div>
                <h3 className="case-title">{c.title}</h3>
                <div className="case-meta">{c.meta}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Contato ───────────────────────────────────────────────────────────────
function Contato({ contactRef }) {
  const [form, setForm] = React.useState({ nome: "", email: "", mensagem: "" });
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`[Site] Contato de ${form.nome || "visitante"}`);
    const body = encodeURIComponent(
      `Nome: ${form.nome}\nE-mail: ${form.email}\n\n${form.mensagem}`
    );
    window.location.href = `mailto:contato@infoviz.com.br?subject=${subject}&body=${body}`;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section id="contato" className="section" data-screen-label="Contato" ref={contactRef}>
      <div className="wrap">
        <div className="section-num reveal">SEÇÃO · 05 / CONTATO</div>
        <div className="section-head">
          <h2 className="h-section reveal">Conte a sua dor.<br />Vamos responder<br />em 24 horas.</h2>
          <p className="lede reveal" data-delay="1">
            Escreva por aqui, mande um e-mail ou ligue direto. Quem responde é um dos sócios — não há atendente de meio de caminho.
          </p>
        </div>

        <div className="contato-wrap">
          <div className="contact-info">
            <div className="contact-block reveal">
              <div className="contact-block-label">E-mail</div>
              <a className="contact-block-value" href="mailto:contato@infoviz.com.br">
                contato@infoviz.com.br <span className="arrow">↗</span>
              </a>
            </div>
            <div className="contact-block reveal" data-delay="1">
              <div className="contact-block-label">Telefone · WhatsApp</div>
              <a className="contact-block-value" href="tel:+5581999632283">
                +55 81 99963-2283 <span className="arrow">↗</span>
              </a>
            </div>
            <div className="contact-block reveal" data-delay="2">
              <div className="contact-block-label">Resposta média</div>
              <div className="contact-block-value" style={{ cursor: "default" }}>
                em até 24h úteis
              </div>
            </div>
            <div className="contact-block reveal" data-delay="3" style={{ borderTop: 0, paddingTop: 0, marginTop: -10 }}>
              <p style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".06em", lineHeight: 1.7, color: "var(--ink-faint)", textTransform: "uppercase" }}>
                Recife · Pernambuco · Brasil<br />
                Atuação nacional, remota e híbrida.
              </p>
            </div>
          </div>

          <form className="form reveal" data-delay="1" onSubmit={submit}>
            <div className="form-row">
              <label htmlFor="nome">Seu nome</label>
              <input id="nome" type="text" placeholder="Como podemos te chamar"
                     value={form.nome} required
                     onChange={(e) => setForm({ ...form, nome: e.target.value })} />
            </div>
            <div className="form-row">
              <label htmlFor="email">E-mail</label>
              <input id="email" type="email" placeholder="voce@empresa.com"
                     value={form.email} required
                     onChange={(e) => setForm({ ...form, email: e.target.value })} />
            </div>
            <div className="form-row">
              <label htmlFor="msg">Conte sua dor</label>
              <textarea id="msg" placeholder="Onde o software pronto não entrega? Onde o seu time perde tempo? Conte aqui."
                        value={form.mensagem} required
                        onChange={(e) => setForm({ ...form, mensagem: e.target.value })} />
            </div>
            <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start" }}>
              Enviar mensagem <span className="btn-arrow">↗</span>
            </button>
          </form>
        </div>

        <div className={"toast" + (sent ? " show" : "")}>
          Abrindo seu cliente de e-mail…
        </div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-mark">INFOVIZ</div>
      <div className="footer-meta">
        © {new Date().getFullYear()} INFOVIZ<br />
        CONTATO@INFOVIZ.COM.BR<br />
        +55 81 99963-2283<br />
        SOLUÇÕES EM DADOS.
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Sobre, Servicos, Beneficios, Cases, Contato, Footer });