// samples.jsx
// Sample photos rendered as SVGs so we can show damaged/restored pairs
// without external image files. Two samples: a 1940s B&W portrait, and a
// 1970s faded color photo. Each exposes a "before" (damaged) and
// "after" (restored) SVG data URI.

// Base portrait render — returns SVG string. style: 'bw' or 'color70s'.
// mode: 'before' | 'after' | 'thumb'
function renderPortrait(style, mode) {
  const w = 800, h = 1000;

  // Colour palettes
  const isBW = style === 'bw';

  // "After" uses clean colors; "before" uses degraded versions.
  const palette = isBW
    ? {
        bg:    mode === 'before' ? '#a3957d' : '#d9cfbd',
        bgMid: mode === 'before' ? '#7a6d55' : '#b3a68b',
        skin:  mode === 'before' ? '#9a8c75' : '#d8c7ae',
        skinShade: mode === 'before' ? '#6f624b' : '#a68f71',
        hair:  mode === 'before' ? '#2c241a' : '#2a1f15',
        cloth: mode === 'before' ? '#3a3229' : '#3b3025',
        accent: mode === 'before' ? '#5a4c38' : '#efe1c6',
      }
    : {
        // 70s color photo: "before" is red-shifted, faded, low-contrast
        bg:    mode === 'before' ? '#c59c6b' : '#a5b5a2',
        bgMid: mode === 'before' ? '#9c6d3f' : '#62846a',
        skin:  mode === 'before' ? '#d49a74' : '#e4b999',
        skinShade: mode === 'before' ? '#a46a45' : '#b8875e',
        hair:  mode === 'before' ? '#6a3a20' : '#3e2212',
        cloth: mode === 'before' ? '#94483c' : '#be3b2c',
        accent: mode === 'before' ? '#e8c89a' : '#f3e5ca',
      };

  // Damage layer — scratches, tears, dust, glare — only for "before"
  const damage = mode === 'before'
    ? `
      <!-- yellowing overlay -->
      <rect width="${w}" height="${h}" fill="#d9b97a" opacity="0.18"/>
      <rect width="${w}" height="${h}" fill="#4a3820" opacity="0.12"/>
      <!-- corner fading (vignette) -->
      <radialGradient id="vig" cx="50%" cy="55%" r="75%">
        <stop offset="0%" stop-color="#000" stop-opacity="0"/>
        <stop offset="75%" stop-color="#000" stop-opacity="0"/>
        <stop offset="100%" stop-color="#2a1500" stop-opacity="0.55"/>
      </radialGradient>
      <rect width="${w}" height="${h}" fill="url(#vig)"/>
      <!-- scratches -->
      <g stroke="#fff" stroke-opacity="0.55" stroke-linecap="round" fill="none">
        <path d="M 120 40 L 180 920" stroke-width="1.2"/>
        <path d="M 520 80 L 560 980" stroke-width="0.9"/>
        <path d="M 300 300 L 450 700" stroke-width="0.7"/>
        <path d="M 680 120 L 700 880" stroke-width="1"/>
        <path d="M 50 600 L 780 620" stroke-width="0.6"/>
      </g>
      <g stroke="#1a1208" stroke-opacity="0.45" stroke-linecap="round" fill="none">
        <path d="M 240 150 L 260 840" stroke-width="0.6"/>
        <path d="M 420 50 L 400 950" stroke-width="0.5"/>
        <path d="M 100 200 Q 200 400 90 750" stroke-width="0.4"/>
      </g>
      <!-- big tear across top -->
      <path d="M 0 80 L 160 110 L 200 70 L 340 130 L 500 90 L 620 120 L 800 100"
            fill="none" stroke="#f8ecd0" stroke-width="3" stroke-linecap="round"/>
      <path d="M 0 80 L 160 110 L 200 70 L 340 130 L 500 90 L 620 120 L 800 100"
            fill="none" stroke="#2a1500" stroke-width="0.8" stroke-linecap="round"
            stroke-opacity="0.6"/>
      <!-- dust spots -->
      <g fill="#f4e5c4" opacity="0.7">
        <circle cx="160" cy="280" r="3"/>
        <circle cx="580" cy="420" r="2.2"/>
        <circle cx="710" cy="200" r="2.5"/>
        <circle cx="220" cy="540" r="3.5"/>
        <circle cx="450" cy="820" r="2"/>
        <circle cx="350" cy="460" r="1.8"/>
        <circle cx="620" cy="750" r="2.2"/>
        <circle cx="90" cy="420" r="2"/>
        <circle cx="760" cy="560" r="3"/>
      </g>
      <g fill="#2a1500" opacity="0.55">
        <circle cx="200" cy="380" r="1.5"/>
        <circle cx="500" cy="220" r="2"/>
        <circle cx="380" cy="620" r="1.8"/>
        <circle cx="640" cy="340" r="1.6"/>
        <circle cx="150" cy="700" r="2"/>
        <circle cx="730" cy="480" r="1.8"/>
      </g>
      <!-- missing corner chip -->
      <path d="M 720 0 L 800 0 L 800 70 Z" fill="#e8d9bd"/>
      <path d="M 720 0 L 800 0 L 800 70 Z" fill="none" stroke="#8c6b3a" stroke-width="1.5"/>
      <!-- glare band upper-right -->
      <path d="M 500 0 L 800 0 L 800 280 L 620 180 Z" fill="#fff" opacity="0.22"/>
      <!-- blur will be applied at facial level below -->
    `
    : '';

  // Facial blur only on "before"
  const blurFilter = mode === 'before'
    ? `<filter id="soften"><feGaussianBlur stdDeviation="${style === 'bw' ? 1.4 : 1.2}"/></filter>`
    : '';
  const blurAttr = mode === 'before' ? ` filter="url(#soften)"` : '';

  // Slightly desaturate colour-photo face on "before" (it's already in palette)
  // The "after" face gets crisp detail lines.
  const detailLines = mode === 'after'
    ? `
      <!-- eyelashes hint -->
      <path d="M 340 450 Q 375 445 410 450" stroke="#2a1f15" stroke-width="1.4" fill="none" opacity="0.55"/>
      <path d="M 470 450 Q 505 445 540 450" stroke="#2a1f15" stroke-width="1.4" fill="none" opacity="0.55"/>
      <!-- hair strands -->
      <path d="M 280 260 Q 340 240 400 250" stroke="#${isBW ? '3a2c1c' : '5a3218'}" stroke-width="1" fill="none" opacity="0.5"/>
      <path d="M 500 255 Q 560 248 620 265" stroke="#${isBW ? '3a2c1c' : '5a3218'}" stroke-width="1" fill="none" opacity="0.5"/>
      <!-- lip line -->
      <path d="M 390 610 Q 440 618 490 610" stroke="#${isBW ? '3a2820' : '6e2a18'}" stroke-width="1.2" fill="none" opacity="0.6"/>
    `
    : '';

  return `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid slice">
  <defs>
    <linearGradient id="bg-${style}-${mode}" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="${palette.bg}"/>
      <stop offset="100%" stop-color="${palette.bgMid}"/>
    </linearGradient>
    ${blurFilter}
    <radialGradient id="cheek-${style}-${mode}" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="${isBW ? '#d8c7ae' : '#f3b89b'}" stop-opacity="${mode === 'after' ? 0.4 : 0.15}"/>
      <stop offset="100%" stop-color="${isBW ? '#d8c7ae' : '#f3b89b'}" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <rect width="${w}" height="${h}" fill="url(#bg-${style}-${mode})"/>

  <!-- subject, grouped so we can blur all together -->
  <g${blurAttr}>
    <!-- shoulders / clothing -->
    <path d="M 150 1000 Q 150 780 280 720 Q 400 760 520 720 Q 650 780 650 1000 Z" fill="${palette.cloth}"/>
    <!-- clothing detail -->
    <path d="M 330 780 Q 400 800 470 780 L 470 1000 L 330 1000 Z" fill="${palette.cloth}" opacity="0.7"/>
    <!-- collar highlight -->
    <path d="M 340 770 L 400 820 L 460 770" fill="none" stroke="${palette.accent}" stroke-width="3" stroke-opacity="0.8"/>

    <!-- neck -->
    <path d="M 350 650 L 350 760 L 450 760 L 450 650 Z" fill="${palette.skinShade}"/>

    <!-- head -->
    <ellipse cx="400" cy="470" rx="175" ry="215" fill="${palette.skin}"/>
    <!-- face shadow side -->
    <path d="M 400 260 Q 575 300 560 500 Q 545 650 400 680 Z" fill="${palette.skinShade}" opacity="0.45"/>
    <!-- cheeks -->
    <ellipse cx="320" cy="530" rx="55" ry="34" fill="url(#cheek-${style}-${mode})"/>
    <ellipse cx="490" cy="530" rx="55" ry="34" fill="url(#cheek-${style}-${mode})"/>

    <!-- hair -->
    <path d="M 220 400 Q 200 230 400 220 Q 600 230 580 420 Q 580 320 500 290 Q 400 270 300 290 Q 230 320 220 400 Z"
          fill="${palette.hair}"/>
    <!-- hair shadow -->
    <path d="M 220 400 Q 215 360 240 320 L 270 360 Q 245 380 230 410 Z" fill="#000" opacity="0.15"/>

    <!-- eyebrows -->
    <path d="M 300 440 Q 345 425 385 440" stroke="${palette.hair}" stroke-width="6" fill="none" stroke-linecap="round"/>
    <path d="M 460 440 Q 500 425 540 440" stroke="${palette.hair}" stroke-width="6" fill="none" stroke-linecap="round"/>

    <!-- eyes -->
    <ellipse cx="345" cy="475" rx="16" ry="9" fill="#fff"/>
    <ellipse cx="500" cy="475" rx="16" ry="9" fill="#fff"/>
    <circle cx="345" cy="475" r="6" fill="${palette.hair}"/>
    <circle cx="500" cy="475" r="6" fill="${palette.hair}"/>
    <circle cx="346" cy="473" r="1.6" fill="#fff"/>
    <circle cx="501" cy="473" r="1.6" fill="#fff"/>

    <!-- nose -->
    <path d="M 395 490 Q 388 540 398 570 Q 415 580 440 570 Q 450 540 445 490" stroke="${palette.skinShade}"
          stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
    <ellipse cx="408" cy="580" rx="3" ry="2" fill="${palette.skinShade}" opacity="0.6"/>
    <ellipse cx="432" cy="580" rx="3" ry="2" fill="${palette.skinShade}" opacity="0.6"/>

    <!-- mouth -->
    <path d="M 370 618 Q 420 635 470 618 Q 420 640 370 618 Z"
          fill="${isBW ? '#3a2820' : (mode === 'before' ? '#934a38' : '#8f2f22')}"/>

    ${detailLines}
  </g>

  ${damage}

  ${mode === 'before' ? `
    <!-- apply a very subtle blur to the whole thing to mimic scan softness -->
    <rect width="${w}" height="${h}" fill="#d4b988" opacity="0.06"/>
  ` : ''}
</svg>`;
}

function svgDataUri(svg) {
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}

const SAMPLES = {
  bw: {
    id: 'bw',
    name: '1940s family portrait',
    before: svgDataUri(renderPortrait('bw', 'before')),
    after:  svgDataUri(renderPortrait('bw', 'after')),
  },
  color70s: {
    id: 'color70s',
    name: '1970s color portrait',
    before: svgDataUri(renderPortrait('color70s', 'before')),
    after:  svgDataUri(renderPortrait('color70s', 'after')),
  },
};

// Fake library of past restorations for gallery + home feed
const LIBRARY = [
  { id: 'l1', title: "Grandma & Pa", date: 'March 2026', sample: 'bw' },
  { id: 'l2', title: "Dad's wedding", date: 'February 2026', sample: 'color70s' },
  { id: 'l3', title: "Family reunion", date: 'February 2026', sample: 'bw' },
  { id: 'l4', title: "Uncle Joe", date: 'January 2026', sample: 'color70s' },
  { id: 'l5', title: "Mom, age 6", date: 'December 2025', sample: 'bw' },
  { id: 'l6', title: "Christmas '78", date: 'December 2025', sample: 'color70s' },
];

Object.assign(window, { SAMPLES, LIBRARY });