// Platform mock — left side. Listing card with "Verify with LayerCred" CTA.

const platformStyles = {
  wrap: {
    width: "100%",
    maxWidth: 420,
    background: "#FFFFFF",
    border: "1px solid var(--line)",
    borderRadius: 18,
    padding: 22,
    boxShadow: "0 1px 0 rgba(31,26,44,0.02), 0 24px 48px -28px rgba(31,26,44,0.18)"
  },
  header: {
    display: "flex",
    alignItems: "center",
    gap: 12,
    paddingBottom: 18,
    borderBottom: "1px solid var(--line)"
  },
  icon: {
    width: 36,
    height: 36,
    borderRadius: 10,
    display: "grid",
    placeItems: "center",
    fontWeight: 600,
    fontSize: 13,
    letterSpacing: 0.5,
    color: "#3A3147"
  },
  iconLavender: { background: "linear-gradient(135deg, #E5DEF1 0%, #D9CFEC 100%)" },
  iconPeach: { background: "linear-gradient(135deg, #F7E0CC 0%, #F3D1B5 100%)" },
  platformName: {
    fontSize: 16.5,
    fontWeight: 600,
    letterSpacing: -0.1
  },
  listing: {
    marginTop: 18,
    border: "1px solid var(--line)",
    borderRadius: 14,
    padding: 18,
    background: "#FDFBF8"
  },
  listingTitle: {
    fontSize: 17,
    fontWeight: 600,
    letterSpacing: -0.2,
    marginBottom: 4
  },
  listingMeta: {
    fontSize: 13.5,
    color: "var(--ink-soft)",
    marginBottom: 16
  },
  userRow: {
    display: "flex",
    alignItems: "center",
    gap: 12,
    paddingTop: 14,
    borderTop: "1px solid var(--line)"
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: "50%",
    display: "grid",
    placeItems: "center",
    fontWeight: 600,
    fontSize: 13,
    letterSpacing: 0.4,
    color: "#3A3147",
    background: "linear-gradient(135deg, #E8DFEF 0%, #D7CCE6 100%)",
    flexShrink: 0
  },
  userMeta: { display: "flex", flexDirection: "column", gap: 2 },
  userName: { fontSize: 14.5, fontWeight: 500 },
  badge: {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    fontSize: 12.5,
    fontWeight: 500
  },
  badgeOk: { color: "var(--success)" },
  badgeErr: { color: "var(--error)" },
  badgeWarn: { color: "#A06A1F" },
  cta: {
    marginTop: 16,
    width: "100%",
    height: 48,
    border: "none",
    borderRadius: 12,
    background: "var(--aubergine)",
    color: "#F5F1E8",
    fontFamily: "inherit",
    fontSize: 14.5,
    fontWeight: 500,
    letterSpacing: -0.1,
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
    cursor: "pointer",
    transition: "transform 120ms ease, background 160ms ease"
  },
  caption: {
    marginTop: 14,
    textAlign: "center",
    fontSize: 12.5,
    color: "var(--ink-mute)",
    letterSpacing: 0.1
  }
};

function CheckIcon({ size = 13, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3.5 8.5L6.5 11.5L12.5 5" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function XIcon({ size = 12, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M4 4L12 12M12 4L4 12" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" />
    </svg>);

}

function WarnIcon({ size = 12, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M8 3L14 13H2L8 3Z" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M8 7V9.5" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="8" cy="11.5" r="0.7" fill={stroke} />
    </svg>);

}

function ShieldIcon({ size = 16, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M9 2L15 4V9C15 12.5 12.5 15 9 16C5.5 15 3 12.5 3 9V4L9 2Z" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M6.5 9L8.2 10.6L11.6 7.4" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function PlatformMock({ data, onVerify, busy }) {
  const iconStyle = data.icon === "RR" || data.iconBg === "peach" ?
  platformStyles.iconPeach :
  platformStyles.iconLavender;

  const badgeStyle =
  data.user.badgeKind === "ok" ? platformStyles.badgeOk :
  data.user.badgeKind === "err" ? platformStyles.badgeErr :
  platformStyles.badgeWarn;

  const BadgeGlyph =
  data.user.badgeKind === "ok" ? CheckIcon :
  data.user.badgeKind === "err" ? XIcon :
  WarnIcon;

  return (
    <div style={{ ...platformStyles.wrap, background: "rgb(255, 255, 255)" }}>
      <div style={platformStyles.header}>
        <div style={{ ...platformStyles.icon, ...iconStyle }}>{data.icon}</div>
        <div style={platformStyles.platformName}>{data.name}</div>
      </div>

      <div style={platformStyles.listing}>
        <div style={platformStyles.listingTitle}>{data.listing.title}</div>
        <div style={platformStyles.listingMeta}>{data.listing.meta}</div>

        <div style={platformStyles.userRow}>
          <div style={platformStyles.avatar}>{data.user.initials}</div>
          <div style={platformStyles.userMeta}>
            <div style={platformStyles.userName}>{data.user.name}</div>
            <span style={{ ...platformStyles.badge, ...badgeStyle }}>
              <BadgeGlyph />
              {data.user.badge}
            </span>
          </div>
        </div>
      </div>

      <button
        style={{
          ...platformStyles.cta,
          background: busy ? "var(--aubergine-deep)" : "var(--aubergine)"
        }}
        onMouseDown={(e) => e.currentTarget.style.transform = "scale(0.985)"}
        onMouseUp={(e) => e.currentTarget.style.transform = "scale(1)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
        onClick={onVerify}>
        
        <ShieldIcon size={16} stroke="#F5F1E8" />
        {busy ? "Verifying…" : "Verify with LayerCred"}
      </button>

      <div style={platformStyles.caption}>Takes 2 seconds · No personal data shared</div>
    </div>);

}

window.PlatformMock = PlatformMock;
window.CheckIcon = CheckIcon;
window.XIcon = XIcon;