/* Article.jsx — the core component: one Unprinciple as a ratified article.
   Numeral in the margin, sacred clause in Caslon, the "turn" italicized,
   exceptions revealed as fine print. Includes a "show the fine print" toggle. */

function Article({ data, index }) {
  const [open, setOpen] = React.useState(false);

  return (
    <article className="article" data-screen-label={"Article " + data.roman} id={"article-" + data.n}>
      <hr className="rule-double" style={{ margin: 0 }} />

      <div className="article-grid">
        {/* margin: oversized numeral + meta + (exposé) scrawl */}
        <div className="article-margin">
          <div className="article-numeral">{data.roman}</div>
          <div className="u-label" style={{ color: "var(--sand-text)", marginTop: 4 }}>
            ARTICLE {data.roman} / XI
          </div>
          <div className="article-note" aria-hidden="true">
            <span className="article-note-arrow">↳</span>{data.note}
          </div>
        </div>

        {/* body */}
        <div className="article-body">
          <h2 className="u-h1 article-title">{data.title}</h2>

          <p className="u-clause article-clause">
            <span className="article-ideal">{data.ideal}</span>{" "}
            <em className="article-turn">{data.turn}</em>{" "}
            <span className={"article-exceptions" + (open ? " is-open" : "")}>
              {data.exceptions}
            </span>
            <sup className="article-dagger">†</sup>
          </p>

          <div className="article-controls">
            <button className="finelink" onClick={() => setOpen(o => !o)}>
              <span className="finelink-mark">{open ? "–" : "+"}</span>
              {open ? "hide the conditions" : "review the conditions of this principle"}
            </button>
            <span className="article-filed">
              <span className="u-dagger">†</span> filed under: {data.short.toLowerCase()}, as amended
            </span>
          </div>

          {open && (
            <div className="article-addendum">
              <div className="u-label" style={{ color: "var(--ember)", marginBottom: 8 }}>ADDENDUM · SUBSECTION (c)</div>
              <p className="u-fine">
                The above exceptions are non-exhaustive and may be expanded at the discretion of
                the Bureau, the organizers, the loudest person present, or anyone invoking
                the vibe in good faith. This principle remains binding except where binding feels excessive.
              </p>
            </div>
          )}
        </div>

        {/* the stamp, applied at an angle */}
        <div className="article-stamp">
          <Stamp rotate={data.n % 2 ? -7 : 5} size={15}>{data.stamp}</Stamp>
        </div>
      </div>
    </article>
  );
}

window.Article = Article;