// Credential card — the premium glass piece. Verified + rejected variants.

const credStyles = {
  shell: {
    position: "relative",
    width: "100%",
    maxWidth: 460,
    borderRadius: 24,
    overflow: "hidden",
    isolation: "isolate",
    transition: "transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease",
    willChange: "transform",
  },
  // Soft warm-peach + lavender gradient base, frosted
  glassVerified: {
    background: `
      radial-gradient(120% 90% at 0% 0%, rgba(255, 224, 200, 0.85) 0%, rgba(255, 224, 200, 0) 55%),
      radial-gradient(110% 100% at 100% 100%, rgba(216, 200, 234, 0.85) 0%, rgba(216, 200, 234, 0) 55%),
      radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 60%),
      linear-gradient(135deg, rgba(255, 250, 244, 0.8) 0%, rgba(244, 236, 250, 0.8) 100%)
    `,
    backdropFilter: "blur(18px) saturate(140%)",
    WebkitBackdropFilter: "blur(18px) saturate(140%)",
    border: "1px solid rgba(255, 255, 255, 0.7)",
    boxShadow: `
      0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
      0 -1px 0 0 rgba(255, 255, 255, 0.4) inset,
      0 30px 60px -30px rgba(70, 59, 94, 0.35),
      0 12px 28px -16px rgba(70, 59, 94, 0.18)
    `,
  },
  glassRejected: {
    background: `
      radial-gradient(120% 90% at 0% 0%, rgba(220, 224, 230, 0.8) 0%, rgba(220, 224, 230, 0) 55%),
      radial-gradient(110% 100% at 100% 100%, rgba(200, 205, 215, 0.8) 0%, rgba(200, 205, 215, 0) 55%),
      linear-gradient(135deg, rgba(245, 246, 248, 0.85) 0%, rgba(228, 230, 236, 0.85) 100%)
    `,
    backdropFilter: "blur(18px) saturate(110%)",
    WebkitBackdropFilter: "blur(18px) saturate(110%)",
    border: "1px solid rgba(255, 255, 255, 0.55)",
    boxShadow: `
      0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
      0 30px 60px -30px rgba(60, 60, 75, 0.28),
      0 12px 28px -16px rgba(60, 60, 75, 0.14)
    `,
  },
  // Prismatic edge — conic gradient masked to a ring
  prism: {
    position: "absolute",
    inset: 0,
    borderRadius: 24,
    padding: 1,
    background: `conic-gradient(
      from 140deg at 50% 50%,
      rgba(255, 200, 180, 0.9) 0deg,
      rgba(255, 230, 200, 0.6) 60deg,
      rgba(220, 220, 255, 0.9) 130deg,
      rgba(200, 230, 255, 0.5) 200deg,
      rgba(255, 210, 230, 0.85) 270deg,
      rgba(255, 200, 180, 0.9) 360deg
    )`,
    WebkitMask:
      "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
    WebkitMaskComposite: "xor",
    maskComposite: "exclude",
    pointerEvents: "none",
  },
  // Light streak — subtle sheen across the top
  sheen: {
    position: "absolute",
    inset: 0,
    background:
      "linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 62%)",
    pointerEvents: "none",
    mixBlendMode: "screen",
    opacity: 0.7,
  },
  // Inner content
  inner: {
    position: "relative",
    padding: "26px 28px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    color: "#2A2138",
    zIndex: 2,
  },
  topRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  brand: {
    fontFamily: '"Instrument Serif", Georgia, serif',
    fontSize: 22,
    letterSpacing: -0.3,
    color: "#2E2640",
    display: "flex",
    alignItems: "center",
    gap: 8,
  },
  brandDot: {
    width: 8,
    height: 8,
    borderRadius: 2,
    background: "linear-gradient(135deg, #F4C9A8 0%, #C8B6E5 100%)",
    boxShadow: "0 0 0 1px rgba(255,255,255,0.6) inset",
  },
  statusPill: {
    display: "inline-flex",
    alignItems: "center",
    gap: 7,
    padding: "5px 10px 5px 9px",
    borderRadius: 999,
    background: "rgba(255, 255, 255, 0.55)",
    border: "1px solid rgba(255, 255, 255, 0.7)",
    fontSize: 11.5,
    fontWeight: 500,
    letterSpacing: 0.3,
    textTransform: "uppercase",
    color: "#2A6B45",
    backdropFilter: "blur(8px)",
  },
  statusPillRejected: {
    color: "#9B2A30",
    background: "rgba(255, 255, 255, 0.5)",
  },
  pulseDot: {
    position: "relative",
    width: 7,
    height: 7,
    borderRadius: "50%",
    background: "#2E8B57",
  },
  pulseDotRejected: { background: "#C9434B" },
  middle: { display: "flex", flexDirection: "column", gap: 4, marginTop: 8 },
  miniLabel: {
    fontSize: 10.5,
    letterSpacing: 1.6,
    fontWeight: 600,
    color: "rgba(42, 33, 56, 0.55)",
    marginBottom: 6,
  },
  name: {
    fontFamily: '"Instrument Serif", Georgia, serif',
    fontSize: 36,
    letterSpacing: -0.6,
    lineHeight: 1.05,
    fontWeight: 400,
    color: "#1F1A2C",
  },
  org: {
    fontSize: 14,
    color: "rgba(42, 33, 56, 0.7)",
    marginTop: 4,
  },
  divider: {
    height: 1,
    background: "linear-gradient(90deg, transparent, rgba(42,33,56,0.18), transparent)",
    margin: "14px 0",
  },
  metaRow: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr 1fr",
    gap: 14,
  },
  metaCell: { display: "flex", flexDirection: "column", gap: 2 },
  metaLabel: {
    fontSize: 9.5,
    letterSpacing: 1.4,
    fontWeight: 600,
    color: "rgba(42, 33, 56, 0.5)",
    textTransform: "uppercase",
  },
  metaValue: {
    fontSize: 12.5,
    fontWeight: 500,
    color: "#1F1A2C",
  },
  credId: {
    marginTop: 14,
    fontFamily: '"JetBrains Mono", monospace',
    fontSize: 10.5,
    letterSpacing: 0.4,
    color: "rgba(42, 33, 56, 0.55)",
  },
};

function PulseDot({ rejected }) {
  return (
    <span
      style={{
        ...credStyles.pulseDot,
        ...(rejected ? credStyles.pulseDotRejected : {}),
      }}
    >
      {!rejected && (
        <span
          style={{
            position: "absolute",
            inset: -3,
            borderRadius: "50%",
            border: "2px solid rgba(46, 139, 87, 0.5)",
            animation: "lc-pulse 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) infinite",
          }}
        />
      )}
    </span>
  );
}

function CredentialCard({ data, tilt = 0, rainbowIntensity = 1 }) {
  const isRejected = data.kind !== "verified";

  return (
    <div
      style={{
        ...credStyles.shell,
        ...(isRejected ? credStyles.glassRejected : credStyles.glassVerified),
        transform: `perspective(1200px) rotateX(${tilt * 0.3}deg) rotateY(${tilt}deg)`,
      }}
    >
      {/* Prismatic ring */}
      <div
        style={{
          ...credStyles.prism,
          opacity: isRejected ? 0.25 : 0.85 * rainbowIntensity,
        }}
      />
      {/* Sheen */}
      <div style={{ ...credStyles.sheen, opacity: isRejected ? 0.3 : 0.7 }} />

      <div style={credStyles.inner}>
        <div style={credStyles.topRow}>
          <div style={credStyles.brand}>
            <span style={credStyles.brandDot} />
            LayerCred
          </div>
          <div style={{
            ...credStyles.statusPill,
            ...(isRejected ? credStyles.statusPillRejected : {}),
          }}>
            <PulseDot rejected={isRejected} />
            {isRejected ? "Failed" : "Verified"}
          </div>
        </div>

        <div style={credStyles.middle}>
          <div style={credStyles.miniLabel}>{data.label}</div>
          <div style={credStyles.name}>{data.name}</div>
          <div style={credStyles.org}>{data.org}</div>
        </div>

        <div>
          <div style={credStyles.divider} />
          <div style={credStyles.metaRow}>
            <div style={credStyles.metaCell}>
              <span style={credStyles.metaLabel}>Verified</span>
              <span style={credStyles.metaValue}>{data.verified}</span>
            </div>
            <div style={credStyles.metaCell}>
              <span style={credStyles.metaLabel}>Expires</span>
              <span style={credStyles.metaValue}>{data.expires}</span>
            </div>
            <div style={credStyles.metaCell}>
              <span style={credStyles.metaLabel}>Consent</span>
              <span style={{
                ...credStyles.metaValue,
                color: data.consent === "Active" ? "#2E8B57"
                  : data.consent === "Denied" ? "#C9434B"
                  : "rgba(42,33,56,0.55)",
              }}>{data.consent}</span>
            </div>
          </div>
          <div style={credStyles.credId}>{data.credId}</div>
        </div>
      </div>
    </div>
  );
}

window.CredentialCard = CredentialCard;