/* Product UI mocks — abstract but believable. No external imagery. */

const MeetingMock = () => (
  <div className="mock-card float-a" style={{ width: "100%", maxWidth: 380 }}>
    <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--hair)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <div className="mock-row">
        <div style={{ width: 8, height: 8, borderRadius: "50%", background: "color-mix(in oklab, var(--gold) calc(var(--gold-intensity) * 100%), var(--navy-soft))" }} />
        <span className="mono" style={{ color: "var(--navy-soft)" }}>meeting · live</span>
      </div>
      <span className="mono" style={{ color: "var(--ink-muted)" }}>14:32</span>
    </div>
    <div style={{ padding: "18px 18px 16px" }}>
      <div style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.25, color: "var(--navy)", marginBottom: 10 }}>
        Nordhaus · Q2 Pipeline Review
      </div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
        <span className="mock-tag">Sales</span>
        <span className="mock-tag">3 Personen</span>
        <span className="mock-tag tag-gold">AI mitgehört</span>
      </div>
      <div style={{ display: "grid", gap: 8 }}>
        {[
          ["A", "Julian hat den Deal mit Holz­mann erwähnt — warte noch auf Angebot."],
          ["S", "Angebot liegt bei Marie seit Mo. Ich ziehe es nach."],
          ["AI", "Erkannt: Follow-up fällig an Holzmann. Entwurf vorbereitet."],
        ].map(([who, line], i) => (
          <div key={i} style={{ display: "flex", gap: 10 }}>
            <div style={{
              width: 22, height: 22, borderRadius: "50%",
              background: who === "AI" ? "var(--navy)" : "var(--ivory-3)",
              color: who === "AI" ? "var(--ivory)" : "var(--navy)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 10, fontWeight: 600, flexShrink: 0,
            }}>{who}</div>
            <div style={{ fontSize: 12.5, lineHeight: 1.45, color: who === "AI" ? "var(--navy)" : "var(--navy-soft)" }}>
              {line}
              {i === 2 && <span className="caret" />}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const FollowupMock = () => (
  <div className="mock-card float-b" style={{ width: "100%", maxWidth: 360 }}>
    <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--hair)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span className="mono" style={{ color: "var(--navy-soft)" }}>follow-up · draft</span>
      <span className="mock-tag tag-navy">Review</span>
    </div>
    <div style={{ padding: "14px 16px 16px" }}>
      <div style={{ fontSize: 12, color: "var(--ink-muted)", marginBottom: 4 }}>An — Marie Holzmann · Holzmann AG</div>
      <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--navy)", marginBottom: 12 }}>
        Angebot Q2 — kurze Rückmeldung
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.55, color: "var(--navy-soft)", marginBottom: 12 }}>
        Hi Marie, kurze Rückmeldung zum Angebot von Montag. Julian hat heute im Call bestätigt, dass die Größenordnung passt. Soll ich einen kurzen Termin vorschlagen, um die Staffelung durchzugehen?
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <span className="mock-tag tag-gold">Aus Meeting 14:32</span>
        <span className="mock-tag">3 Kontext-Quellen</span>
      </div>
    </div>
  </div>
);

const BoardMock = () => (
  <div className="mock-card" style={{ width: "100%", maxWidth: 420 }}>
    <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--hair)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span className="mono" style={{ color: "var(--navy-soft)" }}>pipeline · q2</span>
      <div className="mock-row" style={{ gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ivory-3)" }} />
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ivory-3)" }} />
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "color-mix(in oklab, var(--gold) calc(var(--gold-intensity) * 100%), var(--navy-soft))" }} />
      </div>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1, background: "var(--hair)" }}>
      {[
        { h: "Angebot", items: [["Holzmann", "€48k", true], ["Weiss", "€12k", false]] },
        { h: "Verhandlung", items: [["Nordhaus", "€96k", false]] },
        { h: "Abschluss", items: [["Perrin", "€31k", false]] },
      ].map((col, i) => (
        <div key={i} style={{ background: "#FFFCF3", padding: "10px 10px 12px" }}>
          <div style={{ fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-muted)", fontWeight: 500, marginBottom: 8 }}>{col.h}</div>
          <div style={{ display: "grid", gap: 6 }}>
            {col.items.map(([n, v, hot], j) => (
              <div key={j} style={{ background: "var(--paper)", border: "1px solid var(--hair)", borderRadius: 4, padding: "7px 8px" }}>
                <div style={{ fontSize: 11.5, fontWeight: 500, color: "var(--navy)", marginBottom: 2 }}>{n}</div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono" style={{ color: "var(--navy-soft)" }}>{v}</span>
                  {hot && <span style={{ width: 5, height: 5, borderRadius: "50%", background: "color-mix(in oklab, var(--gold) calc(var(--gold-intensity) * 100%), var(--navy-soft))" }} />}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{ padding: "10px 14px", borderTop: "1px solid var(--hair)", display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{ width: 16, height: 16, borderRadius: "50%", background: "var(--navy)", color: "var(--ivory)", fontSize: 9, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center" }}>AI</div>
      <span style={{ fontSize: 11.5, color: "var(--navy-soft)" }}>Holzmann ready to move — follow-up drafted</span>
    </div>
  </div>
);

const RelationshipMock = () => (
  <div className="mock-card" style={{ width: "100%", maxWidth: 340 }}>
    <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--hair)" }}>
      <div className="mock-row" style={{ justifyContent: "space-between" }}>
        <span className="mono" style={{ color: "var(--navy-soft)" }}>person · holzmann</span>
        <span className="mock-tag tag-gold">Warm</span>
      </div>
    </div>
    <div style={{ padding: "16px" }}>
      <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 14 }}>
        <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--ivory-3)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontSize: 18, color: "var(--navy)" }}>MH</div>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 16, color: "var(--navy)" }}>Marie Holzmann</div>
          <div style={{ fontSize: 11.5, color: "var(--ink-muted)" }}>Geschäftsführerin · Holzmann AG</div>
        </div>
      </div>
      <hr className="hairline" style={{ margin: "0 0 12px" }} />
      <div style={{ display: "grid", gap: 8, fontSize: 12, color: "var(--navy-soft)" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Letzter Kontakt</span><span className="mono">vor 2 Tg.</span></div>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Deals</span><span className="mono">1 aktiv · €48k</span></div>
        <div style={{ display: "flex", justifyContent: "space-between" }}><span>Signale</span><span className="mono" style={{ color: "var(--gold-deep)" }}>3 positive</span></div>
      </div>
    </div>
  </div>
);

window.CWMocks = { MeetingMock, FollowupMock, BoardMock, RelationshipMock };