import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';

// =============================================================================
// THE WINNER'S CODE — COMPANION APP · v2
// Architecture-grade encoding tool for the permanent shift from losing mind to
// winner's identity. Companion to The Winner's Code self-paced course.
//
// v2 additions:
//   · Claude-powered Reframe Engine — Sascha's voice in the operator's pocket
//   · Multi-horizon Compound view — daily, weekly, quarterly, decade
//   · Pattern Insights — the operator's own data teaches them
//   · Audio recording — Identity Statement read in operator's own voice
//   · Decade Architecture timeline visualization
//   · Honest session tracking via Visibility API
//   · Quarter-aware Today rail with drift detection
//   · Export to printable HTML for 1:1 sessions
//   · PWA meta + notifications + haptic feedback
//
// Works for operators with or without ADHD.
// =============================================================================

const NAVY = '#0A0F1E';
const NAVY_2 = '#0E1428';
const NAVY_3 = '#131A33';
const NAVY_4 = '#1A2240';
const GOLD = '#C9A84C';
const GOLD_DEEP = '#B89438';
const GOLD_BRIGHT = '#E5C77A';
const IVORY = '#F5F1E8';
const IVORY_DIM = '#E8E0CC';
const GREY_1 = '#D4CDB8';
const GREY_2 = '#8B8675';
const GREY_3 = '#5C5848';
const RED_SOFT = '#D88A8A';
const LINE = 'rgba(201, 168, 76, 0.18)';
const LINE_BRIGHT = 'rgba(201, 168, 76, 0.4)';
const LINE_FAINT = 'rgba(201, 168, 76, 0.08)';

const SERIF = "'Cormorant Garamond', 'Garamond', 'Times New Roman', serif";
const DISPLAY = "'Syne', 'Helvetica Neue', sans-serif";

// =============================================================================
// STORAGE
// =============================================================================

const storage = {
  async get(key, fallback = null) {
    try {
      const result = await window.storage.get(key);
      if (!result) return fallback;
      try { return JSON.parse(result.value); } catch { return result.value; }
    } catch { return fallback; }
  },
  async set(key, value) {
    try {
      const v = typeof value === 'string' ? value : JSON.stringify(value);
      await window.storage.set(key, v);
      return true;
    } catch (e) { console.error('Storage set failed:', e); return false; }
  },
  async list(prefix) {
    try { return (await window.storage.list(prefix))?.keys || []; }
    catch { return []; }
  },
};

// =============================================================================
// UTILITIES
// =============================================================================

const todayKey = (offset = 0) => {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
};

const fmtDate = (iso, opts = {}) => {
  const d = new Date(iso);
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: opts.year ? 'numeric' : undefined });
};

const fmtTime = (iso) => {
  const d = new Date(iso);
  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
};

const fmtDuration = (ms) => {
  const m = Math.floor(ms / 60000);
  const h = Math.floor(m / 60);
  if (h > 24) return `${Math.floor(h / 24)}d`;
  if (h > 0) return `${h}h ${m % 60}m`;
  return `${m}m`;
};

const startOfQuarter = (d = new Date()) => {
  const q = Math.floor(d.getMonth() / 3);
  return new Date(d.getFullYear(), q * 3, 1);
};

const quarterLabel = (d = new Date()) => {
  const q = Math.floor(d.getMonth() / 3) + 1;
  return `Q${q} · ${d.getFullYear()}`;
};

const haptic = (pattern = 10) => {
  try { if (navigator.vibrate) navigator.vibrate(pattern); } catch {}
};

// =============================================================================
// CLAUDE API — the architectural intelligence
// =============================================================================

const SASCHA_SYSTEM_PROMPT = `You are the architectural intelligence of The Winner's Code, the self-paced winning mindset course authored by Sascha Gorokhoff. You speak in Sascha's voice — sovereign, sophisticated, behaviorally precise, architecturally rigorous. Never motivational. Never therapeutic. Never moralizing. Architectural only.

THE FRAMEWORK: LOSER → CONTENDER → CHAMPION → UNDEFEATED.

What each stage installs:
- LOSER: honest excavation of the architecture of defeat the operator inherited; identity inventory; the permanent, deliberate separation from what was.
- CONTENDER: the winner's identity installed; standards reset at executive register; the engineered environment of champions.
- CHAMPION: daily discipline; performance under pressure; the compound mind that turns days into decades.
- UNDEFEATED: inner sovereignty; the long game; the permanent code held alive across years.

CORE DISTINCTIONS:
- Architecture is structural and replaceable. Mood is a state. The work is architectural.
- Improvement leaves the architecture in place. Separation replaces it.
- A preference is what one likes. A goal is what one moves toward. A standard is what one operates — unconditionally, continuously.
- Identity is intermittent attention. Environment is relentless input. Architecture is decided by the relentless, not the intermittent.
- Willpower decides every morning. Discipline decided once.
- Pressure does not create performance. Pressure measures architecture.
- Breakthroughs are seductive but rarely durable. Compounding is undramatic but architecturally devastating.
- The losing mind is architecture, not feeling. ADHD is terrain, not architecture.

VOICE RULES (non-negotiable):
- Use: architecture, operator, seated court, sovereign, compounding, deposit, terrain, install, engineered, register, cut.
- Refuse: "you got this," "amazing," "great job," "I believe in you," "you are enough," "you deserve."
- No exclamation marks. No emojis. No therapeutic register. No self-help register.
- Pull-quote-grade prose. Each sentence earns its weight.
- Address the operator with respect, not with cheer. The Swiss aristocratic register: measured, precise, refined, quietly sovereign.

THE TASK:
The operator has captured a losing-mind thought. You produce a four-part architectural analysis. Return ONLY a valid JSON object — no other text, no markdown code blocks, no preamble. Exactly these four keys:

{
  "identity_firing": "[ONE precise sentence naming whose voice this is — the critic, the wounded operator, the inherited fear, the conditioned identity, the family voice never refused, etc. Specific. Architectural.]",
  "architecture_built": "[TWO TO THREE sentences naming what architecture this thought, repeated, has built across years — the standards it has set, the limits it has drawn, the trajectory it has authored. Diagnostic. Honest.]",
  "sovereign_reframe": "[THREE TO FIVE sentences. The reframe from the seated court. Not denial. Not platitude. The architecturally honest truth, in the operator's voice, addressed to the operator. Pull-quote-grade prose. Begin with what is actually true beneath the storm. End with what the architecture authorizes the operator to operate from now.]",
  "deposit_note": "[ONE short sentence naming what depositing this reframe to the ledger represents architecturally.]"
}

Return only the JSON. No other text whatsoever.`;

const PATTERN_SYSTEM_PROMPT = `You are the pattern intelligence of The Winner's Code companion app. You analyze the operator's own data — reframes deposited, storms survived, daily code execution, hyperfocus sessions — and surface architectural insight in Sascha Gorokhoff's voice.

Voice: sovereign, architectural, precise. No motivation. No cheer. No moralizing. Pull-quote-grade prose. Refer to "the operator," "the architecture," "the data," "the pattern."

The operator is reading the insight in their own app. Speak with respect, not with reassurance. Honor what the data shows, including what is not yet operating.

Return ONLY valid JSON, no markdown, no preamble. Exactly this structure:

{
  "headline": "[ONE sentence stating the architectural pattern the data reveals. Direct.]",
  "observation": "[TWO TO FOUR sentences elaborating the pattern with reference to specific numbers from the data. Architectural, not statistical. What the data means architecturally.]",
  "calibration": "[ONE TO TWO sentences naming what the architecture would calibrate next, given the pattern. Suggestion, not prescription.]"
}`;

async function callClaude(prompt, systemPrompt = SASCHA_SYSTEM_PROMPT, maxTokens = 1000) {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: maxTokens,
      system: systemPrompt,
      messages: [{ role: "user", content: prompt }],
    })
  });
  if (!response.ok) {
    const errText = await response.text();
    throw new Error(`API ${response.status}: ${errText.slice(0, 200)}`);
  }
  const data = await response.json();
  const text = data.content?.filter(c => c.type === 'text').map(c => c.text).join('') || '';
  return text;
}

function parseJSON(text) {
  let cleaned = text.trim().replace(/^```(?:json)?\s*/i, '').replace(/\s*```$/i, '');
  try { return JSON.parse(cleaned); } catch {}
  const firstBrace = cleaned.indexOf('{');
  const lastBrace = cleaned.lastIndexOf('}');
  if (firstBrace >= 0 && lastBrace > firstBrace) {
    try { return JSON.parse(cleaned.slice(firstBrace, lastBrace + 1)); } catch {}
  }
  return null;
}

// =============================================================================
// UI PRIMITIVES
// =============================================================================

const Eyebrow = ({ children, color = GOLD, style = {} }) => (
  <div style={{
    fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.36em',
    textTransform: 'uppercase', color, fontWeight: 600, marginBottom: 14,
    ...style,
  }}>{children}</div>
);

const Heading = ({ children, size = 32, italic = false, style = {} }) => (
  <h2 style={{
    fontFamily: SERIF, fontSize: size, lineHeight: 1.1,
    color: IVORY, fontWeight: 400, fontStyle: italic ? 'italic' : 'normal',
    letterSpacing: '-0.012em', margin: 0, ...style,
  }}>{children}</h2>
);

const Lead = ({ children, style = {} }) => (
  <p style={{
    fontFamily: SERIF, fontSize: 18, lineHeight: 1.6,
    color: IVORY_DIM, margin: '14px 0', ...style,
  }}>{children}</p>
);

const Prose = ({ children, style = {} }) => (
  <p style={{
    fontFamily: SERIF, fontSize: 16, lineHeight: 1.65,
    color: GREY_1, margin: '12px 0', ...style,
  }}>{children}</p>
);

const Btn = ({ children, onClick, kind = 'primary', size = 'md', disabled = false, full = false, style = {} }) => {
  const sizes = {
    sm: { fontSize: 10, padding: '9px 18px' },
    md: { fontSize: 11, padding: '13px 26px' },
    lg: { fontSize: 12, padding: '17px 36px' },
  };
  const kinds = {
    primary: { background: GOLD, color: NAVY, borderColor: GOLD },
    ghost: { background: 'transparent', color: GOLD, borderColor: LINE_BRIGHT },
    quiet: { background: 'transparent', color: GREY_1, borderColor: LINE },
    danger: { background: 'transparent', color: RED_SOFT, borderColor: 'rgba(216, 138, 138, 0.3)' },
  };
  return (
    <button
      onClick={() => { if (!disabled) { haptic(8); onClick && onClick(); } }}
      disabled={disabled}
      style={{
        fontFamily: DISPLAY, fontWeight: 600, letterSpacing: '0.22em',
        textTransform: 'uppercase', cursor: disabled ? 'not-allowed' : 'pointer',
        border: '1px solid', transition: 'all 0.3s ease',
        display: 'inline-block', textAlign: 'center',
        opacity: disabled ? 0.4 : 1, width: full ? '100%' : 'auto',
        ...sizes[size], ...kinds[kind], ...style,
      }}
      onMouseEnter={(e) => {
        if (disabled) return;
        if (kind === 'primary') { e.currentTarget.style.background = GOLD_BRIGHT; e.currentTarget.style.borderColor = GOLD_BRIGHT; }
        else if (kind === 'ghost') { e.currentTarget.style.borderColor = GOLD; e.currentTarget.style.color = GOLD_BRIGHT; }
      }}
      onMouseLeave={(e) => {
        if (kind === 'primary') { e.currentTarget.style.background = GOLD; e.currentTarget.style.borderColor = GOLD; }
        else if (kind === 'ghost') { e.currentTarget.style.borderColor = LINE_BRIGHT; e.currentTarget.style.color = GOLD; }
      }}>
      {children}
    </button>
  );
};

const Card = ({ children, padding = 28, style = {}, onClick = null }) => (
  <div style={{
    background: NAVY_2, border: `1px solid ${LINE}`, padding,
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 0.3s ease', ...style,
  }} onClick={onClick}>
    {children}
  </div>
);

const PullQuote = ({ children }) => (
  <div style={{
    fontFamily: SERIF, fontStyle: 'italic', fontSize: 22,
    lineHeight: 1.5, color: GOLD_BRIGHT,
    padding: '20px 0 20px 24px', borderLeft: `2px solid ${GOLD}`,
    margin: '24px 0',
  }}>{children}</div>
);

const TextArea = ({ value, onChange, placeholder, rows = 6, style = {} }) => (
  <textarea
    value={value || ''} onChange={(e) => onChange(e.target.value)}
    placeholder={placeholder} rows={rows}
    style={{
      width: '100%', background: NAVY_3, border: `1px solid ${LINE}`,
      color: IVORY, fontFamily: SERIF, fontSize: 16, lineHeight: 1.6,
      padding: 16, outline: 'none', resize: 'vertical',
      transition: 'border-color 0.3s ease', boxSizing: 'border-box', ...style,
    }}
    onFocus={(e) => e.target.style.borderColor = GOLD}
    onBlur={(e) => e.target.style.borderColor = LINE}
  />
);

const Input = ({ value, onChange, placeholder, type = 'text', style = {} }) => (
  <input
    type={type} value={value || ''} onChange={(e) => onChange(e.target.value)}
    placeholder={placeholder}
    style={{
      width: '100%', background: NAVY_3, border: `1px solid ${LINE}`,
      color: IVORY, fontFamily: SERIF, fontSize: 16,
      padding: '12px 16px', outline: 'none',
      transition: 'border-color 0.3s ease', boxSizing: 'border-box', ...style,
    }}
    onFocus={(e) => e.target.style.borderColor = GOLD}
    onBlur={(e) => e.target.style.borderColor = LINE}
  />
);

const LoadingDots = ({ color = GOLD }) => (
  <div style={{ display: 'inline-flex', gap: 6 }}>
    {[0, 1, 2].map(i => (
      <div key={i} style={{
        width: 6, height: 6, borderRadius: '50%', background: color,
        animation: `wc-pulse 1.4s ${i * 0.2}s infinite ease-in-out`,
      }} />
    ))}
  </div>
);

// =============================================================================
// AUDIO RECORDING
// =============================================================================

const useAudioRecorder = () => {
  const [recording, setRecording] = useState(false);
  const [audioBlob, setAudioBlob] = useState(null);
  const [duration, setDuration] = useState(0);
  const mediaRecorderRef = useRef(null);
  const chunksRef = useRef([]);
  const startTimeRef = useRef(0);
  const intervalRef = useRef(null);

  const start = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mr = new MediaRecorder(stream);
      mediaRecorderRef.current = mr;
      chunksRef.current = [];
      mr.ondataavailable = (e) => { if (e.data.size > 0) chunksRef.current.push(e.data); };
      mr.onstop = () => {
        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
        setAudioBlob(blob);
        stream.getTracks().forEach(t => t.stop());
      };
      mr.start();
      startTimeRef.current = Date.now();
      setRecording(true);
      setDuration(0);
      intervalRef.current = setInterval(() => {
        setDuration(Math.floor((Date.now() - startTimeRef.current) / 1000));
      }, 100);
    } catch (err) {
      alert('Microphone access not available. Audio reading is optional — the visual rereading is itself architecture-grade.');
    }
  };

  const stop = () => {
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
      mediaRecorderRef.current.stop();
    }
    if (intervalRef.current) clearInterval(intervalRef.current);
    setRecording(false);
  };

  const reset = () => { setAudioBlob(null); setDuration(0); };

  return { recording, audioBlob, duration, start, stop, reset };
};

const blobToBase64 = (blob) => new Promise((resolve, reject) => {
  const r = new FileReader();
  r.onloadend = () => resolve(r.result);
  r.onerror = reject;
  r.readAsDataURL(blob);
});

// =============================================================================
// HONEST SESSION TRACKING — Visibility API
// =============================================================================

const useHonestSession = () => {
  const [tabSwitches, setTabSwitches] = useState(0);
  const [hiddenMs, setHiddenMs] = useState(0);
  const hiddenStartRef = useRef(null);

  useEffect(() => {
    const onVis = () => {
      if (document.hidden) {
        hiddenStartRef.current = Date.now();
        setTabSwitches(s => s + 1);
      } else if (hiddenStartRef.current) {
        setHiddenMs(ms => ms + (Date.now() - hiddenStartRef.current));
        hiddenStartRef.current = null;
      }
    };
    document.addEventListener('visibilitychange', onVis);
    return () => document.removeEventListener('visibilitychange', onVis);
  }, []);

  const reset = () => { setTabSwitches(0); setHiddenMs(0); hiddenStartRef.current = null; };

  return { tabSwitches, hiddenMs, reset };
};

// =============================================================================
// ONBOARDING
// =============================================================================

const Onboarding = ({ onComplete }) => {
  const [step, setStep] = useState(0);
  const [name, setName] = useState('');
  const [terrain, setTerrain] = useState('standard');

  const finish = async () => {
    const settings = {
      name, terrain, onboarded: true, createdAt: Date.now(), useAI: true,
    };
    await storage.set('winners-code:settings', settings);
    onComplete(settings);
  };

  const Container = ({ children }) => (
    <div style={{ padding: '60px 24px 100px', minHeight: '100vh', maxWidth: 600, margin: '0 auto' }}>
      {children}
    </div>
  );

  if (step === 0) {
    return (
      <Container>
        <div style={{ textAlign: 'center', marginBottom: 40, paddingTop: 40 }}>
          <div style={{ fontFamily: DISPLAY, fontSize: 12, letterSpacing: '0.36em', color: GOLD, fontWeight: 600, marginBottom: 24 }}>
            THE WINNER'S CODE
          </div>
          <div style={{ width: 60, height: 1, background: GOLD, margin: '0 auto 28px' }} />
          <Heading size={56} italic>Welcome to the architecture.</Heading>
        </div>
        <Lead>This is the companion app to The Winner's Code course. It exists to encode, daily, the architecture of the winning mind — through reading, reframing, depositing, and operating, day after day, until the architecture is permanent.</Lead>
        <Prose>The app is not the course. The course teaches the architecture. The app operates it. Together, they compound.</Prose>
        <div style={{ marginTop: 40 }}>
          <Btn kind="primary" size="lg" onClick={() => setStep(1)} full>Begin →</Btn>
        </div>
      </Container>
    );
  }

  if (step === 1) {
    return (
      <Container>
        <Eyebrow>I · The operator</Eyebrow>
        <Heading size={36} italic>What name shall the architecture address?</Heading>
        <div style={{ marginTop: 14, marginBottom: 28 }}>
          <Prose>The name the architecture will use to address you. Use the name you operate under.</Prose>
        </div>
        <Input value={name} onChange={setName} placeholder="The operator's name…" />
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between' }}>
          <Btn kind="quiet" size="md" onClick={() => setStep(0)}>← Back</Btn>
          <Btn kind="primary" size="md" onClick={() => setStep(2)} disabled={!name.trim()}>Continue →</Btn>
        </div>
      </Container>
    );
  }

  if (step === 2) {
    return (
      <Container>
        <Eyebrow>II · The terrain</Eyebrow>
        <Heading size={36} italic>What is the terrain on which the architecture will be installed?</Heading>
        <div style={{ marginTop: 14, marginBottom: 28 }}>
          <Prose>The architecture is identical. The terrain may differ. Operators with ADHD benefit from the Hyperfocus engineering surface and terrain-aware language. Selectable later. Both modes honor the same architecture.</Prose>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {[
            { id: 'standard', label: 'STANDARD', title: 'Neurotypical terrain', desc: 'Standard installation of the architecture.' },
            { id: 'adhd', label: 'ADHD OPERATOR', title: 'ADHD terrain', desc: 'Architecture-grade installation engineered for the ADHD brain. Includes Hyperfocus engineering surface.' },
          ].map(opt => (
            <button key={opt.id} onClick={() => setTerrain(opt.id)}
              style={{
                padding: 24, textAlign: 'left',
                background: terrain === opt.id ? NAVY_4 : NAVY_2,
                border: `1px solid ${terrain === opt.id ? GOLD : LINE}`,
                cursor: 'pointer', transition: 'all 0.3s ease',
              }}>
              <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: terrain === opt.id ? GOLD : GREY_1, fontWeight: 700 }}>
                {opt.label}
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 22, color: IVORY, fontStyle: 'italic', marginTop: 10, marginBottom: 8 }}>
                {opt.title}
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 15, color: GREY_1, lineHeight: 1.5 }}>
                {opt.desc}
              </div>
            </button>
          ))}
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between' }}>
          <Btn kind="quiet" size="md" onClick={() => setStep(1)}>← Back</Btn>
          <Btn kind="primary" size="md" onClick={() => setStep(3)}>Continue →</Btn>
        </div>
      </Container>
    );
  }

  if (step === 3) {
    return (
      <Container>
        <Eyebrow>III · The integrity</Eyebrow>
        <Heading size={36} italic>What is delivered. What is not.</Heading>
        <div style={{ marginTop: 20 }}>
          <Prose>This app is an architectural companion. It supports the daily operation of the Winner's Code architecture. It is educational and architectural in nature.</Prose>
          <Prose>It is not medical, psychological, or therapeutic care. It does not diagnose, treat, prevent, or cure any condition. It does not replace clinical evaluation, therapy, coaching, or any other professional support.</Prose>
          <Prose>Operators are encouraged, without reservation, to seek and continue whatever clinical, therapeutic, or professional support serves them. The architecture compounds with that support. It does not substitute for it.</Prose>
        </div>
        <PullQuote>
          The architecture is the architect's work. The operation is the operator's life. Both are sacred. Neither replaces the other.
        </PullQuote>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between' }}>
          <Btn kind="quiet" size="md" onClick={() => setStep(2)}>← Back</Btn>
          <Btn kind="primary" size="md" onClick={finish}>I understand · Enter</Btn>
        </div>
      </Container>
    );
  }
  return null;
};

// =============================================================================
// TODAY — daily ritual + quarter intelligence + drift detection
// =============================================================================

const Today = ({ settings, onNavigate }) => {
  const [identity, setIdentity] = useState('');
  const [identityAudio, setIdentityAudio] = useState(null);
  const [rail, setRail] = useState(['', '', '']);
  const [completedRail, setCompletedRail] = useState([false, false, false]);
  const [dailyCode, setDailyCode] = useState([]);
  const [reflection, setReflection] = useState('');
  const [hasReadIdentity, setHasReadIdentity] = useState(false);
  const [showIdentity, setShowIdentity] = useState(false);
  const [streak, setStreak] = useState(0);
  const [codeStatus, setCodeStatus] = useState({});
  const [quarterCommitments, setQuarterCommitments] = useState([]);
  const [driftDays, setDriftDays] = useState(0);
  const audioRef = useRef(null);

  useEffect(() => { (async () => {
    const idDoc = await storage.get('winners-code:doc:identity');
    setIdentity(idDoc?.text || '');
    setIdentityAudio(idDoc?.audio || null);

    const codeDoc = await storage.get('winners-code:doc:daily-code');
    if (codeDoc?.items) setDailyCode(codeDoc.items);

    const decadeDoc = await storage.get('winners-code:doc:decade');
    if (decadeDoc?.quarter?.commitments) {
      setQuarterCommitments(decadeDoc.quarter.commitments);
    }

    const today = await storage.get(`winners-code:day:${todayKey()}`);
    if (today) {
      setRail(today.rail || ['', '', '']);
      setCompletedRail(today.completedRail || [false, false, false]);
      setReflection(today.reflection || '');
      setHasReadIdentity(today.hasReadIdentity || false);
      setCodeStatus(today.codeStatus || {});
    }

    let s = 0;
    for (let i = 0; i < 365; i++) {
      const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
      const active = e && (e.hasReadIdentity || (e.completedRail || []).some(x => x));
      if (active) s++;
      else if (i > 0) break;
    }
    setStreak(s);

    let drift = 0;
    for (let i = 1; i < 14; i++) {
      const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
      const railsAuthored = e && (e.rail || []).filter(r => r.trim()).length > 0;
      if (!railsAuthored) drift++;
      else break;
    }
    setDriftDays(drift);
  })(); }, []);

  const persist = useCallback(async (patch) => {
    const k = `winners-code:day:${todayKey()}`;
    const existing = await storage.get(k) || {};
    const merged = { ...existing, ...patch, date: todayKey(), updated: Date.now() };
    await storage.set(k, merged);
  }, []);

  const markIdentityRead = async () => {
    haptic([10, 30, 10]);
    setHasReadIdentity(true);
    await persist({ hasReadIdentity: true });
    setShowIdentity(false);
  };

  const playIdentityAudio = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };

  const updateRail = (idx, value) => {
    const next = [...rail]; next[idx] = value; setRail(next);
    persist({ rail: next });
  };

  const toggleRail = async (idx) => {
    haptic(15);
    const next = [...completedRail]; next[idx] = !next[idx];
    setCompletedRail(next);
    await persist({ completedRail: next });
  };

  const toggleCode = async (idx) => {
    haptic(15);
    const next = { ...codeStatus, [idx]: !codeStatus[idx] };
    setCodeStatus(next);
    await persist({ codeStatus: next });
  };

  const saveReflection = async () => { await persist({ reflection }); haptic(10); };

  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 12) return 'Morning';
    if (h < 17) return 'Afternoon';
    return 'Evening';
  })();

  return (
    <div style={{ paddingBottom: 100 }}>
      {/* HEADER */}
      <div style={{ marginBottom: 32 }}>
        <Eyebrow>{greeting}{settings?.name ? `, ${settings.name}` : ''}</Eyebrow>
        <Heading size={42} italic>The architecture, today.</Heading>
        <div style={{
          marginTop: 12, fontFamily: SERIF, fontSize: 16, color: GREY_1, fontStyle: 'italic',
        }}>
          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
          {streak > 0 && (
            <span style={{ color: GOLD, marginLeft: 14, fontStyle: 'normal', fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', fontWeight: 600 }}>
              · {streak}-DAY STREAK
            </span>
          )}
        </div>
      </div>

      {/* DRIFT NOTICE */}
      {driftDays >= 3 && (
        <div style={{
          marginBottom: 24, padding: '18px 22px',
          background: 'rgba(216, 138, 138, 0.06)',
          border: `1px solid rgba(216, 138, 138, 0.25)`,
          borderLeft: `3px solid ${RED_SOFT}`,
        }}>
          <Eyebrow color={RED_SOFT}>DRIFT DETECTED</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 16, color: IVORY_DIM, lineHeight: 1.55, marginTop: 6 }}>
            The rail has not been authored for {driftDays} consecutive days. Drift is not failure; drift is data. Author today, deliberately, and the architecture re-engages.
          </div>
        </div>
      )}

      {/* QUARTER COMMITMENTS PROMPT */}
      {quarterCommitments.length > 0 && rail.every(r => !r.trim()) && (
        <Card padding={22} style={{ marginBottom: 20, background: NAVY_3, borderColor: LINE_BRIGHT }}>
          <Eyebrow>{quarterLabel()} · ACTIVE COMMITMENTS</Eyebrow>
          <div style={{ marginTop: 8 }}>
            {quarterCommitments.slice(0, 5).map((c, i) => (
              <div key={i} style={{
                fontFamily: SERIF, fontSize: 15, color: IVORY_DIM,
                padding: '6px 0', display: 'flex', gap: 10,
              }}>
                <span style={{ color: GOLD, fontFamily: DISPLAY, fontSize: 10, fontWeight: 700, minWidth: 16 }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span>{c}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, fontFamily: SERIF, fontSize: 13, color: GREY_2, fontStyle: 'italic' }}>
            Today's rail is authored from these. The day advances the quarter, or the day drifts.
          </div>
        </Card>
      )}

      {/* IDENTITY READING */}
      <Card padding={28} style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <Eyebrow color={hasReadIdentity ? GREY_2 : GOLD}>I · The Identity Statement</Eyebrow>
          {hasReadIdentity && <span style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GOLD, fontWeight: 600 }}>✓ READ TODAY</span>}
        </div>
        {!identity ? (
          <div>
            <Prose>The Identity Statement is the foundation document of the Winner's Code. Author it first.</Prose>
            <div style={{ marginTop: 16 }}>
              <Btn kind="primary" size="md" onClick={() => onNavigate('documents')}>Author Identity Statement</Btn>
            </div>
          </div>
        ) : (
          <div>
            {showIdentity ? (
              <div>
                <div style={{
                  fontFamily: SERIF, fontSize: 18, lineHeight: 1.7, color: IVORY_DIM,
                  fontStyle: 'italic', whiteSpace: 'pre-wrap', padding: '12px 0 24px',
                }}>
                  {identity}
                </div>
                {identityAudio && (
                  <div style={{ marginBottom: 18, padding: '14px 16px', background: NAVY_3, border: `1px solid ${LINE}` }}>
                    <Eyebrow>YOUR OWN VOICE</Eyebrow>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8 }}>
                      <button onClick={playIdentityAudio}
                        style={{
                          width: 38, height: 38, borderRadius: '50%',
                          background: GOLD, border: 'none', cursor: 'pointer',
                          color: NAVY, fontSize: 14, paddingLeft: 3,
                        }}>▶</button>
                      <span style={{ fontFamily: SERIF, fontSize: 14, color: GREY_1, fontStyle: 'italic' }}>
                        Recorded {identityAudio.recordedAt ? fmtDate(identityAudio.recordedAt) : ''}
                      </span>
                      <audio ref={audioRef} src={identityAudio.data} preload="metadata" />
                    </div>
                  </div>
                )}
                <div style={{ display: 'flex', gap: 12 }}>
                  <Btn kind="primary" size="md" onClick={markIdentityRead}>I have read aloud</Btn>
                  <Btn kind="quiet" size="md" onClick={() => setShowIdentity(false)}>Close</Btn>
                </div>
              </div>
            ) : (
              <div>
                <Prose>Read aloud, slowly. The architecture is installed by repetition.</Prose>
                <div style={{ marginTop: 16 }}>
                  <Btn kind={hasReadIdentity ? 'ghost' : 'primary'} size="md" onClick={() => setShowIdentity(true)}>
                    {hasReadIdentity ? 'Read again' : 'Open & read aloud'}
                  </Btn>
                </div>
              </div>
            )}
          </div>
        )}
      </Card>

      {/* TODAY RAIL */}
      <Card padding={28} style={{ marginBottom: 20 }}>
        <Eyebrow>II · The Today Rail</Eyebrow>
        <Lead>Three architecture-supporting actions. Authored before the day moves.</Lead>
        <div style={{ marginTop: 18 }}>
          {[0, 1, 2].map((i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
              <button onClick={() => toggleRail(i)}
                style={{
                  width: 22, height: 22, flexShrink: 0,
                  border: `1.5px solid ${completedRail[i] ? GOLD : LINE_BRIGHT}`,
                  background: completedRail[i] ? GOLD : 'transparent',
                  cursor: 'pointer', position: 'relative', padding: 0,
                  transition: 'all 0.3s ease',
                }}>
                {completedRail[i] && (
                  <span style={{
                    position: 'absolute', top: '50%', left: '50%',
                    transform: 'translate(-50%, -55%)', color: NAVY,
                    fontSize: 14, fontWeight: 700, lineHeight: 1,
                  }}>✓</span>
                )}
              </button>
              <input
                value={rail[i]} onChange={(e) => updateRail(i, e.target.value)}
                placeholder={`Action ${i + 1}…`}
                style={{
                  flex: 1, background: 'transparent', border: 'none',
                  borderBottom: `1px solid ${LINE}`,
                  color: completedRail[i] ? GREY_2 : IVORY,
                  textDecoration: completedRail[i] ? 'line-through' : 'none',
                  fontFamily: SERIF, fontSize: 17, padding: '8px 0',
                  outline: 'none', transition: 'all 0.3s ease',
                }}
                onFocus={(e) => e.target.style.borderBottomColor = GOLD}
                onBlur={(e) => e.target.style.borderBottomColor = LINE}
              />
            </div>
          ))}
        </div>
      </Card>

      {/* DAILY CODE */}
      {dailyCode.length > 0 && (
        <Card padding={28} style={{ marginBottom: 20 }}>
          <Eyebrow>III · The Daily Code</Eyebrow>
          <Lead>Non-negotiable. Operated, not negotiated.</Lead>
          <div style={{ marginTop: 18 }}>
            {dailyCode.map((item, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 0', borderBottom: i < dailyCode.length - 1 ? `1px solid ${LINE}` : 'none',
              }}>
                <button onClick={() => toggleCode(i)}
                  style={{
                    width: 22, height: 22, flexShrink: 0,
                    border: `1.5px solid ${codeStatus[i] ? GOLD : LINE_BRIGHT}`,
                    background: codeStatus[i] ? GOLD : 'transparent',
                    cursor: 'pointer', position: 'relative', padding: 0,
                  }}>
                  {codeStatus[i] && (
                    <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -55%)', color: NAVY, fontSize: 14, fontWeight: 700 }}>✓</span>
                  )}
                </button>
                <span style={{
                  flex: 1, fontFamily: SERIF, fontSize: 16,
                  color: codeStatus[i] ? GREY_2 : IVORY_DIM,
                  textDecoration: codeStatus[i] ? 'line-through' : 'none',
                }}>{item}</span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* REFLECTION */}
      <Card padding={28} style={{ marginBottom: 24 }}>
        <Eyebrow>IV · The Closing Reflection</Eyebrow>
        <Lead>What the architecture deposited today. What the operator observed.</Lead>
        <div style={{ marginTop: 16 }}>
          <TextArea value={reflection} onChange={setReflection} placeholder="The day was…" rows={4} />
          <div style={{ marginTop: 14 }}>
            <Btn kind="ghost" size="md" onClick={saveReflection}>Save reflection</Btn>
          </div>
        </div>
      </Card>

      <PullQuote>
        The architecture is built daily. The compounding is built across years. The work today is the architecture itself, made operational, made permanent, made yours.
      </PullQuote>
    </div>
  );
};

// =============================================================================
// REFRAME — Claude-powered architectural reframe engine
// =============================================================================

const Reframe = () => {
  const [view, setView] = useState('list');
  const [reframes, setReframes] = useState([]);
  const [capture, setCapture] = useState('');
  const [analysis, setAnalysis] = useState(null);
  const [editedReframe, setEditedReframe] = useState('');
  const [error, setError] = useState(null);
  const [editingReframe, setEditingReframe] = useState(false);

  useEffect(() => { (async () => {
    const all = await storage.get('winners-code:reframes', []);
    setReframes(Array.isArray(all) ? all : []);
  })(); }, []);

  const startCapture = () => {
    setCapture(''); setAnalysis(null); setError(null); setEditedReframe('');
    setView('capture');
  };

  const analyzeCapture = async () => {
    if (!capture.trim()) return;
    setView('analyzing');
    setError(null);
    try {
      const text = await callClaude(
        `The operator has captured the following losing-mind thought:\n\n"${capture.trim()}"\n\nProduce the four-part architectural analysis as JSON.`,
        SASCHA_SYSTEM_PROMPT,
        1500,
      );
      const parsed = parseJSON(text);
      if (!parsed || !parsed.identity_firing || !parsed.sovereign_reframe) {
        throw new Error('The architectural intelligence returned an unexpected response. Try again.');
      }
      setAnalysis(parsed);
      setEditedReframe(parsed.sovereign_reframe);
      setView('present');
      haptic([10, 50, 10]);
    } catch (err) {
      setError(err.message || 'The architectural intelligence is momentarily unreachable. Try again.');
      setView('capture');
    }
  };

  const regenerate = async () => {
    setView('analyzing');
    try {
      const text = await callClaude(
        `The operator has captured the following losing-mind thought:\n\n"${capture.trim()}"\n\nProduce the four-part architectural analysis as JSON. Use different language and architectural angles than a typical first response — bring fresh precision.`,
        SASCHA_SYSTEM_PROMPT,
        1500,
      );
      const parsed = parseJSON(text);
      if (!parsed || !parsed.sovereign_reframe) throw new Error('Unexpected response.');
      setAnalysis(parsed);
      setEditedReframe(parsed.sovereign_reframe);
      setView('present');
    } catch (err) {
      setError(err.message);
      setView('present');
    }
  };

  const deposit = async () => {
    const entry = {
      id: Date.now(),
      timestamp: new Date().toISOString(),
      capture: capture.trim(),
      identityFiring: analysis?.identity_firing || '',
      architectureBuilt: analysis?.architecture_built || '',
      sovereignReframe: editedReframe.trim(),
      depositNote: analysis?.deposit_note || '',
    };
    const updated = [entry, ...reframes];
    setReframes(updated);
    await storage.set('winners-code:reframes', updated);
    haptic([20, 30, 20]);
    setView('deposited');
    setTimeout(() => setView('list'), 2400);
  };

  if (view === 'list') {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>The Reframe Engine</Eyebrow>
        <Heading size={42} italic>From storm, to sovereign.</Heading>
        <Lead>Capture a losing-mind thought. The architectural intelligence — calibrated to the Winner's Code framework and Sascha's voice — produces the architectural analysis. The operator authors the deposit.</Lead>
        <div style={{ marginTop: 28 }}>
          <Btn kind="primary" size="lg" onClick={startCapture} full>Begin a reframe</Btn>
        </div>

        {reframes.length > 0 && (
          <div style={{ marginTop: 48 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
              <Eyebrow>The Compounding Ledger</Eyebrow>
              <span style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GOLD_BRIGHT, fontWeight: 600 }}>
                {reframes.length} {reframes.length === 1 ? 'DEPOSIT' : 'DEPOSITS'}
              </span>
            </div>
            <div>
              {reframes.slice(0, 30).map((r) => (
                <Card key={r.id} padding={22} style={{ marginBottom: 14 }}>
                  <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600, marginBottom: 10 }}>
                    {fmtDate(r.timestamp)} · {fmtTime(r.timestamp)}
                  </div>
                  <div style={{ fontFamily: SERIF, fontSize: 14, color: GREY_1, marginBottom: 8, fontStyle: 'italic' }}>
                    Captured: <span style={{ color: IVORY_DIM }}>"{r.capture?.slice(0, 100)}{r.capture?.length > 100 ? '…' : ''}"</span>
                  </div>
                  {r.identityFiring && (
                    <div style={{ fontFamily: SERIF, fontSize: 13, color: GOLD_DEEP, marginBottom: 10, fontStyle: 'italic' }}>
                      Identity firing: {r.identityFiring}
                    </div>
                  )}
                  <div style={{
                    fontFamily: SERIF, fontSize: 16, color: GOLD_BRIGHT,
                    fontStyle: 'italic', lineHeight: 1.55, marginTop: 10,
                    paddingLeft: 16, borderLeft: `2px solid ${GOLD}`,
                  }}>
                    {r.sovereignReframe}
                  </div>
                </Card>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  if (view === 'capture') {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>Step I · Capture</Eyebrow>
        <Heading size={32}>Name the losing-mind thought.</Heading>
        <div style={{ marginTop: 14, marginBottom: 28 }}>
          <Prose>Without editing. Without softening. Word for word, the thought as it arrived. Specificity is sovereignty.</Prose>
        </div>
        <TextArea value={capture} onChange={setCapture} placeholder="The thought is…" rows={6} />
        {error && (
          <div style={{
            marginTop: 18, padding: '14px 18px',
            background: 'rgba(216, 138, 138, 0.06)',
            borderLeft: `2px solid ${RED_SOFT}`,
            fontFamily: SERIF, fontSize: 14, color: IVORY_DIM, lineHeight: 1.5,
          }}>{error}</div>
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, gap: 12 }}>
          <Btn kind="quiet" size="md" onClick={() => setView('list')}>Cancel</Btn>
          <Btn kind="primary" size="md" onClick={analyzeCapture} disabled={!capture.trim()}>
            Run architectural analysis →
          </Btn>
        </div>
      </div>
    );
  }

  if (view === 'analyzing') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 80, textAlign: 'center', minHeight: '60vh' }}>
        <Eyebrow>Architectural Analysis</Eyebrow>
        <Heading size={28} italic>The intelligence is reading.</Heading>
        <div style={{ marginTop: 32 }}>
          <LoadingDots />
        </div>
        <div style={{ marginTop: 32, fontFamily: SERIF, fontSize: 15, color: GREY_2, fontStyle: 'italic', maxWidth: 400, margin: '32px auto 0' }}>
          Identifying which architecture is firing. Naming what it has built. Authoring the sovereign reframe in your voice.
        </div>
      </div>
    );
  }

  if (view === 'present' && analysis) {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>Architectural Analysis</Eyebrow>
        <Heading size={32} italic>The architecture, named.</Heading>
        <div style={{ marginTop: 16, marginBottom: 8 }}>
          <Prose>Read each section. Edit the reframe in your own words if a phrasing does not yet sit in your voice. Then deposit.</Prose>
        </div>

        <Card padding={22} style={{ marginTop: 24, marginBottom: 14, background: NAVY_3 }}>
          <Eyebrow color={GREY_2}>CAPTURED</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 16, color: IVORY_DIM, fontStyle: 'italic', marginTop: 6, lineHeight: 1.55 }}>
            "{capture}"
          </div>
        </Card>

        <Card padding={22} style={{ marginBottom: 14 }}>
          <Eyebrow>I · IDENTITY FIRING</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 17, color: IVORY_DIM, lineHeight: 1.55, marginTop: 8 }}>
            {analysis.identity_firing}
          </div>
        </Card>

        <Card padding={22} style={{ marginBottom: 14 }}>
          <Eyebrow>II · ARCHITECTURE BUILT</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 17, color: IVORY_DIM, lineHeight: 1.55, marginTop: 8 }}>
            {analysis.architecture_built}
          </div>
        </Card>

        <Card padding={22} style={{ marginBottom: 14, borderColor: LINE_BRIGHT }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
            <Eyebrow color={GOLD_BRIGHT}>III · SOVEREIGN REFRAME</Eyebrow>
            <button onClick={() => setEditingReframe(!editingReframe)}
              style={{
                background: 'transparent', border: 'none', color: GREY_1,
                fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', fontWeight: 600,
                cursor: 'pointer', padding: 0,
              }}>
              {editingReframe ? 'PREVIEW' : 'EDIT'}
            </button>
          </div>
          {editingReframe ? (
            <TextArea value={editedReframe} onChange={setEditedReframe} rows={6} style={{ marginTop: 8 }} />
          ) : (
            <div style={{
              fontFamily: SERIF, fontSize: 18, color: GOLD_BRIGHT,
              fontStyle: 'italic', lineHeight: 1.6, marginTop: 8,
              paddingLeft: 16, borderLeft: `2px solid ${GOLD}`,
            }}>
              {editedReframe}
            </div>
          )}
        </Card>

        {analysis.deposit_note && (
          <Card padding={22} style={{ marginBottom: 24, background: NAVY_3 }}>
            <Eyebrow color={GREY_2}>DEPOSIT NOTE</Eyebrow>
            <div style={{ fontFamily: SERIF, fontSize: 15, color: GREY_1, fontStyle: 'italic', marginTop: 6, lineHeight: 1.55 }}>
              {analysis.deposit_note}
            </div>
          </Card>
        )}

        {error && (
          <div style={{
            marginBottom: 18, padding: '14px 18px',
            background: 'rgba(216, 138, 138, 0.06)',
            borderLeft: `2px solid ${RED_SOFT}`,
            fontFamily: SERIF, fontSize: 14, color: IVORY_DIM,
          }}>{error}</div>
        )}

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn kind="quiet" size="md" onClick={() => setView('capture')}>← Edit capture</Btn>
          <Btn kind="ghost" size="md" onClick={regenerate}>Regenerate</Btn>
          <Btn kind="primary" size="md" onClick={deposit} disabled={!editedReframe.trim()}>
            Deposit reframe
          </Btn>
        </div>
      </div>
    );
  }

  if (view === 'deposited') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 80, textAlign: 'center' }}>
        <div style={{
          width: 60, height: 60, borderRadius: '50%', border: `1.5px solid ${GOLD}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: '0 auto 32px', color: GOLD, fontSize: 28,
        }}>✓</div>
        <Heading size={32} italic>Deposited.</Heading>
        <Lead>The architecture has been recorded. The ledger compounds.</Lead>
      </div>
    );
  }
  return null;
};

// =============================================================================
// DOCUMENTS — six foundational documents + audio + decade timeline
// =============================================================================

const DOCS = [
  { key: 'identity', num: 'I', name: 'Identity Statement', module: 'Module 4', desc: 'The signed declaration of the host identity from which every subsequent decision is operated. The foundation document.' },
  { key: 'standards', num: 'II', name: 'Standards Document', module: 'Module 5', desc: 'The non-negotiable standards across all five life domains. Recited weekly. Operational, not aspirational.' },
  { key: 'environment', num: 'III', name: 'Environmental Architecture', module: 'Module 6', desc: 'The five-axis re-engineering plan that makes the new identity inevitable rather than effortful.' },
  { key: 'daily-code', num: 'IV', name: 'The Daily Code', module: 'Module 7', desc: 'The non-negotiable rituals that operate the architecture every day, regardless of mood, weather, or circumstance.' },
  { key: 'sovereign', num: 'V', name: 'Inner Sovereign Authorization', module: 'Module 10', desc: 'The interior charter that ends decision fatigue and authorizes the operator from a seated, sovereign court.' },
  { key: 'decade', num: 'VI', name: 'Decade Architecture', module: 'Module 11', desc: 'The ten-year map that calibrates every present decision to a deliberately engineered horizon. Includes quarter commitments.' },
];

const Documents = () => {
  const [activeDoc, setActiveDoc] = useState(null);
  const [docs, setDocs] = useState({});

  const refresh = async () => {
    const loaded = {};
    for (const d of DOCS) loaded[d.key] = await storage.get(`winners-code:doc:${d.key}`);
    setDocs(loaded);
  };

  useEffect(() => { refresh(); }, []);

  if (!activeDoc) {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>The Six Documents</Eyebrow>
        <Heading size={42} italic>The architecture, written.</Heading>
        <Lead>The six foundational documents the practitioner authors across the course. They live here. They are reread on cue. They are versioned. They are the architecture itself, made externally permanent.</Lead>

        <div style={{ marginTop: 32 }}>
          {DOCS.map((d) => {
            const data = docs[d.key];
            const exists = data && (
              d.key === 'daily-code' ? (data.items || []).length > 0 :
              d.key === 'decade' ? data.text || (data.quarter?.commitments?.length > 0) :
              data.text
            );
            return (
              <Card key={d.key} padding={24} style={{ marginBottom: 14, borderColor: exists ? LINE_BRIGHT : LINE }}
                onClick={() => setActiveDoc(d)}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                  <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GOLD, fontWeight: 700 }}>
                    DOC. {d.num}
                  </div>
                  {exists && (
                    <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GOLD_BRIGHT, fontWeight: 600 }}>
                      ✓ AUTHORED
                    </div>
                  )}
                </div>
                <div style={{ fontFamily: SERIF, fontSize: 22, fontStyle: 'italic', color: IVORY, marginBottom: 8 }}>
                  {d.name}
                </div>
                <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 500, marginBottom: 12 }}>
                  {d.module}
                </div>
                <div style={{ fontFamily: SERIF, fontSize: 14, lineHeight: 1.5, color: GREY_1 }}>
                  {d.desc}
                </div>
              </Card>
            );
          })}
        </div>
      </div>
    );
  }

  if (activeDoc.key === 'identity') {
    return <IdentityDocument doc={docs.identity} onBack={() => setActiveDoc(null)} onSave={refresh} />;
  }
  if (activeDoc.key === 'daily-code') {
    return <DailyCodeDocument doc={docs['daily-code']} onBack={() => setActiveDoc(null)} onSave={refresh} />;
  }
  if (activeDoc.key === 'decade') {
    return <DecadeDocument doc={docs.decade} onBack={() => setActiveDoc(null)} onSave={refresh} />;
  }
  return <TextDocument key={activeDoc.key} meta={activeDoc} doc={docs[activeDoc.key]} onBack={() => setActiveDoc(null)} onSave={refresh} />;
};

const TextDocument = ({ meta, doc, onBack, onSave }) => {
  const [text, setText] = useState(doc?.text || '');
  const save = async () => {
    const payload = { text, updated: Date.now(), version: (doc?.version || 0) + 1, signed: text.trim().length > 0 };
    await storage.set(`winners-code:doc:${meta.key}`, payload);
    haptic(20);
    onSave(); onBack();
  };
  return (
    <div style={{ paddingBottom: 100 }}>
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', color: GREY_1,
        fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', fontWeight: 600,
        cursor: 'pointer', marginBottom: 28, padding: 0, textTransform: 'uppercase',
      }}>← All documents</button>
      <Eyebrow>Doc. {meta.num} · {meta.module}</Eyebrow>
      <Heading size={36} italic>{meta.name}</Heading>
      <div style={{ marginTop: 12, marginBottom: 28 }}>
        <Prose>{meta.desc}</Prose>
      </div>
      <TextArea value={text} onChange={setText}
        placeholder={`Author the ${meta.name.toLowerCase()}…`} rows={14} />
      <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
        <Btn kind="primary" size="md" onClick={save}>{doc?.signed ? 'Update document' : 'Sign & save'}</Btn>
        <Btn kind="quiet" size="md" onClick={onBack}>Cancel</Btn>
      </div>
      {doc?.version > 0 && (
        <div style={{ marginTop: 24, fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 500 }}>
          VERSION {doc.version} · UPDATED {fmtDate(doc.updated)}
        </div>
      )}
    </div>
  );
};

const IdentityDocument = ({ doc, onBack, onSave }) => {
  const [text, setText] = useState(doc?.text || '');
  const [audio, setAudio] = useState(doc?.audio || null);
  const recorder = useAudioRecorder();
  const audioRef = useRef(null);

  const save = async () => {
    const payload = {
      text, audio,
      updated: Date.now(),
      version: (doc?.version || 0) + 1,
      signed: text.trim().length > 0,
    };
    await storage.set('winners-code:doc:identity', payload);
    haptic(20);
    onSave(); onBack();
  };

  const saveRecording = async () => {
    if (!recorder.audioBlob) return;
    try {
      const dataUrl = await blobToBase64(recorder.audioBlob);
      const audioPayload = { data: dataUrl, recordedAt: new Date().toISOString(), durationSec: recorder.duration };
      setAudio(audioPayload);
      recorder.reset();
    } catch (e) {
      alert('Could not save recording.');
    }
  };

  return (
    <div style={{ paddingBottom: 100 }}>
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', color: GREY_1,
        fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', fontWeight: 600,
        cursor: 'pointer', marginBottom: 28, padding: 0, textTransform: 'uppercase',
      }}>← All documents</button>
      <Eyebrow>Doc. I · Module 4</Eyebrow>
      <Heading size={36} italic>Identity Statement</Heading>
      <div style={{ marginTop: 12, marginBottom: 28 }}>
        <Prose>The signed declaration of the host identity from which every subsequent decision is operated. The foundation document.</Prose>
      </div>
      <TextArea value={text} onChange={setText} placeholder="I am…" rows={12} />

      <div style={{ marginTop: 32 }}>
        <Eyebrow>The Operator's Own Voice</Eyebrow>
        <Prose>The architecture installs deeper through the operator's own voice than through the eye alone. Record the Identity Statement, then play it back at the morning cue or whenever the architecture requires reseating.</Prose>

        {audio ? (
          <Card padding={22} style={{ marginTop: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <button onClick={() => audioRef.current?.play()}
                style={{
                  width: 48, height: 48, borderRadius: '50%',
                  background: GOLD, border: 'none', cursor: 'pointer',
                  color: NAVY, fontSize: 16, paddingLeft: 4,
                }}>▶</button>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: SERIF, fontSize: 16, color: IVORY_DIM, fontStyle: 'italic' }}>
                  Recorded {fmtDate(audio.recordedAt)} · {audio.durationSec}s
                </div>
              </div>
              <button onClick={() => setAudio(null)}
                style={{
                  background: 'transparent', border: `1px solid ${LINE}`,
                  color: GREY_1, fontFamily: DISPLAY, fontSize: 9,
                  letterSpacing: '0.22em', padding: '8px 14px', cursor: 'pointer', fontWeight: 600,
                }}>RE-RECORD</button>
              <audio ref={audioRef} src={audio.data} preload="metadata" />
            </div>
          </Card>
        ) : recorder.audioBlob ? (
          <Card padding={22} style={{ marginTop: 14 }}>
            <Eyebrow>RECORDED · {recorder.duration}s</Eyebrow>
            <audio src={URL.createObjectURL(recorder.audioBlob)} controls
              style={{ width: '100%', marginTop: 12, filter: 'invert(0.85) hue-rotate(180deg)' }} />
            <div style={{ marginTop: 14, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Btn kind="primary" size="sm" onClick={saveRecording}>Save recording</Btn>
              <Btn kind="quiet" size="sm" onClick={recorder.reset}>Re-record</Btn>
            </div>
          </Card>
        ) : recorder.recording ? (
          <Card padding={22} style={{ marginTop: 14, borderColor: GOLD }}>
            <div style={{ textAlign: 'center', padding: '12px 0' }}>
              <div style={{
                width: 80, height: 80, borderRadius: '50%',
                background: 'rgba(201, 168, 76, 0.1)',
                border: `2px solid ${GOLD}`,
                margin: '0 auto 18px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                animation: 'wc-pulse-rec 1.6s infinite ease-in-out',
              }}>
                <div style={{ width: 14, height: 14, background: GOLD, borderRadius: '50%' }} />
              </div>
              <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.32em', color: GOLD, fontWeight: 700 }}>
                RECORDING · {recorder.duration}s
              </div>
              <div style={{ marginTop: 18 }}>
                <Btn kind="primary" size="md" onClick={recorder.stop}>Stop recording</Btn>
              </div>
            </div>
          </Card>
        ) : (
          <div style={{ marginTop: 14 }}>
            <Btn kind="ghost" size="md" onClick={recorder.start} disabled={!text.trim()}>
              {!text.trim() ? 'Author the statement first' : 'Begin recording'}
            </Btn>
          </div>
        )}
      </div>

      <div style={{ marginTop: 36, display: 'flex', gap: 12 }}>
        <Btn kind="primary" size="md" onClick={save}>{doc?.signed ? 'Update document' : 'Sign & save'}</Btn>
        <Btn kind="quiet" size="md" onClick={onBack}>Cancel</Btn>
      </div>
    </div>
  );
};

const DailyCodeDocument = ({ doc, onBack, onSave }) => {
  const [items, setItems] = useState(doc?.items || ['', '', '']);

  const save = async () => {
    const cleaned = items.filter(x => x.trim());
    const payload = { items: cleaned, updated: Date.now(), version: (doc?.version || 0) + 1 };
    await storage.set('winners-code:doc:daily-code', payload);
    haptic(20);
    onSave(); onBack();
  };

  return (
    <div style={{ paddingBottom: 100 }}>
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', color: GREY_1,
        fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', fontWeight: 600,
        cursor: 'pointer', marginBottom: 28, padding: 0, textTransform: 'uppercase',
      }}>← All documents</button>
      <Eyebrow>Doc. IV · Module 7</Eyebrow>
      <Heading size={36} italic>The Daily Code</Heading>
      <div style={{ marginTop: 12, marginBottom: 28 }}>
        <Prose>The non-negotiable rituals that operate the architecture every day, regardless of mood, weather, or circumstance. Three to five elements. The shorter the code, the more reliably it operates.</Prose>
      </div>

      <div style={{ marginTop: 18 }}>
        {items.map((item, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 10, alignItems: 'center' }}>
            <span style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GOLD, fontWeight: 700, width: 24 }}>
              {String(i + 1).padStart(2, '0')}
            </span>
            <Input value={item}
              onChange={(v) => { const next = [...items]; next[i] = v; setItems(next); }}
              placeholder={`Element ${i + 1}…`} />
            {items.length > 1 && (
              <button onClick={() => setItems(items.filter((_, idx) => idx !== i))}
                style={{ background: 'transparent', border: 'none', color: GREY_2, cursor: 'pointer', fontSize: 18, padding: 8 }}>×</button>
            )}
          </div>
        ))}
        {items.length < 7 && (
          <Btn kind="ghost" size="sm" onClick={() => setItems([...items, ''])}>+ Add element</Btn>
        )}
      </div>

      <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
        <Btn kind="primary" size="md" onClick={save}>Update document</Btn>
        <Btn kind="quiet" size="md" onClick={onBack}>Cancel</Btn>
      </div>
    </div>
  );
};

const DecadeDocument = ({ doc, onBack, onSave }) => {
  const [text, setText] = useState(doc?.text || '');
  const [horizonYears, setHorizonYears] = useState(doc?.horizonYears || 10);
  const [milestones, setMilestones] = useState(doc?.milestones || [
    { year: 1, label: '' }, { year: 3, label: '' }, { year: 5, label: '' }, { year: 10, label: '' },
  ]);
  const [quarterCommitments, setQuarterCommitments] = useState(doc?.quarter?.commitments || ['', '', '']);

  const save = async () => {
    const payload = {
      text, horizonYears,
      milestones: milestones.filter(m => m.label.trim()),
      quarter: {
        commitments: quarterCommitments.filter(c => c.trim()),
        startedAt: doc?.quarter?.startedAt || startOfQuarter().toISOString(),
        label: quarterLabel(),
      },
      updated: Date.now(),
      version: (doc?.version || 0) + 1,
      signed: text.trim().length > 0,
    };
    await storage.set('winners-code:doc:decade', payload);
    haptic(20);
    onSave(); onBack();
  };

  return (
    <div style={{ paddingBottom: 100 }}>
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', color: GREY_1,
        fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', fontWeight: 600,
        cursor: 'pointer', marginBottom: 28, padding: 0, textTransform: 'uppercase',
      }}>← All documents</button>
      <Eyebrow>Doc. VI · Module 11</Eyebrow>
      <Heading size={36} italic>Decade Architecture</Heading>
      <div style={{ marginTop: 12, marginBottom: 28 }}>
        <Prose>The ten-year map that calibrates every present decision to a deliberately engineered horizon. Plus active quarter commitments, derived from the decade and surfaced daily in the rail.</Prose>
      </div>

      <Eyebrow>THE ARCHITECTURE</Eyebrow>
      <TextArea value={text} onChange={setText} placeholder="The ten-year arc is…" rows={8} />

      <div style={{ marginTop: 32 }}>
        <Eyebrow>MILESTONES</Eyebrow>
        <Prose>Four anchored markers across the horizon. The architecture pulls from these.</Prose>
        <div style={{ marginTop: 14 }}>
          {milestones.map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 10, alignItems: 'center' }}>
              <input type="number" value={m.year} min={1} max={20}
                onChange={(e) => {
                  const next = [...milestones]; next[i] = { ...next[i], year: parseInt(e.target.value || 1) }; setMilestones(next);
                }}
                style={{
                  width: 70, background: NAVY_3, border: `1px solid ${LINE}`, color: GOLD,
                  fontFamily: DISPLAY, fontSize: 16, padding: '12px 14px', outline: 'none',
                  textAlign: 'center', fontWeight: 600,
                }} />
              <span style={{ fontFamily: DISPLAY, fontSize: 10, color: GREY_2, fontWeight: 600, letterSpacing: '0.22em' }}>YR</span>
              <Input value={m.label}
                onChange={(v) => { const next = [...milestones]; next[i] = { ...next[i], label: v }; setMilestones(next); }}
                placeholder="At this year, the architecture has produced…" />
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 36 }}>
        <Eyebrow>{quarterLabel()} · ACTIVE COMMITMENTS</Eyebrow>
        <Prose>Three to five concrete commitments for the current ninety-day window, derived directly from the decade above. These surface in the daily rail.</Prose>
        <div style={{ marginTop: 14 }}>
          {quarterCommitments.map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 10, alignItems: 'center' }}>
              <span style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GOLD, fontWeight: 700, width: 24 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <Input value={c}
                onChange={(v) => { const next = [...quarterCommitments]; next[i] = v; setQuarterCommitments(next); }}
                placeholder={`Commitment ${i + 1}…`} />
              {quarterCommitments.length > 1 && (
                <button onClick={() => setQuarterCommitments(quarterCommitments.filter((_, idx) => idx !== i))}
                  style={{ background: 'transparent', border: 'none', color: GREY_2, cursor: 'pointer', fontSize: 18, padding: 8 }}>×</button>
              )}
            </div>
          ))}
          {quarterCommitments.length < 5 && (
            <Btn kind="ghost" size="sm" onClick={() => setQuarterCommitments([...quarterCommitments, ''])}>+ Add commitment</Btn>
          )}
        </div>
      </div>

      <div style={{ marginTop: 36, display: 'flex', gap: 12 }}>
        <Btn kind="primary" size="md" onClick={save}>{doc?.signed ? 'Update document' : 'Sign & save'}</Btn>
        <Btn kind="quiet" size="md" onClick={onBack}>Cancel</Btn>
      </div>
    </div>
  );
};

// =============================================================================
// COMPOUND — multi-horizon view: 30-day · 12-week · quarter · year + decade
// =============================================================================

const Compound = () => {
  const [horizon, setHorizon] = useState('12week');
  const [stats, setStats] = useState(null);
  const [decadeDoc, setDecadeDoc] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => { (async () => {
    const reframes = await storage.get('winners-code:reframes', []);
    const decade = await storage.get('winners-code:doc:decade');
    setDecadeDoc(decade);

    const horizons = { '30day': 30, '12week': 84, 'quarter': 90, 'year': 365 };
    const days = {};
    for (const [k, n] of Object.entries(horizons)) {
      const arr = [];
      let active = 0, codeRatioSum = 0, codeRatioN = 0;
      for (let i = 0; i < n; i++) {
        const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
        const isActive = e && (e.hasReadIdentity || (e.completedRail || []).some(x => x) || Object.values(e.codeStatus || {}).some(x => x) || e.reflection);
        arr.unshift({ date: todayKey(-i), active: isActive });
        if (isActive) active++;
        if (e?.codeStatus) {
          const ks = Object.keys(e.codeStatus);
          if (ks.length > 0) {
            codeRatioSum += ks.filter(kk => e.codeStatus[kk]).length / ks.length;
            codeRatioN++;
          }
        }
      }
      days[k] = { arr, active, codeAvg: codeRatioN > 0 ? Math.round(100 * codeRatioSum / codeRatioN) : 0 };
    }

    let streak = 0, longestStreak = 0, currentStreak = 0;
    let streakEnded = false;
    for (let i = 0; i < 365; i++) {
      const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
      const active = e && (e.hasReadIdentity || (e.completedRail || []).some(x => x));
      if (active) {
        if (!streakEnded) streak++;
        currentStreak++;
        longestStreak = Math.max(longestStreak, currentStreak);
      } else {
        currentStreak = 0;
        if (i > 0) streakEnded = true;
      }
    }

    setStats({
      streak, longestStreak,
      reframes: Array.isArray(reframes) ? reframes.length : 0,
      reframesLast30: Array.isArray(reframes) ? reframes.filter(r => Date.now() - new Date(r.timestamp).getTime() < 30 * 86400000).length : 0,
      days,
    });
    setLoading(false);
  })(); }, []);

  if (loading || !stats) {
    return (
      <div style={{ paddingTop: 80, textAlign: 'center', color: GREY_2, fontFamily: SERIF, fontStyle: 'italic' }}>
        Reading the ledger…
      </div>
    );
  }

  const horizonConfig = {
    '30day': { label: '30 DAYS', cols: 6, totalDays: 30 },
    '12week': { label: '12 WEEKS', cols: 12, totalDays: 84 },
    'quarter': { label: '90 DAYS', cols: 10, totalDays: 90 },
    'year': { label: 'YEAR', cols: 31, totalDays: 365 },
  };
  const cur = horizonConfig[horizon];
  const curDays = stats.days[horizon];

  const quarterStart = decadeDoc?.quarter?.startedAt ? new Date(decadeDoc.quarter.startedAt) : startOfQuarter();
  const daysIntoQuarter = Math.max(0, Math.floor((Date.now() - quarterStart.getTime()) / 86400000));
  const quarterProgress = Math.min(100, Math.round(100 * daysIntoQuarter / 90));

  return (
    <div style={{ paddingBottom: 100 }}>
      <Eyebrow>The Compound View</Eyebrow>
      <Heading size={42} italic>The architecture, accumulating.</Heading>
      <Lead>Compounding is undramatic. Compounding is decisive. The architecture-grade operator deposits in days, observes in weeks, compounds in years.</Lead>

      <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Card padding={22}>
          <Eyebrow>CURRENT STREAK</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 400, color: GOLD_BRIGHT, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {stats.streak}
            <span style={{ fontSize: 18, color: GREY_1, marginLeft: 6 }}>{stats.streak === 1 ? 'day' : 'days'}</span>
          </div>
        </Card>
        <Card padding={22}>
          <Eyebrow>LONGEST STREAK</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 400, color: IVORY, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {stats.longestStreak}
            <span style={{ fontSize: 18, color: GREY_1, marginLeft: 6 }}>{stats.longestStreak === 1 ? 'day' : 'days'}</span>
          </div>
        </Card>
        <Card padding={22}>
          <Eyebrow>REFRAMES · 30 DAYS</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 400, color: GOLD_BRIGHT, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {stats.reframesLast30}
          </div>
        </Card>
        <Card padding={22}>
          <Eyebrow>TOTAL DEPOSITS</Eyebrow>
          <div style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 400, color: IVORY, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {stats.reframes}
          </div>
        </Card>
      </div>

      <div style={{ marginTop: 40, marginBottom: 18 }}>
        <Eyebrow>HORIZON</Eyebrow>
        <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
          {Object.entries(horizonConfig).map(([k, v]) => (
            <button key={k} onClick={() => setHorizon(k)}
              style={{
                padding: '10px 18px',
                background: horizon === k ? NAVY_4 : 'transparent',
                border: `1px solid ${horizon === k ? GOLD : LINE}`,
                color: horizon === k ? GOLD : GREY_1,
                fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em',
                fontWeight: 600, cursor: 'pointer',
                transition: 'all 0.3s ease',
              }}>
              {v.label}
            </button>
          ))}
        </div>
      </div>

      <Card padding={20}>
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${cur.cols}, 1fr)`, gap: horizon === 'year' ? 2 : 5,
        }}>
          {curDays.arr.map((d, i) => (
            <div key={i} title={d.date} style={{
              aspectRatio: '1 / 1',
              background: d.active ? GOLD : NAVY_3,
              border: `1px solid ${d.active ? GOLD_DEEP : LINE_FAINT}`,
              opacity: d.active ? 0.95 : 0.45,
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>
          <span>{cur.totalDays} DAYS AGO</span>
          <span>{curDays.active} ACTIVE</span>
          <span>TODAY</span>
        </div>
      </Card>

      {decadeDoc?.quarter?.commitments?.length > 0 && (
        <Card padding={28} style={{ marginTop: 32 }}>
          <Eyebrow>{quarterLabel()} · {daysIntoQuarter} OF 90 DAYS</Eyebrow>
          <Heading size={26} italic>The quarter, in motion.</Heading>
          <div style={{ marginTop: 20, height: 4, background: NAVY_3, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              width: `${quarterProgress}%`, height: '100%',
              background: `linear-gradient(90deg, ${GOLD_DEEP}, ${GOLD_BRIGHT})`,
            }} />
          </div>
          <div style={{ marginTop: 24 }}>
            {decadeDoc.quarter.commitments.map((c, i) => (
              <div key={i} style={{
                fontFamily: SERIF, fontSize: 16, color: IVORY_DIM,
                padding: '10px 0', display: 'flex', gap: 12, lineHeight: 1.5,
                borderBottom: i < decadeDoc.quarter.commitments.length - 1 ? `1px solid ${LINE}` : 'none',
              }}>
                <span style={{ color: GOLD, fontFamily: DISPLAY, fontSize: 10, fontWeight: 700, minWidth: 18 }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span>{c}</span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {decadeDoc?.milestones?.length > 0 && (
        <Card padding={28} style={{ marginTop: 24 }}>
          <Eyebrow>THE DECADE TIMELINE</Eyebrow>
          <Heading size={26} italic>Where today sits in the ten-year arc.</Heading>
          <div style={{ marginTop: 28, position: 'relative', paddingTop: 30, paddingBottom: 80 }}>
            <div style={{
              position: 'absolute', left: 0, right: 0, top: 30,
              height: 2, background: `linear-gradient(90deg, ${GOLD}, ${LINE})`,
            }} />
            <div style={{ position: 'absolute', left: '0%', top: 22, transform: 'translateX(-50%)' }}>
              <div style={{ width: 14, height: 14, background: GOLD_BRIGHT, border: `2px solid ${GOLD}`, borderRadius: '50%' }} />
              <div style={{
                fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em',
                color: GOLD_BRIGHT, fontWeight: 700, marginTop: 12, whiteSpace: 'nowrap',
              }}>TODAY</div>
            </div>
            {decadeDoc.milestones.map((m, i) => {
              const pct = (m.year / (decadeDoc.horizonYears || 10)) * 100;
              return (
                <div key={i} style={{
                  position: 'absolute', left: `${Math.min(96, pct)}%`, top: 22,
                  transform: 'translateX(-50%)', maxWidth: 130, textAlign: 'center',
                }}>
                  <div style={{ width: 12, height: 12, background: NAVY, border: `2px solid ${GOLD}`, borderRadius: '50%', margin: '0 auto' }} />
                  <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GOLD, fontWeight: 700, marginTop: 12 }}>
                    YEAR {m.year}
                  </div>
                  <div style={{ fontFamily: SERIF, fontSize: 12, color: IVORY_DIM, fontStyle: 'italic', marginTop: 4, lineHeight: 1.3 }}>
                    {m.label}
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      )}

      {curDays.codeAvg > 0 && (
        <Card padding={28} style={{ marginTop: 32 }}>
          <Eyebrow>DAILY CODE EXECUTION · {cur.label}</Eyebrow>
          <Heading size={28} italic>{curDays.codeAvg}% of code, on active days.</Heading>
          <Lead>Aim is not perfection. Aim is honest, repeated operation.</Lead>
          <div style={{ marginTop: 20, height: 8, background: NAVY_3, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              width: `${curDays.codeAvg}%`, height: '100%',
              background: `linear-gradient(90deg, ${GOLD_DEEP}, ${GOLD_BRIGHT})`,
              transition: 'width 1s ease',
            }} />
          </div>
        </Card>
      )}

      <div style={{ marginTop: 36 }}>
        <PullQuote>
          Breakthroughs are seductive but rarely durable. Compounding is undramatic but architecturally devastating. The graph is the architecture, recorded.
        </PullQuote>
      </div>
    </div>
  );
};

// =============================================================================
// SOVEREIGN — storm protocol with breathing + pattern recognition
// =============================================================================

const Sovereign = () => {
  const [stage, setStage] = useState('idle');
  const [breathPhase, setBreathPhase] = useState('inhale');
  const [breathCycle, setBreathCycle] = useState(0);
  const [trigger, setTrigger] = useState('');
  const [deferralHours, setDeferralHours] = useState(24);
  const [storms, setStorms] = useState([]);
  const [activeStorm, setActiveStorm] = useState(null);
  const [sovereignDoc, setSovereignDoc] = useState('');

  useEffect(() => { (async () => {
    const all = await storage.get('winners-code:storms', []);
    const arr = Array.isArray(all) ? all : [];
    setStorms(arr);
    const active = arr.find(s => s.status === 'deferred' && Date.now() < s.deferralEnd);
    setActiveStorm(active || null);
    const sd = await storage.get('winners-code:doc:sovereign');
    setSovereignDoc(sd?.text || '');
  })(); }, []);

  const patterns = useMemo(() => {
    if (storms.length < 3) return null;
    const closed = storms.filter(s => s.status === 'closed' && s.closedAt);
    const recoveryTimes = closed.map(s => new Date(s.closedAt).getTime() - new Date(s.timestamp).getTime());
    const avgRecovery = recoveryTimes.length > 0 ? recoveryTimes.reduce((a, b) => a + b, 0) / recoveryTimes.length : 0;
    const hourBuckets = {};
    storms.forEach(s => {
      const h = new Date(s.timestamp).getHours();
      const bucket = h < 6 ? 'night' : h < 12 ? 'morning' : h < 18 ? 'afternoon' : 'evening';
      hourBuckets[bucket] = (hourBuckets[bucket] || 0) + 1;
    });
    const peakBucket = Object.entries(hourBuckets).sort((a, b) => b[1] - a[1])[0];
    return { count: storms.length, avgRecovery, peakBucket, closed: closed.length };
  }, [storms]);

  useEffect(() => {
    if (stage !== 'breathe') return;
    const phases = [
      { name: 'inhale', duration: 4000 },
      { name: 'hold', duration: 7000 },
      { name: 'exhale', duration: 8000 },
    ];
    let phaseIdx = 0;
    setBreathPhase(phases[0].name);
    let timeout;
    const tick = () => {
      phaseIdx = (phaseIdx + 1) % phases.length;
      if (phaseIdx === 0) setBreathCycle(c => c + 1);
      setBreathPhase(phases[phaseIdx].name);
      timeout = setTimeout(tick, phases[phaseIdx].duration);
    };
    timeout = setTimeout(tick, phases[0].duration);
    return () => clearTimeout(timeout);
  }, [stage]);

  useEffect(() => {
    if (stage === 'breathe' && breathCycle >= 4) setStage('defer');
  }, [breathCycle, stage]);

  const beginStorm = () => { haptic([10, 30, 10]); setBreathCycle(0); setStage('recognize'); };

  const setDeferral = async () => {
    haptic([20, 40, 20]);
    const storm = {
      id: Date.now(), timestamp: new Date().toISOString(),
      trigger, deferralHours,
      deferralEnd: Date.now() + deferralHours * 3600 * 1000,
      status: 'deferred',
    };
    const updated = [storm, ...storms];
    setStorms(updated);
    await storage.set('winners-code:storms', updated);
    setActiveStorm(storm);
    setStage('settled');
  };

  const closeStorm = async (id, decision) => {
    haptic(15);
    const updated = storms.map(s => s.id === id ? { ...s, status: 'closed', decision, closedAt: new Date().toISOString() } : s);
    setStorms(updated);
    await storage.set('winners-code:storms', updated);
    setActiveStorm(null);
  };

  if (stage === 'idle') {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>The Sovereign Protocol</Eyebrow>
        <Heading size={42} italic>For when the storm arrives.</Heading>
        <Lead>Rejection. Criticism. Disappointment. Real or perceived. The storm fires fast and the architecture must hold faster. The protocol is pre-engineered. It runs in calm, even now, so that in fire it operates without deliberation.</Lead>

        {patterns && (
          <Card padding={22} style={{ marginTop: 28, background: NAVY_3 }}>
            <Eyebrow>YOUR PATTERN · {patterns.count} STORMS LOGGED</Eyebrow>
            <div style={{ fontFamily: SERIF, fontSize: 15, color: IVORY_DIM, marginTop: 8, lineHeight: 1.55 }}>
              Storms most frequently arrive in the <span style={{ color: GOLD_BRIGHT, fontStyle: 'italic' }}>{patterns.peakBucket?.[0]}</span>.
              {patterns.avgRecovery > 0 && (
                <> Average return-to-sovereign: <span style={{ color: GOLD_BRIGHT, fontStyle: 'italic' }}>{fmtDuration(patterns.avgRecovery)}</span>.</>
              )}
              {patterns.closed > 0 && <> {patterns.closed} of {patterns.count} survived. The architecture is recorded.</>}
            </div>
          </Card>
        )}

        {activeStorm && (
          <div style={{ marginTop: 24, padding: 24, background: NAVY_2, border: `2px solid ${GOLD}` }}>
            <Eyebrow color={GOLD_BRIGHT}>STORM IN DEFERRAL</Eyebrow>
            <div style={{ fontFamily: SERIF, fontSize: 18, color: IVORY, marginTop: 8, fontStyle: 'italic' }}>
              "{activeStorm.trigger?.slice(0, 120)}{activeStorm.trigger?.length > 120 ? '…' : ''}"
            </div>
            <div style={{ marginTop: 16, fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GOLD, fontWeight: 600 }}>
              RETURN TO SOVEREIGN: {fmtDate(new Date(activeStorm.deferralEnd).toISOString())} · {fmtTime(new Date(activeStorm.deferralEnd).toISOString())}
            </div>
            {Date.now() >= activeStorm.deferralEnd && (
              <div style={{ marginTop: 18 }}>
                <Lead>The deferral window has closed. The sovereign has had time to seat. You may now author the response from the seated court.</Lead>
                <div style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
                  <Btn kind="primary" size="md" onClick={() => closeStorm(activeStorm.id, 'sovereign-response')}>Sovereign response authored</Btn>
                  <Btn kind="ghost" size="md" onClick={() => closeStorm(activeStorm.id, 'no-action')}>No action needed</Btn>
                </div>
              </div>
            )}
          </div>
        )}

        <div style={{ marginTop: 32 }}>
          <Btn kind="primary" size="lg" onClick={beginStorm} full>The storm has arrived</Btn>
        </div>

        {storms.length > 0 && (
          <div style={{ marginTop: 48 }}>
            <Eyebrow>Storm History</Eyebrow>
            <Lead>Every storm survived is architecture, recorded.</Lead>
            <div style={{ marginTop: 18 }}>
              {storms.slice(0, 12).map(s => (
                <Card key={s.id} padding={20} style={{ marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                    <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>
                      {fmtDate(s.timestamp)} · {fmtTime(s.timestamp)}
                    </div>
                    <div style={{
                      fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', fontWeight: 600,
                      color: s.status === 'closed' ? GOLD : GOLD_BRIGHT,
                    }}>
                      {s.status === 'closed' ? '✓ HELD' : 'IN DEFERRAL'}
                    </div>
                  </div>
                  <div style={{ fontFamily: SERIF, fontSize: 15, fontStyle: 'italic', color: GREY_1 }}>
                    "{s.trigger?.slice(0, 140)}{s.trigger?.length > 140 ? '…' : ''}"
                  </div>
                  {s.closedAt && (
                    <div style={{ marginTop: 8, fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 500 }}>
                      RECOVERY: {fmtDuration(new Date(s.closedAt).getTime() - new Date(s.timestamp).getTime())}
                    </div>
                  )}
                </Card>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  }

  if (stage === 'recognize') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 16 }}>
        <Eyebrow color={GOLD_BRIGHT}>I · RECOGNITION</Eyebrow>
        <Heading size={36} italic>Name the trigger.</Heading>
        <div style={{ marginTop: 12, marginBottom: 24 }}>
          <Prose>The cascade has begun. Recognition is the first sovereign act. Name the event in writing. The narrative the brain is producing in this moment is the storm — not the truth. Both will become clear.</Prose>
        </div>
        <TextArea value={trigger} onChange={setTrigger} rows={5} placeholder="The trigger event was…" />
        <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
          <Btn kind="quiet" size="md" onClick={() => setStage('idle')}>Cancel</Btn>
          <Btn kind="primary" size="md" onClick={() => setStage('breathe')} disabled={!trigger.trim()}>Continue to body protocol →</Btn>
        </div>
      </div>
    );
  }

  if (stage === 'breathe') {
    const phaseConfig = {
      inhale: { label: 'BREATHE IN', duration: 4, color: GOLD_BRIGHT, scale: 1.6 },
      hold: { label: 'HOLD', duration: 7, color: GOLD, scale: 1.6 },
      exhale: { label: 'BREATHE OUT', duration: 8, color: GOLD_DEEP, scale: 0.8 },
    };
    const cur = phaseConfig[breathPhase];
    return (
      <div style={{ paddingBottom: 100, paddingTop: 24, textAlign: 'center' }}>
        <Eyebrow color={GOLD_BRIGHT}>II · BODY PROTOCOL</Eyebrow>
        <Heading size={32} italic>The body settles first.</Heading>
        <div style={{ marginTop: 12, marginBottom: 40 }}>
          <Prose>4-7-8 breathing. Four cycles. The cognition will follow.</Prose>
        </div>
        <div style={{
          width: 240, height: 240, margin: '0 auto', position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            position: 'absolute', width: 220, height: 220,
            borderRadius: '50%', border: `1px solid ${LINE}`, opacity: 0.4,
          }} />
          <div style={{
            width: 140, height: 140, borderRadius: '50%',
            border: `2px solid ${cur.color}`,
            background: `radial-gradient(circle, ${cur.color}22, transparent)`,
            transform: `scale(${cur.scale})`,
            transition: `transform ${cur.duration}s cubic-bezier(0.4, 0, 0.6, 1)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div>
              <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.32em', color: cur.color, fontWeight: 700 }}>
                {cur.label}
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: IVORY, marginTop: 8, fontStyle: 'italic' }}>
                {cur.duration}
              </div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 40, fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>
          CYCLE {breathCycle + 1} OF 4
        </div>
        <div style={{ marginTop: 32 }}>
          <Btn kind="quiet" size="sm" onClick={() => setStage('defer')}>Skip to deferral →</Btn>
        </div>
      </div>
    );
  }

  if (stage === 'defer') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 16 }}>
        <Eyebrow color={GOLD_BRIGHT}>III · THE DEFERRAL</Eyebrow>
        <Heading size={36} italic>No action, until the sovereign returns.</Heading>
        <div style={{ marginTop: 12, marginBottom: 28 }}>
          <Prose>Set the deferral window. No emails. No messages. No decisions on this matter. Other architecture continues. This trigger is held, deliberately, until the seated court can author the response.</Prose>
        </div>
        <Eyebrow>DEFERRAL WINDOW</Eyebrow>
        <div style={{ display: 'flex', gap: 10, marginTop: 12, marginBottom: 28, flexWrap: 'wrap' }}>
          {[24, 48, 72].map(h => (
            <button key={h} onClick={() => setDeferralHours(h)}
              style={{
                flex: 1, padding: '20px 16px',
                background: deferralHours === h ? NAVY_4 : NAVY_2,
                border: `1px solid ${deferralHours === h ? GOLD : LINE}`,
                color: deferralHours === h ? GOLD_BRIGHT : IVORY_DIM,
                fontFamily: SERIF, cursor: 'pointer',
                transition: 'all 0.3s ease',
              }}>
              <div style={{ fontSize: 32, lineHeight: 1 }}>{h}</div>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', marginTop: 6, fontWeight: 600 }}>HOURS</div>
            </button>
          ))}
        </div>

        {sovereignDoc && (
          <div style={{ marginBottom: 28, padding: 20, background: NAVY_3, borderLeft: `2px solid ${GOLD}` }}>
            <Eyebrow>FROM YOUR INNER SOVEREIGN AUTHORIZATION</Eyebrow>
            <div style={{ fontFamily: SERIF, fontSize: 16, fontStyle: 'italic', color: IVORY_DIM, lineHeight: 1.6, whiteSpace: 'pre-wrap', marginTop: 8 }}>
              {sovereignDoc.slice(0, 320)}{sovereignDoc.length > 320 ? '…' : ''}
            </div>
          </div>
        )}
        <Btn kind="primary" size="lg" onClick={setDeferral} full>Set deferral · Hold the architecture</Btn>
      </div>
    );
  }

  if (stage === 'settled') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 64, textAlign: 'center' }}>
        <div style={{
          width: 80, height: 80, margin: '0 auto 32px',
          borderRadius: '50%', border: `1.5px solid ${GOLD}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: GOLD, fontSize: 32,
        }}>✓</div>
        <Heading size={32} italic>The architecture holds.</Heading>
        <div style={{ marginTop: 20, marginBottom: 32 }}>
          <Lead>The trigger is named. The body has settled. The deferral is set. The sovereign court will reconvene in {deferralHours} hours.</Lead>
        </div>
        <PullQuote>
          The storm is real. The protocol holds. The sovereign returns.
        </PullQuote>
        <div style={{ marginTop: 32 }}>
          <Btn kind="ghost" size="md" onClick={() => setStage('idle')}>Return</Btn>
        </div>
      </div>
    );
  }
  return null;
};

// =============================================================================
// HYPERFOCUS — engineered session protocol with HONEST tracking
// =============================================================================

const Hyperfocus = () => {
  const [stage, setStage] = useState('idle');
  const [target, setTarget] = useState('');
  const [duration, setDuration] = useState(90);
  const [checks, setChecks] = useState({ env: false, body: false, cue: false, target: false });
  const [secondsLeft, setSecondsLeft] = useState(0);
  const [recoveryLeft, setRecoveryLeft] = useState(0);
  const [sessions, setSessions] = useState([]);
  const [output, setOutput] = useState('');
  const sessionStartRef = useRef(null);
  const honest = useHonestSession();

  useEffect(() => { (async () => {
    const all = await storage.get('winners-code:hyperfocus', []);
    setSessions(Array.isArray(all) ? all : []);
  })(); }, []);

  useEffect(() => {
    if (stage !== 'session' || secondsLeft <= 0) return;
    const t = setInterval(() => setSecondsLeft(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, [stage, secondsLeft]);

  useEffect(() => {
    if (stage === 'session' && secondsLeft === 0 && sessionStartRef.current) {
      setStage('recovery');
      setRecoveryLeft(20 * 60);
      haptic([20, 50, 20, 50, 20]);
    }
  }, [secondsLeft, stage]);

  useEffect(() => {
    if (stage !== 'recovery' || recoveryLeft <= 0) return;
    const t = setInterval(() => setRecoveryLeft(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, [stage, recoveryLeft]);

  const fmt = (s) => {
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    const sec = s % 60;
    return h > 0 ? `${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}` : `${m}:${String(sec).padStart(2,'0')}`;
  };

  const startSession = () => {
    sessionStartRef.current = Date.now();
    setSecondsLeft(duration * 60);
    setStage('session');
    honest.reset();
    haptic([10, 20, 10]);
  };

  const endEarly = () => {
    setStage('recovery');
    setRecoveryLeft(20 * 60);
  };

  const finishRecovery = () => setStage('log');

  const logSession = async () => {
    const elapsed = Date.now() - sessionStartRef.current;
    const elapsedMin = Math.floor(elapsed / 60000);
    const session = {
      id: Date.now(),
      timestamp: new Date(sessionStartRef.current).toISOString(),
      target, intendedDuration: duration, actualDuration: elapsedMin,
      tabSwitches: honest.tabSwitches, hiddenMs: honest.hiddenMs, output,
    };
    const updated = [session, ...sessions];
    setSessions(updated);
    await storage.set('winners-code:hyperfocus', updated);
    setStage('idle');
    setTarget(''); setOutput(''); setChecks({ env: false, body: false, cue: false, target: false });
  };

  const allChecked = Object.values(checks).every(Boolean);

  if (stage === 'idle') {
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>Hyperfocus Engineering</Eyebrow>
        <Heading size={42} italic>The compounding accelerator.</Heading>
        <Lead>Hyperfocus is engineered, not waited for. Conditions produce the state. The state produces the output. The architecture is the engineering of the conditions.</Lead>
        <div style={{ marginTop: 28 }}>
          <Btn kind="primary" size="lg" onClick={() => setStage('prep')} full>Engineer a session</Btn>
        </div>

        {sessions.length > 0 && (
          <div style={{ marginTop: 48 }}>
            <Eyebrow>Session Log</Eyebrow>
            <div style={{ marginTop: 16 }}>
              {sessions.slice(0, 12).map(s => {
                const focus = s.intendedDuration > 0 ? Math.max(0, 100 - Math.round(100 * (s.hiddenMs || 0) / (s.intendedDuration * 60000))) : 100;
                return (
                  <Card key={s.id} padding={20} style={{ marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                      <span style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>
                        {fmtDate(s.timestamp)} · {fmtTime(s.timestamp)}
                      </span>
                      <span style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GOLD, fontWeight: 700 }}>
                        {s.actualDuration || s.intendedDuration} MIN
                      </span>
                    </div>
                    <div style={{ fontFamily: SERIF, fontSize: 17, color: IVORY, fontStyle: 'italic', marginBottom: 6 }}>
                      {s.target}
                    </div>
                    {(s.tabSwitches !== undefined) && (
                      <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.18em', color: focus >= 90 ? GOLD : GREY_1, fontWeight: 600, marginTop: 8 }}>
                        FOCUS · {focus}% · {s.tabSwitches} TAB SWITCH{s.tabSwitches === 1 ? '' : 'ES'}
                      </div>
                    )}
                    {s.output && (
                      <div style={{ fontFamily: SERIF, fontSize: 14, color: GREY_1, lineHeight: 1.5, marginTop: 8 }}>
                        {s.output}
                      </div>
                    )}
                  </Card>
                );
              })}
            </div>
          </div>
        )}
      </div>
    );
  }

  if (stage === 'prep') {
    const checkItems = [
      { key: 'target', label: 'The target is named, drawn from the daily code.' },
      { key: 'env', label: 'Environment evacuated. Phone in another room. Notifications off. Door closed.' },
      { key: 'body', label: 'Body fueled. Water within reach. Recent movement settled the system.' },
      { key: 'cue', label: 'Entry ritual fired. The session has begun.' },
    ];
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>Pre-Session Engineering</Eyebrow>
        <Heading size={32} italic>The conditions, deliberately set.</Heading>
        <Lead>The entry threshold is the hardest. Cross it deliberately, with the conditions in place, and the brain enters the state.</Lead>

        <div style={{ marginTop: 28 }}>
          <Eyebrow>THE TARGET</Eyebrow>
          <Input value={target} onChange={setTarget} placeholder="The hyperfocus target is…" style={{ marginTop: 8, marginBottom: 24 }} />

          <Eyebrow>SESSION DURATION</Eyebrow>
          <div style={{ display: 'flex', gap: 8, marginTop: 8, marginBottom: 24, flexWrap: 'wrap' }}>
            {[60, 90, 120, 180].map(m => (
              <button key={m} onClick={() => setDuration(m)}
                style={{
                  flex: 1, padding: '14px 8px', minWidth: 70,
                  background: duration === m ? NAVY_4 : NAVY_2,
                  border: `1px solid ${duration === m ? GOLD : LINE}`,
                  color: duration === m ? GOLD_BRIGHT : IVORY_DIM,
                  fontFamily: SERIF, fontSize: 18, cursor: 'pointer',
                  transition: 'all 0.3s ease',
                }}>
                {m}<span style={{ fontSize: 10, fontFamily: DISPLAY, marginLeft: 4, letterSpacing: '0.16em' }}>MIN</span>
              </button>
            ))}
          </div>

          <Eyebrow>THE CHECKLIST</Eyebrow>
          <div style={{ marginTop: 12 }}>
            {checkItems.map(({ key, label }) => (
              <div key={key} onClick={() => { haptic(10); setChecks({ ...checks, [key]: !checks[key] }); }}
                style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start', padding: '14px 0',
                  borderBottom: `1px solid ${LINE}`, cursor: 'pointer',
                }}>
                <div style={{
                  width: 22, height: 22, flexShrink: 0, marginTop: 2,
                  border: `1.5px solid ${checks[key] ? GOLD : LINE_BRIGHT}`,
                  background: checks[key] ? GOLD : 'transparent',
                  position: 'relative',
                }}>
                  {checks[key] && (
                    <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -55%)', color: NAVY, fontSize: 14, fontWeight: 700 }}>✓</span>
                  )}
                </div>
                <span style={{ fontFamily: SERIF, fontSize: 16, color: checks[key] ? IVORY_DIM : GREY_1, lineHeight: 1.5 }}>
                  {label}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
          <Btn kind="quiet" size="md" onClick={() => setStage('idle')}>Cancel</Btn>
          <Btn kind="primary" size="md" onClick={startSession} disabled={!allChecked || !target.trim()}>
            Begin session →
          </Btn>
        </div>
      </div>
    );
  }

  if (stage === 'session') {
    const elapsed = (duration * 60) - secondsLeft;
    const progress = elapsed / (duration * 60);
    return (
      <div style={{ paddingBottom: 100, paddingTop: 32, textAlign: 'center' }}>
        <Eyebrow color={GOLD_BRIGHT}>HYPERFOCUS · IN SESSION</Eyebrow>
        <div style={{ marginTop: 14, fontFamily: SERIF, fontSize: 22, color: IVORY, fontStyle: 'italic' }}>
          {target}
        </div>
        <div style={{ marginTop: 56, position: 'relative', width: 280, height: 280, margin: '56px auto 0' }}>
          <svg width="280" height="280" viewBox="0 0 280 280" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="140" cy="140" r="130" fill="none" stroke={LINE} strokeWidth="2" />
            <circle cx="140" cy="140" r="130" fill="none" stroke={GOLD}
              strokeWidth="2" strokeLinecap="round"
              strokeDasharray={`${2 * Math.PI * 130}`}
              strokeDashoffset={`${2 * Math.PI * 130 * (1 - progress)}`}
              style={{ transition: 'stroke-dashoffset 1s linear' }} />
          </svg>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ fontFamily: SERIF, fontSize: 64, color: IVORY, lineHeight: 1, fontWeight: 300, letterSpacing: '-0.02em' }}>
              {fmt(secondsLeft)}
            </div>
            <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.32em', color: GREY_1, marginTop: 12, fontWeight: 600 }}>
              REMAINING
            </div>
          </div>
        </div>
        {honest.tabSwitches > 0 && (
          <div style={{ marginTop: 28, fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>
            {honest.tabSwitches} TAB SWITCH{honest.tabSwitches === 1 ? '' : 'ES'} · TRACKED HONESTLY
          </div>
        )}
        <div style={{ marginTop: 40 }}>
          <Btn kind="quiet" size="sm" onClick={endEarly}>End session early</Btn>
        </div>
      </div>
    );
  }

  if (stage === 'recovery') {
    return (
      <div style={{ paddingBottom: 100, paddingTop: 32, textAlign: 'center' }}>
        <Eyebrow color={GOLD_BRIGHT}>RECOVERY PROTOCOL</Eyebrow>
        <Heading size={32} italic>The cost of hyperfocus is real.</Heading>
        <div style={{ marginTop: 16, marginBottom: 40 }}>
          <Lead>Twenty minutes. No demanding work. Water. Light food. Low-stimulation movement. The body comes down deliberately, not by collapse.</Lead>
        </div>
        <div style={{ fontFamily: SERIF, fontSize: 80, color: GOLD_BRIGHT, fontWeight: 300, letterSpacing: '-0.02em' }}>
          {fmt(recoveryLeft)}
        </div>
        <div style={{ marginTop: 40 }}>
          <Btn kind="ghost" size="md" onClick={finishRecovery}>Recovery complete →</Btn>
        </div>
      </div>
    );
  }

  if (stage === 'log') {
    const elapsed = sessionStartRef.current ? Date.now() - sessionStartRef.current : 0;
    const elapsedMin = Math.floor(elapsed / 60000);
    const focus = duration > 0 ? Math.max(0, 100 - Math.round(100 * honest.hiddenMs / (duration * 60000))) : 100;
    return (
      <div style={{ paddingBottom: 100 }}>
        <Eyebrow>Session Log</Eyebrow>
        <Heading size={32} italic>What was deposited.</Heading>
        <div style={{ marginTop: 12, marginBottom: 24 }}>
          <Prose>The session is logged in the architecture. Note the output briefly. The compounding records itself.</Prose>
        </div>
        <Card padding={22} style={{ marginBottom: 18 }}>
          <Eyebrow>SESSION DATA</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 12 }}>
            <div>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>DURATION</div>
              <div style={{ fontFamily: SERIF, fontSize: 28, color: IVORY, marginTop: 4 }}>{elapsedMin} min</div>
            </div>
            <div>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>FOCUS</div>
              <div style={{ fontFamily: SERIF, fontSize: 28, color: focus >= 90 ? GOLD_BRIGHT : IVORY, marginTop: 4 }}>{focus}%</div>
            </div>
            <div>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>TAB SWITCHES</div>
              <div style={{ fontFamily: SERIF, fontSize: 28, color: IVORY, marginTop: 4 }}>{honest.tabSwitches}</div>
            </div>
            <div>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>AWAY TIME</div>
              <div style={{ fontFamily: SERIF, fontSize: 28, color: IVORY, marginTop: 4 }}>{Math.round(honest.hiddenMs / 60000)}m</div>
            </div>
          </div>
        </Card>
        <TextArea value={output} onChange={setOutput} placeholder="The session produced…" rows={5} />
        <div style={{ marginTop: 28 }}>
          <Btn kind="primary" size="md" onClick={logSession} full>Log session & close</Btn>
        </div>
      </div>
    );
  }
  return null;
};

// =============================================================================
// INSIGHTS — the operator's data teaches them, via Claude
// =============================================================================

const Insights = () => {
  const [data, setData] = useState(null);
  const [insight, setInsight] = useState(null);
  const [loading, setLoading] = useState(true);
  const [generating, setGenerating] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => { (async () => {
    const reframes = await storage.get('winners-code:reframes', []);
    const storms = await storage.get('winners-code:storms', []);
    const sessions = await storage.get('winners-code:hyperfocus', []);

    let activeDays = 0, codeRatioSum = 0, codeRatioN = 0, identityReads = 0;
    for (let i = 0; i < 30; i++) {
      const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
      const isActive = e && (e.hasReadIdentity || (e.completedRail || []).some(x => x));
      if (isActive) activeDays++;
      if (e?.hasReadIdentity) identityReads++;
      if (e?.codeStatus) {
        const ks = Object.keys(e.codeStatus);
        if (ks.length > 0) {
          codeRatioSum += ks.filter(k => e.codeStatus[k]).length / ks.length;
          codeRatioN++;
        }
      }
    }

    let streak = 0;
    for (let i = 0; i < 90; i++) {
      const e = await storage.get(`winners-code:day:${todayKey(-i)}`);
      const active = e && (e.hasReadIdentity || (e.completedRail || []).some(x => x));
      if (active) streak++;
      else if (i > 0) break;
    }

    const cached = await storage.get('winners-code:insight');
    if (cached && Date.now() - cached.generatedAt < 6 * 3600 * 1000) {
      setInsight(cached);
    }

    setData({
      reframes: Array.isArray(reframes) ? reframes : [],
      storms: Array.isArray(storms) ? storms : [],
      sessions: Array.isArray(sessions) ? sessions : [],
      activeDays30: activeDays, identityReads30: identityReads,
      codeAvg30: codeRatioN > 0 ? Math.round(100 * codeRatioSum / codeRatioN) : 0,
      streak,
    });
    setLoading(false);
  })(); }, []);

  const generateInsight = async () => {
    if (!data) return;
    setGenerating(true);
    setError(null);
    try {
      const recentReframes = data.reframes.filter(r => Date.now() - new Date(r.timestamp).getTime() < 30 * 86400000);
      const closedStorms = data.storms.filter(s => s.status === 'closed');
      const avgSessionDur = data.sessions.length > 0 ? Math.round(data.sessions.reduce((a, s) => a + (s.actualDuration || 0), 0) / data.sessions.length) : 0;
      const avgFocus = data.sessions.length > 0 ? Math.round(data.sessions.reduce((a, s) => {
        const f = s.intendedDuration > 0 ? Math.max(0, 100 - Math.round(100 * (s.hiddenMs || 0) / (s.intendedDuration * 60000))) : 100;
        return a + f;
      }, 0) / data.sessions.length) : 0;

      const summary = `OPERATOR DATA · LAST 30 DAYS

Active days: ${data.activeDays30} of 30
Current streak: ${data.streak} days
Identity Statement read on: ${data.identityReads30} days
Daily Code execution average: ${data.codeAvg30}% on active days

Reframes deposited (lifetime): ${data.reframes.length}
Reframes deposited (last 30 days): ${recentReframes.length}

Storms logged (lifetime): ${data.storms.length}
Storms held to closure: ${closedStorms.length}

Hyperfocus sessions logged: ${data.sessions.length}
${data.sessions.length > 0 ? `Average session duration: ${avgSessionDur} min
Average focus score: ${avgFocus}%` : ''}

Read this data architecturally. What does the pattern reveal? Speak directly to the operator about what the architecture is doing, what it is not yet doing, and what calibration the data invites.`;

      const text = await callClaude(summary, PATTERN_SYSTEM_PROMPT, 800);
      const parsed = parseJSON(text);
      if (!parsed || !parsed.headline) throw new Error('Pattern intelligence returned an unexpected response.');
      const insightObj = { ...parsed, generatedAt: Date.now() };
      setInsight(insightObj);
      await storage.set('winners-code:insight', insightObj);
      haptic([10, 30, 10]);
    } catch (err) {
      setError(err.message || 'Pattern intelligence is momentarily unreachable.');
    } finally {
      setGenerating(false);
    }
  };

  if (loading) {
    return (
      <div style={{ paddingTop: 80, textAlign: 'center', color: GREY_2, fontFamily: SERIF, fontStyle: 'italic' }}>
        Reading the data…
      </div>
    );
  }

  const hasMinimumData = data && (data.activeDays30 >= 3 || data.reframes.length >= 3 || data.storms.length >= 2);

  return (
    <div style={{ paddingBottom: 100 }}>
      <Eyebrow>Architectural Insights</Eyebrow>
      <Heading size={42} italic>What the operator's data is teaching.</Heading>
      <Lead>The architecture compounds in the data. The data, read architecturally, returns insight. The intelligence is calibrated to the Winner's Code framework and to the operator's own ledger.</Lead>

      {!hasMinimumData ? (
        <Card padding={28} style={{ marginTop: 28 }}>
          <Eyebrow>NOT YET ENOUGH DATA</Eyebrow>
          <Lead>Insights require operating data. After three to seven days of operation — daily reading, rail authoring, reframes deposited, storms logged — the architectural intelligence will read the pattern.</Lead>
        </Card>
      ) : (
        <>
          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Card padding={20}>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>ACTIVE · 30D</div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: IVORY, marginTop: 4 }}>{data.activeDays30}<span style={{ fontSize: 14, color: GREY_1 }}>/30</span></div>
            </Card>
            <Card padding={20}>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>STREAK</div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: GOLD_BRIGHT, marginTop: 4 }}>{data.streak}</div>
            </Card>
            <Card padding={20}>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>REFRAMES · 30D</div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: IVORY, marginTop: 4 }}>{data.reframes.filter(r => Date.now() - new Date(r.timestamp).getTime() < 30 * 86400000).length}</div>
            </Card>
            <Card padding={20}>
              <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 600 }}>STORMS HELD</div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: IVORY, marginTop: 4 }}>{data.storms.filter(s => s.status === 'closed').length}<span style={{ fontSize: 14, color: GREY_1 }}>/{data.storms.length}</span></div>
            </Card>
          </div>

          {insight ? (
            <Card padding={28} style={{ marginTop: 32, borderColor: LINE_BRIGHT }}>
              <Eyebrow color={GOLD_BRIGHT}>THE PATTERN · {fmtDate(new Date(insight.generatedAt).toISOString())}</Eyebrow>
              <div style={{ marginTop: 12 }}>
                <Heading size={26}>{insight.headline}</Heading>
              </div>
              <div style={{ marginTop: 18, fontFamily: SERIF, fontSize: 17, color: IVORY_DIM, lineHeight: 1.6 }}>
                {insight.observation}
              </div>
              <div style={{
                marginTop: 22, paddingTop: 18,
                borderTop: `1px solid ${LINE}`,
                fontFamily: SERIF, fontSize: 16, color: GOLD_BRIGHT,
                fontStyle: 'italic', lineHeight: 1.55,
              }}>
                <span style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GOLD, fontWeight: 700, fontStyle: 'normal', display: 'block', marginBottom: 8 }}>CALIBRATION</span>
                {insight.calibration}
              </div>
              <div style={{ marginTop: 24 }}>
                <Btn kind="ghost" size="sm" onClick={generateInsight} disabled={generating}>
                  {generating ? 'Generating…' : 'Refresh insight'}
                </Btn>
              </div>
            </Card>
          ) : (
            <div style={{ marginTop: 32 }}>
              {generating ? (
                <Card padding={28} style={{ textAlign: 'center' }}>
                  <Eyebrow>READING THE PATTERN</Eyebrow>
                  <div style={{ marginTop: 24 }}><LoadingDots /></div>
                </Card>
              ) : (
                <Btn kind="primary" size="lg" onClick={generateInsight} full>Read the pattern</Btn>
              )}
            </div>
          )}

          {error && (
            <div style={{
              marginTop: 18, padding: '14px 18px',
              background: 'rgba(216, 138, 138, 0.06)',
              borderLeft: `2px solid ${RED_SOFT}`,
              fontFamily: SERIF, fontSize: 14, color: IVORY_DIM,
            }}>{error}</div>
          )}
        </>
      )}
    </div>
  );
};

// =============================================================================
// EXPORT — generate printable HTML of the operator's full architecture
// =============================================================================

function generateExportHTML({ settings, docs, reframes, storms, sessions }) {
  const e = (s) => String(s || '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  const reframesByMonth = {};
  reframes.forEach(r => {
    const k = new Date(r.timestamp).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
    if (!reframesByMonth[k]) reframesByMonth[k] = [];
    reframesByMonth[k].push(r);
  });

  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Winner's Code — Architecture · ${e(settings?.name || 'Operator')}</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Syne:wght@500;600;700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body { font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.65; color: #1F2937; max-width: 800px; margin: 0 auto; padding: 60px 40px; background: #fff; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: #0A0F1E; }
h1 { font-size: 48px; line-height: 1; font-style: italic; margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 32px; font-style: italic; margin: 56px 0 14px; letter-spacing: -0.012em; }
h3 { font-size: 22px; font-style: italic; margin: 24px 0 8px; }
.eyebrow { font-family: 'Syne', sans-serif; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: #B89438; font-weight: 600; margin-bottom: 14px; }
.gold-rule { width: 80px; height: 1px; background: #C9A84C; margin: 18px 0; }
.deep-rule { border-top: 1px solid #ddd; margin: 32px 0; }
.signature { font-style: italic; font-size: 18px; color: #0A0F1E; margin-top: 24px; }
.meta { font-family: 'Syne', sans-serif; font-size: 10px; letter-spacing: 0.22em; color: #888; font-weight: 600; }
.entry { margin: 24px 0; padding: 18px 22px; border-left: 2px solid #C9A84C; background: #FBF8F0; }
.entry .capture { font-style: italic; color: #555; margin-bottom: 10px; }
.entry .reframe { color: #0A0F1E; font-size: 17px; line-height: 1.6; }
.toc { padding: 24px; background: #FBF8F0; margin: 24px 0 56px; }
.toc-item { padding: 6px 0; font-size: 16px; }
.cover { text-align: center; padding: 80px 0 60px; border-bottom: 1px solid #ddd; margin-bottom: 56px; }
.cover .gold-rule { margin: 24px auto; }
.cover .name { font-size: 28px; font-style: italic; margin-top: 32px; }
.cover .date { font-family: 'Syne', sans-serif; font-size: 11px; letter-spacing: 0.32em; color: #888; margin-top: 10px; }
.doc { padding: 24px; background: #FBF8F0; border-left: 3px solid #C9A84C; margin: 18px 0; }
.doc-text { white-space: pre-wrap; font-style: italic; }
@media print { body { padding: 30px; } h2 { page-break-after: avoid; } }
</style>
</head>
<body>

<div class="cover">
  <div class="eyebrow">THE WINNER'S CODE</div>
  <div class="gold-rule"></div>
  <h1>The Architecture</h1>
  <div class="signature">${e(settings?.name || 'Operator')}</div>
  <div class="date">EXPORTED ${e(fmtDate(new Date().toISOString(), { year: true }).toUpperCase())}</div>
</div>

<div class="toc">
  <div class="eyebrow">CONTENTS</div>
  <div class="toc-item">I · The Six Foundational Documents</div>
  <div class="toc-item">II · The Compounding Ledger · ${reframes.length} reframes</div>
  <div class="toc-item">III · The Storm History · ${storms.length} storms</div>
  ${sessions.length > 0 ? `<div class="toc-item">IV · The Hyperfocus Sessions · ${sessions.length} sessions</div>` : ''}
</div>

<h2>I · The Six Foundational Documents</h2>

${DOCS.map(d => {
  const data = docs[d.key];
  if (!data) return `<h3>${e(d.name)}</h3><p style="color:#999;font-style:italic">Not yet authored.</p>`;
  if (d.key === 'daily-code') {
    return `<h3>${e(d.name)}</h3>
<div class="meta">DOC. ${e(d.num)} · ${e(d.module)}</div>
<div class="doc">${(data.items || []).map((it, i) => `<div style="padding: 6px 0"><strong style="color:#B89438; font-family:'Syne',sans-serif; font-size:10px; letter-spacing:0.22em">${String(i+1).padStart(2,'0')}</strong> &nbsp; ${e(it)}</div>`).join('')}</div>`;
  }
  if (d.key === 'decade') {
    let html = `<h3>${e(d.name)}</h3>
<div class="meta">DOC. ${e(d.num)} · ${e(d.module)}</div>
<div class="doc"><div class="doc-text">${e(data.text || '')}</div></div>`;
    if (data.milestones?.length > 0) {
      html += `<div style="margin-top:18px"><div class="eyebrow">MILESTONES</div>${data.milestones.map(m => `<div style="padding:8px 0"><strong style="color:#B89438; font-family:'Syne',sans-serif; font-size:10px; letter-spacing:0.22em">YEAR ${m.year}</strong> &nbsp; ${e(m.label)}</div>`).join('')}</div>`;
    }
    if (data.quarter?.commitments?.length > 0) {
      html += `<div style="margin-top:18px"><div class="eyebrow">${e(data.quarter.label || 'CURRENT QUARTER')} · COMMITMENTS</div>${data.quarter.commitments.map((c, i) => `<div style="padding:6px 0">${String(i+1).padStart(2,'0')} &nbsp; ${e(c)}</div>`).join('')}</div>`;
    }
    return html;
  }
  return `<h3>${e(d.name)}</h3>
<div class="meta">DOC. ${e(d.num)} · ${e(d.module)} · v${data.version || 1} · ${e(fmtDate(data.updated))}</div>
<div class="doc"><div class="doc-text">${e(data.text || '')}</div></div>`;
}).join('')}

<h2>II · The Compounding Ledger</h2>
<p style="color:#666; font-style:italic">Every reframe deposited. Every architecture installed.</p>

${Object.keys(reframesByMonth).length === 0 ? '<p style="color:#999;font-style:italic">No reframes yet deposited.</p>' :
  Object.entries(reframesByMonth).map(([month, arr]) => `
<h3 style="font-size:18px; margin-top:28px">${e(month)} · ${arr.length} ${arr.length === 1 ? 'deposit' : 'deposits'}</h3>
${arr.map(r => `
<div class="entry">
  <div class="meta">${e(fmtDate(r.timestamp))} · ${e(fmtTime(r.timestamp))}</div>
  <div class="capture">Captured: "${e(r.capture)}"</div>
  ${r.identityFiring ? `<div style="font-size:13px; color:#888; font-style:italic; margin: 8px 0">Identity firing: ${e(r.identityFiring)}</div>` : ''}
  <div class="reframe">${e(r.sovereignReframe)}</div>
</div>`).join('')}
`).join('')}

<div class="deep-rule"></div>
<h2>III · The Storm History</h2>
<p style="color:#666; font-style:italic">Every storm survived is architecture, recorded.</p>

${storms.length === 0 ? '<p style="color:#999;font-style:italic">No storms logged.</p>' :
  storms.map(s => `
<div class="entry">
  <div class="meta">${e(fmtDate(s.timestamp))} · ${e(fmtTime(s.timestamp))} · ${s.status === 'closed' ? '✓ HELD' : 'IN DEFERRAL'}</div>
  <div class="capture">"${e(s.trigger)}"</div>
  ${s.closedAt ? `<div style="font-family:'Syne',sans-serif; font-size:10px; letter-spacing:0.22em; color:#888; margin-top:8px">RECOVERY: ${e(fmtDuration(new Date(s.closedAt).getTime() - new Date(s.timestamp).getTime()))}</div>` : ''}
</div>`).join('')}

${sessions.length > 0 ? `
<div class="deep-rule"></div>
<h2>IV · The Hyperfocus Sessions</h2>

${sessions.map(s => `
<div class="entry">
  <div class="meta">${e(fmtDate(s.timestamp))} · ${(s.actualDuration || s.intendedDuration)}MIN</div>
  <div style="font-style:italic; color:#0A0F1E; font-size:17px; margin: 8px 0">${e(s.target)}</div>
  ${s.output ? `<div style="font-size:14px; color:#555">${e(s.output)}</div>` : ''}
</div>`).join('')}
` : ''}

<div class="deep-rule"></div>
<div style="text-align:center; margin-top:60px; color:#999">
  <div class="eyebrow">SASCHA GOROKHOFF · THE WINNER'S CODE</div>
  <div style="font-style:italic; margin-top:10px">saschagorokhoff.com</div>
</div>

</body>
</html>`;
}

// =============================================================================
// SETTINGS — operator config, notifications, terrain, export
// =============================================================================

const Settings = ({ settings, onUpdate }) => {
  const [name, setName] = useState(settings?.name || '');
  const [terrain, setTerrain] = useState(settings?.terrain || 'standard');
  const [notifPermission, setNotifPermission] = useState(typeof Notification !== 'undefined' ? Notification.permission : 'unsupported');

  const save = async (next) => {
    const merged = { ...settings, ...next };
    await storage.set('winners-code:settings', merged);
    onUpdate(merged);
  };

  const requestNotifications = async () => {
    if (typeof Notification === 'undefined') {
      alert('Notifications are not supported in this environment.');
      return;
    }
    const result = await Notification.requestPermission();
    setNotifPermission(result);
    save({ notificationsRequested: true, notificationsEnabled: result === 'granted' });
    if (result === 'granted') {
      new Notification("The Winner's Code", {
        body: "Notifications enabled. The architecture will surface at your cues.",
      });
    }
  };

  const exportArchitecture = async () => {
    const reframes = await storage.get('winners-code:reframes', []);
    const storms = await storage.get('winners-code:storms', []);
    const sessions = await storage.get('winners-code:hyperfocus', []);
    const docs = {};
    for (const d of DOCS) docs[d.key] = await storage.get(`winners-code:doc:${d.key}`);

    const html = generateExportHTML({ settings, docs, reframes: Array.isArray(reframes) ? reframes : [], storms: Array.isArray(storms) ? storms : [], sessions: Array.isArray(sessions) ? sessions : [] });
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `winners-code-architecture-${todayKey()}.html`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    haptic(20);
  };

  return (
    <div style={{ paddingBottom: 100 }}>
      <Eyebrow>Settings</Eyebrow>
      <Heading size={36} italic>The architecture, configured.</Heading>

      <div style={{ marginTop: 36 }}>
        <Eyebrow>OPERATOR NAME</Eyebrow>
        <Input value={name} onChange={(v) => { setName(v); save({ name: v }); }}
          placeholder="The operator's name…" style={{ marginTop: 8 }} />
      </div>

      <div style={{ marginTop: 32 }}>
        <Eyebrow>TERRAIN MODE</Eyebrow>
        <div style={{ marginTop: 12, marginBottom: 12 }}>
          <Prose>The architecture is identical. The terrain is different. ADHD mode reveals the Hyperfocus engineering surface and adapts language for the ADHD operator.</Prose>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16 }}>
          {[
            { id: 'standard', label: 'STANDARD', desc: 'Neurotypical operator. Standard installation.' },
            { id: 'adhd', label: 'ADHD OPERATOR', desc: 'ADHD terrain. Hyperfocus engineering enabled.' },
          ].map(opt => (
            <button key={opt.id} onClick={() => { setTerrain(opt.id); save({ terrain: opt.id }); }}
              style={{
                padding: 20, textAlign: 'left',
                background: terrain === opt.id ? NAVY_4 : NAVY_2,
                border: `1px solid ${terrain === opt.id ? GOLD : LINE}`,
                cursor: 'pointer', transition: 'all 0.3s ease',
              }}>
              <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.22em', color: terrain === opt.id ? GOLD : GREY_1, fontWeight: 700 }}>
                {opt.label}
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 15, color: IVORY_DIM, marginTop: 8, lineHeight: 1.4 }}>
                {opt.desc}
              </div>
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 32 }}>
        <Eyebrow>NOTIFICATIONS</Eyebrow>
        <Prose>The architecture surfaces at the operator's cue: morning identity reading, deferral window closing, recovery protocol complete.</Prose>
        <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: notifPermission === 'granted' ? GOLD : GREY_1, fontWeight: 600 }}>
            {notifPermission === 'granted' ? '✓ ENABLED' : notifPermission === 'denied' ? 'BLOCKED' : notifPermission === 'unsupported' ? 'NOT SUPPORTED' : 'NOT YET REQUESTED'}
          </div>
          {notifPermission === 'default' && (
            <Btn kind="ghost" size="sm" onClick={requestNotifications}>Enable notifications</Btn>
          )}
        </div>
      </div>

      <div style={{ marginTop: 32 }}>
        <Eyebrow>EXPORT THE ARCHITECTURE</Eyebrow>
        <Prose>The architecture, as an HTML document. For 1:1 sessions, for the live programs, for the operator's own records. All documents, all reframes, all storms, all hyperfocus sessions — exported, ready to print or save as PDF.</Prose>
        <div style={{ marginTop: 14 }}>
          <Btn kind="ghost" size="md" onClick={exportArchitecture}>Export architecture</Btn>
        </div>
      </div>

      <div style={{ marginTop: 56, padding: 24, background: NAVY_2, border: `1px solid ${LINE}` }}>
        <Eyebrow>INTEGRITY STATEMENT</Eyebrow>
        <div style={{ marginTop: 12 }}>
          <Prose>This app is an architectural companion to The Winner's Code course. It is educational and architectural; it is not medical, psychological, or therapeutic care, and it does not replace clinical evaluation, therapy, coaching, or any other form of professional support. Operators are encouraged to seek and continue clinical care that serves them.</Prose>
        </div>
      </div>

      <div style={{ marginTop: 24, padding: 24, background: NAVY_2, border: `1px solid ${LINE}` }}>
        <Eyebrow>THE ARCHITECT</Eyebrow>
        <div style={{ fontFamily: SERIF, fontSize: 22, color: IVORY, fontStyle: 'italic', marginTop: 10 }}>
          Sascha Gorokhoff
        </div>
        <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GREY_1, marginTop: 6, fontWeight: 500 }}>
          ARCHITECT OF THE WINNER'S CODE
        </div>
        <div style={{ fontFamily: DISPLAY, fontSize: 10, letterSpacing: '0.22em', color: GOLD, marginTop: 14, fontWeight: 600 }}>
          SASCHAGOROKHOFF.COM · SASCHALEADERSHIP.COM
        </div>
      </div>
    </div>
  );
};

// =============================================================================
// MAIN APP
// =============================================================================

export default function App() {
  const [tab, setTab] = useState('today');
  const [settings, setSettings] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => { (async () => {
    const s = await storage.get('winners-code:settings');
    setSettings(s);
    setLoading(false);
  })(); }, []);

  useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Syne:wght@400;500;600;700;800&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);

    const style = document.createElement('style');
    style.textContent = `
      @keyframes wc-pulse {
        0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
        40% { opacity: 1; transform: scale(1); }
      }
      @keyframes wc-pulse-rec {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.08); opacity: 0.7; }
      }
      @keyframes wc-fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }
      * { -webkit-tap-highlight-color: transparent; }
      ::selection { background: ${GOLD}; color: ${NAVY}; }
    `;
    document.head.appendChild(style);

    const meta1 = document.createElement('meta');
    meta1.name = 'theme-color'; meta1.content = NAVY;
    document.head.appendChild(meta1);
    const meta2 = document.createElement('meta');
    meta2.name = 'apple-mobile-web-app-capable'; meta2.content = 'yes';
    document.head.appendChild(meta2);
    const meta3 = document.createElement('meta');
    meta3.name = 'apple-mobile-web-app-status-bar-style'; meta3.content = 'black-translucent';
    document.head.appendChild(meta3);

    return () => {
      try {
        document.head.removeChild(link); document.head.removeChild(style);
        document.head.removeChild(meta1); document.head.removeChild(meta2); document.head.removeChild(meta3);
      } catch {}
    };
  }, []);

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', background: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.36em', color: GOLD, fontWeight: 600 }}>
          THE WINNER'S CODE
        </div>
      </div>
    );
  }

  if (!settings?.onboarded) {
    return (
      <div style={{ minHeight: '100vh', background: NAVY, color: IVORY, position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'fixed', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201, 168, 76, 0.04), transparent 60%)`,
        }} />
        <Onboarding onComplete={(s) => setSettings(s)} />
      </div>
    );
  }

  const showHyperfocus = settings.terrain === 'adhd';

  const tabs = [
    { id: 'today', label: 'Today' },
    { id: 'reframe', label: 'Reframe' },
    { id: 'documents', label: 'Docs' },
    { id: 'compound', label: 'Compound' },
    { id: 'sovereign', label: 'Sovereign' },
    { id: 'insights', label: 'Insights' },
    ...(showHyperfocus ? [{ id: 'hyperfocus', label: 'Focus' }] : []),
    { id: 'settings', label: 'Settings' },
  ];

  return (
    <div style={{
      minHeight: '100vh', background: NAVY, color: IVORY,
      position: 'relative', overflow: 'hidden', fontFamily: SERIF,
    }}>
      <div style={{
        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
        background: `
          radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 168, 76, 0.06), transparent 70%),
          radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201, 168, 76, 0.04), transparent 60%),
          radial-gradient(ellipse 60% 40% at 0% 60%, rgba(201, 168, 76, 0.025), transparent 60%)
        `,
      }} />

      <div style={{
        position: 'sticky', top: 0, zIndex: 50,
        backdropFilter: 'blur(20px)',
        background: 'rgba(10, 15, 30, 0.7)',
        borderBottom: `1px solid ${LINE}`,
        padding: '14px 24px',
      }}>
        <div style={{ maxWidth: 720, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: DISPLAY, fontSize: 11, letterSpacing: '0.32em', color: IVORY, fontWeight: 600 }}>
            THE WINNER'S <span style={{ color: GOLD }}>CODE</span>
          </div>
          <div style={{ fontFamily: DISPLAY, fontSize: 9, letterSpacing: '0.22em', color: GREY_2, fontWeight: 500 }}>
            {settings.terrain === 'adhd' ? 'ADHD OPERATOR' : 'STANDARD'}
          </div>
        </div>
      </div>

      <main style={{
        maxWidth: 720, margin: '0 auto', padding: '32px 24px 24px',
        position: 'relative', zIndex: 1,
        animation: 'wc-fadeIn 0.4s ease',
      }} key={tab}>
        {tab === 'today' && <Today settings={settings} onNavigate={setTab} />}
        {tab === 'reframe' && <Reframe />}
        {tab === 'documents' && <Documents />}
        {tab === 'compound' && <Compound />}
        {tab === 'sovereign' && <Sovereign />}
        {tab === 'insights' && <Insights />}
        {tab === 'hyperfocus' && <Hyperfocus />}
        {tab === 'settings' && <Settings settings={settings} onUpdate={setSettings} />}
      </main>

      <nav style={{
        position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
        backdropFilter: 'blur(20px)',
        background: 'rgba(10, 15, 30, 0.85)',
        borderTop: `1px solid ${LINE}`,
        padding: '10px 0 calc(10px + env(safe-area-inset-bottom))',
      }}>
        <div style={{
          maxWidth: 720, margin: '0 auto',
          display: 'grid', gridTemplateColumns: `repeat(${tabs.length}, 1fr)`, gap: 2,
        }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => { haptic(8); setTab(t.id); }}
              style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                padding: '10px 4px', display: 'flex', flexDirection: 'column',
                alignItems: 'center', gap: 4,
                fontFamily: DISPLAY,
                fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: tab === t.id ? GOLD : GREY_2,
                fontWeight: 600, transition: 'color 0.3s ease',
              }}>
              <div style={{
                width: 4, height: 4, borderRadius: '50%',
                background: tab === t.id ? GOLD : 'transparent',
                transition: 'background 0.3s ease',
              }} />
              {t.label}
            </button>
          ))}
        </div>
      </nav>
    </div>
  );
}