// Viewpoint — editorial before/after treatment with real prairie photography
function Radar() {
  const pins = [
    { id: 'north', x: 32, y: 28, name: 'North Neighborhood', from: 'View from Prairie Ridge Dr.', dist: '0.8 mi',
      before: '/images/pin-1-before.webp',
      after:  '/images/pin-1-after.webp' },
    { id: 'east',  x: 68, y: 42, name: 'East Homes',          from: 'View along County Rd 2850',    dist: '1.1 mi',
      before: '/images/pin-2-before.webp',
      after:  '/images/pin-2-after.webp' },
    { id: 'south', x: 48, y: 74, name: 'South Open Space',    from: 'View from state park trail',   dist: '1.4 mi',
      before: '/images/pin-3-before.webp',
      after:  '/images/pin-3-after.webp' },
  ];
  const [active, setActive] = useState(pins[0].id);
  const activePin = pins.find(p => p.id === active);
  const [split, setSplit] = useState(55);
  const dragging = useRef(false);
  const onMove = useCallback((clientX, rect) => {
    const pct = Math.max(2, Math.min(98, ((clientX - rect.left) / rect.width) * 100));
    setSplit(pct);
  }, []);
  const baRef = useRef(null);
  useEffect(() => {
    const up = () => { dragging.current = false; document.body.style.cursor = ''; };
    const move = (e) => {
      if (!dragging.current || !baRef.current) return;
      const rect = baRef.current.getBoundingClientRect();
      const cx = e.touches ? e.touches[0].clientX : e.clientX;
      onMove(cx, rect);
    };
    window.addEventListener('mousemove', move); window.addEventListener('mouseup', up);
    window.addEventListener('touchmove', move, { passive: true }); window.addEventListener('touchend', up);
    return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); };
  }, [onMove]);

  return (
    <section id="viewpoint" style={{ padding: '140px 0 120px', background: 'var(--cream-50)', borderTop: '1px solid rgba(20,32,27,.1)' }}>
      <div className="container-x">
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 80, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <Reveal><div className="eyebrow"><span className="dot" /> Visual impact</div></Reveal>
            <Reveal delay={1}>
              <h2 className="h2" style={{ marginTop: 20 }}>
                Designed to recede <span className="italic-serif" style={{ color: 'var(--forest-800)' }}>into the landscape.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p style={{ color: 'var(--slate-700)', fontSize: 16, lineHeight: 1.7, maxWidth: 520 }}>
              The most intensive activity stays in the campus interior. Earth berms, preserved tree lines, and 150‑foot perimeter setbacks keep the view from surrounding homes substantially the same as it is today. Select a viewpoint and drag to compare.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 24, alignItems: 'stretch' }}>
          {/* Campus plan */}
          <Reveal>
            <div style={{ background: 'var(--white)', border: '1px solid rgba(20,32,27,.12)', padding: 24 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16 }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--slate-500)' }}>Fig. 02 · Campus plan</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--forest-800)' }}>{pins.length} viewpoints</div>
              </div>
              <div style={{ position: 'relative', aspectRatio: '1 / 0.95', background: 'var(--cream-50)', overflow: 'hidden' }}>
                <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} aria-hidden>
                  {/* Parcel */}
                  <polygon points="20,20 80,22 84,78 18,82" fill="rgba(36,80,58,.06)" stroke="rgba(20,32,27,.55)" strokeWidth=".25" />
                  {/* Berm rings */}
                  <ellipse cx="50" cy="50" rx="28" ry="22" fill="rgba(36,80,58,.1)" stroke="rgba(20,32,27,.3)" strokeWidth=".18" />
                  <ellipse cx="50" cy="50" rx="22" ry="17" fill="rgba(36,80,58,.16)" />
                  {/* Buildings */}
                  {[[42,44,10,5],[53,46,8,5],[46,55,10,5],[55,54,6,4]].map(([x,y,w,h],i)=>(
                    <rect key={i} x={x} y={y} width={w} height={h} fill="var(--ink)" opacity=".85" />
                  ))}
                  {/* Road */}
                  <path d="M10 90 Q 30 70 50 60" stroke="rgba(20,32,27,.45)" strokeWidth=".6" fill="none" />
                  {/* Streams */}
                  <path d="M20 20 Q 15 40 18 82" stroke="rgba(36,80,58,.5)" strokeWidth=".35" fill="none" />
                  {/* Tree stipple */}
                  {Array.from({length: 90}).map((_,i)=>{
                    const a = (i/90)*Math.PI*2;
                    const r = 26 + (i%4)*2;
                    const cx = 50 + Math.cos(a)*r*1.18, cy = 50 + Math.sin(a)*r*.92;
                    return <circle key={i} cx={cx} cy={cy} r=".75" fill="var(--forest-800)" opacity=".55" />;
                  })}
                  {/* Scale label */}
                  <text x="3" y="98" fontSize="2.2" fontFamily="Inter" fill="var(--slate-500)" letterSpacing=".2">N ↑   SCALE 1:3000</text>
                </svg>
                {/* Pins */}
                {pins.map(p => {
                  const isActive = p.id === active;
                  return (
                    <button key={p.id} onClick={() => setActive(p.id)}
                      style={{ position: 'absolute', left: `${p.x}%`, top: `${p.y}%`, transform: 'translate(-50%,-50%)', background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }}>
                      <div style={{ position: 'relative', width: 32, height: 32 }}>
                        {isActive && <span className="pulse-ring" style={{ borderColor: 'var(--accent)' }} />}
                        <div style={{ position: 'absolute', inset: 10, borderRadius: 0, background: isActive ? 'var(--accent)' : 'var(--ink)', border: '2px solid var(--cream-50)' }} />
                      </div>
                    </button>
                  );
                })}
              </div>
              <div style={{ marginTop: 16, borderTop: '1px solid rgba(20,32,27,.14)' }}>
                {pins.map(p => {
                  const isActive = p.id === active;
                  return (
                    <button key={p.id} onClick={() => setActive(p.id)}
                      style={{ width: '100%', textAlign: 'left', padding: '16px 0', borderBottom: '1px solid rgba(20,32,27,.08)', background: 'transparent', border: 'none', borderBottom: '1px solid rgba(20,32,27,.08)', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, color: isActive ? 'var(--ink)' : 'var(--slate-700)' }}>
                      <div>
                        <div className="font-display" style={{ fontWeight: 500, fontSize: 16, color: 'var(--ink)' }}>
                          {isActive && <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--accent)', marginRight: 10, verticalAlign: 'middle' }} />}
                          {p.name}
                        </div>
                        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--slate-500)', marginTop: 4 }}>{p.from}</div>
                      </div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--accent-deep)' }}>{p.dist}</div>
                    </button>
                  );
                })}
              </div>
            </div>
          </Reveal>

          {/* Before/After */}
          <Reveal delay={1}>
            <div style={{ background: 'var(--white)', border: '1px solid rgba(20,32,27,.12)', padding: 24, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16 }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--slate-500)' }}>
                  {activePin.name} · {activePin.from}
                </div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--accent-deep)' }}>Drag to compare</div>
              </div>
              <div ref={baRef} className="ba-wrap" style={{ aspectRatio: '16 / 10', cursor: 'ew-resize', '--split': `${split}%` }}
                   onMouseDown={(e) => { dragging.current = true; document.body.style.cursor = 'ew-resize'; onMove(e.clientX, e.currentTarget.getBoundingClientRect()); }}
                   onTouchStart={(e) => { dragging.current = true; onMove(e.touches[0].clientX, e.currentTarget.getBoundingClientRect()); }}>
                <div style={{ position:'absolute', inset: 0, background: `url(${activePin.before}) center/cover` }}>
                  <div style={{ position: 'absolute', top: 16, left: 16, padding: '6px 12px', background: 'rgba(20,32,27,.7)', color: 'var(--cream-50)', fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase' }}>Current</div>
                </div>
                <div className="ba-after" style={{ background: `url(${activePin.after}) center/cover` }}>
                  <div style={{ position: 'absolute', top: 16, right: 16, padding: '6px 12px', background: 'var(--forest-900)', color: 'var(--cream-50)', fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase' }}>With campus</div>
                </div>
                <div className="ba-handle" style={{ background: 'var(--cream-50)', boxShadow: '0 0 0 1px rgba(20,32,27,.3)' }} />
                <div className="ba-knob" style={{ background: 'var(--cream-50)', borderRadius: 0 }} aria-hidden>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 3 L2 8 L6 13 M10 3 L14 8 L10 13" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 24, borderTop: '1px solid rgba(20,32,27,.14)', borderBottom: '1px solid rgba(20,32,27,.14)' }}>
                {[
                  { k: '150 ft', v: 'Minimum setback' },
                  { k: '10%+', v: 'Open space preserved' },
                  { k: 'Interior', v: 'Equipment orientation' },
                ].map((s,i) => (
                  <div key={i} style={{ padding: '18px 18px 18px 0', borderRight: i < 2 ? '1px solid rgba(20,32,27,.1)' : 'none', paddingLeft: i > 0 ? 18 : 0 }}>
                    <div className="font-display num" style={{ fontWeight: 500, fontSize: 26, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{s.k}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--slate-500)', marginTop: 4 }}>{s.v}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontFamily: 'var(--font-italic)', fontStyle: 'italic', fontSize: 14, color: 'var(--slate-500)', marginTop: 16, lineHeight: 1.55 }}>
                Photographs are reference imagery. Final renderings will be produced once the site design is finalized.
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media(max-width: 960px){ #viewpoint > .container-x > div { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}
window.Radar = Radar;