// product-dashboard.jsx - enriched HCP Candidate Dashboard + iMac frame.
// Exports to window: IMac, ProductDashboard, DashboardPro.
(function () {
  const primary = "#0D68AC", cyan = "#00A5D5";
  // Company marks
  const COMPANY = {
    Anthropic: { mono: "A", color: "#C15F3C" },
    Meta: { mono: "M", color: "#0866FF" },
    Nvidia: { mono: "N", color: "#76B900" },
    Google: { mono: "G", color: "#4285F4" },
    OpenAI: { mono: "O", color: "#0B0B0B" },
    Stripe: { mono: "S", color: "#635BFF" },
    Datadog: { mono: "D", color: "#632CA6" },
    Cloudflare: { mono: "C", color: "#F38020" }
  };

  const PHOTO_MAP = {
    12: "product-assets/cand-david-carter.png",
    5: "product-assets/cand-maya-chen.png",
    33: "product-assets/cand-marcus-reed.png",
    44: "product-assets/cand-priya-nair.png",
    15: "product-assets/cand-james-park.png",
    45: "product-assets/cand-sofia-alvarez.png",
    26: "product-assets/cand-lena-wagner.png",
    56: "product-assets/cand-omar-haddad.png",
    61: "product-assets/cand-aisha-khan.png",
    72: "product-assets/cand-daniel-okafor.png"
  };
  const PHOTO = (id) => PHOTO_MAP[id];
  // Candidate data
  const CANDIDATES = [
  { name: "David Carter", title: "Member of Technical Staff", company: "Anthropic", location: "San Francisco", yoe: 8, degree: "MS", major: "CS", school: "Stanford", score: 92, fit: "good", sel: true, photo: PHOTO(12) },
  { name: "Maya Chen", title: "Senior Backend Engineer", company: "Meta", location: "Menlo Park", yoe: 7, degree: "BS", major: "CS", school: "UC Berkeley", score: 88, fit: "good", photo: PHOTO(5) },
  { name: "Marcus Reed", title: "SDE · Level 5", company: "Google", location: "Mountain View", yoe: 9, degree: "MS", major: "CS", school: "MIT", score: 90, fit: "good", photo: PHOTO(33) },
  { name: "Priya Nair", title: "ML Infrastructure Engineer", company: "Nvidia", location: "Santa Clara", yoe: 6, degree: "PhD", major: "EE", school: "CMU", score: 79, fit: "possible", photo: PHOTO(44) },
  { name: "James Park", title: "Staff Engineer", company: "Stripe", location: "San Francisco", yoe: 10, degree: "BS", major: "CS", school: "Georgia Tech", score: 86, fit: "good", photo: PHOTO(15) },
  { name: "Sofia Alvarez", title: "Research Engineer", company: "OpenAI", location: "San Francisco", yoe: 5, degree: "MS", major: "ML", school: "Caltech", score: 77, fit: "possible", photo: PHOTO(45) },
  { name: "Lena Wagner", title: "Backend Engineer", company: "Datadog", location: "Palo Alto", yoe: 6, degree: "MS", major: "CompE", school: "TU Munich", score: 81, fit: "possible", photo: PHOTO(26) },
  { name: "Omar Haddad", title: "Platform Engineer", company: "Cloudflare", location: "San Francisco", yoe: 7, degree: "BS", major: "CS", school: "Waterloo", score: 84, fit: "good", photo: PHOTO(56) },
  { name: "Aisha Khan", title: "Senior Software Engineer", company: "Stripe", location: "Oakland", yoe: 6, degree: "BS", major: "CS", school: "UCLA", score: 83, fit: "good", photo: PHOTO(61) },
  { name: "Daniel Okafor", title: "Distributed Systems Engineer", company: "Datadog", location: "Seattle", yoe: 8, degree: "MS", major: "CS", school: "UT Austin", score: 80, fit: "possible", photo: PHOTO(72) }];


  const KEY_MATCH = [
  "8 yrs distributed systems",
  "Scaled payments to 40k req/s",
  "Tech lead, 6-engineer platform team"];

  const TO_VERIFY = ["Kafka production ownership", "Open to onsite in SF"];
  // Dark palette
  const T = {
    pageBg: "#0C1B33", text: "#EAF1FA", muted: "#8093AD", line: "rgba(255,255,255,0.08)",
    topBg: "#0E2138", railBg: "#0A1729",
    activeText: "#6FBDEC", activeBg: "rgba(13,104,172,0.24)", inactiveText: "#9DB0C9", iconInactive: "#6E82A0",
    sectionHead: "#6E82A0",
    cardBg: "#11253F", cardBorder: "rgba(255,255,255,0.07)",
    selBorder: "#2F86CC",
    searchBg: "rgba(255,255,255,0.05)", searchBorder: "rgba(255,255,255,0.13)", searchText: "#9DB0C9", searchIcon: "#7E92AC",
    bodyText: "#C2D0E2", evidenceText: "#9DB0C9",
    chipBg: "rgba(255,255,255,0.05)", chipBorder: "rgba(255,255,255,0.10)", chipText: "#AEBED4",
    badgePrimaryBg: "rgba(13,104,172,0.30)", badgePrimaryText: "#86C6F0",
    check: "#34D399", clock: "#FBBF24",
    liveText: "#4ADE80", liveBg: "rgba(22,163,74,0.16)", liveBorder: "rgba(74,222,128,0.32)",
    fitBg: "rgba(56,150,230,0.16)", fitBorder: "rgba(127,194,239,0.30)", fitGood: "#4ADE80", fitPossible: "#E0A463",
    amberBg: "rgba(251,191,36,0.14)", amberBorder: "rgba(251,191,36,0.30)",
    barTrack: "rgba(255,255,255,0.08)"
  };

  // Lucide glyphs not in the DS Icon set.
  const EXTRA = {
    "credit-card": '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
    settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
    "dollar-sign": '<line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
    "trending-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
    "bar-chart": '<line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/>',
    "graduation-cap": '<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/>'
  };
  function GIcon({ name, size = 14, color }) {
    const { Icon } = window.HiringCopilotDesignSystem_f7306a;
    if (EXTRA[name]) {
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: EXTRA[name] }} />;
    }
    return <Icon name={name} size={size} color={color} />;
  }

  function CompanyChip({ company }) {
    const c = COMPANY[company] || { mono: company[0], color: T.muted };
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, flexShrink: 0 }}>
        <span style={{ width: 15, height: 15, borderRadius: 4, background: c.color, color: "#fff", fontSize: 9, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center" }}>{c.mono}</span>
        <span style={{ fontSize: 11.5, color: T.companyName || "#A9B7CC", fontWeight: 600 }}>{company}</span>
      </span>);

  }

  function MetaChip({ icon, sm, children }) {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: sm ? "2px 7px" : "3px 8px", borderRadius: 6, background: T.chipBg, border: `1px solid ${T.chipBorder}`, fontSize: sm ? 10 : 10.5, fontWeight: 600, color: T.chipText, whiteSpace: "nowrap" }}>
        {icon && <GIcon name={icon} size={sm ? 10 : 11} color={T.searchIcon} />}{children}
      </span>);

  }

  function ScoreRing({ value, size = 38, stroke = 3.5 }) {
    const r = (size - stroke) / 2;
    const c = 2 * Math.PI * r;
    const off = c * (1 - value / 100);
    const color = value >= 85 ? T.fitGood : value >= 78 ? cyan : T.fitPossible;
    return (
      <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
        <svg width={size} height={size}>
          <circle cx={size / 2} cy={size / 2} r={r} stroke={T.barTrack} strokeWidth={stroke} fill="none" />
          <circle cx={size / 2} cy={size / 2} r={r} stroke={color} strokeWidth={stroke} fill="none" strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" transform={`rotate(-90 ${size / 2} ${size / 2})`} />
        </svg>
        <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 800, color }}>{value}</span>
      </div>);

  }

  function PhotoAvatar({ name, src, size }) {
    const initials = name.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase();
    return (
      <div style={{ width: size, height: size, borderRadius: "50%", overflow: "hidden", flexShrink: 0, background: "linear-gradient(135deg, #0D68AC, #00A5D5)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.34, fontWeight: 800 }}>
        {src ? <img src={src} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> : initials}
      </div>);

  }

  const sectionHead = (t, right) =>
  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 9 }}>
      <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: "0.07em", textTransform: "uppercase", color: T.sectionHead }}>{t}</span>
      {right}
    </div>;
  // Dashboard screen
  function DashboardPro() {
    const { Icon, FitLabel } = window.HiringCopilotDesignSystem_f7306a;

    const menu = [
    { icon: "briefcase", label: "Roles" },
    { icon: "users", label: "Candidates", active: true },
    { icon: "filter", label: "Pipeline" },
    { icon: "layout-dashboard", label: "Dashboard" }];

    const menu2 = [
    { icon: "credit-card", label: "Billing" },
    { icon: "settings", label: "Settings" }];


    const sideItem = (s) =>
    <div key={s.label} style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 11px", borderRadius: 8, fontSize: 12.5,
      fontWeight: s.active ? 700 : 500, color: s.active ? T.activeText : T.inactiveText, background: s.active ? T.activeBg : "transparent" }}>
        <GIcon name={s.icon} size={15} color={s.active ? T.activeText : T.iconInactive} /> {s.label}
      </div>;


    return (
      <div style={{ width: "100%", height: "100%", background: T.pageBg, fontFamily: "var(--hcp-font-sans)", display: "flex", flexDirection: "column", overflow: "hidden", color: T.text }}>
        {/* top bar */}
        <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 20px", borderBottom: `1px solid ${T.line}`, background: T.topBg, flexShrink: 0 }}>
          <img src="product-assets/hcp-icon.png" alt="HCP" style={{ width: 26, height: 26, borderRadius: 7 }} />
          <div style={{ lineHeight: 1.25 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Candidates</div>
            <div style={{ fontSize: 11, color: T.muted }}>Senior Backend Engineer · 24 in pool</div>
          </div>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11.5, color: T.searchText, fontWeight: 600, border: `1px solid ${T.searchBorder}`, background: T.searchBg, padding: "6px 12px", borderRadius: 7, minWidth: 150, justifyContent: "flex-start" }}>
              <Icon name="search" size={13} color={T.searchIcon} /> Search candidates
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 700, color: T.liveText, background: T.liveBg, border: `1px solid ${T.liveBorder}`, padding: "6px 11px", borderRadius: 999 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: T.liveText }} /> Live
            </span>
          </div>
        </div>

        {/* 3-column body - sidebar / shortlist / detail */}
        <div style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "168px 1fr 312px" }}>
          {/* left menu */}
          <div style={{ borderRight: `1px solid ${T.line}`, padding: "14px 11px", display: "flex", flexDirection: "column", gap: 3, background: T.railBg }}>
            {menu.map(sideItem)}
            <div style={{ marginTop: "auto" }} />
            {menu2.map(sideItem)}
            <div style={{ height: 1, background: T.line, margin: "11px 6px" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "7px 9px" }}>
              <PhotoAvatar name="Alice Lee" src="product-assets/alice-lee-avatar.png" size={28} />
              <div style={{ lineHeight: 1.2, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Alice Lee</div>
                <div style={{ fontSize: 10, color: T.muted }}>Account Manager</div>
              </div>
            </div>
          </div>

          {/* middle: candidate rows */}
          <div style={{ padding: "12px 18px", minWidth: 0, display: "flex", flexDirection: "column", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 9 }}>
              <span style={{ fontSize: 13.5, fontWeight: 700 }}>Shortlist <span style={{ color: T.muted, fontWeight: 600 }}>· {CANDIDATES.length} candidates</span></span>
              <span style={{ fontSize: 10, fontWeight: 700, color: T.muted, textTransform: "uppercase", letterSpacing: "0.06em" }}>Match · Fit</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
              {CANDIDATES.map((r) =>
              <div key={r.name} style={{ display: "flex", alignItems: "center", gap: 11, padding: "6px 14px", borderRadius: 11,
                border: r.sel ? `1px solid ${T.selBorder}` : `1px solid ${T.cardBorder}`,
                background: r.sel ? "linear-gradient(120deg, rgba(13,104,172,0.26), rgba(0,165,213,0.10))" : T.cardBg,
                boxShadow: r.sel ? "0 6px 20px -8px rgba(13,104,172,0.55)" : "none" }}>
                  <PhotoAvatar name={r.name} src={r.photo} size={36} />
                  {/* identity + company next to title (title fixed-width so companies left-align) */}
                  <div style={{ width: 180, flexShrink: 0, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 3, minWidth: 0 }}>
                      <span style={{ fontSize: 11, color: T.muted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: 78, flexShrink: 0 }}>{r.title}</span>
                      <span style={{ width: 3, height: 3, borderRadius: "50%", background: T.muted, flexShrink: 0 }} />
                      <CompanyChip company={r.company} />
                    </div>
                  </div>
                  {/* enrichment chips */}
                  <div style={{ flex: 1, minWidth: 0, display: "flex", flexWrap: "wrap", gap: 4, justifyContent: "flex-start", alignContent: "center" }}>
                    <MetaChip sm icon="map-pin">{r.location}</MetaChip>
                    <MetaChip sm icon="clock">{r.yoe} YoE</MetaChip>
                    <MetaChip sm icon="graduation-cap">{r.degree} · {r.major}</MetaChip>
                    <MetaChip sm>{r.school}</MetaChip>
                  </div>
                  {/* match score ring */}
                  <ScoreRing value={r.score} size={34} />
                  {/* fit */}
                  <div style={{ width: 78, flexShrink: 0, display: "flex", justifyContent: "flex-start" }}>
                    <FitLabel fit={r.fit} showDot={false} style={{ fontSize: 10, padding: "4px 10px", background: T.fitBg, color: r.fit === "good" ? T.fitGood : T.fitPossible, border: `1px solid ${T.fitBorder}` }} />
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* right: candidate detail */}
          <div style={{ borderLeft: `1px solid ${T.line}`, padding: "14px 16px", background: T.railBg, display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
            {/* header */}
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <PhotoAvatar name="David Carter" src={PHOTO(12)} size={34} />
              <div style={{ lineHeight: 1.2, minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>David Carter</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
                  <span style={{ fontSize: 10.5, color: T.muted }}>Member of Technical Staff</span>
                  <CompanyChip company="Anthropic" />
                </div>
              </div>
            </div>

            {/* location */}
            <div style={{ display: "flex", alignItems: "center", gap: 5, marginTop: -8, fontSize: 11, color: T.bodyText, fontWeight: 600 }}>
              <GIcon name="map-pin" size={13} color={T.searchIcon} /> San Francisco, CA
              <span style={{ fontSize: 10, color: T.muted, fontWeight: 500 }}>· open to onsite</span>
            </div>

            {/* actions: résumé + socials */}
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: -2 }}>
              <span title="Resume" style={{ display: "inline-flex", alignItems: "center", gap: 5, height: 24, padding: "0 9px", fontSize: 10.5, fontWeight: 700, color: T.badgePrimaryText, background: T.badgePrimaryBg, border: `1px solid ${T.fitBorder}`, borderRadius: 6, flexShrink: 0 }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={T.badgePrimaryText} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>' }} />
                Resume
              </span>
              {[
              { kind: "stroke", d: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/>' },
              { kind: "stroke", d: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>' },
              { kind: "fill", d: '<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 17V9.99H6V17h2.34zM7.17 8.96a1.36 1.36 0 1 0 0-2.72 1.36 1.36 0 0 0 0 2.72zM18 17v-3.86c0-2.06-1.1-3.02-2.57-3.02-1.19 0-1.72.65-2.02 1.11V9.99h-2.34V17h2.34v-3.91c0-.21.02-.41.08-.56.16-.41.54-.84 1.17-.84.83 0 1.16.63 1.16 1.55V17H18z"/>' },
              { kind: "fill", d: '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z"/>' },
              { kind: "fill", d: '<path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02.8-.22 1.65-.33 2.5-.33.85 0 1.7.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85 0 1.34-.01 2.42-.01 2.75 0 .27.18.58.69.48A10.01 10.01 0 0 0 22 12c0-5.52-4.48-10-10-10z"/>' }].
              map((c, i) =>
              <span key={i} style={{ width: 24, height: 24, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", background: T.searchBg, border: `1px solid ${T.searchBorder}`, flexShrink: 0 }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill={c.kind === "fill" ? T.searchIcon : "none"} stroke={c.kind === "stroke" ? T.searchIcon : "none"} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: c.d }} />
                </span>
              )}
            </div>

            {/* key match */}
            <div>
              {sectionHead("Key Match", <ScoreRing value={92} size={30} stroke={3} />)}
              <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                {KEY_MATCH.map((t) =>
                <div key={t} style={{ display: "flex", gap: 7, fontSize: 11.5, color: T.bodyText, lineHeight: 1.35, fontWeight: 500 }}>
                    <Icon name="check-circle" size={13} color={T.check} style={{ flexShrink: 0, marginTop: 1 }} /> <span>{t}</span>
                  </div>
                )}
              </div>
            </div>

            {/* package estimation */}
            <div>
              {sectionHead("Package Estimation")}
              <div style={{ background: T.cardBg, border: `1px solid ${T.cardBorder}`, borderRadius: 10, padding: "10px 12px" }}>
                {[
                ["Base salary", "$210k - $245k"],
                ["Equity / yr", "$95k - $120k"]].
                map(([k, v]) =>
                <div key={k} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 11.5, padding: "2px 0" }}>
                    <span style={{ color: T.muted }}>{k}</span>
                    <span style={{ fontWeight: 700, color: T.text }}>{v}</span>
                  </div>
                )}
                <div style={{ height: 1, background: T.line, margin: "7px 0" }} />
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontSize: 11.5, fontWeight: 700, color: T.text }}>Est. total comp</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 13, fontWeight: 800, color: T.fitGood }}>
                    <GIcon name="trending-up" size={13} color={T.fitGood} />$320k
                  </span>
                </div>
              </div>
            </div>

            {/* interest likelihood */}
            <div>
              {sectionHead("Interest Likelihood", <span style={{ fontSize: 11, fontWeight: 800, color: T.fitGood }}>High</span>)}
              <div style={{ height: 7, borderRadius: 999, background: T.barTrack, overflow: "hidden", marginBottom: 7 }}>
                <div style={{ width: "78%", height: "100%", borderRadius: 999, background: `linear-gradient(90deg, ${primary}, ${cyan})` }} />
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
                <MetaChip icon="check-circle">Open to new roles</MetaChip>
              </div>
            </div>

            {/* to be verified */}
            <div>
              {sectionHead("To Be Verified",
              <span style={{ fontSize: 9, fontWeight: 700, color: T.clock, background: T.amberBg, border: `1px solid ${T.amberBorder}`, padding: "2px 7px", borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.04em" }}>In review</span>
              )}
              <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                {TO_VERIFY.map((t) =>
                <div key={t} style={{ display: "flex", gap: 7, fontSize: 11.5, color: T.bodyText, lineHeight: 1.35, fontWeight: 500 }}>
                    <Icon name="clock" size={13} color={T.clock} style={{ flexShrink: 0, marginTop: 1 }} /> <span>{t}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>);

  }
// product-dashboard.jsx - enriched HCP Candidate Dashboard + iMac frame.
  function IMac({ screenW = 1040, accent = true }) {
    const bezel = Math.round(screenW * 0.016) + 8;
    const chin = Math.round(screenW * 0.085);
    const screenH = Math.round(screenW * 9 / 16);
    const bodyW = screenW + bezel * 2;
    const bodyH = screenH + bezel + chin;
    const radius = Math.round(screenW * 0.026);
    const appleW = Math.round(screenW * 0.026);

    const apple =
    <svg width={appleW} height={appleW} viewBox="0 0 24 24" fill="#aeb4bc">
        <path d="M17.05 12.04c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.1-2.01-3.77-2.04-1.6-.16-3.13.94-3.94.94-.81 0-2.07-.92-3.4-.9-1.75.03-3.36 1.02-4.26 2.58-1.82 3.16-.47 7.83 1.3 10.39.86 1.25 1.89 2.66 3.24 2.61 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.39.81 1.4-.02 2.28-1.28 3.13-2.54.98-1.46 1.39-2.87 1.41-2.95-.03-.01-2.71-1.04-2.74-4.13zM14.47 4.42c.72-.87 1.2-2.08 1.07-3.28-1.03.04-2.28.69-3.02 1.55-.66.77-1.24 2-1.08 3.18 1.15.09 2.32-.58 3.03-1.45z" />
      </svg>;


    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center" }}>
        <div style={{ width: bodyW, height: bodyH, borderRadius: radius, padding: `${bezel}px ${bezel}px ${chin}px`,
          background: "linear-gradient(170deg,#fbfcfd 0%, #eceef1 55%, #e2e5e9 100%)",
          border: "1px solid #cdd2d8",
          boxShadow: "0 40px 90px -34px rgba(8,17,35,0.65), 0 12px 28px rgba(8,17,35,0.30), inset 0 1px 0 rgba(255,255,255,0.9)",
          position: "relative", boxSizing: "border-box" }}>
          <div style={{ width: screenW, height: screenH, borderRadius: 8, overflow: "hidden", background: "#000",
            boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 16px rgba(0,0,0,0.4)" }}>
            <DashboardPro />
          </div>
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: chin, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {apple}
          </div>
        </div>
        <div style={{ width: screenW * 0.2, height: screenW * 0.06,
          background: "linear-gradient(180deg,#dfe2e6,#c4c9cf)",
          clipPath: "polygon(28% 0, 72% 0, 88% 100%, 12% 100%)",
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.7)" }} />
        <div style={{ width: screenW * 0.42, height: screenW * 0.022,
          background: "linear-gradient(180deg,#cdd2d8,#b3b9c0)",
          borderRadius: "5px 5px 9px 9px",
          boxShadow: "0 12px 26px -10px rgba(8,17,35,0.5), inset 0 1px 0 rgba(255,255,255,0.7)" }} />
      </div>);

  }

  window.IMac = IMac;
  window.DashboardPro = DashboardPro; window.ProductDashboard = DashboardPro;
})();