function App() {
  const defaults = window.TWEAK_DEFAULTS || { accent: '#ff830e', particles: 1, grid: 0.5 };
  const [tweaks, setTweak] = useTweaks(defaults);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--particles-strength', tweaks.particles);
    document.documentElement.style.setProperty('--grid-strength', tweaks.grid);
  }, [tweaks]);

  return (
    <>
      <div className="bg-grid"></div>

      <nav className="nav">
        <div className="brand">
          <div className="brand-mark"></div>
          <span>ETC / FACAMP</span>
        </div>
        <div className="links">
          <a href="#about">Quem somos</a>
          <a href="#essence">Essência</a>
          <a href="#projects">Projetos</a>
          <a href="#contact">Contato</a>
        </div>
        <div className="meta">
          <span>v.2026</span>
          <span style={{ color: 'var(--accent)' }}>● ATIVA</span>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        <HeroCanvas accent={tweaks.accent} strength={tweaks.particles} />
        <div className="hero-content">
          <div className="hero-eyebrow">
            <span className="dot"></span>
            <span>FACAMP / Campinas-SP / Equipe de Tecnologia e Ciência</span>
          </div>
          <h1>
            Construindo<br />
            <span className="stroke">conhecimento</span><br />
            na <span className="accent">prática.</span>
          </h1>
          <div className="hero-sub">
            <p>Robótica, programação e ciência aplicada. Desenvolvemos projetos reais com alunos de todos os cursos da FACAMP.


            </p>
            <span className="scroll-cue">Scroll</span>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee-track">
          {Array.from({ length: 2 }).map((_, k) =>
          <React.Fragment key={k}>
              <span>Robótica</span><span className="star">✦</span>
              <span>Programação</span><span className="star">✦</span>
              <span>Aeromodelos</span><span className="star">✦</span>
              <span>Robôs de Combate</span><span className="star">✦</span>
              <span>Seguidores de Linha</span><span className="star">✦</span>
              <span>Ciência Aplicada</span><span className="star">✦</span>
            </React.Fragment>
          )}
        </div>
      </div>

      {/* QUEM SOMOS */}
      <section id="about" className="section about">
        <div className="section-head">
          <Reveal className="section-num"><span className="accent">01</span> / Quem somos</Reveal>
          <Reveal as="h2" className="section-title">Equipe<br />de Tecnologia<br />& Ciência</Reveal>
        </div>
        <div className="about-grid">
          <Reveal className="about-text">
            <p className="lead">
              A ETC é a instituição da FACAMP voltada para o desenvolvimento de projetos em
              robótica, tecnologia e ciência aplicada.
            </p>
            <p>Nosso objetivo é ir além da teoria, criamos soluções reais através de robôs de combate, seguidores de linha, aeromodelos e projetos de programação.


            </p>
            <p>
              Estamos sempre desenvolvendo novas ideias e explorando diferentes áreas da tecnologia.
              A ETC é aberta a todos os cursos, porque acreditamos que grandes projetos nascem da
              união de diferentes conhecimentos.
            </p>
            <p className="closer">
              Mais do que uma equipe, somos um espaço para criar, aprender e inovar.
            </p>
          </Reveal>
          <div className="about-mascot">
            <img src="mascot/laptop.png" alt="Mascote ETC com laptop" />
          </div>
        </div>
      </section>

      {/* ESSÊNCIA */}
      <section id="essence" className="section essence">
        <ScrollGear className="essence-gear-bg g1" size={600} color="#ff830e" teeth={14} direction={1} opacity={0.08} />
        <ScrollGear className="essence-gear-bg g2" size={500} color="#0036ff" teeth={10} direction={-1} opacity={0.1} />

        <div className="section-head">
          <Reveal className="section-num"><span className="accent">02</span> / Essência</Reveal>
          <Reveal as="h2" className="section-title">Missão<br />Visão<br />Valores</Reveal>
        </div>

        <div className="essence-grid">
          <Reveal className="essence-card" delay={0}>
            <div className="corner">M.01</div>
            <div className="icon">
              <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                <circle cx="24" cy="24" r="22" stroke="#ff830e" strokeWidth="2" />
                <circle cx="24" cy="24" r="14" stroke="#ff830e" strokeWidth="2" />
                <circle cx="24" cy="24" r="6" fill="#ff830e" />
              </svg>
            </div>
            <h3>Missão</h3>
            <p className="body">
              Promover o desenvolvimento técnico e científico dos alunos por meio de projetos
              práticos em tecnologia e robótica.
            </p>
          </Reveal>

          <Reveal className="essence-card" delay={150}>
            <div className="corner">V.01</div>
            <div className="icon">
              <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                <path d="M2 24 C 12 8, 36 8, 46 24 C 36 40, 12 40, 2 24 Z" stroke="#b5f800" strokeWidth="2" />
                <circle cx="24" cy="24" r="6" fill="#b5f800" />
              </svg>
            </div>
            <h3>Visão</h3>
            <p className="body">
              Ser referência dentro da FACAMP na criação de projetos inovadores e na formação de
              alunos preparados para desafios reais.
            </p>
          </Reveal>

          <Reveal className="essence-card values" delay={300}>
            <div className="corner">V.02</div>
            <div className="icon">
              <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                <path d="M24 4 L8 24 L20 24 L16 44 L40 20 L28 20 L32 4 Z" stroke="#0036ff" strokeWidth="2" fill="#0036ff" />
              </svg>
            </div>
            <h3>Valores</h3>
            <ul className="vlist">
              <li>Inovação</li>
              <li>Colaboração</li>
              <li>Aprendizado contínuo</li>
              <li>Proatividade</li>
              <li>Comprometimento</li>
              <li>Compartilhamento</li>
            </ul>
          </Reveal>
        </div>

        <Reveal className="essence-closer">
          <span className="accent">↳</span> Construindo conhecimento na prática.
        </Reveal>
      </section>

      {/* PROJETOS */}
      <section id="projects" className="section projects">
        <div className="section-head">
          <Reveal className="section-num"><span className="accent">03</span> / Projetos</Reveal>
          <Reveal as="h2" className="section-title">O que<br />fazemos</Reveal>
        </div>

        <Reveal className="terminal">
          <div className="terminal-bar">
            <div className="dots"><span></span><span></span><span></span></div>
            <div className="title">etc@facamp ~ /projects/log.sh</div>
            <div style={{ width: 36 }}></div>
          </div>
          <div className="terminal-body">
            <div className="terminal-line">
              <span className="ts">22:14:03</span>
              <span className="lvl run">RUN</span>
              <span className="msg">$ ./list_projects --active --year=2026</span>
            </div>
            <div className="terminal-line">
              <span className="ts">22:14:03</span>
              <span className="lvl idea">INFO</span>
              <span className="msg">→ scanning workshop... 4 ativos, 1 idea</span>
            </div>

            <div className="terminal-section">// Robótica de Combate</div>
            <div className="project-card">
              <div className="id">[01]</div>
              <div className="name">Robôs de Combate</div>
              <div className="meta">
                <div>Categoria: Beetleweight</div>
                <div className="status">ativo</div>
              </div>
            </div>

            <div className="terminal-section">// Robótica Autônoma</div>
            <div className="project-card">
              <div className="id">[02]</div>
              <div className="name">Seguidores de Linha</div>
              <div className="meta">
                <div>PID + sensores IR</div>
                <div className="status">ativo</div>
              </div>
            </div>

            <div className="terminal-section">// Software</div>
            <div className="project-card">
              <div className="id">[03]</div>
              <div className="name">Projetos de Programação</div>
              <div className="meta">
                <div>Web · Embarcado · IA</div>
                <div className="status dev">em dev</div>
              </div>
            </div>

            <div className="terminal-section">// Aeronáutica</div>
            <div className="project-card">
              <div className="id">[04]</div>
              <div className="name">Aeromodelos</div>
              <div className="meta">
                <div>Projeto · Construção · Voo</div>
                <div className="status">ativo</div>
              </div>
            </div>

            <div className="terminal-line" style={{ marginTop: 28 }}>
              <span className="ts">22:14:08</span>
              <span className="lvl run">DONE</span>
              <span className="msg">
                4 projetos listados — sempre explorando novas áreas
                <span className="cursor"></span>
              </span>
            </div>
          </div>
        </Reveal>
      </section>

      {/* CONTATO */}
      <section id="contact" className="section contact">
        <Typewriter
          className="contact-huge"
          speed={70}
          startDelay={150}
          lines={[
          { text: 'Vamos', cls: '' },
          { text: 'construir', cls: 'stroke' },
          { text: 'juntos.', cls: 'accent' }]
          }
          renderLine={(text, i, line) =>
          <span className={line.cls}>{text}</span>
          } />
        

        <img className="contact-mascot" src="mascot/idea.png" alt="" />

        <Reveal className="contact-grid">
          <div className="contact-block">
            <div className="label">// instagram</div>
            <a className="value" href="#">@etcfacamp</a>
          </div>
          <div className="contact-block">
            <div className="label">// e-mail</div>
            <a className="value" href="#">etc@facamp.com.br</a>
          </div>
          <div className="contact-block" style={{ width: "400.117px" }}>
            <div className="label">// onde</div>
            <div className="value" style={{ fontSize: "16px", lineHeight: 1.4, width: "200.117px" }}>FACAMP<br />Av. Alan Turing, 805 - Cidade Universitária, Campinas - SP, 13083-898</div>
          </div>
        </Reveal>
      </section>

      <footer className="footer">
        <div>© 2026 ETC — Equipe de Tecnologia e Ciência</div>
        <div>Construindo conhecimento na prática</div>
      </footer>

      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>);

}

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cor de destaque" />
      <TweakRadio
        label="Preset"
        value={tweaks.accent}
        options={['#ff830e', '#b5f800', '#0036ff']}
        onChange={(v) => setTweak('accent', v)} />
      
      <TweakColor label="Custom" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Efeitos" />
      <TweakSlider label="Partículas" min={0} max={2} step={0.1} value={tweaks.particles} onChange={(v) => setTweak('particles', v)} />
      <TweakSlider label="Grid" min={0} max={1} step={0.05} value={tweaks.grid} onChange={(v) => setTweak('grid', v)} />
    </TweaksPanel>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);