// mini-ui.jsx — Tiny but realistic UI mocks used in Use-Case portal cards
// and Selected Work case studies. SVG-driven, on-brand, no stock chart icons.

// Lead-Inbox preview
const UIInbox = ({ accent = true }) => (
  <div className="mui mui-inbox">
    <div className="mui-bar">
      <div className="mui-bar-l">
        <span className="mui-circle" />
        <span className="mui-bar-t">Inbox</span>
        <span className="mui-bar-tag">live</span>
      </div>
      <span className="mui-bar-r mono">07:42</span>
    </div>
    <div className="mui-list">
      {[
        { n: "Solartec GmbH",   t: "Anfrage Photovoltaik 12 kWp", c: "neu", a: 1, time: "07:39" },
        { n: "Kreutzer Bau",    t: "Angebot — Halle Sanierung",   c: "in_arbeit", time: "07:31" },
        { n: "M. Hoffmann",     t: "Rückruf Wartungsvertrag",     c: "in_arbeit", time: "07:18" },
        { n: "Lenz Immobilien", t: "Mieterportal Onboarding",     c: "abgeschlossen", time: "06:54" },
      ].map((r, i) => (
        <div key={i} className={`mui-row ${r.a ? "active" : ""}`}>
          <span className="mui-dot" data-c={r.c} />
          <div className="mui-row-main">
            <div className="mui-row-n">{r.n}</div>
            <div className="mui-row-t">{r.t}</div>
          </div>
          <span className="mui-row-time mono">{r.time}</span>
        </div>
      ))}
    </div>
  </div>
);

// CRM kanban
const UICRM = () => (
  <div className="mui mui-crm">
    <div className="mui-bar">
      <span className="mui-bar-t">Pipeline · Q2</span>
      <span className="mui-bar-r mono">€ 412.300</span>
    </div>
    <div className="mui-cols">
      {[
        { l: "Neu",       n: 12, items: ["Solartec", "M. Hoffmann"] },
        { l: "Qualified", n:  8, items: ["Kreutzer", "Lenz"] },
        { l: "Angebot",   n:  5, items: ["Bauer Solar"] },
        { l: "Won",       n:  3, items: [] },
      ].map((c, i) => (
        <div key={i} className="mui-col">
          <div className="mui-col-h">
            <span>{c.l}</span><span className="mono">{c.n}</span>
          </div>
          {c.items.map((t, j) => (
            <div key={j} className="mui-pill">
              <span className="mui-pill-dot" />
              <span>{t}</span>
            </div>
          ))}
          {c.items.length === 0 && <div className="mui-pill empty">—</div>}
        </div>
      ))}
    </div>
  </div>
);

// Quote / Angebot generator
const UIQuote = () => (
  <div className="mui mui-quote">
    <div className="mui-bar">
      <span className="mui-bar-t">Angebot AG-2419</span>
      <span className="mui-bar-r mono">€ 18.420</span>
    </div>
    <div className="mui-quote-body">
      <div className="mui-line"><span>PV-Anlage 12 kWp</span><span className="mono">€ 14.200</span></div>
      <div className="mui-line"><span>Speichersystem 10 kWh</span><span className="mono">€  3.420</span></div>
      <div className="mui-line"><span>Montage & Inbetriebnahme</span><span className="mono">€    800</span></div>
      <div className="mui-progress">
        <span style={{ width: "72%" }}/>
      </div>
      <div className="mui-foot">
        <span>Vorlage: <strong>solar.standard</strong></span>
        <span className="mono">12s</span>
      </div>
    </div>
  </div>
);

// Support / chat agent
const UIChat = () => (
  <div className="mui mui-chat">
    <div className="mui-bar">
      <div className="mui-bar-l">
        <span className="mui-avatar">A</span>
        <div>
          <div className="mui-bar-t">Service-Agent</div>
          <div className="mui-bar-sub">resolved · 87% diese Woche</div>
        </div>
      </div>
    </div>
    <div className="mui-chat-body">
      <div className="bubble user">Wann kommt mein Techniker?</div>
      <div className="bubble bot">
        Termin am <strong>Di, 14.05. 10–12 Uhr</strong>. Soll ich ihn verschieben?
      </div>
      <div className="bubble bot small">
        <span className="bot-actions">
          <span className="bot-chip">Bestätigen</span>
          <span className="bot-chip">Verschieben</span>
        </span>
      </div>
    </div>
  </div>
);

// Knowledge base
const UIKB = () => (
  <div className="mui mui-kb">
    <div className="mui-bar">
      <span className="mui-bar-t">Wissens-Suche</span>
      <span className="mui-bar-r mono">412 docs</span>
    </div>
    <div className="mui-search">
      <span className="mui-search-icon">⌕</span>
      <span className="mui-search-q">VDE-Norm 4105 Photovoltaik</span>
      <span className="mui-search-key">↵</span>
    </div>
    <div className="mui-results">
      {[
        { t: "Anschlussbedingungen Niederspannung", s: "VDE-AR-N · §6 Schutzkonzept" },
        { t: "Inbetriebnahme-Protokoll PV", s: "intern/qm · Vorlage 2024" },
        { t: "Speicher: Brandschutz-Checkliste", s: "intern/sicherheit" },
      ].map((r, i) => (
        <div key={i} className="mui-res">
          <div className="mui-res-t">{r.t}</div>
          <div className="mui-res-s mono">{r.s}</div>
        </div>
      ))}
    </div>
  </div>
);

// Reporting agent / dashboard
const UIDash = () => (
  <div className="mui mui-dash">
    <div className="mui-bar">
      <span className="mui-bar-t">Wochenreport</span>
      <span className="mui-bar-r mono">KW 18</span>
    </div>
    <div className="mui-dash-grid">
      <div className="mui-stat">
        <div className="mui-stat-l">Lead-Reaktion</div>
        <div className="mui-stat-v">02:14<span className="mui-stat-u">m</span></div>
        <div className="mui-stat-d">↓ 64% vs. KW 17</div>
      </div>
      <div className="mui-stat">
        <div className="mui-stat-l">Angebote / Tag</div>
        <div className="mui-stat-v">23</div>
        <div className="mui-stat-d">↑ stabil</div>
      </div>
      <div className="mui-spark">
        <svg viewBox="0 0 120 36" preserveAspectRatio="none">
          <polyline fill="none" stroke="var(--accent)" strokeWidth="1.4"
            points="0,28 12,24 24,26 36,18 48,20 60,12 72,14 84,8 96,10 108,5 120,7"/>
          <polyline fill="none" stroke="var(--line-strong)" strokeWidth="0.6" strokeDasharray="2 3"
            points="0,30 120,18"/>
        </svg>
      </div>
    </div>
  </div>
);

window.UIInbox = UIInbox;
window.UICRM = UICRM;
window.UIQuote = UIQuote;
window.UIChat = UIChat;
window.UIKB = UIKB;
window.UIDash = UIDash;