// scheduling-graphic.jsx — v2
// Animated scheduling flow — differentiated composition, blue accent.
// Original layout: overlapping floating panels, mini month calendar (not a dot grid),
// horizontal time strip (not a column), diagonal connector ribbon (not a dashed arc).

const INK       = '#0f1a2e';
const INK_SOFT  = '#5b6a82';
const INK_MUTE  = '#8a96ab';
const MUTED     = '#e7ebf2';
const MUTED_2   = '#f3f5f9';
const BORDER    = '#dfe4ec';
const BG        = '#ffffff';

// Blue accent scale (oklch — same chroma, hue 245)
const BLUE       = 'oklch(60% 0.16 245)';
const BLUE_DEEP  = 'oklch(44% 0.16 245)';
const BLUE_SOFT  = 'oklch(95% 0.035 245)';
const BLUE_MID   = 'oklch(88% 0.07 245)';
const BLUE_INK   = 'oklch(38% 0.14 245)';

// ─── Root scene ─────────────────────────────────────────────────────────────

function SchedulingScene() {
  const t = useTime();

  // Timeline (total 7s, loops)
  // 0.0 – 0.6   mini calendar fades up
  // 0.6 – 1.2   days cascade in grid
  // 1.2 – 1.8   "23" day highlights + time strip fades in
  // 1.8 – 2.4   10:30 slot activates
  // 2.4 – 3.0   sparkle/arrow cue draws from calendar toward confirm card
  // 3.0 – 3.3   check badge pops
  // 3.3 – 4.0   confirmation card flies in + content cascade
  // 4.0 – 6.5   hold
  // 6.5 – 7.0   fade (loop)

  const calFade     = clamp((t - 0.0) / 0.6, 0, 1);
  const daysCasc    = clamp((t - 0.6) / 0.6, 0, 1);
  const highlightProg = clamp((t - 1.2) / 0.6, 0, 1);
  const stripFade   = clamp((t - 1.2) / 0.6, 0, 1);
  const slotPulse   = clamp((t - 1.8) / 0.6, 0, 1);
  const ribbonDraw  = clamp((t - 2.4) / 0.6, 0, 1);
  const checkPop    = clamp((t - 3.0) / 0.3, 0, 1);
  const confirmIn   = clamp((t - 3.3) / 0.5, 0, 1);
  const confirmCasc = clamp((t - 3.6) / 0.5, 0, 1);

  const globalOpacity = 1;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
      color: INK,
      opacity: globalOpacity,
    }}>
      {/* Mini month calendar — LEFT side */}
      <MiniCalendar
        fade={calFade}
        daysCasc={daysCasc}
        highlightProg={highlightProg}
        t={t}
      />

      {/* Horizontal time strip BELOW the calendar */}
      <TimeStrip fade={stripFade} pulse={slotPulse} />

      {/* Confirmation card — RIGHT side */}
      <ConfirmCard slideIn={confirmIn} cascade={confirmCasc} />
    </div>
  );
}

// ─── Backdrop ───────────────────────────────────────────────────────────────

function BackdropGlow() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `
        radial-gradient(ellipse 600px 400px at 70% 25%, color-mix(in oklch, transparent 86%, ${BLUE}) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 500px 350px at 25% 75%, rgba(15,26,46,0.025) 0%, rgba(0,0,0,0) 100%)
      `,
      pointerEvents: 'none',
    }}/>
  );
}

// ─── Mini month calendar (upper right) ──────────────────────────────────────

function MiniCalendar({ fade, daysCasc, highlightProg, t }) {
  // August 2026 — target date Aug 23 (Sun)
  // Aug 1 2026 is a Saturday, so startDow (Sun=0) = 6
  const startDow = 6;
  const days = 31;
  const target = 23;

  const grid = [];
  for (let i = 0; i < 42; i++) {
    const d = i - startDow + 1;
    grid.push(d >= 1 && d <= days ? d : null);
  }

  return (
    <div style={{
      position: 'absolute',
      left: 80,
      top: 100,
      width: 400,
      background: BG,
      borderRadius: 16,
      boxShadow: '0 20px 40px -14px rgba(15,26,46,0.15), 0 0 0 1px rgba(15,26,46,0.05)',
      opacity: fade,
      transform: `translateY(${(1 - fade) * 18}px)`,
      padding: '22px 22px 20px',
      overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 16,
      }}>
        <div style={{
          fontSize: 15, fontWeight: 600, color: INK,
          letterSpacing: '-0.01em',
        }}>
          August 2026
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <NavChip direction="left" />
          <NavChip direction="right" />
        </div>
      </div>

      {/* Day-of-week row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(7, 1fr)',
        marginBottom: 6,
      }}>
        {['S','M','T','W','T','F','S'].map((d, i) => (
          <div key={i} style={{
            textAlign: 'center',
            fontSize: 11,
            fontWeight: 500,
            color: INK_MUTE,
            letterSpacing: '0.08em',
            padding: '6px 0',
          }}>{d}</div>
        ))}
      </div>

      {/* Days grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(7, 1fr)',
        gap: 4,
      }}>
        {grid.map((n, i) => {
          const rowIdx = Math.floor(i / 7);
          const delay = rowIdx * 0.08;
          const cellProg = clamp((daysCasc - delay) / 0.6, 0, 1);
          const e = Easing.easeOutCubic(cellProg);

          const isTarget = n === target;
          // Highlight animation on target
          const hl = isTarget ? Easing.easeOutBack(highlightProg) : 0;

          let bg = 'transparent';
          let color = n == null ? 'transparent' : INK;
          let bd = '1px solid transparent';
          let scale = 1;

          if (isTarget && hl > 0) {
            bg = `color-mix(in oklch, transparent ${(1-hl)*100}%, ${BLUE} ${hl*100}%)`;
            color = `color-mix(in oklch, ${INK} ${(1-hl)*100}%, #fff ${hl*100}%)`;
            scale = 0.9 + 0.1 * hl;
          }

          return (
            <div key={i} style={{
              aspectRatio: '1 / 1',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 13,
              fontWeight: isTarget ? 600 : 500,
              color,
              background: bg,
              border: bd,
              borderRadius: 8,
              opacity: n == null ? 0 : e,
              transform: `translateY(${(1-e) * 4}px) scale(${scale})`,
              fontVariantNumeric: 'tabular-nums',
              transition: 'none',
            }}>
              {n}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function NavChip({ direction }) {
  return (
    <div style={{
      width: 26, height: 26,
      borderRadius: 6,
      background: MUTED_2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: INK_SOFT,
    }}>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
        {direction === 'left'
          ? <path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          : <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        }
      </svg>
    </div>
  );
}

// ─── Horizontal time strip (under calendar) ────────────────────────────────

function TimeStrip({ fade, pulse }) {
  const slots = ['9:30', '10:00', '10:30', '11:00', '11:30'];
  const target = '10:30';

  return (
    <div style={{
      position: 'absolute',
      left: 80,
      top: 540,
      width: 400,
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      opacity: fade,
      transform: `translateY(${(1 - fade) * 10}px)`,
      padding: '4px 8px',
    }}>
      {/* Label */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '0 2px',
      }}>
        <div style={{
          fontSize: 12,
          fontWeight: 600,
          color: INK_MUTE,
          letterSpacing: '0.1em',
        }}>FRIDAY, AUG 23</div>
        <div style={{
          fontSize: 11,
          color: INK_MUTE,
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        }}>EST</div>
      </div>

      {/* Horizontal scrolling strip of pills */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 10,
        padding: '4px 0',
      }}>
        {slots.map((s, i) => {
          const rowProg = clamp((fade - i * 0.06) / 0.6, 0, 1);
          const isTarget = s === target;

          let bg = MUTED_2;
          let color = INK_SOFT;
          let scale = 1;
          let shadow = 'none';
          let border = `1px solid transparent`;

          if (isTarget && pulse > 0) {
            const p = Easing.easeOutCubic(pulse);
            bg = `color-mix(in oklch, ${MUTED_2} ${(1-p)*100}%, ${BLUE} ${p*100}%)`;
            color = `color-mix(in oklch, ${INK_SOFT} ${(1-p)*100}%, #ffffff ${p*100}%)`;
            if (pulse > 0 && pulse < 1) {
              const s2 = Math.sin(pulse * Math.PI);
              scale = 1 + s2 * 0.04;
              shadow = `0 ${4 + s2 * 10}px ${14 + s2 * 16}px -4px color-mix(in oklch, transparent, ${BLUE} ${s2 * 45}%)`;
            } else if (pulse >= 1) {
              shadow = `0 6px 14px -4px color-mix(in oklch, transparent, ${BLUE} 30%)`;
            }
          }

          return (
            <div key={i} style={{
              height: 44,
              background: bg,
              border,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13,
              fontWeight: isTarget ? 600 : 500,
              color,
              opacity: rowProg,
              transform: `translateY(${(1 - rowProg) * 8}px) scale(${scale})`,
              boxShadow: shadow,
              fontVariantNumeric: 'tabular-nums',
            }}>
              {s}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Request panel (lower left) ─────────────────────────────────────────────

function RequestPanel({ intro, cascade, press }) {
  const e = Easing.easeOutCubic(intro);
  const tx = (1 - e) * -22;
  const ty = (1 - e) * 14;

  const rowProgs = [0, 1, 2, 3].map(i => clamp((cascade - i * 0.1) / 0.5, 0, 1));
  const pressScale = press > 0 && press < 1
    ? 1 - 0.045 * Math.sin(press * Math.PI)
    : 1;

  return (
    <div style={{
      position: 'absolute',
      left: 80,
      top: 340,
      width: 340,
      background: BG,
      borderRadius: 16,
      boxShadow: '0 24px 48px -16px rgba(15,26,46,0.18), 0 0 0 1px rgba(15,26,46,0.05)',
      opacity: e,
      transform: `translate(${tx}px, ${ty}px)`,
      overflow: 'hidden',
    }}>
      {/* Top strip — small colored identity bar (not a big green banner) */}
      <div style={{
        height: 4,
        background: BLUE,
      }}/>

      <div style={{ padding: '22px 24px 22px' }}>
        {/* Header — label + dot */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          marginBottom: 18,
          opacity: rowProgs[0],
        }}>
          <div style={{
            width: 8, height: 8, borderRadius: '50%',
            background: BLUE,
            boxShadow: `0 0 0 3px color-mix(in oklch, transparent, ${BLUE} 20%)`,
          }}/>
          <div style={{
            fontSize: 12,
            fontWeight: 600,
            color: INK_SOFT,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
          }}>New Request</div>
        </div>

        {/* Title line */}
        <div style={{
          fontSize: 18,
          fontWeight: 600,
          color: INK,
          letterSpacing: '-0.015em',
          marginBottom: 18,
          opacity: rowProgs[0],
          transform: `translateY(${(1 - rowProgs[0]) * 6}px)`,
        }}>
          Book a Demo
        </div>

        {/* Fields */}
        <FormField progress={rowProgs[1]} label="Name" style={{ marginBottom: 10 }} />
        <FormField progress={rowProgs[1]} label="Email" style={{ marginBottom: 18 }} />

        {/* Bar lines (short desc) */}
        <div style={{
          opacity: rowProgs[2],
          transform: `translateY(${(1 - rowProgs[2]) * 6}px)`,
          marginBottom: 22,
        }}>
          <div style={{ height: 7, width: '88%', background: MUTED, borderRadius: 4, marginBottom: 7 }}/>
          <div style={{ height: 7, width: '56%', background: MUTED, borderRadius: 4 }}/>
        </div>

        {/* Button row: primary + ghost */}
        <div style={{
          display: 'flex', gap: 10,
          opacity: rowProgs[3],
          transform: `translateY(${(1 - rowProgs[3]) * 6}px)`,
        }}>
          <div
            data-request-btn
            style={{
              flex: 1,
              height: 46,
              background: BLUE,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff',
              fontWeight: 500,
              fontSize: 15,
              letterSpacing: '-0.005em',
              transform: `scale(${pressScale})`,
              transformOrigin: 'center',
              boxShadow: press > 0 && press < 1
                ? 'inset 0 2px 6px rgba(0,0,0,0.2)'
                : `0 6px 14px -4px color-mix(in oklch, transparent, ${BLUE} 40%)`,
              transition: 'box-shadow 120ms',
            }}>
            Send Request
          </div>
          <div style={{
            width: 46, height: 46,
            border: `1px solid ${BORDER}`,
            borderRadius: 10,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: INK_SOFT,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function FormField({ progress = 1, label, style }) {
  return (
    <div style={{
      height: 42,
      background: MUTED_2,
      borderRadius: 8,
      display: 'flex',
      alignItems: 'center',
      padding: '0 14px',
      gap: 10,
      opacity: progress,
      transform: `translateY(${(1 - progress) * 6}px)`,
      ...style,
    }}>
      <div style={{
        fontSize: 11,
        fontWeight: 500,
        color: INK_MUTE,
        letterSpacing: '0.06em',
        textTransform: 'uppercase',
        width: 44,
      }}>{label}</div>
      <div style={{
        height: 6,
        flex: 1,
        background: MUTED,
        borderRadius: 3,
        maxWidth: `${40 + progress * 40}%`,
      }}/>
    </div>
  );
}

// ─── Cursor ─────────────────────────────────────────────────────────────────

function Cursor({ cursorProg, press, t }) {
  // Start off to the right & below, end at the Send Request button
  const startX = 520, startY = 620;
  const endX   = 230, endY   = 560;

  const e = Easing.easeInOutCubic(cursorProg);
  const x = startX + (endX - startX) * e;
  const y = startY + (endY - startY) * e;

  const hide = clamp((t - 2.5) / 0.3, 0, 1);
  const opacity = cursorProg * (1 - hide);

  const pressScale = press > 0 && press < 1
    ? 1 - 0.12 * Math.sin(press * Math.PI)
    : 1;

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: 26, height: 26,
      opacity,
      transform: `scale(${pressScale})`,
      transformOrigin: 'top left',
      pointerEvents: 'none',
      filter: 'drop-shadow(0 2px 4px rgba(15,26,46,0.25))',
      zIndex: 100,
    }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
        <path d="M4 3l6 16 2.5-6.5L19 10 4 3z" fill="#fff" stroke={INK} strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// ─── Ribbon connector (diagonal flowing line, NOT dashed) ──────────────────

function RibbonConnector({ drawProg, checkProg }) {
  // Curve from right edge of calendar/strip (~490, ~420) over to the
  // confirmation card left edge (~540, ~360)
  const path = 'M 490 420 C 520 400, 515 370, 540 360';

  const L = 180;

  return (
    <svg
      style={{
        position: 'absolute',
        left: 0, top: 0,
        width: '100%', height: '100%',
        pointerEvents: 'none',
        overflow: 'visible',
        zIndex: 5,
      }}
    >
      <defs>
        <linearGradient id="ribbon-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={BLUE_MID} stopOpacity="0.4"/>
          <stop offset="100%" stopColor={BLUE} stopOpacity="1"/>
        </linearGradient>
      </defs>

      {/* Soft glow under */}
      <path
        d={path}
        fill="none"
        stroke={BLUE}
        strokeWidth="10"
        strokeLinecap="round"
        opacity={drawProg * 0.18}
        pathLength="1"
        strokeDasharray="1 1"
        strokeDashoffset={1 - drawProg}
        style={{ filter: 'blur(4px)' }}
      />

      {/* Main line — solid, gradient */}
      <path
        d={path}
        fill="none"
        stroke="url(#ribbon-grad)"
        strokeWidth="3"
        strokeLinecap="round"
        pathLength="1"
        strokeDasharray="1 1"
        strokeDashoffset={1 - drawProg}
      />

      {/* Small dots along the line — evenly spaced markers */}
      {[0.25, 0.5, 0.75].map((frac, i) => {
        const vis = drawProg > frac ? 1 : 0;
        const cx = 490 + (540 - 490) * frac;
        const cy = 420 + (360 - 420) * frac;
        return (
          <circle
            key={i}
            cx={cx}
            cy={cy}
            r={3}
            fill={BLUE}
            opacity={vis}
          />
        );
      })}

      {/* Arrowhead at end */}
      {drawProg > 0.9 && (() => {
        const headOp = clamp((drawProg - 0.9) / 0.1, 0, 1);
        return (
          <g transform="translate(540, 360) rotate(-50)" opacity={headOp}>
            <path
              d="M -10 -6 L 2 0 L -10 6"
              fill="none"
              stroke={BLUE}
              strokeWidth="3"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </g>
        );
      })()}

      {/* Check badge — mid-ribbon */}
      {checkProg > 0 && (() => {
        const e = Easing.easeOutBack(checkProg);
        const r = 22 * e;
        const cx = 515, cy = 390;
        return (
          <g transform={`translate(${cx}, ${cy})`} opacity={clamp(checkProg * 2, 0, 1)}>
            <circle r={r + 4} fill={BLUE} opacity={0.18}/>
            <circle r={r} fill={BLUE} />
            {checkProg > 0.4 && (
              <path
                d="M -7 0 L -2 5 L 8 -5"
                fill="none"
                stroke="#fff"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeDasharray={22}
                strokeDashoffset={22 * (1 - clamp((checkProg - 0.4) / 0.6, 0, 1))}
              />
            )}
          </g>
        );
      })()}
    </svg>
  );
}

// ─── Confirmation card (right middle, overlapping calendar) ────────────────

function ConfirmCard({ slideIn, cascade }) {
  const e = Easing.easeOutCubic(slideIn);
  const tx = (1 - e) * 24;
  const ty = (1 - e) * -16;

  const rowProgs = [0, 1, 2].map(i => clamp((cascade - i * 0.12) / 0.45, 0, 1));

  return (
    <div style={{
      position: 'absolute',
      left: 540,
      top: 240,
      width: 400,
      background: BG,
      borderRadius: 16,
      boxShadow: '0 28px 56px -12px rgba(15,26,46,0.22), 0 0 0 1px rgba(15,26,46,0.05)',
      opacity: e,
      transform: `translate(${tx}px, ${ty}px)`,
      overflow: 'hidden',
      zIndex: 10,
    }}>
      {/* Top accent bar + label row */}
      <div style={{
        padding: '18px 22px 14px',
        borderBottom: `1px solid ${MUTED}`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: BLUE_SOFT,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: BLUE_INK,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <div style={{
              fontSize: 10,
              fontWeight: 600,
              color: INK_MUTE,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
            }}>Confirmed</div>
            <div style={{
              fontSize: 15,
              fontWeight: 600,
              color: INK,
              letterSpacing: '-0.01em',
              marginTop: 2,
            }}>Demo Booked</div>
          </div>
        </div>
        <div style={{
          fontSize: 11,
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
          color: INK_MUTE,
          padding: '4px 8px',
          background: MUTED_2,
          borderRadius: 6,
        }}>#A23-0830</div>
      </div>

      {/* Body */}
      <div style={{
        padding: '20px 22px 22px',
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
      }}>
        {/* Attendee row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          opacity: rowProgs[0],
          transform: `translateY(${(1 - rowProgs[0]) * 6}px)`,
        }}>
          <PlaceholderAvatar size={44} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ height: 7, width: '70%', background: MUTED, borderRadius: 3.5 }}/>
            <div style={{ height: 7, width: '45%', background: MUTED, borderRadius: 3.5 }}/>
          </div>
        </div>

        {/* Detail chips row */}
        <div style={{
          display: 'flex', gap: 8, flexWrap: 'wrap',
          opacity: rowProgs[1],
          transform: `translateY(${(1 - rowProgs[1]) * 6}px)`,
        }}>
          <Chip icon="cal">Fri, Aug 23</Chip>
          <Chip icon="clock">10:30 AM</Chip>
          <Chip icon="vid" accent>30 min · Video</Chip>
        </div>

        {/* CTA row */}
        <div style={{
          display: 'flex', gap: 8,
          opacity: rowProgs[2],
          transform: `translateY(${(1 - rowProgs[2]) * 6}px)`,
          marginTop: 4,
        }}>
          <div style={{
            flex: 1,
            height: 38,
            background: INK,
            color: '#fff',
            borderRadius: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, fontWeight: 500,
          }}>Add to Calendar</div>
          <div style={{
            width: 38, height: 38,
            border: `1px solid ${BORDER}`,
            borderRadius: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: INK_SOFT,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7M16 6l-4-4-4 4M12 2v14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function Chip({ children, icon, accent }) {
  const iconPath = {
    cal: <path d="M3 9h18M8 3v4M16 3v4M5 5h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>,
    clock: <><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></>,
    vid: <path d="M15 10l5-3v10l-5-3v-4zM3 7h12v10H3z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>,
  };

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '6px 10px',
      background: accent ? BLUE_SOFT : MUTED_2,
      border: accent ? `1px solid color-mix(in oklch, transparent, ${BLUE} 30%)` : `1px solid transparent`,
      borderRadius: 20,
      fontSize: 12,
      fontWeight: 500,
      color: accent ? BLUE_INK : INK,
      letterSpacing: '-0.005em',
    }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
        {iconPath[icon]}
      </svg>
      {children}
    </div>
  );
}

function PlaceholderAvatar({ size = 56 }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: `linear-gradient(135deg, ${BLUE_SOFT} 0%, ${BLUE_MID} 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.36,
      fontWeight: 600,
      color: BLUE_INK,
      letterSpacing: '-0.02em',
      flexShrink: 0,
      boxShadow: `inset 0 0 0 1.5px color-mix(in oklch, transparent, ${BLUE} 15%)`,
    }}>
      SM
    </div>
  );
}

Object.assign(window, { SchedulingScene });