/* global React, Reveal, SplitText, MagneticCta, ArrowGlyph, Counter */

/* ============================================================
   PROBLEM
   ============================================================ */
function Problem() {
  return (
    <section className="problem">
      <div className="container problem-body">
        <Reveal as="div">
          <span className="eyebrow" style={{ marginBottom: 36, display: "inline-flex" }}>O problema real</span>
        </Reveal>
        <Reveal as="p" delay={100}>
          Você sabe que precisa de um site.
        </Reveal>
        <Reveal as="p" delay={200} className="muted-strike">
          Mas já tentou orçar e ouviu <span style={{ color: "var(--ink)" }}>R$ 3.000</span>, <span style={{ color: "var(--ink)" }}>R$ 5.000</span>, <span style={{ color: "var(--ink)" }}>R$ 8.000</span>.
        </Reveal>
        <Reveal as="p" delay={300} className="muted-strike">
          Já tentou fazer sozinho e parou no meio.
        </Reveal>
        <Reveal as="p" delay={400} className="muted-strike">
          Já tentou freelancer e ficou meses esperando algo que nunca ficou bom.
        </Reveal>
        <Reveal as="p" delay={550}>
          Enquanto isso, seu concorrente aparece <em className="accent-word">primeiro no Google</em>.<br />
          E quem busca pelo seu serviço hoje encontra ele, não você.
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   VITOR
   ============================================================ */
function Vitor() {
  return (
    <section className="vitor">
      <div className="container">
        <div className="vitor-grid">
          <Reveal>
            <div className="vitor-photo">
              <img src="assets/vitor.png" alt="Vitor Tomasi, fundador da Athera Tecnologia" />
              <span className="tag">Vitor Tomasi · Fundador</span>
            </div>
          </Reveal>
          <Reveal delay={150} className="vitor-body">
            <span className="eyebrow">Quem está por trás disso</span>
            <h3>
              Estrutura.<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Não sorte.</span>
            </h3>
            <p>
              <b style={{ fontWeight: 600, color: "var(--ink)" }}>Vitor Tomasi.</b> Engenheiro de Software formado pela Católica de Santa Catarina.
            </p>
            <p>
              Enquanto o mercado entregava sites bonitos e vazios, ele estruturava ecossistemas digitais que sustentavam empresas reais em crescimento — incluindo a base tecnológica de uma das maiores agências de Joinville.
            </p>
            <p className="strong-line">Não foi sorte. Foi estrutura.</p>
            <p>
              Antes de "automação", "SaaS" e "experiência digital" virarem moda, ele já conectava desenvolvimento, infraestrutura, tráfego e performance em um único sistema.
            </p>
            <p style={{ fontStyle: "italic", color: "var(--ink)" }}>
              A tecnologia nunca foi o fim. Sempre foi o meio.
            </p>
            <div className="vitor-sig">
              <span className="name">Vitor Tomasi</span>
              <span className="role">Fundador · Athera</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   MANIFESTO
   ============================================================ */
function Manifesto() {
  const pillars = [
    { n: "01", t: "Estrutura", d: "Sites construídos para crescer, não só para existir." },
    { n: "02", t: "Performance", d: "Velocidade, SEO técnico e conversão desde o primeiro pixel." },
    { n: "03", t: "Local", d: "Joinville/SC. Atendimento próximo, sem fuso, sem call center." },
    { n: "04", t: "Transparência", d: "Prévia antes do pagamento. Você só paga se aprovar." },
  ];
  return (
    <section className="manifesto">
      <div className="container">
        <div className="manifesto-head">
          <div>
            <Reveal>
              <span className="eyebrow">A Athera</span>
            </Reveal>
            <Reveal as="h2" delay={100}>
              A Athera nasceu da <span className="accent">inconformidade.</span>
            </Reveal>
          </div>
          <Reveal delay={200} className="manifesto-body">
            <p>
              O mercado estava cheio de sites bonitos. E vazios de estratégia.
            </p>
            <p>
              Design sem estrutura. Marketing sem sistema. Tráfego sem conversão.
            </p>
            <p style={{ color: "var(--ink)" }}>
              A Athera existe para quebrar esse padrão. Não como uma agência. <span style={{ fontStyle: "italic" }}>Como uma empresa de construção digital.</span>
            </p>
          </Reveal>
        </div>

        <div className="pillars">
          {pillars.map((p, i) => (
            <Reveal key={p.n} className="pillar" delay={i * 120}>
              <span className="num">{p.n}</span>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
function How() {
  const steps = [
    { n: "01", t: "Você manda um briefing rápido.", d: "Pelo WhatsApp. Conta sobre seu negócio, o que você vende, para quem. Em até 15 minutos.", b: "≤ 15 min" },
    { n: "02", t: "Em até 24h, você recebe a prévia.", d: "Esboço funcional já no domínio. Você abre, navega e decide. Site final publicado em até 5 dias úteis.", b: "24 horas · prévia" },
    { n: "03", t: "Aprovou? Aí você paga.", d: "R$ 197, parcela única. Não aprovou? Você não paga nada. Sem letras miúdas.", b: "R$ 197 · única" },
  ];
  return (
    <section id="como" className="how">
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Como funciona</span></Reveal>
            <Reveal as="h2" className="display-2" delay={100} style={{ marginTop: 16 }}>
              Três passos. <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Sem letras miúdas.</span>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lead">
              O processo é desenhado para você decidir <em>depois</em> de ver o resultado. A gente arrisca o tempo, você arrisca zero.
            </p>
          </Reveal>
        </div>

        <div className="how-steps">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="step" delay={i * 140}>
              <span className="num">
                {s.n.split("").map((c, k) => k === 1 ? <em key={k}>{c}</em> : c)}
              </span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <span className="badge">{s.b}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

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