// art.jsx — abstract child-art swatches (placeholders for real artwork)
// Warm, paper-textured, color-field style. No figurative drawing.

// SVG paper noise filter
const PAPER_FILTER = (
  <svg width="0" height="0" style={{position:'absolute'}}>
    <defs>
      <filter id="paperNoise">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="3"/>
        <feColorMatrix values="0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0.22 0"/>
        <feComposite in2="SourceGraphic" operator="in"/>
      </filter>
      <filter id="paperNoiseLight">
        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7"/>
        <feColorMatrix values="0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 0 0.25  0 0 0 0.12 0"/>
        <feComposite in2="SourceGraphic" operator="in"/>
      </filter>
    </defs>
  </svg>
);

// A library of abstract paintings. Each is a CSS gradient composition.
const ARTWORKS = {
  // Warm sun + sky — peach + cream + orange dot
  a1: {
    label: '《我的太阳》',
    age: '6岁 · 2024.10',
    style: {
      background: `
        radial-gradient(circle at 70% 28%, #E89A6A 0 9%, transparent 9.5%),
        linear-gradient(180deg, #F4E0C5 0%, #F4E0C5 55%, #D9B98E 55%, #C7A878 100%)
      `,
    },
  },
  // Soft mountains — sage + cream
  a2: {
    label: '《妈妈的山》',
    age: '7岁 · 2025.03',
    style: {
      background: `
        radial-gradient(ellipse 80% 45% at 30% 65%, #8FA68A 0 36%, transparent 38%),
        radial-gradient(ellipse 60% 35% at 70% 70%, #6F8A6B 0 32%, transparent 34%),
        linear-gradient(180deg, #EFE6D2 0%, #E2D5B8 100%)
      `,
    },
  },
  // Rain — vertical streaks blue
  a3: {
    label: '《下雨天》',
    age: '6岁 · 2024.08',
    style: {
      background: `
        repeating-linear-gradient(105deg, rgba(70,100,135,0.55) 0 1.5px, transparent 1.5px 8px),
        linear-gradient(180deg, #C9D4DA 0%, #B7C3CC 100%)
      `,
    },
  },
  // Tree — round green blob on cream
  a4: {
    label: '《家门口的树》',
    age: '5岁 · 2024.04',
    style: {
      background: `
        radial-gradient(circle at 50% 38%, #6B8956 0 25%, transparent 27%),
        radial-gradient(circle at 50% 75%, #7C5A3B 0 5%, transparent 6%),
        linear-gradient(180deg, #F2EAD7 0%, #EBDDBE 100%)
      `,
    },
  },
  // Self-portrait — pink/peach circle
  a5: {
    label: '《我自己》',
    age: '5岁 · 2024.01',
    style: {
      background: `
        radial-gradient(circle at 50% 42%, #E8B89E 0 22%, transparent 24%),
        linear-gradient(180deg, #F5EBDD 0%, #EEDCC2 100%)
      `,
    },
  },
  // Night sky — dark blue with cream dot
  a6: {
    label: '《夜晚的月亮》',
    age: '7岁 · 2025.02',
    style: {
      background: `
        radial-gradient(circle at 68% 32%, #F0E1B8 0 7%, transparent 8%),
        radial-gradient(circle at 25% 70%, rgba(220,210,180,0.18) 0 2%, transparent 3%),
        radial-gradient(circle at 80% 78%, rgba(220,210,180,0.15) 0 1.5%, transparent 2.5%),
        linear-gradient(180deg, #2E3B4E 0%, #1F2A3A 100%)
      `,
    },
  },
  // Spring — pink blossoms scattered
  a7: {
    label: '《春天》',
    age: '6岁 · 2024.05',
    style: {
      background: `
        radial-gradient(circle at 25% 30%, #D88A8A 0 6%, transparent 7%),
        radial-gradient(circle at 65% 55%, #C77878 0 5%, transparent 6%),
        radial-gradient(circle at 80% 25%, #D88A8A 0 4%, transparent 5%),
        radial-gradient(circle at 40% 75%, #C77878 0 5%, transparent 6%),
        linear-gradient(180deg, #F5EAD8 0%, #E9D8B8 100%)
      `,
    },
  },
  // Ocean — bands of blue
  a8: {
    label: '《海》',
    age: '7岁 · 2025.07',
    style: {
      background: `
        linear-gradient(180deg, #C9D9DE 0%, #C9D9DE 35%, #7BA0AE 35%, #6F94A4 55%, #486F82 55%, #3D6175 100%)
      `,
    },
  },
  // Geometric — house with red roof
  a9: {
    label: '《我们的家》',
    age: '6岁 · 2024.11',
    style: {
      background: `
        linear-gradient(135deg, transparent 0 33%, #B86A55 33% 35%, transparent 35%) 0 0/100% 50% no-repeat,
        linear-gradient(45deg, transparent 0 33%, #B86A55 33% 35%, transparent 35%) 100% 0/100% 50% no-repeat,
        #C97A5F linear-gradient(180deg, transparent 50%, #DEC9A8 50% 100%)
      `,
    },
  },
  // Family — warm cream with simple shapes
  a10: {
    label: '《全家福》',
    age: '6岁 · 2024.12',
    style: {
      background: `
        radial-gradient(circle at 30% 55%, #8B6A4C 0 12%, transparent 13%),
        radial-gradient(circle at 55% 50%, #C49374 0 14%, transparent 15%),
        radial-gradient(circle at 75% 60%, #E5A98B 0 10%, transparent 11%),
        linear-gradient(180deg, #F4ECD8 0%, #EAD9B3 100%)
      `,
    },
  },
  // Abstract emotion — orange + red wash
  a11: {
    label: '《生气》',
    age: '6岁 · 2024.09',
    style: {
      background: `
        radial-gradient(ellipse 70% 50% at 50% 50%, #C44A2E 0 30%, transparent 60%),
        linear-gradient(180deg, #E07A4A 0%, #C44A2E 100%)
      `,
    },
  },
  // Calm — soft lavender bands
  a12: {
    label: '《平静》',
    age: '7岁 · 2025.04',
    style: {
      background: `
        linear-gradient(180deg, #D9D2DE 0%, #C5BCD0 50%, #B9AFC9 100%)
      `,
    },
  },
  // Yellow burst — sunflower abstraction
  a13: {
    label: '《向日葵》',
    age: '7岁 · 2025.06',
    style: {
      background: `
        radial-gradient(circle at 50% 50%, #6B4B2F 0 8%, transparent 9%),
        radial-gradient(circle at 50% 50%, #E8B645 0 22%, transparent 23%),
        linear-gradient(180deg, #B8D38A 0%, #95B66D 100%)
      `,
    },
  },
  // Rainbow — soft warm arcs (not high-sat)
  a14: {
    label: '《彩虹》',
    age: '5岁 · 2024.06',
    style: {
      background: `
        radial-gradient(ellipse 90% 70% at 50% 110%, transparent 60%, #C77878 60.5% 64%, #D89C75 64.5% 68%, #DEC288 68.5% 72%, #93A876 72.5% 76%, #7B9AB0 76.5% 80%, transparent 80.5%),
        linear-gradient(180deg, #F5ECD8 0%, #ECDDC0 100%)
      `,
    },
  },
};

function Artwork({ id, style, withLabel = false, labelColor = '#3D362E', frame = false }) {
  const a = ARTWORKS[id] || ARTWORKS.a1;
  return (
    <div style={{
      position: 'relative',
      width: '100%', height: '100%',
      borderRadius: frame ? 2 : 0,
      overflow: 'hidden',
      boxShadow: frame ? 'inset 0 0 0 6px #FAF7F2, 0 1px 3px rgba(0,0,0,0.05), 0 6px 16px rgba(120,90,60,0.12)' : 'none',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        ...a.style,
      }} />
      {/* paper texture overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.06), transparent 70%)',
        mixBlendMode: 'overlay',
        pointerEvents: 'none',
      }} />
      {withLabel && (
        <div style={{
          position: 'absolute', left: 8, bottom: 8, right: 8,
          color: labelColor,
          fontSize: 10, lineHeight: 1.3,
          fontFamily: '"Noto Serif SC", serif',
          textShadow: '0 1px 2px rgba(255,255,255,0.5)',
        }}>
          <div>{a.label}</div>
          <div style={{opacity: 0.7, fontSize: 9, marginTop: 1}}>{a.age}</div>
        </div>
      )}
    </div>
  );
}

window.Artwork = Artwork;
window.ARTWORKS = ARTWORKS;
window.PAPER_FILTER = PAPER_FILTER;