/* Sanio Hi-Fi · Berater-Dashboard view
 * Browser frame containing the dashboard with sidebar nav, kanban pipeline,
 * lead drawer (slides in on card click), and a settings page.
 */

const { useState: dUseState } = React;

/* ───────── data ───────── */
const PIPELINE_HI = [
  {
    key: 'mail',
    title: 'E-Mail versandt',
    sub: 'wartet auf Formular',
    leads: [
      { id: 4287, name: 'Thomas Müller',   addr: 'Leopoldstr. 148, München',     type: ['iSFP', 'Heizung'], when: 'heute 14:32', tag: { l: 'wartet', c: 'warn' },   owner: 'FS', isNew: true },
      { id: 4283, name: 'Karin Becker',    addr: 'Hauptstr. 12, Augsburg',       type: ['Heizung'],         when: 'gestern',     tag: { l: '24h ↻', c: 'warn' },    owner: 'MB' },
      { id: 4279, name: 'Dr. P. Hoffmann', addr: 'Birkenweg 4, Ingolstadt',      type: ['iSFP'],            when: '20. Juni',    tag: { l: 'Reminder fällig', c: 'danger' }, owner: 'FS' },
      { id: 4276, name: 'Anna Lo',         addr: 'Münchner Str. 3, Freising',    type: ['Förderung'],       when: '19. Juni',    tag: { l: 'wartet', c: 'warn' },   owner: 'FS' },
    ],
  },
  {
    key: 'form',
    title: 'Formular ausgefüllt',
    sub: 'neu – bearbeiten',
    accent: true,
    leads: [
      { id: 4291, name: 'Sabine Wagner',   addr: 'Rosenstr. 7, Fürstenfeldbruck',type: ['iSFP'],            when: 'heute 09:14', tag: { l: 'neu', c: 'accent' },    owner: 'FS', isNew: true, isActive: true },
      { id: 4288, name: 'M. Lehmann',      addr: 'Schulstr. 23, Starnberg',      type: ['iSFP', 'Heizung'], when: 'gestern',     tag: { l: 'Termin offen', c: 'warn' }, owner: 'MB' },
      { id: 4282, name: 'K. Eggert',       addr: 'Maxstr. 9, München',           type: ['Heizung'],         when: 'vor 2 T.',    tag: { l: 'Termin offen', c: 'warn' }, owner: 'FS' },
    ],
  },
  {
    key: 'appt',
    title: 'Termin gebucht',
    sub: '4 in dieser Woche',
    leads: [
      { id: 4275, name: 'Familie Bauer',   addr: 'Akazienring 3, Garmisch',      type: ['Heizung'],         when: 'Mi 25.6 · 09:00', tag: { l: 'in 2 T.', c: 'accent' }, owner: 'FS' },
      { id: 4271, name: 'R. Schmitt',      addr: 'Lindenallee 9, Murnau',        type: ['iSFP', 'Heizung'], when: 'Do 26.6 · 14:00', tag: { l: 'in 3 T.', c: 'accent' }, owner: 'MB' },
      { id: 4269, name: 'A. Kowalski',     addr: 'Tannenweg 18, Penzberg',       type: ['iSFP'],            when: 'Fr 27.6 · 11:00', tag: { l: 'in 4 T.', c: 'accent' }, owner: 'FS' },
      { id: 4263, name: 'Klaus Berger',    addr: 'Bachstr. 2, Wolfratshausen',   type: ['Heizung'],         when: 'Mo 30.6 · 09:00', tag: { l: 'in 7 T.', c: 'accent' }, owner: 'JK' },
    ],
  },
  {
    key: 'work',
    title: 'In Bearbeitung',
    sub: 'Bericht / Angebot',
    leads: [
      { id: 4258, name: 'C. Albrecht',     addr: 'Kirchplatz 5, Tutzing',        type: ['iSFP'],            when: 'Bericht 70 %', tag: { l: 'Bericht', c: 'warn' },    owner: 'FS', progress: 70 },
      { id: 4254, name: 'I. Voß',          addr: 'Mühlweg 17, Bad Tölz',         type: ['Heizung'],         when: 'Angebot raus',  tag: { l: 'wartet Kd.', c: 'warn' }, owner: 'MB' },
      { id: 4247, name: 'H. Reiter',       addr: 'Sonnenstr. 4, Holzkirchen',    type: ['iSFP'],            when: 'Bericht 30 %',  tag: { l: 'Bericht', c: 'warn' },    owner: 'FS', progress: 30 },
    ],
  },
  {
    key: 'done',
    title: 'Abgeschlossen',
    sub: 'BAFA läuft / fertig',
    leads: [
      { id: 4231, name: 'F. Roth',         addr: 'Goethestr. 11, München',       type: ['iSFP', 'Heizung'], when: 'abgeschl. 12.6',tag: { l: 'BAFA läuft', c: 'accent' }, owner: 'FS' },
      { id: 4218, name: 'G. Krämer',       addr: 'Am Anger 8, Erding',           type: ['Heizung'],         when: 'abgeschl. 4.6', tag: { l: 'fertig', c: 'neutral' }, owner: 'JK' },
      { id: 4203, name: 'B. Wolters',      addr: 'Lerchenweg 22, Dachau',        type: ['iSFP'],            when: 'abgeschl. 28.5',tag: { l: 'BAFA läuft', c: 'accent' }, owner: 'FS' },
    ],
  },
];

/* ───────── Sidebar ───────── */
function DashSidebar({ active, onChange }) {
  const items = [
    { k: 'pipeline', t: 'Pipeline',   i: 'pipeline', badge: 18 },
    { k: 'leads',    t: 'Alle Leads', i: 'list' },
    { k: 'cal',      t: 'Kalender',   i: 'cal',      badge: 4 },
    { k: 'mail',     t: 'E-Mails',    i: 'inbox' },
    { k: 'docs',     t: 'Dokumente',  i: 'doc' },
  ];
  return (
    <aside style={{
      width: 220, flexShrink: 0,
      borderRight: '1px solid var(--line)',
      background: 'var(--surface)',
      display: 'flex', flexDirection: 'column',
      padding: '14px 12px',
    }}>
      <div style={{ padding: '4px 8px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Wordmark size={18} />
      </div>

      <button
        className="btn accent sm"
        style={{ height: 32, margin: '4px 4px 14px', justifyContent: 'flex-start', gap: 8 }}
      >
        <Icon name="plus" size={14} /> Neuer Lead
        <span className="grow" />
        <span className="kbd" style={{ background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.25)', color: 'rgba(255,255,255,0.85)' }}>N</span>
      </button>

      <nav className="col gap-2">
        {items.map((i) => {
          const on = active === i.k;
          return (
            <button
              key={i.k}
              onClick={() => onChange(i.k)}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '7px 10px',
                borderRadius: 7,
                background: on ? 'var(--surface-3)' : 'transparent',
                color: on ? 'var(--ink)' : 'var(--ink-2)',
                fontSize: 13, fontWeight: on ? 600 : 500,
                cursor: 'pointer', textAlign: 'left',
              }}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = 'var(--surface-2)'; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = 'transparent'; }}
            >
              <Icon name={i.i} size={15} style={{ color: on ? 'var(--ink)' : 'var(--ink-soft)' }} />
              <span className="grow">{i.t}</span>
              {i.badge != null && (
                <span style={{
                  fontSize: 10.5, fontWeight: 600,
                  padding: '0 6px', height: 16,
                  display: 'inline-flex', alignItems: 'center',
                  borderRadius: 4,
                  background: on ? 'var(--surface)' : 'var(--surface-3)',
                  color: 'var(--ink-soft)',
                }}>{i.badge}</span>
              )}
            </button>
          );
        })}
      </nav>

      <div className="divider" style={{ margin: '14px 4px' }} />

      <div className="eyebrow" style={{ padding: '0 8px', marginBottom: 8 }}>Heute</div>
      <div className="col gap-4" style={{ padding: '0 4px' }}>
        <div className="row middle gap-8 small" style={{ padding: '6px 8px', borderRadius: 6 }}>
          <span className="dot green" />
          <span className="grow">10:00 · Wagner</span>
          <span className="tiny faint">Termin</span>
        </div>
        <div className="row middle gap-8 small" style={{ padding: '6px 8px', borderRadius: 6 }}>
          <span className="dot amber" />
          <span className="grow">14:00 · Knappe</span>
          <span className="tiny faint">Call</span>
        </div>
        <div className="row middle gap-8 small" style={{ padding: '6px 8px', borderRadius: 6 }}>
          <span className="dot gray" />
          <span className="grow">17:00 · Lehmann</span>
          <span className="tiny faint">Termin</span>
        </div>
      </div>

      <div className="grow" />

      <button
        onClick={() => onChange('settings')}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px',
          borderRadius: 8,
          background: active === 'settings' ? 'var(--surface-3)' : 'transparent',
          textAlign: 'left', width: '100%',
        }}
      >
        <div className="avatar sm">FS</div>
        <div className="col" style={{ lineHeight: 1.15, minWidth: 0 }}>
          <div className="small bold" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>Franziska Seitz</div>
          <div className="tiny faint">Einstellungen</div>
        </div>
        <Icon name="gear" size={14} style={{ color: 'var(--ink-faint)', marginLeft: 'auto' }} />
      </button>
    </aside>
  );
}

/* ───────── Header ───────── */
function DashHeader({ title, sub, right, view, onView }) {
  return (
    <header style={{
      padding: '16px 24px',
      borderBottom: '1px solid var(--line)',
      background: 'var(--surface)',
      display: 'flex', alignItems: 'center', gap: 16,
      flexShrink: 0,
    }}>
      <div className="col" style={{ lineHeight: 1.2, flex: 1, minWidth: 0 }}>
        <div className="h-2">{title}</div>
        {sub && <div className="tiny muted">{sub}</div>}
      </div>

      <div className="row middle gap-8">
        <div style={{
          height: 32, padding: '0 10px',
          background: 'var(--surface-2)',
          border: '1px solid var(--line)',
          borderRadius: 8,
          display: 'flex', alignItems: 'center', gap: 6,
          minWidth: 240,
          color: 'var(--ink-faint)',
        }}>
          <Icon name="search" size={14} />
          <span className="small">Lead, Adresse, Telefon…</span>
          <span className="grow" />
          <span className="kbd">⌘</span><span className="kbd">K</span>
        </div>
        {view && (
          <div className="row" style={{ background: 'var(--surface-2)', borderRadius: 8, padding: 2, gap: 0 }}>
            <button onClick={() => onView('kanban')} style={{ padding: '5px 10px', borderRadius: 6, background: view === 'kanban' ? 'var(--surface)' : 'transparent', boxShadow: view === 'kanban' ? 'var(--shadow-sm)' : 'none' }}>
              <Icon name="pipeline" size={14} />
            </button>
            <button onClick={() => onView('list')} style={{ padding: '5px 10px', borderRadius: 6, background: view === 'list' ? 'var(--surface)' : 'transparent', boxShadow: view === 'list' ? 'var(--shadow-sm)' : 'none' }}>
              <Icon name="list" size={14} />
            </button>
          </div>
        )}
        <button className="btn sm"><Icon name="filter" size={13} /> Filter</button>
      </div>
    </header>
  );
}

/* ───────── Lead Card ───────── */
function TypeChip({ t }) {
  const icons = { iSFP: '🏠', Heizung: '🔥', 'Förderung': '💶' };
  return (
    <span className="pill" style={{ fontSize: 10.5, height: 18, padding: '0 6px', gap: 3 }}>
      <span style={{ fontSize: 10 }}>{icons[t]}</span>{t}
    </span>
  );
}

function StatusTag({ tag }) {
  if (!tag) return null;
  const cl = tag.c === 'accent' ? 'accent' : tag.c === 'warn' ? 'warn' : tag.c === 'danger' ? 'danger' : '';
  return <span className={`pill ${cl}`} style={{ fontSize: 10.5, height: 18, padding: '0 6px' }}>{tag.l}</span>;
}

function LeadCard({ lead, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        background: active ? 'var(--surface)' : 'var(--surface)',
        border: `1.5px solid ${active ? 'var(--ink)' : 'var(--line-2)'}`,
        boxShadow: active ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        borderRadius: 10, padding: 10,
        marginBottom: 8,
        textAlign: 'left',
        width: '100%',
        display: 'flex', flexDirection: 'column', gap: 6,
        cursor: 'pointer',
        transition: 'border-color .12s ease, box-shadow .12s ease, transform .06s ease',
      }}
      onMouseEnter={(e) => {
        if (!active) {
          e.currentTarget.style.borderColor = 'var(--line-3)';
          e.currentTarget.style.boxShadow = 'var(--shadow-md)';
        }
      }}
      onMouseLeave={(e) => {
        if (!active) {
          e.currentTarget.style.borderColor = 'var(--line-2)';
          e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
        }
      }}
    >
      <div className="row middle between">
        <div className="row middle gap-4 micro mono" style={{ color: 'var(--ink-faint)' }}>
          #{lead.id}
          {lead.isNew && <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--accent)' }} />}
        </div>
        <div className="row middle gap-4">
          <StatusTag tag={lead.tag} />
        </div>
      </div>
      <div className="small bold" style={{ marginTop: 2 }}>{lead.name}</div>
      <div className="tiny faint" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {lead.addr}
      </div>
      {lead.progress != null && (
        <div className="progress" style={{ height: 3 }}>
          <div style={{ width: `${lead.progress}%` }} />
        </div>
      )}
      <div className="row middle between" style={{ marginTop: 2 }}>
        <div className="row gap-4">
          {lead.type.map((t) => <TypeChip key={t} t={t} />)}
        </div>
        <div className="row middle gap-4 tiny faint">
          <span>{lead.when}</span>
          <div className="avatar sm" style={{ width: 18, height: 18, fontSize: 9, background: lead.owner === 'FS' ? 'oklch(0.92 0.02 155)' : lead.owner === 'MB' ? 'oklch(0.93 0.02 250)' : 'oklch(0.93 0.02 70)' }}>{lead.owner}</div>
        </div>
      </div>
    </button>
  );
}

function KanbanColumn({ col, activeId, onPick }) {
  const count = col.leads.length;
  return (
    <div style={{
      flex: '1 1 0', minWidth: 0,
      display: 'flex', flexDirection: 'column',
    }}>
      <div className="row middle between" style={{ padding: '0 4px 10px' }}>
        <div className="col" style={{ lineHeight: 1.2 }}>
          <div className="row middle gap-6">
            <span className="small bold">{col.title}</span>
            <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 999, background: col.accent ? 'var(--accent-soft)' : 'var(--surface-3)', color: col.accent ? 'var(--accent-ink)' : 'var(--ink-soft)' }}>{count}</span>
          </div>
          <div className="tiny faint">{col.sub}</div>
        </div>
        <button className="btn icon ghost sm"><Icon name="plus" size={14} /></button>
      </div>
      <div style={{
        background: col.accent ? 'var(--accent-soft)' : 'var(--surface-2)',
        borderRadius: 10,
        padding: 8,
        flex: 1,
        minHeight: 0,
        overflowY: 'auto',
      }}>
        {col.leads.map((l) => (
          <LeadCard key={l.id} lead={l} active={activeId === l.id} onClick={() => onPick(l)} />
        ))}
      </div>
    </div>
  );
}

/* ───────── Lead Drawer ───────── */
function LeadDrawer({ lead, onClose }) {
  if (!lead) return null;
  return (
    <div style={{
      position: 'absolute', top: 0, right: 0, bottom: 0,
      width: 460,
      background: 'var(--surface)',
      borderLeft: '1px solid var(--line)',
      boxShadow: '-12px 0 32px -8px rgba(15,17,21,0.10)',
      display: 'flex', flexDirection: 'column',
      animation: 'slideInRight .22s ease-out',
      zIndex: 5,
    }}>
      <style>{`@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }`}</style>

      {/* Drawer header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)' }}>
        <div className="row middle between">
          <div className="row middle gap-6 mono micro" style={{ color: 'var(--ink-faint)' }}>
            #{lead.id} · {lead.tag.l}
          </div>
          <div className="row gap-2">
            <button className="btn icon ghost sm" title="Mehr"><Icon name="moreV" size={15} /></button>
            <button className="btn icon ghost sm" onClick={onClose} title="Schließen"><Icon name="x" size={15} /></button>
          </div>
        </div>
        <div className="h-1" style={{ marginTop: 6 }}>{lead.name}</div>
        <div className="row gap-4" style={{ marginTop: 8 }}>
          {lead.type.map((t) => <TypeChip key={t} t={t} />)}
          <span className="pill accent" style={{ fontSize: 10.5, height: 18, padding: '0 6px' }}>BAFA-fähig</span>
        </div>
      </div>

      <div className="scroll-y" style={{ flex: 1, padding: 18 }}>

        {/* Kontakt */}
        <div className="eyebrow" style={{ marginBottom: 8 }}>Kontakt</div>
        <div className="card flat" style={{ padding: 12, marginBottom: 16 }}>
          <div className="row middle gap-8 small" style={{ marginBottom: 6 }}>
            <Icon name="mail" size={14} style={{ color: 'var(--ink-faint)' }} />
            <span>s.wagner@gmx.de</span>
          </div>
          <div className="row middle gap-8 small" style={{ color: 'var(--accent-ink)' }}>
            <Icon name="phone" size={14} />
            <span>+49 8141 992 33 18</span>
            <span className="grow" />
            <button className="btn sm subtle" style={{ height: 22, padding: '0 8px', fontSize: 11 }}>anrufen</button>
          </div>
        </div>

        {/* Objektadresse */}
        <div className="eyebrow" style={{ marginBottom: 8 }}>Objektadresse</div>
        <div className="card flat" style={{ padding: 12, marginBottom: 10 }}>
          <div className="small bold">{lead.addr}</div>
        </div>
        <div style={{
          height: 110, borderRadius: 10, overflow: 'hidden',
          background: 'linear-gradient(135deg, oklch(0.94 0.02 155) 0%, oklch(0.92 0.02 200) 100%)',
          border: '1px solid var(--line-2)',
          position: 'relative', marginBottom: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, opacity: 0.45 }}>
            <path d="M0 50 L60 50 L60 20 L100 20 L100 50 L200 50" stroke="var(--ink-faint)" strokeWidth="1" fill="none" />
            <path d="M40 0 L40 100 M120 0 L120 100" stroke="var(--ink-faint)" strokeWidth="0.5" fill="none" strokeDasharray="2 3" />
          </svg>
          <div style={{ color: 'var(--danger)' }}>
            <Icon name="pin" size={26} strokeWidth={2.2} />
          </div>
        </div>

        {/* Gebäudedaten */}
        <div className="eyebrow" style={{ marginBottom: 8 }}>Gebäudedaten</div>
        <div className="card flat" style={{ padding: 12, marginBottom: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[
              ['Typ', 'EFH'],
              ['Baujahr', '1995'],
              ['Fläche', '168 m²'],
              ['WE', '1'],
              ['Selbstnutzer', 'ja'],
              ['Heizung', '–'],
            ].map(([k, v]) => (
              <div key={k} className="col">
                <div className="tiny faint">{k}</div>
                <div className="small bold">{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Termin */}
        <div className="eyebrow" style={{ marginBottom: 8 }}>Vor-Ort-Termin</div>
        <div className="card outline-accent" style={{ padding: 14, marginBottom: 8 }}>
          <div className="row middle gap-10">
            <div style={{ width: 50, padding: '5px 0', textAlign: 'center', background: 'var(--surface)', borderRadius: 8, border: '1px solid var(--accent)' }}>
              <div className="micro bold" style={{ color: 'var(--accent-ink)' }}>JUN</div>
              <div style={{ fontSize: 19, fontWeight: 700, lineHeight: 1, color: 'var(--ink)' }}>26</div>
            </div>
            <div className="col grow">
              <div className="small bold">Do 26.6 · 10:00 – 11:30</div>
              <div className="tiny" style={{ color: 'var(--accent-ink)' }}>vor Ort · 90 Min</div>
            </div>
            <button className="btn sm subtle" style={{ background: 'var(--surface)' }}>verschieben</button>
          </div>

          <div style={{ height: 1, background: 'oklch(0.88 0.03 155)', margin: '12px 0 10px' }} />

          <div className="row middle gap-8">
            <div className="tiny faint" style={{ width: 70 }}>Beraterin</div>
            <div className="avatar sm">FS</div>
            <div className="col grow" style={{ lineHeight: 1.2 }}>
              <div className="small bold">Franziska Seitz</div>
              <div className="tiny faint">übernimmt den Termin</div>
            </div>
            <button className="btn sm subtle" style={{ background: 'var(--surface)' }}>ändern</button>
          </div>
        </div>

        <div className="card flat" style={{ padding: 10, marginBottom: 16, background: 'var(--surface-2)' }}>
          <div className="row middle gap-8">
            <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="bolt" size={14} style={{ color: 'white' }} />
            </div>
            <div className="col grow" style={{ lineHeight: 1.25 }}>
              <div className="small bold">Briefing-Mail an Franziska</div>
              <div className="tiny faint">geplant für Do 08:30 · Lead-Snapshot, Doku-Links, Route</div>
            </div>
            <span className="pill accent" style={{ fontSize: 10.5, height: 18 }}>geplant</span>
          </div>
        </div>

        {/* Dokumente */}
        <div className="row middle between" style={{ marginBottom: 8 }}>
          <div className="eyebrow">Dokumente · 3</div>
          <button className="btn sm ghost" style={{ height: 22, padding: '0 6px', fontSize: 11 }}>
            <Icon name="upload" size={12} /> hochladen
          </button>
        </div>
        <div className="col gap-6" style={{ marginBottom: 16 }}>
          {['energieausweis-2018.pdf', 'grundriss-eg.jpg', 'heizkosten-2024.pdf'].map((d) => (
            <div key={d} className="card flat" style={{
              padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <Icon name="file" size={14} style={{ color: 'var(--ink-faint)' }} />
              <span className="small grow" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d}</span>
              <Icon name="chevR" size={14} style={{ color: 'var(--ink-faint)' }} />
            </div>
          ))}
        </div>

        {/* Aktivität */}
        <div className="eyebrow" style={{ marginBottom: 8 }}>Aktivität</div>
        <div className="col" style={{ paddingLeft: 4, borderLeft: '1px dashed var(--line-2)', marginLeft: 6 }}>
          {[
            ['heute 09:14',  'Sanio · Formular eingereicht (3 Dokumente)', true],
            ['gestern 17:02','Sanio · Auto-Reminder verschickt', false],
            ['18.6  14:32',  'Du · Lead erstellt (Telefonat)', false],
          ].map(([t, m, hi], i) => (
            <div key={i} style={{ paddingLeft: 14, marginBottom: 10, position: 'relative' }}>
              <span style={{ position: 'absolute', left: -5, top: 5, width: 8, height: 8, borderRadius: '50%', background: hi ? 'var(--accent)' : 'var(--line-3)' }} />
              <div className="tiny faint">{t}</div>
              <div className="small">{m}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: 12, borderTop: '1px solid var(--line)', display: 'flex', gap: 8 }}>
        <button className="btn grow"><Icon name="edit" size={13} /> Notiz</button>
        <button className="btn accent grow">In Bearbeitung →</button>
      </div>
    </div>
  );
}

/* ───────── Settings ───────── */
function SettingsView() {
  const [tab, setTab] = dUseState('profil');
  const tabs = [
    ['profil',   'Profil & Branding'],
    ['mails',    'E-Mail-Vorlagen'],
    ['avail',    'Termin-Verfügbarkeit'],
    ['integ',    'Integrationen'],
    ['dsgvo',    'DSGVO'],
    ['billing',  'Abrechnung'],
  ];
  return (
    <div className="row" style={{ flex: 1, minHeight: 0 }}>
      <div className="col" style={{
        width: 220, borderRight: '1px solid var(--line)', padding: '14px 10px', gap: 2,
        background: 'var(--surface)',
      }}>
        {tabs.map(([k, t]) => {
          const on = tab === k;
          return (
            <button key={k} onClick={() => setTab(k)} style={{
              padding: '7px 10px', borderRadius: 7,
              fontSize: 13, fontWeight: on ? 600 : 500,
              background: on ? 'var(--surface-3)' : 'transparent',
              color: on ? 'var(--ink)' : 'var(--ink-2)',
              textAlign: 'left',
            }}>{t}</button>
          );
        })}
      </div>

      <div className="row grow" style={{ minHeight: 0 }}>
        <div className="scroll-y grow" style={{ padding: '28px 32px' }}>
          <div className="h-1" style={{ marginBottom: 4 }}>Profil & Branding</div>
          <div className="small muted" style={{ marginBottom: 24 }}>
            Diese Angaben erscheinen im Kunden-Formular und in den automatischen E-Mails.
          </div>

          <div className="card" style={{ padding: 20, marginBottom: 20 }}>
            <div className="row gap-20" style={{ alignItems: 'flex-start' }}>
              <div className="col center" style={{ width: 110, flexShrink: 0 }}>
                <div style={{
                  width: 88, height: 88, borderRadius: '50%',
                  background: 'oklch(0.92 0.02 155)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--accent-ink)',
                  fontWeight: 700, fontSize: 32,
                  marginBottom: 8,
                }}>FS</div>
                <button className="btn sm subtle" style={{ height: 26, padding: '0 8px', fontSize: 11.5 }}>
                  <Icon name="upload" size={11} /> Logo
                </button>
              </div>

              <div className="col grow gap-12">
                <div className="row gap-12">
                  <div className="field grow" style={{ marginBottom: 0 }}>
                    <div className="field-label">Name der Beraterin <span className="req">*</span></div>
                    <input className="input" defaultValue="Franziska Seitz" />
                  </div>
                  <div className="field grow" style={{ marginBottom: 0 }}>
                    <div className="field-label">Firmenname <span className="req">*</span></div>
                    <input className="input" defaultValue="Energieberatung Franziska Seitz" />
                  </div>
                </div>

                <div className="row gap-12">
                  <div className="field grow" style={{ marginBottom: 0 }}>
                    <div className="field-label">Telefon</div>
                    <input className="input" defaultValue="+49 89 414 13 21" />
                  </div>
                  <div className="field grow" style={{ marginBottom: 0 }}>
                    <div className="field-label">E-Mail</div>
                    <input className="input" defaultValue="franziska@energie-seitz.de" />
                  </div>
                </div>

                <div className="field" style={{ marginBottom: 0 }}>
                  <div className="field-label">BAFA / dena-Listung <span className="opt">erscheint dezent in der Signatur</span></div>
                  <input className="input" defaultValue="BAFA Nr. 312-04781 · dena-gelistet seit 2019" />
                </div>
              </div>
            </div>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="h-3" style={{ marginBottom: 4 }}>Markenfarbe</div>
            <div className="small muted" style={{ marginBottom: 16 }}>
              Wird im Kunden-Formular und in den E-Mail-Buttons als Akzent verwendet.
            </div>
            <div className="row gap-10 wrap">
              {[
                ['#2F7A5C', 'Forest',  true],
                ['#1F6B72', 'Teal',    false],
                ['#3F5BA9', 'Indigo',  false],
                ['#A24A4A', 'Cinnabar',false],
                ['#4A5D2F', 'Olive',   false],
                ['#1F1F23', 'Anthrazit',false],
              ].map(([c, n, on]) => (
                <button key={c} style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '6px 10px 6px 6px',
                  border: `1.5px solid ${on ? 'var(--ink)' : 'var(--line-2)'}`,
                  borderRadius: 8,
                  background: 'var(--surface)',
                }}>
                  <span style={{ width: 22, height: 22, borderRadius: 5, background: c, border: '1px solid rgba(0,0,0,0.08)' }} />
                  <span className="small bold">{n}</span>
                  {on && <Icon name="check" size={13} style={{ color: 'var(--accent)' }} />}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Preview pane */}
        <div className="col" style={{
          width: 340, flexShrink: 0,
          borderLeft: '1px solid var(--line)',
          background: 'var(--surface-2)',
          padding: 20,
        }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Live-Vorschau · Kunden-Formular</div>

          <div style={{
            background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--line)',
            overflow: 'hidden',
          }}>
            <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div className="avatar sm">FS</div>
              <span className="small bold">Energieberatung Seitz</span>
              <span className="grow" />
              <span className="tiny faint">1/7</span>
            </div>
            <div className="progress" style={{ height: 3, borderRadius: 0 }}>
              <div style={{ width: '14%' }} />
            </div>
            <div style={{ padding: 16 }}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Erstkontakt</div>
              <div className="h-2" style={{ marginBottom: 4, fontSize: 16 }}>Willkommen, Thomas</div>
              <div className="tiny muted" style={{ marginBottom: 14, lineHeight: 1.5 }}>
                Schön, dass Sie sich für eine Energie­beratung bei <b style={{ color: 'var(--ink)' }}>Franziska Seitz</b> interessieren.
              </div>
              <button className="btn accent sm block">Los geht's <Icon name="arrowR" size={12} /></button>
            </div>
          </div>

          <div className="tiny faint" style={{ textAlign: 'center', marginTop: 10 }}>
            ↻ aktualisiert sich automatisch
          </div>

          <div className="eyebrow" style={{ marginTop: 26, marginBottom: 10 }}>Auch sichtbar in</div>
          <div className="col gap-6">
            {['Initial-Mail an Kunde', 'Bestätigungs-Mail mit Angebot', 'Reminder-Mail (1 Tag vorher)'].map((t) => (
              <div key={t} className="row middle gap-8 small" style={{ padding: '6px 4px' }}>
                <Icon name="mail" size={13} style={{ color: 'var(--ink-faint)' }} />
                {t}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────── Pipeline view ───────── */
function PipelineView({ onPickLead, activeId }) {
  return (
    <div style={{ padding: 20, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <div className="row gap-12" style={{ flex: 1, minHeight: 0, overflowX: 'auto' }}>
        {PIPELINE_HI.map((c) => (
          <KanbanColumn key={c.key} col={c} activeId={activeId} onPick={onPickLead} />
        ))}
      </div>
    </div>
  );
}

/* ───────── Dashboard root ───────── */
function DashboardView() {
  const [section, setSection] = dUseState('pipeline'); // pipeline | settings
  const [activeLead, setActiveLead] = dUseState(null);
  const [view, setView] = dUseState('kanban');

  const totalLeads = PIPELINE_HI.reduce((n, c) => n + c.leads.length, 0);

  return (
    <div className="fade-up" style={{ minHeight: 'calc(100vh - 60px)', background: 'var(--bg)', padding: '32px 24px 56px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="row middle between" style={{ marginBottom: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Berater-Dashboard</div>
            <div className="h-1">Sanio im Alltag — Pipeline, Drawer, Einstellungen.</div>
          </div>
          <div className="small muted">Klicken Sie einen Lead an, um den Drawer zu öffnen.</div>
        </div>

        <div className="browser" style={{ height: 'min(82vh, 880px)' }}>
          <div className="browser-chrome">
            <div className="browser-dots"><span /><span /><span /></div>
            <div className="browser-url">
              <Icon name="globe" size={11} />
              sanio.app/dashboard{section === 'settings' ? '/settings' : activeLead ? `?lead=${activeLead.id}` : ''}
            </div>
            <span style={{ width: 70 }} />
          </div>

          <div className="browser-body" style={{ position: 'relative' }}>
            <DashSidebar active={section === 'settings' ? 'settings' : section} onChange={(k) => {
              if (k === 'settings') { setSection('settings'); setActiveLead(null); }
              else { setSection('pipeline'); }
            }} />

            <div className="col grow" style={{ minWidth: 0, position: 'relative' }}>
              {section === 'pipeline' ? (
                <>
                  <DashHeader
                    title="Lead-Pipeline"
                    sub={`${totalLeads} aktive Vorgänge · 2 neue heute · Q2/2026`}
                    view={view}
                    onView={setView}
                  />
                  <PipelineView onPickLead={(l) => setActiveLead(l)} activeId={activeLead?.id} />
                </>
              ) : (
                <>
                  <DashHeader
                    title="Einstellungen"
                    sub="Profil, Vorlagen, Integrationen, DSGVO"
                  />
                  <SettingsView />
                </>
              )}

              {section === 'pipeline' && activeLead && (
                <LeadDrawer lead={activeLead} onClose={() => setActiveLead(null)} />
              )}
            </div>
          </div>
        </div>

        <div className="row middle gap-8" style={{ marginTop: 16, justifyContent: 'center', color: 'var(--ink-faint)' }}>
          <span className="tiny faint">Tipp:</span>
          <span className="tiny">
            Klick auf <b style={{ color: 'var(--ink)' }}>„Sabine Wagner"</b> (Spalte „Formular ausgefüllt") öffnet den Lead-Drawer.
          </span>
        </div>
      </div>
    </div>
  );
}

window.DashboardView = DashboardView;