// Two Maps — folk vs empirical. A draggable divide.
const { useState: useState4, useRef: useRef4, useEffect: useEffect4 } = React;

const mapsStyles = {
  wrap: { display: 'flex', flexDirection: 'column', gap: 18 },
  legend: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
    fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase',
  },
  legendCol: { display: 'flex', flexDirection: 'column', gap: 6 },
  legendLabel: { color: 'var(--muted)' },
  legendName: {
    fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
    letterSpacing: '-0.01em', textTransform: 'none',
  },
  splitWrap: {
    position: 'relative', aspectRatio: '16 / 9',
    background: 'rgba(38,39,39,0.4)',
    borderRadius: 12, border: '1px solid var(--border)',
    overflow: 'hidden', cursor: 'col-resize',
    userSelect: 'none',
  },
  side: {
    position: 'absolute', top: 0, height: '100%',
    overflow: 'hidden',
  },
  divider: {
    position: 'absolute', top: 0, bottom: 0, width: 2,
    background: 'var(--glow)',
    transform: 'translateX(-1px)',
    boxShadow: '0 0 16px rgba(207,191,149,0.6)',
    zIndex: 5,
    pointerEvents: 'none',
  },
  handle: {
    position: 'absolute', top: '50%', width: 36, height: 36,
    transform: 'translate(-50%, -50%)', borderRadius: 999,
    background: 'var(--glow)',
    color: 'var(--bg)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 700,
    boxShadow: '0 0 24px rgba(207,191,149,0.5)',
    zIndex: 6,
    cursor: 'col-resize',
    letterSpacing: '0.08em',
  },
};

// Folk (left) — hard drive: files, fixed
function HardDriveSide() {
  const files = [
    { label: 'age 7 · birthday', y: 28 },
    { label: 'first heartbreak',  y: 54 },
    { label: 'father said',       y: 80 },
    { label: 'the accident',      y: 106 },
    { label: 'when she left',     y: 132 },
    { label: 'the betrayal',      y: 158 },
    { label: 'school of 2003',    y: 184 },
    { label: 'that summer',       y: 210 },
  ];
  return (
    <svg viewBox="0 0 500 281" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id="hd-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(38,39,39,0.6)" />
          <stop offset="100%" stopColor="rgba(27,28,28,0.9)" />
        </linearGradient>
      </defs>
      <rect width="500" height="281" fill="url(#hd-bg)" />

      {/* grid lines */}
      {[...Array(8)].map((_, i) => (
        <line key={i} x1="40" x2="460" y1={28 + i * 26} y2={28 + i * 26}
          stroke="rgba(246,240,226,0.05)" strokeWidth="0.5" />
      ))}

      {/* hard-drive icon */}
      <g transform="translate(40, 14)">
        <text fontFamily="var(--font-ui)" fontSize="9" fill="rgba(246,240,226,0.5)"
          letterSpacing="0.32em" style={{ textTransform: 'uppercase' }}>
          /memory.archive
        </text>
      </g>

      {/* file entries */}
      {files.map((f, i) => (
        <g key={i}>
          <rect x="40" y={f.y - 8} width="6" height="14" fill="rgba(207,191,149,0.4)" />
          <text x="56" y={f.y + 3} fontFamily="var(--font-ui)" fontSize="11"
            fill="rgba(246,240,226,0.7)" letterSpacing="0.02em">
            {f.label}
          </text>
          <text x="420" y={f.y + 3} fontFamily="var(--font-ui)" fontSize="9"
            fill="rgba(246,240,226,0.3)" letterSpacing="0.18em"
            style={{ textTransform: 'uppercase' }}>
            stored · v1
          </text>
        </g>
      ))}

      {/* title strip */}
      <g transform="translate(0, 240)">
        <text x="40" y="14" fontFamily="var(--font-display)" fontSize="22" fontWeight="700"
          fill="rgba(246,240,226,0.95)" style={{ letterSpacing: '-0.01em' }}>
          the hard drive
        </text>
        <text x="40" y="30" fontFamily="var(--font-ui)" fontSize="9"
          fill="rgba(246,240,226,0.4)" letterSpacing="0.24em"
          style={{ textTransform: 'uppercase' }}>
          folk model · what you were taught
        </text>
      </g>
    </svg>
  );
}

// Empirical (right) — reconstruction: floating fragments, present-now
function ReconstructionSide({ tick }) {
  // animate fragments slowly
  const fragments = [
    { x: 70,  y: 60,  label: 'fragment' },
    { x: 200, y: 90,  label: 'fragment' },
    { x: 330, y: 50,  label: 'fragment' },
    { x: 140, y: 150, label: 'fragment' },
    { x: 280, y: 170, label: 'fragment' },
    { x: 380, y: 130, label: 'fragment' },
    { x: 100, y: 200, label: 'fragment' },
    { x: 240, y: 220, label: 'fragment' },
    { x: 50,  y: 130, label: 'fragment' },
    { x: 420, y: 80,  label: 'fragment' },
    { x: 360, y: 200, label: 'fragment' },
    { x: 180, y: 30,  label: 'fragment' },
  ];
  return (
    <svg viewBox="0 0 500 281" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <radialGradient id="rc-bg">
          <stop offset="0%" stopColor="rgba(207,191,149,0.16)" />
          <stop offset="60%" stopColor="rgba(207,191,149,0.04)" />
          <stop offset="100%" stopColor="rgba(38,39,39,0.6)" />
        </radialGradient>
        <radialGradient id="rc-now">
          <stop offset="0%" stopColor="rgba(207,191,149,0.6)" />
          <stop offset="60%" stopColor="rgba(207,191,149,0.10)" />
          <stop offset="100%" stopColor="rgba(207,191,149,0)" />
        </radialGradient>
      </defs>
      <rect width="500" height="281" fill="url(#rc-bg)" />

      {/* now-glow at center */}
      <circle cx="250" cy="130" r="100" fill="url(#rc-now)" opacity="0.6" />
      <text x="250" y="132" textAnchor="middle"
        fontFamily="var(--font-display)" fontSize="22" fontWeight="500"
        fill="var(--glow)" fontStyle="italic"
        style={{ letterSpacing: '-0.01em' }}>
        now
      </text>
      <text x="250" y="148" textAnchor="middle"
        fontFamily="var(--font-ui)" fontSize="8"
        fill="rgba(207,191,149,0.6)" letterSpacing="0.32em"
        style={{ textTransform: 'uppercase' }}>
        assembling
      </text>

      {/* fragments orbiting */}
      {fragments.map((f, i) => {
        const dx = f.x - 250; const dy = f.y - 130;
        const dist = Math.sqrt(dx*dx + dy*dy);
        const baseAngle = Math.atan2(dy, dx);
        const angle = baseAngle + (tick * 0.0002) * (i % 2 === 0 ? 1 : -1);
        const x = 250 + Math.cos(angle) * dist;
        const y = 130 + Math.sin(angle) * dist;
        return (
          <g key={i}>
            <line x1={x} y1={y} x2="250" y2="130"
              stroke="var(--glow)" strokeWidth="0.4" opacity="0.18"
              strokeDasharray="1 3" />
            <circle cx={x} cy={y} r="3" fill="var(--glow)" opacity="0.85" />
            <circle cx={x} cy={y} r="6" fill="var(--glow)" opacity="0.15" />
          </g>
        );
      })}

      {/* title strip */}
      <g transform="translate(0, 240)">
        <text x="40" y="14" fontFamily="var(--font-display)" fontSize="22" fontWeight="700"
          fill="rgba(246,240,226,0.95)" style={{ letterSpacing: '-0.01em' }}>
          reconstruction
        </text>
        <text x="40" y="30" fontFamily="var(--font-ui)" fontSize="9"
          fill="rgba(207,191,149,0.65)" letterSpacing="0.24em"
          style={{ textTransform: 'uppercase' }}>
          empirical model · what is actually happening
        </text>
      </g>
    </svg>
  );
}

function TwoMaps() {
  const [split, setSplit] = useState4(0.5);
  const [tick, setTick] = useState4(0);
  const wrapRef = useRef4(null);
  const draggingRef = useRef4(false);

  useEffect4(() => {
    let raf;
    const t = () => { setTick(performance.now()); raf = requestAnimationFrame(t); };
    raf = requestAnimationFrame(t);
    return () => cancelAnimationFrame(raf);
  }, []);

  const setFromEvent = (e) => {
    const rect = wrapRef.current.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    setSplit(Math.max(0.05, Math.min(0.95, x / rect.width)));
  };

  useEffect4(() => {
    const onMove = (e) => { if (draggingRef.current) setFromEvent(e); };
    const onUp = () => { draggingRef.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <div style={mapsStyles.wrap}>
      <div style={mapsStyles.splitWrap} ref={wrapRef}
        onMouseDown={(e) => { draggingRef.current = true; setFromEvent(e); }}
        onTouchStart={(e) => { draggingRef.current = true; setFromEvent(e); }}>

        {/* left side */}
        <div style={{ ...mapsStyles.side, left: 0, width: `${split * 100}%` }}>
          <div style={{ width: `${100 / split}%`, height: '100%' }}>
            <HardDriveSide />
          </div>
        </div>

        {/* right side */}
        <div style={{ ...mapsStyles.side, right: 0, width: `${(1 - split) * 100}%` }}>
          <div style={{ width: `${100 / (1 - split)}%`, height: '100%',
            marginLeft: `${-(split / (1 - split)) * 100}%` }}>
            <ReconstructionSide tick={tick} />
          </div>
        </div>

        {/* divider */}
        <div style={{ ...mapsStyles.divider, left: `${split * 100}%` }}></div>
        <div style={{ ...mapsStyles.handle, left: `${split * 100}%` }}>
          ⇆
        </div>
      </div>

      <div style={mapsStyles.legend} data-mobile-stack>
        <div style={mapsStyles.legendCol}>
          <span style={mapsStyles.legendLabel}>What you were taught</span>
          <span style={{ ...mapsStyles.legendName, color: 'var(--fg-soft)' }}>The hard drive</span>
          <span style={{ fontFamily: 'var(--font-prose)', fontSize: 12, textTransform: 'none',
            letterSpacing: 0, color: 'var(--muted)', lineHeight: 1.6 }}>
            Events are recorded, stored, and retrieved. The past is fixed. It lives somewhere behind you. The best you can do is manage it.
          </span>
        </div>
        <div style={mapsStyles.legendCol}>
          <span style={{ ...mapsStyles.legendLabel, color: 'var(--glow)' }}>What is actually happening</span>
          <span style={{ ...mapsStyles.legendName, color: 'var(--glow)' }}>Reconstruction</span>
          <span style={{ fontFamily: 'var(--font-prose)', fontSize: 12, textTransform: 'none',
            letterSpacing: 0, color: 'var(--muted)', lineHeight: 1.6 }}>
            Fragments are pulled into a present-moment assembly. Shaped by who you currently are. Filed as memory. Slightly different next time.
          </span>
        </div>
      </div>
    </div>
  );
}

window.TwoMaps = TwoMaps;