// Pebble mascot — same shape, same animation as src/components/Mascot/SpineMascot.tsx.
// Inlined here so the landing is fully self-contained: open landing/index.html
// in any browser and the page works without a build step or shared imports.

function PebbleMascot({
  posture = 1,
  size = 120,
  mood,
  ink = '#1F2150',
  surface = '#FFFFFA',
  bg = '#FAF6EC',
  accent = '#E8675F',
  accent2 = '#3D4A99',
  animate = true,
}) {
  const p = Math.max(0, Math.min(1, posture));
  const s = 1 - p;
  const VB = 100;
  const W = VB, H = VB;

  // Body squashes when slumping, taller when proud. lean tilts the whole
  // pebble forward as posture drops.
  const cx = 50;
  const cy = 56 + s * 4;
  const rx = 26 + s * 4;
  const ry = 28 - s * 5;
  const lean = s * 12;

  const eyeY = cy - 4;
  const eyeOff = 7;
  const eyeMode = mood === 'break' ? 'sleep' : (mood === 'alert' ? 'alert' : 'normal');
  const eyeOpen = 1 - 0.6 * s;
  const transition = animate ? 'all .5s cubic-bezier(.3,.7,.4,1)' : undefined;

  return (
    <svg width={size} height={size} viewBox={`0 0 ${W} ${H}`} style={{ overflow: 'visible' }} aria-hidden>
      <ellipse cx={cx} cy={cy + ry + 4} rx={rx * 0.85} ry={2.5} fill={ink} opacity={0.12} />
      <g transform={`rotate(${-lean} ${cx} ${cy + ry})`} style={{ transition }}>
        <ellipse cx={cx} cy={cy} rx={rx} ry={ry}
                 fill={surface} stroke={ink} strokeWidth={1.8}
                 style={{ transition }} />
        <ellipse cx={cx - 4} cy={cy - ry * 0.55} rx={rx * 0.55} ry={3}
                 fill={bg} opacity={0.6} />
        <ellipse cx={cx - eyeOff - 1} cy={eyeY + 5} rx={3.5} ry={2} fill={accent} opacity={0.45} />
        <ellipse cx={cx + eyeOff + 1} cy={eyeY + 5} rx={3.5} ry={2} fill={accent} opacity={0.45} />
        {eyeMode === 'sleep' ? (
          <>
            <path d={`M ${cx - eyeOff - 2.4} ${eyeY} q 2.4 -2 4.8 0`} stroke={ink} strokeWidth={1.6} fill="none" strokeLinecap="round" />
            <path d={`M ${cx + eyeOff - 2.4} ${eyeY} q 2.4 -2 4.8 0`} stroke={ink} strokeWidth={1.6} fill="none" strokeLinecap="round" />
          </>
        ) : eyeMode === 'alert' ? (
          <>
            <circle cx={cx - eyeOff} cy={eyeY} r={2.2} fill={ink} />
            <circle cx={cx + eyeOff} cy={eyeY} r={2.2} fill={ink} />
            <circle cx={cx - eyeOff + 0.8} cy={eyeY - 0.8} r={0.6} fill={surface} />
            <circle cx={cx + eyeOff + 0.8} cy={eyeY - 0.8} r={0.6} fill={surface} />
          </>
        ) : (
          <>
            <ellipse cx={cx - eyeOff} cy={eyeY} rx={2} ry={1.6 + 0.8 * eyeOpen} fill={ink} style={{ transition }} />
            <ellipse cx={cx + eyeOff} cy={eyeY} rx={2} ry={1.6 + 0.8 * eyeOpen} fill={ink} style={{ transition }} />
            <circle cx={cx - eyeOff + 0.6} cy={eyeY - 0.6} r={0.6} fill={surface} />
            <circle cx={cx + eyeOff + 0.6} cy={eyeY - 0.6} r={0.6} fill={surface} />
          </>
        )}
        {(() => {
          const my = eyeY + 8.5;
          if (eyeMode === 'sleep') return <path d={`M ${cx - 2} ${my} q 2 1.5 4 0`} stroke={ink} strokeWidth={1.5} fill="none" strokeLinecap="round" />;
          if (s < 0.25) return <path d={`M ${cx - 4} ${my - 0.5} q 4 4 8 0`} stroke={ink} strokeWidth={1.6} fill="none" strokeLinecap="round" />;
          if (s < 0.6) return <line x1={cx - 3.5} y1={my + 0.5} x2={cx + 3.5} y2={my + 0.5} stroke={ink} strokeWidth={1.6} strokeLinecap="round" />;
          return <path d={`M ${cx - 4} ${my + 2} q 4 -3 8 0`} stroke={ink} strokeWidth={1.6} fill="none" strokeLinecap="round" />;
        })()}
        {p > 0.9 && eyeMode !== 'alert' && (
          <g opacity={0.85}>
            <path d={`M ${cx + rx + 4} ${cy - ry + 6} l 0 5 M ${cx + rx + 1.5} ${cy - ry + 8.5} l 5 0`}
                  stroke={accent} strokeWidth={1.5} strokeLinecap="round" />
          </g>
        )}
      </g>
      {eyeMode === 'alert' && (
        <path d={`M ${cx + rx - 4} ${cy - 2} q 1.4 4 0 7 q -2.2 -3 0 -7 z`}
              fill={accent2} opacity={0.85} />
      )}
    </svg>
  );
}

window.PebbleMascot = PebbleMascot;