// CreatorCard.jsx — premium creator presence card.
// Avatar is an abstract gradient orb (no real photos, no clichés).
// Hover reveals "Connect" CTA with rate per minute.

if (typeof document !== 'undefined' && !document.getElementById('creator-card-styles')) {
  const s = document.createElement('style');
  s.id = 'creator-card-styles';
  s.textContent = `
    .cc-card {
      position: relative;
      background: oklch(0.21 0.005 270 / 0.6);
      border: 1px solid oklch(1 0 0 / 0.06);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      cursor: pointer;
      transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
                  border-color 0.25s, background 0.25s;
      overflow: hidden;
    }
    .cc-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%,
        oklch(0.72 0.13 285 / 0.08) 0%,
        transparent 60%);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .cc-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.72 0.13 285 / 0.35);
      background: oklch(0.22 0.008 270 / 0.7);
    }
    .cc-card:hover::before { opacity: 1; }

    .cc-row {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }
    .cc-orb {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08),
                  inset 0 -8px 14px oklch(0 0 0 / 0.25),
                  inset 0 6px 10px oklch(1 0 0 / 0.12);
    }
    .cc-orb-live::after {
      content: '';
      position: absolute;
      bottom: 0px;
      right: 0px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: oklch(0.78 0.16 145);
      box-shadow: 0 0 0 2.5px oklch(0.16 0.005 270),
                  0 0 8px oklch(0.78 0.16 145 / 0.6);
    }
    .cc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .cc-name {
      font-size: 14px;
      font-weight: 500;
      color: oklch(0.96 0.002 270);
      letter-spacing: -0.01em;
    }
    .cc-tag {
      font-size: 11px;
      color: oklch(0.62 0.005 270);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .cc-rate {
      text-align: right;
      font-size: 13px;
      color: oklch(0.96 0.002 270);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    .cc-rate-unit {
      font-size: 11px;
      color: oklch(0.55 0.005 270);
    }

    .cc-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid oklch(1 0 0 / 0.05);
      font-size: 11px;
      color: oklch(0.65 0.005 270);
    }
    .cc-foot-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cc-rating {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-variant-numeric: tabular-nums;
    }
    .cc-connect {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 999px;
      background: oklch(0.72 0.13 285);
      color: oklch(0.12 0.005 270);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: -0.005em;
      transform: translateX(4px);
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
    }
    .cc-card:hover .cc-connect {
      opacity: 1;
      transform: translateX(0);
    }
    .cc-card:hover .cc-foot-default {
      opacity: 0;
    }
    .cc-foot-default {
      transition: opacity 0.2s;
    }
    .cc-foot-right {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 22px;
    }
    .cc-foot-default { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }
    .cc-foot-right .cc-connect { position: absolute; right: 0; top: 50%; transform: translate(4px, -50%); }
    .cc-card:hover .cc-foot-right .cc-connect { transform: translate(0, -50%); }
  `;
  document.head.appendChild(s);
}

function orbStyle(hue) {
  return {
    background: `radial-gradient(circle at 35% 30%,
      oklch(0.78 0.14 ${hue}) 0%,
      oklch(0.55 0.13 ${hue}) 45%,
      oklch(0.32 0.08 ${hue + 20}) 100%)`,
  };
}

function CreatorCard({ creator, onConnect }) {
  const { name, tag, rate, rating, calls, hue, live } = creator;
  return (
    <div className="cc-card" onClick={() => onConnect && onConnect(creator)}>
      <div className="cc-row">
        <div
          className={"cc-orb" + (live ? " cc-orb-live" : "")}
          style={orbStyle(hue)}
        ></div>
        <div className="cc-meta">
          <div className="cc-name">{name}</div>
          <div className="cc-tag">{tag}</div>
        </div>
        <div className="cc-rate">
          ₹{rate}<span className="cc-rate-unit">/min</span>
        </div>
      </div>

      <div className="cc-foot">
        <div className="cc-foot-left">
          {live ? (
            <>
              <Waveform bars={5} color="oklch(0.78 0.16 145)" height={10} />
              <span style={{ color: 'oklch(0.78 0.12 145)' }}>Live now</span>
            </>
          ) : (
            <>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(0.5 0.005 270)', display: 'inline-block' }}></span>
              <span>Away</span>
            </>
          )}
        </div>
        <div className="cc-foot-right">
          <span className="cc-foot-default">
            <span className="cc-rating">★ {rating}</span>
            <span style={{ margin: '0 6px', opacity: 0.4 }}>·</span>
            {calls} calls
          </span>
          <span className="cc-connect">
            Connect <span style={{ fontSize: 13, lineHeight: 1 }}>→</span>
          </span>
        </div>
      </div>
    </div>
  );
}

window.CreatorCard = CreatorCard;