// 02 · The Door — the legislative history of who was allowed in and when.

function TabDoor() {
  const [activeLaw, setActiveLaw] = React.useState(null);
  const laws = window.legislationData;
  const W = 1320, H = 300, pad = { l: 60, r: 20, t: 30, b: 30 };
  const innerW = W - pad.l - pad.r;

  const x = (yr) => pad.l + ((yr - 1870) / (2030 - 1870)) * innerW;

  const active = activeLaw != null ? laws[activeLaw] : null;

  return (
    <div style={{ padding: '32px 56px 80px' }}>
      <Eyebrow id="02 · THE DOOR"
        title="The laws that decided who was welcome. Each line is a law. Above: what it permitted. Below: what it restricted."
        right="Congressional Record · Public domain" />

      {/* Timeline */}
      <div style={{ border: '1px solid #2A2218', background: 'rgba(30,24,16,0.3)', padding: '18px 24px 12px' }}>
        <svg width={W} height={H} style={{ display: 'block' }}>
          {/* Center line */}
          <line x1={pad.l} x2={W - pad.r} y1={H / 2} y2={H / 2}
            stroke="#2A2218" strokeWidth="1" />

          {/* Labels */}
          <text x={pad.l - 8} y={H / 2 - 10} textAnchor="end" className="mono"
            fill="#5A4E3A" fontSize="9" fontFamily="Space Mono">PERMITTED</text>
          <text x={pad.l - 8} y={H / 2 + 16} textAnchor="end" className="mono"
            fill="#5A4E3A" fontSize="9" fontFamily="Space Mono">RESTRICTED</text>

          {/* Law lines */}
          {laws.map((law, i) => {
            const lx = x(law.year);
            const isActive = activeLaw === i;
            const isPermit = law.type === 'permit';
            const isMixed = law.type === 'mixed';
            const lineColor = isPermit ? '#C9A84C' : isMixed ? '#FDAE61' : '#C0392B';

            return (
              <g key={i}
                onMouseEnter={() => setActiveLaw(i)}
                onMouseLeave={() => setActiveLaw(null)}
                style={{ cursor: 'pointer' }}>
                {/* Vertical line */}
                <line x1={lx} x2={lx}
                  y1={isPermit || isMixed ? H / 2 - 80 : H / 2}
                  y2={!isPermit || isMixed ? H / 2 + 80 : H / 2}
                  stroke={lineColor} strokeWidth={isActive ? 2.5 : 1.5}
                  opacity={isActive ? 1 : 0.7} />

                {/* Year label */}
                <text x={lx} y={H / 2 + (isPermit ? -88 : 96)}
                  textAnchor="middle" className="mono"
                  fill={isActive ? lineColor : '#5A4E3A'} fontSize="10"
                  fontFamily="Space Mono" fontWeight={isActive ? 700 : 400}>
                  {law.year}
                </text>

                {/* Law name */}
                <text x={lx} y={H / 2 + (isPermit ? -100 : 108)}
                  textAnchor="middle" className="mono"
                  fill={isActive ? '#D4C8B8' : '#5A4E3A'} fontSize="8"
                  fontFamily="Space Mono" letterSpacing="0.05"
                  transform={`rotate(-35, ${lx}, ${H / 2 + (isPermit ? -100 : 108)})`}>
                  {law.name.length > 20 ? law.name.slice(0, 18) + '…' : law.name}
                </text>

                {/* Active marker */}
                {isActive && (
                  <circle cx={lx} cy={H / 2} r="4" fill={lineColor} />
                )}

                {/* Hit area */}
                <rect x={lx - 15} y={0} width={30} height={H}
                  fill="transparent" />
              </g>
            );
          })}

          {/* Decade axis */}
          {Array.from({ length: 16 }).map((_, i) => {
            const yr = 1880 + i * 10;
            return (
              <text key={yr} x={x(yr)} y={H - 4} textAnchor="middle"
                className="mono" fill="#5A4E3A" fontSize="9" fontFamily="Space Mono">
                {yr}
              </text>
            );
          })}
        </svg>
      </div>

      {/* Detail panel */}
      {active && (
        <div style={{
          marginTop: 16, border: '1px solid #2A2218', background: 'rgba(30,24,16,0.5)',
          padding: '24px 32px', animation: 'fadeUp 300ms ease both',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <span className="mono" style={{ color: '#C9A84C', fontSize: 14, fontWeight: 700 }}>{active.year}</span>
              <span className="display" style={{ color: '#F2EBD9', fontSize: 28, marginLeft: 16, fontWeight: 400 }}>
                {active.name}
              </span>
            </div>
            <Confidence level="high" />
          </div>
          <div className="serif" style={{ color: '#D4C8B8', fontSize: 16, marginTop: 16, lineHeight: 1.6, maxWidth: 900 }}>
            {active.effect}
          </div>
          {active.quote && (
            <div style={{
              marginTop: 20, padding: '16px 24px', background: '#F2EBD9', color: '#100C08',
              borderLeft: '3px solid #C9A84C',
            }}>
              <div className="serif" style={{ fontSize: 14, lineHeight: 1.6, fontStyle: 'italic' }}>
                {active.quote}
              </div>
            </div>
          )}
        </div>
      )}

      {!active && (
        <div style={{ marginTop: 16, textAlign: 'center' }}>
          <span className="mono" style={{ color: '#5A4E3A', fontSize: 11, letterSpacing: 0.2 }}>
            HOVER A LAW TO SEE ITS EFFECT ON THE DATA
          </span>
        </div>
      )}

      {/* Full law list */}
      <div style={{ marginTop: 32 }}>
        <HRule>THE LAWS THAT MATTER</HRule>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, marginTop: 16, background: '#2A2218' }}>
          {laws.map((law, i) => (
            <div key={i} style={{
              background: '#1E1810', padding: '16px 20px', cursor: 'pointer',
              borderLeft: `3px solid ${law.type === 'permit' ? '#C9A84C' : law.type === 'mixed' ? '#FDAE61' : '#C0392B'}`,
            }}
              onMouseEnter={() => setActiveLaw(i)}
              onMouseLeave={() => setActiveLaw(null)}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span className="mono" style={{ color: '#C9A84C', fontSize: 13, fontWeight: 700 }}>{law.year}</span>
                <span className="serif" style={{ color: '#D4C8B8', fontSize: 15 }}>{law.name}</span>
              </div>
              <div className="serif" style={{ color: '#8A7E6A', fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>
                {law.effect}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TabDoor });