// VeryPay — Manifesto + Problem
function Manifesto() {
  const dividerRef = useRef(null);
  const dIn = useInView(dividerRef);
  return (
    <section id="manifesto" className="dark halo-magenta" style={{ overflow: "hidden" }}>
      <div className="container">
        <SectionMeta label="MANIFESTO" index="02" />
        <h2 className="display" style={{ maxWidth: "14ch" }}>
          <Reveal>
            <span>A </span>
            <span className="text-magenta">fagulha</span>
          </Reveal>
          <br />
          <Reveal delay={0.1}>
            <span>que </span>
            <UnderlineMagenta>move.</UnderlineMagenta>
          </Reveal>
        </h2>

        <div className="manifesto-grid">
          <Reveal delay={0.15}>
            <p>
              <span className="num">01 / TRANSAÇÃO</span>
              Toda venda começa com uma fagulha. Um cliente entra. Um produto sai.
              Um valor se move de um ponto a outro.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <p>
              <span className="num">02 / POSTURA</span>
              A VeryPay vive nessa fagulha. Não para entregar a menor taxa do mercado —
              taxa baixa qualquer adquirente entrega.
            </p>
          </Reveal>
          <Reveal delay={0.45}>
            <p>
              <span className="num">03 / MÉTODO</span>
              Para entregar a operação inteira: maquininha que funciona, conta que organiza,
              relatório que pensa, time que atende.
            </p>
          </Reveal>
        </div>

        <div ref={dividerRef} className={"manifesto-divider" + (dIn ? " in" : "")}></div>
      </div>
    </section>
  );
}

function UnderlineMagenta({ children }) {
  const ref = useRef(null);
  const inView = useInView(ref, { threshold: 0.5 });
  return (
    <span ref={ref} className={"underline-magenta" + (inView ? " in" : "")}>
      {children}
    </span>
  );
}

function Problem() {
  const cards = [
    {
      n: "01",
      title: "Taxa que parece justa, mas não é.",
      body: "Pro seu perfil, 2,89% pode ser 30% mais caro que o melhor produto disponível. Adquirente nenhum vai te avisar."
    },
    {
      n: "02",
      title: "Antecipação que custa um carro.",
      body: "Antecipar tudo, sempre, sem critério, dá imposto de 3% ao mês sobre seu faturamento."
    },
    {
      n: "03",
      title: "Split que economiza, mas ninguém configura.",
      body: "Divide receita com sócio ou fornecedor? Manual sai caro. Split automático elimina erro e economiza horas."
    },
    {
      n: "04",
      title: "Relatório que ninguém lê.",
      body: "O adquirente entrega 20 PDFs/mês. Nenhum te diz o que fazer. Você precisa de quem leia por você."
    }
  ];

  return (
    <section className="darker">
      <div className="container">
        <SectionMeta label="O QUE NINGUÉM TE CONTA" index="03" />
        <h2 className="display problem-title">
          <Reveal>A maioria dos negócios</Reveal>
          <br />
          <Reveal delay={0.1}>paga <span className="accent">taxa demais</span></Reveal>
          <br />
          <Reveal delay={0.2}>e não sabe.</Reveal>
        </h2>

        <div className="problem-grid">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={0.1 * i} className={`d${i+1}`}>
              <div className="problem-card">
                <span className="corner-slash">/</span>
                <span className="num">{c.n}</span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Manifesto, Problem, UnderlineMagenta });