// Hero — rebuilt 2026-08-02 (roundtable redesign). The concern router IS
// the hero now: no photo, no stat rail, no headline-voice variants. White
// background, ink typography, calm civic — a disclosure strip, one direct
// H1, one honest sub, and the nine question cards that used to be a chip
// row buried below Elephants-in-the-Room. Selecting a card opens that panel
// in the Elephants section directly below (via window.__openElephant,
// registered by src/elephants.jsx — see the note there on why this is an
// imperative bridge rather than lifted state).
//
// Card copy is NOT duplicated here: HERO reads window.ELEPHANT_TOPICS (the
// same id/label/question data the panels render) so the resident-voice
// question on a card is always character-for-character the same text that
// becomes that panel's <h3> title.
//
// Below the hero: a neutral "Proposal at a glance" band. Deliberately no
// dollar or jobs figures here — research finding carried into this build is
// that benefits-before-risk-answers reads as bribery to a frightened
// audience (Sandman, psandman.com/col/hostile.htm). The $13B capital figure
// now lives only in Dividend; the jobs figures live in the Jobs & Taxes
// panel and Dividend, both badged Illustrative.
// Topic → icon map for the nine hero question cards (2026-08-03 design
// pass). Same 24px currentColor stroke set as the rest of Icons in
// shared.jsx — no new visual language, just applied per-topic.
const HERO_TOPIC_ICON = {
  water: 'Drop',
  power: 'Bolt',
  noise: 'Wave',
  lights: 'Moon',
  generators: 'Generator',
  taxes: 'Briefcase',
  traffic: 'Truck',
  property: 'Home',
  process: 'Ballot',
};

function Hero() {
  const topics = (typeof window !== 'undefined' && window.ELEPHANT_TOPICS) || [];

  const openCard = (id) => {
    jumpToSection('answers');
    if (typeof window !== 'undefined' && window.__openElephant) window.__openElephant(id);
  };

  return (
    <>
      <section id="overview" className="hr-section">
        {/* Signature texture — quiet prairie-grass + topo backdrop, corner-
            anchored, low-contrast on the paper tone, never behind body text
            (positioned past the standfirst's max-width, clipped by the
            section's overflow so it never intrudes on the card grid). */}
        <div className="hr-texture" aria-hidden>
          <Textures.Topo width={420} height={420} color="var(--wheat-600)" opacity={0.12} />
          <Textures.Grass width={230} height={120} color="var(--forest-700)" opacity={0.16} className="hr-texture-grass" />
        </div>
        <div className="container-x">
          <Reveal>
            <div className="eyebrow hr-kicker">
              <span className="dot" /> Proposed data center campus &middot; {SITE.locationLine} &middot; Published by {SITE.sponsor} &middot; Updated {SITE.updated}
            </div>
          </Reveal>
          <Reveal delay={1}>
            <h1 className="h1 hr-h1" data-content-path="hero.headline">
              Straight answers about the data center proposed in {SITE.county}.
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <p className="hr-sub">
              Maybe you're just curious. Maybe you've read something that scared you. Either way, this page works the same: pick the thing you care about, get the honest answer, and check every source yourself.
            </p>
          </Reveal>

          <Reveal delay={2} as="div" className="hr-grid" role="list" aria-label="Choose a concern">
            {topics.map((t) => {
              const IconName = HERO_TOPIC_ICON[t.id];
              const Icon = IconName && Icons[IconName];
              return (
                <button
                  key={t.id}
                  type="button"
                  role="listitem"
                  className="hr-card"
                  onClick={() => openCard(t.id)}
                >
                  <span className="hr-card-top">
                    {Icon && <span className="hr-card-icon"><Icon size={22} /></span>}
                    <span className="tag-mono hr-card-k">{t.label}</span>
                  </span>
                  <span className="hr-card-q font-display">{t.question}</span>
                  <span className="hr-card-arrow" aria-hidden><ArrowRight size={15} /></span>
                </button>
              );
            })}
          </Reveal>

          <Reveal delay={3}>
            <p className="hr-scrollline">Prefer to read straight through? Just scroll.</p>
          </Reveal>
        </div>
      </section>

      <section className="hr-glance">
        <div className="container-x">
          <div className="hr-glance-row">
            <div className="hr-glance-item">
              <span className="tag-mono hr-glance-k">Campus</span>
              <span className="hr-glance-v font-display">720 acres</span>
              <StatusBadge status="illustrative" />
            </div>
            <div className="hr-glance-item">
              <span className="tag-mono hr-glance-k">Stage</span>
              <span className="hr-glance-v font-display">Pre-construction</span>
              <span className="hr-glance-note">Site plan under {SITE.county} review</span>
            </div>
            <div className="hr-glance-item">
              <span className="tag-mono hr-glance-k">Published by</span>
              <span className="hr-glance-v font-display">{SITE.sponsor}</span>
            </div>
            <div className="hr-glance-item hr-glance-item-link">
              <button type="button" className="hr-glance-link" onClick={() => jumpToSection('viewpoint')}>
                See the site plan <ArrowRight size={13} />
              </button>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        .hr-section {
          background: var(--paper-warm);
          padding: 148px 0 40px;
          overflow: clip;
        }
        /* Signature texture — corner-anchored, never behind text (the
           card grid + copy sit at z-index:1 above it via stacking context;
           the texture itself has no interactive/text content so a z-index
           bump isn't even required, but the position keeps it clear of the
           standfirst's 640px max-width regardless of viewport). */
        .hr-texture {
          position: absolute;
          top: 0; right: 0;
          width: min(46vw, 480px);
          height: 480px;
          pointer-events: none;
          overflow: hidden;
        }
        .hr-texture svg:first-child { position: absolute; top: -60px; right: -80px; }
        .hr-texture-grass { position: absolute; bottom: -6px; right: 40px; }
        @media (max-width: 900px) { .hr-texture { width: 60vw; opacity: .7; } }
        @media (max-width: 600px) { .hr-texture { display: none; } }
        .hr-kicker {
          flex-wrap: wrap;
          line-height: 1.6;
          max-width: 900px;
          position: relative;
        }
        .hr-h1 {
          margin: 22px 0 0;
          color: var(--ink);
          max-width: 900px;
          position: relative;
        }
        .hr-sub {
          margin: 24px 0 0;
          font-family: var(--font-body);
          font-weight: 500;
          font-size: clamp(16px, 1.4vw, 19px);
          line-height: 1.6;
          color: var(--slate-700);
          max-width: 640px;
          position: relative;
        }

        .hr-grid {
          margin-top: 48px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--paper-warm-line);
          border: 1px solid var(--paper-warm-line);
          border-radius: var(--r-md);
          overflow: hidden;
          box-shadow: var(--shadow-md);
          position: relative;
        }
        .hr-card {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
          text-align: left;
          background: var(--white);
          border: none;
          padding: 26px 24px 24px;
          cursor: pointer;
          min-height: 128px;
          transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
          z-index: 1;
        }
        /* Accent-reveal top border on hover/focus — a thin wheat line that
           slides in rather than sitting there always (restrained). */
        .hr-card::before {
          content: "";
          position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, var(--wheat-500), var(--wheat-400));
          transform: scaleX(0);
          transform-origin: left;
          transition: transform .25s cubic-bezier(.2,.8,.2,1);
        }
        .hr-card:hover, .hr-card:focus-visible {
          background: var(--cream-100);
          transform: translateY(-2px);
          box-shadow: var(--shadow-sm);
        }
        .hr-card:hover::before, .hr-card:focus-visible::before { transform: scaleX(1); }
        @media (prefers-reduced-motion: reduce) { .hr-card:hover { transform: none; } }
        .hr-card-top { display: flex; align-items: center; gap: 10px; }
        .hr-card-icon {
          display: inline-flex; align-items: center; justify-content: center;
          width: 34px; height: 34px; border-radius: var(--r-xs);
          background: var(--paper-warm); color: var(--forest-700);
          flex: 0 0 auto;
        }
        .hr-card-k { color: var(--slate-500); letter-spacing: .16em; }
        .hr-card-q {
          font-size: 17px;
          font-weight: 600;
          line-height: 1.3;
          color: var(--ink);
          letter-spacing: -0.006em;
          padding-right: 24px;
        }
        .hr-card-arrow {
          position: absolute;
          right: 20px;
          bottom: 20px;
          color: var(--slate-400);
          transition: transform .2s ease, color .2s ease;
        }
        .hr-card:hover .hr-card-arrow { color: var(--wheat-700); transform: translateX(3px); }

        .hr-scrollline {
          margin-top: 28px;
          font-family: var(--font-body);
          font-size: 13px;
          color: var(--slate-500);
          position: relative;
        }

        /* Proposal-at-a-glance band — neutral orientation only, no $/jobs.
           White (2026-08-03): the transition step down from the hero's
           warm paper before Elephants picks warm back up. */
        .hr-glance {
          background: var(--white);
          border-top: 1px solid rgba(20,32,27,.1);
          border-bottom: 1px solid rgba(20,32,27,.1);
          padding: 28px 0;
        }
        .hr-glance-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          align-items: center;
        }
        .hr-glance-item { display: flex; flex-direction: column; gap: 5px; }
        .hr-glance-k { color: var(--slate-500); letter-spacing: .14em; }
        .hr-glance-v { font-size: 16px; font-weight: 600; color: var(--ink); }
        .hr-glance-note { font-family: var(--font-body); font-size: 12px; color: var(--slate-600); }
        .hr-glance-item-link { align-items: flex-start; justify-content: center; }
        .hr-glance-link {
          display: inline-flex; align-items: center; gap: 7px;
          background: transparent; border: 1px solid rgba(20,32,27,.2);
          border-radius: var(--r-pill); padding: 10px 16px;
          font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink);
          cursor: pointer; min-height: 44px;
          transition: border-color .2s ease, background .2s ease;
        }
        .hr-glance-link:hover { border-color: var(--accent); background: var(--white); }

        @media (max-width: 900px) {
          .hr-grid { grid-template-columns: repeat(2, 1fr); }
          /* Last card (The Process, 9th of 9) spans full width whenever the
             grid is 2-column — tablet and mobile alike — so it never sits
             alone in an awkward half-empty row. */
          .hr-card:nth-child(9) { grid-column: 1 / -1; }
          .hr-glance-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
        }

        @media (max-width: 600px) {
          .hr-section { padding: 116px 0 32px; }
          .hr-kicker { font-size: 9.5px !important; letter-spacing: .1em !important; line-height: 1.6 !important; }
          .hr-h1 { font-size: 30px !important; line-height: 1.14 !important; }
          .hr-sub { font-size: 15.5px !important; }
          .hr-grid { margin-top: 36px; }
          .hr-card { padding: 20px 18px 20px; min-height: 112px; }
          .hr-card-q { font-size: 15.5px; padding-right: 20px; }
          .hr-card-icon { width: 28px; height: 28px; }
          .hr-glance-row { grid-template-columns: 1fr 1fr; gap: 18px; }
          .hr-glance-item-link { grid-column: 1 / -1; }
          .hr-glance-link { width: 100%; justify-content: center; }
        }
      `}</style>
    </>
  );
}

window.Hero = Hero;