// Transparency scorecard + Help-us-track / Contribute teaser page.

// Renders a 0–N scorecard of what's actually published online for a given
// jurisdiction. Pulled from data.TRANSPARENCY_SCORECARDS by id.
function TransparencyScorecard({ id, onNavigate, compact }) {
  const sc = window.CV_DATA.TRANSPARENCY_SCORECARDS?.[id];
  if (!sc) return null;
  const yes = sc.items.filter(x => x.ok).length;
  const total = sc.items.length;
  const pct = Math.round((yes / total) * 100);
  return (
    <section className={`cv-trans ${compact ? "cv-trans-compact" : ""}`}>
      <header className="cv-trans-hd">
        <div>
          <div className="cv-trans-eyebrow">Transparency score</div>
          <h3 className="cv-trans-title">{sc.jurisdiction}</h3>
          <div className="cv-trans-sub">What's actually published online · sourced from the official site.</div>
        </div>
        <div className={`cv-trans-score cv-trans-score-${pct < 40 ? "low" : pct < 70 ? "mid" : "high"}`}>
          <div className="cv-trans-score-n">{yes}<span>/{total}</span></div>
          <div className="cv-trans-score-l">{pct}%</div>
        </div>
      </header>
      <ul className="cv-trans-list">
        {sc.items.map((it, i) => (
          <li key={i} className={`cv-trans-item ${it.ok ? "is-yes" : "is-no"}`}>
            <span className="cv-trans-mark" aria-hidden="true">{it.ok ? "✓" : "—"}</span>
            <span className="cv-trans-name">{it.name}</span>
          </li>
        ))}
      </ul>
      {yes < total && (
        <div className="cv-trans-cta">
          <CVButton variant="primary" onClick={() => onNavigate && onNavigate("contribute")}>
            Help improve this score →
          </CVButton>
          <div className="cv-trans-cta-hint">Generate a public-records request for the missing items in one click.</div>
        </div>
      )}
    </section>
  );
}

// ─── Help us track / Contribute teaser page ─────────────────────────────
function ContributePage({ onNavigate }) {
  const [email, setEmail] = React.useState("");
  const [signedUp, setSignedUp] = React.useState(false);
  return (
    <div className="cv-contrib" data-screen-label="06 Contribute">
      <header className="cv-contrib-hd">
        <div className="cv-contrib-hd-l">
          <div className="cv-contrib-hd-eyebrow">Help us track</div>
          <h1 className="cv-contrib-hd-title">
            536 federal politicians today.<br/>
            <span className="cv-contrib-hd-title-em">519,682 elected officials</span> to go.
          </h1>
          <div className="cv-contrib-hd-meta">
            <span>Two features launching · sign up to be notified</span>
            <span className="cv-ballot-hd-dot">·</span>
            <span>Same nonpartisan rules · primary sources only</span>
          </div>
        </div>
        <div className="cv-contrib-hd-r">
          <div className="cv-contrib-hd-stat">
            <div className="cv-contrib-hd-stat-n">536</div>
            <div className="cv-contrib-hd-stat-l">covered now</div>
          </div>
          <div className="cv-contrib-hd-stat cv-contrib-hd-stat-target">
            <div className="cv-contrib-hd-stat-n">519,682</div>
            <div className="cv-contrib-hd-stat-l">elected total</div>
          </div>
        </div>
      </header>

      <p className="cv-contrib-intro">
        ClarionVote tracks federal politicians today. The rest — your mayor, school board, district attorney,
        state utility commissioner — live in council minutes, county courthouse PDFs, and state ethics filings
        that aren't indexed anywhere. Two features change that.
      </p>

      <section className="cv-home-section cv-contrib-features">
        <div className="cv-home-section-hd">
          <div>
            <h2 className="cv-home-section-title">Coming soon</h2>
            <div className="cv-home-section-sub">Both features are in development. Primary sources required, both major parties on the editorial board.</div>
          </div>
        </div>
        <div className="cv-now-grid">
          <div className="cv-now-col cv-contrib-card">
            <div className="cv-now-col-hd">
              <h3 className="cv-now-col-title">Community contribution</h3>
              <span className="cv-contrib-eta">Q3 2026</span>
            </div>
            <p className="cv-contrib-card-p">
              Submit data on a local official your state doesn't track yet. Every submission requires a
              primary source link. Editors verify before it goes live.
            </p>
            <ul className="cv-contrib-list">
              <li><span className="cv-contrib-bullet">·</span> Submit a politician's record with sourced documents</li>
              <li><span className="cv-contrib-bullet">·</span> Flag corrections to existing records</li>
              <li><span className="cv-contrib-bullet">·</span> Earn verified-contributor status after 5 accepted submissions</li>
            </ul>
          </div>
          <div className="cv-now-col cv-contrib-card">
            <div className="cv-now-col-hd">
              <h3 className="cv-now-col-title">FOIA / public-records toolkit</h3>
              <span className="cv-contrib-eta">Q4 2026</span>
            </div>
            <p className="cv-contrib-card-p">
              One-click public-records requests, drafted to your jurisdiction's exact agency. Tracks the
              response clock. Returned documents attach to the politician's card.
            </p>
            <ul className="cv-contrib-list">
              <li><span className="cv-contrib-bullet">·</span> Auto-routes to the correct agency (state, county, municipal)</li>
              <li><span className="cv-contrib-bullet">·</span> Tracks the legal response window — pings when overdue</li>
              <li><span className="cv-contrib-bullet">·</span> Documents become part of the public record on ClarionVote</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="cv-logistics cv-contrib-signup">
        <header className="cv-logistics-hd">
          <div>
            <div className="cv-logistics-eyebrow">Notify me</div>
            <h2 className="cv-logistics-title">Two emails. That's it.</h2>
            <div className="cv-logistics-sub">One when community contribution launches, one when the FOIA toolkit launches. No marketing list, no third parties.</div>
          </div>
        </header>
        <form className="cv-contrib-signup-form" onSubmit={(e) => { e.preventDefault(); setSignedUp(true); }}>
          <div className="cv-hero-input">
            <MailIcon2/>
            <input
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="cv-btn cv-btn-primary cv-btn-lg" disabled={signedUp}>
            {signedUp ? "✓ You're on the list" : "Notify me"}
          </button>
        </form>
      </section>

      <section className="cv-home-section">
        <div className="cv-home-section-hd">
          <div>
            <h2 className="cv-home-section-title">The rules don't change.</h2>
            <div className="cv-home-section-sub">Same principles apply to community-submitted data as to everything else.</div>
          </div>
        </div>
        <div className="cv-pillars">
          {[
            { n: 1, name: "Every claim needs a receipt.", desc: "No record gets published without a primary-source link. Wayback Machine snapshots OK; uncited claims not." },
            { n: 2, name: "No editorializing — ever.",    desc: "Submissions describe what happened, what was said, what was disclosed. Never what to think about it." },
            { n: 3, name: "Nonpartisan, mechanically.",   desc: "Submissions are reviewed by editors of both major parties. Disagreements are flagged for community discussion." },
          ].map((p) => (
            <div key={p.n} className="cv-pillar">
              <div className="cv-pillar-num">{String(p.n).padStart(2, "0")}</div>
              <div className="cv-pillar-name">{p.name}</div>
              <p className="cv-pillar-desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function MailIcon2() {
  return <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><rect x="1.5" y="3" width="11" height="8" stroke="currentColor" strokeWidth="1.3"/><path d="M1.5 4L7 8L12.5 4" stroke="currentColor" strokeWidth="1.3"/></svg>;
}

Object.assign(window, { TransparencyScorecard, ContributePage });