/* global React, ReactDOM, Mentoria, Reveal */
const { useState, useEffect } = React;

const MAIN = 'index.html';

function NavM() {
  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={MAIN} aria-label="FRESTA, início">
        <img className="brand" src="assets/wordmark-blue-tight.png" alt="FRESTA" />
      </a>
      <div className="nav-links">
        <a href="#a-mentoria">É para mim?</a>
        <a href="#percurso">O percurso</a>
        <a href="#quem-sou">Quem sou</a>
        <a href="#conversar" className="btn btn-solid nav-cta">Conversar</a>
      </div>
    </nav>
  );
}

function FooterM() {
  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 }}>
              Um espaço de troca para mulheres que querem retomar o controle do próprio caminho.
            </p>
          </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:mentorias@fresta.io">mentorias@fresta.io</a></li>
            </ul>
          </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>
          <a href={MAIN} style={{ color: 'rgba(246,241,232,.7)' }}>Voltar para a FRESTA →</a>
        </div>
      </div>
    </footer>
  );
}

function AppM() {
  return (
    <React.Fragment>
      <NavM />
      <main>
        <Mentoria />
      </main>
      <FooterM />
    </React.Fragment>
  );
}

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