// ChirpPairingFlow — the audio pairing screen.
//
// Renders the three-act bird animation specified in the brief §6.2:
//   Act 1 (waiting)   — desktop finch chirps, soft rings pulse from its beak
//   Act 2 (handshake) — mobile swallow hops in, sound-wave arcs fly between
//                        the two birds, both heads tilt toward each other
//   Act 3 (paired)    — waves resolve into a glowing connection dot; both
//                        birds wing-flutter and bob together
//
// Phase mapping (PairingPhase from sync-types):
//   idle | listening | chirping → Act 1
//   handshake                   → Act 2
//   paired                      → Act 3
//   timeout                     → desktop bird droops, retry CTA
//   mic_denied                  → static stage, browser-settings hint
//   version_mismatch            → static stage, update hint, retry CTA
//   handshake_failed            → retry CTA
//
// The orchestrator (popup/chirp-pair.ts) pushes phase updates into
// `progress` and the component renders them. This component owns no
// microphone or socket state of its own.

import { Component, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
import type { PairingPhase, PairingProgress } from "../../shared/sync-types";

export interface ChirpPairingFlowProps {
  progress: PairingProgress;
  /** Called when the user taps Retry on a terminal-error state. */
  onRetry: () => void;
  /** Called when the user taps Cancel/back on the idle/listening state. */
  onCancel: () => void;
  /** Called once the paired-state dismissal animation completes. */
  onDismiss: () => void;
}

const PAIRED_DISMISS_MS = 2_500;
// During handshake, swap which bird the flight-wave emanates from so the
// chirp feels reciprocated. Desktop wave first, then mobile.
const HANDSHAKE_DESKTOP_WAVE_MS = 900;
const HANDSHAKE_MOBILE_WAVE_MS = 1_900;

export const ChirpPairingFlow: Component<ChirpPairingFlowProps> = (props) => {
  const [dismissArmed, setDismissArmed] = createSignal(false);
  const [waveSide, setWaveSide] = createSignal<"desktop" | "mobile" | null>(null);

  createEffect(() => {
    if (props.progress.phase === "paired" && !dismissArmed()) {
      setDismissArmed(true);
      const t = setTimeout(() => props.onDismiss(), PAIRED_DISMISS_MS);
      onCleanup(() => clearTimeout(t));
    }
  });

  // Swap which side the flight-wave plays from during Act 2.
  createEffect(() => {
    if (props.progress.phase !== "handshake") {
      setWaveSide(null);
      return;
    }
    setWaveSide("desktop");
    const t1 = setTimeout(() => setWaveSide("mobile"), HANDSHAKE_DESKTOP_WAVE_MS);
    const t2 = setTimeout(() => setWaveSide(null), HANDSHAKE_MOBILE_WAVE_MS);
    onCleanup(() => { clearTimeout(t1); clearTimeout(t2); });
  });

  const phase = createMemo(() => props.progress.phase);
  const desktopPose = createMemo(() => poseFor("desktop", phase()));
  const mobilePose = createMemo(() => poseFor("mobile", phase()));

  const showDesktopChirp = createMemo(() => {
    const p = phase();
    return p === "listening" || p === "chirping" || (p === "handshake" && waveSide() !== "mobile");
  });
  const showMobileChirp = createMemo(() => phase() === "handshake" && waveSide() === "mobile");

  return (
    <div
      class="peach-chirp-pair"
      data-phase={phase()}
      role="dialog"
      aria-label="Pair a device"
      onClick={() => phase() === "paired" && props.onDismiss()}
    >
      <PairingHeader onBack={() => props.onCancel()} phase={phase()} />

      <div class="peach-chirp-chip-row">
        <StatusChip phase={phase()} />
      </div>

      <div class={`peach-chirp-stage act-${phase()}`} aria-hidden="true">
        <div class="peach-chirp-bird-slot peach-chirp-bird-slot-desktop">
          <DesktopBird pose={desktopPose()} />
          <Show when={showDesktopChirp()}>
            <ChirpArcs direction="right" />
          </Show>
        </div>
        <div class="peach-chirp-bird-slot peach-chirp-bird-slot-mobile">
          <MobileBird pose={mobilePose()} />
          <Show when={showMobileChirp()}>
            <ChirpArcs direction="left" />
          </Show>
        </div>
        <div class="peach-chirp-flight-track">
          <FlightWave from="desktop" visible={waveSide() === "desktop"} />
          <FlightWave from="mobile" visible={waveSide() === "mobile"} />
          <ConnectionDot visible={phase() === "paired"} />
        </div>
        <div class="peach-chirp-motes">
          <For8>
            {(i) => <span class="peach-chirp-mote" style={{ "--mote-i": i }} />}
          </For8>
        </div>
      </div>

      <PairingCopy progress={props.progress} />
      <PairingAction
        progress={props.progress}
        onCancel={() => props.onCancel()}
        onRetry={() => props.onRetry()}
        onDone={() => props.onDismiss()}
      />

      <Show when={phase() === "mic_denied"}>
        <p class="peach-chirp-mic-help">
          Update your browser's site settings to allow Peach to access the microphone,
          then try again.
        </p>
      </Show>

      <PairingFooter phase={phase()} />

      {/* Polite live region so the act transitions are announced to
          assistive tech even though the stage itself is decorative. */}
      <div class="peach-sr-only" aria-live="polite">{liveText(props.progress)}</div>
    </div>
  );
};

function poseFor(side: "desktop" | "mobile", phase: PairingPhase): string {
  if (side === "desktop") {
    switch (phase) {
      case "listening":
      case "chirping": return "chirping";
      case "handshake": return "attentive";
      case "paired": return "happy";
      case "timeout":
      case "handshake_failed":
      case "version_mismatch": return "sad";
      default: return "idle";
    }
  }
  switch (phase) {
    case "handshake": return "attentive";
    case "paired": return "happy";
    default: return "hidden";
  }
}

function liveText(p: PairingProgress): string {
  switch (p.phase) {
    case "listening":
    case "chirping": return "Listening for the chirp";
    case "handshake": return "Pairing — exchanging keys";
    case "paired": return p.peerDeviceName ? `Paired — connected to ${p.peerDeviceName}` : "Paired";
    case "timeout": return "Couldn't find your phone";
    case "mic_denied": return "Microphone access needed";
    case "version_mismatch": return "Update Peach on both devices";
    case "handshake_failed": return "Pairing failed — try again";
    default: return "";
  }
}

// ---------------------------------------------------------------------------
// Header, chip row, footer
// ---------------------------------------------------------------------------

const PairingHeader: Component<{ onBack: () => void; phase: PairingPhase }> = (props) => (
  <header class="peach-chirp-head">
    <button class="peach-chirp-back" aria-label="Back" onClick={() => props.onBack()}>
      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M10 3 L5 8 L10 13" />
      </svg>
    </button>
    <div class="peach-chirp-title">Sync</div>
    <div class="peach-chirp-head-spacer" />
  </header>
);

const StatusChip: Component<{ phase: PairingPhase }> = (props) => {
  const label = () => {
    switch (props.phase) {
      case "listening":
      case "chirping":
      case "idle": return "listening";
      case "handshake": return "handshake";
      case "paired": return "paired";
      case "mic_denied": return "mic blocked";
      case "version_mismatch": return "version mismatch";
      case "timeout": return "no response";
      case "handshake_failed": return "failed";
    }
  };
  return (
    <div class="peach-chirp-chip" data-phase={props.phase}>
      <span class="peach-chirp-chip-dot" />
      <span class="peach-chirp-chip-text">{label()}</span>
    </div>
  );
};

const PairingFooter: Component<{ phase: PairingPhase }> = (props) => (
  <footer class="peach-chirp-foot">
    <div class="peach-chirp-foot-divider" />
    <div class="peach-chirp-foot-text">
      {props.phase === "paired"
        ? "Long-term sync keys exchanged over Noise NK. Stored locally on both devices."
        : "Chirp Sync stays on your local network. No relay servers, no cloud accounts — just your devices in the same room."}
    </div>
  </footer>
);

// ---------------------------------------------------------------------------
// Copy + action area (animates on phase change via key remount)
// ---------------------------------------------------------------------------

const PairingCopy: Component<{ progress: PairingProgress }> = (props) => {
  // Remount on phase change so the copy-in keyframe replays.
  const phaseKey = createMemo(() => props.progress.phase);
  return (
    <div class="peach-chirp-copy-host">
      <Show when={phaseKey()} keyed>
        {(_p) => (
          <div class={`peach-chirp-copy peach-chirp-copy-${props.progress.phase}`}>
            <div class="peach-chirp-headline">{headline(props.progress)}</div>
            <div class="peach-chirp-sub">{subtext(props.progress)}</div>
          </div>
        )}
      </Show>
    </div>
  );
};

function headline(p: PairingProgress): string {
  switch (p.phase) {
    case "idle":
    case "listening":
    case "chirping": return "Hold your phone near your laptop";
    case "handshake": return "Pairing…";
    case "paired": return "Paired!";
    case "timeout": return "Couldn’t find your phone";
    case "mic_denied": return "Microphone access needed";
    case "version_mismatch": return "Update Peach on both devices";
    case "handshake_failed": return "Something went wrong";
  }
}

function subtext(p: PairingProgress): string {
  switch (p.phase) {
    case "idle":
    case "listening":
    case "chirping": return "Peach will pair automatically when your phone is close.";
    case "handshake": return "Listening for the chirp.";
    case "paired": return p.peerDeviceName ? `Connected to ${p.peerDeviceName}` : "Connected";
    case "timeout": return "Make sure Peach is open on your phone and try again.";
    case "mic_denied": return "Peach uses your microphone to pair. No audio is recorded or stored.";
    case "version_mismatch": return "The other device is running a different protocol version.";
    case "handshake_failed": return p.errorMessage ?? "Please try again.";
  }
}

const PairingAction: Component<{
  progress: PairingProgress;
  onCancel: () => void;
  onRetry: () => void;
  onDone: () => void;
}> = (props) => {
  const phase = () => props.progress.phase;
  return (
    <div class="peach-chirp-action">
      <Show when={phase() === "listening" || phase() === "chirping" || phase() === "idle"}>
        <div class="peach-chirp-action-waiting">
          <button class="peach-chirp-cancel peach-btn peach-btn-ghost" onClick={() => props.onCancel()}>
            Cancel
          </button>
          <div class="peach-chirp-listening">
            <span class="peach-chirp-listen-dot" />
            <span class="peach-chirp-listen-dot" />
            <span class="peach-chirp-listen-dot" />
            <span class="peach-chirp-listen-label">listening</span>
          </div>
        </div>
      </Show>

      <Show when={phase() === "handshake"}>
        <div class="peach-chirp-action-handshake">
          <div class="peach-chirp-meter">
            <span class="peach-chirp-meter-bar" />
          </div>
          <span class="peach-chirp-meter-label">handshake · noise NK</span>
        </div>
      </Show>

      <Show when={phase() === "paired"}>
        <div class="peach-chirp-action-paired">
          <div class="peach-chirp-device-confirm">
            <span class="peach-chirp-device-confirm-glyph" aria-hidden="true">
              <svg viewBox="0 0 16 16" width="14" height="14">
                <rect x="3" y="2" width="10" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.2" />
                <circle cx="8" cy="12" r="0.9" fill="currentColor" />
              </svg>
            </span>
            <span class="peach-chirp-device-confirm-name">
              {props.progress.peerDeviceName ?? "Paired device"}
            </span>
            <span class="peach-chirp-device-confirm-trust">direct</span>
          </div>
          <button class="peach-chirp-done peach-btn peach-btn-primary" onClick={() => props.onDone()}>
            Done
          </button>
        </div>
      </Show>

      <Show when={isRetryable(phase())}>
        <button class="peach-chirp-retry peach-btn peach-btn-primary" onClick={() => props.onRetry()}>
          Try again
        </button>
      </Show>
    </div>
  );
};

function isRetryable(phase: PairingPhase): boolean {
  return phase === "timeout" || phase === "handshake_failed" || phase === "version_mismatch" || phase === "mic_denied";
}

// ---------------------------------------------------------------------------
// Stage children — chirp arcs, flight wave, connection dot
// ---------------------------------------------------------------------------

const ChirpArcs: Component<{ direction: "left" | "right" }> = (props) => (
  <div class={`peach-chirp-arcs peach-chirp-arcs-${props.direction}`}>
    <span class="peach-chirp-arc" style={{ "animation-delay": "0ms" }} />
    <span class="peach-chirp-arc" style={{ "animation-delay": "560ms" }} />
    <span class="peach-chirp-arc" style={{ "animation-delay": "1120ms" }} />
  </div>
);

const FlightWave: Component<{ from: "desktop" | "mobile"; visible: boolean }> = (props) => (
  <svg
    class="peach-chirp-flight-wave"
    classList={{ "is-visible": props.visible }}
    data-from={props.from}
    viewBox="0 0 220 80"
    preserveAspectRatio="none"
  >
    <path class="peach-chirp-flight-path" d="M 10 50 Q 60 5, 110 40 T 210 30" />
    <path class="peach-chirp-flight-path-2" d="M 10 55 Q 60 14, 110 45 T 210 35" />
  </svg>
);

const ConnectionDot: Component<{ visible: boolean }> = (props) => (
  <div class="peach-chirp-dot" classList={{ "is-visible": props.visible }}>
    <span class="peach-chirp-dot-glow" />
    <span class="peach-chirp-dot-core" />
    <svg class="peach-chirp-dot-ring" viewBox="0 0 60 60">
      <circle cx="30" cy="30" r="22" fill="none" stroke-width="1" stroke-dasharray="2 4" />
    </svg>
  </div>
);

// 8-mote helper. createMemo over a fixed array is overkill — index is enough.
const For8: Component<{ children: (i: number) => unknown }> = (props) => (
  <>
    {props.children(0)}
    {props.children(1)}
    {props.children(2)}
    {props.children(3)}
    {props.children(4)}
    {props.children(5)}
    {props.children(6)}
    {props.children(7)}
  </>
);

// ---------------------------------------------------------------------------
// Birds — Finch (desktop) and Swallow (mobile)
// Ported from the Chirp Pairing prototype. Bird coral/apricot hexes are
// illustration colours, not brand accent — they live alongside the brand
// peach exception in §3.1.
// ---------------------------------------------------------------------------

const FINCH = {
  hi: "#f4a6b6", mid: "#dc8294", lo: "#a85870", shade: "#7a3e54",
  cream: "#f5d8c8", beak: "#f5c764", beakShade: "#c8932e", legs: "#7a3e54",
};
const SWALLOW = {
  hi: "#f4c8a0", mid: "#dc9968", lo: "#a86b3e", shade: "#7a4a26",
  cream: "#f7e0c8", beak: "#f5c764", beakShade: "#b87a22", legs: "#5e3a1f",
};

const DesktopBird: Component<{ pose: string }> = (props) => {
  const p = FINCH;
  return (
    <div class={`peach-chirp-bird peach-chirp-bird-desktop peach-chirp-bird-pose-${props.pose}`}>
      <svg viewBox="0 0 160 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax meet">
        <defs>
          <radialGradient id="peach-chirp-finch-body" cx="0.42" cy="0.32" r="0.72">
            <stop offset="0%" stop-color={p.hi} />
            <stop offset="55%" stop-color={p.mid} />
            <stop offset="100%" stop-color={p.lo} />
          </radialGradient>
          <radialGradient id="peach-chirp-finch-head" cx="0.5" cy="0.4" r="0.7">
            <stop offset="0%" stop-color={p.hi} />
            <stop offset="100%" stop-color={p.mid} />
          </radialGradient>
          <linearGradient id="peach-chirp-finch-belly" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color={p.cream} stop-opacity="0" />
            <stop offset="50%" stop-color={p.cream} stop-opacity="0.85" />
            <stop offset="100%" stop-color={p.cream} stop-opacity="0.5" />
          </linearGradient>
        </defs>
        <ellipse class="peach-chirp-bird-shadow" cx="78" cy="138" rx="40" ry="3.5" fill="rgba(0,0,0,0.45)" />
        <g class="peach-chirp-bird-aura" opacity="0">
          <ellipse cx="76" cy="74" rx="60" ry="46" fill={p.hi} opacity="0.18" style={{ filter: "blur(8px)" }} />
        </g>
        <g class="peach-chirp-bird-tail">
          <path d="M 32 92 Q 8 90, 6 80 Q 10 95, 28 100 Z" fill={p.lo} />
          <path d="M 32 95 Q 4 99, 4 92 Q 10 102, 28 102 Z" fill={p.shade} opacity="0.85" />
          <path d="M 32 98 Q 8 108, 12 110 Q 20 110, 30 105 Z" fill={p.lo} opacity="0.9" />
        </g>
        <g class="peach-chirp-bird-feet" stroke={p.legs} stroke-width="1.6" stroke-linecap="round" fill="none">
          <line x1="62" y1="118" x2="60" y2="134" />
          <path d="M 60 134 L 55 138 M 60 134 L 60 139 M 60 134 L 65 138" stroke-width="1.2" />
          <line x1="84" y1="118" x2="86" y2="134" />
          <path d="M 86 134 L 81 138 M 86 134 L 86 139 M 86 134 L 91 138" stroke-width="1.2" />
        </g>
        <g class="peach-chirp-bird-body">
          <path d="M 30 88 C 24 64, 40 38, 72 36 C 105 34, 124 56, 122 84 C 120 110, 100 122, 70 120 C 44 118, 32 108, 30 88 Z" fill="url(#peach-chirp-finch-body)" />
          <path d="M 40 82 C 42 100, 60 112, 80 110 C 100 108, 110 100, 112 86 C 100 102, 80 106, 60 102 C 50 100, 44 92, 40 82 Z" fill="url(#peach-chirp-finch-belly)" />
          <g class="peach-chirp-bird-wing">
            <path d="M 56 60 C 68 56, 88 60, 102 68 C 108 76, 106 86, 96 90 C 80 92, 64 86, 54 78 C 50 70, 50 64, 56 60 Z" fill={p.lo} />
            <g stroke={p.shade} stroke-width="0.7" stroke-linecap="round" fill="none" opacity="0.55">
              <path d="M 64 64 Q 72 70, 78 80" />
              <path d="M 74 62 Q 82 70, 88 82" />
              <path d="M 84 64 Q 90 72, 94 84" />
            </g>
            <path d="M 56 60 C 68 56, 88 60, 102 68" stroke={p.shade} stroke-width="1" fill="none" opacity="0.4" />
          </g>
        </g>
        <g class="peach-chirp-bird-head-group" style={{ "transform-origin": "95px 52px" }}>
          <g class="peach-chirp-bird-tuft">
            <path d="M 88 22 Q 86 12, 94 12 Q 94 20, 92 26 Z" fill={p.lo} />
            <path d="M 96 20 Q 96 10, 104 14 Q 102 22, 100 26 Z" fill={p.shade} opacity="0.95" />
            <path d="M 104 24 Q 108 16, 114 20 Q 110 28, 106 30 Z" fill={p.lo} opacity="0.85" />
          </g>
          <circle cx="98" cy="48" r="26" fill="url(#peach-chirp-finch-head)" />
          <path d="M 76 46 Q 80 30, 96 26 Q 86 32, 80 48 Z" fill={p.shade} opacity="0.35" />
          <g class="peach-chirp-bird-eye-group">
            <circle cx="108" cy="42" r="4.5" fill="#1f0a10" />
            <circle cx="109.4" cy="40.5" r="1.4" fill="rgba(255,240,225,0.95)" />
            <circle cx="106.5" cy="44" r="0.5" fill="rgba(255,240,225,0.6)" />
          </g>
          <g class="peach-chirp-bird-beak" style={{ "transform-origin": "120px 52px" }}>
            <path d="M 120 48 L 138 50 L 122 56 Z" fill={p.beak} />
            <path d="M 120 48 L 138 50 L 128 52 Z" fill={p.beakShade} opacity="0.55" />
            <path d="M 122 52 L 134 51" stroke={p.beakShade} stroke-width="0.6" opacity="0.6" />
          </g>
        </g>
      </svg>
    </div>
  );
};

const MobileBird: Component<{ pose: string }> = (props) => {
  const p = SWALLOW;
  return (
    <div class={`peach-chirp-bird peach-chirp-bird-mobile peach-chirp-bird-pose-${props.pose}`}>
      <svg viewBox="0 0 160 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax meet" style={{ transform: "scaleX(-1)" }}>
        <defs>
          <radialGradient id="peach-chirp-swallow-body" cx="0.55" cy="0.35" r="0.75">
            <stop offset="0%" stop-color={p.hi} />
            <stop offset="50%" stop-color={p.mid} />
            <stop offset="100%" stop-color={p.lo} />
          </radialGradient>
          <radialGradient id="peach-chirp-swallow-head" cx="0.45" cy="0.4" r="0.7">
            <stop offset="0%" stop-color={p.hi} />
            <stop offset="100%" stop-color={p.mid} />
          </radialGradient>
          <linearGradient id="peach-chirp-swallow-throat" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color={p.cream} stop-opacity="0.95" />
            <stop offset="100%" stop-color={p.cream} stop-opacity="0.2" />
          </linearGradient>
        </defs>
        <ellipse class="peach-chirp-bird-shadow" cx="86" cy="140" rx="34" ry="3" fill="rgba(0,0,0,0.45)" />
        <g class="peach-chirp-bird-aura" opacity="0">
          <ellipse cx="80" cy="78" rx="60" ry="42" fill={p.hi} opacity="0.18" style={{ filter: "blur(8px)" }} />
        </g>
        <g class="peach-chirp-bird-tail">
          <path d="M 38 80 Q 8 70, 0 60 Q 8 78, 28 88 Q 14 90, 6 96 Q 16 94, 32 92 L 38 84 Z" fill={p.lo} />
          <path d="M 30 84 Q 14 78, 6 70 Q 18 84, 30 88 Z" fill={p.shade} opacity="0.7" />
        </g>
        <g class="peach-chirp-bird-feet" stroke={p.legs} stroke-width="1.5" stroke-linecap="round" fill="none">
          <line x1="76" y1="118" x2="74" y2="136" />
          <path d="M 74 136 L 69 140 M 74 136 L 74 141 M 74 136 L 79 140" stroke-width="1.1" />
          <line x1="96" y1="118" x2="98" y2="136" />
          <path d="M 98 136 L 93 140 M 98 136 L 98 141 M 98 136 L 103 140" stroke-width="1.1" />
        </g>
        <g class="peach-chirp-bird-body">
          <path d="M 36 82 C 32 56, 56 42, 88 44 C 116 46, 134 60, 134 80 C 134 102, 116 118, 90 118 C 60 118, 40 104, 36 82 Z" fill="url(#peach-chirp-swallow-body)" />
          <path d="M 50 64 C 60 52, 80 46, 100 48 C 116 50, 126 60, 128 70 C 120 60, 100 56, 80 60 C 64 64, 56 68, 50 64 Z" fill={p.shade} opacity="0.5" />
          <path d="M 64 82 C 66 100, 86 114, 102 112 C 116 110, 124 100, 126 88 C 116 102, 100 108, 84 104 C 74 102, 68 94, 64 82 Z" fill="url(#peach-chirp-swallow-throat)" />
          <g class="peach-chirp-bird-wing">
            <path d="M 50 70 C 64 64, 84 66, 100 72 C 112 78, 112 90, 100 96 C 84 100, 64 96, 52 88 C 46 80, 46 74, 50 70 Z" fill={p.lo} />
            <g fill={p.shade} opacity="0.85">
              <path d="M 96 88 L 110 92 L 100 96 Z" />
              <path d="M 88 92 L 102 98 L 92 100 Z" />
              <path d="M 80 94 L 92 100 L 84 102 Z" />
            </g>
            <g stroke={p.shade} stroke-width="0.6" stroke-linecap="round" fill="none" opacity="0.5">
              <path d="M 58 76 Q 70 82, 80 90" />
              <path d="M 68 72 Q 80 80, 90 88" />
              <path d="M 80 70 Q 90 78, 100 86" />
            </g>
            <path d="M 50 70 C 64 64, 84 66, 100 72" stroke={p.shade} stroke-width="1" fill="none" opacity="0.55" />
          </g>
        </g>
        <g class="peach-chirp-bird-head-group" style={{ "transform-origin": "116px 64px" }}>
          <circle cx="118" cy="64" r="20" fill="url(#peach-chirp-swallow-head)" />
          <path d="M 100 60 Q 108 46, 124 46 Q 134 50, 136 60 Q 124 54, 108 60 Z" fill={p.shade} opacity="0.55" />
          <g class="peach-chirp-bird-eye-group">
            <circle cx="126" cy="60" r="4" fill="#1f0a10" />
            <circle cx="127.2" cy="58.8" r="1.2" fill="rgba(255,240,225,0.95)" />
          </g>
          <g class="peach-chirp-bird-beak" style={{ "transform-origin": "136px 64px" }}>
            <path d="M 136 60 L 154 62 L 138 66 Z" fill={p.beak} />
            <path d="M 136 60 L 154 62 L 145 63 Z" fill={p.beakShade} opacity="0.5" />
            <path d="M 138 63 L 152 63" stroke={p.beakShade} stroke-width="0.5" opacity="0.6" />
          </g>
        </g>
      </svg>
    </div>
  );
};