/* Gisler Votes No — pattern cards and the full-record table.
   Shared by every component file (they compile as plain scripts in one global
   scope): CloseSection uses useState from this destructure. */
const { useState, useEffect, useRef } = React;

function PatternSection({ bills }) {
  return (
    <section className="pattern" data-screen-label="The pattern">
      <div className="wrap">
        <div className="eyebrow">The pattern</div>
        <h2>His Record Didn't<br /><span className="red">Stop There.</span></h2>
        <div className="cards">
          {bills.map((b, i) => (
            <div className="card" key={b.id}
              ref={(el) => { if (el && window.__trackIO) window.__trackIO.observe(el); }}
              data-track-kind="bill" data-track-key={"bill-" + b.id} data-track-id={b.id}
              data-track-category={b.category} data-track-position={i}
              data-screen-label={"Card " + b.id}
            >
              <div className="bill">{b.id}</div>
              <h3>{b.cardTitle || b.summary}</h3>
              <p>{b.cardText || b.detail}</p>
              <div className="nay">Nay — Gisler</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RecordSection({ bills }) {
  const noVotes = bills.filter((b) => ((b.vote && b.vote.gisler) || "NAY").toUpperCase() === "NAY").length;
  return (
    <section className="record" data-screen-label="Full record">
      <div className="wrap">
        <div className="eyebrow">The full record</div>
        <h2>{bills.length} Bills to Help Georgians.<br />
          <span className="red">{noVotes} No Votes by Eric Gisler.</span></h2>
        <p className="sub">
          Every one is a recorded roll-call vote in the Georgia House. Look them
          up yourself.
        </p>
        <div className="table">
          <div className="row head"><div>Bill</div><div>What it would have done</div><div>Gisler</div><div>Roll call</div></div>
          {bills.map((b) => (
            <div className="row" key={b.id}>
              <div className="billno">{b.id}</div>
              <div className="desc">{b.summary}</div>
              <div className="badge">{(b.vote && b.vote.gisler) || "NAY"}</div>
              <div className="roll">{b.rollCall}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PatternSection, RecordSection });