// Felt Experience — a breath-paced prompt inviting the reader to bring something to mind.
// Lives inside section VIII. Three phases: invitation → sensation → story.
const { useState: useState6, useEffect: useEffect6 } = React;

const feltStyles = {
  wrap: {
    margin: '48px 0',
    padding: '40px 36px',
    border: '1px solid var(--border)',
    borderRadius: 12,
    background: 'linear-gradient(180deg, rgba(207,191,149,0.04), rgba(207,191,149,0.01))',
    position: 'relative',
  },
  label: {
    fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.32em',
    textTransform: 'uppercase', color: 'var(--glow)', marginBottom: 16,
  },
  stage: {
    display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 20,
    minHeight: 220,
  },
  prompt: {
    fontFamily: 'var(--font-display)', fontSize: 32, lineHeight: 1.05,
    color: 'var(--fg)', fontWeight: 500, letterSpacing: '-0.015em',
    textTransform: 'none', margin: 0, maxWidth: '24ch', fontStyle: 'italic',
  },
  hint: {
    fontFamily: 'var(--font-prose)', fontSize: 14, lineHeight: 1.65,
    color: 'var(--fg-soft)', margin: 0, maxWidth: '50ch',
  },
  pulse: {
    width: 64, height: 64, borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(207,191,149,0.6), rgba(207,191,149,0.15) 60%, transparent 80%)',
    animation: 'luma-breath 8s cubic-bezier(0.4,0,0.2,1) infinite',
    flex: 'none',
  },
  row: {
    display: 'flex', gap: 24, alignItems: 'center',
  },
  buttons: {
    display: 'flex', gap: 12, marginTop: 8,
  },
  trace: {
    display: 'flex', flexDirection: 'column', gap: 10,
    fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--muted)',
    lineHeight: 1,
    marginTop: 8,
    alignSelf: 'stretch',
  },
  traceRow: {
    display: 'flex', alignItems: 'center', gap: 12,
    transition: 'opacity 800ms cubic-bezier(0.4,0,0.2,1)',
    lineHeight: 1,
    whiteSpace: 'nowrap',
  },
  traceDot: {
    width: 6, height: 6, borderRadius: '50%',
    transition: 'all 800ms cubic-bezier(0.4,0,0.2,1)',
  },
};

const STEPS = [
  {
    key: 'invite',
    prompt: 'Bring something to mind.',
    hint: 'A recent difficulty. A person. A decision you are carrying.',
    cta: 'i\'ve brought it to mind',
    next: 'sensation',
  },
  {
    key: 'sensation',
    prompt: 'Notice what arose first.',
    hint: 'Before the words. A weight in the chest. A tightening in the gut. A particular quality of heaviness or aliveness. Sit with it for a moment.',
    cta: 'i feel it',
    next: 'story',
  },
  {
    key: 'story',
    prompt: 'Now notice the story arriving.',
    hint: 'The mind reaches for a cause. Selects the most charged material. Presents the result as discovery. Watch this happen. Was the meaning there before you named it?',
    cta: 'i see it constructing',
    next: 'rest',
  },
  {
    key: 'rest',
    prompt: 'There is no back.',
    hint: 'There is only now, producing a sensation it labels as retrieval. The event was generated. Right here. By the same awareness reading these words.',
    cta: 'continue reading',
    next: null,
  },
];

function FeltExperience() {
  const [step, setStep] = useState6(0);
  const [unlocked, setUnlocked] = useState6([]);

  const advance = () => {
    setUnlocked(u => [...u, STEPS[step].key]);
    if (step < STEPS.length - 1) setStep(s => s + 1);
    else setStep(s => s + 1); // closes
  };

  const reset = () => { setStep(0); setUnlocked([]); };

  const current = STEPS[Math.min(step, STEPS.length - 1)];
  const finished = step >= STEPS.length;

  return (
    <div style={feltStyles.wrap}>
      <div style={feltStyles.label}>pause · a felt experience</div>

      <div style={feltStyles.stage}>
        <div style={feltStyles.row}>
          <div style={feltStyles.pulse}></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <h3 style={feltStyles.prompt}>{finished ? 'Rest here.' : current.prompt}</h3>
            <p style={feltStyles.hint}>{finished
              ? 'The sensation was real. The story was constructed. Now return to the words below — they continue from where you are.'
              : current.hint}</p>
          </div>
        </div>

        <div style={feltStyles.buttons}>
          {!finished && (
            <button className="luma-button luma-button--primary" onClick={advance}>
              {current.cta}
            </button>
          )}
          {(step > 0 || finished) && (
            <button className="luma-button" onClick={reset}>begin again</button>
          )}
        </div>

        <div style={feltStyles.trace}>
          {STEPS.map((s, i) => {
            const reached = i <= step;
            return (
              <div key={s.key} style={{
                ...feltStyles.traceRow,
                opacity: reached ? 1 : 0.3,
              }}>
                <span style={{
                  ...feltStyles.traceDot,
                  background: reached ? 'var(--glow)' : 'var(--muted)',
                  boxShadow: reached ? '0 0 8px var(--glow)' : 'none',
                }}></span>
                <span style={{ color: reached ? 'var(--fg-soft)' : 'var(--muted)' }}>
                  {String(i + 1).padStart(2, '0')} · {s.key}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.FeltExperience = FeltExperience;