/* Voice Journal flow — "Breath" aesthetic.
   4 states: Idle → Recording → Review → Saved (with insight)
   The current app has a blank void during recording and a card-stack on save.
   Fix: give the voice a visible body (waveform), give reflection a shape
   (pull-quote + one insight), and drop card chrome for text-forward layout.
*/

const vj = {
  bg:      '#F4EFE6',
  surface: '#FBF7F0',
  ink:     '#1F1B16',
  ink2:    '#6B6156',
  ink3:    '#A89E92',
  line:    '#E6DFD2',
  accent:  '#B8553A',
  accentSoft: '#E8D3C6',
  sage:    '#7A8B6F',
};
const vjF = {
  display: `"Fraunces", Georgia, serif`,
  body:    `"Inter", system-ui, sans-serif`,
  mono:    `"JetBrains Mono", ui-monospace, monospace`,
};

// ───────── 1. Idle — prompt, not a blank page ─────────
function VJIdle() {
  return (
    <div style={{
      background: vj.bg, color: vj.ink, fontFamily: vjF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '10px 24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 18, color: vj.ink2 }}>←</div>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600 }}>Voice journal · morning</div>
        <div style={{ fontSize: 13, color: vj.ink2 }}>···</div>
      </div>

      {/* Prompt — the scariest part of a blank page is the blank page */}
      <div style={{ padding: '34px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: vj.accent, fontWeight: 600,
        }}>Today's prompt</div>
        <div style={{
          fontFamily: vjF.display, fontSize: 28, lineHeight: 1.15,
          letterSpacing: '-0.02em', marginTop: 12,
        }}>
          What do you want to <span style={{ fontStyle: 'italic', color: vj.accent }}>protect</span> yourself from today?
        </div>
        <div style={{ fontSize: 13, color: vj.ink2, marginTop: 10, lineHeight: 1.5 }}>
          2 minutes is enough. Speak like you're talking to yourself a week from now.
        </div>
      </div>

      {/* Prompt swap */}
      <div style={{ padding: '20px 28px 0' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 999,
          border: `1px solid ${vj.line}`, background: vj.surface,
          fontSize: 12, color: vj.ink2,
        }}>
          <span style={{ fontSize: 13 }}>↻</span> Try another prompt
        </div>
      </div>

      {/* Recent reflections peek */}
      <div style={{ padding: '36px 28px 0' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600, marginBottom: 14 }}>
          Yesterday
        </div>
        <div style={{
          fontFamily: vjF.display, fontStyle: 'italic', fontSize: 15, lineHeight: 1.45,
          color: vj.ink2, borderLeft: `2px solid ${vj.accentSoft}`, paddingLeft: 12,
        }}>
          "I need to stop chasing the opener. The setups that worked were the ones I waited on."
        </div>
      </div>

      {/* Mic — the whole screen's center of gravity */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ position: 'relative', width: 140, height: 140, margin: '0 auto' }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%',
              background: vj.accentSoft, opacity: 0.5 }}/>
            <div style={{ position: 'absolute', inset: 14, borderRadius: '50%',
              background: vj.accentSoft }}/>
            <div style={{ position: 'absolute', inset: 28, borderRadius: '50%',
              background: vj.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 12px 32px rgba(184,85,58,0.3)',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={vj.bg} strokeWidth="1.8" strokeLinecap="round">
                <rect x="9" y="3" width="6" height="12" rx="3" />
                <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
              </svg>
            </div>
          </div>
          <div style={{ fontFamily: vjF.display, fontSize: 16, marginTop: 20, color: vj.ink }}>
            Tap to speak
          </div>
          <div style={{ fontSize: 11, color: vj.ink3, marginTop: 4, letterSpacing: '0.08em' }}>
            OR TYPE INSTEAD ↓
          </div>
        </div>
      </div>

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

// ───────── 2. Recording — the voice becomes visible ─────────
function VJRecording() {
  // fake live waveform bars
  const bars = [12, 28, 18, 42, 56, 38, 22, 48, 62, 40, 30, 24, 52, 68, 58,
                44, 30, 22, 38, 50, 42, 28, 18, 32, 46, 34, 22];
  return (
    <div style={{
      background: vj.bg, color: vj.ink, fontFamily: vjF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '10px 24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(184,85,58,0.1)', color: vj.accent,
          fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: vj.accent }}/>
          RECORDING
        </div>
        <div style={{ fontFamily: vjF.mono, fontSize: 13, color: vj.ink }}>00:48</div>
      </div>

      {/* The prompt stays visible — don't hide context */}
      <div style={{ padding: '24px 28px 0' }}>
        <div style={{
          fontFamily: vjF.display, fontSize: 18, lineHeight: 1.3,
          color: vj.ink2, letterSpacing: '-0.01em',
        }}>
          What do you want to <span style={{ fontStyle: 'italic', color: vj.accent }}>protect</span> yourself from today?
        </div>
      </div>

      {/* Live transcript — typewriter, partial */}
      <div style={{ padding: '26px 28px 0', flex: 1, overflow: 'hidden' }}>
        <div style={{
          fontFamily: vjF.display, fontSize: 20, lineHeight: 1.45,
          letterSpacing: '-0.01em',
        }}>
          I think the thing I keep falling into is chasing the first 15 minutes.{' '}
          <span style={{ color: vj.ink2 }}>
            Yesterday I watched a clean setup form and I just —{' '}
          </span>
          <span style={{ color: vj.ink3, fontStyle: 'italic' }}>
            I didn't wait. I want today to be different
          </span>
          <span style={{
            display: 'inline-block', width: 2, height: 18, background: vj.accent,
            marginLeft: 2, verticalAlign: '-2px', animation: 'none',
          }}/>
        </div>
      </div>

      {/* Waveform */}
      <div style={{ padding: '0 28px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 3, height: 80,
          justifyContent: 'center',
        }}>
          {bars.map((h, i) => (
            <div key={i} style={{
              width: 3, height: h, borderRadius: 1.5,
              background: i < 18 ? vj.accent : vj.accentSoft,
              opacity: i < 18 ? 1 : 0.7,
            }}/>
          ))}
        </div>
      </div>

      {/* Controls */}
      <div style={{ padding: '8px 28px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 52, height: 52, borderRadius: '50%',
          border: `1px solid ${vj.line}`, background: vj.surface,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: vj.ink2, fontSize: 18,
        }}>✕</div>

        <div style={{
          width: 80, height: 80, borderRadius: '50%',
          background: vj.accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 32px rgba(184,85,58,0.3)',
        }}>
          <div style={{ width: 26, height: 26, borderRadius: 6, background: vj.bg }}/>
        </div>

        <div style={{
          width: 52, height: 52, borderRadius: '50%',
          border: `1px solid ${vj.line}`, background: vj.surface,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: vj.ink, fontSize: 14, fontWeight: 600,
        }}>✓</div>
      </div>
    </div>
  );
}

// ───────── 3. Review — read before you save ─────────
function VJReview() {
  return (
    <div style={{
      background: vj.bg, color: vj.ink, fontFamily: vjF.body,
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '10px 24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 18, color: vj.ink2 }}>←</div>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600 }}>Review</div>
        <div style={{ fontSize: 13, color: vj.accent, fontWeight: 500 }}>Edit</div>
      </div>

      {/* Meta — inline, no cards */}
      <div style={{ padding: '22px 28px 0' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600 }}>
          Tue · 23 Apr · 8:34 AM
        </div>
        <div style={{
          fontFamily: vjF.display, fontSize: 26, lineHeight: 1.15,
          letterSpacing: '-0.02em', marginTop: 6,
        }}>
          <span style={{ fontStyle: 'italic', color: vj.accent }}>Chasing</span> the first 15 minutes.
        </div>
        <div style={{
          display: 'flex', gap: 18, marginTop: 14,
          fontFamily: vjF.mono, fontSize: 11, color: vj.ink3, letterSpacing: '0.06em',
        }}>
          <span>142 WORDS</span>
          <span>·</span>
          <span>1:48</span>
          <span>·</span>
          <span style={{ color: vj.sage }}>▲ RESOLVED</span>
        </div>
      </div>

      {/* Transcript — reads like a page, not a chat log */}
      <div style={{ padding: '24px 28px 0', flex: 1, overflowY: 'auto' }}>
        <div style={{
          fontFamily: vjF.display, fontSize: 17, lineHeight: 1.55,
          letterSpacing: '-0.005em', color: vj.ink,
        }}>
          I think the thing I keep falling into is chasing the first 15 minutes. Yesterday
          I watched a clean setup form and I just — I didn't wait. I want today to be different.{' '}
          <Mark>My plan is to sit on my hands until 9:45</Mark>, no matter what CNBC is saying,
          no matter what the gap looks like. The setups I took last week that worked were all
          second-entries, never the first push. I know this. I just have to <Mark>act like I know it.</Mark>
        </div>

        {/* Audio scrubber */}
        <div style={{ marginTop: 26,
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 14px', borderRadius: 999,
          background: vj.surface, border: `1px solid ${vj.line}` }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: vj.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 0, height: 0, borderLeft: `7px solid ${vj.bg}`,
              borderTop: '5px solid transparent', borderBottom: '5px solid transparent', marginLeft: 2 }}/>
          </div>
          <div style={{ flex: 1, height: 2, borderRadius: 1, background: vj.line, position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, width: '28%', background: vj.accent, borderRadius: 1 }}/>
          </div>
          <div style={{ fontFamily: vjF.mono, fontSize: 11, color: vj.ink2 }}>0:30 / 1:48</div>
        </div>
      </div>

      {/* Actions */}
      <div style={{ padding: '16px 28px 22px', display: 'flex', gap: 10 }}>
        <button style={{
          padding: '14px 20px', borderRadius: 999,
          background: 'transparent', border: `1px solid ${vj.line}`,
          color: vj.ink, fontSize: 13, fontWeight: 500, fontFamily: vjF.body,
        }}>Discard</button>
        <button style={{
          flex: 1, padding: '14px',
          background: vj.ink, color: vj.bg, border: 'none', borderRadius: 999,
          fontSize: 14, fontWeight: 500, fontFamily: vjF.body,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Save &amp; reflect
          <span style={{ opacity: 0.7 }}>→</span>
        </button>
      </div>
    </div>
  );
}

function Mark({ children }) {
  return <span style={{
    background: 'rgba(184,85,58,0.12)', color: vj.ink,
    padding: '0 3px', borderRadius: 2,
  }}>{children}</span>;
}

// ───────── 4. Saved — reflection, not a dashboard ─────────
function VJSaved() {
  return (
    <div style={{
      background: vj.bg, color: vj.ink, fontFamily: vjF.body,
      height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      <div style={{ padding: '10px 24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div/>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600 }}>Saved · 8:36 AM</div>
        <div style={{ fontSize: 13, color: vj.ink2 }}>✕</div>
      </div>

      {/* Confirmation — a single dot and a sentence, no giant checkmark */}
      <div style={{ padding: '28px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%',
          background: vj.sage, margin: '0 auto 14px' }}/>
        <div style={{ fontFamily: vjF.display, fontSize: 24, lineHeight: 1.2,
          letterSpacing: '-0.02em' }}>
          Entry 29 saved.
        </div>
        <div style={{ fontSize: 13, color: vj.ink2, marginTop: 8, lineHeight: 1.5 }}>
          You've reflected on <span style={{ color: vj.ink, fontWeight: 500 }}>14 of the last 15 mornings.</span>
        </div>
      </div>

      {/* Pull-quote — your own words, mirrored back */}
      <div style={{ padding: '30px 28px 0' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: vj.accent, fontWeight: 600 }}>
          Your own words
        </div>
        <div style={{
          fontFamily: vjF.display, fontStyle: 'italic', fontSize: 20,
          lineHeight: 1.35, letterSpacing: '-0.01em', marginTop: 10, color: vj.ink,
          borderLeft: `2px solid ${vj.accent}`, paddingLeft: 14,
        }}>
          "My plan is to sit on my hands until 9:45, no matter what CNBC is saying."
        </div>
      </div>

      {/* Inline meta — no chart junk */}
      <div style={{ padding: '24px 28px 0' }}>
        <div style={{ display: 'flex', borderTop: `1px solid ${vj.line}`,
          borderBottom: `1px solid ${vj.line}`, padding: '14px 0' }}>
          <MetaCol n="142" l="Words" />
          <MetaCol n="1:48" l="Length" />
          <MetaCol n="Calm" l="Tone" tone={vj.sage} />
          <MetaCol n="Resolve" l="Theme" last />
        </div>
      </div>

      {/* ONE insight — not five chips and two cards */}
      <div style={{ padding: '26px 28px 0' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: vj.ink3, fontWeight: 600 }}>
          What we noticed
        </div>
        <div style={{
          fontFamily: vjF.display, fontSize: 17, lineHeight: 1.4,
          letterSpacing: '-0.01em', marginTop: 10,
        }}>
          You've used the word <Mark>"chase"</Mark> in <span style={{ color: vj.accent, fontWeight: 500 }}>6 of your last 10 entries.</span>{' '}
          Each time, the days you resisted were <span style={{ color: vj.sage, fontFamily: vjF.mono, fontSize: 15 }}>+41%</span> your average P&L.
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          marginTop: 14, fontSize: 12, color: vj.accent, fontWeight: 500,
        }}>
          See the pattern <span>→</span>
        </div>
      </div>

      {/* Next actions — quiet, not CTAs */}
      <div style={{ padding: '26px 28px 0', marginTop: 'auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <NextAction icon="◯" label="3-min breath" sub="Seal it in" />
          <NextAction icon="↗" label="Share"        sub="Private image" accent />
        </div>
      </div>

      <div style={{ padding: '16px 28px 20px' }}>
        <button style={{
          width: '100%', padding: '14px',
          background: 'transparent', color: vj.ink2,
          border: `1px solid ${vj.line}`, borderRadius: 999,
          fontSize: 13, fontWeight: 500, fontFamily: vjF.body,
        }}>
          Done
        </button>
      </div>
    </div>
  );
}

function MetaCol({ n, l, tone, last }) {
  return (
    <div style={{
      flex: 1, padding: '0 10px',
      borderRight: last ? 'none' : `1px solid ${vj.line}`,
      textAlign: 'center',
    }}>
      <div style={{ fontFamily: vjF.display, fontSize: 18, letterSpacing: '-0.01em',
        color: tone || vj.ink }}>{n}</div>
      <div style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: vj.ink3, fontWeight: 500, marginTop: 4 }}>{l}</div>
    </div>
  );
}

function NextAction({ icon, label, sub, accent }) {
  return (
    <div style={{
      padding: '14px 16px', borderRadius: 16,
      background: accent ? vj.accentSoft : vj.surface,
      border: `1px solid ${accent ? 'transparent' : vj.line}`,
    }}>
      <div style={{ fontSize: 18, color: accent ? vj.accent : vj.ink }}>{icon}</div>
      <div style={{ fontSize: 13, fontWeight: 500, color: vj.ink, marginTop: 8 }}>{label}</div>
      <div style={{ fontSize: 11, color: vj.ink3, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { VJIdle, VJRecording, VJReview, VJSaved });