/* capabilities.jsx — "What I do" capability map.
   One header + four capability groups, rendered two ways:
   - "simple"   : editorial hairline rows, monochrome, lots of air
   - "weighted" : numbered cards with borders, panels and hover weight
   Switch between them via the Tweaks panel (capabilityStyle). */

const CAPS = [
  {
    k: "01",
    label: "Strategy & ideation",
    line: "What to make, and why.",
    items: ["Channel direction", "Content strategy", "Series & format planning"],
  },
  {
    k: "02",
    label: "Packaging",
    line: "Earning the click.",
    items: ["Title & thumbnail ideation", "Concept-led packaging", "The nitty-gritty execution"],
  },
  {
    k: "03",
    label: "Story & format",
    line: "Holding the attention.",
    items: ["Scripting", "Storytelling", "Video structure", "Edit & format direction"],
  },
  {
    k: "04",
    label: "Team & systems",
    line: "Building the engine.",
    items: ["Hiring the right roles", "Building & managing teams", "Workflows & systems", "Knowing what to fix first"],
  },
];

function CapHeader() {
  return (
    <div className="cap-head">
      <span className="eyebrow reveal in">What I do</span>
      <h2 className="h2 cap-title reveal" data-d="1">
        I work across the<br />whole pipeline.
      </h2>
      <p className="lede cap-lede reveal" data-d="2">
        From the first idea to the published video to the team that keeps it running.
        Not sure what your channel actually needs? That's the first thing we figure out.
      </p>
    </div>
  );
}

/* ---- Simple: editorial hairline rows ---- */
function CapRow({ c, i }) {
  return (
    <div className="cap-row reveal" data-d={(i % 3) + 1}>
      <div className="cap-row-head">
        <h3 className="cap-label">{c.label}</h3>
      </div>
      <div className="cap-row-body">
        <p className="cap-line">{c.line}</p>
        <ul className="cap-items">
          {c.items.map((it, n) => <li key={n} className="cap-item faint">{it}</li>)}
        </ul>
      </div>
    </div>
  );
}

const { useState: useStateC } = React;

/* ---- Weighted: connected pipeline spine ---- */
function CapStage({ c, i }) {
  return (
    <div className="cap-stage reveal" data-d={(i % 3) + 1}>
      <div className="cap-rail">
        <span className="cap-node">{c.k}</span>
      </div>
      <div className="cap-stage-main">
        <h3 className="cap-stage-label">{c.label}</h3>
        <p className="cap-stage-line">{c.line}</p>
        <ul className="cap-stage-items">
          {c.items.map((it, n) => <li key={n} className="cap-stage-item">{it}</li>)}
        </ul>
      </div>
    </div>
  );
}

/* ---- Spotlight: one capability at a time, arrow-navigated ---- */
function CapSpotlight() {
  const [i, setI] = useStateC(0);
  const [dir, setDir] = useStateC(1);
  const total = CAPS.length;
  const jump = (n, d) => { setDir(d); setI((n + total) % total); };
  const go = (d) => jump(i + d, d);
  const c = CAPS[i];
  const chevron = (left) => (
    <svg className="cap-chev" viewBox="0 0 24 44" fill="none" aria-hidden="true">
      <path d={left ? "M19 4 L6 22 L19 40" : "M5 4 L18 22 L5 40"}
        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  return (
    <div className="cap-spot reveal" data-d="2"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
        if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
      }}>
      <button className="cap-arrow cap-arrow--prev" onClick={() => go(-1)} aria-label="Previous capability">
        {chevron(true)}
      </button>

      <div className="cap-spot-stage">
        <span className="cap-spot-ghost" key={"g" + i} aria-hidden="true">{c.k}</span>
        <div className="cap-spot-content" key={i} data-dir={dir}>
          <span className="cap-spot-count">
            <span className="cap-spot-now">{c.k}</span>
            <span className="cap-spot-slash">/</span>
            <span className="cap-spot-total">{"0" + total}</span>
          </span>
          <h3 className="cap-spot-label">{c.label}</h3>
          <p className="cap-spot-line">{c.line}</p>
          <ul className="cap-spot-items">
            {c.items.map((it, n) => <li key={n} className="cap-spot-item">{it}</li>)}
          </ul>
        </div>
      </div>

      <button className="cap-arrow cap-arrow--next" onClick={() => go(1)} aria-label="Next capability">
        {chevron(false)}
      </button>

      <div className="cap-spot-track" role="tablist">
        {CAPS.map((x, n) => (
          <button key={n}
            className={"cap-seg" + (n === i ? " on" : "")}
            onClick={() => jump(n, n > i ? 1 : -1)}
            aria-label={x.label} aria-selected={n === i}>
          </button>
        ))}
      </div>
    </div>
  );
}

function Capabilities({ variant = "simple" }) {
  return (
    <section className={"section capabilities cap--" + variant} id="capabilities">
      <div className="wrap">
        {variant === "weighted" && (
          <div className="cap-flow">
            {CAPS.map((c, i) => <CapStage key={c.k} c={c} i={i} />)}
          </div>
        )}
        {variant === "spotlight" && <CapSpotlight />}
        {variant === "simple" && (
          <div className="cap-rows">
            {CAPS.map((c, i) => <CapRow key={c.k} c={c} i={i} />)}
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Capabilities });