/* global React */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC, useCallback: useCallbackC } = React;

/* ============================================================
   COMPONENT ATOMS
   ============================================================ */

/* ------------------------------------------------------------
   Tool definitions — abstract monogram chips, no real logos.
   Each tool has a unique 2-letter mark + accent color.
   ------------------------------------------------------------ */
const TOOLS = {
  "claude-code":   { name: "Claude Code",   mark: "CC", tint: "#F5F1EC", icon: "assets/logos/claude-code.png", purpose: "Editing + transcripts" },
  "codex":         { name: "Codex CLI",     mark: "CX", tint: "#F2F2F2", icon: "assets/logos/codex.png",       purpose: "Long-running runs" },
  "cursor":        { name: "Cursor",        mark: "CU", tint: "#F2F2F2", icon: "assets/logos/cursor.png",      purpose: "IDE + agent wrapper" },
  "gemini":        { name: "Gemini",        mark: "GM", tint: "#F1F4FA", icon: "assets/logos/gemini.png",      purpose: "Quota-heavy workflows" },
  "trae":          { name: "Trae",          mark: "TR", tint: "#0A0A0A", nameColor: "#B785F5", icon: "assets/logos/trae.png",        purpose: "Multi-step planning" },
  "copilot-cli":   { name: "Copilot CLI",   mark: "CP", tint: "#F2F2F2", icon: "assets/logos/copilot-cli.png", purpose: "Terminal completions" },
  "factory":       { name: "Factory Droid", mark: "FD", tint: "#1F1F1F", nameColor: "#E5E5E5", icon: "assets/logos/factory.png",     purpose: "Async fleet runs" },
  "opencode":      { name: "OpenCode",      mark: "OC", tint: "#000000", nameColor: "#E5E5E5", icon: "assets/logos/opencode.png",    purpose: "Self-hosted agents" },
};

const TOOL_KEYS = Object.keys(TOOLS);

/* ============================================================
   1. NotchCapsule — collapsed / hover / expanded
   ============================================================ */

function NotchCapsule({ state: stateProp, onStateChange, shape = "pill", showMenuBar = true, autoplay = false }) {
  const [internalState, setInternalState] = useStateC(stateProp || "collapsed");
  const state = stateProp ?? internalState;
  const setState = (s) => {
    if (stateProp === undefined) setInternalState(s);
    onStateChange?.(s);
  };

  // Autoplay demo cycle
  useEffectC(() => {
    if (!autoplay) return;
    const seq = ["collapsed", "hover", "expanded", "expanded", "hover", "collapsed", "collapsed"];
    let i = 0;
    const t = setInterval(() => {
      i = (i + 1) % seq.length;
      setState(seq[i]);
    }, 1500);
    return () => clearInterval(t);
  }, [autoplay]);

  const radius = shape === "notch" ? 18 : shape === "rect" ? 12 : 999;

  return (
    <div
      className="notch-capsule-wrap"
      onMouseEnter={() => state === "collapsed" && setState("hover")}
      onMouseLeave={() => state === "hover" && setState("collapsed")}
      onClick={() => {
        if (state === "expanded") setState("collapsed");
        else if (state === "hover") setState("expanded");
        else setState("hover");
      }}
      style={{ cursor: 'pointer' }}
    >
      {showMenuBar && <MenuBarShell />}
      <div className={`notch-stage notch-${state}`} data-shape={shape}>
        <div
          className="notch-pill"
          style={{ borderRadius: radius }}
        >
          {state === "collapsed" && <CapsuleCollapsed />}
          {state === "hover" && <CapsuleHover />}
          {state === "expanded" && <CapsuleExpanded />}
        </div>
      </div>
    </div>
  );
}

function MenuBarShell() {
  return (
    <div className="menubar">
      <div className="menubar-left">
        <span className="apple-glyph" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="7" cy="7" r="3" fill="currentColor"/>
          </svg>
        </span>
        <span className="menubar-item">Finder</span>
        <span className="menubar-item">File</span>
        <span className="menubar-item">Edit</span>
        <span className="menubar-item">View</span>
        <span className="menubar-item">Window</span>
        <span className="menubar-item">Help</span>
      </div>
      <div className="menubar-right mono">
        <span>{Math.random() > 1 ? '' : ''}⌘</span>
        <span>100%</span>
        <span>Tue 14:32</span>
      </div>
    </div>
  );
}

function CapsuleCollapsed() {
  return (
    <div className="cap-collapsed">
      <PetSprite pet="capy" state="idle" size={20} framed={false} />
      <span className="cap-status mono">idle</span>
      <span className="dot mint" />
    </div>
  );
}

function CapsuleHover() {
  return (
    <div className="cap-hover">
      <PetSprite pet="capy" state="running" size={24} framed={false} />
      <div className="cap-hover-text">
        <div className="cap-hover-title">Claude Code · waiting for approval</div>
        <div className="cap-hover-sub mono">Edit src/db.ts · 3 lines</div>
      </div>
      <span className="dot coral" />
    </div>
  );
}

function CapsuleExpanded() {
  return (
    <div className="cap-expanded">
      <div className="cap-exp-header">
        <div className="row items-center gap-3">
          <PetSprite pet="capy" state="running" size={28} framed={false} />
          <div className="col">
            <div className="row items-center gap-2">
              <span className="dot coral" />
              <span className="cap-tool" style={{ color: 'var(--accent-coral)' }}>Claude Code</span>
              <span className="muted mono" style={{ fontSize: 11 }}>· 5h 14% · 7d 1%</span>
            </div>
          </div>
        </div>
        <div className="row items-center gap-2">
          <div className="bar" style={{ width: 56, color: 'var(--accent-amber)' }}>
            <i style={{ width: '14%' }} />
          </div>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-secondary)' }}>14%</span>
          <button className="icon-btn" aria-label="Settings">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="7" cy="7" r="2.2"/>
              <path d="M7 1v2M7 11v2M1 7h2M11 7h2M2.5 2.5l1.4 1.4M10.1 10.1l1.4 1.4M2.5 11.5l1.4-1.4M10.1 3.9l1.4-1.4"/>
            </svg>
          </button>
        </div>
      </div>

      <div className="cap-tabs">
        <div className="cap-tab active">
          <span className="tool-mark" style={{ background: '#F5F1EC' }}><img src="assets/logos/claude-code.png" alt="" /></span>
          <span>Claude</span>
        </div>
        <div className="cap-tab">
          <span className="tool-mark" style={{ background: '#F2F2F2' }}><img src="assets/logos/codex.png" alt="" /></span>
          <span>Codex</span>
        </div>
      </div>

      <div className="cap-quota">
        <QuotaRow label="Context window" value="171.3k / 200k" pct={86} color="amber" tail="86% used" />
        <QuotaRow label="5-hour limit"  value="14% used"      pct={14} color="blue"  tail="3:00 PM" />
        <QuotaRow label="7-day limit"   value="1% used"       pct={2}  color="mint"  tail="May 19" />
      </div>

      <div className="cap-divider"></div>

      <div className="cap-msg-header">
        <span className="mono muted" style={{ fontSize: 12 }}>messages · 12 unread</span>
        <div className="row gap-2">
          <button className="msg-icon-btn" aria-label="Mark all read">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M2 6l3 3 5-6"/>
            </svg>
          </button>
          <button className="msg-icon-btn danger" aria-label="Clear">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M3 4h6M5 4v-1h2v1M4 4l.5 6h3L8 4M5 6v3M7 6v3"/>
            </svg>
          </button>
        </div>
      </div>

      <div className="cap-msgs">
        <MessageRow tool="codex" tag="cmux" time="27s ago" status="error" title="Edit failed on session timeout"
          body="Reconnect and resume from checkpoint? Last 3 messages preserved." />
        <MessageRow tool="codex" tag="cmux" time="3m ago" status="done" title="Schema migration · 4 files"
          body="Migration applied. No unstaged changes left in worktree." />
        <MessageRow tool="claude-code" tag="cmux" time="4m ago" status="done" title="Claude Code completed"
          body="Wrote tests for 6 routes. 17 passed, 0 failed, 2 skipped." />
      </div>

      <div className="cap-foot">
        <span className="mono muted" style={{ fontSize: 11 }}>VibePet · agent pulse</span>
        <button className="msg-icon-btn" aria-label="Power">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
            <path d="M6 1v5M3 3a4 4 0 1 0 6 0"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

function QuotaRow({ label, value, pct, color, tail }) {
  return (
    <div className="quota-row">
      <div className="quota-label">{label}</div>
      <div className="quota-bar">
        <div className="bar" style={{ color: `var(--accent-${color})` }}>
          <i style={{ width: `${pct}%` }} />
        </div>
      </div>
      <div className="quota-value mono" style={{ color: `var(--accent-${color})` }}>{value}</div>
      <div className="quota-tail mono muted">{tail}</div>
    </div>
  );
}

function MessageRow({ tool, tag, time, status, title, body }) {
  const t = TOOLS[tool] || TOOLS["claude-code"];
  const statusColor = status === "error" ? "coral" : status === "done" ? "mint" : "amber";
  return (
    <div className="cap-msg-row">
      <div className="cap-msg-left">
        <div className="row items-center gap-2">
          <span className="cap-msg-tool" style={{ color: t.tint }}>{t.name}</span>
          <span className="cap-msg-tag mono">{tag}</span>
        </div>
        <div className="cap-msg-title">{title}</div>
        <div className="cap-msg-body">{body}</div>
      </div>
      <div className="cap-msg-right">
        <span className="mono muted" style={{ fontSize: 10 }}>{time}</span>
        <div className="row gap-2" style={{ marginTop: 'auto' }}>
          <button className="msg-mini" data-color={statusColor}>
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M2 5l2 2 4-5"/>
            </svg>
            Mark Read
          </button>
          <button className="msg-mini primary">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M2 8l6-6M3 2h5v5"/>
            </svg>
            Jump
          </button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   2. ToolBadge — abstract monogram chip
   ============================================================ */

function ToolBadge({ tool, status = "idle", showName = true, size = "md" }) {
  const t = TOOLS[tool];
  if (!t) return null;
  const dotColor = status === "running" ? "mint" : status === "error" ? "coral" :
                   status === "rateLimit" ? "amber" : status === "waitingInput" ? "coral" : "muted";
  return (
    <div className={`tool-badge size-${size}`}>
      <span className="tool-mark" style={{ background: t.tint }}>
        {t.icon ? <img src={t.icon} alt="" /> : <span style={{ color: textForBg(t.tint) }}>{t.mark}</span>}
      </span>
      {showName && <span className="tool-name">{t.name}</span>}
      <span className={`dot ${dotColor}`} />
    </div>
  );
}

function textForBg(hex) {
  // crude: light bg → dark text, dark bg → white
  const c = hex.replace('#', '');
  const r = parseInt(c.substring(0,2), 16);
  const g = parseInt(c.substring(2,4), 16);
  const b = parseInt(c.substring(4,6), 16);
  const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
  return lum > 0.6 ? '#111' : '#fff';
}

/* ============================================================
   3. MessageCard — used in chaos-to-calm section
   ============================================================ */

function MessageCard({ tool, status, title, body, time = "just now", drift = false }) {
  const t = TOOLS[tool] || TOOLS["claude-code"];
  const statusColor = status === "error" ? "coral" : status === "done" ? "mint" :
                      status === "rateLimit" ? "amber" : status === "waitingInput" ? "coral" : "blue";
  return (
    <div className={`msg-card ${drift ? 'drift' : ''}`} data-status={status}>
      <div className="msg-head">
        <span className="cap-msg-tool" style={{ color: t.nameColor || t.tint, fontSize: 12 }}>{t.name}</span>
        <span className="mono muted" style={{ fontSize: 10 }}>{time}</span>
      </div>
      <div className="msg-title">{title}</div>
      <div className="msg-body">{body}</div>
      <div className="msg-actions">
        <button className="msg-mini" data-color={statusColor}>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.4">
            <path d="M2 5l2 2 4-5"/>
          </svg>
          Mark Read
        </button>
        <button className="msg-mini primary">
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.4">
            <path d="M2 8l6-6M3 2h5v5"/>
          </svg>
          Jump
        </button>
      </div>
    </div>
  );
}

/* ============================================================
   4. DownloadCommand — copyable command pill
   ============================================================ */

function DownloadCommand({ variant = "npx", command, label, primary = false, href }) {
  const [copied, setCopied] = useStateC(false);

  const cmd = command ?? (
    variant === "npx" ? "npx vibepet install" :
    variant === "brew" ? "brew install --cask vibepet" :
    variant === "dmg" ? "VibePet-1.0.0.dmg" :
    command
  );

  const dmgHref = href || "https://download.vibepet.ai/latest/vibepet-macos-arm64.dmg";

  const handleCopy = (e) => {
    e.stopPropagation();
    if (navigator.clipboard) {
      navigator.clipboard.writeText(cmd).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1400);
      });
    }
  };

  const prefix = variant === "dmg" ? "↓" : "$";

  if (variant === "dmg" && primary) {
    return (
      <a href={dmgHref} className="btn btn-primary download-dmg" download>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <path d="M7 1v8M3.5 5.5L7 9l3.5-3.5M2 12h10"/>
        </svg>
        {label || "Download for macOS"}
      </a>
    );
  }

  return (
    <div className={`dl-cmd ${primary ? 'primary' : ''}`} onClick={handleCopy}>
      <span className="dl-prefix mono">{prefix}</span>
      <span className="dl-text mono">{cmd}</span>
      <button className="dl-copy" aria-label={copied ? "Copied" : "Copy to clipboard"}>
        {copied ? (
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M3 7l3 3 5-6"/>
          </svg>
        ) : (
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
            <rect x="4" y="4" width="8" height="8" rx="1.5"/>
            <path d="M2 10V3a1 1 0 0 1 1-1h7"/>
          </svg>
        )}
      </button>
    </div>
  );
}

/* ============================================================
   5. SectionHeading
   ============================================================ */

function SectionHeading({ eyebrow, title, sub, align = "left", maxWidth }) {
  return (
    <div className={`section-heading align-${align}`} style={{ maxWidth }}>
      {eyebrow && <div className="eyebrow">{eyebrow}</div>}
      <h2 className="h-section">{title}</h2>
      {sub && <p className="sub">{sub}</p>}
    </div>
  );
}

/* ============================================================
   6. PetCard — for /pets gallery preview
   ============================================================ */

function PetCard({ petKey, hatchPrompt, installCommand }) {
  const pet = PETS[petKey];
  if (!pet) return null;
  const [hover, setHover] = useStateC(false);
  return (
    <div
      className="pet-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="pet-card-art">
        <PetSprite
          pet={petKey}
          state={hover ? "running" : "idle"}
          size={92}
          framed={false}
        />
      </div>
      <div className="pet-card-body">
        <div className="row items-center justify-between">
          <div className="pet-card-name pixel">{pet.name}</div>
          <span className="pet-card-tag mono">built-in</span>
        </div>
        <div className="pet-card-blurb">{pet.blurb}</div>
        {hatchPrompt && (
          <div className="pet-card-hatch">
            <span className="mono muted" style={{ fontSize: 10 }}>HATCH PROMPT</span>
            <div className="mono pet-card-prompt">"{hatchPrompt}"</div>
          </div>
        )}
        {installCommand && (
          <DownloadCommand command={installCommand} variant="npx" />
        )}
      </div>
    </div>
  );
}

/* ============================================================
   7. SoundButton — circular play with simulated waveform
   ============================================================ */

function SoundButton({ id, name, duration = "0:02", category = "Done", description, src, tone = "blue", variant }) {
  const [playing, setPlaying] = useStateC(false);
  const rafRef = useRefC();
  const startRef = useRefC();
  const audioRef = useRefC(null);
  const [progress, setProgress] = useStateC(0);

  const totalMs = useCallbackC(() => {
    const [m, s] = duration.split(':').map(n => parseInt(n, 10));
    return (m * 60 + s) * 1000 || 2000;
  }, [duration]);

  // Ticker — always runs the progress bar; real audio plays in parallel if src is set.
  useEffectC(() => {
    if (!playing) return;
    startRef.current = performance.now();
    const tick = (t) => {
      const elapsed = t - startRef.current;
      const total = totalMs();
      const p = Math.min(elapsed / total, 1);
      setProgress(p);
      if (p >= 1) {
        setPlaying(false);
        setProgress(0);
        return;
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [playing]);

  // Real audio playback when src is provided
  useEffectC(() => {
    if (!src) return;
    if (!audioRef.current) {
      audioRef.current = new Audio(src);
      audioRef.current.preload = "auto";
    }
    const a = audioRef.current;
    if (playing) {
      a.currentTime = 0;
      a.play().catch(() => {});
    } else {
      a.pause();
    }
  }, [playing, src]);

  const handleClick = () => {
    setPlaying(!playing);
    setProgress(0);
  };

  // Stable waveform from id
  const seed = (id || name).split('').reduce((a, c) => a + c.charCodeAt(0), 0);
  const bars = variant === 'hero' ? 28 : 24;
  const heights = Array.from({ length: bars }, (_, i) => {
    const v = Math.abs(Math.sin(seed + i * 0.91) * Math.cos(seed * 0.3 + i * 0.7));
    return 0.25 + v * 0.75;
  });

  // HERO variant — big stage-style card
  if (variant === 'hero') {
    return (
      <button
        className={`sound-hero tone-${tone} ${playing ? 'playing' : ''}`}
        onClick={handleClick}
        aria-label={playing ? `Stop ${name}` : `Play ${name}`}
      >
        <div className="sound-hero-glow" aria-hidden="true" />
        <div className="sound-hero-head">
          <span className="sound-cat mono">{category}</span>
          <span className="mono sound-hero-dur">{duration}</span>
        </div>

        <div className="sound-hero-stage">
          <div className="sound-hero-ring" aria-hidden="true">
            <div className="ring r1" />
            <div className="ring r2" />
            <div className="ring r3" />
            <div className="sound-hero-play">
              {playing ? (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <rect x="5" y="4" width="3.5" height="12" rx="0.8"/>
                  <rect x="11.5" y="4" width="3.5" height="12" rx="0.8"/>
                </svg>
              ) : (
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path d="M5 3.5v13l11-6.5z"/>
                </svg>
              )}
            </div>
          </div>
          <div className="sound-hero-wave" aria-hidden="true">
            {heights.map((h, i) => {
              const pos = i / bars;
              const active = playing && pos < progress;
              return (
                <span
                  key={i}
                  className={`wave-bar ${active ? 'active' : ''}`}
                  style={{
                    height: `${h * 100}%`,
                    animationDelay: `${i * 50}ms`,
                  }}
                />
              );
            })}
          </div>
        </div>

        <div className="sound-hero-body">
          <div className="sound-hero-name">{name}</div>
          {description && <div className="sound-hero-desc">{description}</div>}
        </div>
        <div className="sound-hero-bar">
          <span style={{ width: `${progress * 100}%` }} />
        </div>
      </button>
    );
  }

  // Default compact variant
  return (
    <div className="sound-btn">
      <button
        className={`sound-play ${playing ? 'playing' : ''}`}
        onClick={handleClick}
        aria-label={playing ? `Pause ${name}` : `Play ${name}`}
      >
        {playing ? (
          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
            <rect x="3" y="2" width="3" height="10" rx="0.5"/>
            <rect x="8" y="2" width="3" height="10" rx="0.5"/>
          </svg>
        ) : (
          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
            <path d="M3 2v10l9-5z"/>
          </svg>
        )}
      </button>
      <div className="sound-body">
        <div className="row items-center justify-between gap-3">
          <div className="sound-name">{name}</div>
          <div className="mono muted" style={{ fontSize: 11 }}>{duration}</div>
        </div>
        <div className="sound-wave">
          {heights.map((h, i) => {
            const pos = i / bars;
            const active = playing && pos < progress;
            return (
              <span
                key={i}
                className={`wave-bar ${active ? 'active' : ''}`}
                style={{ height: `${h * 100}%` }}
              />
            );
          })}
        </div>
        <div className="row items-center gap-2 sound-meta">
          <span className="sound-cat mono">{category}</span>
          {description && <span className="sub" style={{ fontSize: 12 }}>{description}</span>}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Social icons for nav + footer
   ============================================================ */
function XIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );
}
function DiscordIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.07.07 0 0 0-.073.035c-.211.375-.444.864-.608 1.249-1.844-.276-3.68-.276-5.487 0a12.59 12.59 0 0 0-.617-1.25.077.077 0 0 0-.074-.034 19.74 19.74 0 0 0-4.885 1.515.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.105 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.009c.12.099.246.198.372.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.106c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
    </svg>
  );
}
function FeishuIcon({ size = 16 }) {
  return <img src="assets/logos/lark.png" alt="" width={size} height={size} style={{ borderRadius: 4, display: 'block' }} />;
}

function SocialLinks({ variant = "icons", className = "", showQR = false }) {
  const links = [
    { id: 'x',       label: 'X',       url: 'https://x.com/vibepet_ai',           Icon: XIcon },
    { id: 'discord', label: 'Discord', url: 'https://discord.gg/BUQE8bVd7',       Icon: DiscordIcon, qr: 'assets/discord-qr.png' },
  ];
  return (
    <div className={`social-links variant-${variant} ${className}`}>
      {links.map(({ id, label, url, Icon, qr }) => (
        <a
          key={id}
          href={url}
          target="_blank"
          rel="noreferrer"
          className={`social-link social-${id} ${qr && showQR ? 'has-qr' : ''}`}
          aria-label={label}
          title={label}
        >
          <Icon size={variant === 'icons' ? 16 : 14} />
          {variant === 'labeled' && <span>{label}</span>}
          {qr && showQR && (
            <span className="social-qr-pop" aria-hidden="true">
              <img src={qr} alt="" />
              <span className="social-qr-cap mono">scan to join</span>
            </span>
          )}
        </a>
      ))}
    </div>
  );
}

Object.assign(window, {
  TOOLS, TOOL_KEYS,
  NotchCapsule, ToolBadge, MessageCard, DownloadCommand, SectionHeading,
  PetCard, SoundButton, SocialLinks,
  XIcon, DiscordIcon, FeishuIcon,
});