/*!
 * © 2026 Paulo Oliveira · All Rights Reserved
 * Source code, design, and assets are proprietary. See LICENSE.
 * Fingerprint: pf-paulo-2026-r2-b7e91f04
 */
/* global React, ReactDOM, PROFILE,
   Hero, ContactDirectory, Summary, Projects, Experience, Skills, Certifications, Education, FooterBlock,
   SideRail, TopBar, Marquee, ProjectsPage,
   TweaksPanel, useTweaks, TweakSection, TweakRadio */
const { useEffect: useEffectA, useState: useStateA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "azure",
  "scanlines": true,
  "marquee": true
}/*EDITMODE-END*/;

function getRoute() {
  const p = (window.location.pathname || "").replace(/\/+$/, "");
  if (p === "/projects" || p.startsWith("/projects/")) return "projects";
  return "home";
}

function HomeView({ tweaks }) {
  const sections = [
    { id: "home", label: "Home" },
    { id: "summary", label: "Summary" },
    { id: "projects", label: "Projects" },
    { id: "experience", label: "Experience" },
    { id: "skills", label: "Skills" },
    { id: "certs", label: "Certs" },
    { id: "education", label: "Education" },
  ];

  const marqueeItems = [
    "AZURE", "ENTRA ID", "MICROSOFT 365", "INTUNE", "DEFENDER", "POWERSHELL",
    "KQL", "ZERO TRUST", "AWS", "VMWARE", "ACTIVE DIRECTORY", "POWER AUTOMATE",
  ];

  useEffectA(() => {
    const targets = document.querySelectorAll(".scroll-glow");
    if (!targets.length) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      targets.forEach((t) => t.classList.add("is-lit"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) e.target.classList.add("is-lit");
          else e.target.classList.remove("is-lit");
        });
      },
      { threshold: 0.18, rootMargin: "0px 0px -15% 0px" }
    );
    targets.forEach((t) => io.observe(t));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <TopBar prompt={PROFILE.prompt} />
      <SideRail sections={sections} />

      <Hero />

      <div className="page-wrap scroll-glow" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 28px" }}>
        <ContactDirectory />
      </div>

      <div className="scroll-glow">
        <Summary />
      </div>

      {tweaks.marquee && <Marquee items={marqueeItems} />}

      <div className="scroll-glow">
        <Projects />
      </div>

      <Experience />
      <Skills />
      <Certifications />
      <Education />

      {/* Freelance / portfolio CTA */}
      <section className="scroll-glow" style={{ padding: "60px 28px 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="panel" style={{ padding: 28, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 18 }}>
          <div>
            <div className="label" style={{ marginBottom: 8 }}>// FREELANCE PORTFOLIO</div>
            <div className="display" style={{ fontSize: 22, fontWeight: 600 }}>Want to take a closer look? Here's a little more.</div>
            <div className="ink-mute" style={{ marginTop: 6, fontSize: 14, maxWidth: 720 }}>
              Browse interactive demos for web, Microsoft 365 administration and security engagements.
            </div>
          </div>
          <a className="btn primary" href="/projects/">Open portfolio ↗</a>
        </div>
      </section>

      <FooterBlock />
    </React.Fragment>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateA(getRoute());

  useEffectA(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const sl = document.querySelector(".scanlines");
    if (sl) sl.style.display = tweaks.scanlines ? "" : "none";
  }, [tweaks.theme, tweaks.scanlines]);

  useEffectA(() => {
    const onPop = () => setRoute(getRoute());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  return (
    <div style={{ position: "relative", zIndex: 5 }}>
      {route === "projects"
        ? <ProjectsPage />
        : <HomeView tweaks={tweaks} />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Accent"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "green", label: "Terminal green" },
              { value: "azure", label: "Azure blue" },
              { value: "amber", label: "Amber CRT" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Effects">
          <label style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", fontSize: 12 }}>
            <span>CRT scanlines</span>
            <input type="checkbox" checked={tweaks.scanlines} onChange={(e) => setTweak("scanlines", e.target.checked)} />
          </label>
          <label style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", fontSize: 12 }}>
            <span>Skill marquee</span>
            <input type="checkbox" checked={tweaks.marquee} onChange={(e) => setTweak("marquee", e.target.checked)} />
          </label>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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