// Construction Cascade — Language → Grammar → Sensation → Emotion → "I"
// Toggle any layer to see how the self weakens.
const { useState: useState2, useEffect: useEffect2 } = React;

const cascadeStyles = {
  wrap: { display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 36, alignItems: 'stretch' },
  stage: {
    position: 'relative', aspectRatio: '4 / 3',
    background: 'radial-gradient(ellipse at 50% 60%, rgba(207,191,149,0.10), transparent 70%), rgba(38,39,39,0.4)',
    borderRadius: 12, border: '1px solid var(--border)', overflow: 'hidden',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  controls: {
    display: 'flex', flexDirection: 'column', gap: 14,
    padding: 24, background: 'rgba(246,240,226,0.02)',
    border: '1px solid var(--border)', borderRadius: 12,
  },
  layerRow: {
    display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, alignItems: 'center',
    padding: '14px 16px',
    background: 'rgba(38,39,39,0.4)',
    border: '1px solid var(--border)',
    borderRadius: 8,
    transition: 'all 400ms cubic-bezier(0.4,0,0.2,1)',
    cursor: 'pointer',
    userSelect: 'none',
  },
  layerNum: {
    fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1,
    color: 'var(--muted)', fontWeight: 400,
    transition: 'color 400ms cubic-bezier(0.4,0,0.2,1)',
  },
  layerInfo: { display: 'flex', flexDirection: 'column', gap: 2 },
  layerName: {
    fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1,
    color: 'var(--fg)', fontWeight: 600, letterSpacing: '-0.01em',
    transition: 'color 400ms cubic-bezier(0.4,0,0.2,1)',
  },
  layerRole: {
    fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--muted)',
  },
  toggle: {
    width: 36, height: 20, borderRadius: 999, position: 'relative',
    background: 'rgba(207,191,149,0.18)',
    transition: 'background 400ms cubic-bezier(0.4,0,0.2,1)',
  },
  toggleDot: {
    position: 'absolute', top: 2, width: 16, height: 16, borderRadius: 999,
    background: 'var(--fg-soft)',
    transition: 'all 400ms cubic-bezier(0.4,0,0.2,1)',
  },
  footer: {
    fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--muted)',
    paddingTop: 14, borderTop: '1px solid var(--border)',
    display: 'flex', justifyContent: 'space-between', marginTop: 4,
  },
};

const LAYERS = [
  { id: 'language',  name: 'Language',  role: 'Installs the subject',  color: '#d6cfbe' },
  { id: 'grammar',   name: 'Grammar',   role: 'Rehearses it',           color: '#cfbf95' },
  { id: 'sensation', name: 'Sensation', role: 'Makes it felt',          color: '#b69f83' },
  { id: 'emotion',   name: 'Emotion',   role: 'Makes it feel true',     color: '#a98456' },
];

function ConstructionCascade() {
  const [on, setOn] = useState2({ language: true, grammar: true, sensation: true, emotion: true });
  const activeCount = Object.values(on).filter(Boolean).length;
  const strength = activeCount / 4;

  const toggle = (id) => setOn(prev => ({ ...prev, [id]: !prev[id] }));
  const allOn = () => setOn({ language: true, grammar: true, sensation: true, emotion: true });
  const allOff = () => setOn({ language: false, grammar: false, sensation: false, emotion: false });

  // verdict text
  const verdict = activeCount === 4
    ? '"i" — nearly impenetrable.'
    : activeCount === 0
      ? 'awareness, without an owner.'
      : `${activeCount} of 4 — fragile.`;

  return (
    <div style={cascadeStyles.wrap}>
      <div style={cascadeStyles.stage}>
        <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <radialGradient id="cascade-i-glow">
              <stop offset="0%" stopColor="rgba(207,191,149,0.55)" />
              <stop offset="50%" stopColor="rgba(207,191,149,0.15)" />
              <stop offset="100%" stopColor="rgba(207,191,149,0)" />
            </radialGradient>
          </defs>

          {/* concentric rings — one per layer, outermost to innermost */}
          {LAYERS.map((layer, i) => {
            const r = 130 - i * 22;
            const active = on[layer.id];
            return (
              <g key={layer.id} style={{ transition: 'all 600ms cubic-bezier(0.4,0,0.2,1)', opacity: active ? 1 : 0.08 }}>
                <circle cx="200" cy="150" r={r}
                  fill="none"
                  stroke={layer.color}
                  strokeWidth="0.8"
                  strokeDasharray={active ? `${r * 2 * Math.PI / 80} 4` : '2 6'}
                  opacity={active ? 0.4 : 0.3} />
                {/* small label dot at top */}
                <circle cx="200" cy={150 - r} r="2.5" fill={layer.color}
                  opacity={active ? 0.9 : 0.3} />
                <text x="206" y={150 - r + 3}
                  fontFamily="var(--font-ui)" fontSize="7"
                  fill={active ? layer.color : 'var(--muted)'}
                  letterSpacing="0.18em" style={{ textTransform: 'uppercase' }}>
                  {layer.name}
                </text>
              </g>
            );
          })}

          {/* central "i" with glow */}
          <g style={{ transition: 'all 800ms cubic-bezier(0.4,0,0.2,1)' }}>
            <circle cx="200" cy="150" r="60"
              fill="url(#cascade-i-glow)"
              opacity={Math.max(0.15, strength)} />
            <text x="200" y="170" textAnchor="middle"
              fontFamily="var(--font-display)"
              fontSize={60 + strength * 12}
              fontWeight="700"
              fill="var(--glow)"
              opacity={Math.max(0.18, strength * 0.95 + 0.1)}
              style={{ transition: 'all 800ms cubic-bezier(0.4,0,0.2,1)', letterSpacing: '-0.04em' }}>
              i
            </text>
          </g>

          {/* drifting particles when layers off — awareness without an owner */}
          {activeCount < 4 && (
            <g>
              {[...Array(20)].map((_, i) => {
                const angle = (i / 20) * Math.PI * 2;
                const r = 150 + (i % 3) * 14;
                const x = 200 + Math.cos(angle) * r;
                const y = 150 + Math.sin(angle) * r * 0.65;
                return (
                  <circle key={i} cx={x} cy={y} r="1"
                    fill="var(--glow)" opacity={0.2 + (1 - strength) * 0.5} />
                );
              })}
            </g>
          )}
        </svg>

        <div style={{
          position: 'absolute', bottom: 14, left: 16,
          fontFamily: 'var(--font-ui)', fontSize: 9, letterSpacing: '0.32em',
          textTransform: 'uppercase', color: 'var(--glow)',
        }}>
          self · {verdict}
        </div>

        <div style={{
          position: 'absolute', top: 14, left: 16,
          fontFamily: 'var(--font-ui)', fontSize: 9, letterSpacing: '0.32em',
          textTransform: 'uppercase', color: 'var(--muted)',
        }}>
          construction cascade
        </div>
      </div>

      <div style={cascadeStyles.controls}>
        {LAYERS.map((layer, i) => {
          const active = on[layer.id];
          return (
            <div key={layer.id}
              style={{
                ...cascadeStyles.layerRow,
                background: active ? 'rgba(207,191,149,0.06)' : 'rgba(38,39,39,0.4)',
                borderColor: active ? 'rgba(207,191,149,0.25)' : 'var(--border)',
              }}
              onClick={() => toggle(layer.id)}>
              <span style={{ ...cascadeStyles.layerNum, color: active ? layer.color : 'var(--muted)' }}>
                {(i + 1).toString().padStart(2, '0')}
              </span>
              <span style={cascadeStyles.layerInfo}>
                <span style={{ ...cascadeStyles.layerName, color: active ? 'var(--fg)' : 'var(--muted)' }}>
                  {layer.name}
                </span>
                <span style={cascadeStyles.layerRole}>{layer.role}</span>
              </span>
              <span style={{
                ...cascadeStyles.toggle,
                background: active ? 'var(--glow)' : 'rgba(207,191,149,0.18)',
              }}>
                <span style={{
                  ...cascadeStyles.toggleDot,
                  left: active ? 18 : 2,
                  background: active ? 'var(--bg)' : 'var(--fg-soft)',
                }}></span>
              </span>
            </div>
          );
        })}

        <div style={cascadeStyles.footer}>
          <span>{activeCount}/4 layers</span>
          <span style={{ color: 'var(--glow)', cursor: 'pointer' }}
            onClick={activeCount === 0 ? allOn : allOff}>
            {activeCount === 0 ? '↻ rebuild' : '✕ dissolve all'}
          </span>
        </div>
      </div>
    </div>
  );
}

window.ConstructionCascade = ConstructionCascade;