/* eslint-disable */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "white",
  "font": "inter",
  "density": "cozy",
  "showMonogram": true,
  "lang": "pt"
} /*EDITMODE-END*/;

const COPY = {
  pt: {
    hero: { lead: 'Reimaginando o design no esporte', tail: 'e explorando todo o seu potencial na construção de marcas fortes e competitivas.' },
    meta: { location: 'São Paulo · Worldwide', focus: 'Branding · Sportswear' },
    contact: { lead: 'Então,', em: 'vamos conversar?', social: 'Social', work: 'Contato', text: 'Para consultas de trabalho, sinta-se à vontade para entrar em contato comigo.' },
    about: { label: 'Sobre', p1: 'Sou Nicollas Monteiro, designer focado em identidade visual no universo esportivo. Trabalho com clubes, atletas e marcas que precisam de uma narrativa forte, do escudo ao uniforme.', p2: 'Acredito que esporte é cultura, e que cada projeto carrega uma história a ser contada com clareza e personalidade.', stats: [{ n: '5+', l: 'Anos' }, { n: '40+', l: 'Marcas' }, { n: '10+', l: 'Clubes' }] },
    nav: { contact: 'Contato' }
  },
  en: {
    hero: { lead: 'Reimagining sport design', tail: 'and exploring its full potential in building strong, competitive brands.' },
    meta: { location: 'São Paulo · Worldwide', focus: 'Branding · Sportswear' },
    contact: { lead: 'So,', em: 'shall we talk?', social: 'Social', work: 'Contact', text: 'For project inquiries, feel free to get in touch.' },
    about: { label: 'About', p1: 'I\'m Nicollas Monteiro, a designer focused on visual identity in sport. I work with clubs, athletes and brands that need a strong narrative, from crest to kit.', p2: 'I believe sport is culture, and every project carries a story to be told with clarity and personality.', stats: [{ n: '5+', l: 'Years' }, { n: '40+', l: 'Brands' }, { n: '10+', l: 'Clubs' }] },
    nav: { contact: 'Contact' }
  }
};

window.COPY = COPY;

function LocationLabel() {
  return (
    <span>
      <span style={{ color: 'var(--fg)' }}>São Paulo</span>{' '}
      <span style={{ color: 'var(--fg-mute)' }}>Worldwide</span>
    </span>);
}
window.LocationLabel = LocationLabel;

function FocusLabel() {
  return (
    <span>
      <span style={{ color: 'var(--fg)' }}>Branding</span>{' '}
      <span style={{ color: 'var(--fg-mute)' }}>Sportswear</span>
    </span>);
}
window.FocusLabel = FocusLabel;

function useScrolled(threshold = 24) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}
window.useScrolled = useScrolled;

/* True once the hero has scrolled (mostly) out of view. Falls back to a small
   threshold when there's no .hero on the page (e.g. the case study page). */
function useHeroPassed() {
  const [passed, setPassed] = React.useState(false);
  React.useEffect(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      const hero = document.querySelector('.hero');
      const trigger = hero
        ? hero.getBoundingClientRect().bottom + window.scrollY - 90
        : 24;
      setPassed(window.scrollY > trigger);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); };
    compute();
    setTimeout(compute, 120);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return passed;
}
window.useHeroPassed = useHeroPassed;

function Header({ lang, onToggleLang, copy }) {
  const scrolled = useHeroPassed();
  return (
    <header className={`topnav${scrolled ? ' scrolled' : ''}`}>
      <div className="topnav-inner">
        <a href="index.html" className="logo" aria-label="Início">
          <img src="assets/logo-nm.png" alt="Nicolas Monteiro" />
        </a>
        <nav className="nav-actions">
          <a className="nav-icon" href="https://www.instagram.com/monteiro.nicollas/" target="_blank" rel="noopener" aria-label="Instagram">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect x="1" y="1" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.3" />
              <circle cx="7" cy="7" r="2.6" stroke="currentColor" strokeWidth="1.3" />
              <circle cx="10.4" cy="3.6" r="0.8" fill="currentColor" />
            </svg>
          </a>
          <button
            className="nav-lang"
            data-lang={lang}
            onClick={onToggleLang}
            aria-label="Idioma">
            
            <span className="nav-lang-thumb" />
            <span className="nav-lang-opt" data-v="pt">PT</span>
            <span className="nav-lang-opt" data-v="en">EN</span>
          </button>
          <a className="nav-cta" href="https://api.whatsapp.com/send/?phone=5511911451057&text=Ol%C3%A1%2C+gostaria+de+conversar+sobre+um+projeto+de+Identidade+Visual&type=phone_number&app_absent=0" target="_blank" rel="noopener">{copy.nav.contact}</a>
        </nav>
      </div>
    </header>);

}

function Hero({ showMonogram, copy }) {
  // Re-key on language change so animations re-fire
  const key = copy.hero.lead;
  return (
    <section className="hero">
      {showMonogram &&
        <div className="hero-motion" aria-hidden="true">
          <HeroLiquid />
        </div>}
      <div className="container hero-content">
        <h1 className="hero-title">
          <SplitText key={`lead-${key}`} text={copy.hero.lead} baseDelay={480} />
          {' '}
          <em>
            <SplitText key={`tail-${key}`} text={copy.hero.tail} baseDelay={480 + copy.hero.lead.split(/\s+/).length * 55} />
          </em>
        </h1>
        <div className="hero-meta reveal">
          <div><LocationLabel /></div>
          <div><FocusLabel /></div>
        </div>
      </div>
    </section>);

}

function Work() {
  return (
    <section className="container" id="work" data-screen-label="Selected Work">
      <div className="work-spacer" />
      <div className="grid">
        {window.PROJECTS.map((p, i) => <ProjectCard key={p.id} project={p} index={i} />)}
      </div>
    </section>);

}

function About({ copy }) {
  return (
    <section className="container about" id="about" data-screen-label="About">
      <div className="about-portrait reveal">
        <img src="assets/portrait.png" alt="Nicollas Monteiro" />
      </div>
      <div className="about-body reveal">
        <div className="about-label">{copy.about.label}</div>
        <p>{copy.about.p1}</p>
        <p>{copy.about.p2}</p>
        <div className="about-stats">
          {copy.about.stats.map((s, i) =>
          <div key={i}><b>{s.n}</b><span>{s.l}</span></div>
          )}
        </div>
      </div>
    </section>);

}

function Contact({ copy }) {
  return (
    <section className="container contact" id="contact" data-screen-label="Contact">
      <div className="reveal">
        <h3>{copy.contact.lead}<br /><em>{copy.contact.em}</em></h3>
      </div>
      <div className="reveal">
        <div className="contact-col-label">{copy.contact.social}</div>
        <ul className="contact-list">
          <li><a href="https://www.behance.net/nicollas_monteiro" target="_blank" rel="noopener">Behance</a></li>
          <li><a href="https://www.instagram.com/monteiro.nicollas/" target="_blank" rel="noopener">Instagram</a></li>
        </ul>
      </div>
      <div className="reveal">
        <div className="contact-col-label">{copy.contact.work}</div>
        <p className="contact-text">{copy.contact.text}</p>
        <a className="contact-email" href="mailto:nicollasmonteiro.c@gmail.com">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
            <rect x="1.5" y="3" width="13" height="10" rx="2" stroke="currentColor" strokeWidth="1.3" />
            <path d="M2.5 4.5 8 8.5l5.5-4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          nicollasmonteiro.c@gmail.com
        </a>
      </div>
    </section>);

}

function Footer() {
  return (
    <div className="container">
      <div className="footer-bar">
        <span>© 2026 — Monteiro Studio</span>
        <LocationLabel />
      </div>
    </div>);

}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {applyAccent(tweaks.accent);}, [tweaks.accent]);
  React.useEffect(() => {applyType(tweaks.font);}, [tweaks.font]);
  React.useEffect(() => {applyDensity(tweaks.density);}, [tweaks.density]);

  useReveal();

  const copy = COPY[tweaks.lang] || COPY.pt;
  const toggleLang = () => setTweak('lang', tweaks.lang === 'pt' ? 'en' : 'pt');

  return (
    <>
      <Header lang={tweaks.lang} onToggleLang={toggleLang} copy={copy} />
      <Hero showMonogram={tweaks.showMonogram} copy={copy} />
      <Work />
      <About copy={copy} />
      <Contact copy={copy} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Aparência">
          <TweakRadio
            label="Acento"
            value={tweaks.accent}
            options={[
            { value: 'white', label: 'Branco' },
            { value: 'lime', label: 'Lima' },
            { value: 'orange', label: 'Laranja' },
            { value: 'yellow', label: 'Amarelo' },
            { value: 'blue', label: 'Azul' }]
            }
            onChange={(v) => setTweak('accent', v)} />
          
        </TweakSection>

        <TweakSection title="Tipografia">
          <TweakSelect
            label="Família"
            value={tweaks.font}
            options={[
            { value: 'inter', label: 'Inter (default)' },
            { value: 'inter-tight', label: 'Inter Tight' },
            { value: 'space-grotesk', label: 'Space Grotesk' }]
            }
            onChange={(v) => setTweak('font', v)} />
          
        </TweakSection>

        <TweakSection title="Layout">
          <TweakRadio
            label="Densidade do grid"
            value={tweaks.density}
            options={[
            { value: 'tight', label: 'Apertado' },
            { value: 'cozy', label: 'Padrão' },
            { value: 'loose', label: 'Largo' }]
            }
            onChange={(v) => setTweak('density', v)} />
          
          <TweakToggle
            label="Fundo animado no hero"
            value={tweaks.showMonogram}
            onChange={(v) => setTweak('showMonogram', v)} />
          
        </TweakSection>

        <TweakSection title="Conteúdo">
          <TweakRadio
            label="Idioma"
            value={tweaks.lang}
            options={[
            { value: 'pt', label: 'Português' },
            { value: 'en', label: 'English' }]
            }
            onChange={(v) => setTweak('lang', v)} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

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