/* Step screens — unified chrome, body adapts per input type.
   Shared: StepChrome (header + progress + footer)
   Bodies: Mood · Intention · Breath · Voice · Complete
*/

// ─── Shared chrome ───
function StepChrome({ stepIdx, totalSteps, flowLabel, onBack, footer, children, hideBackLabel }) {
  return (
    <div style={{
      background: TH.bg, color: TH.ink, fontFamily: TF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      {/* Header */}
      <div style={{
        padding: '10px 28px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ fontSize: 18, color: TH.ink2 }}>←</div>
        </div>
        <div style={{
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: TH.ink3, fontWeight: 600,
        }}>
          {flowLabel} · {String(stepIdx + 1).padStart(2, '0')} of {String(totalSteps).padStart(2, '0')}
        </div>
        <div style={{ fontSize: 12, color: TH.ink2 }}>Skip</div>
      </div>

      {/* Hairline progress — 5 segments, terracotta fill */}
      <div style={{ padding: '18px 28px 0', display: 'flex', gap: 6 }}>
        {Array.from({ length: totalSteps }).map((_, i) => (
          <div key={i} style={{
            flex: 1, height: 2, borderRadius: 1,
            background: i <= stepIdx ? TH.accent : TH.line,
          }} />
        ))}
      </div>

      {/* Body */}
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {children}
      </div>

      {/* Footer */}
      {footer && (
        <div style={{ padding: '14px 28px 22px' }}>
          {footer}
        </div>
      )}
    </div>
  );
}

function StepPrimary({ label = 'Continue' }) {
  return (
    <button style={{
      width: '100%', padding: '15px',
      background: TH.ink, color: TH.bg, border: 'none', borderRadius: 999,
      fontSize: 14, fontWeight: 500, fontFamily: TF.body,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    }}>
      {label} <span style={{ opacity: 0.7 }}>→</span>
    </button>
  );
}

function StepTitle({ eyebrow, title, emphasis, sub }) {
  return (
    <div style={{ padding: '28px 28px 0' }}>
      <div style={{
        fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: TH.accent, fontWeight: 600,
      }}>
        {eyebrow}
      </div>
      <div style={{
        fontFamily: TF.display, fontSize: 28, lineHeight: 1.1,
        letterSpacing: '-0.02em', marginTop: 10, fontWeight: 400,
      }}>
        {title.split(emphasis || '\u0000').map((part, i, arr) => (
          <React.Fragment key={i}>
            {part}
            {i < arr.length - 1 && (
              <span style={{ fontStyle: 'italic', color: TH.accent }}>{emphasis}</span>
            )}
          </React.Fragment>
        ))}
      </div>
      {sub && (
        <div style={{ fontSize: 13, color: TH.ink2, marginTop: 10, lineHeight: 1.5 }}>
          {sub}
        </div>
      )}
    </div>
  );
}

// ─── 01 · Mood ───
function StepMood() {
  const [selected, setSelected] = React.useState(3);
  const moods = [
    { label: 'Shaken',  hue: '#A84A3A' },
    { label: 'Tense',   hue: '#B8773A' },
    { label: 'Steady',  hue: '#8A8A5C' },
    { label: 'Clear',   hue: '#7A8B6F' },
    { label: 'Flowing', hue: '#5C7A6B' },
  ];
  return (
    <StepChrome stepIdx={0} totalSteps={5} flowLabel="Pre-market"
      footer={<StepPrimary />}>
      <StepTitle
        eyebrow="01 · Mood"
        title="How do you feel right now?"
        emphasis="right now?"
        sub="Before the market opens its mouth, name your own state first."
      />
      <div style={{ padding: '40px 28px 0' }}>
        <div style={{
          height: 4, borderRadius: 2,
          background: `linear-gradient(90deg, ${moods.map(m => m.hue).join(',')})`,
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute',
            left: `${(selected / (moods.length - 1)) * 100}%`,
            top: '50%', transform: 'translate(-50%, -50%)',
            width: 20, height: 20, borderRadius: '50%',
            background: moods[selected].hue,
            border: `3px solid ${TH.bg}`,
            boxShadow: '0 2px 8px rgba(31,27,22,0.2)',
          }} />
        </div>
        <div style={{
          marginTop: 36, textAlign: 'center',
          fontFamily: TF.display, fontSize: 40,
          letterSpacing: '-0.02em', color: TH.ink,
        }}>
          {moods[selected].label}
        </div>
        <div style={{
          marginTop: 20, display: 'flex', justifyContent: 'space-between',
        }}>
          {moods.map((m, i) => (
            <div key={m.label} onClick={() => setSelected(i)} style={{
              fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
              color: i === selected ? TH.ink : TH.ink3,
              fontWeight: i === selected ? 600 : 500, cursor: 'pointer',
            }}>{m.label}</div>
          ))}
        </div>
      </div>
    </StepChrome>
  );
}

// ─── 02 · Intention ───
function StepIntention() {
  const [picked, setPicked] = React.useState(2);
  const options = [
    { title: 'Discipline',   sub: 'Follow my rules on every trade.' },
    { title: 'Patience',     sub: 'Wait for high-confidence setups only.' },
    { title: 'Protection',   sub: 'Risk management above all else.' },
    { title: 'Process',      sub: 'Execution over outcomes.' },
    { title: 'Neutrality',   sub: 'No revenge trading or FOMO.' },
    { title: 'Consistency',  sub: 'Same approach every session.' },
    { title: 'Confidence',   sub: 'Trust my preparation and plan.' },
  ];
  return (
    <StepChrome stepIdx={1} totalSteps={5} flowLabel="Pre-market"
      footer={<StepPrimary />}>
      <StepTitle
        eyebrow="02 · Intention"
        title="Today you trade under one word."
        emphasis="one word."
        sub="Pick the mindset that will answer you when things get loud."
      />
      <div style={{ padding: '20px 28px 0' }}>
        {options.map((o, i) => {
          const active = i === picked;
          return (
            <div key={o.title} onClick={() => setPicked(i)} style={{
              padding: '14px 0',
              borderBottom: i < options.length - 1 ? `1px solid ${TH.line}` : 'none',
              display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer',
            }}>
              <div style={{
                width: 16, height: 16, borderRadius: '50%',
                border: `1.5px solid ${active ? TH.accent : TH.line2}`,
                background: active ? TH.accent : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                {active && <div style={{ width: 5, height: 5, borderRadius: '50%', background: TH.bg }}/>}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontFamily: TF.display, fontSize: 18, letterSpacing: '-0.01em',
                  color: active ? TH.accent : TH.ink,
                  fontStyle: active ? 'italic' : 'normal',
                }}>
                  {o.title}
                </div>
                <div style={{ fontSize: 12, color: TH.ink2, marginTop: 2 }}>{o.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
    </StepChrome>
  );
}

// ─── 03 · Breath ───
function StepBreath() {
  return (
    <StepChrome stepIdx={2} totalSteps={5} flowLabel="Pre-market"
      footer={<StepPrimary label="Begin · 3:00" />}>
      <StepTitle
        eyebrow="03 · Breathing"
        title="Three minutes of grounding."
        emphasis="grounding."
        sub="Close the tabs. Close your eyes, if it helps. Box breath: in 4, hold 4, out 4, hold 4."
      />
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '50px 28px 30px',
      }}>
        {/* Concentric rings, not a filled cyan disc */}
        <div style={{ position: 'relative', width: 200, height: 200 }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            border: `1px solid ${TH.line}`,
          }}/>
          <div style={{
            position: 'absolute', inset: 20, borderRadius: '50%',
            border: `1px solid ${TH.line2}`,
          }}/>
          <div style={{
            position: 'absolute', inset: 40, borderRadius: '50%',
            background: `radial-gradient(circle at 50% 50%, ${TH.accentSoft}, ${TH.surface} 80%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexDirection: 'column',
          }}>
            <div style={{
              fontFamily: TF.display, fontSize: 38, letterSpacing: '-0.02em',
              color: TH.ink,
            }}>3:00</div>
            <div style={{
              fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: TH.ink3, marginTop: 4,
            }}>Box breath</div>
          </div>
        </div>
      </div>
      <div style={{ padding: '0 28px', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', gap: 16 }}>
          {['2 min', '3 min', '5 min'].map((t, i) => (
            <div key={t} style={{
              padding: '6px 14px', borderRadius: 999,
              border: `1px solid ${i === 1 ? TH.ink : TH.line}`,
              background: i === 1 ? TH.ink : 'transparent',
              color: i === 1 ? TH.bg : TH.ink2,
              fontSize: 12, fontWeight: 500,
            }}>{t}</div>
          ))}
        </div>
      </div>
    </StepChrome>
  );
}

// ─── 04 · Voice ───
function StepVoice() {
  return (
    <StepChrome stepIdx={3} totalSteps={5} flowLabel="Pre-market"
      footer={<StepPrimary label="Save & continue" />}>
      <StepTitle
        eyebrow="04 · Reflection"
        title="What's on your mind as you prepare?"
        emphasis="on your mind"
        sub="Two minutes is enough. Speak to yourself a week from now."
      />

      {/* Prompt as pull-quote */}
      <div style={{ padding: '24px 28px 0' }}>
        <div style={{
          borderLeft: `2px solid ${TH.accentSoft}`, paddingLeft: 14,
          fontFamily: TF.display, fontStyle: 'italic', fontSize: 15,
          color: TH.ink2, lineHeight: 1.45,
        }}>
          Yesterday: "Stop chasing the opener. The setups that worked were the ones I waited on."
        </div>
      </div>

      {/* Mic */}
      <div style={{
        padding: '44px 28px 20px', display: 'flex',
        flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{ position: 'relative', width: 130, height: 130 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: TH.accentSoft, opacity: 0.5 }}/>
          <div style={{ position: 'absolute', inset: 12, borderRadius: '50%', background: TH.accentSoft }}/>
          <div style={{
            position: 'absolute', inset: 26, borderRadius: '50%', background: TH.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 12px 32px rgba(184,85,58,0.3)',
          }}>
            <FlowGlyph name="mic" size={32} color={TH.bg} />
          </div>
        </div>
        <div style={{
          fontFamily: TF.display, fontSize: 16, marginTop: 18, color: TH.ink,
        }}>Tap to speak</div>
        <div style={{
          fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: TH.ink3, marginTop: 4, fontWeight: 600,
        }}>OR TYPE INSTEAD ↓</div>
      </div>

      <div style={{ padding: '0 28px' }}>
        <div style={{
          padding: '14px 18px', borderRadius: 16,
          background: TH.surface, border: `1px solid ${TH.line}`,
          fontSize: 13, color: TH.ink3,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ fontFamily: TF.display, fontStyle: 'italic' }}>Aa</span>
          <span>Write instead…</span>
        </div>
      </div>
    </StepChrome>
  );
}

// ─── 05 · Complete ───
function StepComplete() {
  return (
    <StepChrome stepIdx={4} totalSteps={5} flowLabel="Pre-market"
      footer={
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={{
            flex: 1, padding: '15px',
            background: 'transparent', border: `1px solid ${TH.line}`,
            borderRadius: 999, color: TH.ink, fontSize: 13, fontWeight: 500,
            fontFamily: TF.body,
          }}>Share</button>
          <button style={{
            flex: 2, padding: '15px',
            background: TH.ink, color: TH.bg, border: 'none', borderRadius: 999,
            fontSize: 14, fontWeight: 500, fontFamily: TF.body,
          }}>Back home</button>
        </div>
      }>
      <div style={{ padding: '36px 28px 0', textAlign: 'center' }}>
        <div style={{
          width: 6, height: 6, borderRadius: '50%',
          background: TH.sage, margin: '0 auto 16px',
        }}/>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: TH.sage, fontWeight: 600,
        }}>
          Complete · 8:46 AM
        </div>
        <div style={{
          fontFamily: TF.display, fontSize: 32, lineHeight: 1.1,
          letterSpacing: '-0.02em', marginTop: 10,
        }}>
          You're <span style={{ fontStyle: 'italic', color: TH.accent }}>prepared.</span>
        </div>
        <div style={{
          fontSize: 13, color: TH.ink2, marginTop: 10, lineHeight: 1.5,
          maxWidth: 280, margin: '10px auto 0',
        }}>
          Trade your plan. Trust your process. You just skipped the first 30 minutes of reactive trades.
        </div>
      </div>

      {/* Your word today */}
      <div style={{ padding: '28px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: TH.accent, fontWeight: 600, textAlign: 'center',
        }}>
          Your word today
        </div>
        <div style={{
          fontFamily: TF.display, fontSize: 44, fontStyle: 'italic',
          letterSpacing: '-0.02em', textAlign: 'center', marginTop: 8, color: TH.ink,
        }}>
          Protection.
        </div>
      </div>

      {/* Meta strip */}
      <div style={{ padding: '28px 28px 0' }}>
        <div style={{
          display: 'flex',
          borderTop: `1px solid ${TH.line}`, borderBottom: `1px solid ${TH.line}`,
          padding: '14px 0',
        }}>
          <MetaCell label="Steps"   value="5" />
          <MetaCell label="Time"    value="4:52" />
          <MetaCell label="Mood"    value="Steady" tone={TH.sage} />
          <MetaCell label="Streak"  value="14d" tone={TH.accent} last />
        </div>
      </div>

      {/* What next */}
      <div style={{ padding: '24px 28px 8px' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: TH.ink3, fontWeight: 600,
        }}>
          What's next
        </div>
        <div style={{ marginTop: 10 }}>
          <NextRow title="Mid-Session Reset" sub="Keep near your desk" when="If tilt hits" />
          <NextRow title="End-of-Day Review" sub="Tonight · 4:05 PM"   when="Scheduled"    last />
        </div>
      </div>
    </StepChrome>
  );
}

function NextRow({ title, sub, when, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '12px 0',
      borderBottom: last ? 'none' : `1px solid ${TH.line}`,
    }}>
      <div>
        <div style={{ fontFamily: TF.display, fontSize: 16, letterSpacing: '-0.01em' }}>{title}</div>
        <div style={{ fontSize: 11, color: TH.ink3, marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{
        fontFamily: TF.mono, fontSize: 10, letterSpacing: '0.08em',
        color: TH.accent, fontWeight: 600,
      }}>{when.toUpperCase()}</div>
    </div>
  );
}

Object.assign(window, {
  StepChrome, StepPrimary, StepTitle,
  StepMood, StepIntention, StepBreath, StepVoice, StepComplete,
});