// Beautiful SVG t-shirt and bag mockups with the 70th anniversary print
const { useMemo } = React;

function AnniversaryMark({ accent, scale = 1 }) {
  // Circular "70th ANNIVERSARY" emblem — elegant, minimal
  return (
    <g transform={`translate(0,0) scale(${scale})`}>
      <circle cx="0" cy="0" r="34" fill="none" stroke={accent} strokeWidth="1.2" opacity="0.5" />
      <circle cx="0" cy="0" r="28" fill="none" stroke={accent} strokeWidth="0.6" opacity="0.5" />
      <text x="0" y="4" textAnchor="middle" fontFamily="Fraunces, serif" fontWeight="700" fontSize="24" fill={accent} letterSpacing="-1">70</text>
      <text x="0" y="18" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="5" fill={accent} letterSpacing="2">ANNIVERSARY</text>
      <text x="0" y="-18" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="4" fill={accent} letterSpacing="2" opacity="0.7">TODOROKI · EST 1955</text>
      {/* Stars */}
      <g fill={accent} opacity="0.8">
        <circle cx="-20" cy="0" r="1" />
        <circle cx="20" cy="0" r="1" />
      </g>
    </g>
  );
}

function BDesignMark({ accent }) {
  return (
    <g>
      <text x="0" y="-8" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontWeight="600" fontSize="28" fill={accent}>Anniversary</text>
      <text x="0" y="22" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="800" fontSize="14" fill={accent} letterSpacing="8">1955 — 2025</text>
      <line x1="-80" y1="34" x2="80" y2="34" stroke={accent} strokeWidth="1" opacity="0.5" />
      <text x="0" y="50" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="6" fill={accent} letterSpacing="3" opacity="0.7">TODOROKI ELEMENTARY · 70TH</text>
    </g>
  );
}

function Tshirt({ product, size = 320 }) {
  const { color, accent, category } = product;
  // Subtle drop shadow
  const isDark = ['#1A1A1E', '#3F3F46'].includes(color);
  const stitch = isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.08)';
  const shadowColor = isDark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.06)';

  return (
    <svg viewBox="0 0 400 400" width={size} height={size} style={{ display: 'block' }}>
      <defs>
        <filter id={`shadow-${product.id}`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
          <feOffset dx="0" dy="4" result="offsetblur" />
          <feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer>
          <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <linearGradient id={`fabric-${product.id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="1" />
          <stop offset="100%" stopColor={color} stopOpacity="0.88" />
        </linearGradient>
      </defs>

      {/* T-shirt silhouette */}
      <g filter={`url(#shadow-${product.id})`}>
        <path
          d="M 120 90 
             L 90 110 
             L 60 150 
             L 85 180 
             L 115 165 
             L 115 340 
             Q 115 355 130 355 
             L 270 355 
             Q 285 355 285 340 
             L 285 165 
             L 315 180 
             L 340 150 
             L 310 110 
             L 280 90 
             Q 265 88 255 95
             Q 245 115 200 115
             Q 155 115 145 95
             Q 135 88 120 90 Z"
          fill={`url(#fabric-${product.id})`}
          stroke={stitch}
          strokeWidth="1"
        />
        {/* Neckline */}
        <path
          d="M 150 95 Q 200 125 250 95"
          fill="none"
          stroke={stitch}
          strokeWidth="1.5"
        />
        {/* Sleeve stitches */}
        <path d="M 90 110 L 115 165" fill="none" stroke={stitch} strokeWidth="0.5" opacity="0.6" />
        <path d="M 310 110 L 285 165" fill="none" stroke={stitch} strokeWidth="0.5" opacity="0.6" />
      </g>

      {/* Print */}
      <g transform="translate(200, 220)">
        {category === 'tshirt-a' ? (
          <AnniversaryMark accent={accent} scale={1.4} />
        ) : (
          <BDesignMark accent={accent} />
        )}
      </g>
    </svg>
  );
}

function Bag({ product, size = 320 }) {
  const { color, accent, id } = product;
  const isLesson = id === 'bag9';

  return (
    <svg viewBox="0 0 400 400" width={size} height={size} style={{ display: 'block' }}>
      <defs>
        <filter id={`bshadow-${product.id}`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
          <feOffset dx="0" dy="4" result="offsetblur" />
          <feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer>
          <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>

      {isLesson ? (
        // Lesson bag (rectangular, horizontal)
        <g filter={`url(#bshadow-${product.id})`}>
          {/* Handles */}
          <path d="M 140 140 Q 140 80 180 80 L 220 80 Q 260 80 260 140" 
                fill="none" stroke={accent} strokeWidth="6" opacity="0.7" strokeLinecap="round"/>
          {/* Bag body */}
          <rect x="90" y="140" width="220" height="170" rx="4" fill={color} stroke="rgba(0,0,0,0.08)" strokeWidth="1"/>
          {/* Print */}
          <g transform="translate(200, 225)">
            <text x="0" y="0" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontWeight="600" fontSize="22" fill={accent}>Anniversary</text>
            <text x="0" y="24" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="800" fontSize="10" fill={accent} letterSpacing="6">70TH · 1955</text>
          </g>
        </g>
      ) : (
        // Eco bag (tote, narrower)
        <g filter={`url(#bshadow-${product.id})`}>
          {/* Handles */}
          <path d="M 150 130 Q 150 70 185 70 L 215 70 Q 250 70 250 130" 
                fill="none" stroke={accent} strokeWidth="5" opacity="0.7" strokeLinecap="round"/>
          {/* Bag body - slightly trapezoidal */}
          <path d="M 120 130 L 280 130 L 290 330 L 110 330 Z" 
                fill={color} stroke="rgba(0,0,0,0.08)" strokeWidth="1"/>
          {/* Print */}
          <g transform="translate(200, 230)">
            <circle cx="0" cy="0" r="32" fill="none" stroke={accent} strokeWidth="1" opacity="0.5" />
            <text x="0" y="2" textAnchor="middle" fontFamily="Fraunces, serif" fontWeight="700" fontSize="22" fill={accent}>70</text>
            <text x="0" y="14" textAnchor="middle" fontFamily="DM Sans, sans-serif" fontWeight="500" fontSize="5" fill={accent} letterSpacing="2">ANNIV</text>
          </g>
        </g>
      )}
    </svg>
  );
}

// Registry of real product images (drop files into assets/ and map by product id)
const PRODUCT_IMAGES = {
  a1: 'assets/a1_white.png',
  a2: 'assets/a2_lightblue.png',
  a3: 'assets/a3_lightpink.png',
  a4: 'assets/a4_lightgray.png',
  a5: 'assets/a5_charcoal.png',
  b6: 'assets/b6_mint_x.png',
  b7: 'assets/b7_vanilla_x.png',
  b8: 'assets/b8_black.png',
  bag9: 'assets/bag9_lesson.png',
  bag10: 'assets/bag10_eco.png',
};

// Products where the image is wide/horizontal and has white background
// (needs smaller scale + soft blend)
const WIDE_WHITE_IMAGES = new Set(['b6', 'b7']);

function PhotoVisual({ src, size, fill }) {
  const imgStyle = {
    width: '100%',
    maxWidth: '100%',
    height: 'auto',
    maxHeight: '100%',
    objectFit: 'contain',
    display: 'block',
  };
  const container = {
    position: 'relative',
    width: fill ? '100%' : size,
    height: fill ? '100%' : size,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };
  return (
    <div style={container}>
      <img src={src} alt="" style={imgStyle} />
    </div>
  );
}

function ProductVisual({ product, size = 320, colorKey, fill }) {
  const photoSrc = PRODUCT_IMAGES[product.id];
  if (photoSrc) {
    return <PhotoVisual src={photoSrc} size={size} fill={fill} />;
  }
  if (product.category === 'bag') {
    // For eco bag with color variants
    if (product.id === 'bag10' && colorKey && product.colors) {
      const clone = { ...product, color: product.colors[colorKey] };
      return <Bag product={clone} size={size} />;
    }
    return <Bag product={product} size={size} />;
  }
  return <Tshirt product={product} size={size} />;
}

window.ProductVisual = ProductVisual;
window.Tshirt = Tshirt;
window.Bag = Bag;