// CompareStrip — meeting-ready guided-scroll surface (U14).
// Hidden by default. Activates only when the URL carries ?compare=1.
// Frames the delta-vs-standard-package pitch with 4 named "see this" anchors.
function CompareStrip() {
  const [active, setActive] = useState(false);
  const [pulseId, setPulseId] = useState(null);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const sync = () => {
      const params = new URLSearchParams(window.location.search);
      setActive(params.get('compare') === '1');
    };
    sync();
    window.addEventListener('popstate', sync);
    return () => window.removeEventListener('popstate', sync);
  }, []);

  const anchors = [
    { id: 'overview',  label: 'Public-information hero', hint: 'Project-specific, direct, civic' },
    { id: 'viewpoint', label: 'Drag-to-compare',       hint: 'Before / after sightlines' },
    { id: 'daynight',  label: 'Day / Night cinematic', hint: 'Scrubbed video transition' },
    { id: 'dividend',  label: 'Tax-flow diagram',      hint: 'Source → destination' },
  ];

  const goTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const yOffset = -100; // account for fixed nav
    const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
    window.scrollTo({ top: y, behavior: 'smooth' });
    setPulseId(id);
    window.setTimeout(() => setPulseId(p => (p === id ? null : p)), 2200);
  };

  if (!active) return null;

  return (
    <>
      {pulseId && (
        <style>{`
          #${pulseId} { position: relative; }
          #${pulseId}::after {
            content: "";
            position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px;
            border: 2px solid var(--accent);
            border-radius: var(--r-sm);
            pointer-events: none;
            animation: cs-pulse 2.2s cubic-bezier(.2,.7,.2,1) both;
            z-index: 5;
          }
          @keyframes cs-pulse {
            0%   { opacity: 0; transform: scale(.985); }
            18%  { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.005); }
          }
        `}</style>
      )}
      <aside
        className="compare-strip"
        role="region"
        aria-label="Comparison walkthrough"
      >
        <div className="compare-strip__chrome">
          <span className="tag-mono compare-strip__eyebrow">vs Standard Package</span>
          <span className="compare-strip__rule" aria-hidden="true" />
        </div>
        <nav className="compare-strip__list">
          {anchors.map((a, i) => (
            <a
              key={a.id}
              href={`#${a.id}`}
              className="compare-strip__pill"
              onClick={goTo(a.id)}
            >
              <span className="compare-strip__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="compare-strip__label">{a.label}</span>
              <span className="compare-strip__hint">{a.hint}</span>
            </a>
          ))}
        </nav>
      </aside>
    </>
  );
}

window.CompareStrip = CompareStrip;