// ———————————————————————— Portfolio — main React app ————————————————————————
const { useState, useEffect, useRef, useMemo } = React;

// TWEAK DEFAULTS (language, accent hue)
const TWEAKS = /*EDITMODE-BEGIN*/{
  "lang": "pt",
  "accentHue": 82,
  "showTweaks": false
}/*EDITMODE-END*/;

// ——— small bits

function Nav({ lang, setLang, t }) {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const s = d.toLocaleTimeString("en-GB", {
        hour: "2-digit", minute: "2-digit", second: "2-digit",
        timeZone: "America/Sao_Paulo",
      });
      setTime(s + " SP");
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <nav className="nav">
      <span className="brand"><span className="dot"></span>Antunes<span style={{color:"var(--fg-4)", margin:"0 6px"}}>/</span>26</span>
      <span className="links">
        <a href="#work">{t.nav.work}</a>
        <a href="#about">{t.nav.about}</a>
        <a href="#stack">{t.nav.stack}</a>
        <a href="#experience">{t.nav.experience}</a>
        <a href="#certs">{t.nav.certs}</a>
        <a href="#contact">{t.nav.contact}</a>
      </span>
      <span className="time">{time}</span>
    </nav>
  );
}

function Orbit() {
  return (
    <div className="orbit" aria-hidden="true">
      <div className="core"></div>
      <div className="ring"></div>
      <div className="ring r2"></div>
      <div className="ring r3"></div>
      <div className="ring r4"></div>
      <div className="spin"><div className="node" style={{transform:"translate(280px, -4px)"}}></div></div>
      <div className="spin s2"><div className="node" style={{transform:"translate(220px, -4px)", background:"var(--fg)", boxShadow:"none", opacity:0.5}}></div></div>
      <div className="spin s3"><div className="node" style={{transform:"translate(160px, -4px)", width:"4px", height:"4px"}}></div></div>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section className="hero container" id="top">
      <Orbit />
      <div className="hero-meta">
        <div><span className="mono">IDX</span><span className="val">{t.hero.id}</span></div>
        <div><span className="mono">STATUS</span><span className="val avail">{t.hero.availability}</span></div>
        <div><span className="mono">BASED</span><span className="val">{t.hero.based}</span></div>
        <div><span className="mono">FOCUS</span><span className="val">{t.hero.focus}</span></div>
      </div>

      <div className="hero-type">
        <h1>
          <span className="line"><span>{t.hero.name1}</span></span>
          <span className="line"><span><em>{t.hero.name2}</em><span className="slash"> {t.hero.slash} </span></span></span>
          <span className="line"><span>{t.hero.role} <em>{t.hero.roleEm}</em></span></span>
        </h1>
      </div>

      <div className="hero-foot">
        <p className="tagline">{t.hero.tagline}</p>
        <span className="mono" style={{color:"var(--fg-3)"}}>{t.hero.exp}</span>
        <span className="scroll"><span className="ar"></span>{t.hero.scroll}</span>
      </div>
    </section>
  );
}

function Marquee({ items }) {
  const loop = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

function SectionHead({ num, title, desc }) {
  return (
    <div className="section-head reveal">
      <div className="num">// {num}</div>
      <div>
        <h2 className="title">{title}</h2>
        {desc && <p className="desc">{desc}</p>}
      </div>
    </div>
  );
}

function About({ t }) {
  return (
    <section className="section container" id="about">
      <SectionHead num={t.about.num} title={t.about.title} desc={t.about.desc} />
      <div className="about reveal">
        <div>
          <p className="lead">{t.about.lead}</p>
          <div className="body">
            {t.about.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
        <div className="stat-grid">
          {t.about.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="n">{s.n}<sub>{s.sub}</sub></div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Work({ t, onOpen }) {
  const [hov, setHov] = useState(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <section className="section container" id="work" onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      <SectionHead num={t.work.num} title={t.work.title} desc={t.work.desc} />
      <div className="work-list reveal">
        {PROJECTS.map((p, i) => (
          <div className="work-row" key={p.n}
               onMouseEnter={() => setHov(i)}
               onMouseLeave={() => setHov(null)}
               onClick={() => onOpen(i)}>
            <div className="idx">{p.n}</div>
            <div className="name">{p.name}</div>
            <div className="cat">{p.cat}</div>
            <div className="year">{p.year}</div>
            <div className="arrow">→</div>
          </div>
        ))}
      </div>
      <div
        className={`work-preview ${hov !== null ? "active" : ""}`}
        style={{ left: pos.x, top: pos.y }}
      >
        {hov !== null && <img src={PROJECTS[hov].img} alt="" />}
      </div>
    </section>
  );
}

function ProjectModal({ project, lang, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = project ? "hidden" : "";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [project, onClose]);

  return (
    <div className={`modal-backdrop ${project ? "open" : ""}`} onClick={onClose}>
      {project && (
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-image">
            <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
            <img src={project.img} alt={project.name} />
          </div>
          <div className="modal-body">
            <div className="meta">
              <span className="idx">// {project.n}</span>
              <span>{project.year}</span>
            </div>
            <h3>{project.name}</h3>
            <div className="cat-line">{project.cat}</div>
            <p className="desc">{project.desc}</p>
            {project.stack && (
              <div className="stack-line">
                {project.stack.map(s => <span key={s}>{s}</span>)}
              </div>
            )}
            <div className="actions">
              {project.url && project.url !== "#" ? (
                <a className="btn primary" href={project.url} target="_blank" rel="noreferrer">
                  {lang === "pt" ? "Visitar site" : "Visit site"}<span className="arr">↗</span>
                </a>
              ) : (
                <span className="btn" style={{opacity:0.5, cursor:"default"}}>
                  {lang === "pt" ? "Projeto privado" : "Private project"}
                </span>
              )}
              <button className="btn" onClick={onClose}>
                {lang === "pt" ? "Fechar" : "Close"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Stack({ t }) {
  const [active, setActive] = useState(t.stack.categories[0]);
  const grouped = useMemo(() => {
    const by = {};
    STACK.forEach(s => { (by[s.cat] = by[s.cat] || []).push(s); });
    return by;
  }, []);
  const counts = useMemo(() => {
    const c = { [t.stack.categories[0]]: STACK.length };
    Object.keys(grouped).forEach(k => c[k] = grouped[k].length);
    return c;
  }, [grouped, t]);

  const shown = active === t.stack.categories[0] ? STACK : STACK.filter(s => s.cat === active);

  return (
    <section className="section container" id="stack">
      <SectionHead num={t.stack.num} title={t.stack.title} desc={t.stack.desc} />
      <div className="stack reveal">
        <div className="filters">
          {t.stack.categories.map((c) => {
            // map English/Portuguese category label to the data's Portuguese label for filtering
            const dataKey = c === "All" ? "Todas"
                          : c === "Languages" ? "Linguagens"
                          : c === "Front-end" ? "Front-end"
                          : c === "Back-end" ? "Back-end"
                          : c === "DevOps & Cloud" ? "DevOps & Cloud"
                          : c === "Data & AI" ? "Dados & IA"
                          : c;
            const n = counts[dataKey] ?? 0;
            return (
              <button
                key={c}
                className={`filter ${active === c ? "active" : ""}`}
                onClick={() => setActive(c)}
              >
                <span>{c}</span>
                <span className="n">{String(n).padStart(2, "0")}</span>
              </button>
            );
          })}
        </div>
        <div className="chips">
          {STACK.map((s, i) => {
            const dataKey = active === "All" ? "Todas"
                          : active === "Languages" ? "Linguagens"
                          : active === "Front-end" ? "Front-end"
                          : active === "Back-end" ? "Back-end"
                          : active === "DevOps & Cloud" ? "DevOps & Cloud"
                          : active === "Data & AI" ? "Dados & IA"
                          : active;
            const visible = dataKey === "Todas" || s.cat === dataKey;
            return (
              <span
                key={s.name}
                className="chip"
                data-level={s.level || ""}
                style={{
                  opacity: visible ? 1 : 0.18,
                  filter: visible ? "none" : "grayscale(1)",
                  transitionDelay: `${i * 12}ms`,
                }}
              >
                {s.name}
              </span>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Experience({ t }) {
  return (
    <section className="section container" id="experience">
      <SectionHead num={t.experience.num} title={t.experience.title} desc={t.experience.desc} />
      <div className="timeline reveal">
        {EXPERIENCE.map((e, i) => (
          <div className="tl-item" key={i}>
            <div>
              <div className="role">{e.role}</div>
              <div className="co">{e.co}</div>
              <div className="desc">{e.desc}</div>
            </div>
            <div className="period">{e.period}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Education({ t, lang }) {
  return (
    <section className="section container" id="education">
      <SectionHead num={t.education.num} title={t.education.title} desc={t.education.desc} />
      <div className="edu-grid reveal">
        {EDUCATION.map((e, i) => (
          <div className="edu-card" key={i}>
            <div className="top">
              <span className="deg">{e.degree[lang]} · {e.kind[lang]}</span>
              {e.status === "current" && <span className="now">{lang === "pt" ? "Em curso" : "In progress"}</span>}
            </div>
            <h3 className="course">{e.course[lang]}</h3>
            <div className="school">
              <span>{e.school}</span>
              <span className="kind">{e.kind[lang]}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Certs({ t, lang }) {
  const ALL = t.certs.allIssuers;
  const [active, setActive] = useState(ALL);

  // Build unified list from Credly groups + Oracle locals
  const items = useMemo(() => {
    const out = [];
    // issuer → short mark (monogram) used in the designed badge medallion
    const MARKS = {
      "Cisco":    "Cs",
      "IBM":      "IBM",
      "AWS":      "aws",
      "NASA":     "✦",
      "Security": "⎆",
      "GitHub":   "⌥",
      "Oracle":   "O",
    };
    CERTS_GROUPS.forEach(g => {
      g.items.forEach(it => out.push({
        issuer: g.issuer,
        color: g.color,
        name: it.name,
        mark: MARKS[g.issuer] || "✦",
        isImage: false,
        url: `https://www.credly.com/badges/${it.id}`,
      }));
    });
    CERTS_ORACLE.items.forEach(it => out.push({
      issuer: CERTS_ORACLE.issuer,
      color: CERTS_ORACLE.color,
      name: it.name,
      img: it.img,
      isImage: true,
      url: it.url || null,
    }));
    return out;
  }, []);

  const issuers = useMemo(() => {
    const map = {};
    items.forEach(i => { map[i.issuer] = (map[i.issuer] || 0) + 1; });
    return Object.entries(map).map(([issuer, count]) => {
      const color = (items.find(i => i.issuer === issuer) || {}).color;
      return { issuer, count, color };
    });
  }, [items]);

  const visible = active === ALL ? items : items.filter(i => i.issuer === active);

  return (
    <section className="section container" id="certs">
      <SectionHead num={t.certs.num} title={t.certs.title} desc={t.certs.desc} />
      <div className="reveal">
        <div className="certs-head">
          <button className={`pill ${active === ALL ? "on" : ""}`} onClick={() => setActive(ALL)}>
            {ALL} <span className="count">{items.length}</span>
          </button>
          {issuers.map(g => (
            <button
              key={g.issuer}
              className={`pill ${active === g.issuer ? "on" : ""}`}
              onClick={() => setActive(g.issuer)}
            >
              <span className="dot-c" style={{ background: g.color }} />
              {g.issuer}
              <span className="count">{g.count}</span>
            </button>
          ))}
        </div>
        <div className="certs-grid">
          {visible.map((c, i) => {
            const Tag = c.url ? "a" : "div";
            const glow = `color-mix(in oklab, ${c.color} 20%, transparent)`;
            return (
              <Tag
                key={`${c.issuer}-${i}`}
                className="cert-card"
                href={c.url || undefined}
                target={c.url ? "_blank" : undefined}
                rel={c.url ? "noreferrer" : undefined}
                style={{ "--cert-glow": glow, "--cert-color": c.color }}
              >
                <div className="badge-wrap">
                  {c.isImage
                    ? <img src={c.img} alt={c.name} loading="lazy" />
                    : <span className="badge-mark">{c.mark}</span>}
                </div>
                <div className="cert-issuer">{c.issuer}</div>
                <div className="cert-name">{c.name}</div>
                {c.url && <span className="verify">{t.certs.verify} ↗</span>}
              </Tag>
            );
          })}
        </div>
        <div className="certs-summary">
          <span>{lang === "pt" ? "Total" : "Total"}: <b>{items.length}</b> {lang === "pt" ? "credenciais" : "credentials"}</span>
          <span>{issuers.length} {lang === "pt" ? "emissores" : "issuers"}</span>
          <span>{lang === "pt" ? "Verificáveis via" : "Verifiable via"} <b>Credly</b> · <b>Oracle Education</b></span>
        </div>
      </div>
    </section>
  );
}

function Edges({ t }) {
  const ref = useRef(null);
  const onMove = (e, el) => {
    const r = el.currentTarget.getBoundingClientRect();
    el.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
    el.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <section className="section container" id="edges">
      <SectionHead num={t.edges.num} title={t.edges.title} desc={null} />
      <div className="edges reveal" ref={ref}>
        {EDGES.map((ed, i) => (
          <div className="edge" key={i} onMouseMove={(e) => onMove(e, e)}>
            <span className="k">{ed.k}</span>
            <h3 className="h">{ed.h}</h3>
            <p className="d">{ed.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA({ t }) {
  return (
    <section className="cta" id="contact">
      <div className="container">
        <span className="k">{t.cta.kicker}</span>
        <h2>{t.cta.h}</h2>
        <p style={{maxWidth:"560px", margin:"48px auto 0", color:"var(--fg-2)", fontSize:"1.05rem", lineHeight:"1.55", position:"relative"}}>
          {t.cta.sub}
        </p>
        <div className="actions">
          <a className="btn primary" href="mailto:guiancam@gmail.com">
            {t.cta.primary}<span className="arr">→</span>
          </a>
          <a className="btn" href="mailto:guiancam@gmail.com">
            {t.cta.secondary}
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang }) {
  return (
    <footer className="footer container">
      <div className="footer-top">
        <h3>{t.footer.h}</h3>
        <div className="footer-col">
          <h4>{t.footer.nav}</h4>
          <a href="#work">{t.nav.work}</a>
          <a href="#about">{t.nav.about}</a>
          <a href="#stack">{t.nav.stack}</a>
          <a href="#experience">{t.nav.experience}</a>
          <a href="#certs">{t.nav.certs}</a>
          <a href="#education">{lang === "pt" ? "Formação" : "Education"}</a>
        </div>
        <div className="footer-col">
          <h4>{t.footer.contact}</h4>
          <a href="mailto:guiancam@gmail.com">guiancam@gmail.com</a>
          <a href="https://github.com/GuilhermeAntunes15" target="_blank" rel="noreferrer">github.com/GuilhermeAntunes15</a>
          <a href="https://www.linkedin.com/in/guilherme-antunes-35422a204" target="_blank" rel="noreferrer">LinkedIn</a>
          <p>+55 (11) 95976-2456</p>
        </div>
      </div>
      <div className="footer-sig">Antunes</div>
      <div className="footer-bottom">
        <span>© 2026 — Guilherme Antunes</span>
        <span>{t.footer.rights}</span>
        <span>v26.0 — built from scratch</span>
      </div>
    </footer>
  );
}

// ——— Tweaks panel

function Tweaks({ state, setState }) {
  const hues = [
    { label: "Amber",  h: 82 },
    { label: "Lime",   h: 130 },
    { label: "Cyan",   h: 220 },
    { label: "Violet", h: 300 },
    { label: "Rose",   h: 20  },
  ];
  return (
    <div className={`tweaks ${state.showTweaks ? "open" : ""}`}>
      <h5>
        Tweaks
        <span style={{color:"var(--fg-4)", fontSize:"0.65rem"}}>⌘ Toggle via toolbar</span>
      </h5>

      <div className="tweak-row">
        <label>Language</label>
        <div className="toggle-grp">
          <button className={state.lang === "pt" ? "on" : ""} onClick={() => setState({ ...state, lang: "pt" })}>PT</button>
          <button className={state.lang === "en" ? "on" : ""} onClick={() => setState({ ...state, lang: "en" })}>EN</button>
        </div>
      </div>

      <div className="tweak-row">
        <label>Accent hue</label>
        <div className="swatches">
          {hues.map(h => (
            <div
              key={h.h}
              className={`sw ${state.accentHue === h.h ? "on" : ""}`}
              title={h.label}
              style={{ background: `oklch(0.82 0.16 ${h.h})` }}
              onClick={() => setState({ ...state, accentHue: h.h })}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// ——— Root app

function App() {
  const [state, setState] = useState(TWEAKS);
  const [loaded, setLoaded] = useState(false);
  const [cursor, setCursor] = useState({ x: -500, y: -500 });
  const [openProject, setOpenProject] = useState(null);

  const t = CONTENT[state.lang] || CONTENT.pt;

  // apply accent hue live
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", `oklch(0.82 0.16 ${state.accentHue})`);
    document.documentElement.style.setProperty("--accent-2", `oklch(0.72 0.14 ${state.accentHue})`);
    document.documentElement.style.setProperty("--glow", `oklch(0.82 0.16 ${state.accentHue} / 0.35)`);
  }, [state.accentHue]);

  // persist via postMessage
  useEffect(() => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { lang: state.lang, accentHue: state.accentHue } }, "*");
  }, [state.lang, state.accentHue]);

  // edit-mode protocol
  useEffect(() => {
    const handler = (e) => {
      const data = e.data || {};
      if (data.type === "__activate_edit_mode")   setState(s => ({ ...s, showTweaks: true }));
      if (data.type === "__deactivate_edit_mode") setState(s => ({ ...s, showTweaks: false }));
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  // entry anim
  useEffect(() => {
    const id = setTimeout(() => setLoaded(true), 120);
    return () => clearTimeout(id);
  }, []);

  // intersection reveal
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) en.target.classList.add("in");
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [state.lang]);

  // cursor glow
  useEffect(() => {
    const m = (e) => setCursor({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", m);
    return () => window.removeEventListener("mousemove", m);
  }, []);

  return (
    <div className={loaded ? "loaded" : ""}>
      <div className="cursor-glow" style={{ left: cursor.x, top: cursor.y }} />
      <Nav lang={state.lang} setLang={(l) => setState({ ...state, lang: l })} t={t} />
      <Hero t={t} />
      <Marquee items={t.marquee} />
      <About t={t} />
      <Work t={t} onOpen={(i) => setOpenProject(PROJECTS[i])} />
      <Stack t={t} />
      <Experience t={t} />
      <Education t={t} lang={state.lang} />
      <Certs t={t} lang={state.lang} />
      <Edges t={t} />
      <CTA t={t} />
      <Footer t={t} lang={state.lang} />
      <Tweaks state={state} setState={setState} />
      <ProjectModal project={openProject} lang={state.lang} onClose={() => setOpenProject(null)} />
    </div>
  );
}

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