// Home page
function PixelStack() {
  const p = [
    ".rrrrrr..",
    ".r....r..",
    ".r.cc.r..",
    ".r.cc.r..",
    ".r....r..",
    ".rrrrrr..",
    "...dd....",
    ".dddddd..",
  ].map(s => s.slice(0, 8));
  const cells = [];
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      const ch = p[y] && p[y][x];
      let cls = "";
      if (ch === "r") cls = "on";
      else if (ch === "c") cls = "cream";
      else if (ch === "d") cls = "dim";
      cells.push(cls);
    }
  }
  return (
    <div className="pixel-stack" aria-hidden="true">
      {cells.map((c, i) => <span key={i} className={c} />)}
    </div>
  );
}

function useTypewriter(fullText, speed = 55, startDelay = 300) {
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    setShown(0);
    let t;
    const start = setTimeout(() => {
      const tick = () => {
        setShown((s) => {
          if (s >= fullText.length) return s;
          t = setTimeout(tick, speed);
          return s + 1;
        });
      };
      tick();
    }, startDelay);
    return () => { clearTimeout(start); clearTimeout(t); };
  }, [fullText, speed, startDelay]);
  return shown;
}

function TypedHeadline() {
  const segments = [["Tecnologia que ", false], ["resolve", true], [" o problema — não só contorna.", false]];
  const full = segments.map((s) => s[0]).join("");
  const shown = useTypewriter(full, 55, 350);
  const done = shown >= full.length;

  let remaining = shown;
  const out = [];
  for (let i = 0; i < segments.length; i++) {
    const [txt, isAccent] = segments[i];
    const take = Math.min(txt.length, remaining);
    remaining -= take;
    const piece = txt.slice(0, take);
    if (isAccent) {
      out.push(<span key={i} className="accent">{piece}</span>);
    } else {
      out.push(<React.Fragment key={i}>{piece}</React.Fragment>);
    }
    if (remaining <= 0) break;
  }
  return (
    <>
      {out}
      <span className={"type-caret " + (done ? "blink" : "")} aria-hidden="true" />
    </>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow" style={{ color: "#c9c7bd" }}>Tecnologia · ERP · Fiscal · Automação</span>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              <TypedHeadline />
            </h1>
            <p className="lede" style={{ marginTop: 24 }}>
              Suporte de TI, implantação de ERP, automação comercial e emissão fiscal
              para pequenas e médias empresas em Rio Branco e região. Atendimento direto,
              sem enrolação.
            </p>
            <div className="hero-actions">
              <a className="btn btn-wa" href={WA_LINK} target="_blank" rel="noreferrer">
                <WhatsAppIcon /> Falar no WhatsApp agora
              </a>
              <a className="btn btn-ghost" href="#/solucoes" style={{ color: "#fff", borderColor: "#fff" }}
                 onMouseEnter={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "#0E0F12"; }}
                 onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#fff"; }}>
                Ver soluções →
              </a>
            </div>
            <div className="hero-meta">
              <div>
                <div className="k">Desde</div>
                <div className="v">2018</div>
              </div>
              <div>
                <div className="k">Base</div>
                <div className="v">Rio Branco · AC</div>
              </div>
              <div>
                <div className="k">Resposta</div>
                <div className="v">Mesmo dia</div>
              </div>
            </div>
          </div>
          <div>
            <PixelStack />
          </div>
        </div>
      </div>
    </section>
  );
}

const SOLUTIONS = [
  {
    n: "01",
    t: "Suporte Técnico em TI",
    d: "Resolução de problemas de rede, computadores, impressoras e periféricos. Diagnóstico prático, sem achismo.",
    pat: ["#.##", "####", "####", ".##."],
  },
  {
    n: "02",
    t: "Implantação e Suporte de ERP",
    d: "Sistema no ar, equipe treinada e processos que rodam. Acompanhamento contínuo para o dia a dia.",
    pat: ["rrrr", "r..r", "r..r", "rrrr"],
  },
  {
    n: "03",
    t: "Automação Comercial",
    d: "PDV, balanças, leitores e impressoras integrados ao seu ERP. Venda rápida, estoque correto.",
    pat: ["#..#", ".##.", ".##.", "#..#"],
  },
  {
    n: "04",
    t: "Emissão Fiscal",
    d: "NF-e, NFC-e, SAT e obrigações acessórias configuradas corretamente. Nada de multa por bobeira.",
    pat: ["####", "r..r", "r..r", "####"],
  },
];

function Solutions() {
  return (
    <section className="section" id="solucoes">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">O que fazemos</span>
            <h2 className="h-section">Quatro frentes. Um só foco: sua operação rodando bem.</h2>
          </div>
          <a className="btn btn-ghost" href="#/solucoes">Ver todas as soluções</a>
        </div>
        <div className="sol-grid">
          {SOLUTIONS.map((s) => (
            <a key={s.n} href="#/solucoes" className="sol-card">
              <div className="num">{s.n} / 04</div>
              <PxIcon pattern={s.pat.join(" ")} />
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="arrow">Saiba mais →</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Differentials() {
  const items = [
    { k: "01", t: "Sem enrolação", d: "Resposta direta, explicação clara. Você entende o que foi feito e por quê." },
    { k: "02", t: "Resolver, não contornar", d: "Vamos até a raiz do problema. Gambiarra aqui é último recurso, não padrão." },
    { k: "03", t: "Experiência de campo", d: "Anos atendendo comércio, material de construção e distribuidoras de verdade." },
    { k: "04", t: "Suporte rápido", d: "Atendimento remoto no mesmo dia. Presencial quando a situação pede." },
  ];
  return (
    <section className="diff-wrap">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Diferenciais</span>
            <h2 className="h-section">Por que empresas da região contam com a 8Bits.</h2>
          </div>
        </div>
        <div className="diff-grid">
          {items.map(i => (
            <div className="diff-item" key={i.k}>
              <div className="big">{i.k}</div>
              <h4>{i.t}</h4>
              <p>{i.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ResourcesTeaser() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Conteúdo para você</span>
            <h2 className="h-section">Tutoriais e downloads para resolver sozinho o que dá.</h2>
            <p className="lede">Antes mesmo de pedir ajuda, dá uma olhada. Quem ensina é quem implanta — sem floreio.</p>
          </div>
        </div>
        <div className="res-grid">
          <a className="res-card" href="#/tutoriais">
            <span className="label">Tutoriais</span>
            <h3>Vídeos curtos e objetivos sobre ERP e fiscal.</h3>
            <p>Passo a passo para as dúvidas que mais aparecem no suporte.</p>
            <div className="bottom">
              <span className="count">12+</span>
              <span className="btn btn-red btn-sm">Assistir →</span>
            </div>
          </a>
          <a className="res-card dark" href="#/downloads">
            <span className="label">Downloads</span>
            <h3>Programas, acesso remoto e utilitários que usamos aqui.</h3>
            <p>Mesmos arquivos que instalamos em atendimento. Sempre a versão mais recente.</p>
            <div className="bottom">
              <span className="count">8+</span>
              <span className="btn btn-red btn-sm">Baixar →</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Hero />
      <Solutions />
      <Differentials />
      <ResourcesTeaser />
      <FinalCTA />
    </>
  );
}

Object.assign(window, { HomePage });