// Circuit variant — upgraded cyber-dev aesthetic.
// Dark navy + cyan, Roboto + Roboto Mono, animated grid backdrop,
// live system panel, scroll progress, side dot nav, cursor-tracked
// project glow. Works in both dark & light themes.

const { useState: useStateC, useEffect: useEffectC, useMemo: useMemoC, useRef: useRefC } = React;

// Live clock — updates every second, formatted for the active locale (24h Europe).
function useClock(lang) {
  const [now, setNow] = useStateC(() => new Date());
  useEffectC(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const time = now.toLocaleTimeString(lang === "fr" ? "fr-BE" : "en-GB", {
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
  });
  const date = now.toLocaleDateString(lang === "fr" ? "fr-BE" : "en-GB", {
    day: "2-digit", month: "short",
  }).toUpperCase();
  return { time, date };
}

// Live scroll progress (0–100), throttled to rAF.
function useScrollProgress() {
  const [p, setP] = useStateC(0);
  useEffectC(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const h = document.documentElement;
        const range = h.scrollHeight - h.clientHeight;
        setP(range > 0 ? (h.scrollTop / range) * 100 : 0);
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return p;
}

function CircuitTopbar({ cv, lang, dark, active, setLang, setDark, smoothScrollTo }) {
  const tr = window.tr;
  const { time } = useClock(lang);
  return (
    <header className="topbar">
      <div className="brand">
        <span className="pulse"></span>
        <span>{cv.identity.name}</span>
        <span className="handle">{cv.identity.handle}</span>
      </div>
      <nav>
        {NAV_IDS.map((id, i) => (
          <button
            key={id}
            className={active === id ? "active" : ""}
            onClick={() => smoothScrollTo(id)}
          >
            <span className="idx">{String(i + 1).padStart(2, "0")}</span>
            <span className="nm">{tr(cv.nav[id], lang)}</span>
          </button>
        ))}
      </nav>
      <div className="actions">
        <span className="clock"><span className="acc">●</span>{time}</span>
        <div className="lang-switch">
          <button className={lang === "fr" ? "on" : ""} onClick={() => setLang("fr")}>FR</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <button className="pill" onClick={() => setDark(!dark)} aria-label="theme">
          {dark ? "☼" : "☾"}
        </button>
      </div>
    </header>
  );
}

function CircuitSideNav({ cv, lang, active, smoothScrollTo }) {
  const tr = window.tr;
  return (
    <nav className="side-nav" aria-label="section nav">
      {NAV_IDS.map((id) => (
        <button
          key={id}
          className={active === id ? "active" : ""}
          data-label={tr(cv.nav[id], lang)}
          onClick={() => smoothScrollTo(id)}
          aria-label={tr(cv.nav[id], lang)}
        />
      ))}
    </nav>
  );
}

function CircuitHero({ cv, lang, smoothScrollTo }) {
  const tr = window.tr;
  const [first, ...rest] = cv.identity.name.split(" ");
  const last = rest.join(" ") + ".";
  // Split intro into highlighted strong fragments by word.
  const intro = tr(cv.about.bio, lang);
  return (
    <section className="hero" id="about">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="pulse"></span>
              <span>{tr(cv.identity.available, lang)}</span>
            </div>

            <h1 className="hero-name">
              <span className="line"><span className="word">{first}</span></span>
              <span className="line"><span className="word">{last}</span></span>
            </h1>

            <div className="hero-role">
              <span>{tr(cv.identity.role, lang)}<span className="cursor"></span></span>
            </div>

            <p className="hero-intro">{intro}</p>

            <div className="hero-actions">
              <button className="c-btn primary" onClick={() => smoothScrollTo("contact")}>
                {tr(cv.ui.contactMe, lang)}
                <span style={{ fontWeight: 700 }}>→</span>
              </button>
              <button className="c-btn ghost" onClick={() => smoothScrollTo("experiences")}>
                {tr(cv.ui.viewJourney, lang)}
              </button>
            </div>
          </div>

          <div className="hero-photo">
            <div className="ascii-portrait">
              <img src={cv.identity.photoSquare} alt={cv.identity.name} />
              <div className="stripes" aria-hidden="true"></div>
            </div>
            <div className="badge">
              <span className="dot"></span>
              <span>{cv.identity.location.toUpperCase()}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CircuitInfoStrip({ cv, lang }) {
  const tr = window.tr;
  const items = [
    {
      label: tr({ fr: "Expérience", en: "Experience" }, lang),
      value: lang === "fr" ? "7 ans" : "7 years",
      sub: ".NET · ERP · DevOps",
    },
    {
      label: tr({ fr: "Actuellement", en: "Currently" }, lang),
      value: cv.experiences[0].company,
      sub: tr(cv.experiences[0].role, lang),
    },
    {
      label: tr({ fr: "Secteurs", en: "Sectors" }, lang),
      value: tr(
        { fr: "Santé · Industrie · Commerce", en: "Healthcare · Industry · Retail" },
        lang
      ),
      sub: tr({ fr: "Applications métiers B2B", en: "B2B line-of-business" }, lang),
    },
    {
      label: tr({ fr: "Langues", en: "Languages" }, lang),
      value: "FR · EN · NL",
      sub: tr({ fr: "Natif · C1 · A2", en: "Native · C1 · A2" }, lang),
    },
  ];
  return (
    <div className="info-strip">
      <div className="container">
        <div className="grid" data-reveal>
          {items.map((it, i) => (
            <div className="cell" key={i}>
              <div className="label">{it.label}</div>
              <div className="value">{it.value}</div>
              <div className="sub">{it.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CircuitExperience({ cv, lang }) {
  const tr = window.tr;
  return (
    <section id="experiences">
      <div className="container">
        <div data-reveal>
          <div className="section-label">/// {tr({ fr: "Parcours professionnel", en: "Professional journey" }, lang)}</div>
          <h2 className="section-title">{tr(cv.nav.experiences, lang)}<span className="accent">.</span></h2>
        </div>
        <div className="timeline" data-reveal>
          {cv.experiences.map((x, i) => (
            <div className="timeline-item" key={i}>
              <div className="t-date">{tr(x.period, lang)}</div>
              <div className="t-title">{tr(x.role, lang)}</div>
              <div className="t-company">
                <span className="at">@</span>{x.company}
                <span className="city">{x.city}</span>
              </div>
              <ul className="t-desc">
                {x.bullets.map((b, j) => <li key={j}>{tr(b, lang)}</li>)}
              </ul>
              <div className="t-tags">
                {x.stack.map((s, j) => <span key={j} className="tag">{tr(s, lang)}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CircuitSkills({ cv, lang }) {
  const tr = window.tr;
  const [filter, setFilter] = useStateC("all");

  // Group skills by category, sort by level desc then name.
  const groups = useMemoC(() => {
    const order = ["dev", "business", "sys", "meth"];
    const labels = {};
    cv.skillCats.forEach((c) => { labels[c.id] = tr(c.label, lang); });
    return order.map((id) => ({
      id,
      label: labels[id],
      items: cv.skills
        .filter((s) => s.cat === id)
        .sort((a, b) => b.level - a.level || tr(a.name, lang).localeCompare(tr(b.name, lang))),
    }));
  }, [lang]);

  // When a filter is active, hide non-matching groups (or empty groups).
  const visibleGroups = filter === "all" ? groups : groups.filter((g) => g.id === filter);

  return (
    <section id="skills">
      <div className="container">
        <div data-reveal>
          <div className="section-label">/// {tr({ fr: "Stack technique", en: "Technical stack" }, lang)}</div>
          <h2 className="section-title">{tr(cv.nav.skills, lang)}<span className="accent">.</span></h2>
        </div>

        <div className="skills-filter" data-reveal>
          {cv.skillCats.map((c) => {
            const count = c.id === "all" ? cv.skills.length : cv.skills.filter((s) => s.cat === c.id).length;
            return (
              <button
                key={c.id}
                className={"filter-btn" + (filter === c.id ? " active" : "")}
                onClick={() => setFilter(c.id)}
              >
                {tr(c.label, lang)}<span className="count">{count}</span>
              </button>
            );
          })}
        </div>

        <div className="skills-cols" data-reveal>
          {visibleGroups.map((g) => (
            <div className="group" key={g.id}>
              <div className="label">
                <span>{g.label}</span>
                <span className="count">{String(g.items.length).padStart(2, "0")}</span>
              </div>
              <ul>
                {g.items.map((s, j) => (
                  <li key={j} title={tr(cv.ui.levels[s.level], lang)}>
                    <span>{tr(s.name, lang)}</span>
                    <span className="lvl-dots">
                      <span className={s.level >= 1 ? "on" : ""}></span>
                      <span className={s.level >= 2 ? "on" : ""}></span>
                      <span className={s.level >= 3 ? "on bright" : ""}></span>
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CircuitProjects({ cv, lang, projectFilter, setProjectFilter }) {
  const tr = window.tr;
  const filteredProjects = useMemoC(() => {
    if (projectFilter === "__all__") return cv.projects;
    return cv.projects.filter((p) => p.tags.includes(projectFilter));
  }, [projectFilter]);

  // Cursor-tracked glow per project card.
  const onMove = (e) => {
    const card = e.currentTarget;
    const r = card.getBoundingClientRect();
    card.style.setProperty("--mx", ((e.clientX - r.left) / r.width) * 100 + "%");
    card.style.setProperty("--my", ((e.clientY - r.top) / r.height) * 100 + "%");
  };

  return (
    <section id="projects">
      <div className="container">
        <div data-reveal>
          <div className="section-label">/// {tr({ fr: "Réalisations notables", en: "Notable work" }, lang)}</div>
          <h2 className="section-title">{tr(cv.nav.projects, lang)}<span className="accent">.</span></h2>
        </div>

        <div className="skills-filter" data-reveal>
          <button
            className={"filter-btn" + (projectFilter === "__all__" ? " active" : "")}
            onClick={() => setProjectFilter("__all__")}
          >
            {tr(cv.ui.filterAll, lang)}<span className="count">{cv.projects.length}</span>
          </button>
          {cv.allTags.map((tag) => {
            const c = cv.projects.filter((p) => p.tags.includes(tag)).length;
            return (
              <button
                key={tag}
                className={"filter-btn" + (projectFilter === tag ? " active" : "")}
                onClick={() => setProjectFilter(tag)}
              >
                {tag}<span className="count">{c}</span>
              </button>
            );
          })}
        </div>

        <div className="projects" data-reveal>
          {filteredProjects.map((p) => (
            <article className="project" key={p.id} data-hover onMouseMove={onMove}>
              <div className="project-number">{p.number} / {tr(p.tagsLabel, lang)}</div>
              <h3 className="project-title">{tr(p.name, lang)}</h3>
              <p className="project-desc">{tr(p.blurb, lang)}</p>
              {p.bullets ? (
                <ul>
                  {p.bullets.map((b, j) => <li key={j}>{tr(b, lang)}</li>)}
                </ul>
              ) : null}
              <div className="project-tech">
                {p.stack.map((s, j, arr) => (
                  <React.Fragment key={j}>
                    <span>{tr(s, lang)}</span>
                    {j < arr.length - 1 ? <span className="sep">·</span> : null}
                  </React.Fragment>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CircuitFormation({ cv, lang }) {
  const tr = window.tr;
  return (
    <section id="formation">
      <div className="container">
        <div data-reveal>
          <div className="section-label">/// {tr({ fr: "Études & parcours académique", en: "Studies & academic path" }, lang)}</div>
          <h2 className="section-title">{tr(cv.nav.formation, lang)}<span className="accent">.</span></h2>
        </div>
        <div className="edu-list" data-reveal style={{ marginTop: 40 }}>
          {cv.formation.map((f, i) => (
            <div className="edu-item" key={i}>
              <div className="edu-year">{tr(f.period, lang)}</div>
              <div>
                <div className="edu-title">{tr(f.degree, lang)}</div>
                <div className="edu-detail">
                  <span className="school">{tr(f.school, lang)}{f.city ? " · " + f.city : ""}</span>
                  {tr(f.detail, lang)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CircuitLanguagesInterests({ cv, lang }) {
  const tr = window.tr;
  // Animate language dots on reveal
  useEffectC(() => {
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {
        if (e.isIntersecting) {
          const dots = e.target.querySelectorAll(".lang-dots");
          dots.forEach((d) => {
            const n = parseInt(d.dataset.fill, 10);
            const spans = d.querySelectorAll("span");
            spans.forEach((s, i) => {
              if (i < n) setTimeout(() => s.classList.add("filled"), 80 * i);
              else s.classList.remove("filled");
            });
          });
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.2 });
    document.querySelectorAll(".v-circuit .languages").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  return (
    <React.Fragment>
      <section id="languages">
        <div className="container">
          <div data-reveal>
            <div className="section-label">/// {tr({ fr: "Langues & centres d'intérêt", en: "Languages & interests" }, lang)}</div>
            <h2 className="section-title">{tr({ fr: "Hors écran", en: "Off-screen" }, lang)}<span className="accent">.</span></h2>
          </div>
          <div className="two-col" data-reveal>
            <div>
              <div className="languages">
                {cv.languages.map((l, i) => (
                  <div className="lang" key={i}>
                    <div className="lang-head">
                      <span className="lang-name">{tr(l.name, lang)}</span>
                      <span className="lang-level">{tr(l.level, lang)}</span>
                    </div>
                    <div className="lang-dots" data-fill={l.dots}>
                      {[1, 2, 3, 4, 5].map((n) => <span key={n}></span>)}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div id="interests">
              <div className="interests" style={{ marginTop: 0, paddingTop: 0, borderTop: 0, flexDirection: "column", alignItems: "flex-start", gap: 14 }}>
                <div className="interests-label">{tr(cv.nav.interests, lang)}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {cv.interests.map((it, i) => (
                    <div className="interest" key={i} style={{ marginLeft: 0 }}>
                      <span className="ic">{it.icon}</span>
                      <span>{tr(it.label, lang)}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function CircuitContact({ cv, lang, copyEmail }) {
  const tr = window.tr;
  return (
    <section id="contact" className="contact">
      <div className="container" data-reveal>
        <div className="contact-eyebrow">/// {tr({ fr: "Discutons", en: "Let's talk" }, lang)}</div>
        <h2 className="contact-title">
          {tr(cv.ui.projectAside, lang).replace("?", "").trim()}<span className="accent">?</span>
        </h2>
        <a href={`mailto:${cv.identity.email}`} className="contact-mail">{cv.identity.email}</a>
        <div className="contact-links">
          <a href={cv.identity.githubUrl} className="contact-link" data-hover>
            ⌥ {cv.identity.github}
          </a>
          <span className="contact-link">◉ {cv.identity.location}</span>
          <button className="contact-link" data-hover onClick={copyEmail}>
            ✎ {tr(cv.ui.copyEmail, lang)}
          </button>
        </div>
      </div>
    </section>
  );
}

function CircuitVariant({ cv, lang, dark, active, projectFilter, setProjectFilter, setLang, setDark, smoothScrollTo, copyEmail }) {
  const tr = window.tr;
  const progress = useScrollProgress();

  return (
    <React.Fragment>
      <div className="atmosphere"></div>
      <div className="grid-layer"></div>
      <div className="scroll-progress" style={{ width: progress + "%" }}></div>

      <CircuitTopbar
        cv={cv} lang={lang} dark={dark} active={active}
        setLang={setLang} setDark={setDark}
        smoothScrollTo={smoothScrollTo}
      />
      <CircuitSideNav cv={cv} lang={lang} active={active} smoothScrollTo={smoothScrollTo} />

      <div className="stage">
        <CircuitHero cv={cv} lang={lang} smoothScrollTo={smoothScrollTo} />
        <CircuitInfoStrip cv={cv} lang={lang} />
        <CircuitExperience cv={cv} lang={lang} />
        <CircuitFormation cv={cv} lang={lang} />
        <CircuitSkills cv={cv} lang={lang} />
        <CircuitProjects cv={cv} lang={lang} projectFilter={projectFilter} setProjectFilter={setProjectFilter} />
        <CircuitLanguagesInterests cv={cv} lang={lang} />
        <CircuitContact cv={cv} lang={lang} copyEmail={copyEmail} />

        <footer>
          <div className="container">
            <div>© {new Date().getFullYear()} · {tr(cv.ui.sourceLine, lang)}</div>
          </div>
        </footer>
      </div>
    </React.Fragment>
  );
}

window.CircuitVariant = CircuitVariant;