// Dashboard mockup — dark mode recreation of the inspection app
// Used inside the landing page hero / showcase

const Logo = ({ size = 22, color = "#ededed" }) => (
  <svg viewBox="0 0 984 360" style={{ height: size, width: "auto" }} aria-label="expandAI">
    <g transform="matrix(1.3333,0,0,-1.3333,0,360)" fill={color}>
      <path d="m 76.21,147.27 c -13.51,0 -24.75,-9.26 -27.18,-21.56 h 52.24 c 0.91,0 1.82,0.76 1.67,1.67 -3.04,11.39 -13.82,19.89 -26.73,19.89 m 27.49,-31.28 h -54.67 c 2.43,-12.15 13.67,-21.41 27.18,-21.41 6.99,0 13.67,2.58 18.68,6.83 3.65,3.49 9.26,3.8 13.36,0.76 -6.68,-10.48 -18.83,-17.31 -32.04,-17.31 -20.65,0 -37.36,16.1 -37.36,35.99 0,20.05 16.7,36.14 37.36,36.14 19.13,0 35.23,-13.82 37.05,-31.74 0.61,-5.31 -4.4,-9.11 -9.57,-9.26"/>
      <path d="m 161.86,120.7 29.61,-33.56 c -1.67,-1.52 -3.95,-2.28 -6.38,-2.28 -2.73,0 -5.47,1.06 -7.29,3.19 l -22.47,25.36 -22.47,-25.36 c -1.82,-2.13 -4.56,-3.19 -7.29,-3.19 -2.28,0 -4.71,0.76 -6.38,2.28 l 29.61,33.56 -29.61,33.71 c 1.67,1.52 4.1,2.43 6.53,2.43 2.58,0 5.16,-1.21 6.99,-3.19 l 22.62,-25.51 22.63,25.51 c 1.82,1.97 4.4,3.19 7.14,3.19 2.28,0 4.71,-0.91 6.53,-2.43 z"/>
      <path d="m 240.98,84.86 c -6.23,0 -12.3,1.37 -17.62,4.1 -4.86,2.58 -6.53,8.5 -4.1,13.21 0.3,0.46 0.61,0.91 0.91,1.37 5.16,-5.62 12.76,-8.96 20.8,-8.96 14.58,0 26.42,11.84 26.42,26.27 0,14.58 -11.84,26.42 -26.42,26.42 -17.01,0 -27.64,-10.02 -27.64,-26.42 v -52.54 c 0,-5.16 -4.4,-9.42 -9.72,-9.42 v 61.96 c 0,21.72 15.03,36.14 37.36,36.14 20.05,0 36.14,-16.1 36.14,-36.14 0,-19.89 -16.1,-35.99 -36.14,-35.99"/>
      <path d="m 360.34,84.86 c -5.32,0 -9.72,4.25 -9.72,9.42 v 26.57 c 0,16.4 -10.63,26.42 -27.64,26.42 -14.58,0 -26.42,-11.84 -26.42,-26.42 0,-14.43 11.84,-26.27 26.42,-26.27 8.05,0 15.64,3.34 20.8,8.96 0.3,-0.46 0.61,-0.91 0.91,-1.37 2.58,-4.71 0.76,-10.63 -3.95,-13.21 -5.32,-2.73 -11.54,-4.1 -17.77,-4.1 -19.89,0 -36.14,16.1 -36.14,35.99 0,20.05 16.25,36.14 36.14,36.14 22.32,0 37.36,-14.43 37.36,-36.14 z"/>
      <path d="m 448.42,84.86 c -5.16,0 -9.42,4.25 -9.42,9.42 v 26.57 c 0,14.58 -11.84,26.42 -26.42,26.42 -14.58,0 -26.42,-11.84 -26.42,-26.42 v -26.57 c 0,-5.16 -4.25,-9.42 -9.42,-9.42 h -0.3 v 35.99 c 0,19.89 16.25,36.14 36.14,36.14 19.89,0 36.14,-16.25 36.14,-36.14 v -35.99 z"/>
      <path d="m 497.77,84.86 c -19.89,0 -36.14,16.1 -36.14,35.99 0,19.89 16.25,36.14 36.14,36.14 6.23,0 12.45,-1.37 17.77,-4.25 4.71,-2.43 6.53,-8.35 3.95,-13.21 -0.3,-0.46 -0.61,-0.91 -0.91,-1.21 -5.16,5.62 -12.76,8.81 -20.8,8.81 v 0.15 c -14.58,0 -26.42,-11.84 -26.42,-26.42 0,-14.58 11.84,-26.27 26.42,-26.27 17.01,0 27.64,10.02 27.64,26.27 v 55.73 c 0,5.32 4.4,9.57 9.72,9.57 v -65.3 c 0,-21.56 -15.03,-35.99 -37.36,-35.99"/>
      <path d="m 604.83,174.3 c -0.3,0.61 -1.21,2.13 -2.73,2.13 -0.91,0 -1.82,-0.76 -2.58,-2.28 l -25.82,-51.93 h 56.79 z m 41.76,-84.43 -11.24,22.63 h -66.51 l -11.24,-22.63 c -2.28,-4.71 -8.05,-6.38 -12.76,-4.1 l 46.01,92.78 c 2.43,4.86 6.53,7.59 11.24,7.59 4.86,0 9.11,-2.89 11.39,-7.59 l 46.01,-92.78 c -4.71,-2.28 -10.48,-0.61 -12.91,4.1"/>
      <path d="m 681.22,84.86 c -5.32,0 -9.57,4.25 -9.57,9.42 v 91.87 h 0.3 c 5.32,0 9.42,-4.4 9.42,-9.57 v -91.72 z"/>
    </g>
  </svg>
);

const dashStyles = {
  shell: {
    background: "#0d0d0d",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 14,
    overflow: "hidden",
    display: "grid",
    gridTemplateColumns: "220px 1fr 320px",
    height: 520,
    boxShadow: "0 40px 120px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02)",
  },
  side: {
    background: "#0a0a0a",
    borderRight: "1px solid rgba(255,255,255,0.06)",
    padding: "18px 14px",
    display: "flex",
    flexDirection: "column",
    fontSize: 13,
  },
  sideHead: {
    padding: "4px 8px 16px",
  },
  sideBtn: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "9px 10px",
    borderRadius: 8,
    color: "#ededed",
    border: "1px solid rgba(255,255,255,0.08)",
    background: "rgba(255,255,255,0.02)",
    marginBottom: 14,
    fontSize: 13,
  },
  sideLabel: {
    fontSize: 11,
    color: "#5e5e5e",
    textTransform: "uppercase",
    letterSpacing: "0.1em",
    padding: "8px 10px 6px",
  },
  proj: {
    display: "flex",
    alignItems: "center",
    gap: 8,
    padding: "8px 10px",
    color: "#b4b4b4",
    borderRadius: 6,
  },
  projActive: {
    background: "rgba(167, 139, 250, 0.10)",
    color: "#ededed",
  },
  user: {
    marginTop: "auto",
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "10px 8px",
    borderTop: "1px solid rgba(255,255,255,0.06)",
  },
  avatar: {
    width: 28, height: 28, borderRadius: 999, background: "#a78bfa",
    display: "grid", placeItems: "center", color: "#1a1033", fontWeight: 600, fontSize: 12,
  },
  videoPane: {
    position: "relative",
    background: "#0a0a0a",
    overflow: "hidden",
  },
  pipeRing: {
    position: "absolute",
    inset: 0,
    background: "radial-gradient(ellipse at 55% 55%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 55%), radial-gradient(circle at 50% 50%, rgba(255,200,120,0.5) 38%, rgba(255,150,50,0.0) 50%)",
  },
  hudBox: {
    position: "absolute",
    background: "rgba(0,30,90,0.85)",
    color: "#fff",
    fontFamily: "monospace",
    fontSize: 11,
    padding: "3px 6px",
    borderRadius: 2,
  },
  panel: {
    background: "#0a0a0a",
    borderLeft: "1px solid rgba(255,255,255,0.06)",
    padding: 18,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    gap: 12,
    fontSize: 12,
  },
  field: {
    display: "flex",
    flexDirection: "column",
    gap: 4,
  },
  input: {
    background: "#141414",
    border: "1px solid rgba(255,255,255,0.10)",
    borderRadius: 8,
    padding: "8px 10px",
    color: "#ededed",
    fontSize: 12,
  },
  label: { color: "#8a8a8a", fontSize: 11 },
  summary: {
    borderTop: "1px solid rgba(255,255,255,0.06)",
    paddingTop: 12,
    marginTop: 4,
    flex: 1,
    overflow: "hidden",
  },
  summaryRow: {
    display: "grid",
    gridTemplateColumns: "16px 44px 1fr auto",
    gap: 8,
    alignItems: "center",
    padding: "6px 8px",
    borderRadius: 6,
    fontSize: 11,
    color: "#b4b4b4",
  },
  summaryActive: {
    background: "rgba(167, 139, 250, 0.10)",
    color: "#ededed",
  },
};

const SidebarItem = ({ active, label }) => (
  <div style={{ ...dashStyles.proj, ...(active ? dashStyles.projActive : {}) }}>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
    </svg>
    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
  </div>
);

const SummaryRow = ({ active, m, label, code }) => (
  <div style={{ ...dashStyles.summaryRow, ...(active ? dashStyles.summaryActive : {}) }}>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#34d399" strokeWidth="3">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
    <span style={{ color: "#5e5e5e", fontVariantNumeric: "tabular-nums" }}>{m}</span>
    <span>{label}</span>
    <span style={{ color: "#5e5e5e", fontFamily: "monospace", fontSize: 10 }}>{code}</span>
  </div>
);

const DashboardMockup = ({ compact = false }) => {
  const h = compact ? 440 : 520;
  return (
    <div style={{ ...dashStyles.shell, height: h }}>
      {/* Sidebar */}
      <div style={dashStyles.side}>
        <div style={dashStyles.sideHead}>
          <Logo size={36} />
        </div>
        <div style={dashStyles.sideBtn}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 5v14M5 12h14"/>
          </svg>
          Neues Projekt
        </div>
        <div style={dashStyles.sideLabel}>Projekte</div>
        <SidebarItem label="Steinacker 11,13a-c…" />
        <SidebarItem active label="Josef-Orlopp-Str. 55, Berlin" />
        <SidebarItem label="Holunderweg 1a, Norderstedt" />
        <SidebarItem label="Eisenacher Str. 99, Berlin" />
        <SidebarItem label="Maria-Goeppert-Str. 1, ..." />

        <div style={dashStyles.user}>
          <div style={dashStyles.avatar}>A</div>
          <div>
            <div style={{ color: "#ededed", fontSize: 12 }}>Artur Piet</div>
            <div style={{ color: "#5e5e5e", fontSize: 11 }}>expandAI GmbH</div>
          </div>
        </div>
      </div>

      {/* Video pane */}
      <div style={dashStyles.videoPane}>
        <img
          src="assets/sewer-inspection.jpg"
          alt="TV-Befahrung eines Hausanschlusses – Originalvideo der Kanalinspektion, das die expandAI-KI auswertet"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}
        />
        {/* AI detection box */}
        <div style={{
          position: "absolute",
          left: "4%", top: "32%", width: "22%", height: "32%",
          border: "1.5px solid #a78bfa",
          borderRadius: 4,
          boxShadow: "0 0 0 3px rgba(167,139,250,0.18)",
        }}>
          <div style={{
            position: "absolute", top: -22, left: -1,
            background: "#a78bfa", color: "#1a1033",
            padding: "2px 7px", borderRadius: 3,
            fontFamily: "monospace", fontSize: 10, fontWeight: 600,
          }}>Wurzel</div>
        </div>
        {/* Player bar */}
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "10px 16px",
          display: "flex", alignItems: "center", gap: 10,
          color: "#fff",
          background: "linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0))",
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          <span style={{ fontFamily: "monospace", fontSize: 11 }}>3:20 / 4:47</span>
          <div style={{ flex: 1, height: 3, background: "rgba(255,255,255,0.2)", borderRadius: 2, position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "70%", background: "#fff", borderRadius: 2 }} />
          </div>
        </div>
      </div>

      {/* Right panel */}
      <div style={dashStyles.panel}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, color: "#34d399", fontSize: 12, fontWeight: 500 }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
          KI-Prüfung abgeschlossen
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 80px", gap: 8 }}>
          <div style={dashStyles.field}>
            <span style={dashStyles.label}>Schaden</span>
            <div style={dashStyles.input}>Verschobene Verbindung</div>
          </div>
          <div style={dashStyles.field}>
            <span style={dashStyles.label}>Zeit</span>
            <div style={dashStyles.input}>00:00:38</div>
          </div>
        </div>
        <div style={dashStyles.field}>
          <span style={dashStyles.label}>Art der Verschiebung</span>
          <div style={dashStyles.input}>In Längsrichtung (&gt; 15 mm)</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 60px", gap: 8 }}>
          <div style={dashStyles.field}>
            <span style={dashStyles.label}>Distanz</span>
            <div style={dashStyles.input}>35</div>
          </div>
          <div style={{ ...dashStyles.field, justifyContent: "end" }}>
            <span style={dashStyles.label}>Einheit</span>
            <div style={dashStyles.input}>mm</div>
          </div>
        </div>

        <div style={dashStyles.summary}>
          <div style={{ fontSize: 12, color: "#ededed", fontWeight: 500, marginBottom: 6, padding: "0 8px" }}>Zusammenfassung</div>
          <SummaryRow m="0,0 m" label="Anfangsknoten" code="BCD XP" />
          <SummaryRow m="0,3 m" label="Ablagerungen" code="BBC C A1" />
          <SummaryRow m="0,5 m" label="Form" code="AEC" />
          <SummaryRow m="1,2 m" label="Einragendes Material" code="BAI AA" />
          <SummaryRow active m="1,2 m" label="Verschobene Verbindung" code="BAJ A" />
          <SummaryRow m="2,3 m" label="Ablagerungen" code="BBC B" />
          <SummaryRow m="4,6 m" label="Verschobene Verbindung" code="BAJ A" />
          <SummaryRow m="5,0 m" label="Anschluss" code="BCA AA" />
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Logo, DashboardMockup });