const { useEffect, useState } = React;

const MGMT_DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "mgmtHue": "oklch(0.75 0.12 150)",
  "showMilestones": true
}/*EDITMODE-END*/;

function MgmtPage() {
  const [tweaks, setTweak] = window.useTweaks(MGMT_DEFAULT_TWEAKS);
  const M = window.MGMT;
  const roles = M.roles;
  const [activeId, setActiveId] = useState("mailchimp");
  const active = roles.find((r) => r.id === activeId) || roles[roles.length - 1];

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.mgmtHue);
    document.documentElement.style.setProperty("--proj-color", tweaks.mgmtHue);
  }, [tweaks.mgmtHue]);

  return (
    <>
      <header className="topbar">
        <a href="index.html" className="logo">
          <span className="dot"></span>
          <span>AL&nbsp;BUENO</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ opacity: 0.5 }}>ENGINEERING&nbsp;MGMT</span>
        </a>
        <nav className="topbar-switch">
          <a href="sound-design.html">SOUND</a>
          <a href="index.html" className="on">MGMT</a>
        </nav>
        <div className="meta">
          <span>NEW YORK</span>
          <span>2006 — PRESENT</span>
          <span>↘ 10+ ENG · 5 SQUADS</span>
        </div>
      </header>

      <main className="mgmt-page">
        <section className="proj-hero">
          <a href="sound-design.html" className="proj-back mono">← Back to sound design</a>
          <div className="proj-hero-grid">
            <div>
              <div className="proj-meta-line">
                <span className="accent">005</span>
                <span>Engineering management</span>
                <span>Consumer & platform software</span>
                <span>2006 — Present</span>
              </div>
              <h1 className="proj-title-big">Management</h1>
            </div>
            <div>
              <p className="proj-blurb">
                Fifteen-plus years building consumer and platform software — the last five managing
                engineering at Mailchimp / Intuit. From a 3-engineer open-source team to a 10+ engineer
                organization across five squads: platform migrations at 2,100 TPS, self-serve developer
                systems, and customer-care launches with multi-million-dollar impact.
              </p>
            </div>
          </div>
        </section>

        {/* CAREER WAVEFORM */}
        <section className="mgmt-section" data-screen-label="Career waveform">
          <div className="mgmt-section-head">
            <span>§ Final mix · one career, 2006 — 2026</span>
            <span>Hover the dots · peaks = milestones</span>
          </div>
          <window.CareerWave roles={roles} milestones={M.milestones} height={240} showMilestones={tweaks.showMilestones} />
        </section>

        {/* RIDGE TERRAIN */}
        <section className="mgmt-section" data-screen-label="Ridge terrain">
          <div className="mgmt-section-head">
            <span>§ Stems · one ridge per role</span>
            <span>Height = scope · Span = tenure · Hover to solo</span>
          </div>
          <window.RidgeTerrain roles={roles} activeId={activeId} onActive={setActiveId} />

          <div className="dossier">
            <div>
              <div className="eyebrow">Soloed track</div>
              <div className="dossier-title">{active.company}</div>
              <div className="dossier-meta">
                <span className="accent">{active.title}</span>
                <span>{active.dates} · {active.loc}</span>
                <span>{active.scopeLabel}</span>
              </div>
            </div>
            <div>
              {active.achievements.map((a, i) => (
                <div key={i} className="ach-row">
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  <span>{a}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ROLE INDEX */}
        <section className="mgmt-section" data-screen-label="Role index">
          <div className="mgmt-section-head">
            <span>§ Index · {String(roles.length).padStart(2, "0")} roles</span>
            <span>Newest first</span>
          </div>
          <div className="proj-table mono">
            <div className="proj-row head">
              <span>№</span>
              <span>Company</span>
              <span>Role</span>
              <span>Scope</span>
              <span>Years</span>
              <span style={{ textAlign: "right" }}>↗</span>
            </div>
            {[...roles].reverse().map((r, i) => (
              <a
                key={r.id}
                className="proj-row"
                onMouseEnter={() => setActiveId(r.id)}
                href="#"
                onClick={(e) => e.preventDefault()}
              >
                <span className="proj-num">{String(i + 1).padStart(3, "0")}</span>
                <span className="proj-title serif">{r.company}</span>
                <span className="proj-cell">{r.title}</span>
                <span className="proj-cell">{r.scopeLabel}</span>
                <span className="proj-cell">{r.dates}</span>
                <span className="proj-arrow">↗</span>
              </a>
            ))}
          </div>
        </section>

        {/* EDUCATION & SKILLS */}
        <section className="mgmt-section" data-screen-label="Education and skills">
          <div className="proj-specs" style={{ padding: 0, border: 0 }}>
            <h3>Education<br />&amp; tooling.</h3>
            <div className="proj-specs-table">
              {window.MGMT.education.map((e) => (
                <div key={e.k} className="spec-row"><span className="k">{e.k}</span><span className="v">{e.v}</span></div>
              ))}
              {window.MGMT.skills.map((s) => (
                <div key={s.k} className="spec-row"><span className="k">{s.k}</span><span className="v">
                  {s.v.map((x) => <span key={x} className="pill">{x}</span>)}
                </span></div>
              ))}
            </div>
          </div>
        </section>

        <section className="proj-next">
          <span className="lbl">Also ↓</span>
          <a href="sound-design.html#work">
            <span className="lbl">The other practice</span>
            <span className="proj-next-title serif">Sound design ↗</span>
          </a>
        </section>
      </main>

      <window.TweaksPanel>
        <window.TweakSection label="Identity hue" />
        <window.TweakColor
          label="Hue"
          value={tweaks.mgmtHue}
          onChange={(v) => setTweak("mgmtHue", v)}
          options={["oklch(0.75 0.12 150)", "oklch(0.78 0.14 200)", "oklch(0.74 0.16 80)", "oklch(0.80 0.05 260)"]}
        />
        <window.TweakSection label="Career waveform" />
        <window.TweakToggle
          label="Milestone markers"
          value={tweaks.showMilestones}
          onChange={(v) => setTweak("showMilestones", v)}
        />
      </window.TweaksPanel>
    </>
  );
}

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