// Compact tile-grid US map for the home flow.
// One element: the map itself + a hover/click tooltip with programs in that state.
// No big showcase grid, no separate page — the user explicitly wants this section
// kept small.

function CompactMap() {
  const [active, setActive] = useState(null); // sticky on click
  const [hover, setHover] = useState(null);

  // States with TSD work
  const stateWork = {
    NY: { name: 'New York', count: 14, programs: [
      'Kathryn Garcia / NYC Mayor',
      'Tiffany Cabán / Queens DA',
      'Dawn Smalls / NYC Public Advocate',
      'NYSUT / NY State Senate',
      'Robin Lois / Dutchess Comptroller',
      'Jen Metzger / Ulster Co. Executive',
      'Shawyn Howard / Mt. Vernon Mayor',
      'NY Against Fracking'
    ]},
    CO: { name: 'Colorado', count: 7, programs: [
      'Trisha Calvarese / CO-04',
      'Latina Initiative',
      'Michael Hancock / Denver Mayor',
      'John Walsh / Denver DA',
      'Wanda James / CU Regent',
      'Sol Sandoval / CO-03'
    ]},
    NV: { name: 'Nevada', count: 9, programs: [
      'Cisco Aguilar / NV Sec of State',
      'Rep. Dina Titus / NV-01',
      'WIN / GANA PAC',
      'Make the Road / Nevada'
    ]},
    CA: { name: 'California', count: 6, programs: ['Rep. Pete Aguilar / CA-33'] },
    WA: { name: 'Washington', count: 5, programs: ['Alexis Mercedes Rinck / Seattle City Council'] },
    GA: { name: 'Georgia', count: 3, programs: ['Sen. Raphael Warnock (via OFU)', 'Eshé Collins / Atlanta City Council'] },
    NH: { name: 'New Hampshire', count: 1, programs: ['Senate IE (via OFU)'] },
    WI: { name: 'Wisconsin', count: 3, programs: ['Senate IE (via OFU)'] },
    IA: { name: 'Iowa', count: 2, programs: ['Senate IE (via OFU)'] },
    MT: { name: 'Montana', count: 2, programs: ['Sen. Jon Tester (via OFU)'] },
    OH: { name: 'Ohio', count: 2, programs: ['Senate IE (via OFU)'] },
    NE: { name: 'Nebraska', count: 2, programs: ['Dan Osborn (via OFU)'] },
    IL: { name: 'Illinois', count: 4, programs: ['Adam Parrott-Sheffer / Chicago School Board'] },
    MD: { name: 'Maryland', count: 2, programs: ['32BJ / Maryland Senate'] },
    NJ: { name: 'New Jersey', count: 4, programs: ['32BJ / Jersey City Mayor'] },
    PA: { name: 'Pennsylvania', count: 4, programs: ['32BJ / Philadelphia Mayor'] }
  };

  const COLS = 12;
  const grid = [
    ['',  '',  '',  '',  '',  '',  '',  '',  '',  '',  '',  'ME'],
    ['AK','',  '',  'WA','MT','ND','MN','',  'WI','MI','VT','NH'],
    ['',  '',  '',  'OR','ID','WY','SD','IA','IL','IN','NY','MA'],
    ['',  '',  '',  'CA','NV','UT','CO','NE','MO','OH','PA','NJ'],
    ['',  '',  '',  '',  'AZ','NM','KS','AR','KY','WV','VA','CT'],
    ['',  '',  '',  '',  '',  '',  'OK','LA','TN','NC','MD','RI'],
    ['',  '',  'HI','',  '',  '',  'TX','MS','AL','SC','DE',''],
    ['',  '',  '',  '',  '',  '',  '',  '',  'GA','FL','',  '']
  ];

  const focused = active || hover;
  const focusedData = focused ? stateWork[focused] : null;

  return (
    <div className="map-wrap">
      <div className="map-board">
        <div className="map-board-head">
          <span className="eyebrow">United States · 50 states</span>
          <span className="eyebrow">{Object.keys(stateWork).length} active</span>
        </div>

        <div className="map-grid" style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
          {grid.flat().map((abbrev, i) => {
            if (!abbrev) return <div key={i} className="map-cell map-cell-empty"/>;
            const has = stateWork[abbrev];
            const isActive = active === abbrev;
            const isHover = hover === abbrev;
            const intensity = has ? Math.min(has.count / 14, 1) : 0;
            return (
              <button
                key={i}
                onMouseEnter={() => setHover(abbrev)}
                onMouseLeave={() => setHover(null)}
                onClick={() => has && setActive(prev => prev === abbrev ? null : abbrev)}
                disabled={!has}
                className={`map-cell ${has ? 'map-cell-on' : 'map-cell-off'} ${isActive ? 'map-cell-active' : ''} ${isHover ? 'map-cell-hover' : ''}`}
                style={ has ? { '--i': 0.18 + intensity * 0.7 } : {}}
              >
                {abbrev}
              </button>
            );
          })}
        </div>

        <div className="map-legend">
          <span>Less work</span>
          <div className="map-legend-swatches">
            {[0.18, 0.35, 0.55, 0.75, 0.88].map(o => (
              <div key={o} style={{ background: `oklch(28% 0.08 270 / ${o})` }}/>
            ))}
          </div>
          <span>More</span>
          <span className="map-legend-hint">Click a state for programs</span>
        </div>
      </div>

      {/* Detail panel — sits beside the map */}
      <div className="map-detail">
        {focusedData ? (
          <>
            <div className="eyebrow">{focusedData.name}</div>
            <div className="map-detail-code">{focused}</div>
            <div className="map-detail-stat">
              <div className="map-detail-stat-num">{focusedData.count}</div>
              <div className="eyebrow">Programs</div>
            </div>
            <ul className="map-detail-list">
              {focusedData.programs.map((p, i) => (
                <li key={i}>{p}</li>
              ))}
            </ul>
          </>
        ) : (
          <>
            <div className="eyebrow">Hover or click any state</div>
            <div className="map-detail-empty">
              Programs will appear here.
            </div>
            <div className="map-detail-stats">
              {[
                { k: '16', v: 'States' },
                { k: '$200M+', v: 'Programs run' },
                { k: '20+', v: 'National awards' }
              ].map((s, i) => (
                <div key={i}>
                  <div className="map-detail-stat-num map-detail-stat-num-sm">{s.k}</div>
                  <div className="eyebrow">{s.v}</div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { CompactMap });