/* === Basecamp App: main React component === */
const { useState, useEffect, useRef } = React;

const PILLARS = [
{
  n: '01', key: 'energy', emoji: '🌙',
  title: 'Energia e Saúde Cognitiva',
  question: 'Estou em condições físicas e mentais para aprender?',
  body: 'Antes de perguntar como você estuda, é preciso perguntar se você está em condições de estudar. Sono, exercício, ambiente e o uso do celular impactam diretamente sua capacidade de absorver conteúdo — mesmo quando você não percebe.',
  tags: ['Sono', 'Exercício físico', 'Uso do celular']
},
{
  n: '02', key: 'active', emoji: '🧠',
  title: 'Aprendizado Ativo',
  question: 'Sei como aprender?',
  body: 'A diferença entre reler 5 vezes e aprender de verdade está nas estratégias que você usa. Praticar recuperação ativa, corrigir erros com profundidade e elaborar o conteúdo com suas próprias palavras pode aumentar sua retenção em até 50%.',
  tags: ['Recuperação ativa', 'Auto-explicação', 'Correção profunda']
},
{
  n: '03', key: 'routine', emoji: '📅',
  title: 'Rotina e Organização',
  question: 'Consigo manter isso ao longo do tempo?',
  body: 'Motivação oscila. Rotina sustenta. Estudantes com hábitos consistentes têm desempenho superior aos que dependem de surtos de esforço antes da prova.',
  tags: ['Planejamento', 'Constância', 'Materiais']
},
{
  n: '04', key: 'purpose', emoji: '🎯',
  title: 'Propósito e Motivação',
  question: 'Sei por que estou fazendo isso?',
  body: 'Autoeficácia — a crença de que você é capaz de aprender — é o preditor mais forte de desempenho acadêmico em toda a literatura científica. E ela pode ser desenvolvida.',
  tags: ['Autoeficácia', 'Persistência', 'Atribuição']
},
{
  n: '05', key: 'awareness', emoji: '🔍',
  title: 'Autopercepção e Ajuste',
  question: 'Percebo quando algo precisa mudar?',
  body: 'Saber o que você sabe — e o que você acha que sabe — é a habilidade que separa quem se surpreende com a nota da prova de quem prevê seu próprio resultado com precisão.',
  tags: ['Monitoramento', 'Autoavaliação', 'Ajuste']
}];


/* === Reveal-on-scroll hook === */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* === Active section nav highlight === */
function useScrollProgress() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setP(Math.min(1, Math.max(0, window.scrollY / h)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return p;
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-brand">
          <img src="assets/basecamp-logo-color.png" alt="Basecamp" className="nav-brand-logo" style={{ width: "200px", objectFit: "cover" }} />
        </a>
        <nav className="nav-links">
          <a href="#oque">O que é</a>
          <a href="#pilares">Os 5 pilares</a>
          <a href="#ciencia">Ciência</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#cta" className="btn btn-primary nav-cta">
          Fazer assessment
          <span className="arrow">→</span>
        </a>
      </div>
    </header>);

}

function ProgressBar() {
  const p = useScrollProgress();
  return <div className="progress" style={{ width: `${p * 100}%` }} />;
}

/* === HERO === */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-wrap">
        <div className="hero-text">
          <div className="hero-badge reveal">
            <img src="assets/belavista-logo-color.png" alt="Faculdade Belavista" className="hero-badge-logo" />
          </div>
          <h1 className="h-display hero-h reveal">
            Descubra exatamente o que <em>está travando</em> <span style={{ color: '#511865' }}>seu rendimento nos estudos.</span>
          </h1>
          <p className="hero-sub reveal" style={{ fontWeight: "400" }}>
            O Basecamp é o assessment que mapeia as <strong>5 competências-chave</strong> que separam alunos de alto rendimento dos que estudam muito e rendem pouco. Em menos de 10 minutos, você recebe um raio-x completo do seu perfil de estudo e um plano de ação personalizado.
          </p>
          <div className="hero-actions reveal">
            <a href="#cta" className="btn btn-primary btn-xl">
              Fazer meu assessment grátis
              <span className="arrow">→</span>
            </a>
            <a href="#oque" className="hero-link">
              Como funciona
              <span>↓</span>
            </a>
          </div>
          <ul className="hero-meta reveal">
            <li><Check /> Gratuito</li>
            <li><Check /> 20 questões</li>
            <li><Check /> Resultado imediato</li>
            <li><Check /> Sem instalar nada</li>
          </ul>

          <aside className="hero-credibility reveal">
            <div className="hcred-bar" />
            <div>
              Baseado em instrumentos científicos validados internacionalmente — <strong>MSLQ (University of Michigan)</strong>, LASSI e PSSHI — adaptado para a realidade do Ensino Médio brasileiro pela Faculdade Belavista.
            </div>
          </aside>
        </div>
        <div className="hero-art">
          <HeroVisual />
        </div>
      </div>

      {/* Marquee tagline strip */}
      <div className="marquee">
        <div className="marquee-track">
          {Array.from({ length: 4 }).map((_, i) =>
          <span key={i} className="mq-item" style={{ textAlign: "center", letterSpacing: "0.72px" }}>
              Escolha ser mais <span className="mq-dot">●</span>
              Comportamentos podem ser treinados <span className="mq-dot">●</span>
              Não é talento. É estratégia. <span className="mq-dot">●</span>
            </span>
          )}
        </div>
      </div>
    </section>);

}

function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.12" />
      <path d="M7 12.5l3.2 3.2L17 9" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* === Identification with Lucas === */
function LucasSection() {
  return (
    <section className="lucas" id="lucas">
      <div className="wrap lucas-wrap">
        <div className="lucas-portrait reveal">
          <StudentPortrait tone="purple" />
          <div className="lucas-stamp">
            <span>CASE REAL</span>
            <strong>Lucas, 16</strong>
            <small>1º ano EM · Piloto 2025</small>
          </div>
        </div>
        <div className="lucas-text">
          <span className="eyebrow reveal">Identificação</span>
          <h2 className="h-section lucas-h reveal">Você se identifica com o Lucas?</h2>
          <blockquote className="lucas-quote reveal">
            <span className="lq-mark">“</span>
            Ah, acho que sim. O que me deixa confuso é saber o que fazer… Presto atenção e deixo o professor fazendo as coisas, ou tento fazer os exercícios junto com o professor, na hora que ele está fazendo?
            <span className="lq-mark lq-close">”</span>
            <cite>— Lucas, 16 anos · 1º ano do Ensino Médio</cite>
          </blockquote>
          <p className="lucas-body reveal" style={{ fontWeight: "400" }}>
            O Lucas é um aluno real. Ele assistia às aulas, prestava atenção, mas na hora dos exercícios <strong>travava</strong>. Ele não tinha um problema de inteligência — tinha um problema de <em style={{ fontWeight: "700" }}>estratégia</em>.
          </p>
          <p className="lucas-body reveal">E talvez você também esteja passando por algo parecido:</p>
          <ul className="lucas-list reveal">
            {[
            'Você estuda, mas a nota não acompanha o esforço.',
            'Relê o conteúdo várias vezes e mesmo assim esquece na prova.',
            'Não sabe por onde começar quando senta para estudar.',
            'Sente que está sempre correndo atrás, nunca à frente.',
            'Tem dias em que a motivação some — e você não sabe como recuperar o ritmo.'].
            map((t, i) =>
            <li key={i} style={{ '--d': `${i * 80}ms` }}>
                <span className="lucas-bullet" />
                <span>{t}</span>
              </li>
            )}
          </ul>
          <div className="lucas-good reveal">
            <Boia size={32} color="var(--bv-purple)" strokeWidth={2.5} />
            <p>
              <strong>A boa notícia:</strong> todos esses pontos são <em>comportamentos</em>, não talento. E comportamentos podem ser treinados — desde que você saiba exatamente quais são os seus.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* === O que é === */
function WhatIs() {
  return (
    <section className="whatis" id="oque">
      <div className="wrap">
        <div className="whatis-head">
          <span className="eyebrow reveal">O Basecamp</span>
          <h2 className="h-section whatis-h reveal">
            O Basecamp é seu <em>raio-x</em> de estudos.
          </h2>
          <p className="whatis-sub reveal">
            Diferente de testes vocacionais ou questionários genéricos da internet, o Basecamp foi construído sobre os mesmos instrumentos científicos usados em pesquisas educacionais nas maiores universidades do mundo — e adaptado para o contexto do estudante brasileiro do Ensino Médio.
          </p>
          <p className="whatis-sub reveal">
            <strong>Ele não mede inteligência.</strong> Ele mede o que realmente prevê o desempenho escolar: seus hábitos, suas estratégias e suas crenças sobre estudo.
          </p>
        </div>

        <div className="steps">
          {[
          { n: '01', t: 'Você responde o assessment', s: '20 questões na versão pocket, ~10 minutos. Perguntas diretas sobre como você estuda hoje. Não tem certo ou errado.' },
          { n: '02', t: 'Recebe um relatório personalizado', s: 'Diagnóstico completo dos 5 pilares, mostrando onde você está consolidado e onde precisa de atenção.' },
          { n: '03', t: 'Acessa seu plano de ação', s: 'Aulas, conteúdos exclusivos e estratégias práticas para crescer em cada pilar — no seu ritmo, dentro da plataforma.' }].
          map((s, i) =>
          <div key={i} className="step reveal" style={{ '--d': `${i * 120}ms` }}>
              <div className="step-num">{s.n}</div>
              <div className="step-line" />
              <h3 className="step-t">{s.t}</h3>
              <p className="step-s">{s.s}</p>
            </div>
          )}
        </div>

        <div className="whatis-cta reveal">
          <a href="#cta" className="btn btn-ghost">
            Quero descobrir meu perfil agora
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

/* === Pillars (interactive) === */
function Pillars() {
  const [active, setActive] = useState(0);
  const sectionRef = useRef(null);

  return (
    <section className="pillars" id="pilares" ref={sectionRef}>
      <div className="wrap">
        <div className="pillars-head">
          <span className="eyebrow reveal">Os 5 Pilares</span>
          <h2 className="h-section reveal">
            Os 5 pilares que <em>decidem</em> seu rendimento.
          </h2>
          <p className="pillars-sub reveal">
            Cada pilar foi escolhido com base em décadas de pesquisa científica que correlacionam comportamentos de estudo com desempenho acadêmico real.
          </p>
        </div>

        <div className="pillars-grid">
          <div className="pillars-list">
            {PILLARS.map((p, i) =>
            <button
              key={p.key}
              className={`pillar-row ${active === i ? 'is-active' : ''}`}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}>
              
                <span className="pillar-row-n">{p.n}</span>
                <span className="pillar-row-emoji">{p.emoji}</span>
                <span className="pillar-row-title">{p.title}</span>
                <span className="pillar-row-arrow">→</span>
              </button>
            )}
          </div>

          <div className="pillar-detail">
            <div className="pillar-card" key={active}>
              <PillarVisual pillar={PILLARS[active].key} />
              <div className="pillar-body">
                <div className="pillar-meta">
                  <span className="pillar-meta-n">PILAR {PILLARS[active].n}</span>
                  <span className="pillar-meta-dot">·</span>
                  <span className="pillar-meta-title">{PILLARS[active].title}</span>
                </div>
                <h3 className="pillar-q">{PILLARS[active].question}</h3>
                <p className="pillar-text">{PILLARS[active].body}</p>
                <ul className="pillar-tags">
                  {PILLARS[active].tags.map((t) => <li key={t}>{t}</li>)}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* === What you receive === */
function Receive() {
  const items = [
  { t: 'Relatório personalizado completo', s: 'Diagnóstico detalhado dos 5 pilares com seu posicionamento em cada um (Atenção · Em Desenvolvimento · Consolidado · Referência).' },
  { t: 'Plano de ação específico para o seu perfil', s: 'Não são dicas genéricas. São recomendações baseadas exatamente nos pontos que o seu assessment revelou.' },
  { t: 'Acesso à plataforma com aulas exclusivas', s: 'Material desenvolvido pela Belavista para te ajudar a crescer em cada um dos pilares.' },
  { t: 'Versão completa de aprofundamento', s: 'Dentro da plataforma, opte pela versão de 50 questões para um diagnóstico ainda mais detalhado.' },
  { t: 'Resultado imediato', s: 'Sem espera. Você responde, e o relatório aparece.' }];

  return (
    <section className="receive">
      <div className="wrap receive-wrap">
        <div className="receive-text">
          <span className="eyebrow reveal">O que está incluído</span>
          <h2 className="h-section reveal">
            Tudo que você recebe ao fazer o Basecamp.
          </h2>
          <ul className="receive-list">
            {items.map((it, i) =>
            <li key={i} className="reveal" style={{ '--d': `${i * 80}ms` }}>
                <Check />
                <div>
                  <h4>{it.t}</h4>
                  <p>{it.s}</p>
                </div>
              </li>
            )}
          </ul>
        </div>
        <div className="receive-mock reveal">
          <PlatformMock />
        </div>
      </div>
    </section>);

}

/* === Science / why trust === */
function Science() {
  return (
    <section className="science" id="ciencia">
      <div className="wrap">
        <div className="science-head">
          <span className="eyebrow reveal">Embasamento</span>
          <h2 className="h-section reveal">
            Construído sobre <em>ciência</em>, validado em sala de aula.
          </h2>
        </div>

        <div className="science-papers">
          {[
          { tag: 'University of Michigan', name: 'MSLQ', full: 'Motivated Strategies for Learning Questionnaire',
            detail: '10 anos de desenvolvimento iterativo (1980–1991). Testado com mais de 2.000 estudantes em 37 salas de aula de 14 disciplinas.' },
          { tag: 'Brasil · 833 estudantes', name: 'LASSI', full: 'Learning and Study Strategies Inventory',
            detail: 'Validado no contexto brasileiro com 833 estudantes — referência em diagnóstico de estratégias de estudo.' },
          { tag: 'Referência internacional', name: 'PSSHI', full: 'Palsane and Sharma Study Habits Inventory',
            detail: 'Inventário internacionalmente reconhecido para mapear hábitos de estudo de adolescentes e jovens.' }].
          map((p, i) =>
          <article key={i} className="paper reveal" style={{ '--d': `${i * 100}ms` }}>
              <div className="paper-tag">{p.tag}</div>
              <div className="paper-name">{p.name}</div>
              <div className="paper-full">{p.full}</div>
              <p className="paper-detail">{p.detail}</p>
            </article>
          )}
        </div>

        <div className="pilot reveal">
          <div className="pilot-head">
            <span className="eyebrow">Resultado do nosso piloto · 2025</span>
            <h3>70 alunos do 1º ano do Ensino Médio responderam à versão inicial.</h3>
          </div>
          <div className="pilot-stats">
            <Stat n="64%" l="entenderam melhor o conceito de autogestão" />
            <Stat n="57%" l="se identificaram com o caso apresentado" />
            <Stat n="41%" l="disseram que trouxe ideias aplicáveis no dia a dia" />
          </div>
          <p className="pilot-note">
            A partir desse feedback, refinamos o instrumento para ser ainda mais focado, prático e acionável. <strong>A versão atual é o resultado dessa evolução.</strong>
          </p>
        </div>
      </div>
    </section>);

}

function Stat({ n, l }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setShown(true);});
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const numeric = parseInt(n, 10);
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!shown) return;
    let raf;
    const start = performance.now();
    const dur = 1100;
    const step = (t) => {
      const k = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - k, 3);
      setVal(Math.round(numeric * eased));
      if (k < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [shown, numeric]);
  return (
    <div className="stat" ref={ref}>
      <div className="stat-n">{val}<span className="stat-pct">%</span></div>
      <div className="stat-l">{l}</div>
    </div>);

}

/* === CTA / Action === */
function MainCTA() {
  return (
    <section className="cta" id="cta">
      <div className="wrap cta-wrap">
        <div className="cta-grafismo" aria-hidden="true">
          <Boia size={140} color="rgba(255,255,255,0.18)" strokeWidth={1.5} />
        </div>
        <span className="eyebrow cta-eyebrow reveal">Pronto?</span>
        <h2 className="h-section cta-h reveal">
          Pronto para descobrir seu <em>perfil de estudo</em>?
        </h2>
        <p className="cta-sub reveal">
          São 10 minutos do seu dia em troca de um raio-x completo de como você estuda — e de um plano claro do que mudar para render mais. Sem custo. Sem cadastro complicado. Sem promessas mágicas. <strong>Só ciência aplicada à sua realidade.</strong>
        </p>
        <a href="#" className="btn btn-primary btn-xl cta-btn reveal" onClick={(e) => {e.preventDefault();alert('Início do assessment Basecamp (placeholder).');}}>
          Fazer meu assessment Basecamp agora
          <span className="arrow">→</span>
        </a>
        <p className="cta-micro reveal">
          Comece pela versão pocket (20 questões). Se quiser aprofundar depois, a versão completa estará disponível dentro da plataforma.
        </p>
      </div>
    </section>);

}

/* === School / coordinators === */
function ForSchools() {
  return (
    <section className="school">
      <div className="wrap school-wrap">
        <div className="school-side reveal">
          <span className="eyebrow">Para escolas</span>
          <h2 className="h-section">
            Coordenador pedagógico? O Basecamp também pode ser aplicado na sua turma.
          </h2>
        </div>
        <div className="school-side school-detail reveal">
          <p>
            Além do uso individual, o Basecamp pode ser aplicado em turmas inteiras do Ensino Médio, oferecendo à coordenação um diagnóstico completo do perfil coletivo de estudo dos alunos.
          </p>
          <ul className="school-list">
            <li><Boia size={20} color="var(--bv-purple)" strokeWidth={3} /> Acesso individual e personalizado para cada aluno</li>
            <li><Boia size={20} color="var(--bv-purple)" strokeWidth={3} /> Devolutiva presencial conduzida pelo time da Belavista</li>
            <li><Boia size={20} color="var(--bv-purple)" strokeWidth={3} /> Estudo de caso direcionado ao pilar de maior dificuldade coletiva</li>
            <li><Boia size={20} color="var(--bv-purple)" strokeWidth={3} /> Material de apoio para continuidade do trabalho</li>
          </ul>
          <a href="#" className="btn btn-ghost school-cta">
            Quero agendar para minha escola
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

}

/* === FAQ === */
function FAQ() {
  const items = [
  { q: 'O Basecamp tem custo?', a: 'A versão pocket (20 questões) é gratuita. Dentro da plataforma, você poderá explorar a versão completa e os conteúdos complementares.' },
  { q: 'Quanto tempo leva para responder?', a: 'A versão pocket leva cerca de 10 minutos. A versão completa, cerca de 25 minutos.' },
  { q: 'Existe resposta certa ou errada?', a: 'Não. O Basecamp é um instrumento diagnóstico, não uma prova. As respostas mais honestas geram os melhores resultados.' },
  { q: 'Para quem é o Basecamp?', a: 'Foi desenvolvido especificamente para alunos do Ensino Médio (1º, 2º e 3º ano).' },
  { q: 'Posso refazer o assessment depois?', a: 'Sim. Recomendamos refazer a cada 3-6 meses para acompanhar sua evolução nos 5 pilares.' },
  { q: 'Como funciona a aplicação em turmas?', a: 'Coordenadores pedagógicos podem entrar em contato pelo nosso formulário. O time da Belavista agenda a aplicação e a devolutiva presencial.' }];

  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap faq-wrap">
        <div className="faq-head">
          <span className="eyebrow reveal">Perguntas frequentes</span>
          <h2 className="h-section reveal">Ainda em dúvida?</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <button key={i} className={`faq-item ${open === i ? 'open' : ''} reveal`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="faq-num">{String(i + 1).padStart(2, '0')}</span>
                <span>{it.q}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </div>
              <div className="faq-a"><p>{it.a}</p></div>
            </button>
          )}
        </div>
      </div>
    </section>);

}

/* === Final CTA === */
function FinalCTA() {
  return (
    <section className="final">
      <div className="wrap final-wrap">
        <h2 className="h-display final-h reveal">
          Sua jornada de alto rendimento começa com uma pergunta:
          <em>“Onde, exatamente, eu estou hoje?”</em>
        </h2>
        <p className="final-sub reveal">
          O Basecamp responde isso para você. Com ciência, com clareza e com um plano de ação que faz sentido para o seu momento.
        </p>
        <a href="#" className="btn btn-primary btn-xl reveal" onClick={(e) => {e.preventDefault();alert('Início do assessment Basecamp (placeholder).');}}>
          Começar meu assessment agora
          <span className="arrow">→</span>
        </a>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-wrap">
        <div className="foot-brand">
          <img src="assets/basecamp-logo-white.png" alt="Basecamp" className="foot-brand-logo" style={{ width: "400px", objectFit: "cover" }} />
          <div className="foot-tag">Escolha ser mais.</div>
        </div>
        <div className="foot-belavista">
          <span className="foot-belavista-eyebrow">Uma iniciativa</span>
          <img src="assets/belavista-logo-white.png" alt="Faculdade Belavista" className="foot-belavista-img" />
        </div>
        <div className="foot-links">
          <a href="https://faculdadebelavista.edu.br/" target="_blank" rel="noreferrer">faculdadebelavista.edu.br</a>
          <a href="#">Política de privacidade</a>
          <a href="#">Termos de uso</a>
        </div>
        <div className="foot-meta">
          © 2026 Faculdade Belavista. Todos os direitos reservados.
        </div>
      </div>
    </footer>);

}

/* === Tweaks — palette switch === */
const PALETTES = {
  'Roxo principal': { primary: '#511865', primaryDeep: '#3a0f4a', primarySoft: '#6b2483', primaryTint: '#f4eef7', accent: '#0076D6' },
  'Azul institucional': { primary: '#0076D6', primaryDeep: '#005ba8', primarySoft: '#1a8def', primaryTint: '#e8f2fc', accent: '#511865' },
  'Misto editorial': { primary: '#3a0f4a', primaryDeep: '#1f0529', primarySoft: '#511865', primaryTint: '#f4eef7', accent: '#0076D6' }
};

function applyPalette(name) {
  const p = PALETTES[name];
  if (!p) return;
  const r = document.documentElement.style;
  r.setProperty('--bv-purple', p.primary);
  r.setProperty('--bv-purple-deep', p.primaryDeep);
  r.setProperty('--bv-purple-soft', p.primarySoft);
  r.setProperty('--bv-purple-tint', p.primaryTint);
  r.setProperty('--bv-blue', p.accent);
  r.setProperty('--bv-accent', p.primary);
  r.setProperty('--bv-accent-2', p.accent);
}

function BasecampTweaks() {
  const [t, setTweak] = window.useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "Roxo principal",
    "showProgressBar": true
  } /*EDITMODE-END*/);
  useEffect(() => {applyPalette(t.palette);}, [t.palette]);
  useEffect(() => {
    document.documentElement.classList.toggle('no-progress', !t.showProgressBar);
  }, [t.showProgressBar]);
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Paleta">
        <window.TweakRadio
          label="Cor principal"
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={Object.keys(PALETTES)} />
        
      </window.TweakSection>
      <window.TweakSection title="Interface">
        <window.TweakToggle
          label="Barra de progresso"
          value={t.showProgressBar}
          onChange={(v) => setTweak('showProgressBar', v)} />
        
      </window.TweakSection>
    </window.TweaksPanel>);

}

/* === App root === */
function App() {
  useReveal();
  return (
    <>
      <ProgressBar />
      <Nav />
      <main>
        <Hero />
        <LucasSection />
        <WhatIs />
        <Pillars />
        <Receive />
        <Science />
        <MainCTA />
        <ForSchools />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <BasecampTweaks />
    </>);

}

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