/* eslint-disable */
// OPS BOARD — sticky index on left, scrolling file cards on right.
function OpsBoard() {
  const files = [
    {
      id: "OPS-001", code: "ANGRY-YETI",
      name: "Angry Yeti Coffee Co.",
      sector: "Vertical 01 · Consumer Goods · Specialty Coffee",
      desc: "Specialty roasted coffee, shipped direct. Built for operators who take their morning seriously and don't have patience for thin gas-station fuel.",
      tagline: "Roasted to order. Shipped fresh.",
      status: "active",
      specs: { Format: "D2C", Channel: "Web", "DTG·Live": "0600 daily" },
      link: { label: "Visit storefront", href: "#" },
      slot: "ops-001-cover",
      img: "assets/angry-yeti-mark.png"
    },
    {
      id: "OPS-002", code: "THROTTLE-AND-GREASE",
      name: "Throttle & Grease",
      sector: "Vertical 02 · Media & Community · Motorcycles + Horsepower",
      desc: "An editorial community where motorcycle and high-performance car culture share the same garage. Discord, newsletter, and reviews \u2014 for the people who turn wrenches at midnight and log dyno pulls in the driveway.",
      tagline: "Motorcycles. Horsepower. No apologies.",
      status: "active",
      specs: { Format: "Community", Channel: "Discord + Newsletter", "HQ": "DFW, TX" },
      link: { label: "Enter the garage", href: "#" },
      slot: "ops-002-cover"
    },
    {
      id: "OPS-004", code: "[ REDACTED ]",
      name: "Fiction Publishing Imprint",
      sector: "Vertical 04 · Publishing · Independent Fiction",
      desc: "An independent fiction imprint operating under WTI. Catalog, author identities, and distribution channels are maintained separately from the parent company.",
      tagline: "Maintained separately.",
      status: "redacted",
      specs: { Format: "Print + EBook", Channel: "[ REDACTED ]", "DTG·Live": "[ REDACTED ]" },
      link: { label: "Maintained separately", href: null },
      slot: "ops-004-cover"
    }
  ];

  const [active, setActive] = React.useState("OPS-001");

  React.useEffect(() => {
    const els = files.map(f => document.getElementById(f.id));
    if (!els.every(Boolean)) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: "-30% 0px -55% 0px", threshold: 0 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="section ops" id="operations">
      <div className="ops__container">
        <div className="ops__head">
          <div className="section-label">
            <span className="num">§ 01</span>
            <span>// Operations</span>
            <span className="tag">OPS-INDEX</span>
          </div>
          <h2 className="ops__heading reveal">
            Four operations. <em>One operator.</em>
          </h2>
          <p className="ops__sub reveal" data-delay="2">
            Each vertical operates as its own file — with its own audience, P&amp;L, and standard of work — under a single command. The list is the company.
          </p>
        </div>

        <div className="ops__board">
          <div className="ops__index" aria-label="Operations index">
            <div className="ops__index-header">
              <span>OPS // INDEX</span>
              <span className="live">LIVE</span>
            </div>
            {files.map(f => (
              <a key={f.id} href={`#${f.id}`} className={`ops__index-item${active === f.id ? " is-active" : ""}${f.status === "redacted" ? " ops__index-item--redacted" : ""}`}>
                <span className="ops__index-id">{f.id}</span>
                <span className="ops__index-name">{f.status === "redacted" ? "[ REDACTED ]" : f.name}</span>
                <span className="ops__index-status">{f.status === "redacted" ? "RDCT" : "ACT"}</span>
              </a>
            ))}
          </div>

          <div className="ops__files">
            {files.map((f, i) => (
              <OpsFile key={f.id} f={f} delay={(i % 4) + 1} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function OpsFile({ f, delay }) {
  const redacted = f.status === "redacted";
  return (
    <article className="ops__file reveal" id={f.id} data-delay={delay}>
      <div className="ops__file-cover">
        <div className={"folder" + (redacted ? " folder--redacted" : "")}>
          <span className="folder__tab" aria-hidden="true"></span>
          <span className="folder__stamp">{f.id}</span>
          {redacted ? <span className="folder__banner">CLASSIFIED</span> : null}
          <div className="folder__body">
            {redacted ? null : (f.img ? (
              <img src={f.img} alt={f.name + " mark"} loading="lazy" />
            ) : (
              <image-slot id={f.slot} shape="rect" placeholder={`Drop cover for ${f.name}`}></image-slot>
            ))}
          </div>
          <div className="folder__label">
            <span>{f.code === "[ REDACTED ]" ? <span className="redact-bar redact-bar--block" data-stamp="REDACTED">CLASSIFIED</span> : f.code}</span>
            <span className="folder__label-id">FILE / {f.id.replace("OPS-","")}</span>
          </div>
        </div>
      </div>
      <div className="ops__file-meta">
        <div className="ops__file-head">
          <span className="ops__file-id">{f.id} · {f.code}</span>
          <span className={`ops__file-status${redacted ? " ops__file-status--redacted" : ""}`}>
            {redacted ? "REDACTED" : "ACTIVE"}
          </span>
        </div>
        <p className="ops__file-sector">{f.sector}</p>
        <h3 className="ops__file-name">
          {redacted ? <span className="redact-bar redact-bar--block" data-stamp="REDACTED · LVL-4">██████████████</span> : f.name}
        </h3>
        {f.tagline ? <p className="ops__file-tagline">{f.tagline}</p> : null}
        <p className="ops__file-desc">{f.desc}</p>
        <div className="ops__file-specs">
          {Object.entries(f.specs).map(([k, v]) => (
            <div key={k} className="ops__file-spec">
              <span className="ops__file-spec-label">{k}</span>
              <span className="ops__file-spec-value">{v}</span>
            </div>
          ))}
        </div>
        {f.link.href ? (
          <a href={f.link.href} className="ops__file-link" target="_blank" rel="noopener">{f.link.label} &nbsp;&rarr;</a>
        ) : (
          <span className="ops__file-link" aria-disabled="true">{f.link.label}</span>
        )}
      </div>
    </article>
  );
}

window.OpsBoard = OpsBoard;