// ACYLGRAPHIC — Reusable shared components
// Exported to window for cross-script availability

function BikeSilhouette({ accent = "var(--accent)", accent2 = "var(--accent-2)" }) {
  // Stylised side profile of a sport motorcycle. Hand-built path. Treat as a poster illustration.
  return (
    <svg viewBox="0 0 1200 540" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id="bodyG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2a2a30"/>
          <stop offset="60%" stopColor="#0e0e12"/>
          <stop offset="100%" stopColor="#000"/>
        </linearGradient>
        <linearGradient id="bodyHi" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={accent} stopOpacity="0"/>
          <stop offset="55%" stopColor={accent} stopOpacity="0.9"/>
          <stop offset="100%" stopColor={accent} stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="wheelG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1a1a1e"/>
          <stop offset="100%" stopColor="#050507"/>
        </linearGradient>
        <radialGradient id="rotorG" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#3a3a42"/>
          <stop offset="100%" stopColor="#0d0d10"/>
        </radialGradient>
        <pattern id="carbon" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <rect width="6" height="6" fill="#0a0a0c"/>
          <rect width="3" height="3" fill="#16161a"/>
          <rect x="3" y="3" width="3" height="3" fill="#16161a"/>
        </pattern>
        <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="6"/>
        </filter>
      </defs>

      {/* shadow */}
      <ellipse cx="600" cy="490" rx="430" ry="14" fill="#000" opacity="0.7"/>

      {/* rear wheel */}
      <g transform="translate(280 380)">
        <circle r="118" fill="url(#wheelG)" stroke="#1f1f25" strokeWidth="2"/>
        <circle r="92" fill="#08080a" stroke="#2a2a30" strokeWidth="1"/>
        <circle r="56" fill="url(#rotorG)" stroke={accent} strokeWidth="1.2" strokeOpacity="0.6"/>
        {[0,45,90,135].map(a => (
          <line key={a} x1={-92} y1="0" x2={92} y2="0" stroke="#2a2a30" strokeWidth="2.5" transform={`rotate(${a})`}/>
        ))}
        <circle r="10" fill={accent}/>
        <circle r="118" fill="none" stroke={accent} strokeWidth="1" strokeOpacity="0.25"/>
      </g>

      {/* front wheel */}
      <g transform="translate(920 380)">
        <circle r="118" fill="url(#wheelG)" stroke="#1f1f25" strokeWidth="2"/>
        <circle r="92" fill="#08080a" stroke="#2a2a30" strokeWidth="1"/>
        <circle r="56" fill="url(#rotorG)" stroke={accent} strokeWidth="1.2" strokeOpacity="0.6"/>
        {[0,45,90,135].map(a => (
          <line key={a} x1={-92} y1="0" x2={92} y2="0" stroke="#2a2a30" strokeWidth="2.5" transform={`rotate(${a})`}/>
        ))}
        <circle r="10" fill={accent}/>
        <circle r="118" fill="none" stroke={accent} strokeWidth="1" strokeOpacity="0.25"/>
      </g>

      {/* swingarm */}
      <path d="M 280 380 L 540 350 L 560 372 L 320 405 Z" fill="#15151a" stroke="#2a2a30"/>

      {/* exhaust */}
      <path d="M 360 350 L 470 330 L 470 345 L 360 365 Z" fill="#1d1d22" stroke="#33333a"/>
      <rect x="468" y="324" width="22" height="28" rx="3" fill="#1d1d22" stroke="#33333a"/>

      {/* main fairing body */}
      <path d="M 360 280
               C 380 220, 460 180, 580 175
               L 760 175
               C 860 178, 920 215, 960 280
               L 950 310
               L 870 320
               L 820 305
               L 760 310
               L 700 320
               L 600 320
               L 500 325
               L 420 318
               L 380 305 Z"
        fill="url(#bodyG)" stroke="#28282e" strokeWidth="1"/>

      {/* carbon panel */}
      <path d="M 500 280 L 720 270 L 740 305 L 520 315 Z" fill="url(#carbon)" opacity="0.9"/>

      {/* livery stripe */}
      <path d="M 380 260 C 480 240, 640 230, 780 240 C 870 244, 920 260, 950 282 L 940 296 C 900 282, 830 270, 720 268 C 590 268, 470 280, 390 295 Z"
        fill="url(#bodyHi)"/>

      {/* top fairing / tank */}
      <path d="M 560 175 L 760 175 L 740 130 L 600 125 Z" fill="#13131a" stroke="#2a2a30"/>
      <path d="M 600 125 L 740 130 L 720 110 L 620 108 Z" fill={accent}/>

      {/* windscreen */}
      <path d="M 760 175 L 940 245 L 920 200 L 800 142 Z" fill={accent2} opacity="0.18" stroke={accent2} strokeOpacity="0.4"/>

      {/* headlight */}
      <path d="M 920 215 L 980 240 L 990 270 L 950 280 Z" fill="#080810" stroke="#2a2a30"/>
      <ellipse cx="958" cy="252" rx="18" ry="11" fill="#fff" opacity="0.85" filter="url(#softGlow)"/>

      {/* tail / seat */}
      <path d="M 360 280 L 480 245 L 500 270 L 380 305 Z" fill="#0e0e12" stroke="#23232a"/>
      <path d="M 400 248 L 470 232 L 480 245 L 410 264 Z" fill={accent}/>

      {/* fork */}
      <path d="M 870 250 L 920 380 L 910 380 L 855 252 Z" fill="#2a2a30"/>

      {/* number plate panel with sticker */}
      <g transform="translate(670 222)">
        <rect width="80" height="36" rx="3" fill="#fff"/>
        <text x="40" y="26" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontWeight="700" fontSize="20" fill="#08080a">A·07</text>
      </g>

      {/* small ACYL logo decal on fairing */}
      <g transform="translate(820 280)">
        <rect width="60" height="14" fill={accent}/>
        <text x="30" y="11" textAnchor="middle" fontFamily="Big Shoulders Display, sans-serif" fontWeight="900" fontSize="11" fill="#08080a" letterSpacing="2">ACYL</text>
      </g>

      {/* speed streaks */}
      <g opacity="0.6">
        <line x1="40" y1="200" x2="160" y2="200" stroke={accent} strokeWidth="1.5"/>
        <line x1="20" y1="240" x2="200" y2="240" stroke={accent2} strokeWidth="1" opacity="0.6"/>
        <line x1="60" y1="290" x2="180" y2="290" stroke="#fff" strokeWidth="0.6" opacity="0.4"/>
      </g>
    </svg>
  );
}

/* ---------- Product card sticker art ---------- */
function StickerArt({ kind = "flame", accent = "var(--accent)" }) {
  if (kind === "flame") {
    return (
      <svg viewBox="0 0 300 300" width="100%" height="100%">
        <defs>
          <linearGradient id="fl" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={accent}/>
            <stop offset="100%" stopColor="#ff6020" stopOpacity="0.6"/>
          </linearGradient>
        </defs>
        <path d="M 60 200 C 40 150, 100 130, 90 90 C 130 100, 150 60, 140 30 C 200 60, 220 140, 200 180 C 240 160, 250 200, 240 230 C 220 250, 80 250, 60 200 Z"
          fill="url(#fl)"/>
        <path d="M 100 200 C 90 170, 130 160, 130 130 C 160 145, 180 170, 175 200 Z" fill="#fff" opacity="0.15"/>
      </svg>
    );
  }
  if (kind === "skull") {
    return (
      <svg viewBox="0 0 300 300" width="100%" height="100%">
        <path d="M 150 50 C 100 50, 70 90, 70 140 C 70 175, 90 200, 110 210 L 110 240 L 130 240 L 130 220 L 170 220 L 170 240 L 190 240 L 190 210 C 210 200, 230 175, 230 140 C 230 90, 200 50, 150 50 Z"
          fill="#16161a" stroke={accent} strokeWidth="2"/>
        <ellipse cx="120" cy="150" rx="14" ry="20" fill={accent}/>
        <ellipse cx="180" cy="150" rx="14" ry="20" fill={accent}/>
        <path d="M 140 180 L 150 200 L 160 180 Z" fill={accent}/>
        <rect x="115" y="215" width="8" height="20" fill="#16161a" stroke={accent}/>
        <rect x="138" y="215" width="8" height="20" fill="#16161a" stroke={accent}/>
        <rect x="155" y="215" width="8" height="20" fill="#16161a" stroke={accent}/>
        <rect x="178" y="215" width="8" height="20" fill="#16161a" stroke={accent}/>
      </svg>
    );
  }
  if (kind === "stripe") {
    return (
      <svg viewBox="0 0 400 300" width="100%" height="100%">
        <path d="M 30 130 L 370 100 L 370 130 L 30 160 Z" fill={accent}/>
        <path d="M 30 165 L 370 135 L 370 150 L 30 180 Z" fill="#fff"/>
        <path d="M 30 185 L 370 155 L 370 170 L 30 200 Z" fill={accent} opacity="0.5"/>
        <text x="200" y="138" textAnchor="middle" fontFamily="Big Shoulders Display, sans-serif" fontWeight="900" fontStretch="75%" fontSize="42" fill="#08080a" letterSpacing="4">RACE-01</text>
      </svg>
    );
  }
  if (kind === "helmet") {
    return (
      <svg viewBox="0 0 300 300" width="100%" height="100%">
        <path d="M 80 130 C 80 80, 130 50, 170 50 C 220 50, 250 90, 250 140 L 250 200 L 220 220 L 100 220 L 80 200 Z"
          fill="#0e0e12" stroke="#2a2a30" strokeWidth="2"/>
        <path d="M 95 130 L 240 130 L 235 175 L 100 175 Z" fill={accent} opacity="0.85"/>
        <path d="M 110 135 L 230 135 L 226 165 L 113 165 Z" fill="#08080a"/>
        <path d="M 80 200 L 100 220 L 220 220 L 250 200 L 250 215 L 220 235 L 100 235 L 80 215 Z" fill="#16161a"/>
        <path d="M 170 50 L 250 90 L 250 140 L 170 95 Z" fill="#fff" opacity="0.06"/>
      </svg>
    );
  }
  if (kind === "tank") {
    return (
      <svg viewBox="0 0 400 300" width="100%" height="100%">
        <path d="M 60 180 C 60 140, 120 110, 200 110 C 280 110, 340 140, 340 180 C 340 200, 320 215, 200 215 C 80 215, 60 200, 60 180 Z"
          fill="#0e0e12" stroke="#2a2a30"/>
        <path d="M 80 165 C 100 145, 150 135, 200 135 C 250 135, 300 145, 320 165 L 310 175 C 290 162, 245 155, 200 155 C 155 155, 110 162, 90 175 Z"
          fill={accent}/>
        <text x="200" y="195" textAnchor="middle" fontFamily="Big Shoulders Display, sans-serif" fontWeight="900" fontStretch="75%" fontSize="28" fill="#fff" letterSpacing="3">ACYLGRAPHIC</text>
      </svg>
    );
  }
  if (kind === "circuit") {
    return (
      <svg viewBox="0 0 300 300" width="100%" height="100%">
        <g stroke={accent} strokeWidth="1.5" fill="none">
          <path d="M 50 80 L 100 80 L 100 60 L 180 60 L 180 100 L 250 100"/>
          <path d="M 50 140 L 130 140 L 130 170 L 210 170 L 210 200 L 250 200"/>
          <path d="M 50 220 L 90 220 L 90 240 L 180 240 L 180 220 L 250 220"/>
        </g>
        <g fill={accent}>
          <circle cx="50" cy="80" r="4"/><circle cx="250" cy="100" r="4"/>
          <circle cx="50" cy="140" r="4"/><circle cx="250" cy="200" r="4"/>
          <circle cx="50" cy="220" r="4"/><circle cx="250" cy="220" r="4"/>
        </g>
        <rect x="100" y="55" width="80" height="10" fill="none" stroke="#fff" strokeOpacity="0.3"/>
      </svg>
    );
  }
  return null;
}

function SocialThumb({ kind, accent = "var(--accent)" }) {
  // Stylised content tiles in lieu of actual social media imagery.
  const variants = {
    reel: (
      <>
        <rect width="400" height="600" fill="#0e0e12"/>
        <g transform="translate(50 90)">
          <path d="M 30 380 C 10 320, 80 300, 70 240 C 110 250, 150 200, 140 160 C 200 190, 230 280, 200 360 Z" fill={accent} opacity="0.85"/>
        </g>
        <rect x="0" y="540" width="400" height="60" fill="url(#scrim)"/>
      </>
    ),
    bike: (
      <>
        <rect width="400" height="600" fill="#16161a"/>
        <g transform="translate(70 260) scale(0.22)">
          <circle cx="280" cy="120" r="118" fill="#08080a" stroke="#2a2a30" strokeWidth="3"/>
          <circle cx="920" cy="120" r="118" fill="#08080a" stroke="#2a2a30" strokeWidth="3"/>
          <path d="M 360 20
                   C 380 -40, 460 -80, 580 -85
                   L 760 -85
                   C 860 -82, 920 -45, 960 20
                   L 950 50
                   L 870 60
                   L 820 45
                   L 760 50
                   L 700 60
                   L 600 60
                   L 500 65
                   L 420 58
                   L 380 45 Z"
            fill="#0e0e12" stroke="#2a2a30" strokeWidth="2"/>
          <path d="M 600 -135 L 740 -130 L 720 -150 L 620 -152 Z" fill={accent}/>
        </g>
      </>
    ),
    decal: (
      <>
        <rect width="400" height="600" fill="#08080a"/>
        <g transform="translate(50 150)">
          <path d="M 30 200 L 270 140 L 270 180 L 30 240 Z" fill={accent}/>
          <path d="M 30 250 L 270 190 L 270 215 L 30 275 Z" fill="#fff" opacity="0.9"/>
          <path d="M 30 285 L 270 225 L 270 250 L 30 310 Z" fill={accent} opacity="0.5"/>
        </g>
      </>
    ),
    helmet: (
      <>
        <rect width="400" height="600" fill="#0e0e12"/>
        <g transform="translate(50 130) scale(1.0)">
          <path d="M 80 130 C 80 80, 130 50, 170 50 C 220 50, 250 90, 250 140 L 250 200 L 220 220 L 100 220 L 80 200 Z"
            fill="#16161a" stroke="#2a2a30" strokeWidth="2"/>
          <path d="M 95 130 L 240 130 L 235 175 L 100 175 Z" fill={accent}/>
          <path d="M 110 135 L 230 135 L 226 165 L 113 165 Z" fill="#08080a"/>
        </g>
      </>
    ),
    portrait: (
      <>
        <rect width="400" height="600" fill="#13131a"/>
        <circle cx="200" cy="220" r="80" fill="#16161a" stroke="#2a2a30" strokeWidth="2"/>
        <ellipse cx="200" cy="480" rx="180" ry="160" fill="#16161a"/>
        <rect x="50" y="60" width="2" height="60" fill={accent}/>
        <rect x="50" y="60" width="60" height="2" fill={accent}/>
      </>
    ),
    flame: (
      <>
        <rect width="400" height="600" fill="#08080a"/>
        <g transform="translate(70 130)">
          <path d="M 60 250 C 40 200, 100 180, 90 140 C 130 150, 150 110, 140 80 C 200 110, 220 190, 200 230 C 240 210, 250 250, 240 280 C 220 300, 80 300, 60 250 Z" fill={accent}/>
        </g>
      </>
    ),
    track: (
      <>
        <rect width="400" height="600" fill="#0e0e12"/>
        <g stroke={accent} fill="none" strokeWidth="2">
          <path d="M 40 480 L 360 480 M 40 460 L 360 460" strokeOpacity="0.6"/>
          <path d="M 100 300 L 300 300" strokeWidth="6"/>
          <path d="M 100 320 L 300 320" strokeWidth="3" strokeOpacity="0.5"/>
        </g>
        <rect x="180" y="280" width="40" height="60" fill="#fff" opacity="0.05"/>
      </>
    ),
  };
  return (
    <svg viewBox="0 0 400 600" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="scrim" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="transparent"/>
          <stop offset="100%" stopColor="#000"/>
        </linearGradient>
      </defs>
      {variants[kind] || variants.bike}
    </svg>
  );
}

Object.assign(window, { BikeSilhouette, StickerArt, SocialThumb });
