/* App: Rodrigo Goulart Ramos portfolio */
const { useState, useEffect, useRef } = React;

function useTweaks(defaults) {
  const [state, setState] = useState(() => ({ ...defaults, ...(window.TWEAK_DEFAULTS || {}) }));
  const setTweak = (k, v) => {
    const edits = typeof k === 'object' ? k : { [k]: v };
    setState((s) => ({ ...s, ...edits }));
    try {window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');} catch (e) {}
  };
  return [state, setTweak];
}

function Topbar({ t, lang, setLang, theme, setTheme, scrolled }) {
  return (
    <header className={"topbar" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="brand">
        <span className="brand-mark">RG</span>
        <span>Rodrigo Goulart</span>
      </a>
      <nav className="nav">
        <a href="#about"><span className="nav-num">01</span>{t.nav.about}</a>
        <a href="#exp"><span className="nav-num">02</span>{t.nav.exp}</a>
        <a href="#projects"><span className="nav-num">03</span>{t.nav.proj}</a>
        <a href="#stack"><span className="nav-num">04</span>{t.nav.stack}</a>
        <a href="#edu"><span className="nav-num">05</span>{t.nav.edu}</a>
        <a href="#contact"><span className="nav-num">06</span>{t.nav.contact}</a>
      </nav>
      <div className="topbar-controls">
        <div className="lang-toggle theme-toggle" title="Tema">
          <button className={theme === 'light' ? 'active' : ''} onClick={() => setTheme('light')} aria-label="Light mode">☀</button>
          <button className={theme === 'dark' ? 'active' : ''} onClick={() => setTheme('dark')} aria-label="Dark mode">☾</button>
        </div>
        <div className="lang-toggle">
          <button className={lang === 'pt' ? 'active' : ''} onClick={() => setLang('pt')}>PT</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>
    </header>);

}

function Hero({ t }) {
  return (
    <section className="hero" id="top">
      <div className="hero-text">
        <div className="eyebrow"><span className="dot"></span>{t.hero.eyebrow}</div>
        <h1>
          {t.hero.title_a}
          <br />
          <span className="arrow">{t.hero.title_arrow}</span>
          <span className="accent"> {t.hero.title_b}</span>
        </h1>
        <dl className="hero-meta">
          {t.hero.meta.map((m, i) =>
          <div key={i}>
              <dt>{m.k}</dt>
              <dd>{m.v}</dd>
            </div>
          )}
        </dl>
        <div className="hero-cta">
          <a href="#projects" className="btn">{t.hero.cta_primary}<span className="arrow-r">→</span></a>
          <a href="#contact" className="btn ghost">{t.hero.cta_secondary}</a>
        </div>
      </div>
      <div className="hero-frame">
        <div className="corner tl"></div>
        <div className="corner tr"></div>
        <div className="corner bl"></div>
        <div className="corner br"></div>
        <div className="photo" role="img" aria-label="Rodrigo Goulart Ramos"></div>
        <div className="frame-tag">N°001 — <span>{t.hero.tag_caption}</span></div>
        <div className="term-badge">
          <div><span className="t-comment">// whoami</span></div>
          <div><span className="t-key">const</span> <span className="t-prop">me</span> = &#123;</div>
          <div>&nbsp;&nbsp;name: <span className="t-str">"Rodrigo"</span>,</div>
          <div>&nbsp;&nbsp;role: <span className="t-str">"dev + cpa"</span>,</div>
          <div>&nbsp;&nbsp;coffee: <span className="t-str">"infinite"</span></div>
          <div>&#125;<span className="cursor"></span></div>
        </div>
      </div>
      <div className="scroll-hint">SCROLL</div>
    </section>);

}

function About({ t }) {
  return (
    <section id="about">
      <div className="sec-head">
        <div className="sec-num"><span>01</span>SOBRE / ABOUT</div>
        <h2 className="sec-title">{t.about.title_a} <em>{t.about.title_em}</em></h2>
      </div>
      <div className="about-grid">
        <div className="about-bio">
          <p><span className="lead">{t.about.lead}</span></p>
          <p>{t.about.body}</p>
        </div>
        <div>
          <div className="about-card">
            <div className="label">{t.about.card1_label}</div>
            <h3>{t.about.card1_title}</h3>
            <p>{t.about.card1_text}</p>
          </div>
          <div className="about-card dev" style={{ backgroundColor: "rgb(20, 25, 38)" }}>
            <div className="label">{t.about.card2_label}</div>
            <h3>{t.about.card2_title}</h3>
            <p dangerouslySetInnerHTML={{ __html: t.about.card2_text_html }} />
          </div>
        </div>
      </div>
    </section>);

}

function Experience({ t }) {
  return (
    <div className="exp-section" id="exp">
      <div className="sec-wrap">
        <div className="sec-head">
          <div className="sec-num"><span>{t.exp.num}</span>EXP</div>
          <h2 className="sec-title">{t.exp.title_a} <em>{t.exp.title_em}</em></h2>
        </div>
        <div className="ledger">
          <div className="ledger-head">
            <div>{t.exp.head[0]}</div>
            <div>{t.exp.head[1]}</div>
            <div className="col-desc">{t.exp.head[2]}</div>
            <div style={{ textAlign: 'right' }}>{t.exp.head[3]}</div>
          </div>
          {t.exp.rows.map((r, i) =>
          <div className="ledger-row" key={i}>
              <div className="yr">{r.yr}</div>
              <div className="role">{r.role}</div>
              <div className="desc">{r.desc}</div>
              <div className="tag">{r.tag}</div>
            </div>
          )}
        </div>
        <div className="exp-stats">
          {t.exp.stats.map((s, i) =>
          <div className="exp-stat" key={i}>
              <div className="num">{s.n}<sup>{s.sup}</sup></div>
              <div className="lbl">{s.l}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function Projects({ t }) {
  const bars = [40, 60, 35, 75, 55, 82, 68, 90, 72, 88, 95, 78];
  return (
    <section id="projects" className="proj-section">
      <div className="sec-head">
        <div className="sec-num"><span>{t.proj.num}</span>WORK</div>
        <h2 className="sec-title">{t.proj.title_a} <em>{t.proj.title_em}</em></h2>
      </div>
      <div className="proj-featured">
        <div className="meta">
          <div>
            <div className="featured-label">★ {t.proj.featured_label}</div>
            <h3>{t.proj.featured_title_a} <em>{t.proj.featured_title_em}</em></h3>
            <p>{t.proj.featured_text}</p>
            <div className="stack-row">
              {t.proj.stack.map((s, i) => <span key={i} className="p-tag">{s}</span>)}
            </div>
          </div>
        </div>
        <div className="kpi-mock">
          <div className="km-head">
            <span>{t.proj.kpi_head[0]}</span>
            <span>{t.proj.kpi_head[1]}</span>
          </div>
          <div className="km-grid">
            {t.proj.kpi_cards.map((c, i) =>
            <div className="km-card" key={i}>
                <div className="lbl">{c.l}</div>
                <div className="val">{c.v}</div>
                <div className={"delta" + (c.up ? "" : " dn")}>{c.up ? "▲" : "▼"} {c.d}</div>
              </div>
            )}
          </div>
          <div className="km-chart">
            {bars.map((h, i) => <div key={i} className="km-bar" style={{ height: h + '%' }}></div>)}
          </div>
        </div>
      </div>
      <div className="projects" style={{ marginTop: 80 }}>
        {t.proj.list.map((p, i) =>
        <a className="project" key={i} href="#contact">
            <div className="p-num">{p.num}</div>
            <div className="p-title">{p.t}</div>
            <div className="p-desc">{p.d}</div>
            <div className="p-tags">
              {p.tags.map((tg, j) => <span key={j} className="p-tag">{tg}</span>)}
            </div>
          </a>
        )}
      </div>
    </section>);

}

function Stack({ t }) {
  return (
    <div className="stack-section" id="stack">
      <div className="sec-wrap">
        <div className="sec-head">
          <div className="sec-num"><span>{t.stack.num}</span>STACK</div>
          <h2 className="sec-title">{t.stack.title_a} <em>{t.stack.title_em}</em></h2>
        </div>
        <div className="stack-grid">
          {t.stack.items.map((it, i) =>
          <div className="stack-item" key={i}>
              <div className="si-glyph">{it.glyph}</div>
              <div className="si-name">{it.n}</div>
              <div className="si-meta">{it.m}</div>
              <div className="si-bar" style={{ '--lvl': it.lvl }}></div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function Education({ t }) {
  return (
    <section id="edu" className="edu-section">
      <div className="sec-head">
        <div className="sec-num"><span>{t.edu.num}</span>EDU</div>
        <h2 className="sec-title">{t.edu.title_a} <em>{t.edu.title_em}</em></h2>
      </div>
      <div className="edu">
        <div className="edu-card">
          <div className="yr">{t.edu.uni_yr}</div>
          <h3>{t.edu.uni_t_a} <em>{t.edu.uni_t_em}</em></h3>
          <div className="school">{t.edu.uni_school}</div>
          <p>{t.edu.uni_text}</p>
          <div className="progress">
            <span>{t.edu.uni_p1} · <strong>{t.edu.uni_p1v}</strong></span>
            <span>{t.edu.uni_p2} · <strong>{t.edu.uni_p2v}</strong></span>
          </div>
        </div>
        <div className="edu-card">
          <div className="yr">{t.edu.cont_yr}</div>
          <h3>{t.edu.cont_t_a} <em>{t.edu.cont_t_em}</em></h3>
          <div className="school">{t.edu.cont_school}</div>
          <p>{t.edu.cont_text}</p>
          <div className="progress">
            <span>{t.edu.cont_p1} · <strong>{t.edu.cont_p1v}</strong></span>
            <span>{t.edu.cont_p2} · <strong>{t.edu.cont_p2v}</strong></span>
          </div>
        </div>
      </div>
    </section>);

}

function Contact({ t }) {
  return (
    <div className="contact-section" id="contact">
      <div className="contact-wrap">
        <div className="sec-head">
          <div className="sec-num"><span>{t.contact.num}</span>CONTACT</div>
          <h2 className="sec-title">{t.contact.title_a} <em>{t.contact.title_em}</em></h2>
        </div>
        <div className="contact-big">
          {t.contact.lead_a}<a href={t.contact.lead_href || "mailto:" + t.contact.lead_link} target="_blank" rel="noreferrer">{t.contact.lead_link}</a>{t.contact.lead_b}
        </div>
        <div className="contact-grid">
          {t.contact.cells.map((c, i) =>
          <div className="contact-cell" key={i}>
              <div className="lbl">{c.l}</div>
              <a href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noreferrer">
                {c.a}<span className="ext">↗</span>
              </a>
            </div>
          )}
        </div>
        <div className="foot">
          <span>{t.contact.foot_l}</span>
          <span>{t.contact.foot_r}</span>
        </div>
      </div>
    </div>);

}

function App() {
  const [tweaks, setTweaks] = useTweaks({ theme: 'light', lang: 'pt' });
  const { theme, lang } = tweaks;
  const t = window.COPY[lang] || window.COPY.pt;
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('lang', lang === 'pt' ? 'pt-BR' : 'en');
  }, [theme, lang]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Reveal observer
  useEffect(() => {
    const els = document.querySelectorAll('section, .exp-section, .stack-section, .contact-section');
    els.forEach((el) => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.08 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  const setLang = (l) => setTweaks('lang', l);
  const setTheme = (th) => setTweaks('theme', th);

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  return (
    <div>
      <Topbar t={t} lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} scrolled={scrolled} />
      <Hero t={t} />
      <About t={t} />
      <Experience t={t} />
      <Projects t={t} />
      <Stack t={t} />
      <Education t={t} />
      <Contact t={t} />
      {TP ?
      <TP title="Tweaks">
          <TS label="Aparência / Appearance">
            <TR label="Tema / Theme" value={theme} options={['light', 'dark']} onChange={(v) => setTweaks('theme', v)} />
            <TR label="Idioma / Language" value={lang} options={['pt', 'en']} onChange={(v) => setTweaks('lang', v)} />
          </TS>
        </TP> :
      null}
    </div>);

}

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