/* Direction 1 — "Breath"
   Warm cream + sand, serif headlines, terracotta accent.
   Ultra-airy. Headspace-calm + editorial warmth.
*/

const breath = {
  bg:      '#F4EFE6',   // warm cream
  surface: '#FBF7F0',   // lighter cream (barely-there card)
  ink:     '#1F1B16',   // deep warm ink
  ink2:    '#6B6156',   // warm secondary
  ink3:    '#A89E92',   // muted
  line:    '#E6DFD2',   // hairline
  accent:  '#B8553A',   // terracotta
  accentSoft: '#E8D3C6',
  sage:    '#7A8B6F',   // only for positive state
};

const breathFont = {
  display: `"Fraunces", "Cormorant Garamond", Georgia, serif`,
  body:    `"Inter", -apple-system, system-ui, sans-serif`,
  mono:    `"JetBrains Mono", ui-monospace, monospace`,
};

// ────────────────────────────────────────────────────────────────────────
// Home
// ────────────────────────────────────────────────────────────────────────

function BreathHome() {
  return (
    <div style={{
      background: breath.bg, color: breath.ink,
      fontFamily: breathFont.body,
      height: '100%', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Header */}
      <div style={{ padding: '8px 28px 0' }}>
        <div style={{
          fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 500,
        }}>
          Tuesday · 23 Apr
        </div>
        <div style={{
          fontFamily: breathFont.display,
          fontSize: 34, lineHeight: 1.05, marginTop: 10,
          letterSpacing: '-0.02em', fontWeight: 400,
        }}>
          Good morning,<br/>
          <span style={{ fontStyle: 'italic', color: breath.accent }}>Trader.</span>
        </div>
      </div>

      {/* Primary: breathing ring */}
      <div style={{ padding: '28px 28px 0' }}>
        <div style={{
          background: breath.surface,
          borderRadius: 24,
          padding: '28px 24px 24px',
          border: `1px solid ${breath.line}`,
        }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: breath.ink3, fontWeight: 600,
          }}>
            Before the open
          </div>
          <div style={{
            fontFamily: breathFont.display,
            fontSize: 22, lineHeight: 1.15, marginTop: 8,
            fontWeight: 400, letterSpacing: '-0.01em',
          }}>
            Three minutes of breath before you place a single ticker.
          </div>

          {/* breath ring */}
          <div style={{ display: 'flex', justifyContent: 'center', margin: '22px 0 18px' }}>
            <div style={{
              width: 130, height: 130, borderRadius: '50%',
              background: `radial-gradient(circle at 50% 50%, ${breath.accentSoft}, ${breath.surface} 72%)`,
              border: `1px solid ${breath.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column',
            }}>
              <div style={{
                fontFamily: breathFont.display, fontSize: 30,
                letterSpacing: '-0.02em', color: breath.ink,
              }}>3:00</div>
              <div style={{ fontSize: 10, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: breath.ink3, marginTop: 2 }}>
                Box breath
              </div>
            </div>
          </div>

          <button style={{
            width: '100%', background: breath.ink, color: breath.bg,
            border: 'none', borderRadius: 999, padding: '14px',
            fontSize: 14, fontWeight: 500, letterSpacing: '0.02em',
            fontFamily: breathFont.body,
          }}>
            Begin
          </button>
        </div>
      </div>

      {/* State row — single line, no cards */}
      <div style={{ padding: '22px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 600, marginBottom: 14,
        }}>
          Today's state
        </div>
        <div style={{ display: 'flex', gap: 0, borderTop: `1px solid ${breath.line}` }}>
          <StateRow label="Clarity"  value="Steady"   tone={breath.sage} />
          <StateRow label="Impulse"  value="Low"      tone={breath.sage} />
          <StateRow label="Energy"   value="Open"     tone={breath.accent} />
        </div>
      </div>

      {/* Gentle nudge — inline, no container chrome */}
      <div style={{ padding: '26px 28px 0' }}>
        <div style={{
          borderLeft: `2px solid ${breath.accent}`,
          paddingLeft: 14,
        }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: breath.accent, fontWeight: 600,
          }}>
            For you today
          </div>
          <div style={{
            fontFamily: breathFont.display, fontSize: 18, lineHeight: 1.3,
            marginTop: 6, letterSpacing: '-0.01em',
          }}>
            You slept 7h 20m. Your hands are lighter than usual — let patience be your edge.
          </div>
        </div>
      </div>

      {/* 4 tools, not 7 — one row, equal weight */}
      <div style={{ padding: '26px 28px 0', marginTop: 'auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          <Tool icon="◯" label="Breathe" />
          <Tool icon="◐" label="Mood" />
          <Tool icon="◑" label="Journal" />
          <Tool icon="◉" label="Reflect" />
        </div>
      </div>

      {/* Tab bar */}
      <TabBar theme={breath} active="home" />
    </div>
  );
}

function StateRow({ label, value, tone }) {
  return (
    <div style={{
      flex: 1, padding: '14px 0',
      borderRight: `1px solid ${breath.line}`,
    }}>
      <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: breath.ink3, fontWeight: 500 }}>{label}</div>
      <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: tone }} />
        <span style={{ fontFamily: breathFont.display, fontSize: 17, letterSpacing: '-0.01em' }}>{value}</span>
      </div>
    </div>
  );
}

function Tool({ icon, label }) {
  return (
    <div style={{
      aspectRatio: '1',
      borderRadius: 18,
      border: `1px solid ${breath.line}`,
      background: breath.surface,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 6,
    }}>
      <div style={{ fontSize: 20, color: breath.ink }}>{icon}</div>
      <div style={{ fontSize: 11, color: breath.ink2, fontWeight: 500 }}>{label}</div>
    </div>
  );
}

function TabBar({ theme, active }) {
  const items = [
    { id: 'home',    label: 'Today' },
    { id: 'flows',   label: 'Flows' },
    { id: 'journey', label: 'Journey' },
    { id: 'insight', label: 'Insights' },
  ];
  return (
    <div style={{
      display: 'flex', padding: '12px 20px 10px',
      borderTop: `1px solid ${theme.line}`,
      background: theme.bg,
      marginTop: 18,
    }}>
      {items.map(it => (
        <div key={it.id} style={{
          flex: 1, textAlign: 'center',
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: active === it.id ? theme.ink : theme.ink3,
          fontWeight: active === it.id ? 600 : 500,
        }}>
          {it.label}
        </div>
      ))}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Mood check-in
// ────────────────────────────────────────────────────────────────────────

function BreathMood() {
  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 (
    <div style={{
      background: breath.bg, color: breath.ink,
      fontFamily: breathFont.body, height: '100%',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '12px 28px 0', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 18, color: breath.ink2 }}>←</div>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 600 }}>Check-in · 1 of 2</div>
        <div style={{ fontSize: 13, color: breath.ink2 }}>Skip</div>
      </div>

      <div style={{ padding: '30px 28px 0' }}>
        <div style={{
          fontFamily: breathFont.display, fontSize: 30, lineHeight: 1.1,
          letterSpacing: '-0.02em', fontWeight: 400,
        }}>
          How do you feel <span style={{ fontStyle: 'italic', color: breath.accent }}>right now?</span>
        </div>
        <div style={{ fontSize: 13, color: breath.ink2, marginTop: 10, lineHeight: 1.5 }}>
          Before the market opens its mouth, name your own state first.
        </div>
      </div>

      {/* Mood dial — horizontal gradient bar */}
      <div style={{ padding: '42px 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 ${breath.bg}`,
            boxShadow: '0 2px 8px rgba(31,27,22,0.2)',
          }} />
        </div>
        <div style={{
          marginTop: 36, textAlign: 'center',
          fontFamily: breathFont.display,
          fontSize: 42, letterSpacing: '-0.02em', fontWeight: 400,
        }}>
          {moods[selected].label}
        </div>
      </div>

      {/* Mood options */}
      <div style={{ padding: '28px 28px 0' }}>
        <div style={{ 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 ? breath.ink : breath.ink3,
                fontWeight: i === selected ? 600 : 500,
                cursor: 'pointer',
              }}>
              {m.label}
            </div>
          ))}
        </div>
      </div>

      {/* Context tags */}
      <div style={{ padding: '36px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 600, marginBottom: 14,
        }}>
          What's underneath?
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['Overnight news', 'Sleep', 'Yesterday\'s loss', 'Caffeine', 'Family', 'Big setup'].map((t, i) => (
            <div key={t} style={{
              padding: '8px 14px', borderRadius: 999,
              border: `1px solid ${i === 1 || i === 4 ? breath.ink : breath.line}`,
              background: i === 1 || i === 4 ? breath.ink : 'transparent',
              color: i === 1 || i === 4 ? breath.bg : breath.ink2,
              fontSize: 12, fontWeight: 500,
            }}>{t}</div>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 28px 22px', marginTop: 'auto' }}>
        <button style={{
          width: '100%', background: breath.ink, color: breath.bg,
          border: 'none', borderRadius: 999, padding: '15px',
          fontSize: 14, fontWeight: 500, letterSpacing: '0.02em',
          fontFamily: breathFont.body,
        }}>
          Continue →
        </button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// Journey
// ────────────────────────────────────────────────────────────────────────

function BreathJourney() {
  const days = [
    { d: 'M', mood: 3, has: true },
    { d: 'T', mood: 4, has: true },
    { d: 'W', mood: 2, has: true },
    { d: 'T', mood: 4, has: true },
    { d: 'F', mood: 4, has: true },
    { d: 'S', mood: 3, has: true },
    { d: 'S', mood: 4, has: false, today: true },
  ];
  return (
    <div style={{
      background: breath.bg, color: breath.ink,
      fontFamily: breathFont.body, height: '100%',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '12px 28px 0' }}>
        <div style={{
          fontFamily: breathFont.display, fontSize: 28, letterSpacing: '-0.02em',
        }}>
          Your <span style={{ fontStyle: 'italic', color: breath.accent }}>journey</span>
        </div>
      </div>

      {/* Week strip */}
      <div style={{ padding: '22px 28px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          {days.map((day, i) => (
            <div key={i} style={{ textAlign: 'center', flex: 1 }}>
              <div style={{ fontSize: 10, letterSpacing: '0.14em',
                color: day.today ? breath.accent : breath.ink3, fontWeight: 600 }}>
                {day.d}
              </div>
              <div style={{
                margin: '10px auto 0',
                width: 8 + day.mood * 4, height: 8 + day.mood * 4,
                borderRadius: '50%',
                background: day.has ? breath.accent : 'transparent',
                border: day.has ? 'none' : `1px dashed ${breath.ink3}`,
                opacity: day.has ? (0.3 + day.mood * 0.15) : 1,
              }} />
            </div>
          ))}
        </div>
      </div>

      {/* Mood ↔ PnL correlation */}
      <div style={{ padding: '32px 28px 0' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 600,
        }}>
          The pattern, so far
        </div>
        <div style={{
          fontFamily: breathFont.display, fontSize: 22, lineHeight: 1.25,
          marginTop: 12, letterSpacing: '-0.01em',
        }}>
          You trade <span style={{ fontStyle: 'italic', color: breath.accent }}>34% better</span> on days you journal before the open.
        </div>
      </div>

      {/* Stats — barely-there */}
      <div style={{ padding: '26px 28px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
          <Stat n="14" label="Day streak" />
          <Stat n="6.2h" label="Breathwork" />
          <Stat n="28" label="Reflections" />
        </div>
      </div>

      {/* Timeline */}
      <div style={{ padding: '28px 28px 0', flex: 1, overflow: 'hidden' }}>
        <div style={{
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: breath.ink3, fontWeight: 600, marginBottom: 16,
        }}>
          Today
        </div>
        <Activity time="8:42 AM" title="Pre-market breath" body="Box, 3:00 — slowed your pulse" />
        <Activity time="7:15 AM" title="Mood · Steady"    body="Slept well, confident setup"  />
        <Activity time="6:02 AM" title="Morning journal"  body="&ldquo;Stay with runners. Don't chase the opener.&rdquo;" emph />
      </div>

      {/* Share callout */}
      <div style={{ padding: '8px 28px 18px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 18px',
          background: breath.accentSoft,
          borderRadius: 16,
        }}>
          <div>
            <div style={{ fontSize: 12, color: breath.accent, fontWeight: 600,
              letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              14-day streak
            </div>
            <div style={{ fontFamily: breathFont.display, fontSize: 15, marginTop: 2 }}>
              Share your progress
            </div>
          </div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: breath.ink, color: breath.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14,
          }}>↗</div>
        </div>
      </div>

      <TabBar theme={breath} active="journey" />
    </div>
  );
}

function Stat({ n, label }) {
  return (
    <div style={{ padding: '14px 0', borderTop: `1px solid ${breath.line}` }}>
      <div style={{ fontFamily: breathFont.display, fontSize: 28, letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: breath.ink3, fontWeight: 500, marginTop: 2 }}>{label}</div>
    </div>
  );
}

function Activity({ time, title, body, emph }) {
  return (
    <div style={{ display: 'flex', marginBottom: 14 }}>
      <div style={{
        width: 58, fontSize: 10, color: breath.ink3, letterSpacing: '0.06em',
        fontFamily: breathFont.mono, paddingTop: 2,
      }}>{time}</div>
      <div style={{
        width: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', marginRight: 14,
      }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: breath.accent, marginTop: 6 }} />
        <div style={{ flex: 1, width: 1, background: breath.line, marginTop: 4 }} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, color: breath.ink, fontWeight: 500 }}>{title}</div>
        <div style={{
          fontSize: 13, color: breath.ink2, marginTop: 2,
          fontStyle: emph ? 'italic' : 'normal',
          fontFamily: emph ? breathFont.display : breathFont.body,
        }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, { BreathHome, BreathMood, BreathJourney });