import { useState, useEffect, useRef } from "react";

// ─── STYLES ──────────────────────────────────────────────────────────────────
const GLOBAL_CSS = `
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #0a0a0f;
    --surface: #111118;
    --card: #16161f;
    --border: #1e1e2e;
    --border-lit: #2a2a3e;
    --accent: #e8ff47;
    --accent2: #47ffce;
    --accent3: #ff6b47;
    --accent4: #a78bfa;
    --text: #e8e8f0;
    --muted: #555568;
    --muted2: #333345;
    --font-mono: 'Space Mono', monospace;
    --font-display: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 4px 32px rgba(0,0,0,0.6);
    --glow: 0 0 24px rgba(232,255,71,0.15);
    --glow2: 0 0 24px rgba(71,255,206,0.15);
  }

  html, body, #root { height: 100%; width: 100%; background: var(--bg); }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 2px; }

  /* Haptik-Button base */
  .btn {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    position: relative;
    overflow: hidden;
  }
  .btn:active { transform: scale(0.95) translateY(1px) !important; }
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  .pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(232,255,71,0.2); }
    50% { box-shadow: 0 0 32px rgba(232,255,71,0.5); }
  }

  .slide-up { animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .fade-in { animation: fadeIn 0.3s ease both; }
  .scale-in { animation: scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

  /* Noise texture overlay */
  .noise::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
  }
`;

// ─── HELPERS ─────────────────────────────────────────────────────────────────
const now = () => new Date().toISOString();
const fmt = (iso) => {
  if (!iso) return "—";
  const d = new Date(iso);
  return d.toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" }) +
    " · " + d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
};
const fmtDate = (iso) => {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("de-DE", { day: "2-digit", month: "short" });
};

const STORAGE_KEY = "tmj_sessions_v1";
const loadSessions = () => {
  try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"); } catch { return []; }
};
const saveSessions = (s) => localStorage.setItem(STORAGE_KEY, JSON.stringify(s));

// ─── DATA ────────────────────────────────────────────────────────────────────
const MOODS = [
  { id: "🔥", label: "Focused", color: "#ff6b47" },
  { id: "😤", label: "Motivated", color: "#e8ff47" },
  { id: "😌", label: "Calm", color: "#47ffce" },
  { id: "😰", label: "Anxious", color: "#a78bfa" },
  { id: "😤", label: "Frustrated", color: "#ff4747" },
  { id: "😶", label: "Numb", color: "#555568" },
];

const EMOTIONS = [
  "Excited", "Confident", "Clear-headed", "Patient",
  "Impulsive", "FOMO", "Revenge-trading", "Overconfident",
  "Doubtful", "Tired", "Distracted", "Greedy",
];

const MARKET_CONDITIONS = ["Trending", "Ranging", "Volatile", "Choppy", "Low Volume"];
const SESSIONS_TYPES = ["Scalping", "Day Trade", "Swing", "Review Only"];
const RISK_LEVELS = ["1R", "2R", "3R", "Max", "Reduced"];
const BIASES = ["Bullish", "Bearish", "Neutral", "No Bias"];
const REVIEW_RATINGS = [1, 2, 3, 4, 5];

// ─── SUB COMPONENTS ──────────────────────────────────────────────────────────
const Card = ({ children, style = {}, glow = false }) => (
  <div style={{
    background: "var(--card)",
    border: `1px solid var(--border)`,
    borderRadius: "var(--radius-lg)",
    padding: "24px",
    boxShadow: glow ? "var(--glow)" : "var(--shadow)",
    animation: "slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both",
    ...style
  }}>
    {children}
  </div>
);

const Label = ({ children, accent }) => (
  <div style={{
    fontFamily: "var(--font-mono)",
    fontSize: "10px",
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color: accent ? "var(--accent)" : "var(--muted)",
    marginBottom: "10px",
  }}>{children}</div>
);

const HapticBtn = ({ children, active, onClick, color = "var(--accent)", size = "md", variant = "default", disabled = false, style = {} }) => {
  const sizes = {
    sm: { padding: "8px 14px", fontSize: "12px", borderRadius: "8px" },
    md: { padding: "12px 20px", fontSize: "14px", borderRadius: "10px" },
    lg: { padding: "16px 28px", fontSize: "16px", borderRadius: "12px" },
    xl: { padding: "20px 36px", fontSize: "18px", borderRadius: "14px" },
  };
  const s = sizes[size];

  const variants = {
    default: {
      background: active ? color : "var(--surface)",
      color: active ? "#0a0a0f" : "var(--text)",
      border: `1.5px solid ${active ? color : "var(--border-lit)"}`,
      boxShadow: active ? `0 0 20px ${color}40, 0 4px 12px rgba(0,0,0,0.4)` : "0 2px 8px rgba(0,0,0,0.3)",
    },
    outline: {
      background: "transparent",
      color: active ? color : "var(--muted)",
      border: `1.5px solid ${active ? color : "var(--border)"}`,
      boxShadow: active ? `0 0 12px ${color}30` : "none",
    },
    ghost: {
      background: active ? `${color}18` : "transparent",
      color: active ? color : "var(--muted)",
      border: `1.5px solid ${active ? `${color}50` : "transparent"}`,
    },
    solid: {
      background: color,
      color: "#0a0a0f",
      border: "none",
      boxShadow: `0 4px 20px ${color}40, 0 2px 8px rgba(0,0,0,0.4)`,
    }
  };

  return (
    <button
      className="btn"
      onClick={disabled ? undefined : onClick}
      style={{
        ...s,
        ...variants[variant],
        opacity: disabled ? 0.4 : 1,
        cursor: disabled ? "not-allowed" : "pointer",
        fontFamily: "var(--font-display)",
        fontWeight: active ? 700 : 500,
        transition: "all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1)",
        transform: active ? "scale(1.02)" : "scale(1)",
        ...style
      }}
    >
      {children}
    </button>
  );
};

const TagGrid = ({ options, selected, onToggle, multi = false, color = "var(--accent)" }) => (
  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
    {options.map((opt) => {
      const val = typeof opt === "string" ? opt : opt.id;
      const label = typeof opt === "string" ? opt : opt.label;
      const col = typeof opt === "object" && opt.color ? opt.color : color;
      const isActive = Array.isArray(selected) ? selected.includes(val) : selected === val;
      return (
        <HapticBtn
          key={val}
          size="sm"
          active={isActive}
          color={col}
          onClick={() => onToggle(val, multi)}
          variant="default"
        >
          {typeof opt === "object" && opt.id && opt.id.match(/\p{Emoji}/u) ? opt.id + " " : ""}{label}
        </HapticBtn>
      );
    })}
  </div>
);

const Slider = ({ value, onChange, min = 1, max = 10, color = "var(--accent)", label }) => (
  <div>
    {label && <Label>{label}</Label>}
    <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
      <input
        type="range" min={min} max={max} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{
          flex: 1, height: "6px", borderRadius: "3px", appearance: "none",
          background: `linear-gradient(to right, ${color} ${(value - min) / (max - min) * 100}%, var(--border-lit) ${(value - min) / (max - min) * 100}%)`,
          cursor: "pointer",
          outline: "none",
        }}
      />
      <span style={{
        fontFamily: "var(--font-mono)", fontSize: "20px", fontWeight: "700",
        color: color, minWidth: "32px", textAlign: "right"
      }}>{value}</span>
    </div>
  </div>
);

const TextArea = ({ value, onChange, placeholder, rows = 3 }) => (
  <textarea
    value={value} onChange={(e) => onChange(e.target.value)}
    placeholder={placeholder} rows={rows}
    style={{
      width: "100%", background: "var(--surface)", border: "1.5px solid var(--border)",
      borderRadius: "var(--radius)", padding: "14px 16px",
      color: "var(--text)", fontFamily: "var(--font-body)", fontSize: "15px",
      lineHeight: "1.6", resize: "vertical", outline: "none",
      transition: "border-color 0.2s",
    }}
    onFocus={e => e.target.style.borderColor = "var(--accent)"}
    onBlur={e => e.target.style.borderColor = "var(--border)"}
  />
);

const Divider = ({ label }) => (
  <div style={{ display: "flex", alignItems: "center", gap: "16px", margin: "8px 0" }}>
    {label && <span style={{ fontFamily: "var(--font-mono)", fontSize: "9px", letterSpacing: "0.2em", color: "var(--muted)", textTransform: "uppercase", whiteSpace: "nowrap" }}>{label}</span>}
    <div style={{ flex: 1, height: "1px", background: "var(--border)" }} />
  </div>
);

const StarRating = ({ value, onChange }) => (
  <div style={{ display: "flex", gap: "6px" }}>
    {REVIEW_RATINGS.map(r => (
      <button key={r} onClick={() => onChange(r)} style={{
        background: "none", border: "none", cursor: "pointer",
        fontSize: "28px", transition: "transform 0.12s",
        filter: r <= value ? "none" : "grayscale(1) opacity(0.3)",
        transform: r <= value ? "scale(1.1)" : "scale(1)"
      }}>⭐</button>
    ))}
  </div>
);

// ─── PAGE: PROGRESS DOTS ────────────────────────────────────────────────────
const ProgressDots = ({ total, current }) => (
  <div style={{ display: "flex", gap: "6px", alignItems: "center", justifyContent: "center" }}>
    {Array.from({ length: total }).map((_, i) => (
      <div key={i} style={{
        width: i === current ? "24px" : "6px",
        height: "6px", borderRadius: "3px",
        background: i === current ? "var(--accent)" : i < current ? "var(--accent2)" : "var(--border-lit)",
        transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
        boxShadow: i === current ? "0 0 12px var(--accent)" : "none",
      }} />
    ))}
  </div>
);

// ─── JOURNAL FLOW (multi-step) ────────────────────────────────────────────────
const STEPS = [
  "Check-In",
  "Mindset",
  "Market Read",
  "Risk Setup",
  "Rules",
  "Go Live ✓",
];

function JournalFlow({ onComplete, onCancel }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    // Step 0
    mood: "",
    energy: 5,
    sleep: 5,
    // Step 1
    emotions: [],
    distractions: "",
    intentions: "",
    // Step 2
    marketCondition: "",
    bias: "",
    confluences: "",
    // Step 3
    sessionType: "",
    riskLevel: "",
    maxLoss: "",
    // Step 4
    rulesChecked: [],
    // Step 5 (confirmation)
    readyNote: "",
  });

  const set = (key, val) => setData(prev => ({ ...prev, [key]: val }));
  const toggle = (key, val, multi) => {
    if (multi) {
      set(key, data[key].includes(val) ? data[key].filter(x => x !== val) : [...data[key], val]);
    } else {
      set(key, data[key] === val ? "" : val);
    }
  };

  const RULES = [
    "Nur A+ Setups handeln",
    "Stop Loss vor Entry gesetzt",
    "Risk/Reward ≥ 1:2",
    "Kein Revenge Trading",
    "Max. Verlust akzeptiert",
    "News-Zeiten beachtet",
    "Kein FOMO-Entry",
    "Charting komplett",
  ];

  const handleNext = () => {
    if (step < STEPS.length - 1) setStep(s => s + 1);
    else onComplete({ ...data, startTime: now() });
  };
  const handleBack = () => { if (step > 0) setStep(s => s - 1); };

  const canNext = [
    !!data.mood,
    data.emotions.length > 0,
    !!data.marketCondition && !!data.bias,
    !!data.sessionType && !!data.riskLevel,
    data.rulesChecked.length >= 3,
    true,
  ][step];

  const stepContent = [
    // ── STEP 0: Check-In ──
    <div key={0} style={{ display: "flex", flexDirection: "column", gap: "28px" }}>
      <div>
        <Label accent>Wie fühlst du dich gerade?</Label>
        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
          {MOODS.map(m => (
            <button key={m.label} onClick={() => set("mood", m.label)} style={{
              padding: "14px 18px", borderRadius: "12px", cursor: "pointer",
              background: data.mood === m.label ? `${m.color}20` : "var(--surface)",
              border: `2px solid ${data.mood === m.label ? m.color : "var(--border)"}`,
              color: data.mood === m.label ? m.color : "var(--muted)",
              fontSize: "13px", fontFamily: "var(--font-display)", fontWeight: 600,
              transition: "all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)",
              transform: data.mood === m.label ? "scale(1.06)" : "scale(1)",
              boxShadow: data.mood === m.label ? `0 0 20px ${m.color}30` : "none",
              textAlign: "center", minWidth: "90px",
            }}>
              <div style={{ fontSize: "22px", marginBottom: "4px" }}>{m.id}</div>
              {m.label}
            </button>
          ))}
        </div>
      </div>
      <Slider label="Energy Level (1–10)" value={data.energy} onChange={v => set("energy", v)} color="var(--accent)" />
      <Slider label="Schlaf-Qualität (1–10)" value={data.sleep} onChange={v => set("sleep", v)} color="var(--accent2)" />
    </div>,

    // ── STEP 1: Mindset ──
    <div key={1} style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
      <div>
        <Label accent>Aktuelle Emotionen (mehrere möglich)</Label>
        <TagGrid options={EMOTIONS} selected={data.emotions} onToggle={(v) => toggle("emotions", v, true)} multi />
      </div>
      <div>
        <Label>Mögliche Ablenkungen / Probleme heute?</Label>
        <TextArea value={data.distractions} onChange={v => set("distractions", v)}
          placeholder="Z.B. schlechte Nacht, Stress mit... Alles raus!" />
      </div>
      <div>
        <Label accent>Meine Intention für diese Session:</Label>
        <TextArea value={data.intentions} onChange={v => set("intentions", v)}
          placeholder="Ich will heute nur geduldig warten und nur A+ Setups..." rows={2} />
      </div>
    </div>,

    // ── STEP 2: Market Read ──
    <div key={2} style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
      <div>
        <Label accent>Marktstruktur / Bedingungen</Label>
        <TagGrid options={MARKET_CONDITIONS} selected={data.marketCondition} onToggle={(v) => set("marketCondition", v === data.marketCondition ? "" : v)} color="var(--accent3)" />
      </div>
      <div>
        <Label accent>Mein Bias</Label>
        <div style={{ display: "flex", gap: "10px" }}>
          {BIASES.map(b => (
            <HapticBtn key={b} size="md" active={data.bias === b}
              color={b === "Bullish" ? "#47ffce" : b === "Bearish" ? "#ff4747" : b === "Neutral" ? "#a78bfa" : "var(--muted)"}
              onClick={() => set("bias", b === data.bias ? "" : b)}>
              {b === "Bullish" ? "▲ " : b === "Bearish" ? "▼ " : b === "Neutral" ? "→ " : "✕ "}{b}
            </HapticBtn>
          ))}
        </div>
      </div>
      <div>
        <Label>Wichtige Level / Confluences:</Label>
        <TextArea value={data.confluences} onChange={v => set("confluences", v)}
          placeholder="HTF Support bei 45.200, EMA200 konvergiert, VWAP darüber..." />
      </div>
    </div>,

    // ── STEP 3: Risk Setup ──
    <div key={3} style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
      <div>
        <Label accent>Session Typ</Label>
        <TagGrid options={SESSIONS_TYPES} selected={data.sessionType} onToggle={(v) => set("sessionType", v === data.sessionType ? "" : v)} color="var(--accent4)" />
      </div>
      <div>
        <Label accent>Max. Risk pro Trade</Label>
        <TagGrid options={RISK_LEVELS} selected={data.riskLevel} onToggle={(v) => set("riskLevel", v === data.riskLevel ? "" : v)} color="var(--accent3)" />
      </div>
      <div>
        <Label>Max. Tagesverlust (absolut oder in %)</Label>
        <input
          value={data.maxLoss} onChange={e => set("maxLoss", e.target.value)}
          placeholder="z.B. 150€ oder 1.5%"
          style={{
            width: "100%", background: "var(--surface)", border: "1.5px solid var(--border)",
            borderRadius: "var(--radius)", padding: "14px 16px",
            color: "var(--text)", fontFamily: "var(--font-body)", fontSize: "15px",
            outline: "none",
          }}
          onFocus={e => e.target.style.borderColor = "var(--accent)"}
          onBlur={e => e.target.style.borderColor = "var(--border)"}
        />
      </div>
    </div>,

    // ── STEP 4: Rules ──
    <div key={4} style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      <div style={{ fontFamily: "var(--font-body)", color: "var(--muted)", fontSize: "14px", lineHeight: 1.6 }}>
        Checke jede Regel aktiv ab. Du musst mindestens <span style={{ color: "var(--accent)", fontWeight: 700 }}>3 Regeln</span> bestätigen um zu starten.
      </div>
      {RULES.map(rule => {
        const checked = data.rulesChecked.includes(rule);
        return (
          <button key={rule} onClick={() => toggle("rulesChecked", rule, true)}
            style={{
              display: "flex", alignItems: "center", gap: "14px",
              padding: "14px 18px", borderRadius: "10px", cursor: "pointer",
              background: checked ? "rgba(232,255,71,0.06)" : "var(--surface)",
              border: `1.5px solid ${checked ? "var(--accent)" : "var(--border)"}`,
              transition: "all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)",
              textAlign: "left",
            }}>
            <div style={{
              width: "22px", height: "22px", borderRadius: "6px", flexShrink: 0,
              background: checked ? "var(--accent)" : "var(--border-lit)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: "13px", fontWeight: "bold", color: "#0a0a0f",
              transition: "all 0.15s",
            }}>{checked ? "✓" : ""}</div>
            <span style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: checked ? "var(--text)" : "var(--muted)" }}>
              {rule}
            </span>
          </button>
        );
      })}
    </div>,

    // ── STEP 5: GO LIVE ──
    <div key={5} style={{ display: "flex", flexDirection: "column", gap: "24px", alignItems: "center", textAlign: "center" }}>
      <div style={{ fontSize: "64px", animation: "scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both" }}>🧠</div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "28px", fontWeight: 800, color: "var(--text)", marginBottom: "8px" }}>
          Du bist bereit.
        </div>
        <div style={{ fontFamily: "var(--font-body)", color: "var(--muted)", fontSize: "15px", lineHeight: 1.6 }}>
          Check-In abgeschlossen. Vertraue deiner Vorbereitung,<br />halte deine Regeln und bleib im Prozess.
        </div>
      </div>
      <div style={{
        padding: "20px", borderRadius: "var(--radius-lg)", width: "100%",
        background: "rgba(232,255,71,0.05)", border: "1px solid rgba(232,255,71,0.2)"
      }}>
        <Label accent>Quick Reminder an dich selbst:</Label>
        <TextArea value={data.readyNote} onChange={v => set("readyNote", v)}
          placeholder="z.B. 'Geduld. Warte auf den Trade zu dir. Du musst nichts beweisen.'" rows={2} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "12px", width: "100%" }}>
        {[
          { l: "Energie", v: data.energy + "/10", c: "var(--accent)" },
          { l: "Bias", v: data.bias || "Kein", c: "var(--accent2)" },
          { l: "Risk", v: data.riskLevel || "—", c: "var(--accent3)" },
        ].map(item => (
          <div key={item.l} style={{ padding: "12px", borderRadius: "10px", background: "var(--surface)", border: "1px solid var(--border)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "6px" }}>{item.l}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "18px", fontWeight: 700, color: item.c }}>{item.v}</div>
          </div>
        ))}
      </div>
    </div>,
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: "680px", margin: "0 auto" }}>
      {/* Header */}
      <div style={{ padding: "24px 24px 0", display: "flex", flexDirection: "column", gap: "16px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "4px" }}>
              Mental Journal — {new Date().toLocaleDateString("de-DE", { weekday: "long" })}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", fontWeight: 800, color: "var(--text)" }}>
              {STEPS[step]}
            </div>
          </div>
          <HapticBtn size="sm" onClick={onCancel} variant="ghost" color="var(--muted)" style={{ color: "var(--muted)" }}>✕</HapticBtn>
        </div>
        <ProgressDots total={STEPS.length} current={step} />
        <Divider />
      </div>

      {/* Content */}
      <div key={step} style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }} className="scale-in">
        {stepContent[step]}
      </div>

      {/* Footer */}
      <div style={{ padding: "20px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: "12px" }}>
        {step > 0 && (
          <HapticBtn size="lg" onClick={handleBack} variant="ghost" color="var(--muted)" style={{ flex: "0 0 auto", color: "var(--muted)" }}>
            ← Zurück
          </HapticBtn>
        )}
        <HapticBtn size="lg" onClick={handleNext} variant="solid"
          color={step === STEPS.length - 1 ? "var(--accent2)" : "var(--accent)"}
          disabled={!canNext} style={{ flex: 1 }}>
          {step === STEPS.length - 1 ? "🚀 Session starten" : `Weiter →`}
        </HapticBtn>
      </div>
    </div>
  );
}

// ─── ACTIVE SESSION HUD ───────────────────────────────────────────────────────
function ActiveSessionHUD({ session, onEndSession }) {
  const [elapsed, setElapsed] = useState(0);
  const [mindcheck, setMindcheck] = useState("");
  const [mindchecks, setMindchecks] = useState([]);
  const [breakTaken, setBreakTaken] = useState(false);

  useEffect(() => {
    const start = new Date(session.startTime).getTime();
    const interval = setInterval(() => setElapsed(Math.floor((Date.now() - start) / 1000)), 1000);
    return () => clearInterval(interval);
  }, [session.startTime]);

  const hms = (s) => `${String(Math.floor(s / 3600)).padStart(2, "0")}:${String(Math.floor((s % 3600) / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;

  const addMindcheck = () => {
    if (!mindcheck.trim()) return;
    setMindchecks(prev => [...prev, { text: mindcheck, time: now() }]);
    setMindcheck("");
  };

  const QUICK_THOUGHTS = [
    "Ich bin im Flow", "Ich warte geduldig", "Das war FOMO", "Ich halte mein System",
    "Ich brauche eine Pause", "Bestes Setup heute", "Ich fühle mich unter Druck",
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: "680px", margin: "0 auto", overflowY: "auto", padding: "24px" }}>
      {/* Timer Bar */}
      <div style={{
        padding: "20px 24px", borderRadius: "var(--radius-lg)", marginBottom: "20px",
        background: "linear-gradient(135deg, rgba(232,255,71,0.08) 0%, rgba(71,255,206,0.08) 100%)",
        border: "1px solid rgba(232,255,71,0.2)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: "4px" }}>Session Aktiv</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "36px", fontWeight: 700, color: "var(--accent)", letterSpacing: "0.04em" }}>
            {hms(elapsed)}
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase" }}>Bias / Risk</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "18px", fontWeight: 700, color: "var(--accent2)" }}>{session.bias}</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "14px", color: "var(--accent3)" }}>{session.riskLevel}</div>
        </div>
      </div>

      {/* Quick Mind Buttons */}
      <Card style={{ marginBottom: "16px" }}>
        <Label accent>Quick Mindcheck</Label>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "14px" }}>
          {QUICK_THOUGHTS.map(t => (
            <button key={t} onClick={() => setMindchecks(prev => [...prev, { text: t, time: now() }])}
              style={{
                padding: "8px 14px", borderRadius: "8px", cursor: "pointer",
                background: "var(--surface)", border: "1px solid var(--border-lit)",
                color: "var(--muted)", fontFamily: "var(--font-body)", fontSize: "12px",
                transition: "all 0.12s",
              }}
              onMouseEnter={e => { e.target.style.borderColor = "var(--accent)"; e.target.style.color = "var(--accent)"; }}
              onMouseLeave={e => { e.target.style.borderColor = "var(--border-lit)"; e.target.style.color = "var(--muted)"; }}
            >{t}</button>
          ))}
        </div>
        <div style={{ display: "flex", gap: "8px" }}>
          <input value={mindcheck} onChange={e => setMindcheck(e.target.value)}
            onKeyDown={e => e.key === "Enter" && addMindcheck()}
            placeholder="Eigener Gedanke (Enter)"
            style={{
              flex: 1, background: "var(--surface)", border: "1px solid var(--border)",
              borderRadius: "8px", padding: "10px 14px", color: "var(--text)",
              fontFamily: "var(--font-body)", fontSize: "14px", outline: "none",
            }}
            onFocus={e => e.target.style.borderColor = "var(--accent)"}
            onBlur={e => e.target.style.borderColor = "var(--border)"}
          />
          <HapticBtn size="sm" onClick={addMindcheck} variant="solid" color="var(--accent)" style={{ whiteSpace: "nowrap" }}>+ Log</HapticBtn>
        </div>
      </Card>

      {/* Mind Log */}
      {mindchecks.length > 0 && (
        <Card style={{ marginBottom: "16px" }}>
          <Label>Mind Log</Label>
          <div style={{ display: "flex", flexDirection: "column", gap: "8px", maxHeight: "200px", overflowY: "auto" }}>
            {[...mindchecks].reverse().map((m, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "flex-start", gap: "10px",
                padding: "10px 12px", borderRadius: "8px", background: "var(--surface)",
                border: "1px solid var(--border)",
              }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--muted)", whiteSpace: "nowrap", marginTop: "2px" }}>
                  {new Date(m.time).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}
                </span>
                <span style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--text)" }}>{m.text}</span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Break Button */}
      <div style={{ display: "flex", gap: "12px", marginBottom: "16px" }}>
        <HapticBtn size="lg" onClick={() => setBreakTaken(true)} variant="outline"
          color="var(--accent4)" active={breakTaken} style={{ flex: 1 }}>
          {breakTaken ? "☕ Pause genommen" : "☕ Pause einlegen"}
        </HapticBtn>
      </div>

      {/* End Session */}
      <HapticBtn size="xl" onClick={() => onEndSession({ mindchecks, breakTaken })} variant="solid" color="var(--accent3)" style={{ width: "100%", marginTop: "auto" }}>
        Session beenden →
      </HapticBtn>
    </div>
  );
}

// ─── SESSION REVIEW ───────────────────────────────────────────────────────────
function SessionReview({ session, onSave, onCancel }) {
  const [review, setReview] = useState({
    result: "breakeven",
    pnl: "",
    trades: "",
    winners: "",
    losers: "",
    ruleFollowed: 5,
    emotionControl: 5,
    rating: 3,
    bestTrade: "",
    worstTrade: "",
    lessons: "",
    improvements: "",
    nextSession: "",
    tags: [],
  });
  const set = (k, v) => setReview(prev => ({ ...prev, [k]: v }));
  const toggle = (k, v) => set(k, review[k].includes(v) ? review[k].filter(x => x !== v) : [...review[k], v]);

  const RESULTS = [
    { id: "win", label: "Profitable", color: "#47ffce", icon: "📈" },
    { id: "loss", label: "Verlust", color: "#ff4747", icon: "📉" },
    { id: "breakeven", label: "Break Even", color: "#a78bfa", icon: "➖" },
    { id: "no-trade", label: "Kein Trade", color: "#555568", icon: "⏸" },
  ];

  const REVIEW_TAGS = ["Overtraded", "Zu früh raus", "SL zu eng", "FOMO", "Revange", "Perfekte Execution", "Gutes Risk Mgmt", "Zu spät Entry"];

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", maxWidth: "680px", margin: "0 auto" }}>
      <div style={{ padding: "24px 24px 0" }}>
        <Label>Session Review</Label>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", fontWeight: 800, color: "var(--text)", marginBottom: "4px" }}>
          Wie war die Session?
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--muted)" }}>
          {fmtDate(session.startTime)} · {session.sessionType} · {session.bias}
        </div>
        <Divider />
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: "16px 24px", display: "flex", flexDirection: "column", gap: "24px" }}>
        {/* Result */}
        <div>
          <Label accent>Ergebnis</Label>
          <div style={{ display: "flex", gap: "10px" }}>
            {RESULTS.map(r => (
              <button key={r.id} onClick={() => set("result", r.id)} style={{
                flex: 1, padding: "16px 10px", borderRadius: "12px", cursor: "pointer",
                background: review.result === r.id ? `${r.color}15` : "var(--surface)",
                border: `2px solid ${review.result === r.id ? r.color : "var(--border)"}`,
                transition: "all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)",
                transform: review.result === r.id ? "scale(1.04)" : "scale(1)",
                textAlign: "center",
              }}>
                <div style={{ fontSize: "22px", marginBottom: "6px" }}>{r.icon}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "11px", fontWeight: 700, color: review.result === r.id ? r.color : "var(--muted)" }}>{r.label}</div>
              </button>
            ))}
          </div>
        </div>

        {/* PnL + Stats */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "12px" }}>
          {[
            { key: "pnl", label: "P&L (€ oder %)", placeholder: "+350€" },
            { key: "trades", label: "Trades gesamt", placeholder: "5" },
            { key: "winners", label: "Winner", placeholder: "3" },
          ].map(f => (
            <div key={f.key}>
              <Label>{f.label}</Label>
              <input value={review[f.key]} onChange={e => set(f.key, e.target.value)}
                placeholder={f.placeholder}
                style={{
                  width: "100%", background: "var(--surface)", border: "1px solid var(--border)",
                  borderRadius: "8px", padding: "10px 12px", color: "var(--text)",
                  fontFamily: "var(--font-mono)", fontSize: "14px", fontWeight: 700, outline: "none",
                }}
                onFocus={e => e.target.style.borderColor = "var(--accent)"}
                onBlur={e => e.target.style.borderColor = "var(--border)"}
              />
            </div>
          ))}
        </div>

        <Divider label="Self Assessment" />

        {/* Sliders */}
        <Slider label="Regeln eingehalten (1–10)" value={review.ruleFollowed} onChange={v => set("ruleFollowed", v)} color="var(--accent)" />
        <Slider label="Emotion Control (1–10)" value={review.emotionControl} onChange={v => set("emotionControl", v)} color="var(--accent2)" />

        <div>
          <Label accent>Session Rating</Label>
          <StarRating value={review.rating} onChange={v => set("rating", v)} />
        </div>

        <Divider label="Analyse" />

        <div>
          <Label>Bester Trade / Moment:</Label>
          <TextArea value={review.bestTrade} onChange={v => set("bestTrade", v)}
            placeholder="Was hat super geklappt? Welche Entscheidung war perfekt?" rows={2} />
        </div>
        <div>
          <Label>Schlechtester Trade / Fehler:</Label>
          <TextArea value={review.worstTrade} onChange={v => set("worstTrade", v)}
            placeholder="Was lief schief? Warum? FOMO? Kein Plan?" rows={2} />
        </div>
        <div>
          <Label accent>Lektion des Tages:</Label>
          <TextArea value={review.lessons} onChange={v => set("lessons", v)}
            placeholder="Was nimmst du aus dieser Session mit?" rows={2} />
        </div>

        <div>
          <Label>Session Tags</Label>
          <TagGrid options={REVIEW_TAGS} selected={review.tags} onToggle={(v) => toggle("tags", v)} multi color="var(--accent4)" />
        </div>

        <div>
          <Label>Vorsatz für morgen:</Label>
          <TextArea value={review.nextSession} onChange={v => set("nextSession", v)}
            placeholder="Morgen werde ich besonders auf... achten." rows={2} />
        </div>
      </div>

      <div style={{ padding: "20px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: "12px" }}>
        <HapticBtn size="lg" onClick={onCancel} variant="ghost" color="var(--muted)" style={{ color: "var(--muted)" }}>Abbrechen</HapticBtn>
        <HapticBtn size="lg" onClick={() => onSave(review)} variant="solid" color="var(--accent)" style={{ flex: 1 }}>
          💾 Review speichern
        </HapticBtn>
      </div>
    </div>
  );
}

// ─── SESSION HISTORY / JOURNAL ────────────────────────────────────────────────
function History({ sessions }) {
  const [filter, setFilter] = useState({ result: "all", minRating: 0, tags: [] });
  const [expanded, setExpanded] = useState(null);

  const RESULT_FILTERS = [
    { id: "all", label: "Alle" },
    { id: "win", label: "📈 Win" },
    { id: "loss", label: "📉 Loss" },
    { id: "breakeven", label: "➖ B/E" },
    { id: "no-trade", label: "⏸ No Trade" },
  ];

  const ALL_TAGS = ["Overtraded", "Zu früh raus", "SL zu eng", "FOMO", "Revange", "Perfekte Execution", "Gutes Risk Mgmt", "Zu spät Entry"];

  const filtered = sessions.filter(s => {
    if (!s.review) return false;
    if (filter.result !== "all" && s.review.result !== filter.result) return false;
    if (s.review.rating < filter.minRating) return false;
    if (filter.tags.length > 0 && !filter.tags.some(t => s.review.tags?.includes(t))) return false;
    return true;
  }).reverse();

  const toggleTag = (t) => setFilter(f => ({
    ...f, tags: f.tags.includes(t) ? f.tags.filter(x => x !== t) : [...f.tags, t]
  }));

  // Stats
  const wins = sessions.filter(s => s.review?.result === "win").length;
  const losses = sessions.filter(s => s.review?.result === "loss").length;
  const total = sessions.filter(s => s.review).length;
  const avgRating = total > 0 ? (sessions.filter(s => s.review).reduce((a, s) => a + (s.review?.rating || 0), 0) / total).toFixed(1) : "—";

  const RESULT_COLORS = { win: "#47ffce", loss: "#ff4747", breakeven: "#a78bfa", "no-trade": "#555568" };
  const RESULT_ICONS = { win: "📈", loss: "📉", breakeven: "➖", "no-trade": "⏸" };

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflowY: "auto", padding: "24px", maxWidth: "780px", margin: "0 auto" }}>
      {/* Stats Row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "12px", marginBottom: "24px" }}>
        {[
          { label: "Sessions", value: total, color: "var(--accent)" },
          { label: "Wins", value: wins, color: "#47ffce" },
          { label: "Losses", value: losses, color: "#ff4747" },
          { label: "⌀ Rating", value: avgRating, color: "var(--accent4)" },
        ].map(s => (
          <div key={s.label} style={{
            padding: "16px", borderRadius: "var(--radius)", textAlign: "center",
            background: "var(--card)", border: "1px solid var(--border)",
          }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "6px" }}>{s.label}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontWeight: 800, color: s.color }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div style={{ marginBottom: "20px", display: "flex", flexDirection: "column", gap: "12px" }}>
        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
          {RESULT_FILTERS.map(f => (
            <HapticBtn key={f.id} size="sm" active={filter.result === f.id}
              onClick={() => setFilter(prev => ({ ...prev, result: f.id }))} color="var(--accent)">
              {f.label}
            </HapticBtn>
          ))}
        </div>
        <div style={{ display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--muted)", letterSpacing: "0.12em" }}>RATING ≥</span>
          {[0, 1, 2, 3, 4, 5].map(r => (
            <HapticBtn key={r} size="sm" active={filter.minRating === r}
              onClick={() => setFilter(prev => ({ ...prev, minRating: r }))} color="var(--accent4)">
              {r === 0 ? "Alle" : "★".repeat(r)}
            </HapticBtn>
          ))}
        </div>
        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
          {ALL_TAGS.map(t => (
            <HapticBtn key={t} size="sm" active={filter.tags.includes(t)}
              onClick={() => toggleTag(t)} color="var(--accent2)" variant="outline">
              {t}
            </HapticBtn>
          ))}
        </div>
      </div>

      <Divider label={`${filtered.length} Sessions`} />

      {/* Session Cards */}
      {filtered.length === 0 ? (
        <div style={{ textAlign: "center", padding: "60px 0", color: "var(--muted)", fontFamily: "var(--font-body)" }}>
          Keine Sessions gefunden.
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: "12px", marginTop: "16px" }}>
          {filtered.map((s, i) => {
            const isOpen = expanded === i;
            const rc = RESULT_COLORS[s.review?.result] || "var(--muted)";
            return (
              <div key={i} style={{
                borderRadius: "var(--radius-lg)", overflow: "hidden",
                border: `1px solid ${isOpen ? rc : "var(--border)"}`,
                background: "var(--card)", transition: "border-color 0.2s",
                boxShadow: isOpen ? `0 0 20px ${rc}20` : "none",
              }}>
                {/* Row header */}
                <button onClick={() => setExpanded(isOpen ? null : i)} style={{
                  width: "100%", background: "none", border: "none", cursor: "pointer",
                  padding: "16px 20px", display: "flex", alignItems: "center", gap: "14px",
                  textAlign: "left",
                }}>
                  <span style={{ fontSize: "24px" }}>{RESULT_ICONS[s.review?.result] || "—"}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "14px", fontWeight: 700, color: "var(--text)", marginBottom: "2px" }}>
                      {s.sessionType} · {s.bias}
                      {s.review?.pnl && <span style={{ color: rc, marginLeft: "10px" }}>{s.review.pnl}</span>}
                    </div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--muted)" }}>{fmt(s.startTime)}</div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                    {"⭐".repeat(s.review?.rating || 0)}
                    <span style={{ color: "var(--muted)", fontSize: "18px", transition: "transform 0.2s", display: "inline-block", transform: isOpen ? "rotate(180deg)" : "none" }}>▾</span>
                  </div>
                </button>

                {/* Expanded detail */}
                {isOpen && (
                  <div style={{ padding: "0 20px 20px", borderTop: "1px solid var(--border)", animation: "slideUp 0.3s ease" }}>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginTop: "16px" }}>
                      {[
                        { l: "Mood", v: s.mood },
                        { l: "Energy", v: `${s.energy}/10` },
                        { l: "Schlaf", v: `${s.sleep}/10` },
                        { l: "Markt", v: s.marketCondition },
                        { l: "Regeln ✓", v: `${s.rulesChecked?.length || 0} checked` },
                        { l: "Rule Score", v: `${s.review?.ruleFollowed || "—"}/10` },
                      ].map(item => (
                        <div key={item.l}>
                          <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "3px" }}>{item.l}</div>
                          <div style={{ fontFamily: "var(--font-display)", fontSize: "14px", fontWeight: 600, color: "var(--text)" }}>{item.v}</div>
                        </div>
                      ))}
                    </div>

                    {s.review?.lessons && (
                      <div style={{ marginTop: "16px", padding: "12px 14px", background: "rgba(232,255,71,0.05)", border: "1px solid rgba(232,255,71,0.15)", borderRadius: "8px" }}>
                        <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--accent)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "6px" }}>Lektion</div>
                        <div style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--text)", lineHeight: 1.6 }}>{s.review.lessons}</div>
                      </div>
                    )}

                    {(s.review?.tags?.length > 0) && (
                      <div style={{ marginTop: "12px", display: "flex", gap: "6px", flexWrap: "wrap" }}>
                        {s.review.tags.map(t => (
                          <span key={t} style={{ padding: "4px 10px", borderRadius: "6px", background: "var(--muted2)", color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: "10px" }}>{t}</span>
                        ))}
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─── MAIN APP ────────────────────────────────────────────────────────────────
export default function App() {
  const [view, setView] = useState("home"); // home | journal | active | review | history
  const [sessions, setSessions] = useState(loadSessions);
  const [currentSession, setCurrentSession] = useState(null);
  const [sessionLiveData, setSessionLiveData] = useState(null);

  const persistSave = (s) => { setSessions(s); saveSessions(s); };

  const handleJournalComplete = (data) => {
    setCurrentSession(data);
    setView("active");
  };

  const handleEndSession = (liveData) => {
    setSessionLiveData(liveData);
    setView("review");
  };

  const handleReviewSave = (review) => {
    const completed = { ...currentSession, ...sessionLiveData, review, endTime: now() };
    const updated = [...sessions, completed];
    persistSave(updated);
    setCurrentSession(null);
    setSessionLiveData(null);
    setView("history");
  };

  const NAV = [
    { id: "home", label: "Home", icon: "⌂" },
    { id: "history", label: "Journal", icon: "◎" },
  ];

  return (
    <>
      <style>{GLOBAL_CSS}</style>
      <div className="noise" style={{
        height: "100vh", width: "100vw", display: "flex", flexDirection: "column",
        background: "var(--bg)", color: "var(--text)", fontFamily: "var(--font-body)",
        overflow: "hidden",
      }}>
        {/* Top Bar */}
        <div style={{
          padding: "16px 24px", display: "flex", alignItems: "center", justifyContent: "space-between",
          borderBottom: "1px solid var(--border)", background: "rgba(10,10,15,0.8)",
          backdropFilter: "blur(12px)", flexShrink: 0, position: "relative", zIndex: 10,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
            <div style={{
              width: "32px", height: "32px", borderRadius: "8px",
              background: "linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: "16px",
            }}>🧠</div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "16px", fontWeight: 800, color: "var(--text)", lineHeight: 1 }}>Mental Journal</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase" }}>Trading Mind OS</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
            {/* Status dot */}
            {view === "active" && (
              <div style={{ display: "flex", alignItems: "center", gap: "6px", padding: "6px 12px", borderRadius: "20px", background: "rgba(255,107,71,0.1)", border: "1px solid rgba(255,107,71,0.3)" }}>
                <div className="pulse" style={{ width: "6px", height: "6px", borderRadius: "50%", background: "#ff6b47" }} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "#ff6b47", letterSpacing: "0.1em" }}>LIVE</span>
              </div>
            )}
            {NAV.filter(n => !["journal", "active", "review"].includes(view) || n.id !== "home" || view === "home").map(n => (
              <HapticBtn key={n.id} size="sm" active={view === n.id} onClick={() => setView(n.id)} variant="ghost" color="var(--accent)">
                {n.icon} {n.label}
              </HapticBtn>
            ))}
          </div>
        </div>

        {/* Content */}
        <div style={{ flex: 1, overflowY: view === "home" ? "hidden" : "auto" }}>
          {/* ── HOME ── */}
          {view === "home" && (
            <div style={{
              height: "100%", display: "flex", flexDirection: "column", alignItems: "center",
              justifyContent: "center", padding: "32px 24px", gap: "32px", maxWidth: "520px", margin: "0 auto",
            }}>
              {/* Hero */}
              <div style={{ textAlign: "center" }} className="slide-up">
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.25em",
                  textTransform: "uppercase", color: "var(--muted)", marginBottom: "16px"
                }}>
                  {new Date().toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long" })}
                </div>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: "clamp(36px, 6vw, 52px)",
                  fontWeight: 800, lineHeight: 1.1,
                  background: "linear-gradient(135deg, var(--text) 0%, var(--muted) 100%)",
                  WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                  marginBottom: "12px",
                }}>Trade your mind<br />before the market.</div>
                <div style={{ fontFamily: "var(--font-body)", color: "var(--muted)", fontSize: "15px", lineHeight: 1.7 }}>
                  Clarity ist dein Edge. Starte jede Session mit einem mentalen Check-In.
                </div>
              </div>

              {/* Main CTA */}
              <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "12px" }} className="slide-up">
                <button onClick={() => setView("journal")} style={{
                  width: "100%", padding: "22px 32px", borderRadius: "16px", cursor: "pointer",
                  background: "linear-gradient(135deg, var(--accent) 0%, #b8ff00 100%)",
                  border: "none", color: "#0a0a0f",
                  fontFamily: "var(--font-display)", fontSize: "18px", fontWeight: 800,
                  letterSpacing: "0.02em", transition: "all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1)",
                  boxShadow: "0 8px 32px rgba(232,255,71,0.3), 0 4px 12px rgba(0,0,0,0.4)",
                  animation: "glow-pulse 3s ease-in-out infinite",
                }}
                  onMouseEnter={e => e.target.style.transform = "scale(1.02) translateY(-2px)"}
                  onMouseLeave={e => e.target.style.transform = "scale(1) translateY(0)"}
                  onMouseDown={e => e.target.style.transform = "scale(0.97)"}
                  onMouseUp={e => e.target.style.transform = "scale(1.02)"}
                >
                  🚀 Session starten
                </button>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px" }}>
                  <HapticBtn size="lg" onClick={() => setView("history")} variant="outline" color="var(--accent2)" style={{ width: "100%" }}>
                    ◎ Journal
                  </HapticBtn>
                  {currentSession && (
                    <HapticBtn size="lg" onClick={() => setView("active")} variant="outline" color="var(--accent3)" style={{ width: "100%" }}>
                      🔴 Session aktiv
                    </HapticBtn>
                  )}
                </div>
              </div>

              {/* Quick Stats */}
              {sessions.filter(s => s.review).length > 0 && (
                <div style={{ width: "100%", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "8px" }} className="fade-in">
                  {[
                    { l: "Sessions", v: sessions.filter(s => s.review).length, c: "var(--accent)" },
                    { l: "Win Rate", v: sessions.filter(s => s.review).length > 0 ? Math.round(sessions.filter(s => s.review?.result === "win").length / sessions.filter(s => s.review).length * 100) + "%" : "—", c: "var(--accent2)" },
                    { l: "⌀ Rating", v: sessions.filter(s => s.review).length > 0 ? (sessions.filter(s => s.review).reduce((a, s) => a + (s.review?.rating || 0), 0) / sessions.filter(s => s.review).length).toFixed(1) : "—", c: "var(--accent4)" },
                  ].map(s => (
                    <div key={s.l} style={{ padding: "14px 10px", borderRadius: "10px", textAlign: "center", background: "var(--card)", border: "1px solid var(--border)" }}>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: "8px", color: "var(--muted)", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: "4px" }}>{s.l}</div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: "20px", fontWeight: 800, color: s.c }}>{s.v}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* ── JOURNAL FLOW ── */}
          {view === "journal" && (
            <JournalFlow
              onComplete={handleJournalComplete}
              onCancel={() => setView("home")}
            />
          )}

          {/* ── ACTIVE SESSION ── */}
          {view === "active" && currentSession && (
            <ActiveSessionHUD session={currentSession} onEndSession={handleEndSession} />
          )}

          {/* ── REVIEW ── */}
          {view === "review" && currentSession && (
            <SessionReview session={currentSession} onSave={handleReviewSave} onCancel={() => setView("active")} />
          )}

          {/* ── HISTORY ── */}
          {view === "history" && <History sessions={sessions} />}
        </div>
      </div>
    </>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>