// Screen designs for Demenskalender Family-app

// ── Sidebar (desktop + mobile drawer) ──────────────────────────────
const Sidebar = ({ active = 'dashboard' }) => {
  const [open, setOpen] = React.useState(false);
  const items = [
    { id: 'dashboard', label: 'Hjem',           icon: 'home' },
    { id: 'edit',      label: 'Rediger indhold',icon: 'edit' },
    { id: 'docs',      label: 'Dokumenter',     icon: 'folder' },
  ];

  // close drawer on resize to desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 760) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <React.Fragment>
      {/* Mobile burger button (top-left, fixed) */}
      <button
        className="app-burger"
        onClick={() => setOpen(true)}
        aria-label="Åbn menu"
        style={{
          position: 'fixed', top: 12, left: 12, zIndex: 40,
          width: 42, height: 42, borderRadius: 10,
          background: TOKENS.surface, border: `1px solid ${TOKENS.border}`,
          display: 'none', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', padding: 0,
          boxShadow: '0 2px 6px rgba(20,30,50,0.06)',
        }}>
        <span style={{ display: 'block', width: 18, height: 2, background: TOKENS.ink, position: 'relative' }}>
          <span style={{ position: 'absolute', top: -6, left: 0, width: 18, height: 2, background: TOKENS.ink }} />
          <span style={{ position: 'absolute', top: 6, left: 0, width: 18, height: 2, background: TOKENS.ink }} />
        </span>
      </button>

      {/* Backdrop (mobile only when open) */}
      {open && <div onClick={() => setOpen(false)} className="app-sidebar-backdrop" style={{
        position: 'fixed', inset: 0, background: 'rgba(20,30,50,0.45)', zIndex: 50,
      }} />}

      <aside className={`app-sidebar ${open ? 'is-open' : ''}`} style={{
        width: 240, flexShrink: 0, height: '100%',
        background: TOKENS.surface, borderRight: `1px solid ${TOKENS.border}`,
        display: 'flex', flexDirection: 'column', padding: '22px 16px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 6px 22px' }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8, background: TOKENS.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
            fontFamily: TOKENS.fontDisplay, fontWeight: 700, fontSize: 14,
          }}>D</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="app-display" style={{ fontWeight: 600, fontSize: 15, lineHeight: 1.2 }}>Demenskalender</div>
            <div style={{ fontSize: 11, color: TOKENS.inkSoft }}>Hos Jette Madsen</div>
          </div>
          {/* Close button — mobile only */}
          <button
            onClick={() => setOpen(false)}
            aria-label="Luk menu"
            className="app-sidebar-close"
            style={{
              width: 32, height: 32, borderRadius: 8, border: 'none',
              background: 'transparent', cursor: 'pointer', padding: 0,
              display: 'none', alignItems: 'center', justifyContent: 'center',
              color: TOKENS.inkMuted,
            }}>
            <Icon name="x" size={18} />
          </button>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {items.map(it => {
            const isActive = it.id === active;
            const handleClick = () => {
              if (!window.__APP_NAV__) { setOpen(false); return; }
              if (it.id === 'dashboard') location.href = window.__APP_NAV__.home;
              if (it.id === 'edit') location.href = window.__APP_NAV__.edit;
              if (it.id === 'docs') location.href = window.__APP_NAV__.docs;
            };
            return (
              <div key={it.id} onClick={handleClick} style={{
                display: 'flex', alignItems: 'center', gap: 11,
                padding: '9px 12px', borderRadius: 8, cursor: 'pointer',
                background: isActive ? TOKENS.primarySoft : 'transparent',
                color: isActive ? TOKENS.primaryHover : TOKENS.inkMuted,
                fontWeight: isActive ? 500 : 400, fontSize: 14,
              }}>
                <Icon name={it.icon} size={17} />
                <span>{it.label}</span>
              </div>
            );
          })}
        </nav>
        <div style={{ marginTop: 'auto', padding: 12, background: TOKENS.surfaceAlt, borderRadius: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: TOKENS.success }} />
            <span style={{ fontSize: 12, fontWeight: 500 }}>Skærm online</span>
          </div>
          <div style={{ fontSize: 11, color: TOKENS.inkSoft, lineHeight: 1.4 }}>
            Sidst opdateret 14:32<br/>Bevægelse 09:04
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 6px 0', marginTop: 12 }}>
          <Avatar name="Lene M." tone="teal" size={28} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Lene M.</div>
            <div style={{ fontSize: 11, color: TOKENS.inkSoft }}>Datter</div>
          </div>
          <Icon name="settings" size={15} color={TOKENS.inkSoft} />
        </div>
      </aside>
    </React.Fragment>
  );
};

// ── Top bar ─────────────────────────────────────────────────────────
const CITIZEN_NAME = "Hos Jette Madsen";
const TopBar = ({ title, subtitle, actions }) => (
  <div className="app-topbar" style={{
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    padding: '24px 32px 18px', borderBottom: `1px solid ${TOKENS.border}`,
    background: TOKENS.bg,
  }}>
    <div style={{ minWidth: 0 }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600,
        letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6,
        background: TOKENS.surfaceAlt, padding: '3px 8px', borderRadius: 999,
      }}>
        <Icon name="user" size={11} color={TOKENS.inkSoft} />
        {CITIZEN_NAME}
      </div>
      {subtitle && subtitle !== CITIZEN_NAME && (
        <div style={{ fontSize: 12, color: TOKENS.inkSoft, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4 }}>
          {subtitle}
        </div>
      )}
      <h1 className="app-display" style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>{title}</h1>
    </div>
    {actions && <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>{actions}</div>}
  </div>
);

// ── Screen Preview (kompakt tekst-version af storskærmen) ─────────
const ScreenPreview = ({ compact, onEdit }) => (
  <div className="app-card" style={{
    background: '#1B2333', color: '#F4F1EA', borderColor: '#1B2333',
    padding: 20, borderRadius: 14,
    fontFamily: TOKENS.fontDisplay,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: 0.7, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        <Icon name="screen" size={13} /> Storskærmen viser nu
      </div>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#7BB07B' }} />
    </div>

    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
      <div>
        <div style={{ fontSize: 13, opacity: 0.6, fontWeight: 500 }}>{TODAY.weekday}</div>
        <div style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{TODAY.date}</div>
      </div>
      <div style={{ fontSize: 32, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>09:42</div>
    </div>

    {/* Aftaler */}
    <div style={{ marginBottom: 14 }}>
      <SectionLabel>Aftaler i dag</SectionLabel>
      {TODAY.appointments.map(a => (
        <div key={a.id} style={{ display: 'flex', gap: 12, padding: '8px 0', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ fontSize: 14, fontWeight: 600, opacity: 0.95, width: 44, fontVariantNumeric: 'tabular-nums' }}>{a.time}</div>
          <div style={{ fontSize: 13, opacity: 0.85 }}>{a.title}</div>
        </div>
      ))}
    </div>

    {/* Huskeseddel */}
    <div style={{ marginBottom: 14 }}>
      <SectionLabel>Huskeseddel</SectionLabel>
      {TODAY.notes.slice(0, compact ? 2 : 3).map(n => (
        <div key={n.id} style={{ display: 'flex', gap: 10, padding: '7px 0', borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 13, opacity: 0.85 }}>
          <span style={{ opacity: 0.4 }}>—</span>
          <span>{n.text}</span>
        </div>
      ))}
    </div>

    <div style={{ marginBottom: 16 }}>
      <SectionLabel>Fødselsdag</SectionLabel>
      <div style={{ paddingTop: 7, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 13, opacity: 0.85 }}>
        Morten fylder 32 om 4 dage
      </div>
    </div>

    <button className="app-btn" onClick={onEdit} style={{
      width: '100%', background: 'rgba(255,255,255,0.1)', color: '#F4F1EA',
      padding: '11px', borderRadius: 9, fontSize: 13, fontWeight: 500,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: TOKENS.fontBody,
    }}>
      <Icon name="edit" size={14} /> Rediger indhold
    </button>
  </div>
);

const SectionLabel = ({ children }) => (
  <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.55, fontWeight: 600, marginBottom: 4 }}>
    {children}
  </div>
);

// ── DASHBOARD ───────────────────────────────────────────────────────
const DashboardScreen = () => (
  <div style={{ display: 'flex', height: '100%', background: TOKENS.bg, fontFamily: TOKENS.fontBody }} className="app-root">
    <Sidebar active="dashboard" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
      <TopBar
        subtitle="Torsdag · 8. maj"
        title="Hjem"
        actions={[
          <Button key="1" variant="secondary" icon="phone" size="md">Start videoopkald</Button>,
        ]}
      />
      <div className="app-scroll app-grid-main" style={{ flex: 1, overflow: 'auto', padding: 32, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24 }}>
        {/* Main column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, minWidth: 0 }}>
          {/* Quick stats */}
          <div className="app-stats-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            <StatCard icon="calendar" label="Aftaler i dag" value="2" hint="næste kl 10:00" />
            <StatCard icon="note" label="Aktive noter" value="3" hint="senest i går" />
            <StatCard icon="cake" label="Fødselsdag" value="4 dage" hint="Morten — 32 år" />
          </div>

          {/* Daily routines (faste opgaver) */}
          <div className="app-card" style={{ padding: 20 }}>
            <CardHeader title="Faste opgaver" subtitle="Sker hver dag" action={<Button variant="ghost" size="sm" icon="plus">Tilføj</Button>} />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {TODAY.routines.map((r, i) => {
                const tone = r.type === 'pille' ? 'rose' : r.type === 'pleje' ? 'olive' : 'teal';
                const icon = r.type === 'pille' ? 'pill' : r.type === 'pleje' ? 'nurse' : 'droplet';
                const toneBg = tone === 'rose' ? '#EDD3CE' : tone === 'olive' ? '#DCE2C7' : '#D8E7E9';
                const toneFg = tone === 'rose' ? '#7A3F37' : tone === 'olive' ? '#5C6638' : '#2F5C61';
                return (
                  <div key={r.id} style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '12px 0',
                    borderTop: i === 0 ? 'none' : `1px solid ${TOKENS.border}`,
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 10, background: toneBg, color: toneFg,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>
                      <Icon name={icon} size={18} color={toneFg} />
                    </div>
                    <div style={{
                      width: 56, fontFamily: TOKENS.fontDisplay, fontSize: 15, fontWeight: 600,
                      fontVariantNumeric: 'tabular-nums', color: TOKENS.ink,
                    }}>{r.time}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{r.title}</div>
                      <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 2 }}>{r.who}</div>
                    </div>
                    <Icon name="edit" size={15} color={TOKENS.inkSoft} />
                  </div>
                );
              })}
            </div>
          </div>

          {/* Today's appointments */}
          <div className="app-card" style={{ padding: 20 }}>
            <CardHeader title="Dagens aftaler" action={<Button variant="ghost" size="sm" icon="plus">Tilføj</Button>} />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {TODAY.appointments.map((a, i) => (
                <div key={a.id} style={{
                  display: 'flex', alignItems: 'center', gap: 16,
                  padding: '14px 0',
                  borderTop: i === 0 ? 'none' : `1px solid ${TOKENS.border}`,
                }}>
                  <div style={{
                    width: 56, fontFamily: TOKENS.fontDisplay, fontSize: 17, fontWeight: 600,
                    fontVariantNumeric: 'tabular-nums', color: TOKENS.ink,
                  }}>{a.time}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{a.title}</div>
                    <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 2 }}>{a.who}</div>
                  </div>
                  <Pill tone={a.tone}>{a.tone === 'primary' ? 'Besøg' : 'Aftale'}</Pill>
                  <Icon name="edit" size={15} color={TOKENS.inkSoft} />
                </div>
              ))}
            </div>
          </div>

          {/* Notes */}
          <div className="app-card" style={{ padding: 20 }}>
            <CardHeader title="Huskeseddel" action={<Button variant="ghost" size="sm" icon="plus">Tilføj note</Button>} />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {TODAY.notes.map((n, i) => (
                <div key={n.id} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '12px 0',
                  borderTop: i === 0 ? 'none' : `1px solid ${TOKENS.border}`,
                }}>
                  <div style={{
                    width: 6, height: 6, borderRadius: '50%', background: TOKENS.accent,
                  }} />
                  <div style={{ flex: 1, fontSize: 14 }}>{n.text}</div>
                  <div style={{ fontSize: 12, color: TOKENS.inkSoft }}>{n.by} · {n.when}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right rail */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, minWidth: 0 }}>
          <ScreenPreview compact onEdit={() => window.__APP_NAV__ && (location.href = window.__APP_NAV__.edit)} />

          <div className="app-card" style={{ padding: 18 }}>
            <CardHeader title="Aktivitet" small />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 4 }}>
              {ACTIVITY.slice(0, 4).map((a, i) => (
                <div key={i} style={{ display: 'flex', gap: 10 }}>
                  <Avatar name={a.who} tone={a.tone} size={26} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 12.5, lineHeight: 1.4 }}>
                      <span style={{ fontWeight: 500 }}>{a.who.split(' ')[0]}</span>{' '}
                      <span style={{ color: TOKENS.inkMuted }}>{a.action}</span>
                    </div>
                    <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 1 }}>{a.detail}</div>
                    <div style={{ fontSize: 11, color: TOKENS.inkSoft, marginTop: 2 }}>{a.when}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const StatCard = ({ icon, label, value, hint }) => (
  <div className="app-card" style={{ padding: 16 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: TOKENS.inkMuted, marginBottom: 10 }}>
      <Icon name={icon} size={15} />
      <span style={{ fontSize: 12, fontWeight: 500 }}>{label}</span>
    </div>
    <div className="app-display" style={{ fontSize: 26, fontWeight: 600, lineHeight: 1 }}>{value}</div>
    <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 6 }}>{hint}</div>
  </div>
);

const CardHeader = ({ title, subtitle, action, small }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: small ? 10 : 14, gap: 12 }}>
    <div style={{ minWidth: 0 }}>
      <h3 className="app-display" style={{ margin: 0, fontSize: small ? 14 : 16, fontWeight: 600 }}>{title}</h3>
      {subtitle && <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 2 }}>{subtitle}</div>}
    </div>
    {action}
  </div>
);

// ── CALENDAR ────────────────────────────────────────────────────────
const CalendarScreen = () => {
  const days = ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'];
  const weekDays = [
    { d: 5, day: 'Man', date: '5 maj' },
    { d: 6, day: 'Tir', date: '6 maj' },
    { d: 7, day: 'Ons', date: '7 maj' },
    { d: 8, day: 'Tor', date: '8 maj', today: true },
    { d: 9, day: 'Fre', date: '9 maj' },
    { d: 10, day: 'Lør', date: '10 maj' },
    { d: 11, day: 'Søn', date: '11 maj' },
  ];
  const events = [
    { day: 8, time: '10:00', dur: 1.5, title: 'Lene på besøg', tone: 'primary' },
    { day: 8, time: '14:30', dur: 1, title: 'Øjenlæge', tone: 'accent' },
    { day: 9, time: '11:00', dur: 1, title: 'Hjemmeplejen', tone: 'olive' },
    { day: 10, time: '13:00', dur: 2, title: 'Kaffe m. Anna', tone: 'primary' },
    { day: 12, time: '12:00', dur: 1.5, title: 'Mortens fødselsdag', tone: 'accent' },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', background: TOKENS.bg, fontFamily: TOKENS.fontBody }} className="app-root">
      <Sidebar active="calendar" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopBar
          subtitle="Maj 2026 · uge 19"
          title="Kalender"
          actions={[
            <Button key="1" variant="secondary" size="md" icon="chevronLeft">{null}</Button>,
            <Button key="2" variant="secondary" size="md" iconRight="chevronRight">{null}</Button>,
            <Button key="3" variant="primary" size="md" icon="plus">Ny aftale</Button>,
          ]}
        />
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 360px', minHeight: 0 }}>
          {/* Week grid */}
          <div className="app-scroll" style={{ overflow: 'auto', padding: 24 }}>
            <div className="app-card" style={{ padding: 0, overflow: 'hidden' }}>
              {/* Week header */}
              <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(7, 1fr)', borderBottom: `1px solid ${TOKENS.border}` }}>
                <div />
                {weekDays.map(w => (
                  <div key={w.d} style={{
                    padding: '14px 8px', textAlign: 'center',
                    background: w.today ? TOKENS.primarySoft : 'transparent',
                  }}>
                    <div style={{ fontSize: 11, color: w.today ? TOKENS.primaryHover : TOKENS.inkSoft, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>{w.day}</div>
                    <div className="app-display" style={{ fontSize: 18, fontWeight: 600, color: w.today ? TOKENS.primaryHover : TOKENS.ink, marginTop: 2 }}>{w.d}</div>
                  </div>
                ))}
              </div>
              {/* Hours */}
              <div style={{ position: 'relative' }}>
                {[8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((h, idx) => (
                  <div key={h} style={{
                    display: 'grid', gridTemplateColumns: '60px repeat(7, 1fr)',
                    borderTop: idx === 0 ? 'none' : `1px solid ${TOKENS.border}`,
                    height: 56,
                  }}>
                    <div style={{ padding: '4px 10px', fontSize: 11, color: TOKENS.inkSoft, fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{h}:00</div>
                    {weekDays.map(w => (
                      <div key={w.d} style={{ borderLeft: `1px solid ${TOKENS.border}`, position: 'relative' }}>
                        {events.filter(e => e.day === w.d && parseInt(e.time) === h).map((e, i) => {
                          const tones = {
                            primary: { bg: TOKENS.primarySoft, fg: TOKENS.primaryHover, bar: TOKENS.primary },
                            accent:  { bg: TOKENS.accentSoft, fg: '#7A5418', bar: TOKENS.accent },
                            olive:   { bg: '#E5EAD7', fg: '#5C6638', bar: '#7A8A4E' },
                          };
                          const t = tones[e.tone];
                          return (
                            <div key={i} style={{
                              position: 'absolute', left: 4, right: 4, top: 4,
                              height: e.dur * 56 - 8,
                              background: t.bg, borderLeft: `3px solid ${t.bar}`,
                              borderRadius: 6, padding: '6px 8px',
                              fontSize: 11, color: t.fg, fontWeight: 500,
                            }}>
                              <div>{e.title}</div>
                              <div style={{ opacity: 0.7, fontSize: 10, marginTop: 1 }}>{e.time}</div>
                            </div>
                          );
                        })}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right: edit panel */}
          <div style={{ borderLeft: `1px solid ${TOKENS.border}`, background: TOKENS.surface, padding: 24, overflow: 'auto' }} className="app-scroll">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
              <Icon name="plus" size={16} color={TOKENS.primary} />
              <h3 className="app-display" style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>Ny aftale</h3>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Field label="Titel">
                <input className="app-input" defaultValue="Øjenlæge" />
              </Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Field label="Dato"><input className="app-input" defaultValue="8. maj 2026" /></Field>
                <Field label="Tidspunkt"><input className="app-input" defaultValue="14:30" /></Field>
              </div>
              <Field label="Sted (vises på skærm)">
                <input className="app-input" defaultValue="Aalborg Sygehus" />
              </Field>
              <Field label="Note til Jette">
                <textarea className="app-input" rows={2} defaultValue="Husk brillerne til øjenlægen" style={{ resize: 'none', fontFamily: 'inherit' }} />
              </Field>
              <Field label="Påmindelse">
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {['Ingen', '15 min før', '1 t før', 'Morgenen før'].map((p, i) => (
                    <div key={p} style={{
                      padding: '7px 12px', borderRadius: 999, fontSize: 12,
                      border: `1px solid ${i === 2 ? TOKENS.primary : TOKENS.border}`,
                      background: i === 2 ? TOKENS.primarySoft : TOKENS.surface,
                      color: i === 2 ? TOKENS.primaryHover : TOKENS.inkMuted,
                      fontWeight: i === 2 ? 500 : 400, cursor: 'pointer',
                    }}>{p}</div>
                  ))}
                </div>
              </Field>
              <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
                <Button variant="primary" size="md" full>Gem aftale</Button>
                <Button variant="secondary" size="md">Annullér</Button>
              </div>

              <div style={{ marginTop: 18, padding: 14, background: TOKENS.surfaceAlt, borderRadius: 10, fontSize: 12, color: TOKENS.inkMuted, lineHeight: 1.5 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                  <Icon name="screen" size={13} />
                  <span style={{ fontWeight: 500, color: TOKENS.ink }}>På storskærmen</span>
                </div>
                Aftalen vises kl. <strong>14:30</strong> sammen med noten "Husk brillerne". Jette bliver mindet om aftalen 1 time før.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, children }) => (
  <div>
    <div style={{ fontSize: 11, color: TOKENS.inkMuted, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
    {children}
  </div>
);

// ── NOTES (Huskeseddel) ────────────────────────────────────────────
const NotesScreen = () => {
  const all = [
    { id: 1, text: 'Drik et stort glas vand om morgenen', by: 'Lene M.', tone: 'teal', when: 'i går 09:12', shown: true, edits: 1 },
    { id: 2, text: 'Skraldemand kommer fredag', by: 'Anna S.', tone: 'rose', when: '2 dage siden', shown: true, edits: 2 },
    { id: 3, text: 'Vandkanden står på køkkenbordet', by: 'Lene M.', tone: 'teal', when: '3 dage siden', shown: true, edits: 1 },
    { id: 4, text: 'Avisen kommer hver morgen kl 7', by: 'Anna S.', tone: 'rose', when: 'sidste uge', shown: false, edits: 1 },
    { id: 5, text: 'Hjemmeplejen har nøgle', by: 'Sofie (pleje)', tone: 'olive', when: '2 uger siden', shown: false, edits: 1 },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', background: TOKENS.bg, fontFamily: TOKENS.fontBody }} className="app-root">
      <Sidebar active="notes" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopBar
          subtitle="3 vises på storskærmen"
          title="Huskeseddel"
          actions={[
            <Button key="1" variant="primary" size="md" icon="plus">Ny note</Button>,
          ]}
        />
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 320px', minHeight: 0 }}>
          <div className="app-scroll" style={{ overflow: 'auto', padding: 32 }}>
            {/* Add note inline */}
            <div className="app-card" style={{ padding: 18, marginBottom: 22, borderColor: TOKENS.primary, borderStyle: 'dashed' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <Avatar name="Lene M." tone="teal" size={32} />
                <div style={{ flex: 1 }}>
                  <textarea
                    placeholder="Skriv en note til Jette…"
                    className="app-input"
                    style={{ resize: 'none', fontFamily: 'inherit', fontSize: 15, border: 'none', padding: 0, background: 'transparent' }}
                    rows={2}
                  />
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                    <div style={{ fontSize: 12, color: TOKENS.inkSoft }}>Vises straks på storskærmen</div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <Button variant="ghost" size="sm">Annullér</Button>
                      <Button variant="primary" size="sm">Tilføj</Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Active notes */}
            <SectionHeader>Vises på storskærmen</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
              {all.filter(n => n.shown).map(n => <NoteCard key={n.id} note={n} />)}
            </div>

            <SectionHeader>Skjulte noter</SectionHeader>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {all.filter(n => !n.shown).map(n => <NoteCard key={n.id} note={n} dim />)}
            </div>
          </div>

          <div style={{ borderLeft: `1px solid ${TOKENS.border}`, background: TOKENS.surface, padding: 24, overflow: 'auto' }} className="app-scroll">
            <ScreenPreview />
          </div>
        </div>
      </div>
    </div>
  );
};

const SectionHeader = ({ children }) => (
  <div style={{ fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>{children}</div>
);

const NoteCard = ({ note, dim }) => (
  <div className="app-card" style={{ padding: 14, opacity: dim ? 0.65 : 1 }}>
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <div style={{
        width: 6, height: 6, borderRadius: '50%', marginTop: 7,
        background: dim ? TOKENS.borderStrong : TOKENS.accent,
      }} />
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14.5, lineHeight: 1.45, marginBottom: 8 }}>{note.text}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5, color: TOKENS.inkSoft }}>
          <Avatar name={note.by} tone={note.tone} size={18} />
          <span>{note.by}</span>
          <span>·</span>
          <span>{note.when}</span>
          {note.edits > 1 && <><span>·</span><span>{note.edits} ændringer</span></>}
        </div>
      </div>
      <Icon name="edit" size={15} color={TOKENS.inkSoft} />
    </div>
  </div>
);

// ── MOBILE: Dashboard ──────────────────────────────────────────────
const MobileDashboard = () => (
  <div style={{
    height: '100%', background: TOKENS.bg, display: 'flex', flexDirection: 'column',
    fontFamily: TOKENS.fontBody,
  }} className="app-root">
    {/* Top */}
    <div style={{ padding: '40px 20px 14px', background: TOKENS.bg }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, color: TOKENS.inkSoft, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Torsdag · 8. maj</div>
          <h1 className="app-display" style={{ margin: '2px 0 0', fontSize: 22, fontWeight: 600 }}>Hej Lene</h1>
        </div>
        <Avatar name="Lene M." tone="teal" size={36} />
      </div>
    </div>

    <div className="app-scroll" style={{ flex: 1, overflow: 'auto', padding: '4px 16px 80px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* Compact preview */}
      <div className="app-card" style={{ background: '#1B2333', color: '#F4F1EA', borderColor: '#1B2333', padding: 16, borderRadius: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, opacity: 0.7, fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          <Icon name="screen" size={12} /> Storskærmen viser
          <span style={{ marginLeft: 'auto', width: 6, height: 6, borderRadius: '50%', background: '#7BB07B' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <div style={{ fontFamily: TOKENS.fontDisplay }}>
            <div style={{ fontSize: 12, opacity: 0.6 }}>Torsdag</div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>8. maj 2026</div>
          </div>
          <div style={{ fontSize: 24, fontWeight: 700, fontFamily: TOKENS.fontDisplay, fontVariantNumeric: 'tabular-nums' }}>09:42</div>
        </div>
        <div style={{ fontSize: 10, opacity: 0.55, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>Aftaler i dag</div>
        {TODAY.appointments.map((a, i) => (
          <div key={a.id} style={{ display: 'flex', gap: 10, padding: '6px 0', borderTop: i === 0 ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(255,255,255,0.08)', fontSize: 12.5 }}>
            <span style={{ fontWeight: 600, width: 38 }}>{a.time}</span>
            <span style={{ opacity: 0.85 }}>{a.title}</span>
          </div>
        ))}
        <button className="app-btn" style={{
          width: '100%', marginTop: 12, background: 'rgba(255,255,255,0.1)', color: '#F4F1EA',
          padding: 9, borderRadius: 8, fontSize: 12.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}><Icon name="edit" size={13} /> Rediger</button>
      </div>

      {/* Quick actions */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <QuickAction icon="plus" label="Ny aftale" />
        <QuickAction icon="note" label="Ny note" />
        <QuickAction icon="phone" label="Videoopkald" tone="primary" />
        <QuickAction icon="cake" label="Fødselsdage" />
      </div>

      {/* Activity */}
      <div className="app-card" style={{ padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <h3 className="app-display" style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Aktivitet</h3>
          <span style={{ fontSize: 12, color: TOKENS.primary, fontWeight: 500 }}>Se alle</span>
        </div>
        {ACTIVITY.slice(0, 3).map((a, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${TOKENS.border}` }}>
            <Avatar name={a.who} tone={a.tone} size={26} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5 }}>
                <span style={{ fontWeight: 500 }}>{a.who.split(' ')[0]}</span>{' '}
                <span style={{ color: TOKENS.inkMuted }}>{a.action}</span>
              </div>
              <div style={{ fontSize: 11.5, color: TOKENS.inkSoft, marginTop: 1 }}>{a.detail} · {a.when}</div>
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* Bottom tab bar */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: TOKENS.surface, borderTop: `1px solid ${TOKENS.border}`,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', padding: '8px 4px 18px',
    }}>
      {[
        { icon: 'home', label: 'Hjem', active: true },
        { icon: 'calendar', label: 'Kalender' },
        { icon: 'note', label: 'Noter' },
        { icon: 'user', label: 'Mig' },
      ].map(t => (
        <div key={t.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '6px 0', color: t.active ? TOKENS.primary : TOKENS.inkSoft }}>
          <Icon name={t.icon} size={20} />
          <span style={{ fontSize: 10.5, fontWeight: t.active ? 600 : 400 }}>{t.label}</span>
        </div>
      ))}
    </div>
  </div>
);

const QuickAction = ({ icon, label, tone = 'neutral' }) => {
  const isPrimary = tone === 'primary';
  return (
    <div className="app-card" style={{
      padding: '14px 14px',
      background: isPrimary ? TOKENS.primary : TOKENS.surface,
      borderColor: isPrimary ? TOKENS.primary : TOKENS.border,
      color: isPrimary ? '#fff' : TOKENS.ink,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: isPrimary ? 'rgba(255,255,255,0.15)' : TOKENS.surfaceAlt,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name={icon} size={16} />
      </div>
      <span style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</span>
    </div>
  );
};

// ── MOBILE: Add appointment ────────────────────────────────────────
const MobileAddAppointment = () => (
  <div style={{ height: '100%', background: TOKENS.bg, display: 'flex', flexDirection: 'column', fontFamily: TOKENS.fontBody }} className="app-root">
    <div style={{ padding: '40px 16px 16px', background: TOKENS.surface, borderBottom: `1px solid ${TOKENS.border}`, display: 'flex', alignItems: 'center', gap: 12 }}>
      <Icon name="x" size={20} color={TOKENS.inkMuted} />
      <h1 className="app-display" style={{ margin: 0, fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center' }}>Ny aftale</h1>
      <span style={{ fontSize: 14, color: TOKENS.primary, fontWeight: 600 }}>Gem</span>
    </div>
    <div className="app-scroll" style={{ flex: 1, overflow: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Field label="Titel"><input className="app-input" defaultValue="Øjenlæge" /></Field>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <Field label="Dato"><input className="app-input" defaultValue="8. maj" /></Field>
        <Field label="Tid"><input className="app-input" defaultValue="14:30" /></Field>
      </div>
      <Field label="Note til Jette">
        <textarea className="app-input" rows={3} defaultValue="Husk brillerne til øjenlægen" style={{ resize: 'none', fontFamily: 'inherit' }} />
      </Field>
      <Field label="Påmindelse">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['Ingen', '15 min', '1 time', 'Morgen'].map((p, i) => (
            <div key={p} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12.5,
              border: `1px solid ${i === 2 ? TOKENS.primary : TOKENS.border}`,
              background: i === 2 ? TOKENS.primarySoft : TOKENS.surface,
              color: i === 2 ? TOKENS.primaryHover : TOKENS.inkMuted,
              fontWeight: i === 2 ? 500 : 400,
            }}>{p}</div>
          ))}
        </div>
      </Field>

      <div style={{ marginTop: 8, padding: 14, background: TOKENS.surfaceAlt, borderRadius: 10, fontSize: 12.5, color: TOKENS.inkMuted, lineHeight: 1.5 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
          <Icon name="screen" size={13} />
          <span style={{ fontWeight: 500, color: TOKENS.ink }}>På storskærmen</span>
        </div>
        Vises kl. 14:30 sammen med noten "Husk brillerne". Jette mindes 1 time før.
      </div>
    </div>
  </div>
);

// ── LOGIN ──────────────────────────────────────────────────────────
const LoginScreen = ({ onSubmit }) => {
  const handleLogin = () => {
    if (onSubmit) onSubmit();
    else if (window.__APP_NAV__) location.href = window.__APP_NAV__.home;
  };
  return (
  <div style={{
    height: '100%', background: TOKENS.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: TOKENS.fontBody, padding: 32,
  }} className="app-root">
    <div style={{ width: 380 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12, background: TOKENS.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
          fontFamily: TOKENS.fontDisplay, fontWeight: 700, fontSize: 20,
        }}>D</div>
        <div>
          <div className="app-display" style={{ fontSize: 19, fontWeight: 600 }}>Demenskalender</div>
          <div style={{ fontSize: 12, color: TOKENS.inkSoft }}>Family-app</div>
        </div>
      </div>
      <h1 className="app-display" style={{ fontSize: 26, fontWeight: 600, margin: '0 0 8px' }}>Log ind</h1>
      <p style={{ fontSize: 14, color: TOKENS.inkMuted, margin: '0 0 24px', lineHeight: 1.5 }}>
        Vælg din login-metode for at tilgå Jettes kalender, huskeseddel og videoopkald.
      </p>

      {/* Option 1: MitID */}
      <button
        onClick={handleLogin}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          background: '#0060E6', color: '#fff', border: 'none', borderRadius: 10,
          padding: '14px 18px', fontSize: 15, fontWeight: 600, cursor: 'pointer',
          fontFamily: TOKENS.fontBody, letterSpacing: '0.01em',
          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
        }}
      >
        Log ind med
        <span style={{
          display: 'inline-flex', alignItems: 'baseline',
          fontFamily: TOKENS.fontDisplay, fontWeight: 700, fontSize: 18,
          background: '#fff', color: '#0060E6',
          padding: '3px 8px 3px 8px', borderRadius: 5, letterSpacing: '-0.01em',
        }}>
          <span>Mit</span><span style={{ color: '#0060E6' }}>ID</span>
        </span>
      </button>
      <div style={{ fontSize: 11.5, color: TOKENS.inkSoft, textAlign: 'center', marginTop: 8 }}>
        Anbefales for pårørende med dansk CPR
      </div>

      {/* Divider */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '22px 0 18px' }}>
        <div style={{ flex: 1, height: 1, background: TOKENS.border }} />
        <div style={{ fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>eller</div>
        <div style={{ flex: 1, height: 1, background: TOKENS.border }} />
      </div>

      {/* Option 2: brugernavn + password + YubiKey */}
      <div style={{
        background: TOKENS.surface, border: `1px solid ${TOKENS.border}`, borderRadius: 12,
        padding: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <Icon name="user" size={14} color={TOKENS.inkSoft} />
          <div style={{ fontSize: 12, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            Brugernavn + YubiKey
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Field label="E-mail"><input className="app-input" defaultValue="lene@madsen.dk" /></Field>
          <Field label="Adgangskode"><input className="app-input" type="password" defaultValue="••••••••" /></Field>

          {/* YubiKey field */}
          <div>
            <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginBottom: 6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span>Sikkerhedsnøgle (YubiKey)</span>
              <span style={{ fontSize: 11, color: TOKENS.inkSoft }}>Påkrævet</span>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
              border: `1px dashed ${TOKENS.borderStrong}`, borderRadius: 10,
              padding: '12px 14px', background: TOKENS.bg,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8, background: '#84BD41',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', flexShrink: 0,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="9" width="14" height="6" rx="2" stroke="currentColor" strokeWidth="2" fill="none" />
                  <circle cx="19" cy="12" r="1.5" fill="currentColor" />
                  <path d="M6 12h2M10 12h2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: TOKENS.ink }}>Indsæt din YubiKey</div>
                <div style={{ fontSize: 11.5, color: TOKENS.inkSoft, marginTop: 2 }}>Tryk på den gyldne kontakt når den blinker</div>
              </div>
              <div style={{
                width: 8, height: 8, borderRadius: '50%', background: '#D4A95E',
                animation: 'app-pulse 1.4s ease-in-out infinite',
              }} />
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5 }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 6, color: TOKENS.inkMuted }}>
              <input type="checkbox" defaultChecked /> Husk mig
            </label>
            <span style={{ color: TOKENS.primary, fontWeight: 500, cursor: 'pointer' }}>Glemt kode?</span>
          </div>
          <Button variant="primary" size="lg" full onClick={handleLogin}>Log ind</Button>
        </div>
      </div>

      <div style={{ marginTop: 20, padding: 14, background: TOKENS.surface, border: `1px solid ${TOKENS.border}`, borderRadius: 10, fontSize: 12.5, color: TOKENS.inkMuted, display: 'flex', gap: 10 }}>
        <Avatar name="Jette M." tone="amber" size={28} />
        <div style={{ lineHeight: 1.45 }}>
          Du er pårørende til <strong style={{ color: TOKENS.ink }}>Jette Madsen</strong>. 3 andre har adgang.
        </div>
      </div>
    </div>
  </div>
  );
};

// ── DOCUMENTS SCREEN ────────────────────────────────────────────────
const DocumentsScreen = () => {
  const [activeFolder, setActiveFolder] = React.useState('recepter');
  const folder = DOCS.folders.find(f => f.id === activeFolder);
  const files = DOCS.files[activeFolder] || [];
  const typeColor = (t) => {
    if (t === 'PDF') return { bg: '#F2DCD3', fg: '#7A3F2A' };
    if (t === 'JPG') return { bg: '#DCE2C7', fg: '#5C6638' };
    if (t === 'TXT') return { bg: '#D8E7E9', fg: '#2F5C61' };
    return { bg: '#E5E5E5', fg: '#555' };
  };

  return (
    <div style={{ display: 'flex', height: '100%', background: TOKENS.bg, fontFamily: TOKENS.fontBody }} className="app-root">
      <Sidebar active="docs" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
        <TopBar
          subtitle="Hos Jette Madsen"
          title="Dokumenter"
          actions={[
            <Button key="up" variant="primary" icon="upload" size="md">Upload</Button>,
          ]}
        />
        <div className="app-scroll app-docs-grid" style={{
          flex: 1, overflow: 'auto', padding: 32,
          display: 'grid', gridTemplateColumns: '260px 1fr', gap: 24,
        }}>
          {/* Left: folders */}
          <aside className="app-docs-folders" style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0, position: 'relative' }}>
            <div style={{
              fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600,
              letterSpacing: '0.08em', textTransform: 'uppercase', padding: '4px 12px 8px',
            }}>
              <span className="app-docs-label-desktop">Mapper</span>
              <span className="app-docs-label-mobile" style={{ display: 'none', alignItems: 'center', gap: 6 }}>
                Mapper <Icon name="chevronRight" size={11} color={TOKENS.inkSoft} /> swipe
              </span>
            </div>
            {DOCS.folders.map(f => {
              const isActive = f.id === activeFolder;
              return (
                <button
                  key={f.id}
                  onClick={() => setActiveFolder(f.id)}
                  className="app-btn"
                  style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '11px 12px', borderRadius: 10,
                    background: isActive ? TOKENS.surface : 'transparent',
                    border: `1px solid ${isActive ? TOKENS.border : 'transparent'}`,
                    textAlign: 'left', width: '100%',
                    color: TOKENS.ink, fontFamily: TOKENS.fontBody, fontSize: 14,
                    boxShadow: isActive ? '0 1px 2px rgba(20,30,50,0.04)' : 'none',
                  }}>
                  <div style={{
                    width: 34, height: 34, borderRadius: 8,
                    background: isActive ? TOKENS.primarySoft : TOKENS.surfaceAlt,
                    color: isActive ? TOKENS.primary : TOKENS.inkMuted,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <Icon name="folder" size={17} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: isActive ? 600 : 500, fontSize: 14 }}>{f.label}</div>
                    <div style={{ fontSize: 11.5, color: TOKENS.inkSoft, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.hint}</div>
                  </div>
                  <span style={{
                    fontSize: 12, color: TOKENS.inkSoft, fontVariantNumeric: 'tabular-nums',
                    background: TOKENS.surfaceAlt, padding: '2px 8px', borderRadius: 999,
                  }}>{f.count}</span>
                </button>
              );
            })}
            <div className="app-docs-fade" style={{ display: 'none' }} />
          </aside>

          {/* Right: files */}
          <section style={{ minWidth: 0 }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 16, gap: 12, flexWrap: 'wrap',
            }}>
              <div>
                <div style={{ fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>
                  {folder?.count} filer
                </div>
                <h2 className="app-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{folder?.label}</h2>
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8, background: TOKENS.surface,
                border: `1px solid ${TOKENS.border}`, borderRadius: 10, padding: '8px 12px', minWidth: 220,
              }}>
                <Icon name="search" size={15} color={TOKENS.inkSoft} />
                <input
                  placeholder="Søg i mappen…"
                  style={{
                    border: 'none', outline: 'none', background: 'transparent',
                    fontFamily: 'inherit', fontSize: 13, color: TOKENS.ink, width: '100%',
                  }} />
              </div>
            </div>

            <div className="app-card" style={{ padding: 0, overflow: 'hidden' }}>
              {files.map((f, i) => {
                const c = typeColor(f.type);
                return (
                  <div key={f.id} style={{
                    display: 'grid', gridTemplateColumns: '44px 1fr auto auto',
                    alignItems: 'center', gap: 14,
                    padding: '14px 18px',
                    borderTop: i === 0 ? 'none' : `1px solid ${TOKENS.border}`,
                    cursor: 'pointer',
                  }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 10, background: c.bg, color: c.fg,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: TOKENS.fontDisplay, fontSize: 11, fontWeight: 700,
                      letterSpacing: '0.04em',
                    }}>{f.type}</div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.title}</div>
                      <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 2 }}>{f.from} · {f.date}</div>
                    </div>
                    <div className="app-docs-size" style={{ fontSize: 12, color: TOKENS.inkSoft, fontVariantNumeric: 'tabular-nums' }}>{f.size}</div>
                    <button className="app-btn" style={{
                      width: 36, height: 36, borderRadius: 8, background: TOKENS.surfaceAlt,
                      color: TOKENS.inkMuted, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }} aria-label="Hent">
                      <Icon name="download" size={16} />
                    </button>
                  </div>
                );
              })}
            </div>

            <div style={{
              marginTop: 14, padding: 14, background: TOKENS.surface, border: `1px dashed ${TOKENS.border}`,
              borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12, color: TOKENS.inkMuted,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8, background: TOKENS.surfaceAlt,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="upload" size={16} color={TOKENS.inkSoft} />
              </div>
              <div style={{ flex: 1, fontSize: 13, lineHeight: 1.45 }}>
                Træk en fil hertil — eller tryk Upload øverst — for at gemme i <strong style={{ color: TOKENS.ink }}>{folder?.label}</strong>.
                <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 2 }}>PDF, JPG, PNG, TXT · op til 25 MB</div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};

// ── EDIT SCREEN (Flow: Hjem → Rediger indhold → Gem → Hjem) ─────
const EditContentScreen = () => {
  const appts = [
    { id: 1, time: '10:00', title: 'Lene kommer på besøg', note: '', tone: 'primary' },
    { id: 2, time: '14:30', title: 'Øjenlæge', note: 'Husk brillerne til øjenlægen', tone: 'accent' },
  ];
  const notes = [
    { id: 1, text: 'Drik et stort glas vand om morgenen', by: 'Lene M.', tone: 'teal' },
    { id: 2, text: 'Skraldemand kommer fredag', by: 'Anna S.', tone: 'rose' },
    { id: 3, text: 'Vandkanden står på køkkenbordet', by: 'Lene M.', tone: 'teal' },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', background: TOKENS.bg, fontFamily: TOKENS.fontBody }} className="app-root">
      <Sidebar active="edit" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <div className="app-topbar-edit" style={{
          background: TOKENS.bg, borderBottom: `1px solid ${TOKENS.border}`,
          padding: '24px 40px 18px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        }}>
          <div style={{ minWidth: 0 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600,
              letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6,
              background: TOKENS.surfaceAlt, padding: '3px 8px', borderRadius: 999,
            }}>
              <Icon name="user" size={11} color={TOKENS.inkSoft} />
              {CITIZEN_NAME}
            </div>
            <div style={{ fontSize: 12, color: TOKENS.inkSoft, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4 }}>
              Torsdag · 8. maj 2026
            </div>
            <h1 className="app-display" style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>Rediger indhold</h1>
          </div>
          <div className="app-topbar-actions" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <span className="app-changes-count" style={{ fontSize: 12, color: TOKENS.inkSoft, marginRight: 4 }}>2 ændringer</span>
            <Button variant="secondary" size="md" onClick={() => window.__APP_NAV__ && (location.href = window.__APP_NAV__.home)}>Annullér</Button>
            <Button variant="primary" size="md" icon="check" onClick={() => window.__APP_NAV__ && (location.href = window.__APP_NAV__.home)}>Gem og afslut</Button>
          </div>
        </div>

        <div className="app-scroll app-edit-scroll" style={{ flex: 1, overflow: 'auto', padding: '32px 40px 48px', display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 920 }}>
          {/* Aftaler */}
          <section>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <h2 className="app-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>Aftaler i dag</h2>
              <Button variant="secondary" size="sm" icon="plus">Tilføj aftale</Button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {appts.map(a => (
                <div key={a.id} className="app-card" style={{ padding: 16, display: 'grid', gridTemplateColumns: '90px 1fr auto', gap: 16, alignItems: 'center' }}>
                  <input className="app-input" defaultValue={a.time} style={{ fontFamily: TOKENS.fontDisplay, fontWeight: 600, fontVariantNumeric: 'tabular-nums', textAlign: 'center' }} />
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <input className="app-input" defaultValue={a.title} style={{ fontWeight: 500 }} />
                    {a.note ? (
                      <input className="app-input" defaultValue={a.note} style={{ fontSize: 13, color: TOKENS.inkMuted }} />
                    ) : (
                      <div style={{ fontSize: 12.5, color: TOKENS.inkSoft, padding: '0 2px', cursor: 'pointer' }}>+ Tilføj note til Jette</div>
                    )}
                  </div>
                  <Icon name="x" size={16} color={TOKENS.inkSoft} />
                </div>
              ))}
              {/* Add row placeholder */}
              <div className="app-card" style={{ padding: 16, borderStyle: 'dashed', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: TOKENS.inkSoft, fontSize: 13.5, cursor: 'pointer' }}>
                <Icon name="plus" size={15} /> Tilføj endnu en aftale
              </div>
            </div>
          </section>

          {/* Huskeseddel */}
          <section>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <h2 className="app-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>Huskeseddel</h2>
              <Button variant="secondary" size="sm" icon="plus">Tilføj note</Button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {notes.map(n => (
                <div key={n.id} className="app-card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: TOKENS.accent, flexShrink: 0 }} />
                  <input className="app-input" defaultValue={n.text} style={{ flex: 1, border: 'none', background: 'transparent', padding: '6px 4px' }} />
                  <Avatar name={n.by} tone={n.tone} size={22} />
                  <Icon name="x" size={16} color={TOKENS.inkSoft} />
                </div>
              ))}
              <div className="app-card" style={{ padding: 14, borderStyle: 'dashed', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: TOKENS.inkSoft, fontSize: 13.5, cursor: 'pointer' }}>
                <Icon name="plus" size={15} /> Tilføj note til Jette
              </div>
            </div>
          </section>

          {/* Fødselsdag (compact) */}
          <section>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <h2 className="app-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>Fødselsdag</h2>
              <Button variant="ghost" size="sm" icon="plus">Tilføj</Button>
            </div>
            <div className="app-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
              <Icon name="cake" size={18} color={TOKENS.accent} />
              <div style={{ flex: 1, fontSize: 14 }}>Morten fylder 32 om 4 dage</div>
              <Icon name="edit" size={15} color={TOKENS.inkSoft} />
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};

// ── FLOW DIAGRAM (visual storyboard of the 3 screens) ──────────
const EditFlow = () => (
  <div style={{ height: '100%', background: TOKENS.bg, padding: 40, fontFamily: TOKENS.fontBody, display: 'flex', flexDirection: 'column' }} className="app-root">
    <div style={{ marginBottom: 24 }}>
      <div style={{ fontSize: 11, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Brugerflow</div>
      <h2 className="app-display" style={{ margin: 0, fontSize: 26, fontWeight: 600 }}>Hjem → Rediger → Gem → Hjem</h2>
      <p style={{ fontSize: 14, color: TOKENS.inkMuted, margin: '6px 0 0', maxWidth: 800, lineHeight: 1.5 }}>
        Lene klikker "Rediger indhold" på preview-kortet. Hun lander på en dedikeret redigeringsskærm hvor alt på storskærmen kan tilføjes/ændres på ét sted. Tryk Gem → tilbage til Hjem med opdateret preview.
      </p>
    </div>
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 18, alignItems: 'center' }}>
      {/* Step 1 */}
      <FlowStep num="1" label="Hjem" caption="Lene ser preview af storskærmen og klikker 'Rediger indhold'.">
        <div style={{ background: '#1B2333', color: '#F4F1EA', borderRadius: 10, padding: 14, fontFamily: TOKENS.fontDisplay }}>
          <div style={{ fontSize: 9, opacity: 0.55, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>Storskærmen viser</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, opacity: 0.6 }}>Torsdag</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>8. maj</div>
            </div>
            <div style={{ fontSize: 22, fontWeight: 700 }}>09:42</div>
          </div>
          <div style={{ fontSize: 10, padding: '4px 0', opacity: 0.85, borderTop: '1px solid rgba(255,255,255,0.1)' }}>10:00 Lene på besøg</div>
          <div style={{ fontSize: 10, padding: '4px 0', opacity: 0.85, borderTop: '1px solid rgba(255,255,255,0.1)' }}>14:30 Øjenlæge</div>
          <div style={{ background: TOKENS.primary, color: '#fff', textAlign: 'center', padding: '7px', borderRadius: 6, fontSize: 11, marginTop: 10, fontFamily: TOKENS.fontBody, fontWeight: 500, boxShadow: '0 0 0 2px rgba(63,122,130,0.4), 0 0 0 5px rgba(63,122,130,0.2)' }}>
            ✏ Rediger indhold
          </div>
        </div>
      </FlowStep>

      <FlowArrow label="klik" />

      {/* Step 2 */}
      <FlowStep num="2" label="Rediger" caption="Alle felter åbne. Live preview til højre. Gem og afslut øverst.">
        <div style={{ background: TOKENS.surface, border: `1px solid ${TOKENS.border}`, borderRadius: 10, padding: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: TOKENS.inkSoft, marginBottom: 10 }}>
            <Icon name="chevronLeft" size={11} /> Tilbage
            <span style={{ marginLeft: 'auto', background: TOKENS.primary, color: '#fff', padding: '4px 8px', borderRadius: 4, fontSize: 9, fontWeight: 500 }}>Gem og afslut</span>
          </div>
          <div style={{ fontSize: 9, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Aftaler</div>
          <div style={{ background: TOKENS.surfaceAlt, borderRadius: 5, padding: '6px 8px', fontSize: 10, marginBottom: 5, display: 'flex', gap: 6 }}>
            <span style={{ fontWeight: 600 }}>10:00</span> Lene på besøg
          </div>
          <div style={{ background: TOKENS.surfaceAlt, borderRadius: 5, padding: '6px 8px', fontSize: 10, marginBottom: 10, display: 'flex', gap: 6 }}>
            <span style={{ fontWeight: 600 }}>14:30</span> Øjenlæge
          </div>
          <div style={{ fontSize: 9, color: TOKENS.inkSoft, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Huskeseddel</div>
          <div style={{ background: TOKENS.surfaceAlt, borderRadius: 5, padding: '6px 8px', fontSize: 10, marginBottom: 5 }}>Drik vand om morgenen</div>
          <div style={{ background: TOKENS.surfaceAlt, borderRadius: 5, padding: '6px 8px', fontSize: 10 }}>Skraldemand fredag</div>
        </div>
      </FlowStep>

      <FlowArrow label="gem" />

      {/* Step 3 */}
      <FlowStep num="3" label="Tilbage til Hjem" caption="Bekræftelse vises kort. Storskærmen er allerede opdateret hos Jette.">
        <div style={{ background: '#1B2333', color: '#F4F1EA', borderRadius: 10, padding: 14, fontFamily: TOKENS.fontDisplay, position: 'relative' }}>
          <div style={{ fontSize: 9, opacity: 0.55, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>Storskærmen viser nu</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 11, opacity: 0.6 }}>Torsdag</div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>8. maj</div>
            </div>
            <div style={{ fontSize: 22, fontWeight: 700 }}>09:43</div>
          </div>
          <div style={{ fontSize: 10, padding: '4px 0', opacity: 0.85, borderTop: '1px solid rgba(255,255,255,0.1)' }}>10:00 Lene på besøg</div>
          <div style={{ fontSize: 10, padding: '4px 0', opacity: 0.85, borderTop: '1px solid rgba(255,255,255,0.1)' }}>14:30 Øjenlæge — husk briller</div>
          <div style={{ position: 'absolute', top: -10, right: -10, background: TOKENS.success, color: '#fff', fontSize: 10, padding: '4px 9px', borderRadius: 999, fontFamily: TOKENS.fontBody, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4 }}>
            <Icon name="check" size={10} /> Gemt
          </div>
        </div>
      </FlowStep>
    </div>
  </div>
);

const FlowStep = ({ num, label, caption, children }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 26, height: 26, borderRadius: '50%', background: TOKENS.primary, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TOKENS.fontDisplay, fontWeight: 600, fontSize: 13 }}>{num}</div>
      <div className="app-display" style={{ fontSize: 16, fontWeight: 600 }}>{label}</div>
    </div>
    {children}
    <div style={{ fontSize: 12, color: TOKENS.inkMuted, lineHeight: 1.5 }}>{caption}</div>
  </div>
);

const FlowArrow = ({ label }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, color: TOKENS.inkSoft }}>
    <div style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</div>
    <Icon name="arrowRight" size={22} color={TOKENS.inkSoft} />
  </div>
);

Object.assign(window, {
  Sidebar, TopBar, ScreenPreview, DashboardScreen, CalendarScreen, NotesScreen,
  MobileDashboard, MobileAddAppointment, LoginScreen, Field, NoteCard,
  EditContentScreen, EditFlow, DocumentsScreen,
});