/* global React, ReactDOM, Icon, Reveal, Particles, Typing, MatrixRain, useTweaks */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = {
  "accentColor": "#00FF88",
  "accent2Color": "#00D4FF",
  "magentaColor": "#BF00FF",
  "heroHeadline": "APRENDA A\nCONSTRUIR O\nFUTURO.",
  "heroSubtitle": "Curso Superior em Análise e Desenvolvimento de Sistemas — IFRO Campus Ariquemes",
  "enableParticles": true,
  "enableScanlines": true,
  "kodaFloat": true,
  "variant": "neon-green"
};

const VARIANTS = {
  'neon-green': { accentColor: '#00FF88', accent2Color: '#00D4FF', magentaColor: '#BF00FF' },
};

function App() {
  const [values] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);

  // apply colors via CSS vars
  useEffect(() => {
    const v = VARIANTS[values.variant] || {};
    const accent = v.accentColor || values.accentColor;
    const accent2 = v.accent2Color || values.accent2Color;
    const magenta = v.magentaColor || values.magentaColor;
    const r = document.documentElement;
    r.style.setProperty('--neon', accent);
    r.style.setProperty('--neon-2', accent);
    r.style.setProperty('--cyan', accent2);
    r.style.setProperty('--magenta', magenta);
    const hex = accent.replace('#','');
    const rr = parseInt(hex.slice(0,2),16), gg = parseInt(hex.slice(2,4),16), bb = parseInt(hex.slice(4,6),16);
    r.style.setProperty('--border-neon', `rgba(${rr}, ${gg}, ${bb}, 0.3)`);
    r.style.setProperty('--border-neon-hover', `rgba(${rr}, ${gg}, ${bb}, 0.8)`);
  }, []);

  const headlineLines = (values.heroHeadline || '').split('\n');

  return (
    <>
      <Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <Hero headlineLines={headlineLines} subtitle={values.heroSubtitle} particles={values.enableParticles} />
      <StatsBar />
      <KodaIntro kodaFloat={values.kodaFloat} />
      <div className="neon-divider" />
      <About />
      <div className="neon-divider" />
      <TechStack />
      <div className="neon-divider" />
      <WhyAds />
      <div className="neon-divider" />
      <Sistemas />
      <div className="neon-divider" />
      <Documentos />
      <div className="neon-divider" />
      <Timeline />
      <CtaKoda kodaFloat={values.kodaFloat} />
      <Contato />
      <Footer />
    </>
  );
}

// ====== NAVBAR ======
function Navbar({ menuOpen, setMenuOpen }) {
  const links = [
    { href: '#inicio', label: 'Início' },
    { href: '#sobre', label: 'Sobre' },
    { href: '#tech', label: 'Tecnologias' },
    { href: '#sistemas', label: 'Sistemas' },
    { href: '#docs', label: 'Documentos' },
    { href: '#timeline', label: 'Histórico' },
    { href: '/devproof/', label: 'DevProof', external: true },
    { href: '#contato', label: 'Contato' },
  ];
  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <a href="#inicio" className="nav-logo">
            <span><span className="ads">ADS</span></span>
          </a>
          <ul className="nav-links">
            {links.map(l => (
              <li key={l.href}>
                <a href={l.href} {...(l.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                  {l.label}
                  {l.external && <span className="nav-badge">NEW</span>}
                </a>
              </li>
            ))}
          </ul>
          <div className="nav-cta">
            <a href="https://selecao.ifro.edu.br/unificado" className="btn btn-primary" target="_blank" rel="noopener noreferrer">Inscreva-se</a>
          </div>
          <button className="hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="menu">
            {menuOpen ? <Icon.Close /> : <Icon.Menu />}
          </button>
        </div>
      </nav>
      <div className={`mobile-drawer ${menuOpen ? 'open' : ''}`}>
        <ul>
          {links.map(l => (
            <li key={l.href}>
              <a
                href={l.href}
                onClick={() => setMenuOpen(false)}
                {...(l.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
              >
                &gt; {l.label}{l.external && ' ↗'}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

// ====== HERO ======
function Hero({ headlineLines, subtitle, particles }) {
  return (
    <section className="hero" id="inicio">
      <div className="hero-bg" />
      <div className="hero-grid" />
      {particles && <Particles count={22} />}
      <div className="container hero-inner">
        <div className="hero-left">
          <div className="ifro-chip">
            <span className="ifro-mark">IF</span>
            <span>Instituto Federal de Rondônia · Campus Ariquemes</span>
          </div>
          <span className="badge">
            <span className="dot" />
            Aprovado pelo MEC · 4.42 / 5
          </span>
          <h1>
            {headlineLines.map((line, i) => (
              <span key={i} className={i === headlineLines.length - 1 ? 'line-2' : ''} style={{ display: 'block' }}>{line}</span>
            ))}
          </h1>
          <p className="subtitle">
            <Typing text={subtitle} speed={30} />
          </p>
          <div className="hero-ctas">
            <a href="https://selecao.ifro.edu.br/unificado" className="btn btn-primary" target="_blank" rel="noopener noreferrer">[ Inscreva-se ]</a>
            <a href="#sobre" className="btn btn-secondary">Saiba mais <Icon.Arrow /></a>
          </div>
        </div>
        <FlutterCard />
      </div>
    </section>
  );
}

// ====== FLUTTER CARD (3D translucent code panel — live coding) ======
function FlutterCard() {
  const ref = useRef(null);
  const bodyRef = useRef(null);

  // 3D tilt follow mouse
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / r.width;
      const dy = (e.clientY - cy) / r.height;
      const rx = Math.max(-8, Math.min(8, -dy * 10));
      const ry = Math.max(-12, Math.min(12, dx * 14));
      el.style.transform = `perspective(1200px) rotateX(${rx}deg) rotateY(${ry}deg)`;
    };
    const onLeave = () => { el.style.transform = ''; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseleave', onLeave);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  const tokens = [
    { c: 'kw', t: 'class' }, { c: 'cls', t: ' AnaliseEDesenvolvimento' }, { c: 'p', t: ' extends ' }, { c: 'cls', t: 'StatelessWidget {' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'kw', t: 'final ' }, { c: 'typ', t: 'String' }, { c: 'p', t: ' campus = ' }, { c: 'str', t: "'Ariquemes · RO'" }, { c: 'p', t: ';' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'kw', t: 'final ' }, { c: 'typ', t: 'Duration' }, { c: 'p', t: ' duracao = ' }, { c: 'typ', t: 'Duration' }, { c: 'p', t: '(' }, { c: 'fn', t: 'days: ' }, { c: 'num', t: '1095' }, { c: 'p', t: ');  ' }, { c: 'com', t: '// 3 anos' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'kw', t: 'final ' }, { c: 'typ', t: 'double' }, { c: 'p', t: ' notaMEC = ' }, { c: 'num', t: '4.42' }, { c: 'p', t: ';' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'kw', t: 'final ' }, { c: 'typ', t: 'List' }, { c: 'p', t: '<' }, { c: 'typ', t: 'String' }, { c: 'p', t: '> stack = [' },
    { br: true },
    { c: 'ind', t: '    ' }, { c: 'str', t: "'Python'" }, { c: 'p', t: ', ' }, { c: 'str', t: "'Django'" }, { c: 'p', t: ', ' }, { c: 'str', t: "'JavaScript'" }, { c: 'p', t: ',' },
    { br: true },
    { c: 'ind', t: '    ' }, { c: 'str', t: "'Flutter'" }, { c: 'p', t: ', ' }, { c: 'str', t: "'Android'" }, { c: 'p', t: ', ' }, { c: 'str', t: "'Algoritmos'" }, { c: 'p', t: ',' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'p', t: '];' },
    { br: true }, { br: true },
    { c: 'ind', t: '  @' }, { c: 'fn', t: 'override' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'typ', t: 'Widget' }, { c: 'fn', t: ' build' }, { c: 'p', t: '(' }, { c: 'typ', t: 'BuildContext' }, { c: 'p', t: ' context) {' },
    { br: true },
    { c: 'ind', t: '    ' }, { c: 'kw', t: 'return ' }, { c: 'cls', t: 'Scaffold' }, { c: 'p', t: '(' },
    { br: true },
    { c: 'ind', t: '      ' }, { c: 'fn', t: 'body:' }, { c: 'p', t: ' ' }, { c: 'cls', t: 'FutureCarreira' }, { c: 'p', t: '(' },
    { br: true },
    { c: 'ind', t: '        ' }, { c: 'fn', t: 'gratuito:' }, { c: 'p', t: ' ' }, { c: 'kw', t: 'true' }, { c: 'p', t: ',' },
    { br: true },
    { c: 'ind', t: '        ' }, { c: 'fn', t: 'federal:' }, { c: 'p', t: ' ' }, { c: 'kw', t: 'true' }, { c: 'p', t: ',' },
    { br: true },
    { c: 'ind', t: '        ' }, { c: 'fn', t: 'pratico:' }, { c: 'p', t: ' ' }, { c: 'kw', t: 'true' }, { c: 'p', t: ',' },
    { br: true },
    { c: 'ind', t: '      ' }, { c: 'p', t: '),' },
    { br: true },
    { c: 'ind', t: '    ' }, { c: 'p', t: ');' },
    { br: true },
    { c: 'ind', t: '  ' }, { c: 'p', t: '}' },
    { br: true },
    { c: 'p', t: '}' },
  ];

  // Flatten to a stream of "atoms" (1 char each, or a line break)
  const stream = [];
  tokens.forEach((tok, ti) => {
    if (tok.br) {
      stream.push({ br: true, ti });
    } else {
      for (let i = 0; i < tok.t.length; i++) {
        stream.push({ ch: tok.t[i], cls: tok.c, ti });
      }
    }
  });
  const total = stream.length;

  const [pos, setPos] = useState(0);
  const [phase, setPhase] = useState('typing'); // typing | done | restarting

  useEffect(() => {
    let cancelled = false;
    let timer;
    let i = 0;

    const schedule = (delay) => {
      timer = setTimeout(step, delay);
    };

    const step = () => {
      if (cancelled) return;
      if (i >= total) {
        setPhase('done');
        timer = setTimeout(() => {
          if (cancelled) return;
          setPhase('restarting');
          i = 0;
          setPos(0);
          timer = setTimeout(() => {
            if (cancelled) return;
            setPhase('typing');
            step();
          }, 700);
        }, 5000);
        return;
      }
      i += 1;
      setPos(i);
      const atom = stream[i - 1];
      // variable speed for realism
      let delay = 22 + Math.random() * 28;
      if (atom?.br) delay = 70 + Math.random() * 40;
      else if (atom?.ch === ' ') delay = 14 + Math.random() * 18;
      else if (atom?.ch && /[(){}\[\];,.<>]/.test(atom.ch)) delay = 55 + Math.random() * 50;
      else if (atom?.ch && /['"]/.test(atom.ch)) delay = 50 + Math.random() * 40;
      // occasional "thinking" pause
      if (Math.random() < 0.012) delay += 220 + Math.random() * 320;
      schedule(delay);
    };

    timer = setTimeout(step, 600);
    return () => { cancelled = true; clearTimeout(timer); };
  }, [total]);

  // Reassemble visible tokens up to position `pos`, preserving styling.
  const visibleTokens = [];
  if (pos > 0) {
    let charsConsumed = 0;
    let curTi = -1;
    let curText = '';
    let curCls = null;

    const flush = () => {
      if (curTi === -1) return;
      visibleTokens.push({ kind: 'tok', c: curCls, t: curText, key: `tk-${curTi}` });
      curTi = -1;
      curText = '';
      curCls = null;
    };

    for (let k = 0; k < pos && k < total; k++) {
      const atom = stream[k];
      if (atom.br) {
        flush();
        visibleTokens.push({ kind: 'br', key: `br-${k}` });
      } else {
        if (atom.ti !== curTi) {
          flush();
          curTi = atom.ti;
          curCls = atom.cls;
        }
        curText += atom.ch;
      }
      charsConsumed++;
    }
    flush();
  }

  // Auto-scroll to bottom while typing (so the cursor stays visible)
  useEffect(() => {
    const el = bodyRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [pos]);

  return (
    <div className="flutter-card-stage" aria-hidden="false">
      <div className="flutter-card-glow" />
      <div className="flutter-card" ref={ref}>
        <div className="flutter-card-head">
          <span className="dot-x r" /><span className="dot-x y" /><span className="dot-x g" />
          <span className="flutter-card-title">main.dart — ads_ariquemes</span>
          <span className="flutter-card-badge">{phase === 'done' ? '● live' : 'flutter run'}</span>
        </div>
        <pre className="flutter-card-body" ref={bodyRef}>
          <code>
            {visibleTokens.map((tok) =>
              tok.kind === 'br'
                ? <br key={tok.key} />
                : <span key={tok.key} className={`tok tok-${tok.c}`}>{tok.t}</span>
            )}
            <span className={`flutter-caret ${phase === 'done' ? 'rest' : 'active'}`}>▍</span>
          </code>
        </pre>
        <div className="flutter-card-foot">
          <span className="prompt">$</span>
          <span className="cmd">{phase === 'done' ? 'flutter build apk --release' : 'editing main.dart…'}</span>
          <span className={`ok ${phase === 'done' ? 'show' : 'hide'}`}>
            {phase === 'done' ? '✓ built in 18.4s' : ''}
          </span>
        </div>
        <div className="flutter-card-scan" />
      </div>
    </div>
  );
}

// ====== KODA INTRO (now below the hero) ======
function KodaIntro({ kodaFloat }) {
  return (
    <section className="koda-intro">
      <div className="container koda-intro-inner">
        <Reveal className="koda-intro-copy">
          <div className="eyebrow">// MASCOTE OFICIAL</div>
          <h2 className="koda-intro-title">
            Olá, eu sou o <span className="hl">KODA</span>.
          </h2>
          <p className="koda-intro-desc">
            Sou o mascote do curso — meio dev, meio guardião. Estou aqui pra te lembrar
            que bons desenvolvedores nascem da proatividade, curiosidade, força de vontade,
            um bom café e madrugadas inesquecíveis. Apague o termo <em>desistir</em> do seu
            dicionário, nos próximos três anos, vamos compilar muita coisa juntos. Te aguardo!
          </p>
          <div className="koda-intro-stats">
            <div className="koda-stat">
              <span className="koda-stat-num">100%</span>
              <span className="koda-stat-lbl">prático</span>
            </div>
            <div className="koda-stat">
              <span className="koda-stat-num">0</span>
              <span className="koda-stat-lbl">mensalidade</span>
            </div>
            <div className="koda-stat">
              <span className="koda-stat-num">4.42<em>/5</em></span>
              <span className="koda-stat-lbl">nota MEC</span>
            </div>
          </div>
        </Reveal>
        <Reveal className="koda-intro-stage">
          <div className="koda-ring sm"><span className="tick" /></div>
          <div className="koda-glow sm" />
          <div className="koda-bubble" role="note" aria-label="Mensagem do KODA">
            <span className="koda-bubble-lang">// EN</span>
            <p className="koda-bubble-text">
              <span className="bubble-dim">"</span>The future is <em>today</em>,
              <br />not tomorrow.<span className="bubble-dim">"</span>
            </p>
            <span className="koda-bubble-sig">— KODA</span>
            <span className="koda-bubble-tail" aria-hidden="true" />
          </div>
          <img
            className="koda-img sm"
            src="assets/koda-hero.png"
            alt="KODA — Mascote do curso ADS Ariquemes"
            style={{ animation: kodaFloat ? '' : 'none' }}
          />
        </Reveal>
      </div>
    </section>
  );
}

// ====== STATS BAR ======
function StatsBar() {
  const items = [
    { icon: <Icon.Grad />, label: 'Modalidade', value: 'Graduação Presencial' },
    { icon: <Icon.Clock />, label: 'Duração', value: '3 anos · 6 semestres' },
    { icon: <Icon.Moon />, label: 'Turno', value: 'Noturno · Seg–Sex 19h–22h30' },
  ];
  return (
    <div className="stats-bar">
      <div className="container">
        <div className="stats-grid">
          {items.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat-icon">{s.icon}</div>
              <div>
                <div className="stat-label">{s.label}</div>
                <div className="stat-value">{s.value}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ====== ABOUT ======
function About() {
  return (
    <section className="section" id="sobre">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// SOBRE O CURSO</div>
          <h2 className="glitch">Built for real devs.</h2>
          <div className="terminal-sub">Tecnologia de ponta. Mercado real. Zero blá-blá.</div>
        </Reveal>
        <div className="about">
          <Reveal className="about-text">
            <p>
              <strong>Análise e Desenvolvimento de Sistemas</strong> é um curso superior de tecnologia de <strong>3 anos</strong> no IFRO
              Campus Ariquemes — pensado pra quem quer sair formado já programando, não cuspindo teoria.
            </p>
            <p>
              O currículo é <strong>hands-on</strong>: você começa escrevendo código na primeira semana e termina entregando
              sistemas completos. Algoritmos pra estruturar o cérebro, Python e Django pro back-end, JavaScript pro front,
              Flutter e Android pra mobile. Tudo conectado ao que o mercado realmente pede.
            </p>
            <p>
              Antes de qualquer dúvida, recomendamos a leitura do <strong>Projeto Pedagógico do Curso (PPC)</strong> — é o
              documento que sistematiza tudo: matriz curricular, ementas, regime, atividades complementares, ENADE, TCC.
            </p>
            <div className="about-stats">
              <div className="pill">100% Prático</div>
              <div className="pill">Gratuito</div>
              <div className="pill">Federal</div>
              <div className="pill">Presencial</div>
            </div>
          </Reveal>
          <Reveal>
            <div className="mec-card">
              <div className="mec-label">// MEC Score</div>
              <div className="mec-score">
                4.42<span className="slash">/5</span>
              </div>
              <div className="mec-caption">Nota oficial — avaliação de cursos superiores</div>
            </div>
            <MatrixRain />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ====== TECH STACK ======
function TechStack() {
  const techs = [
    { icon: <Icon.Python />, name: 'Python', desc: 'Back-end, data, scripting. A lingua franca do software moderno.', label: '01' },
    { icon: <Icon.Django />, name: 'Django', desc: 'Framework full-stack pra web apps sérios em produção.', label: '02' },
    { icon: <Icon.JS />, name: 'JavaScript', desc: 'Front-end dinâmico, APIs, Node. Web sem JS não existe.', label: '03' },
    { icon: <Icon.Flutter />, name: 'Flutter', desc: 'Apps mobile multiplataforma com UI nativa e performance real.', label: '04' },
    { icon: <Icon.Android />, name: 'Android', desc: 'Desenvolvimento nativo pra o OS mais usado do mundo.', label: '05' },
    { icon: <Icon.Algo />, name: 'Algoritmos & Lógica', desc: 'A base que separa dev de copiador de Stack Overflow.', label: '06' },
  ];
  return (
    <section className="section" id="tech">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// STACK</div>
          <h2 className="glitch">&lt;TECNOLOGIAS/&gt;</h2>
          <div className="terminal-sub">O que você vai aprender a construir.</div>
        </Reveal>
        <Reveal stagger className="tech-grid">
          {techs.map(t => (
            <div key={t.name} className="tech-card">
              <span className="tech-label">{t.label}</span>
              <div className="tech-icon">{t.icon}</div>
              <h3>{t.name}</h3>
              <p>{t.desc}</p>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ====== WHY ADS ======
function WhyAds() {
  const items = [
    { num: '01', title: 'GRATUITO', desc: 'Ensino público federal de qualidade. Zero mensalidade, zero pegadinha.', signal: 'FREE.tier', color: '' },
    { num: '02', title: 'MERCADO REAL', desc: 'Currículo 100% voltado ao que empresa de verdade contrata.', signal: 'REAL.world', color: 'cyan' },
    { num: '03', title: 'NOTA MEC 4.42', desc: 'Reconhecimento oficial de excelência em ensino superior.', signal: 'RATED.top', color: 'magenta' },
  ];
  return (
    <section className="section" id="why">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// STATUS</div>
          <h2 className="glitch">WHY_ADS.exe</h2>
          <div className="terminal-sub">running diagnostics...</div>
        </Reveal>
        <Reveal stagger className="why-grid">
          {items.map(i => (
            <div key={i.num} className="why-card">
              <div className={`why-num ${i.color}`}>{i.num}</div>
              <h3>{i.title}</h3>
              <p>{i.desc}</p>
              <div className="signal">&gt; {i.signal}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ====== EDITAIS ======
function Editais() {
  const items = [
    {
      tag: 'monitoria · ensino',
      title: 'Programa de Monitoria — Edital nº 60/2022',
      desc: 'Seleção de monitores para cursos de graduação do Campus Ariquemes. Bolsa, experiência didática e currículo.',
      href: 'https://portal.ifro.edu.br/ariquemes/editais/ensino/12859-edital-n-60-2022-programa-de-monitoria-para-os-cursos-de-graduacao',
      cta: 'ver edital',
      status: 'aberto',
    },
    {
      tag: 'estágio · internacional',
      title: 'Estágio Remoto — Fibo.io (Finlândia)',
      desc: 'Oportunidade de estágio remoto com a Fibo.io na Finlândia para estudantes qualificados do ADS Ariquemes.',
      href: 'https://portal.ifro.edu.br/ariquemes/editais',
      cta: 'aguardando',
      status: 'em breve',
    },
    {
      tag: 'todos os editais',
      title: 'Editais do Campus Ariquemes',
      desc: 'Listagem completa de editais ativos do Campus — ensino, pesquisa, extensão, monitoria, estágio.',
      href: 'https://portal.ifro.edu.br/ariquemes/editais',
      cta: 'abrir portal',
      status: 'oficial',
    },
  ];
  return (
    <section className="section" id="editais">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// OPORTUNIDADES</div>
          <h2 className="glitch">EDITAIS.list</h2>
          <div className="terminal-sub">monitoria · estágio · seleção</div>
        </Reveal>
        <Reveal stagger className="why-grid">
          {items.map((e, i) => (
            <a key={i} className="why-card edital-card" href={e.href} target="_blank" rel="noopener noreferrer">
              <div className="edital-status">{e.status}</div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>// {e.tag}</div>
              <h3 style={{ fontSize: 17, lineHeight: 1.3 }}>{e.title}</h3>
              <p>{e.desc}</p>
              <div className="signal">&gt; {e.cta} <Icon.Arrow /></div>
            </a>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ====== SISTEMAS ======
function Sistemas() {
  const items = [
    {
      icon: '🗂',
      name: 'Catálogo de Sistemas IFRO',
      desc: 'Acesso aos sistemas oficiais do IFRO para servidores e estudantes.',
      href: 'https://portal.ifro.edu.br/servidor-logo',
    },
    {
      icon: '🎓',
      name: 'AVA · Ambiente Virtual',
      desc: 'Moodle do Campus Ariquemes — disciplinas, materiais, atividades.',
      href: 'https://virtual.ifro.edu.br/ariquemes/',
    },
    {
      icon: '📚',
      name: 'Repositório IFRO',
      desc: 'Repositório institucional geral — TCCs, artigos, materiais.',
      href: 'https://repositorio.ifro.edu.br/home',
    },
    {
      icon: '⚙️',
      name: 'TCCs do ADS',
      desc: 'Repositório dedicado dos TCCs do curso de ADS Ariquemes.',
      href: 'https://tccsifro.github.io/RepositorioTcc/#/',
    },
    {
      icon: '📱',
      name: 'Gerador de QR Code',
      desc: 'Ferramenta para gerar QR Codes — utilidade pública mantida pelo curso.',
      href: 'https://geradorqrcode.com.br',
    },
    {
      icon: '🏛',
      name: 'Portal do Campus',
      desc: 'Página institucional do Campus Ariquemes no portal IFRO.',
      href: 'https://portal.ifro.edu.br/ariquemes/o-campus',
    },
  ];
  return (
    <section className="section" id="sistemas">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// SISTEMAS</div>
          <h2 className="glitch">SYSTEMS.connect</h2>
          <div className="terminal-sub">tudo que você precisa acessar.</div>
        </Reveal>
        <Reveal stagger className="tech-grid">
          {items.map((s, i) => (
            <a key={i} href={s.href} className="tech-card sistema-card" target="_blank" rel="noopener noreferrer">
              <span className="tech-label">{String(i + 1).padStart(2, '0')}</span>
              <div className="tech-icon sistema-emoji">{s.icon}</div>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
              <div className="signal" style={{ marginTop: 12 }}>&gt; acessar <Icon.Arrow /></div>
            </a>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ====== DOCUMENTOS ======
function Documentos() {
  const groups = [
    {
      title: 'editais e oportunidades',
      items: [
        { name: 'Estágio Remoto — Fibo.io (Finlândia)', desc: 'Oportunidade de estágio remoto para estudantes qualificados — em breve.', href: 'https://portal.ifro.edu.br/ariquemes/editais' },
        { name: 'Editais do Campus Ariquemes', desc: 'Listagem completa — ensino, pesquisa, extensão, monitoria, estágio.', href: 'https://portal.ifro.edu.br/ariquemes/editais' },
      ],
    },
    {
      title: 'institucional',
      items: [
        { name: 'Projeto Pedagógico do Curso (PPC)', desc: '2022 — fundamenta a matriz, ementas e regimes.', href: 'https://drive.google.com/file/d/183hKh8PT1Sr4w3Lnj6p6EWNRrGt8P1tv/' },
        { name: 'Calendário Acadêmico 2026', desc: 'Datas, períodos letivos, feriados e recessos.', href: 'https://drive.google.com/file/d/1wMq9P3b9eho0wwp6SyKlMqO1MirXAw00/view?usp=sharing' },
        { name: 'Itinerário de Formação', desc: 'Trilha de formação cadastrada no AVA do Campus.', href: 'https://virtual.ifro.edu.br/ariquemes/course/view.php?id=2721' },
      ],
    },
    {
      title: 'TCC e ENADE',
      items: [
        { name: 'Manual de TCC', desc: 'Guia oficial para escrita do trabalho de conclusão.', href: 'https://repositorio.ifro.edu.br/items/9a61ebdb-b88c-4c27-af20-2dd1f7ff0980' },
        { name: 'Ficha Catalográfica (SUAP)', desc: 'Geração automática para o TCC.', href: 'https://suap.ifro.edu.br/ficha_catalografica/' },
        { name: 'Provas anteriores do ENADE', desc: 'Material de estudo das edições passadas.', href: 'https://drive.google.com/file/d/1vXbkEJmbJvds_J_OupGKF41od685Fdq-/' },
      ],
    },
    {
      title: 'regulamentos',
      items: [
        { name: 'Resolução de Atividades Complementares', desc: 'Resolução CONSUP nº 24/2022.', href: 'https://portal.ifro.edu.br/consup-nav/resolucoes/805-2022/12556-resolucao-consup-ifro-n-24-de-1-de-agosto-de-2022' },
        { name: 'Solicitação de Aproveitamento', desc: 'Modelo para pedido de aproveitamento de estudos.', href: 'https://docs.google.com/document/d/19rwARapAMfvkuLBqTx3BDw0Vntm-ynMj/' },
        { name: 'Mais documentos do Campus', desc: 'Lista completa de documentos institucionais.', href: 'https://portal.ifro.edu.br/ariquemes/documentos' },
      ],
    },
  ];

  return (
    <section className="section" id="docs">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// DOCUMENTOS</div>
          <h2 className="glitch">DOCS.repo</h2>
          <div className="terminal-sub">tudo registrado, tudo organizado.</div>
        </Reveal>

        {groups.map((g) => (
          <Reveal key={g.title} stagger className="doc-group">
            <div className="doc-group-title">// {g.title}</div>
            <div className="doc-list">
              {g.items.map((d, idx) => (
                <a key={idx} href={d.href} className="doc-item" target="_blank" rel="noopener noreferrer">
                  <div className="doc-item-text">
                    <div className="doc-name">{d.name}</div>
                    <div className="doc-desc">{d.desc}</div>
                  </div>
                  <div className="doc-arrow"><Icon.Arrow /></div>
                </a>
              ))}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ====== TIMELINE ======
function Timeline() {
  const events = [
    { year: '2018', tag: 'origem', title: 'Concepção do PPC', desc: 'Comissão para criação e revisão do Projeto Pedagógico do Curso. Registro inicial da coordenação e formação da equipe docente.' },
    { year: '2019', tag: 'launch', title: 'Início das aulas', desc: 'PPC aprovado em janeiro. Aulas presenciais no turno noturno sob coordenação do Prof. Vagner Schoaba. NDE define foco em Python, Django e React, com o conceito de "Fábrica de Software".' },
    { year: '2020', tag: 'pandemia', title: 'Adaptação remota', desc: 'Reorganização via Webex e Google Meet, com revisão de avaliações. WECIT 2020 adota Mentimeter como ferramenta interativa.' },
    { year: '2021', tag: 'engajamento', title: 'Retomada de laboratórios', desc: 'Maratonas de programação online e estratégias contra evasão. Retorno presencial de disciplinas dependentes de laboratório. WECIT consolidado como ação de extensão.' },
    { year: '2022', tag: 'reconhecimento', title: 'Volta presencial completa', desc: 'Retorno integral previsto para março. Processo e-MEC com parecer favorável do NDE sobre infraestrutura e bibliografia. Início das discussões sobre ENADE.' },
    { year: '2023', tag: 'amadurecimento', title: 'Foco no ENADE 2025', desc: 'Coordenação assumida pelo Prof. Claudinei de Oliveira. Série de palestras e maratona aberta de programação.' },
    { year: '2024', tag: 'transição', title: 'Continuidade e preparação', desc: 'Prof. Claudinei mantém a coordenação, preparando o retorno do Prof. Andrey.' },
    { year: '2025', tag: 'reconhecimento externo', title: 'Retorno do Prof. Andrey · vitrines e parcerias', desc: 'Prof. Andrey Alencar Quadros volta à coordenação do curso. 3º e 4º lugares na Rondônia Rural Show. Parcerias firmadas com Sebrae, Perta.io, Topo Tecnologia e Quanyx Soft House. Discussões sobre IA no currículo e PPC 2027.' },
    { year: '2026', tag: 'identidade', title: 'Nasce o KODA', desc: 'Criação do mascote oficial do curso — meio dev, meio guardião. KODA passa a representar a identidade visual do ADS Ariquemes em materiais, eventos e canais digitais.' },
  ];
  return (
    <section className="section" id="timeline">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// HISTÓRICO</div>
          <h2 className="glitch">TIMELINE.git_log</h2>
          <div className="terminal-sub">{`commits desde 2018 — ${events.length} marcos registrados.`}</div>
        </Reveal>
        <div className="timeline">
          {events.map((e, i) => (
            <Reveal key={e.year} as="div" className="timeline-row">
              <div className="timeline-year">{e.year}</div>
              <div className="timeline-line"><span className="timeline-dot" /></div>
              <div className="timeline-body">
                <div className="timeline-tag">// {e.tag}</div>
                <h3 className="timeline-title">{e.title}</h3>
                <p className="timeline-desc">{e.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====== CTA KODA ======
function CtaKoda({ kodaFloat }) {
  return (
    <section className="cta-koda">
      <div className="container">
        <div className="cta-inner cta-centered">
          <Reveal>
            <div className="eyebrow" style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--cyan)', fontSize: 13, marginBottom: 12, letterSpacing: '0.04em' }}>
              &gt; /cta/enroll.now
            </div>
            <h2>PRONTO PARA<br /><span className="hl">VIRAR DEV?</span></h2>
            <p>Inscrições abertas no Processo Seletivo Unificado.<br />Sem taxa. Sem mensalidade. Só código.</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a href="https://selecao.ifro.edu.br/unificado" target="_blank" rel="noopener noreferrer" className="btn btn-secondary" style={{ fontSize: 14, padding: '16px 32px' }}>
                [ Inscreva-se agora ] <Icon.Arrow />
              </a>
              <a href="#contato" className="btn btn-magenta" style={{ fontSize: 14, padding: '16px 32px' }}>
                Tire dúvidas
              </a>
            </div>
            <div style={{
              marginTop: 36,
              padding: '14px 18px',
              border: '1px solid var(--border-neon)',
              borderRadius: 4,
              background: 'rgba(0,0,0,0.4)',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 13,
              color: 'var(--text-dim)',
              maxWidth: 440,
            }}>
              <span style={{ color: 'var(--neon)' }}>$</span> sudo apt install future --version=2026
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ====== CONTATO ======
function Contato() {
  return (
    <section className="section" id="contato">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">// LOCALIZAÇÃO E CONTATO</div>
          <h2 className="glitch">GPS.locate("Campus Ariquemes")</h2>
          <div className="terminal-sub">coordinates resolved.</div>
        </Reveal>
        <div className="locate-grid">
          <Reveal>
            <div className="map-card">
              <div className="map-pin" />
              <iframe
                title="mapa"
                src="https://www.openstreetmap.org/export/embed.html?bbox=-63.056%2C-9.918%2C-63.008%2C-9.888&layer=mapnik&marker=-9.903%2C-63.032"
                loading="lazy"
              />
            </div>
          </Reveal>
          <Reveal>
            <div className="terminal-card">
              <div className="terminal-head">
                <span className="dot-x r" /><span className="dot-x y" /><span className="dot-x g" />
                <span className="title">~/contato/ariquemes — bash</span>
              </div>
              <div className="terminal-body">
                <div className="line"><span className="prompt">&gt;</span><span className="key">INSTITUIÇÃO:</span></div>
                <div className="line"><span style={{ width: 12 }} /><span className="val">Instituto Federal de Rondônia · Campus Ariquemes</span></div>
                <div className="line"><span className="prompt">&gt;</span><span className="key">CURSO:</span><span className="val">Análise e Desenvolvimento de Sistemas</span></div>
                <div className="line"><span className="prompt">&gt;</span><span className="key">COORDENADOR:</span></div>
                <div className="line"><span style={{ width: 12 }} /><span className="val">Andrey Alencar Quadros</span></div>
                <div className="line"><span className="prompt">&gt;</span><span className="key">E-MAIL:</span></div>
                <div className="line"><span style={{ width: 12 }} />
                  <a className="val link" href="mailto:ads.ariquemes@ifro.edu.br" style={{ color: 'var(--neon)' }}>ads.ariquemes@ifro.edu.br</a>
                </div>
                <div className="line"><span className="prompt">&gt;</span><span className="key">WHATSAPP:</span></div>
                <div className="line"><span style={{ width: 12 }} />
                  <a className="val link" href="https://wa.me/5569993485858" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--neon)' }}>(69) 9 9348-5858</a>
                </div>
                <div className="line"><span className="prompt">&gt;</span><span className="key">HORÁRIO:</span><span className="val">Noturno · Seg–Sex 19h – 22h30</span></div>
                <div className="line"><span className="prompt">&gt;</span><span style={{ color: 'var(--text-dim)' }}>// "Estou à disposição para auxiliá-los."</span></div>
                <div className="line"><span className="prompt">&gt;</span><span style={{ color: 'var(--text-dim)' }}>_</span><span className="cursor" /></div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ====== FOOTER ======
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-logo" style={{ marginBottom: 16 }}>
              <span><span className="ads" style={{ fontSize: 32 }}>ADS</span></span>
            </div>
            <div className="foot-tag">
              Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas — IFRO Campus Ariquemes.
            </div>
          </div>
          <div className="footer-col">
            <h4>// Curso</h4>
            <ul>
              <li><a href="#sobre">Sobre</a></li>
              <li><a href="#tech">Tecnologias</a></li>
              <li><a href="#why">Por que ADS?</a></li>
              <li><a href="#timeline">Histórico</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>// Institucional</h4>
            <ul>
              <li><a href="https://portal.ifro.edu.br" target="_blank" rel="noopener noreferrer">Portal IFRO</a></li>
              <li><a href="https://portal.ifro.edu.br/ariquemes/o-campus" target="_blank" rel="noopener noreferrer">Campus Ariquemes</a></li>
              <li><a href="https://portal.ifro.edu.br/ariquemes/documentos" target="_blank" rel="noopener noreferrer">Documentos</a></li>
              <li><a href="https://repositorio.ifro.edu.br/home" target="_blank" rel="noopener noreferrer">Repositório</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>// Contato</h4>
            <ul>
              <li><a href="mailto:ads.ariquemes@ifro.edu.br">ads.ariquemes@ifro.edu.br</a></li>
              <li><a href="https://wa.me/5569993485858" target="_blank" rel="noopener noreferrer">(69) 9 9348-5858</a></li>
              <li><a href="#contato">Ariquemes, RO</a></li>
              <li><a href="#contato">Noturno · 19h — 22h30</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 ADS IFRO Ariquemes — Todos os direitos reservados</div>
          <div className="flavor">// Built with ☕ and late-night commits</div>
        </div>
      </div>
    </footer>
  );
}

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