// Hero, Milestones, Skills Kanban, Contact, and root App.

const { useState, useEffect, useRef } = React;

/* ---------------------------- NAV ---------------------------- */
function TopNav({ accent }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    h();
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);

  function go(id) {
    const el = document.getElementById(id);
    if (el) el.scrollTo ? el.scrollIntoViewIfNeeded?.() : null;
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  }

  return (
    <nav className={"topnav" + (scrolled ? " topnav-on" : "")}>
      <div className="topnav-inner">
        <a href="#top" className="brand" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <span className="brand-mark" style={{ background: accent }}>A</span>
          <span className="brand-name">Anrie Steytler</span>
          <span className="brand-cert">PMP®</span>
        </a>
        <div className="topnav-links">
          <a onClick={(e) => { e.preventDefault(); go("career"); }} href="#career">Career</a>
          <a onClick={(e) => { e.preventDefault(); go("milestones"); }} href="#milestones">Milestones</a>
          <a onClick={(e) => { e.preventDefault(); go("skills"); }} href="#skills">Skills</a>
          <a onClick={(e) => { e.preventDefault(); go("contact"); }} href="#contact">Contact</a>
          <a href="assets/Anrie-Steytler-CV.pdf" download className="nav-cta">
            Download CV <span className="cta-arrow">↓</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ---------------------------- HERO ---------------------------- */
function Hero({ accent, onOpenCharter, openRoleId }) {
  return (
    <header id="top" className="hero">
      <div className="hero-inner">
        <div className="hero-top">
          <h1 className="hero-headline">
            My <em className="hl-em">South African</em> Portfolio.
          </h1>

          <h2 className="hero-statement">
            Recently relocated to the USA. <em className="hl-em">Ready for the next portfolio</em>.
          </h2>

          <div className="hero-tag">
            <span className="hl-mark">fully authorized to work</span>
          </div>
        </div>

        {/* The Gantt IS the hero */}
        <div id="career" className="hero-gantt">
          <CareerGantt onOpenCharter={onOpenCharter} openRoleId={openRoleId} />
        </div>
      </div>
    </header>
  );
}

/* ---------------------------- MILESTONES ---------------------------- */
function Milestones() {
  const { MILESTONES } = window.PORTFOLIO_DATA;

  const kindMeta = {
    edu:   { icon: "◇", label: "EDUCATION", color: "#FB923C" },
    join:  { icon: "▶", label: "JOINED",    color: "#38BDF8" },
    promo: { icon: "↑", label: "PROMOTED",  color: "#A3E635" },
    win:   { icon: "★", label: "MILESTONE", color: "#F472B6" },
    move:  { icon: "→", label: "RELOCATED", color: "#A78BFA" },
  };

  return (
    <div className="ms-vlist">
      <div className="ms-rail" />
      {MILESTONES.map((m, i) => {
        const meta = kindMeta[m.kind];
        return (
          <div className="ms-row" key={i} style={{ "--ms-c": meta.color, "--ms-delay": `${i * 0.04}s` }}>
            <div className="ms-row-left">
              <div className="ms-row-year">{m.year}</div>
            </div>
            <div className="ms-row-dot">
              <span className="ms-row-dot-inner" />
            </div>
            <div className="ms-row-right">
              <div className="ms-row-tag">
                <span className="ms-row-icon">{meta.icon}</span>
                <span className="ms-row-kind">{meta.label}</span>
              </div>
              <div className="ms-row-label">{m.label}</div>
              <div className="ms-row-detail">{m.detail}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------------------------- KANBAN ---------------------------- */
function Kanban() {
  const { SKILLS } = window.PORTFOLIO_DATA;
  return (
    <section id="skills" className="kanban-section">
      <div className="section-head">
        <span className="section-eyebrow">02 · CAPABILITY BOARD</span>
        <h2 className="section-title">Skills, sorted as a Kanban.</h2>
        <p className="section-sub">Four columns, no hierarchy implied — these are the capabilities I bring to a PMO or project management role.</p>
      </div>

      <div className="kanban-board">
        {SKILLS.map((col, i) => (
          <div className="kanban-col" key={i}>
            <div className="kanban-col-head">
              <div className="kch-left">
                <span className="kch-icon">{col.icon}</span>
                <span className="kch-title">{col.title}</span>
              </div>
              <span className="kch-count">{col.items.length}</span>
            </div>
            <div className="kanban-cards">
              {col.items.map((item, j) => (
                <div className="kcard" key={j}>
                  <div className="kcard-id">{col.title.slice(0, 3).toUpperCase()}-{String(j + 1).padStart(2, "0")}</div>
                  <div className="kcard-text">{item}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------------------- CONTACT ---------------------------- */
function Contact({ accent }) {
  return (
    <section id="contact" className="contact-section">
      <div className="contact-inner">
        <div className="contact-eyebrow">03 · LET'S TALK</div>
        <h2 className="contact-headline">
          Ready for the <em>next</em> portfolio.
        </h2>
        <p className="contact-sub">
          If you're hiring a Portfolio, Program or Project Manager in the US — I'd love to talk.
        </p>

        <div className="contact-card-row">
          <a className="contact-card" href="mailto:anriedk@gmail.com">
            <div className="cc-eyebrow">EMAIL</div>
            <div className="cc-value">anriedk@gmail.com</div>
            <div className="cc-arrow">→</div>
          </a>
          <a className="contact-card" href="https://linkedin.com/in/anriesteytler-16300854" target="_blank" rel="noopener noreferrer">
            <div className="cc-eyebrow">LINKEDIN</div>
            <div className="cc-value">/in/anriesteytler-16300854</div>
            <div className="cc-arrow">↗</div>
          </a>
          <a className="contact-card contact-card-cv" href="assets/Anrie-Steytler-CV.pdf" download style={{ "--cc-accent": accent }}>
            <div className="cc-eyebrow">DOWNLOAD</div>
            <div className="cc-value">CV (PDF) ↓</div>
            <div className="cc-arrow">↓</div>
          </a>
        </div>

        <footer className="footer">
          <div className="foot-name">Anrie Steytler, PMP®</div>
          <div className="foot-loc">Rhode Island, USA · Fully authorized to work · No sponsorship required</div>
          <div className="foot-built">anrie.life · Built with care, 2026</div>
        </footer>
      </div>
    </section>
  );
}

/* ---------------------------- TWEAKS ---------------------------- */
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "editorial-light",
  "accent": "#38BDF8",
  "showGrid": false,
  "compactGantt": false
}/*EDITMODE-END*/;

const THEMES = {
  "dark-tech": {
    name: "Dark Tech",
    "--bg": "#0a0a0a",
    "--bg-elev": "#111111",
    "--surface": "#161616",
    "--surface-2": "#1c1c1c",
    "--border": "#262626",
    "--border-strong": "#333333",
    "--text": "#f5f5f3",
    "--text-mute": "#9a9a96",
    "--text-dim": "#666661",
    "--mark-bg": "#A3E63522",
  },
  "editorial-light": {
    name: "Editorial Light",
    "--bg": "#f7f6f2",
    "--bg-elev": "#fdfcf9",
    "--surface": "#ffffff",
    "--surface-2": "#f1efe9",
    "--border": "#e6e2d8",
    "--border-strong": "#cfc9bb",
    "--text": "#1a1815",
    "--text-mute": "#5e5b53",
    "--text-dim": "#8c887d",
    "--mark-bg": "#A3E63555",
  },
  "bold-saas": {
    name: "Bold SaaS",
    "--bg": "#0e1430",
    "--bg-elev": "#141a3a",
    "--surface": "#1a2148",
    "--surface-2": "#212954",
    "--border": "#2a3360",
    "--border-strong": "#3b4680",
    "--text": "#f4f6ff",
    "--text-mute": "#a3aacf",
    "--text-dim": "#737aa0",
    "--mark-bg": "#A3E63522",
  },
};

const ACCENT_OPTIONS = ["#A3E635", "#38BDF8", "#F472B6", "#FB923C", "#A78BFA"];

function ThemeApplier({ tweaks }) {
  useEffect(() => {
    const root = document.documentElement;
    const theme = THEMES[tweaks.theme] || THEMES["dark-tech"];
    Object.entries(theme).forEach(([k, v]) => {
      if (k.startsWith("--")) root.style.setProperty(k, v);
    });
    root.style.setProperty("--accent", tweaks.accent);
    root.style.setProperty("--accent-soft", tweaks.accent + "22");
    root.style.setProperty("--accent-medium", tweaks.accent + "55");
    root.dataset.theme = tweaks.theme;
    root.dataset.gantt = tweaks.compactGantt ? "compact" : "comfy";
    root.dataset.grid = tweaks.showGrid ? "on" : "off";
  }, [tweaks]);
  return null;
}

function PortfolioTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          label="Look & feel"
          value={tweaks.theme}
          options={[
            { label: "Dark", value: "dark-tech" },
            { label: "Light", value: "editorial-light" },
            { label: "Indigo", value: "bold-saas" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent color"
          value={tweaks.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweakSection>
      <TweakSection title="Gantt">
        <TweakToggle
          label="Show grid background"
          value={tweaks.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />
        <TweakToggle
          label="Compact bars"
          value={tweaks.compactGantt}
          onChange={(v) => setTweak("compactGantt", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------------------------- ROOT APP ---------------------------- */
function App() {
  const [openRoleId, setOpenRoleId] = useState(null);
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  // Tweaks mode: only visible when URL hash contains "tweaks" (e.g. anrie.life#tweaks)
  const [tweaksMode, setTweaksMode] = useState(() => window.location.hash.includes("tweaks"));
  useEffect(() => {
    const handler = () => {
      const active = window.location.hash.includes("tweaks");
      setTweaksMode(active);
      if (active) window.__openTweaks?.();
    };
    window.addEventListener("hashchange", handler);
    if (tweaksMode) window.__openTweaks?.();
    return () => window.removeEventListener("hashchange", handler);
  }, []);

  function openCharter(id) {
    setOpenRoleId(id);
    history.replaceState(null, "", "#charter-" + id);
  }
  function closeCharter() {
    setOpenRoleId(null);
    history.replaceState(null, "", "#career");
  }

  return (
    <>
      <ThemeApplier tweaks={tweaks} />
      <TopNav accent={tweaks.accent} />
      <main>
        <Hero accent={tweaks.accent} onOpenCharter={openCharter} openRoleId={openRoleId} />

        <section id="milestones" className="milestones-section">
          <div className="section-head">
            <span className="section-eyebrow">01.5 · ALONGSIDE THE PORTFOLIO</span>
            <h2 className="section-title">
              <em>Twelve</em> career milestones.
            </h2>
            <p className="section-sub">
              Education, promotions and key wins, in order.
            </p>
          </div>
          <Milestones />
        </section>

        <Kanban />
        <Contact accent={tweaks.accent} />
      </main>

      {openRoleId && (
        <CharterView
          roleId={openRoleId}
          onClose={closeCharter}
          onNavigate={(id) => openCharter(id)}
        />
      )}

      <PortfolioTweaks tweaks={tweaks} setTweak={setTweak} />
      {tweaksMode && (
        <button
          onClick={() => window.__openTweaks?.()}
          style={{
            position: "fixed", bottom: 16, left: 16, zIndex: 2147483645,
            background: "rgba(20,20,20,0.85)", border: "1px solid #333",
            color: "#f5f5f3", borderRadius: 8, padding: "6px 12px",
            fontSize: 12, fontFamily: "var(--mono)", cursor: "pointer",
            backdropFilter: "blur(8px)", letterSpacing: "0.04em",
          }}
        >
          ⚙ Tweaks
        </button>
      )}
    </>
  );
}

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