import type { CSSProperties } from "react";
import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
import { TELAS } from "../data/telas";
import Telas from "./Telas";

/*
  Como funciona, em quatro passos: vender, produzir, cobrar e vender online.
  Texto de um lado, as telas de verdade do outro, soltas e passando como um
  gif. Cada passo leva uma cor da tira.
*/

const PASSOS = [
  {
    etapa: "Vender",
    cena: "vender",
    cor: "var(--acento-1)",
    titulo: "O orçamento sai da conversa.",
    texto:
      "Cola a mensagem ou o print do WhatsApp e a IA monta o orçamento com os seus custos. Você confere, manda o link e o cliente aprova pelo celular.",
    itens: ["Orçamento com IA e custo real", "Aprovação pelo link, no celular", "Chance de fechar e quem abriu o link"],
    legendas: ["A lista de orçamentos, por situação.", "O orçamento aberto, com custo e margem.", "O pedido que nasceu da aprovação."],
  },
  {
    etapa: "Produzir",
    cena: "produzir",
    cor: "var(--acento-4)",
    titulo: "A fila sai da sua cabeça.",
    texto:
      "Cada pedido fica num quadro, na etapa em que está, com ficha de produção e cronômetro por item. Os insumos ficam ligados ao que foi vendido, então o estoque bate.",
    itens: ["Quadro por etapa, com prazo", "Ficha e cronômetro por item", "Estoque com baixa automática"],
    legendas: ["O quadro de produção, etapa por etapa.", "A agenda com todos os prazos.", "O estoque de insumos e acabados."],
  },
  {
    etapa: "Cobrar",
    cena: "cobrar",
    cor: "var(--acento-3)",
    titulo: "O mês fecha em número, não no achismo.",
    texto:
      "Contas a receber e a pagar, fluxo de caixa que se alimenta dos pedidos, DRE por categoria, ponto de equilíbrio e comissões. Pix no balcão e link de pagamento pra quem está longe.",
    itens: ["Fluxo de caixa e DRE", "Ponto de equilíbrio do mês", "Pix no balcão e link de pagamento"],
    legendas: ["O fluxo de caixa, dia a dia.", "O DRE do mês, por categoria.", "O ponto de equilíbrio, batido ou não."],
  },
  {
    etapa: "Vender online",
    cena: "loja",
    cor: "var(--acento-2)",
    titulo: "A loja vende enquanto a máquina roda.",
    texto:
      "Loja virtual no seu domínio, com carrinho, frete e pagamento prontos. O pedido que entra por ela cai na mesma fila de produção e no mesmo financeiro.",
    itens: ["No seu domínio, com a sua marca", "Frete e pagamento no carrinho", "Pedido direto na fila de produção"],
    legendas: ["A loja, no endereço da gráfica.", "A página do produto, com as opções.", "O carrinho, com frete e pagamento."],
  },
];

export default function ComoFunciona() {
  return (
    <section id="sistema" className="lp-secao lp-secao--apoio">
      <div className="lp-wrap">
        <div className="lp-cabeca" data-revela>
          <p className="lp-rotulo">Como funciona</p>
          <h2 className="lp-titulo lp-titulo--h2 lp-titulo--centro">Um sistema só, no lugar de cinco planilhas.</h2>
          <p className="lp-lede lp-lede--centro">
            O pedido que entra pelo WhatsApp ou pela loja anda pela produção, cobra e fecha o mês sem sair do lugar.
          </p>
        </div>

        <div className="lp-passos">
          {PASSOS.map((passo, i) => {
            const quadros = TELAS[passo.cena] ?? [];
            return (
              <div key={passo.etapa} className={`lp-passo${i % 2 ? " lp-passo--invertido" : ""}`} style={{ "--cor": passo.cor } as CSSProperties} data-revela>
                <div className="lp-passo-texto">
                  <p className="lp-passo-etapa">
                    <span className="lp-passo-numero">{String(i + 1).padStart(2, "0")}</span>
                    {passo.etapa}
                  </p>
                  <h3>{passo.titulo}</h3>
                  <p>{passo.texto}</p>
                  <ul className="lp-passo-lista">
                    {passo.itens.map((item) => (
                      <li key={item}>
                        <CheckCircle size={20} weight="fill" aria-hidden="true" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                {quadros.length ? (
                  <div className="lp-passo-tela">
                    <Telas quadros={quadros} legendas={passo.legendas} alt={`${passo.etapa}: ${passo.titulo}`} tamanhos="(max-width: 960px) 100vw, 700px" />
                  </div>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}