/* Six skeumorphic mixtape cassette variants — each is a complete <svg> in 360x240 viewBox */

// Helper: spinning reels (used in most variants)
function Reels({ id, accent, spinning, hubColor = "#0a0a0e", spokeColor = "#3a3a44" }) {
  return (
    <>
      {[105, 255].map((cx, i) => (
        <g key={i} style={{ transformOrigin: `${cx}px 154px`, animation: spinning ? "spin-slow 6s linear infinite" : "none" }}>
          <circle cx={cx} cy="154" r="32" fill={`url(#${id}-tape)`}/>
          <circle cx={cx} cy="154" r="32" fill="none" stroke="#000" strokeWidth="0.4" opacity="0.6"/>
          <circle cx={cx} cy="154" r="28" fill="none" stroke="#000" strokeWidth="0.3" opacity="0.5"/>
          <circle cx={cx} cy="154" r="24" fill="none" stroke="#000" strokeWidth="0.3" opacity="0.45"/>
          <circle cx={cx} cy="154" r="20" fill="none" stroke="#000" strokeWidth="0.3" opacity="0.4"/>
          <circle cx={cx} cy="154" r="14" fill={hubColor} stroke={spokeColor} strokeWidth="0.6"/>
          {[...Array(8)].map((_, j) => {
            const a = (j * 360 / 8) * Math.PI / 180;
            return <line key={j}
              x1={cx + Math.cos(a) * 9} y1={154 + Math.sin(a) * 9}
              x2={cx + Math.cos(a) * 13} y2={154 + Math.sin(a) * 13}
              stroke={spokeColor} strokeWidth="2" strokeLinecap="round"/>;
          })}
          <circle cx={cx} cy="154" r="3" fill={accent}/>
        </g>
      ))}
      <path d="M 105 180 Q 180 196, 255 180" stroke="#1a0e08" strokeWidth="2.4" fill="none"/>
    </>
  );
}

function Screws({ color = "#0a0a0e", line = "#3a3a44" }) {
  return [[16,16],[344,16],[16,224],[344,224]].map(([cx, cy], i) => (
    <g key={i}>
      <circle cx={cx} cy={cy} r="3.4" fill={color} stroke="#444" strokeWidth="0.4"/>
      <line x1={cx-2} y1={cy} x2={cx+2} y2={cy} stroke={line} strokeWidth="0.7"/>
    </g>
  ));
}

function TapeDefs({ id, body, bodyHighlight, bodyShadow, labelTop, labelBot, tapeColor = "#5a3a26", tapeShadow = "#1a0e08" }) {
  return (
    <defs>
      <linearGradient id={`${id}-body`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={bodyHighlight}/>
        <stop offset="0.08" stopColor={body}/>
        <stop offset="0.5" stopColor={bodyShadow}/>
        <stop offset="0.92" stopColor={body}/>
        <stop offset="1" stopColor={bodyHighlight}/>
      </linearGradient>
      <linearGradient id={`${id}-label`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={labelTop}/>
        <stop offset="1" stopColor={labelBot}/>
      </linearGradient>
      <radialGradient id={`${id}-window`} cx="0.5" cy="0.4" r="0.7">
        <stop offset="0" stopColor="#1a1a20"/>
        <stop offset="1" stopColor="#08080c"/>
      </radialGradient>
      <radialGradient id={`${id}-tape`} cx="0.5" cy="0.5" r="0.5">
        <stop offset="0.4" stopColor={tapeColor}/>
        <stop offset="0.7" stopColor={tapeShadow}/>
        <stop offset="1" stopColor="#0a0604"/>
      </radialGradient>
      <linearGradient id={`${id}-shine`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#ffffff" stopOpacity="0.18"/>
        <stop offset="0.5" stopColor="#ffffff" stopOpacity="0"/>
      </linearGradient>
    </defs>
  );
}

// === Variant 1 · Classic 70s "Inside Jams C-60" — warm cream label ===
function CassetteClassic({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#D93616" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv1' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `For ${recipient}`;
  const _meta = meta || "MIXTAPE · SIDE A · 0:54";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <TapeDefs id={id} body="#1a1a20" bodyHighlight="#3a3a44" bodyShadow="#08080c" labelTop="#FAEAC4" labelBot="#E8D2A4"/>
      <rect x="2" y="2" width="356" height="236" rx="14" fill={`url(#${id}-body)`} stroke="#000" strokeWidth="0.6"/>
      <rect x="6" y="4" width="348" height="60" rx="10" fill={`url(#${id}-shine)`}/>
      <g>
        <rect x="20" y="20" width="320" height="76" rx="3" fill={`url(#${id}-label)`} stroke="#b8a378" strokeWidth="0.5"/>
        <rect x="20" y="20" width="320" height="10" fill={accent} opacity="0.85"/>
        <line x1="32" y1="46" x2="328" y2="46" stroke="#b8a378" strokeWidth="0.4"/>
        <line x1="32" y1="64" x2="328" y2="64" stroke="#b8a378" strokeWidth="0.4"/>
        <line x1="32" y1="82" x2="328" y2="82" stroke="#b8a378" strokeWidth="0.4"/>
        <text x="32" y="62" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="18" fill="#1a1a24">{_title}</text>
        <text x="32" y="92" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#1a1a24" letterSpacing="0.05em" opacity="0.75">{_meta}</text>
        <rect x="290" y="76" width="42" height="14" fill="#1a1a24" rx="1"/>
        <text x="311" y="86" fontFamily="'JetBrains Mono', monospace" fontSize="8" fill="#FAEAC4" letterSpacing="0.1em" textAnchor="middle">SIDE A</text>
      </g>
      <rect x="46" y="108" width="268" height="92" rx="5" fill={`url(#${id}-window)`} stroke="#000" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning}/>
      <rect x="172" y="190" width="16" height="6" rx="1" fill="#5a3a26"/>
      <Screws/>
      <text x="180" y="226" fontFamily="'JetBrains Mono', monospace" fontSize="7" fill="#FAEAC4" opacity="0.5" letterSpacing="0.18em" textAnchor="middle">INSIDEJAMS C-60</text>
    </svg>
  );
}

// === Variant 2 · Translucent Type II — clear shell, neon green tape ===
function CassetteTranslucent({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#D93616" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv2' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `For ${recipient}`;
  const _meta = meta || "TYPE II · CrO2 · HIGH BIAS";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <defs>
        <linearGradient id={`${id}-body`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#d4d8c8" stopOpacity="0.9"/>
          <stop offset="0.5" stopColor="#7a8268" stopOpacity="0.6"/>
          <stop offset="1" stopColor="#a8b098" stopOpacity="0.85"/>
        </linearGradient>
        <radialGradient id={`${id}-tape`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0.4" stopColor="#7FFF66"/>
          <stop offset="0.7" stopColor="#3CB022"/>
          <stop offset="1" stopColor="#1A4F0E"/>
        </radialGradient>
        <radialGradient id={`${id}-window`} cx="0.5" cy="0.4" r="0.7">
          <stop offset="0" stopColor="#2a3028"/>
          <stop offset="1" stopColor="#0a100a"/>
        </radialGradient>
        <linearGradient id={`${id}-shine`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffffff" stopOpacity="0.45"/>
          <stop offset="0.5" stopColor="#ffffff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="356" height="236" rx="14" fill={`url(#${id}-body)`} stroke="#5a6248" strokeWidth="0.8"/>
      <rect x="6" y="4" width="348" height="60" rx="10" fill={`url(#${id}-shine)`}/>
      {/* Internal mechanism visible through translucent shell */}
      <rect x="32" y="76" width="296" height="124" rx="3" fill="#1a2018" opacity="0.18" stroke="#3a4030" strokeWidth="0.4" strokeDasharray="2,2"/>
      {/* Label · minimal printed-on stripe */}
      <g>
        <rect x="40" y="24" width="280" height="48" rx="2" fill="#fff" opacity="0.7" stroke="#5a6248" strokeWidth="0.5"/>
        <rect x="40" y="24" width="280" height="6" fill={accent}/>
        <text x="180" y="50" fontFamily="'JetBrains Mono', monospace" fontSize="14" fill="#1a1a24" letterSpacing="0.05em" textAnchor="middle" fontWeight="700">{_title.toUpperCase()}</text>
        <text x="180" y="64" fontFamily="'JetBrains Mono', monospace" fontSize="8" fill="#3a4030" letterSpacing="0.15em" textAnchor="middle">{_meta}</text>
      </g>
      <rect x="46" y="108" width="268" height="92" rx="5" fill={`url(#${id}-window)`} stroke="#3a4030" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning} hubColor="#1a2018" spokeColor="#5a6248"/>
      <rect x="172" y="190" width="16" height="6" rx="1" fill="#3a4030"/>
      <Screws color="#1a2018" line="#5a6248"/>
      <text x="180" y="226" fontFamily="'JetBrains Mono', monospace" fontSize="7" fill="#1a2018" opacity="0.65" letterSpacing="0.18em" textAnchor="middle">CHROME · 90 MIN · HIGH BIAS</text>
    </svg>
  );
}

// === Variant 3 · Hand-drawn Sharpie — homemade mixtape ===
function CassetteHandmade({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#D93616" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv3' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `${recipient}'s Jam`;
  const _meta = meta || "HOMEMADE · DO NOT BEND";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <TapeDefs id={id} body="#FAEAC4" bodyHighlight="#FFF4D8" bodyShadow="#D8C088" labelTop="#fff" labelBot="#F5F0E0"/>
      <rect x="2" y="2" width="356" height="236" rx="14" fill={`url(#${id}-body)`} stroke="#8a7448" strokeWidth="0.6"/>
      <rect x="6" y="4" width="348" height="60" rx="10" fill={`url(#${id}-shine)`}/>
      <g>
        {/* Sticker with rotation, looks hand-applied */}
        <g transform="rotate(-1.5 180 58)">
          <rect x="20" y="20" width="320" height="76" rx="2" fill="#fff" stroke="#aaa" strokeWidth="0.4"/>
          {/* Hand-drawn underline scribbles */}
          <path d="M 32 70 Q 90 66, 150 70 T 280 68" stroke={accent} strokeWidth="2.2" fill="none" strokeLinecap="round" opacity="0.7"/>
          <path d="M 32 78 Q 100 80, 200 76" stroke="#1a1a24" strokeWidth="0.8" fill="none" strokeLinecap="round" opacity="0.4"/>
          <text x="32" y="58" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="22" fill="#1a1a24">{_title}</text>
          <text x="32" y="92" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="11" fill={accent} letterSpacing="0.02em">{_meta}</text>
          {/* Doodle hearts */}
          <path d="M 304 36 Q 300 32 296 36 Q 292 32 288 36 Q 288 42 296 48 Q 304 42 304 36 Z" fill={accent} opacity="0.85"/>
          <path d="M 322 50 L 326 46 L 326 54 Z" fill="#1a1a24" opacity="0.5"/>
        </g>
      </g>
      <rect x="46" y="108" width="268" height="92" rx="5" fill={`url(#${id}-window)`} stroke="#000" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning}/>
      <rect x="172" y="190" width="16" height="6" rx="1" fill="#5a3a26"/>
      <Screws/>
      <text x="180" y="226" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="9" fill="#8a7448" opacity="0.7" textAnchor="middle">made with love · play loud</text>
    </svg>
  );
}

// === Variant 4 · Black Memorex — minimal, rectangular, club aesthetic ===
function CassetteMemorex({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#D93616" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv4' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `For ${recipient}`;
  const _meta = meta || "DJ MIX · 90 MIN · STEREO";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <TapeDefs id={id} body="#0a0a0e" bodyHighlight="#2a2a30" bodyShadow="#000" labelTop="#1a1a20" labelBot="#0a0a0e"/>
      <rect x="2" y="2" width="356" height="236" rx="6" fill={`url(#${id}-body)`} stroke="#2a2a30" strokeWidth="0.8"/>
      {/* Sharp top stripe in accent — branding bar */}
      <rect x="2" y="2" width="356" height="8" fill={accent}/>
      <rect x="2" y="14" width="356" height="2" fill="#fff" opacity="0.4"/>

      {/* Embossed text label · no paper, just printed on shell */}
      <g>
        <text x="20" y="50" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={accent} letterSpacing="0.25em" fontWeight="700">INSIDEJAMS · CR-90</text>
        <text x="20" y="80" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="22" fill="#FAEAC4">{_title}</text>
        <text x="20" y="98" fontFamily="'JetBrains Mono', monospace" fontSize="8" fill="#FAEAC4" opacity="0.6" letterSpacing="0.15em">{_meta}</text>
        {/* Little A-side indicator */}
        <circle cx="330" cy="50" r="9" fill="none" stroke={accent} strokeWidth="1.5"/>
        <text x="330" y="54" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill={accent} textAnchor="middle" fontWeight="700">A</text>
      </g>

      {/* Window with metallic frame */}
      <rect x="42" y="106" width="276" height="96" rx="3" fill="none" stroke="#666" strokeWidth="1.6"/>
      <rect x="46" y="110" width="268" height="88" rx="2" fill={`url(#${id}-window)`} stroke="#000" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning} hubColor="#1a1a20" spokeColor="#666"/>
      <rect x="172" y="188" width="16" height="6" rx="1" fill="#3a3a44"/>
      <Screws color="#000" line="#666"/>
    </svg>
  );
}

// === Variant 5 · Pastel Vaporwave — chrome/lavender with neon stickers ===
function CassetteVapor({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#FF4FA8" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv5' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `${recipient}♡`;
  const _meta = meta || "DREAM POP · SIDE A · 0:54";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <defs>
        <linearGradient id={`${id}-body`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#FFD9F5"/>
          <stop offset="0.4" stopColor="#C5B8FF"/>
          <stop offset="1" stopColor="#9FE5FF"/>
        </linearGradient>
        <linearGradient id={`${id}-label`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#FF4FA8"/>
          <stop offset="0.5" stopColor="#9D4FFF"/>
          <stop offset="1" stopColor="#4FC4FF"/>
        </linearGradient>
        <radialGradient id={`${id}-tape`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0.4" stopColor="#FF6FBE"/>
          <stop offset="0.7" stopColor="#9D4FFF"/>
          <stop offset="1" stopColor="#3A1A5E"/>
        </radialGradient>
        <radialGradient id={`${id}-window`} cx="0.5" cy="0.4" r="0.7">
          <stop offset="0" stopColor="#2a1a3a"/>
          <stop offset="1" stopColor="#0a0418"/>
        </radialGradient>
        <linearGradient id={`${id}-shine`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffffff" stopOpacity="0.5"/>
          <stop offset="0.5" stopColor="#ffffff" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="356" height="236" rx="14" fill={`url(#${id}-body)`} stroke="#9d4fff" strokeWidth="0.8"/>
      <rect x="6" y="4" width="348" height="60" rx="10" fill={`url(#${id}-shine)`}/>
      <g>
        <rect x="20" y="20" width="320" height="76" rx="3" fill="#fff" opacity="0.85" stroke="#9d4fff" strokeWidth="0.5"/>
        <rect x="20" y="20" width="320" height="14" fill={`url(#${id}-label)`}/>
        <text x="180" y="56" fontFamily="'Caprasimo', serif" fontStyle="italic" fontSize="22" fill="#9d4fff" textAnchor="middle">{_title}</text>
        <text x="180" y="76" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#1a1a24" opacity="0.7" letterSpacing="0.1em" textAnchor="middle">{_meta}</text>
        {/* Star stickers */}
        <text x="34" y="92" fontSize="13" fill={accent}>★</text>
        <text x="320" y="92" fontSize="13" fill={accent}>★</text>
      </g>
      <rect x="46" y="108" width="268" height="92" rx="5" fill={`url(#${id}-window)`} stroke="#000" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning} hubColor="#1a0e2a" spokeColor="#9d4fff"/>
      <rect x="172" y="190" width="16" height="6" rx="1" fill="#9d4fff"/>
      <Screws color="#3a1a5e" line="#9d4fff"/>
      <text x="180" y="226" fontFamily="'JetBrains Mono', monospace" fontSize="7" fill="#3a1a5e" opacity="0.7" letterSpacing="0.18em" textAnchor="middle">★ DREAM TAPE 90 ★</text>
    </svg>
  );
}

// === Variant 6 · Industrial / Punk — silver shell, strike-through type, distress ===
function CassettePunk({ w = 360, recipient = "Maya", title, meta, spinning = true, accent = "#FFC400" }) {
  const h = w * (240 / 360);
  const id = React.useMemo(() => 'cv6' + Math.floor(Math.random() * 1e6), []);
  const _title = title || `${recipient}.`;
  const _meta = meta || "DEMO TAPE · NO RULES";
  return (
    <svg width={w} height={h} viewBox="0 0 360 240" style={{ display: "block", filter: "drop-shadow(0 16px 28px rgba(0,0,0,0.28))" }}>
      <TapeDefs id={id} body="#9aa0a8" bodyHighlight="#d4d8e0" bodyShadow="#5a6068" labelTop="#fff" labelBot="#e8e8e8"/>
      <rect x="2" y="2" width="356" height="236" rx="4" fill={`url(#${id}-body)`} stroke="#3a3a44" strokeWidth="0.8"/>
      <rect x="6" y="4" width="348" height="60" rx="2" fill={`url(#${id}-shine)`}/>
      {/* Photocopied label · skewed, distressed */}
      <g transform="rotate(0.8 180 58)">
        <rect x="20" y="20" width="320" height="76" fill="#f0f0e8" stroke="#1a1a24" strokeWidth="1.5"/>
        {/* Distress dots */}
        <rect x="22" y="22" width="3" height="3" fill="#1a1a24"/>
        <rect x="328" y="92" width="2" height="2" fill="#1a1a24"/>
        <rect x="200" y="24" width="4" height="2" fill="#1a1a24" opacity="0.7"/>
        {/* Strike-through marker scrawls */}
        <line x1="28" y1="40" x2="100" y2="42" stroke="#1a1a24" strokeWidth="3"/>
        <text x="32" y="62" fontFamily="'JetBrains Mono', monospace" fontSize="20" fill="#1a1a24" fontWeight="700" letterSpacing="-0.02em">{_title.toUpperCase()}</text>
        <text x="32" y="84" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#1a1a24" letterSpacing="0.1em">// {_meta}</text>
        {/* Yellow highlighter bar */}
        <rect x="200" y="74" width="120" height="14" fill={accent} opacity="0.7"/>
        <text x="206" y="85" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#1a1a24" fontWeight="700">DO NOT COPY</text>
      </g>
      <rect x="46" y="108" width="268" height="92" rx="2" fill={`url(#${id}-window)`} stroke="#000" strokeWidth="0.5"/>
      <Reels id={id} accent={accent} spinning={spinning} hubColor="#0a0a0e" spokeColor="#666"/>
      <rect x="172" y="190" width="16" height="6" fill="#3a3a44"/>
      <Screws color="#1a1a24" line="#666"/>
      <text x="180" y="226" fontFamily="'JetBrains Mono', monospace" fontSize="7" fill="#1a1a24" opacity="0.65" letterSpacing="0.2em" textAnchor="middle">★ INSIDEJAMS REC. ★ EST 2026 ★</text>
    </svg>
  );
}

const CASSETTE_VARIANTS = {
  classic:     { name: "Classic 70s",   subtitle: "Warm cream label, burnt orange stripe", component: CassetteClassic },
  translucent: { name: "Type II Chrome", subtitle: "Translucent shell, neon green tape", component: CassetteTranslucent },
  handmade:    { name: "Handmade",      subtitle: "Sharpie title, doodled hearts", component: CassetteHandmade },
  memorex:     { name: "Black Edition", subtitle: "DJ shell, embossed type", component: CassetteMemorex },
  vapor:       { name: "Dream Pop",     subtitle: "Pastel vaporwave with stickers", component: CassetteVapor },
  punk:        { name: "Demo Tape",     subtitle: "Photocopied, distressed, punk", component: CassettePunk },
};

function CassetteByVariant({ variant = "classic", ...rest }) {
  const C = CASSETTE_VARIANTS[variant]?.component || CassetteClassic;
  return <C {...rest}/>;
}

Object.assign(window, {
  CassetteClassic, CassetteTranslucent, CassetteHandmade,
  CassetteMemorex, CassetteVapor, CassettePunk,
  CASSETTE_VARIANTS, CassetteByVariant,
});