// TAU — 3 iOS screens, dark, minimal, Geist
// No gradients. No color. Pure black + grayscale. Vercel/Linear restraint.

const TAU = {
  bg: '#000000',
  bg2: '#0A0A0A',
  surface: '#0E0E0E',
  surfaceHi: '#141414',
  border: 'rgba(255,255,255,0.06)',
  borderHi: 'rgba(255,255,255,0.10)',
  ink: '#F5F5F2',
  dim: 'rgba(245,245,242,0.62)',
  faint: 'rgba(245,245,242,0.38)',
  ghost: 'rgba(245,245,242,0.20)',
  danger: '#E56A6A',
  font: "'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
  mono: "'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace"
};

// ── Custom dark status bar (22pt) — white glyphs on pure black ──────────────
function TauStatusBar({ time = '9:41' }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 32px 0', position: 'relative', zIndex: 20,
      fontFamily: TAU.font
    }}>
      <div style={{ fontSize: 17, fontWeight: 600, color: TAU.ink, letterSpacing: -0.3 }}>{time}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {/* signal */}
        <svg width="18" height="11" viewBox="0 0 18 11">
          <rect x="0" y="7" width="3" height="4" rx="0.6" fill={TAU.ink} />
          <rect x="4.5" y="5" width="3" height="6" rx="0.6" fill={TAU.ink} />
          <rect x="9" y="2.5" width="3" height="8.5" rx="0.6" fill={TAU.ink} />
          <rect x="13.5" y="0" width="3" height="11" rx="0.6" fill={TAU.ink} />
        </svg>
        {/* wifi */}
        <svg width="16" height="11" viewBox="0 0 16 11">
          <path d="M8 3c2.2 0 4.1.9 5.5 2.3l1-1C12.8 2.6 10.5 1.5 8 1.5S3.2 2.6 1.5 4.3l1 1C3.9 3.9 5.8 3 8 3z" fill={TAU.ink} />
          <path d="M8 6.2c1.3 0 2.5.5 3.4 1.4l1-1C11.2 5.5 9.7 4.8 8 4.8S4.8 5.5 3.6 6.6l1 1C5.5 6.7 6.7 6.2 8 6.2z" fill={TAU.ink} />
          <circle cx="8" cy="9.7" r="1.4" fill={TAU.ink} />
        </svg>
        {/* battery */}
        <svg width="26" height="12" viewBox="0 0 26 12">
          <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke={TAU.ink} strokeOpacity="0.35" fill="none" />
          <rect x="2" y="2" width="19" height="8" rx="1.5" fill={TAU.ink} />
          <path d="M24 4.5v3c.6-.2 1-.8 1-1.5s-.4-1.3-1-1.5z" fill={TAU.ink} fillOpacity="0.4" />
        </svg>
      </div>
    </div>);

}

// ── Device shell — pure black, minimal ──────────────────────────────────────
function TauDevice({ children, width = 402, height = 874 }) {
  return (
    <div style={{
      width, height, borderRadius: 48,
      background: TAU.bg, position: 'relative', overflow: 'hidden',
      fontFamily: TAU.font,
      WebkitFontSmoothing: 'antialiased',
      boxShadow: '0 40px 100px rgba(0,0,0,0.55), 0 0 0 8px #0A0A0A, 0 0 0 9px #222, 0 0 0 10px #0A0A0A',
      color: TAU.ink
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50
      }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 10 }}>
        <TauStatusBar />
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 8, left: 0, right: 0, zIndex: 60,
        display: 'flex', justifyContent: 'center', pointerEvents: 'none'
      }}>
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.45)' }} />
      </div>
    </div>);

}

// ── Bottom tab bar — Chat · Memories · Settings ─────────────────────────────
function TauTabBar({ active = 'chat' }) {
  const tabs = [
  {
    id: 'chat', label: 'Chat',
    icon: (c) => <path d="M3 5.5A2.5 2.5 0 015.5 3h11A2.5 2.5 0 0119 5.5v6A2.5 2.5 0 0116.5 14H8l-4 3.5V14H5.5A2.5 2.5 0 013 11.5v-6z" stroke={c} strokeWidth="1.4" strokeLinejoin="round" />
  },
  {
    id: 'memories', label: 'Memories',
    icon: (c) => <><circle cx="11" cy="11" r="3" stroke={c} strokeWidth="1.4" /><path d="M11 2v3M11 17v3M2 11h3M17 11h3M4.5 4.5l2 2M15.5 15.5l2 2M17.5 4.5l-2 2M6.5 15.5l-2 2" stroke={c} strokeWidth="1.4" strokeLinecap="round" /></>
  },
  {
    id: 'settings', label: 'Settings',
    icon: (c) => <><path d="M4 6h14M4 11h14M4 16h14" stroke={c} strokeWidth="1.4" strokeLinecap="round" /><circle cx="8" cy="6" r="2" fill={TAU.bg} stroke={c} strokeWidth="1.4" /><circle cx="14" cy="11" r="2" fill={TAU.bg} stroke={c} strokeWidth="1.4" /><circle cx="7" cy="16" r="2" fill={TAU.bg} stroke={c} strokeWidth="1.4" /></>
  }];

  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 45,
      paddingTop: 10, paddingBottom: 26,
      borderTop: `1px solid ${TAU.border}`,
      background: TAU.bg,
      display: 'flex'
    }}>
      {tabs.map((t) => {
        const on = t.id === active;
        const c = on ? TAU.ink : TAU.faint;
        return (
          <div key={t.id} style={{
            flex: 1, display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 5, cursor: 'pointer'
          }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">{t.icon(c)}</svg>
            <span style={{
              fontFamily: TAU.mono, fontSize: 9, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: c
            }}>{t.label}</span>
          </div>);

      })}
    </div>);

}

// ── Minimal header bar — back/spacer · title · trailing ─────────────────────
function TauHeader({ title, trailing, showBack = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '24px 24px 16px', marginTop: 40
    }}>
      {showBack ?
      <button style={{
        width: 36, height: 36, borderRadius: 999,
        background: 'transparent', border: 'none', padding: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer'
      }}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M11.5 3.5L5.5 9l6 5.5" stroke={TAU.ink} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button> :

      <div style={{ width: 36, height: 36 }} />
      }
      <div style={{
        fontFamily: TAU.font, fontSize: 15, fontWeight: 500,
        letterSpacing: -0.2, color: TAU.ink
      }}>{title}</div>
      <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        {trailing}
      </div>
    </div>);

}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 1 · CHAT — single persistent conversation
// ═══════════════════════════════════════════════════════════════════════════
function TauChat({ ephemeral = false, streaming = false }) {
  const messages = ephemeral ? [
  { from: 'me', text: "Off the record — what do you actually think about the Mercer offer?" },
  { from: 'tau', text: "Nothing here is saved. Honestly? The number is fine; the reporting line isn't. You've left two roles for the same reason before." }] :
  [
  { from: 'tau', text: "Good morning. You mentioned last Tuesday that you'd hear back from Mercer this week — did they reply?" },
  { from: 'me', text: "Not yet. Still waiting." },
  { from: 'tau', text: "Want me to draft a follow-up? You wrote to them at 9:12pm last time, which is likely why it slipped past business hours." },
  { from: 'me', text: "Yes. Keep it short, no pleasantries." },
  { from: 'tau', text: "Noted — that's how you've asked for emails the last four times. I'll keep the tone you had with Dana in March: three sentences, no sign-off beyond your name.", streamed: streaming }];


  return (
    <TauDevice>
      {/* Chat top bar — wordmark + known-for · memories (prominent) + settings (discreet) */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 22px 18px', marginTop: 40
      }}>
        <div>
          <img src="tau-logo.png" alt="TAU" style={{ height: 17, width: 'auto', display: 'block' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {/* Memories — icon only, no chip */}
          <button data-nav="memories" style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'transparent', border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 0, cursor: 'pointer'
          }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d="M11 3l7 3.5-7 3.5-7-3.5L11 3z" stroke={TAU.ink} strokeWidth="1.4" strokeLinejoin="round" />
              <path d="M4 11l7 3.5 7-3.5" stroke={TAU.ink} strokeWidth="1.4" strokeLinejoin="round" />
              <path d="M4 15l7 3.5 7-3.5" stroke={TAU.dim} strokeWidth="1.4" strokeLinejoin="round" />
            </svg>
          </button>
          {/* Settings — icon only, no chip */}
          <button data-nav="settings" style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'transparent', border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 0, cursor: 'pointer'
          }}>
            <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
              <path d="M4 7h14M4 11h14M4 15h14" stroke={TAU.ink} strokeWidth="1.4" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </div>

      {/* Ephemeral banner (only in vanish mode) */}
      {ephemeral &&
      <div style={{ textAlign: 'center', padding: '0 32px 22px' }}>
          <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 14px', borderRadius: 999,
          border: `1px dashed ${TAU.borderHi}`,
          fontFamily: TAU.mono, fontSize: 11, letterSpacing: '0.14em',
          color: TAU.dim, textTransform: 'uppercase'
        }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
              <path d="M2 8s2.5-4.5 6-4.5S14 8 14 8s-2.5 4.5-6 4.5S2 8 2 8z" stroke={TAU.dim} strokeWidth="1.2" />
              <path d="M2 2l12 12" stroke={TAU.dim} strokeWidth="1.2" strokeLinecap="round" />
            </svg>
            Ephemeral · won't be saved · or use your memories
          </div>
        </div>
      }



      {/* Conversation — single thread, messages anchored to bottom */}
      <div style={{
        padding: '0 20px 130px',
        display: 'flex', flexDirection: 'column', gap: 18,
        flex: 1, justifyContent: 'flex-end',
      }}>
        {messages.map((m, i) =>
        <Bubble key={i} from={m.from} text={m.text} streamed={m.streamed} ephemeral={ephemeral} />
        )}

        {/* typing hint */}
        {!streaming &&
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2, paddingLeft: 2 }}>
            <Dot /><Dot delay={0.2} /><Dot delay={0.4} />
            <span style={{
            fontFamily: TAU.mono, fontSize: 10, color: TAU.faint,
            letterSpacing: '0.12em', marginLeft: 8, textTransform: 'uppercase'
          }}>thinking locally</span>
          </div>
        }
      </div>

      {/* Input bar */}
      <div style={{
        position: 'absolute', bottom: 34, left: 0, right: 0,
        padding: '12px 16px 0',
        background: `linear-gradient(to top, ${TAU.bg} 55%, rgba(0,0,0,0))`
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '12px 14px 12px 18px', borderRadius: 24,
          background: TAU.surface, border: `1px solid ${TAU.border}`
        }}>
          <div style={{
            flex: 1, fontSize: 15, color: TAU.faint, letterSpacing: -0.1
          }}>Message TAU</div>
          {/* mic */}
          <button style={{
            width: 32, height: 32, borderRadius: 999, background: 'transparent',
            border: 'none', padding: 0, display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <rect x="5.5" y="2" width="5" height="8.5" rx="2.5" stroke={TAU.dim} strokeWidth="1.3" />
              <path d="M3 8.5a5 5 0 0010 0M8 13.5v1.5" stroke={TAU.dim} strokeWidth="1.3" strokeLinecap="round" />
            </svg>
          </button>
          {/* send */}
          <button style={{
            width: 32, height: 32, borderRadius: 999,
            background: TAU.ink, border: 'none', padding: 0, display: 'flex',
            alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M7 11.5V2.5M3 6.5L7 2.5l4 4" stroke="#000" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
      </div>
    </TauDevice>);

}

function Bubble({ from, text, streamed, ephemeral }) {
  const isMe = from === 'me';
  return (
    <div style={{
      display: 'flex',
      justifyContent: isMe ? 'flex-end' : 'flex-start'
    }}>
      <div style={{
        maxWidth: '82%',
        padding: isMe ? '11px 16px' : '2px 2px',
        borderRadius: isMe ? 20 : 0,
        background: isMe ? TAU.surfaceHi : 'transparent',
        border: isMe ? `1px ${ephemeral ? 'dashed' : 'solid'} ${TAU.border}` : 'none',
        fontSize: 15.5, lineHeight: 1.45,
        color: TAU.ink,
        letterSpacing: -0.1,
        opacity: ephemeral && !isMe ? 0.92 : 1
      }}>
        {text}
        {streamed &&
        <span style={{
          display: 'inline-block', width: 8, height: 17, marginLeft: 3,
          verticalAlign: 'text-bottom', background: TAU.ink,
          animation: 'tauPulse 1s steps(2) infinite'
        }} />
        }
      </div>
    </div>);

}

function Dot({ delay = 0 }) {
  return (
    <div style={{
      width: 5, height: 5, borderRadius: 99, background: TAU.ghost,
      animation: `tauPulse 1.4s ${delay}s infinite ease-in-out`
    }} />);

}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 2 · MEMORIES — list of memory cards
// ═══════════════════════════════════════════════════════════════════════════
function TauMemories() {
  const groups = [
  {
    cat: 'Work',
    count: 86,
    items: [
    { date: 'TODAY', time: '09:12', src: 'Chat', title: 'You prefer three-sentence emails, no sign-off beyond your name.' },
    { date: 'APR 09', time: '17:02', src: 'Chat', title: "You're shipping TAU at Vecorps — private beta targeted for Q3.", pinned: true }]

  },
  {
    cat: 'Habit',
    count: 41,
    items: [
    { date: 'YESTERDAY', time: '22:48', src: 'Inferred', title: 'You draft important replies between 21:00 and 23:00.' }]

  },
  {
    cat: 'Personal',
    count: 73,
    items: [
    { date: 'APR 14', time: '14:30', src: 'Chat', title: "Your partner's name is Léa. Anniversary on June 3.", pinned: true }]

  },
  {
    cat: 'Preference',
    count: 47,
    items: [
    { date: 'APR 11', time: '08:55', src: 'Inferred', title: 'You dislike being asked clarifying questions more than once.' }]

  }];


  return (
    <TauDevice>
      <TauHeader title="Memories" showBack />

      {/* Stats strip */}
      <div style={{
        display: 'flex', padding: '0 24px 20px',
        gap: 12
      }}>
        <StatCell label="Total" value="247" />
        <StatCell label="This week" value="18" />
        <StatCell label="Storage" value="12.4 MB" />
      </div>

      {/* Grouped list */}
      <div style={{
        padding: '0 16px 140px',
        display: 'flex', flexDirection: 'column', gap: 24,
        height: 'calc(100% - 220px)', overflow: 'auto'
      }}>
        {groups.map((g, gi) =>
        <div key={gi} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '0 4px 2px'
          }}>
              <span style={{
              fontFamily: TAU.mono, fontSize: 10, letterSpacing: '0.22em',
              color: TAU.dim, textTransform: 'uppercase'
            }}>{g.cat}</span>
              <span style={{
              fontFamily: TAU.mono, fontSize: 10, letterSpacing: '0.1em',
              color: TAU.ghost
            }}>{g.count}</span>
              <div style={{ flex: 1, height: 1, background: TAU.border }} />
            </div>
            {g.items.map((m, i) => <MemoryCard key={i} {...m} />)}
          </div>
        )}
      </div>
    </TauDevice>);

}

function StatCell({ label, value }) {
  return (
    <div style={{
      flex: 1,
      padding: '14px 14px',
      borderRadius: 12,
      background: TAU.surface,
      border: `1px solid ${TAU.border}`
    }}>
      <div style={{
        fontFamily: TAU.mono, fontSize: 10, letterSpacing: '0.14em',
        color: TAU.faint, textTransform: 'uppercase', marginBottom: 6
      }}>{label}</div>
      <div style={{
        fontFamily: TAU.font, fontSize: 20, fontWeight: 500,
        color: TAU.ink, letterSpacing: -0.4
      }}>{value}</div>
    </div>);

}

function MemoryCard({ date, time, src, title, pinned }) {
  return (
    <div style={{
      padding: '14px 16px',
      borderRadius: 14,
      background: TAU.surface,
      border: `1px solid ${TAU.border}`,
      position: 'relative'
    }}>
      <div style={{
        fontSize: 14.5, lineHeight: 1.4, color: TAU.ink,
        letterSpacing: -0.15, fontWeight: 400,
        marginBottom: 10, paddingRight: 26
      }}>{title}</div>
      {/* meta row */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8
      }}>
        <span style={{
          fontFamily: TAU.mono, fontSize: 9.5, letterSpacing: '0.16em',
          color: TAU.faint, textTransform: 'uppercase'
        }}>{date} · {time}</span>
        <span style={{ width: 3, height: 3, borderRadius: 99, background: TAU.ghost }} />
        <span style={{
          fontFamily: TAU.mono, fontSize: 9.5, letterSpacing: '0.12em',
          color: TAU.dim, textTransform: 'uppercase'
        }}>{src}</span>
        {pinned &&
        <>
            <span style={{ width: 3, height: 3, borderRadius: 99, background: TAU.ghost }} />
            <span style={{
            fontFamily: TAU.mono, fontSize: 9.5, letterSpacing: '0.12em',
            color: TAU.dim, textTransform: 'uppercase'
          }}>Pinned</span>
          </>
        }
        <div style={{ flex: 1 }} />
        {/* edit hint */}
        <span style={{
          fontFamily: TAU.mono, fontSize: 9, letterSpacing: '0.12em',
          color: TAU.ghost, textTransform: 'uppercase'
        }}>Tap to edit</span>
      </div>
      {/* delete */}
      <button style={{
        position: 'absolute', top: 12, right: 12,
        width: 22, height: 22, borderRadius: 6,
        background: 'transparent', border: 'none', padding: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer'
      }}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
          <path d="M3 3l6 6M9 3l-6 6" stroke={TAU.faint} strokeWidth="1.2" strokeLinecap="round" />
        </svg>
      </button>
    </div>);

}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 3 · SETTINGS
// ═══════════════════════════════════════════════════════════════════════════
function TauSettings({ pro = false, showDialog = false }) {
  return (
    <TauDevice>
      <TauHeader title="Settings" showBack />

      <div style={{
        padding: '0 16px 120px',
        display: 'flex', flexDirection: 'column', gap: 28,
        height: 'calc(100% - 120px)', overflow: 'auto'
      }}>
        {/* Identity */}
        <SettingsGroup label="Identity">
          <SettingsRow
            label="Name"
            value="Hadrien Pélissier" />
          
          <SettingsRow
            label="Device"
            value="iPhone 15 Pro"
            muted
            last />
          
        </SettingsGroup>

        {/* Plan */}
        <SettingsGroup label="Plan">
          {pro ?
          <>
              <SettingsRow label="Status" value="Pro" badge />
              <SettingsRow label="Messages" value="Unlimited" muted />
              <SettingsRow label="Billed" value="€9 / month" muted />
              <SettingsRow label="Next charge" value="May 19, 2026" muted />
              <SettingsRow label="Manage billing" value="" chevron last />
            </> :

          <>
              <SettingsRow label="Status" value="Free" />
              <SettingsRow label="Messages" value="Limited" muted />
              <SettingsRow label="Memory cap" value="250 entries" muted />
              <div style={{ padding: '14px 16px', borderTop: `1px solid ${TAU.border}` }}>
                <button style={{
                width: '100%', padding: '13px 16px', borderRadius: 10,
                background: TAU.ink, color: '#000', border: 'none',
                fontFamily: TAU.font, fontSize: 14, fontWeight: 500,
                letterSpacing: -0.1, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between'
              }}>
                  <span>Upgrade to TAU Pro</span>
                  <span style={{ fontFamily: TAU.mono, fontSize: 12, opacity: 0.6 }}>€9 / MO →</span>
                </button>
                <div style={{
                fontFamily: TAU.mono, fontSize: 10, color: TAU.faint,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                marginTop: 10, textAlign: 'center'
              }}>Unlimited memory · priority updates</div>
              </div>
            </>
          }
        </SettingsGroup>

        {/* Behavior */}
        <SettingsGroup label="Behavior">
          <SettingsRow label="Remember automatically" toggle toggled />
          <SettingsRow label="App language" value="English" chevron last />
        </SettingsGroup>

        {/* About & legal */}
        <SettingsGroup label="About">
          <SettingsRow label="Privacy policy" value="" chevron />
          <SettingsRow label="Version" value="0.3.1 · 248" muted last />
        </SettingsGroup>

        {/* Destructive */}
        <div style={{ padding: '0 2px' }}>
          <button style={{
            width: '100%', padding: '14px 16px', borderRadius: 12,
            background: 'rgba(229,106,106,0.08)',
            border: `1px solid rgba(229,106,106,0.22)`,
            color: TAU.danger, cursor: 'pointer',
            fontFamily: TAU.font, fontSize: 14, fontWeight: 500,
            letterSpacing: -0.1
          }}>Clear all memories</button>
          <div style={{
            fontFamily: TAU.mono, fontSize: 10, color: TAU.faint,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            marginTop: 10, textAlign: 'center', lineHeight: 1.6
          }}>This cannot be undone.<br />TAU will forget everything it has learned.</div>
        </div>

        {/* Footer */}
        <div style={{
          textAlign: 'center', padding: '20px 0 0',
          fontFamily: TAU.mono, fontSize: 10, color: TAU.faint,
          letterSpacing: '0.14em', textTransform: 'uppercase'
        }}>
          TAU v0.3.1 · Build 248<br />
          <span style={{ color: 'rgba(245,245,242,0.22)' }}>VECORPS TECHNOLOGIES · APACHE 2.0</span>
        </div>
      </div>

      {showDialog && <ClearConfirmDialog />}
    </TauDevice>);

}

function SettingsGroup({ label, children }) {
  return (
    <div>
      <div style={{
        fontFamily: TAU.mono, fontSize: 10, letterSpacing: '0.18em',
        color: TAU.faint, textTransform: 'uppercase',
        padding: '0 18px 10px'
      }}>{label}</div>
      <div style={{
        borderRadius: 14,
        background: TAU.surface,
        border: `1px solid ${TAU.border}`,
        overflow: 'hidden'
      }}>{children}</div>
    </div>);

}

function SettingsRow({ label, value, muted, badge, chevron, toggle, toggled, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      padding: '14px 18px',
      borderBottom: last ? 'none' : `1px solid ${TAU.border}`,
      minHeight: 52, boxSizing: 'border-box'
    }}>
      <div style={{
        flex: 1, fontSize: 14.5, color: TAU.ink,
        letterSpacing: -0.15
      }}>{label}</div>
      {badge &&
      <div style={{
        fontFamily: TAU.mono, fontSize: 10, letterSpacing: '0.18em',
        color: TAU.ink, textTransform: 'uppercase',
        padding: '3px 8px', borderRadius: 4, background: 'rgba(245,245,242,0.08)',
        border: `1px solid ${TAU.borderHi}`
      }}>PRO</div>
      }
      {value !== undefined && value !== '' && !badge &&
      <div style={{
        fontSize: 14, color: muted ? TAU.dim : TAU.ink,
        fontFamily: /\d|·/.test(value) ? TAU.mono : TAU.font,
        letterSpacing: -0.1
      }}>{value}</div>
      }
      {chevron &&
      <svg width="8" height="13" viewBox="0 0 8 13" fill="none" style={{ marginLeft: 10 }}>
          <path d="M1 1l6 5.5L1 12" stroke={TAU.faint} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      }
      {toggle &&
      <div style={{
        width: 40, height: 24, borderRadius: 999,
        background: toggled ? TAU.ink : TAU.surfaceHi,
        border: `1px solid ${toggled ? TAU.ink : TAU.borderHi}`,
        position: 'relative', transition: '150ms'
      }}>
          <div style={{
          position: 'absolute', top: 2, left: toggled ? 18 : 2,
          width: 18, height: 18, borderRadius: 999,
          background: toggled ? '#000' : 'rgba(245,245,242,0.6)',
          transition: '150ms'
        }} />
        </div>
      }
    </div>);

}

// Confirmation dialog overlay
function ClearConfirmDialog() {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 80,
      background: 'rgba(0,0,0,0.6)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 24px'
    }}>
      <div style={{
        width: '100%', background: TAU.surface,
        borderRadius: 18, padding: '24px 22px 18px',
        border: `1px solid ${TAU.borderHi}`,
        boxShadow: '0 30px 60px rgba(0,0,0,0.5)'
      }}>
        <div style={{
          fontFamily: TAU.font, fontSize: 17, fontWeight: 500,
          color: TAU.ink, letterSpacing: -0.3, marginBottom: 8
        }}>Clear all memories?</div>
        <div style={{
          fontSize: 13.5, lineHeight: 1.5, color: TAU.dim,
          letterSpacing: -0.05, marginBottom: 20
        }}>TAU will forget everything it has learned about you — 247 entries, 12 days of context. This action cannot be undone.</div>

        {/* type-to-confirm */}
        <div style={{
          padding: '10px 12px', borderRadius: 8,
          background: TAU.bg, border: `1px solid ${TAU.border}`,
          marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8
        }}>
          <span style={{
            fontFamily: TAU.mono, fontSize: 11, color: TAU.faint,
            letterSpacing: '0.12em', textTransform: 'uppercase'
          }}>Type</span>
          <span style={{
            fontFamily: TAU.mono, fontSize: 12, color: TAU.ink,
            padding: '2px 6px', background: 'rgba(245,245,242,0.06)',
            borderRadius: 4, letterSpacing: '0.04em'
          }}>forget</span>
          <span style={{
            fontFamily: TAU.mono, fontSize: 11, color: TAU.faint,
            letterSpacing: '0.12em', textTransform: 'uppercase'
          }}>to confirm</span>
        </div>

        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: '13px 16px', borderRadius: 10,
            background: 'transparent', border: `1px solid ${TAU.borderHi}`,
            color: TAU.ink, cursor: 'pointer',
            fontFamily: TAU.font, fontSize: 14, fontWeight: 500,
            letterSpacing: -0.1
          }}>Cancel</button>
          <button style={{
            flex: 1, padding: '13px 16px', borderRadius: 10,
            background: TAU.danger, border: 'none',
            color: '#0A0A0A', cursor: 'pointer',
            fontFamily: TAU.font, fontSize: 14, fontWeight: 500,
            letterSpacing: -0.1, opacity: 0.5
          }}>Forget everything</button>
        </div>
      </div>
    </div>);

}

Object.assign(window, { TauDevice, TauChat, TauMemories, TauSettings, TAU });