/* App.jsx - layout da home loopdoedson */
const { useState, useEffect } = React;

/* ------- conteúdo editável ------- */
const STACK = ["SQL", "Python", "Power BI", "Power Automate", "Excel / VBA", "RPA", "ETL", "DAX"];

function App() {
  const year = new Date().getFullYear();
  return (
    <React.Fragment>
      <SystemGridBackground />

      {/* NAV */}
      <header className="nav">
        <div className="wrap nav-inner">
          <a href="#top"><LoopWordmark size={22} /></a>
          <nav className="nav-links">
            <a href="#stack">stack</a>
            <a href="#sobre">sobre</a>
            <a href="#contato">contato</a>
            <a className="nav-cta" href="#contato">vamos conversar →</a>
          </nav>
        </div>
      </header>

      <main className="shell" id="top">
        {/* HERO */}
        <section className="hero wrap">
          <div className="hero-grid">
            <ScrollReveal as="div">
              <span className="eyebrow">Desenvolvedor de Automações &amp; Dados</span>
              <h1>
                Transformo trabalho <span className="accent">manual</span> em
                {" "}pipelines que <span className="accent-b">rodam sozinhos</span>.
              </h1>
              <p className="lead">
                Oi, sou o Edson. Conecto BI, SQL, Python e RPA para tirar a
                planilha das costas das pessoas. Do dado cru ao dashboard
                que decide.
              </p>
              <div className="hero-cta-row">
                <a className="btn btn-primary" href="#sobre">conhecer mais</a>
                <a className="btn btn-ghost" href="#contato">contato</a>
              </div>
              <div className="metrics">
                <div className="metric">
                  <div className="num"><b>−94%</b></div>
                  <div className="lbl">tarefas manuais</div>
                </div>
                <div className="metric">
                  <div className="num"><b>+30</b></div>
                  <div className="lbl">automações no ar</div>
                </div>
                <div className="metric">
                  <div className="num"><b>12k</b></div>
                  <div className="lbl">linhas / dia</div>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal as="div" delay={120}>
              <AnimatedPipelineHero />
            </ScrollReveal>
          </div>
        </section>

        {/* STACK + TERMINAL */}
        <section className="section wrap" id="stack">
          <div className="hero-grid" style={{ alignItems: "stretch" }}>
            <ScrollReveal as="div">
              <div className="section-head" style={{ marginBottom: 24 }}>
                <span className="eyebrow">como eu trabalho</span>
                <h2>Menos clique manual. Mais sistema rodando.</h2>
                <p>
                  Mapeio o processo, identifico o gargalo repetitivo e construo
                  a automação que entrega o resultado todo dia com log,
                  status e dado confiável no final.
                </p>
              </div>
              <div className="chips">
                {STACK.map((s, i) => <span key={i} className="chip">{s}</span>)}
              </div>
            </ScrollReveal>

            <ScrollReveal as="div" delay={120}>
              <TerminalLogs />
            </ScrollReveal>
          </div>
        </section>

        {/* SOBRE */}
        <section className="section wrap" id="sobre">
          <ScrollReveal as="div" className="section-head">
            <span className="eyebrow">sobre</span>
            <h2>Quem sou eu</h2>
          </ScrollReveal>
          <SobreTabs />
        </section>

        {/* CONTATO / FOOTER */}
        <footer className="footer" id="contato">
          <div className="wrap">
            <ScrollReveal as="div" className="section-head" style={{ marginBottom: 28 }}>
              <span className="eyebrow">contato</span>
              <h2 style={{ fontSize: "clamp(24px,3vw,34px)" }}>
                Tem um processo que ainda roda na mão?
              </h2>
              <p>Me chama, provavelmente dá pra automatizar.</p>
            </ScrollReveal>
            <div className="footer-inner">
              <LoopWordmark size={18} />
              <div className="links">
                <a href="mailto:edsonj.rochafilho@gmail.com">e-mail</a>
                <a href="https://wa.me/5541988280668" target="_blank" rel="noopener noreferrer">whatsapp</a>
                <a href="https://www.linkedin.com/in/edsonjsrf/" target="_blank" rel="noopener noreferrer">linkedin</a>
              </div>
              <span className="mono" style={{ fontSize: 12, color: "var(--muted)" }}>
                © {year} loopdoedson
              </span>
            </div>
          </div>
        </footer>
      </main>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);