// Photorealistic flat-lay shirt SVGs with fabric texture + lighting
// Each shirt exposes:
//   render(): JSX of the shirt
//   printArea: { x, y, w, h } in % of the SVG viewBox (0..1)
//   blendMode: how the logo integrates with fabric shading
//   light/dark: hint for default text/UI

const SHIRT_VB = { w: 600, h: 600 };

// Reusable fabric noise filter
function FabricDefs({ id }) {
  return (
    <defs>
      <filter id={`fabric-${id}`}>
        <feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" seed={id.length} />
        <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .25 0" />
        <feComposite in2="SourceGraphic" operator="in" />
      </filter>
      <filter id={`weave-${id}`}>
        <feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="2" seed={id.length + 7} />
        <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .15 0" />
        <feComposite in2="SourceGraphic" operator="in" />
      </filter>
      <linearGradient id={`light-${id}`} x1="50%" y1="0%" x2="50%" y2="100%">
        <stop offset="0%" stopColor="#fff" stopOpacity=".25" />
        <stop offset="50%" stopColor="#fff" stopOpacity=".05" />
        <stop offset="100%" stopColor="#000" stopOpacity=".15" />
      </linearGradient>
      <radialGradient id={`vignette-${id}`} cx="50%" cy="50%" r="65%">
        <stop offset="60%" stopColor="#000" stopOpacity="0" />
        <stop offset="100%" stopColor="#000" stopOpacity=".4" />
      </radialGradient>
    </defs>
  );
}

// Shared shirt body path (front, with neckline + sleeves)
const SHIRT_PATH = `
  M 130 90
  Q 160 70 200 60
  Q 220 80 240 88
  Q 260 96 300 96
  Q 340 96 360 88
  Q 380 80 400 60
  Q 440 70 470 90
  L 540 130
  Q 555 145 548 165
  L 510 230
  Q 502 245 488 240
  L 460 222
  L 460 530
  Q 460 555 435 558
  L 165 558
  Q 140 555 140 530
  L 140 222
  L 112 240
  Q 98 245 90 230
  L 52 165
  Q 45 145 60 130
  Z
`;

const NECKLINE = `
  M 240 88
  Q 260 110 300 110
  Q 340 110 360 88
`;

function ShirtFlatLay({ id, base, shadow, highlight, stitch, label, dark, printAreaTint }) {
  return (
    <svg viewBox={`0 0 ${SHIRT_VB.w} ${SHIRT_VB.h}`} xmlns="http://www.w3.org/2000/svg"
      style={{ width: '100%', height: '100%', display: 'block' }}>
      <FabricDefs id={id} />

      {/* drop shadow under the shirt */}
      <ellipse cx="300" cy="565" rx="200" ry="14" fill="#000" opacity=".18" />

      {/* main shirt body */}
      <path d={SHIRT_PATH} fill={base} />

      {/* fabric weave noise (subtle) */}
      <path d={SHIRT_PATH} fill={base} filter={`url(#weave-${id})`} opacity=".7" />

      {/* lighting gradient */}
      <path d={SHIRT_PATH} fill={`url(#light-${id})`} />

      {/* vignette around edges */}
      <path d={SHIRT_PATH} fill={`url(#vignette-${id})`} />

      {/* fold creases - subtle */}
      <path d="M 200 200 Q 240 320 230 540" stroke={shadow} strokeWidth="1" fill="none" opacity=".35" />
      <path d="M 400 200 Q 360 320 370 540" stroke={shadow} strokeWidth="1" fill="none" opacity=".35" />
      <path d="M 300 130 Q 305 280 300 540" stroke={shadow} strokeWidth="1" fill="none" opacity=".15" />

      {/* sleeve shadow under arm */}
      <path d="M 140 222 L 130 240 L 145 230 Z" fill={shadow} opacity=".35" />
      <path d="M 460 222 L 470 240 L 455 230 Z" fill={shadow} opacity=".35" />

      {/* shoulder shadow */}
      <path d="M 200 60 Q 230 86 250 100 L 240 110 Q 220 96 195 78 Z" fill={shadow} opacity=".25" />
      <path d="M 400 60 Q 370 86 350 100 L 360 110 Q 380 96 405 78 Z" fill={shadow} opacity=".25" />

      {/* neckline ribbing */}
      <path d={NECKLINE} stroke={highlight} strokeWidth="3" fill="none" />
      <path d={NECKLINE} stroke={shadow} strokeWidth="1.2" fill="none" transform="translate(0,4)" opacity=".7" />

      {/* hem stitches */}
      <path d="M 165 552 L 435 552" stroke={stitch} strokeWidth=".7" strokeDasharray="3 2" opacity=".55" />
      {/* sleeve hem stitches */}
      <path d="M 70 178 L 110 198" stroke={stitch} strokeWidth=".7" strokeDasharray="2 2" opacity=".5" />
      <path d="M 530 178 L 490 198" stroke={stitch} strokeWidth=".7" strokeDasharray="2 2" opacity=".5" />

      {/* care tag peek */}
      <rect x="285" y="118" width="30" height="6" fill={highlight} opacity=".45" />

      {/* fabric texture grain over everything */}
      <path d={SHIRT_PATH} fill={base} filter={`url(#fabric-${id})`} opacity=".5" />
    </svg>
  );
}

// Print area is roughly the front-chest of every shirt: same coords reused.
const CHEST_PRINT = { x: 0.34, y: 0.28, w: 0.32, h: 0.30 };

const SHIRTS = [
  {
    id: 'photo-white',
    label: 'White tee',
    swatch: '#ffffff',
    photoSrc: A('assets/shirt-photo-white.png'),
    printArea: { x: 0.36, y: 0.30, w: 0.28, h: 0.30 },
    blendMode: 'multiply',
    dark: false,
    bg: '#F1ECE0',
  },
  {
    id: 'photo-black',
    label: 'Black tee',
    swatch: '#1a1a1a',
    photoSrc: A('assets/shirt-photo-black.png'),
    printArea: { x: 0.36, y: 0.30, w: 0.28, h: 0.30 },
    blendMode: 'screen',
    dark: true,
    bg: '#F1ECE0',
  },
  {
    id: 'photo-sand',
    label: 'Sand tee',
    swatch: '#A89472',
    photoSrc: A('assets/shirt-photo-sand.png'),
    printArea: { x: 0.36, y: 0.30, w: 0.28, h: 0.30 },
    blendMode: 'multiply',
    dark: false,
    bg: '#F1ECE0',
  },
];

window.ShirtFlatLay = ShirtFlatLay;
window.SHIRTS = SHIRTS;