/* global React, ReactDOM, Hero, Abertura, Dor, Solucao, Beneficios, Bio, Oferta, Garantia, Urgencia, Faq, CtaFinal, Mentoria, Sym, Reveal */
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#topo" aria-label="FRESTA, início">
        <img className="brand" src="assets/wordmark-blue-tight.png" alt="FRESTA" />
      </a>
      <div className="nav-links">
        <a href="#solucao">Pilares</a>
        <a href="#oferta">Frentes</a>
        <a href="mentoria.html" target="_blank" rel="noopener">Mentoria</a>
        <a href="#faq">Dúvidas</a>
        <a href="#contato" className="btn btn-solid nav-cta">Conversar</a>
      </div>
    </nav>
  );
}

function PS() {
  return (
    <section className="section bg-paper" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal><hr className="fresta-rule" style={{ marginBottom: 'clamp(50px,7vw,80px)' }} /></Reveal>
        <Reveal className="text-col">
          <p className="meta" style={{ color: 'var(--gold-accent)', fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', fontSize: 12.5, marginBottom: 18 }}>P.S.</p>
          <p className="h-sub" style={{ color: 'var(--blue)' }}>
            Relevância cultural não se compra e não se automatiza.
          </p>
          <p className="lead" style={{ marginTop: 20 }}>
            Aqui a gente constrói a partir de escuta, estratégia e conexões reais. É nisso que a FRESTA trabalha.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <img className="foot-sym" src="assets/symbol-paper.png" alt="" aria-hidden="true" style={{ position: 'absolute', right: '-6%', top: '-30%', height: '150%', width: 'auto', maxWidth: 'none', opacity: .06 }} />
      <div className="container" style={{ position: 'relative' }}>
        <img className="foot-mark" src="assets/wordmark-paper-tight.png" alt="FRESTA" />
        <p className="foot-def" style={{ fontFamily: 'var(--display-active)', fontStyle: 'italic', fontSize: 'clamp(18px,2vw,22px)', color: 'var(--gold-soft)', margin: '18px 0 0' }}>
          fresta <span style={{ fontStyle: 'normal', fontFamily: 'var(--sans)', fontSize: 13, letterSpacing: '.04em', opacity: .7 }}>s.f.</span> abertura por onde entra a luz.
        </p>
        <div className="two-col" style={{ marginTop: 'clamp(40px,6vw,72px)', gridTemplateColumns: '1.4fr 1fr', gap: 40 }}>
          <div>
            <p className="lead" style={{ maxWidth: 460, color: 'rgba(246,241,232,.9)', margin: 0 }}>
              Estratégia que conecta ao que realmente importa.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 60, flexWrap: 'wrap' }}>
            <div>
              <p className="meta" style={{ textTransform: 'uppercase', letterSpacing: '.16em', fontSize: 11.5, opacity: .55, marginBottom: 16 }}>Navegar</p>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 11, fontSize: 15 }}>
                <li><a href="#solucao">Marcas e agências</a></li>
                <li><a href="#oferta">Projetos criativos</a></li>
                <li><a href="mentoria.html" target="_blank" rel="noopener">Mentoria</a></li>
                <li><a href="#faq">Dúvidas</a></li>
              </ul>
            </div>
            <div>
              <p className="meta" style={{ textTransform: 'uppercase', letterSpacing: '.16em', fontSize: 11.5, opacity: .55, marginBottom: 16 }}>Contato</p>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 11, fontSize: 15 }}>
                <li><a href="mailto:hello@fresta.io">hello@fresta.io</a></li>
                <li><a href="mailto:mentorias@fresta.io">mentorias@fresta.io</a></li>
              </ul>
            </div>
          </div>
        </div>
        <hr className="fresta-rule fresta-rule--blue" style={{ margin: 'clamp(48px,7vw,80px) 0 28px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 13, opacity: .55 }}>
          <span>© {new Date().getFullYear()} FRESTA</span>
          <span>Estratégia · Cultura · Conexão</span>
        </div>
      </div>
    </footer>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "titleFont": "EB Garamond",
  "goldAccent": "#A96C29",
  "sectionMark": "Filete + símbolo",
  "motion": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  'EB Garamond': "'EB Garamond', Georgia, serif",
  'Cormorant': "'Cormorant Garamond', Georgia, serif",
  'Bodoni Moda': "'Bodoni Moda', Georgia, serif",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--display-active', FONT_MAP[t.titleFont] || FONT_MAP['EB Garamond']);
    r.setProperty('--gold-accent', t.goldAccent);
    document.body.classList.toggle('mark-a', t.sectionMark === 'Só símbolo');
    document.body.classList.toggle('no-motion', !t.motion);
  }, [t.titleFont, t.goldAccent, t.sectionMark, t.motion]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Abertura />
        <Dor />
        <Solucao />
        <Beneficios />
        <Oferta />
        <Bio />
        <Faq />
        <CtaFinal />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tipografia" />
        <TweakRadio
          label="Títulos"
          value={t.titleFont}
          options={['EB Garamond', 'Cormorant', 'Bodoni Moda']}
          onChange={(v) => setTweak('titleFont', v)}
        />
        <TweakSection label="Cor de acento" />
        <TweakColor
          label="Dourado"
          value={t.goldAccent}
          options={['#A96C29', '#B5793A', '#8A5620', '#9A8049']}
          onChange={(v) => setTweak('goldAccent', v)}
        />
        <TweakSection label="Marcador de seção" />
        <TweakRadio
          label="Estilo"
          value={t.sectionMark}
          options={['Filete + símbolo', 'Só símbolo']}
          onChange={(v) => setTweak('sectionMark', v)}
        />
        <TweakSection label="Movimento" />
        <TweakToggle
          label="Animações ao rolar"
          value={t.motion}
          onChange={(v) => setTweak('motion', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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