import { useEffect, useState } from "preact/hooks";

const steps = [
  {
    title: "Pedido único, múltiplos laboratórios",
    text: "A farmácia adiciona itens de diferentes fornecedores e o motor consolida fretes e SLAs por UF.",
  },
  {
    title: "Roteamento e conformidade",
    text: "Validação de lote, validade e regras ANVISA antes de liberar a ordem para cada laboratório parceiro.",
  },
  {
    title: "Faturamento inteligente",
    text: "Split automático e emissão de NF com impostos estaduais já calculados para cada remessa.",
  },
  {
    title: "Status em tempo real",
    text: "Acompanhamento unificado no painel da farmácia e webhooks para ERPs e aplicativos white-label.",
  },
];

export default function FlowTicker() {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setActive((prev) => (prev + 1) % steps.length);
    }, 3600);
    return () => clearInterval(id);
  }, []);

  return (
    <div class="ticker" aria-live="polite">
      {steps.map((step, index) => (
        <div class={`ticker-step ${index === active ? "active pulse" : ""}`} key={step.title}>
          <span class="ticker-dot" aria-hidden="true" />
          <div>
            <strong>{step.title}</strong>
            <p>{step.text}</p>
          </div>
        </div>
      ))}
    </div>
  );
}