// rugs.jsx — catalog + CSS-only rug "renderer"
// Each rug is described by a pattern type + a color palette. We compose
// gradients to fake the look of woven pile. No SVG, no images.

const RUGS = [
  {
    id: 'sahara',
    name: 'Sahara',
    italic: 'Mirage',
    tag: 'Hand-tufted · 100% NZ wool',
    palette: ['#E9C9A2', '#C68A5E', '#5B3A24', '#F3E6D2'],
    pattern: 'concentric',
    desc: 'Sun-bleached ochres dissolve into a horizon line. A piece that asks a room to settle.',
    sizes: ['6×9 ft', '8×10 ft', '9×12 ft', '10×14 ft'],
    origin: 'Made-to-order · Jaipur',
    weave: 'Hand-knotted, 90 KPSI',
    pile: 'NZ wool, 12mm',
    lead: '10 weeks',
  },
  {
    id: 'atlas',
    name: 'Atlas',
    italic: 'Bloom',
    tag: 'Hand-knotted · wool & silk',
    palette: ['#F4E5D0', '#D8A66B', '#9C5826', '#2B1E14'],
    pattern: 'bloom',
    desc: 'A modern abstract bloom — silk highlights catching low evening light.',
    sizes: ['5×7 ft', '8×10 ft', '9×12 ft'],
    origin: 'Made-to-order · Bhadohi',
    weave: 'Hand-knotted, 120 KPSI',
    pile: 'Wool + bamboo silk, 10mm',
    lead: '12 weeks',
  },
  {
    id: 'nocturne',
    name: 'Nocturne',
    italic: '',
    tag: 'Hand-knotted · highland wool',
    palette: ['#1E1812', '#3A2D22', '#7E6147', '#C9A87C'],
    pattern: 'striae',
    desc: 'Striations of ink fade toward bronze. The quiet center of a room.',
    sizes: ['6×9 ft', '8×10 ft', '9×12 ft', '12×15 ft'],
    origin: 'Made-to-order · Kashan',
    weave: 'Hand-knotted, 100 KPSI',
    pile: 'Highland wool, 14mm',
    lead: '14 weeks',
  },
  {
    id: 'meridian',
    name: 'Meridian',
    italic: '',
    tag: 'Flat-weave · wool',
    palette: ['#F0E4CF', '#E2B486', '#A86848', '#3C2418'],
    pattern: 'grid',
    desc: 'An architect\'s rug. Geometry softened by hand.',
    sizes: ['5×7 ft', '8×10 ft', '9×12 ft'],
    origin: 'Made-to-order · Anatolia',
    weave: 'Flat-weave, kilim',
    pile: 'Wool, 6mm',
    lead: '9 weeks',
  },
  {
    id: 'siroco',
    name: 'Siroco',
    italic: '',
    tag: 'Hand-tufted · wool',
    palette: ['#F2DAB8', '#D6884F', '#7B3B1F', '#EDC6A0'],
    pattern: 'dunes',
    desc: 'Dunes of wool, pile carved at three depths for relief.',
    sizes: ['6×9 ft', '8×10 ft', '10×14 ft'],
    origin: 'Made-to-order · Jaipur',
    weave: 'Hand-tufted, carved',
    pile: 'Wool, 8–18mm relief',
    lead: '11 weeks',
  },
  {
    id: 'opal',
    name: 'Opal',
    italic: 'Drift',
    tag: 'Hand-knotted · silk',
    palette: ['#E6DDD0', '#B7A089', '#86796A', '#2C2620'],
    pattern: 'drift',
    desc: 'Pale, restful, with a silk sheen that shifts as you walk past.',
    sizes: ['6×9 ft', '8×10 ft', '9×12 ft', '10×14 ft'],
    origin: 'Made-to-order · Bhadohi',
    weave: 'Hand-knotted, 150 KPSI',
    pile: 'Bamboo silk, 8mm',
    lead: '13 weeks',
  },
  {
    id: 'tindari',
    name: 'Tindari',
    italic: '',
    tag: 'Hand-knotted · wool',
    palette: ['#EDD8B6', '#B8804E', '#D3573A', '#3B2418'],
    pattern: 'arches',
    desc: 'A modern echo of arched apertures — terracotta on bone.',
    sizes: ['5×7 ft', '8×10 ft', '9×12 ft'],
    origin: 'Made-to-order · Anatolia',
    weave: 'Hand-knotted, 90 KPSI',
    pile: 'Wool, 10mm',
    lead: '10 weeks',
  },
  {
    id: 'aria',
    name: 'Aria',
    italic: '',
    tag: 'Hand-tufted · wool',
    palette: ['#F4ECDC', '#CFB69A', '#7E6F58', '#27201A'],
    pattern: 'wave',
    desc: 'A long, slow brushstroke. Pairs with linen and oak.',
    sizes: ['6×9 ft', '8×10 ft', '9×12 ft', '12×15 ft'],
    origin: 'Made-to-order · Jaipur',
    weave: 'Hand-tufted',
    pile: 'NZ wool, 12mm',
    lead: '10 weeks',
  },
];

// ─── The rug renderer ──────────────────────────────────────────────
// `extra` lets the parent layer extra CSS effects (fringe, etc).
function Rug({ rug, className = '', style = {}, withFringe = true }) {
  const [c1, c2, c3, c4] = rug.palette;
  const patterns = {
    concentric: {
      background:
        `radial-gradient(ellipse 60% 80% at 50% 50%, ${c1} 0%, transparent 60%),
         radial-gradient(ellipse 80% 100% at 50% 50%, ${c2} 0%, transparent 70%),
         radial-gradient(ellipse 100% 130% at 50% 50%, ${c3} 0%, transparent 78%),
         ${c4}`,
    },
    bloom: {
      background:
        `radial-gradient(circle at 50% 38%, ${c2} 0%, transparent 22%),
         radial-gradient(circle at 30% 60%, ${c3} 0%, transparent 18%),
         radial-gradient(circle at 70% 65%, ${c3} 0%, transparent 18%),
         radial-gradient(circle at 50% 50%, ${c4} 0%, transparent 8%),
         conic-gradient(from 0deg at 50% 50%, ${c1} 0deg, ${c2} 60deg, ${c1} 120deg, ${c2} 180deg, ${c1} 240deg, ${c2} 300deg, ${c1} 360deg),
         ${c1}`,
      backgroundBlendMode: 'normal, normal, normal, normal, soft-light, normal',
    },
    striae: {
      background:
        `repeating-linear-gradient(0deg, ${c1} 0px, ${c1} 14px, ${c2} 14px, ${c2} 22px, ${c3} 22px, ${c3} 36px, ${c4} 36px, ${c4} 44px),
         linear-gradient(180deg, ${c1} 0%, ${c4} 100%)`,
      backgroundBlendMode: 'overlay, normal',
    },
    grid: {
      background:
        `linear-gradient(0deg, ${c2} 49%, ${c3} 50%, ${c2} 51%),
         linear-gradient(90deg, ${c2} 49%, ${c3} 50%, ${c2} 51%),
         repeating-linear-gradient(0deg,  transparent 0 22%, ${c4} 22% 24%, transparent 24% 50%),
         repeating-linear-gradient(90deg, transparent 0 22%, ${c4} 22% 24%, transparent 24% 50%),
         ${c1}`,
      backgroundBlendMode: 'multiply, multiply, normal, normal, normal',
    },
    dunes: {
      background:
        `radial-gradient(ellipse 120% 28% at 50%  15%, ${c2} 0%, transparent 60%),
         radial-gradient(ellipse 120% 28% at 50%  45%, ${c3} 0%, transparent 60%),
         radial-gradient(ellipse 120% 28% at 50%  78%, ${c4} 0%, transparent 60%),
         linear-gradient(180deg, ${c1} 0%, ${c4} 100%)`,
    },
    drift: {
      background:
        `radial-gradient(ellipse 80% 50% at 30% 30%, ${c1} 0%, transparent 60%),
         radial-gradient(ellipse 80% 50% at 70% 70%, ${c3} 0%, transparent 60%),
         radial-gradient(ellipse 80% 50% at 50% 50%, ${c2} 0%, transparent 50%),
         ${c4}`,
      backgroundBlendMode: 'soft-light, soft-light, normal, normal',
    },
    arches: {
      background:
        `radial-gradient(circle 30% at 50% 100%, ${c3} 0%, ${c3} 22%, transparent 22.5%),
         radial-gradient(circle 22% at 50% 100%, ${c4} 0%, ${c4} 16%, transparent 16.5%),
         repeating-linear-gradient(90deg, transparent 0 30%, ${c2} 30% 30.5%, transparent 30.5% 100%),
         linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`,
    },
    wave: {
      background:
        `radial-gradient(ellipse 180% 60% at 50% 10%, ${c2} 0%, transparent 50%),
         radial-gradient(ellipse 180% 60% at 50% 90%, ${c3} 0%, transparent 50%),
         repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,255,255,.06) 16px 17px),
         ${c1}`,
    },
  };
  const bg = patterns[rug.pattern] || patterns.drift;
  return (
    <div className={`rug-3d ${className}`} style={{ ...bg, ...style }} data-with-fringe={withFringe}>
      {/* pile texture overlays (already added via ::before/::after in CSS) */}
    </div>
  );
}

// ─── Swatch chip used in PDP / cart thumbnails ─────────────────────
function RugThumb({ rug, style = {} }) {
  return (
    <div style={{ width:'100%', height:'100%', position:'relative', overflow:'hidden', ...style }}>
      <Rug rug={rug} style={{ width:'100%', height:'100%', borderRadius:0, boxShadow:'none' }} />
    </div>
  );
}

Object.assign(window, { RUGS, Rug, RugThumb });