// Castelverdi — Mediterranean pottery atelier

const PRODUCTS = [
  { id: 'p01', name: 'Caraffa dei Limoni', nameEn: 'Lemon Pitcher', cat: 'Pitchers', price: 780, year: 'Amalfi form', material: 'Hand-painted ceramic, cobalt & lemon', height: '28 cm', edition: 'Edition of 40', desc: 'A tall pitcher in the Amalfitan tradition, cream-glazed and hand-painted with trailing lemon branches. For water, for wine, for olive oil on a long lunch table.' },
  { id: 'p02', name: 'Vaso Foglie', nameEn: 'Leaf Vase', cat: 'Vases', price: 920, year: 'Capri form', material: 'Hand-painted ceramic, cobalt leaves', height: '34 cm', edition: 'Edition of 30', desc: 'An elegant vase in the Caprese manner — cobalt foliage drawn freehand across a warm cream ground. Each one slightly different; each one signed on the foot.' },
  { id: 'p03', name: 'Ciotola Agrumi', nameEn: 'Citrus Bowl', cat: 'Bowls', price: 340, year: 'Sicilian form', material: 'Hand-painted ceramic', height: '12 cm', edition: 'Open edition', desc: 'A deep footed bowl, painted with a ring of lemons and ultramarine leaves inside. For fruit, for salad, for a spill of ripe tomatoes in August.' },
  { id: 'p04', name: 'Brocca Positano', nameEn: 'Positano Jug', cat: 'Pitchers', price: 640, year: 'Costiera form', material: 'Hand-painted ceramic', height: '24 cm', edition: 'Edition of 50', desc: 'A rounder, more informal jug — the one you reach for every morning. Painted with bold cobalt leaves and the occasional yellow fruit.' },
  { id: 'p05', name: 'Tazzine (set of IV)', nameEn: 'Espresso Cups, set of four', cat: 'Cups', price: 420, year: 'Neapolitan form', material: 'Hand-painted ceramic', height: '6 cm', edition: 'Open edition', desc: 'Four small espresso cups, each painted a little differently. Cobalt, lemon, terracotta, leaf — one of each. A very small ceremony, four times over.' },
  { id: 'p06', name: 'Piatto di Portata', nameEn: 'Serving Platter', cat: 'Plates', price: 560, year: 'Deruta form', material: 'Hand-painted ceramic, large', height: '38 cm', edition: 'Edition of 40', desc: 'A wide platter in the Deruta manner — a full bouquet of lemons and leaves painted to the rim. For aperitivo, antipasti, or hanging on a wall.' },
  { id: 'p07', name: 'Anfora Mediterranea', nameEn: 'Mediterranean Amphora', cat: 'Vases', price: 1480, year: 'Etruscan form', material: 'Hand-painted ceramic, large', height: '52 cm', edition: 'Edition of 15', desc: 'A tall, handled amphora — our largest piece. Painted across its body with a continuous garland of citrus. A statement on a garden terrace or entrance hall.' },
  { id: 'p08', name: 'Piatto Fondi (VI)', nameEn: 'Pasta Bowls, set of six', cat: 'Plates', price: 680, year: 'Trattoria form', material: 'Hand-painted ceramic, set of 6', height: '6 cm', edition: 'Open edition', desc: 'Six deep bowls in a mixed set — no two the same, all cut from the same cobalt-and-lemon cloth. For a big table, for a proper dinner.' },
  { id: 'p09', name: 'Vaso da Fiori', nameEn: 'Flower Vase', cat: 'Vases', price: 480, year: 'Tuscan form', material: 'Hand-painted ceramic', height: '22 cm', edition: 'Open edition', desc: 'A small, simple flower vase — for a single stem of lemon blossom, or a handful of rosemary from the garden.' },
  { id: 'p10', name: 'Teiera della Nonna', nameEn: "Grandmother's Teapot", cat: 'Pitchers', price: 540, year: 'Liguria form', material: 'Hand-painted ceramic', height: '18 cm', edition: 'Edition of 40', desc: 'A softly rounded teapot with a confident cobalt spout. Named for the way your grandmother poured, with one hand on the lid.' },
  { id: 'p11', name: 'Ciotola Uliveto', nameEn: 'Olive Grove Bowl', cat: 'Bowls', price: 260, year: 'Puglian form', material: 'Hand-painted ceramic, small', height: '9 cm', edition: 'Open edition', desc: 'A small bowl painted with olive branches instead of lemons. Perfect for pitted olives, capers, or almonds at the start of an evening.' },
  { id: 'p12', name: 'Servizio Completo (XII)', nameEn: 'Full service, twelve pieces', cat: 'Sets', price: 3200, year: 'Bespoke', material: 'Hand-painted ceramic, full service', height: 'various', edition: 'Edition of 10', desc: 'The complete set — pitcher, platter, six bowls, four cups. Hand-painted over several weeks in a single coordinated pattern. For a wedding, for a house-warming, for the table you always meant to set.' },
];

const PRODUCT_ICONS = {
  p01: 'pitcher', p02: 'vase-tall', p03: 'bowl', p04: 'jug',
  p05: 'cups', p06: 'platter', p07: 'amphora', p08: 'bowls',
  p09: 'vase-small', p10: 'teapot', p11: 'bowl', p12: 'set',
};

const I18N = {
  en: { nav: { shop: 'Collection', lookbook: 'Lookbook', craft: 'Craft', about: 'Atelier', contact: 'Contact' } },
  fr: { nav: { shop: 'Collection', lookbook: 'Lookbook', craft: 'Savoir-Faire', about: 'Atelier', contact: 'Contact' } },
  ar: { nav: { shop: 'المجموعة', lookbook: 'المعرض', craft: 'الصنعة', about: 'المرسم', contact: 'تواصل' } },
};

const LOOKBOOK = [
  { id: 'l01', title: 'La tavola d\'estate', subtitle: 'A summer table', season: 'Editorial №01', year: 'Estate MMXXVI' },
  { id: 'l02', title: 'Una cucina a Positano', subtitle: 'A kitchen in Positano', season: 'Editorial №02', year: 'Primavera MMXXVI' },
  { id: 'l03', title: 'Il limoneto', subtitle: 'The lemon grove', season: 'Editorial №03', year: 'Autunno MMXXV' },
];

function formatMAD(n) {
  return new Intl.NumberFormat('fr-MA', { style: 'decimal', maximumFractionDigits: 0 }).format(n) + ' DH';
}

// --- Hand-painted motifs ---
// Lemon sprig
const LemonSprig = ({ scale = 1, rotate = 0, style = {} }) => (
  <svg viewBox="0 0 80 120" style={{ ...style, transform: `scale(${scale}) rotate(${rotate}deg)` }}>
    <g>
      {/* Stem */}
      <path d="M 40 10 Q 42 40 40 70 Q 38 90 40 110" stroke="var(--leaf)" strokeWidth="1.5" fill="none" opacity="0.85"/>
      {/* Leaves */}
      <path d="M 40 25 Q 20 30 18 45 Q 30 44 40 35 Z" fill="var(--ink)" opacity="0.85"/>
      <path d="M 40 50 Q 60 52 64 68 Q 52 70 40 60 Z" fill="var(--ink)" opacity="0.85"/>
      <path d="M 40 78 Q 24 80 22 94 Q 32 92 40 86 Z" fill="var(--ink)" opacity="0.85"/>
      {/* Lemons */}
      <ellipse cx="55" cy="40" rx="8" ry="10" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.8"/>
      <ellipse cx="28" cy="65" rx="7" ry="9" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.8"/>
      <ellipse cx="54" cy="92" rx="8" ry="10" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.8"/>
    </g>
  </svg>
);

// A single leaf (for decorative scatter)
const Leaf = ({ style = {} }) => (
  <svg viewBox="0 0 40 60" style={style}>
    <path d="M 20 5 Q 5 20 10 40 Q 15 55 20 55 Q 25 55 30 40 Q 35 20 20 5 Z" fill="var(--ink)"/>
    <path d="M 20 5 L 20 55" stroke="var(--bg)" strokeWidth="0.6" opacity="0.5"/>
  </svg>
);

// Painted silhouettes — pottery shapes with cobalt leaf + lemon motifs
const pottery = {
  pitcher: (
    <svg viewBox="0 0 200 260">
      <g>
        {/* Body */}
        <path d="M 70 70 Q 60 90 60 140 Q 60 200 70 230 L 130 230 Q 140 200 140 140 Q 140 90 130 70 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        {/* Spout */}
        <path d="M 70 70 Q 72 55 85 50 Q 82 60 80 70 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        {/* Handle */}
        <path d="M 130 85 Q 165 100 165 150 Q 165 200 130 215" stroke="var(--ink)" strokeWidth="2.5" fill="none"/>
        {/* Rim */}
        <rect x="68" y="68" width="64" height="4" fill="var(--ink)"/>
        {/* Base */}
        <rect x="65" y="228" width="70" height="6" fill="var(--ink)" opacity="0.9"/>
        {/* Painted decoration — lemon sprigs */}
        <g opacity="0.9">
          <path d="M 78 120 Q 82 140 80 165" stroke="var(--ink)" strokeWidth="1" fill="none"/>
          <path d="M 80 130 Q 70 132 68 142 Q 76 140 82 134" fill="var(--ink)"/>
          <ellipse cx="88" cy="150" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <path d="M 108 100 Q 114 125 110 155 Q 106 180 110 205" stroke="var(--ink)" strokeWidth="1" fill="none"/>
          <path d="M 112 115 Q 124 118 128 130 Q 118 130 110 120" fill="var(--ink)"/>
          <path d="M 106 165 Q 96 168 92 178 Q 102 176 108 170" fill="var(--ink)"/>
          <ellipse cx="120" cy="145" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <ellipse cx="95" cy="195" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        </g>
      </g>
    </svg>
  ),
  'vase-tall': (
    <svg viewBox="0 0 200 260">
      <g>
        <path d="M 80 40 L 80 60 Q 55 90 55 150 Q 55 210 75 235 L 125 235 Q 145 210 145 150 Q 145 90 120 60 L 120 40 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <rect x="76" y="38" width="48" height="6" fill="var(--ink)"/>
        <rect x="70" y="232" width="60" height="6" fill="var(--ink)" opacity="0.9"/>
        <g opacity="0.9">
          <path d="M 100 75 Q 102 130 100 190" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 100 90 Q 78 95 72 115 Q 88 112 100 100" fill="var(--ink)"/>
          <path d="M 100 130 Q 125 135 130 155 Q 114 152 100 140" fill="var(--ink)"/>
          <path d="M 100 170 Q 80 175 74 195 Q 90 190 100 180" fill="var(--ink)"/>
          <path d="M 70 140 Q 62 158 68 172 Q 75 162 74 150" fill="var(--ink)" opacity="0.7"/>
          <path d="M 132 105 Q 140 120 134 135 Q 126 126 128 114" fill="var(--ink)" opacity="0.7"/>
          <ellipse cx="85" cy="130" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
          <ellipse cx="118" cy="170" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
          <ellipse cx="88" cy="205" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
        </g>
      </g>
    </svg>
  ),
  bowl: (
    <svg viewBox="0 0 260 200">
      <g>
        <path d="M 40 90 Q 40 160 130 165 Q 220 160 220 90 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <ellipse cx="130" cy="90" rx="90" ry="14" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <ellipse cx="130" cy="90" rx="78" ry="10" fill="none" stroke="var(--ink)" strokeWidth="1" opacity="0.8"/>
        <rect x="110" y="165" width="40" height="10" fill="var(--ink)" opacity="0.9"/>
        <g opacity="0.9">
          <path d="M 65 105 Q 85 115 105 108" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 75 110 Q 65 114 60 120 Q 70 118 76 114" fill="var(--ink)"/>
          <ellipse cx="95" cy="115" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <path d="M 155 108 Q 175 115 195 105" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 185 110 Q 195 114 200 120 Q 190 118 184 114" fill="var(--ink)"/>
          <ellipse cx="165" cy="115" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <ellipse cx="130" cy="135" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        </g>
      </g>
    </svg>
  ),
  jug: (
    <svg viewBox="0 0 200 260">
      <g>
        <path d="M 60 90 Q 50 110 50 170 Q 50 220 70 235 L 130 235 Q 150 220 150 170 Q 150 110 140 90 Q 130 70 100 70 Q 70 70 60 90 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <path d="M 60 90 Q 55 80 62 70 Q 68 78 70 85" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <path d="M 150 95 Q 175 115 175 160 Q 175 200 150 210" stroke="var(--ink)" strokeWidth="2.5" fill="none"/>
        <rect x="60" y="232" width="80" height="6" fill="var(--ink)" opacity="0.9"/>
        <g opacity="0.9">
          <path d="M 85 130 Q 95 155 90 185" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 88 145 Q 78 148 73 158 Q 82 155 90 150" fill="var(--ink)"/>
          <path d="M 115 120 Q 125 150 122 190" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 120 140 Q 132 143 136 155 Q 126 152 118 146" fill="var(--ink)"/>
          <ellipse cx="100" cy="165" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <ellipse cx="125" cy="175" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        </g>
      </g>
    </svg>
  ),
  cups: (
    <svg viewBox="0 0 260 180">
      <g>
        {[0,1,2,3].map(i => {
          const x = 30 + i*56;
          const fill = ['var(--lemon)','var(--paper)','var(--terracotta)','var(--paper)'][i];
          return (
            <g key={i}>
              <path d={`M ${x} 70 Q ${x} 130 ${x+20} 130 L ${x+36} 130 Q ${x+42} 130 ${x+42} 70 Z`} fill={fill} stroke="var(--ink)" strokeWidth="1.8"/>
              <ellipse cx={x+21} cy="70" rx="21" ry="4" fill={fill} stroke="var(--ink)" strokeWidth="1.8"/>
              <path d={`M ${x+42} 85 Q ${x+54} 90 ${x+52} 110 Q ${x+42} 105 ${x+42} 100`} stroke="var(--ink)" strokeWidth="1.8" fill="none"/>
              <rect x={x+14} y="130" width="16" height="4" fill="var(--ink)"/>
              {i !== 0 && i !== 2 && (
                <g opacity="0.9">
                  <ellipse cx={x+21} cy="100" rx="4" ry="5" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.5"/>
                  <path d={`M ${x+8} 92 Q ${x+14} 100 ${x+12} 110`} stroke="var(--ink)" strokeWidth="0.8" fill="none"/>
                </g>
              )}
            </g>
          );
        })}
      </g>
    </svg>
  ),
  platter: (
    <svg viewBox="0 0 260 200">
      <g>
        <ellipse cx="130" cy="100" rx="110" ry="85" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2.5"/>
        <ellipse cx="130" cy="100" rx="95" ry="72" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
        <ellipse cx="130" cy="100" rx="40" ry="30" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="1.5"/>
        <g opacity="0.9">
          {[0,1,2,3,4,5].map(i => {
            const a = (i / 6) * Math.PI * 2;
            const cx = 130 + Math.cos(a) * 70;
            const cy = 100 + Math.sin(a) * 52;
            return (
              <g key={i}>
                <ellipse cx={cx} cy={cy} rx="7" ry="9" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.8"/>
                <path d={`M ${cx-12} ${cy-8} Q ${cx-18} ${cy} ${cx-14} ${cy+8}`} fill="var(--ink)"/>
              </g>
            );
          })}
        </g>
      </g>
    </svg>
  ),
  amphora: (
    <svg viewBox="0 0 200 260">
      <g>
        <path d="M 80 240 L 100 250 L 120 240 Q 150 215 155 160 Q 160 100 130 70 L 125 45 L 75 45 L 70 70 Q 40 100 45 160 Q 50 215 80 240 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <path d="M 75 75 Q 50 72 45 92" stroke="var(--ink)" strokeWidth="3" fill="none"/>
        <path d="M 125 75 Q 150 72 155 92" stroke="var(--ink)" strokeWidth="3" fill="none"/>
        <rect x="70" y="42" width="60" height="6" fill="var(--ink)"/>
        <g opacity="0.9">
          <path d="M 100 95 Q 102 150 100 210" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 100 115 Q 75 118 68 140 Q 86 136 100 124" fill="var(--ink)"/>
          <path d="M 100 155 Q 128 158 134 180 Q 116 176 100 165" fill="var(--ink)"/>
          <path d="M 100 190 Q 78 194 72 210 Q 88 205 100 198" fill="var(--ink)"/>
          <ellipse cx="82" cy="155" rx="6" ry="8" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
          <ellipse cx="120" cy="140" rx="6" ry="8" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
          <ellipse cx="118" cy="200" rx="6" ry="8" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.7"/>
        </g>
      </g>
    </svg>
  ),
  bowls: (
    <svg viewBox="0 0 260 200">
      <g>
        {[[50,60,1],[130,60,0],[210,60,1],[50,130,0],[130,130,1],[210,130,0]].map(([cx,cy,hasLemon],i) => (
          <g key={i}>
            <path d={`M ${cx-34} ${cy} Q ${cx-34} ${cy+28} ${cx} ${cy+32} Q ${cx+34} ${cy+28} ${cx+34} ${cy}`} fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
            <ellipse cx={cx} cy={cy} rx="34" ry="6" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
            {hasLemon ? (
              <ellipse cx={cx} cy={cy+8} rx="7" ry="5" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
            ) : (
              <path d={`M ${cx-14} ${cy+6} Q ${cx-10} ${cy+14} ${cx-6} ${cy+6} M ${cx+6} ${cy+6} Q ${cx+10} ${cy+14} ${cx+14} ${cy+6}`} stroke="var(--ink)" strokeWidth="0.8" fill="var(--ink)"/>
            )}
          </g>
        ))}
      </g>
    </svg>
  ),
  'vase-small': (
    <svg viewBox="0 0 200 260">
      <g>
        <path d="M 75 100 Q 60 130 60 180 Q 60 220 75 235 L 125 235 Q 140 220 140 180 Q 140 130 125 100 L 120 85 L 80 85 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <rect x="78" y="82" width="44" height="5" fill="var(--ink)"/>
        <rect x="72" y="232" width="56" height="5" fill="var(--ink)" opacity="0.9"/>
        <g opacity="0.9">
          <path d="M 100 115 Q 102 170 100 210" stroke="var(--ink)" strokeWidth="1.2" fill="none"/>
          <path d="M 100 130 Q 82 135 76 150 Q 90 148 100 138" fill="var(--ink)"/>
          <path d="M 100 170 Q 120 172 126 188 Q 112 186 100 178" fill="var(--ink)"/>
          <ellipse cx="88" cy="175" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
          <ellipse cx="116" cy="205" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        </g>
      </g>
    </svg>
  ),
  teapot: (
    <svg viewBox="0 0 260 220">
      <g>
        <path d="M 70 110 Q 60 140 70 180 Q 90 200 130 200 Q 170 200 190 180 Q 200 140 190 110 Q 170 90 130 90 Q 90 90 70 110 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <path d="M 70 120 Q 40 115 30 105 Q 38 120 55 130" fill="var(--paper)" stroke="var(--ink)" strokeWidth="2"/>
        <path d="M 190 125 Q 220 135 220 165 Q 220 190 195 185" stroke="var(--ink)" strokeWidth="2.5" fill="none"/>
        <ellipse cx="130" cy="85" rx="35" ry="8" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.8"/>
        <circle cx="130" cy="75" r="5" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="1"/>
        <rect x="105" y="198" width="50" height="6" fill="var(--ink)" opacity="0.9"/>
        <g opacity="0.9">
          <path d="M 100 135 Q 110 155 108 175" stroke="var(--ink)" strokeWidth="1" fill="none"/>
          <path d="M 104 148 Q 95 150 90 158 Q 100 158 106 154" fill="var(--ink)"/>
          <path d="M 150 135 Q 160 155 158 175" stroke="var(--ink)" strokeWidth="1" fill="none"/>
          <path d="M 156 148 Q 168 150 172 160 Q 162 158 154 154" fill="var(--ink)"/>
          <ellipse cx="130" cy="155" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        </g>
      </g>
    </svg>
  ),
  set: (
    <svg viewBox="0 0 260 200">
      <g>
        {/* Pitcher */}
        <path d="M 30 70 Q 25 85 25 135 Q 25 170 35 180 L 70 180 Q 80 170 80 135 Q 80 85 75 70 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.8"/>
        <path d="M 80 85 Q 95 100 95 140 Q 95 160 82 168" stroke="var(--ink)" strokeWidth="2" fill="none"/>
        <ellipse cx="62" cy="110" rx="5" ry="6" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        {/* Bowl */}
        <path d="M 120 120 Q 120 165 160 170 Q 200 165 200 120 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.8"/>
        <ellipse cx="160" cy="120" rx="40" ry="6" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.8"/>
        <ellipse cx="160" cy="140" rx="6" ry="7" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="0.6"/>
        {/* Cup */}
        <path d="M 215 130 Q 215 170 230 170 L 248 170 Q 252 170 252 130 Z" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
        <ellipse cx="233" cy="130" rx="19" ry="3" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
        <path d="M 252 142 Q 258 148 256 158" stroke="var(--ink)" strokeWidth="1.5" fill="none"/>
        {/* Plate */}
        <ellipse cx="90" cy="165" rx="55" ry="12" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
        <ellipse cx="90" cy="165" rx="40" ry="8" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="1" opacity="0.8"/>
      </g>
    </svg>
  ),
};

const Placeholder = ({ icon = 'pitcher', variant = 'default', label, scatter = true }) => {
  const shape = pottery[icon] || pottery.pitcher;
  return (
    <div className="placeholder" style={{ width: '100%', height: '100%' }}>
      {scatter && (
        <>
          <div style={{ position: 'absolute', top: '8%', left: '8%', width: 28, height: 42, opacity: 0.4, transform: 'rotate(-15deg)', color: 'var(--ink)' }}><Leaf style={{ width: '100%', height: '100%' }}/></div>
          <div style={{ position: 'absolute', top: '12%', right: '10%', width: 22, height: 34, opacity: 0.3, transform: 'rotate(25deg)', color: 'var(--ink)' }}><Leaf style={{ width: '100%', height: '100%' }}/></div>
          <div style={{ position: 'absolute', bottom: '10%', left: '12%', width: 18, height: 22, opacity: 0.9 }}>
            <svg viewBox="0 0 40 40"><ellipse cx="20" cy="20" rx="13" ry="16" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="1"/></svg>
          </div>
          <div style={{ position: 'absolute', bottom: '14%', right: '8%', width: 24, height: 36, opacity: 0.35, transform: 'rotate(45deg)', color: 'var(--ink)' }}><Leaf style={{ width: '100%', height: '100%' }}/></div>
        </>
      )}
      <div style={{ width: '72%', height: '88%', position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {React.cloneElement(shape, { style: { width: '100%', height: '100%' } })}
      </div>
      {label && <span className="ph-label" style={{position:'absolute',bottom:12,left:12}}>{label}</span>}
    </div>
  );
};

// Scroll-reveal — visible-by-default safe
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!els.length || typeof IntersectionObserver === 'undefined') return;
    let fired = false;
    const pres = Array.from(els);
    try {
      pres.forEach(el => el.classList.add('pre'));
      const io = new IntersectionObserver((entries) => {
        fired = true;
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.remove('pre');
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.05, rootMargin: '0px 0px -30px 0px' });
      els.forEach(el => io.observe(el));
      const fallback = setTimeout(() => {
        if (!fired) pres.forEach(el => { el.classList.remove('pre'); el.classList.add('in'); });
      }, 500);
      return () => { io.disconnect(); clearTimeout(fallback); };
    } catch (err) {
      pres.forEach(el => { el.classList.remove('pre'); el.classList.add('in'); });
    }
  });
}

Object.assign(window, { PRODUCTS, PRODUCT_ICONS, I18N, LOOKBOOK, formatMAD, Placeholder, LemonSprig, Leaf, useReveal });
