// Stray Cats Ice Cream — shared brand kit.
// Palette, fonts, and illustrated cat / ice-cream marks (no photos).
// Everything exports to window for the homepage direction files.

const PAL = {
  cream:   '#F2EAD8',
  creamLt: '#F8F2E4',
  creamDk: '#EADFC6',
  paper:   '#FBF7EC',
  red:     '#C8102E',
  redDk:   '#A50C24',
  ink:     '#3A2418',
  ink2:    '#2A1C16',
  gold:    '#D9A95F',
  goldLt:  '#EBCB8C',
  black:   '#211712',
};

const FONTS = {
  display: "'Alfa Slab One', serif",
  body:    "'Barlow Condensed', sans-serif",
  script:  "'Caveat', cursive",
};

// Rotating scoop flavour swatches (used as dots / chips).
const FLAVOURS = [
  { name: 'Strawberry Cheesecake', c: '#E68AA0' },
  { name: 'Cookies & Cream',       c: '#5B4636' },
  { name: 'Salted Caramel',        c: '#C68A4A' },
  { name: 'Mint Chip',             c: '#A6D8BE' },
  { name: 'Mango Sorbet',          c: '#F2B441' },
  { name: 'Maple Walnut',          c: '#9A6B3F' },
  { name: 'Blueberry Swirl',       c: '#8A9BD0' },
  { name: 'Double Fudge',          c: '#43291B' },
];

// ── CatMark — the cat-scoop-on-a-cone emblem (from the brand assets). ──
function CatMark({ size = 120, scoop = PAL.black, cone = PAL.goldLt, ink = '#fff', face = PAL.ink2, cherry = null, style = {} }) {
  const uid = React.useId().replace(/:/g, '');
  return (
    <svg width={size} height={size * (170 / 120)} viewBox="0 0 120 170" fill="none" style={style} aria-label="Stray Cats ice-cream mark">
      <path d="M31 80 L89 80 L60 156 Z" fill={cone} />
      <clipPath id={`cc-${uid}`}><path d="M31 80 L89 80 L60 156 Z" /></clipPath>
      <g clipPath={`url(#cc-${uid})`} stroke={PAL.ink} strokeOpacity="0.26" strokeWidth="2">
        <path d="M20 86 L70 170" /><path d="M40 80 L86 156" /><path d="M58 80 L96 140" />
        <path d="M100 86 L50 170" /><path d="M80 80 L34 156" /><path d="M62 80 L24 140" />
      </g>
      <path d="M33 44 L26 8 L56 30 Z" fill={scoop} />
      <path d="M87 44 L94 8 L64 30 Z" fill={scoop} />
      <path d="M37 38 L33 18 L49 31 Z" fill={PAL.red} fillOpacity="0.85" />
      <path d="M83 38 L87 18 L71 31 Z" fill={PAL.red} fillOpacity="0.85" />
      <path d="M28 54 a32 32 0 0 1 64 0 c0 9 -3 17 -8 23 c-3 4 -1 9 -6 9 c-4 0 -5 -5 -9 -5 c-4 0 -5 6 -9 6 c-4 0 -5 -6 -9 -6 c-5 0 -3 5 -7 4 c-6 -1 -7 -22 -7 -31 Z" fill={scoop} />
      <ellipse cx="49" cy="54" rx="4.2" ry="5.8" fill={face} />
      <ellipse cx="71" cy="54" rx="4.2" ry="5.8" fill={face} />
      <circle cx="50.5" cy="52" r="1.4" fill="#fff" />
      <circle cx="72.5" cy="52" r="1.4" fill="#fff" />
      <path d="M56 63 L64 63 L60 68 Z" fill={PAL.red} />
      <path d="M60 68 q-3 5 -7 4 M60 68 q3 5 7 4" stroke={face} strokeWidth="2" strokeLinecap="round" />
      <g stroke={face} strokeOpacity="0.55" strokeWidth="1.8" strokeLinecap="round">
        <path d="M44 60 L29 56" /><path d="M44 64 L30 65" />
        <path d="M76 60 L91 56" /><path d="M76 64 L90 65" />
      </g>
      {cherry && (
        <g>
          <path d="M60 14 q5 -10 12 -11" stroke={PAL.ink} strokeWidth="2.4" strokeLinecap="round" fill="none" />
          <circle cx="60" cy="14" r="7" fill={cherry} />
          <circle cx="57.5" cy="11.5" r="1.8" fill="#fff" fillOpacity="0.7" />
        </g>
      )}
    </svg>
  );
}

// ── CatHead — compact head only, for nav / badges. ──
function CatHead({ size = 60, fur = PAL.black, eye = '#F2B441', nose = PAL.red, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" style={style} aria-label="cat">
      <path d="M30 58 L22 14 L60 40 Z" fill={fur} />
      <path d="M90 58 L98 14 L60 40 Z" fill={fur} />
      <circle cx="60" cy="70" r="40" fill={fur} />
      <ellipse cx="46" cy="66" rx="5" ry="7" fill={eye} />
      <ellipse cx="74" cy="66" rx="5" ry="7" fill={eye} />
      <ellipse cx="46" cy="67" rx="1.7" ry="4.5" fill={PAL.ink2} />
      <ellipse cx="74" cy="67" rx="1.7" ry="4.5" fill={PAL.ink2} />
      <path d="M55 80 L65 80 L60 86 Z" fill={nose} />
      <path d="M60 86 q-4 5 -9 4 M60 86 q4 5 9 4" stroke="#fff" strokeOpacity="0.85" strokeWidth="2" strokeLinecap="round" />
      <g stroke="#fff" strokeOpacity="0.7" strokeWidth="2" strokeLinecap="round">
        <path d="M42 76 L22 72" /><path d="M42 81 L24 84" />
        <path d="M78 76 L98 72" /><path d="M78 81 L96 84" />
      </g>
    </svg>
  );
}

// ── PawPrint — decorative. ──
function PawPrint({ size = 28, color = PAL.red, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill={color} style={style} aria-hidden="true">
      <ellipse cx="16" cy="21" rx="8" ry="6.5" />
      <ellipse cx="7" cy="13" rx="3.1" ry="4.1" />
      <ellipse cx="13" cy="8.5" rx="3.1" ry="4.3" />
      <ellipse cx="19" cy="8.5" rx="3.1" ry="4.3" />
      <ellipse cx="25" cy="13" rx="3.1" ry="4.1" />
    </svg>
  );
}

// ── ScoopStack — a triple-scoop cone illustration. ──
function ScoopStack({ size = 200, scoops = ['#E68AA0', '#F4E4C1', '#5B4636'], style = {} }) {
  const w = size, h = size * 1.5;
  return (
    <svg width={w} height={h} viewBox="0 0 200 300" fill="none" style={style} aria-hidden="true">
      <path d="M62 168 L138 168 L100 288 Z" fill={PAL.goldLt} />
      <g stroke={PAL.ink} strokeOpacity="0.22" strokeWidth="2.5">
        <path d="M50 176 L112 300" /><path d="M76 168 L132 280" /><path d="M100 168 L150 250" />
        <path d="M150 176 L88 300" /><path d="M124 168 L68 280" /><path d="M100 168 L50 250" />
      </g>
      <circle cx="100" cy="150" r="40" fill={scoops[2]} />
      <circle cx="100" cy="108" r="42" fill={scoops[1]} />
      <circle cx="100" cy="64" r="44" fill={scoops[0]} />
      <path d="M64 150 q12 14 36 14 q24 0 36 -14 q4 14 -6 22 q-30 14 -60 0 q-10 -8 -6 -22Z" fill="#FBF7EC" fillOpacity="0.9" />
      <path d="M62 40 q6 -16 16 -16" stroke="#7A3B2E" strokeWidth="3" strokeLinecap="round" fill="none" />
      <circle cx="62" cy="42" r="9" fill={PAL.red} />
      <circle cx="59" cy="39" r="2.4" fill="#fff" fillOpacity="0.7" />
    </svg>
  );
}

// ── SoftServe — single soft-serve swirl in a cup/cone. ──
function SoftServe({ size = 120, cream = '#FBF3E0', style = {} }) {
  return (
    <svg width={size} height={size * 1.6} viewBox="0 0 120 192" fill="none" style={style} aria-hidden="true">
      <path d="M40 120 L80 120 L60 184 Z" fill={PAL.goldLt} />
      <g stroke={PAL.ink} strokeOpacity="0.2" strokeWidth="2">
        <path d="M34 126 L70 188" /><path d="M86 126 L50 188" />
      </g>
      <path d="M60 14 c-20 0 -26 18 -14 24 c-22 2 -28 22 -10 28 c-26 4 -24 28 0 30 c-4 8 6 16 24 16 c18 0 28 -8 24 -16 c24 -2 26 -26 0 -30 c18 -6 12 -26 -10 -28 c12 -6 6 -24 -14 -24Z" fill={cream} />
      <circle cx="60" cy="12" r="2.6" fill={PAL.gold} />
    </svg>
  );
}

// ── ContainerSilhouette — the corrugated shipping-container shop. ──
function ContainerShop({ width = 520, body = PAL.creamLt, accent = PAL.red, ink = PAL.ink, style = {} }) {
  const h = width * 0.46;
  const ribs = [];
  for (let i = 0; i < 26; i++) ribs.push(<line key={i} x1={30 + i * 18} y1="40" x2={30 + i * 18} y2={h - 30} stroke={ink} strokeOpacity="0.06" strokeWidth="6" />);
  return (
    <svg width={width} height={h} viewBox={`0 0 520 ${520 * 0.46}`} fill="none" style={style} aria-label="Stray Cats container shop">
      <rect x="14" y="26" width="492" height={h - 52} rx="6" fill={body} stroke={ink} strokeOpacity="0.25" strokeWidth="2" />
      <g>{ribs}</g>
      <rect x="14" y="26" width="492" height="16" fill={ink} fillOpacity="0.85" />
      <rect x="14" y={h - 42} width="492" height="16" fill={ink} fillOpacity="0.85" />
      {/* awning + service window */}
      <rect x="56" y="78" width="150" height="78" rx="4" fill={PAL.ink2} />
      <rect x="62" y="84" width="138" height="48" fill="#cfe6e2" />
      <path d="M50 78 L212 78 L196 56 L66 56 Z" fill={accent} />
      {/* door */}
      <rect x="232" y="70" width="58" height={h - 70 - 36} fill={PAL.ink2} />
      <circle cx="280" cy={h * 0.5} r="3" fill={PAL.goldLt} />
      {/* second window */}
      <rect x="314" y="78" width="150" height="78" rx="4" fill={PAL.ink2} />
      <rect x="320" y="84" width="138" height="48" fill="#cfe6e2" />
      <path d="M308 78 L470 78 L454 56 L324 56 Z" fill={accent} />
    </svg>
  );
}

Object.assign(window, { PAL, FONTS, FLAVOURS, CatMark, CatHead, PawPrint, ScoopStack, SoftServe, ContainerShop });