// product.jsx — bilingual product detail data + ProductDetailPage component
const { useState: useStateP, useEffect: useEffectP } = React;

// Gül mayası (yağlı gül suyu) — üç boy aynı ürünün farklı hacimleri olduğu
// için ortak metin tek yerden üretilir; yalnızca hacim bilgisi değişir.
function gulMayasiDetail(sizeTr, sizeEn) {
  return {
    tr: {
      tagline: "Sabahın ilk ışığında toplanan Isparta gülünden, bakır imbikte damıtılan yağlı gül suyu — yöresel adıyla gül mayası.",
      gallery: [
        { label: "şişe — önden", tone: "rose" },
        { label: "damıtma anı", tone: "sage" },
        { label: "gül yaprakları", tone: "rose" },
        { label: "doku & detay", tone: "cream" },
      ],
      desc: [
        "Gül Mayamız, bahçemizin Rosa damascena güllerinden, henüz çiy kalkmadan sabahın serinliğinde elle toplanır. Geleneksel yöntemle, odun ateşinde ısıtılan bakır imbiklerde damıtılır; içine hiçbir koruyucu, alkol ya da yapay koku katılmaz.",
        "Cildi yatıştıran, gözenekleri sıkılaştıran ve doğal nemini koruyan bu tonik, ince bir gül yağı tabakasıyla zenginleştirilmiştir. Tek bir damlası, bahçenin kokusunu cildinize taşır.",
      ],
      ingredients: ["Rosa damascena (Isparta gülü) suyu", "Doğal gül yağı — eser miktarda", "Katkısız, alkolsüz, koruyucusuz"],
      usage: [
        "Temizlenmiş cilde sabah ve akşam, bir pamukla ya da doğrudan püskürterek uygulayın.",
        "Makyaj öncesi ferahlatıcı bir tonik, gün içinde ise tazeleyici bir mist olarak kullanılabilir; tatlı ve şerbetlere de birkaç damla katabilirsiniz.",
      ],
      storage: "Serin ve güneş görmeyen bir yerde saklayın. Açıldıktan sonra 6 ay içinde tüketilmesi önerilir.",
      highlights: [
        { icon: "droplet", label: "Bakır imbikte damıtma" },
        { icon: "leaf", label: "Alkolsüz & koruyucusuz" },
        { icon: "sprout", label: "Elle, çiy kalkmadan hasat" },
      ],
      specs: [
        ["Net miktar", sizeTr], ["İçerik", "Saf gül suyu + gül yağı"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "18 ay"], ["Cilt tipi", "Tüm cilt tipleri"],
      ],
    },
    en: {
      tagline: "Oil-rich rose water from Isparta roses picked at first light, distilled in copper stills — known locally as gül mayası.",
      gallery: [
        { label: "bottle — front", tone: "rose" },
        { label: "the distillation", tone: "sage" },
        { label: "rose petals", tone: "rose" },
        { label: "texture & detail", tone: "cream" },
      ],
      desc: [
        "Our rose water is hand-picked from our garden's Rosa damascena blooms in the cool of morning, before the dew lifts. It is distilled the traditional way in wood-fired copper stills — with no preservative, alcohol or synthetic fragrance.",
        "Soothing to the skin, tightening to the pores and gentle on its natural moisture, this tonic is enriched with a fine layer of rose oil. A single drop carries the scent of the garden to your skin.",
      ],
      ingredients: ["Rosa damascena (Isparta rose) water", "Natural rose oil — trace amount", "No additives, alcohol-free, preservative-free"],
      usage: [
        "Apply to cleansed skin morning and evening, with a cotton pad or misted directly.",
        "Use as a refreshing tonic before make-up, as a reviving mist through the day — or add a few drops to desserts and sherbets.",
      ],
      storage: "Keep cool and away from sunlight. Best used within 6 months of opening.",
      highlights: [
        { icon: "droplet", label: "Copper-still distilled" },
        { icon: "leaf", label: "Alcohol & preservative-free" },
        { icon: "sprout", label: "Hand-picked before dew lifts" },
      ],
      specs: [
        ["Net volume", sizeEn], ["Contents", "Pure rose water + rose oil"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "18 months"], ["Skin type", "All skin types"],
      ],
    },
  };
}

// Per-product rich detail content, keyed by slug → { tr, en }
const DETAILS = {
  "gul-yagi": {
    tr: {
      tagline: "Binlerce gül goncasından damla damla elde edilen saf Isparta gülü yağı.",
      gallery: [
        { label: "şişe — önden", tone: "rose" },
        { label: "imbikten ilk damlalar", tone: "sage" },
        { label: "gül goncası", tone: "rose" },
        { label: "doku & detay", tone: "cream" },
      ],
      desc: [
        "Gül Yağımız, sabahın ilk ışığında elle toplanan Rosa damascena güllerinin bakır imbiklerde, odun ateşinde damıtılmasıyla elde edilir. Bir şişecik yağ için binlerce gonca gerekir; bu yüzden her damlası kıymetlidir.",
        "Seyreltilmemiş, katkısız ve saftır. Yoğun gül kokusu, cilt bakımından aromaterapiye kadar pek çok alanda küçücük miktarlarla yeter.",
      ],
      ingredients: ["Saf Rosa damascena (Isparta gülü) yağı", "Seyreltilmemiş, katkısız", "Bakır imbikte geleneksel damıtma"],
      usage: [
        "Cilt bakımı için bir taşıyıcı yağ (tatlı badem, jojoba) içine 1–2 damla karıştırarak uygulayın.",
        "Aromaterapi için buhurdanlığa ya da difüzöre birkaç damla yeterlidir.",
      ],
      storage: "Ağzı sıkıca kapalı, koyu renkli şişede; serin ve karanlık bir yerde saklayın.",
      highlights: [
        { icon: "droplet", label: "Bakır imbikte damıtma" },
        { icon: "award", label: "Binlerce goncadan bir şişe" },
        { icon: "leaf", label: "Saf & seyreltilmemiş" },
      ],
      specs: [
        ["Net miktar", "5 ml"], ["İçerik", "Saf gül yağı"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "24 ay"], ["Kullanım", "Cilt bakımı & aromaterapi"],
      ],
    },
    en: {
      tagline: "Pure Isparta rose oil, gathered drop by drop from thousands of rosebuds.",
      gallery: [
        { label: "bottle — front", tone: "rose" },
        { label: "first drops from the still", tone: "sage" },
        { label: "rosebud", tone: "rose" },
        { label: "texture & detail", tone: "cream" },
      ],
      desc: [
        "Our Rose Oil is distilled from Rosa damascena roses hand-picked at first light, in wood-fired copper stills. A single small bottle takes thousands of buds — which is why every drop is precious.",
        "It is undiluted, additive-free and pure. Its intense rose scent goes a long way, from skin care to aromatherapy, a tiny amount at a time.",
      ],
      ingredients: ["Pure Rosa damascena (Isparta rose) oil", "Undiluted, additive-free", "Traditionally distilled in copper stills"],
      usage: [
        "For skin care, blend 1–2 drops into a carrier oil (sweet almond, jojoba) before applying.",
        "For aromatherapy, a few drops in a burner or diffuser is plenty.",
      ],
      storage: "Keep tightly closed in a dark glass bottle, in a cool, dark place.",
      highlights: [
        { icon: "droplet", label: "Copper-still distilled" },
        { icon: "award", label: "Thousands of buds per bottle" },
        { icon: "leaf", label: "Pure & undiluted" },
      ],
      specs: [
        ["Net volume", "5 ml"], ["Contents", "Pure rose oil"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "24 months"], ["Use", "Skin care & aromatherapy"],
      ],
    },
  },

  "gul-mayasi-100ml": gulMayasiDetail("100 ml", "100 ml"),
  "gul-mayasi-400ml": gulMayasiDetail("400 ml", "400 ml"),
  "gul-mayasi-1l": gulMayasiDetail("1 litre", "1 litre"),

  "gul-receli": {
    tr: {
      tagline: "Taze gül yapraklarından, bakır kazanda kısık ateşte pişen el yapımı gül reçeli.",
      gallery: [
        { label: "reçel — kavanoz", tone: "rose" },
        { label: "bakır kazanda", tone: "cream" },
        { label: "gül yaprakları", tone: "rose" },
        { label: "kahvaltı sofrası", tone: "sage" },
      ],
      desc: [
        "Gül Reçelimiz, sabah serinliğinde toplanan Isparta güllerinin taze yapraklarından yapılır. Yapraklar tek tek ayıklanır, bakır kazanda kısık ateşte sabırla pişirilir.",
        "Ne glikoz şurubu ne renklendirici ne de yapay jelleştirici kullanılır. Kavanozu açtığınızda, bahçenin gül kokusu sofranıza yayılır.",
      ],
      ingredients: ["Taze Isparta gülü yaprağı", "Pancar şekeri, taze limon", "Katkısız, boyasız, şurupsuz"],
      usage: [
        "Taze ekmek, kaymak ya da yoğurtla kahvaltıda ikram edin.",
        "Çayın yanında bir tatlı kaşığı, damakta gül bahçesi gezintisi gibidir.",
      ],
      storage: "Açıldıktan sonra buzdolabında saklayın ve 1 ay içinde tüketin. Açılmadan serin yerde 18 ay dayanır.",
      highlights: [
        { icon: "clock", label: "Bakır kazanda kısık ateşte" },
        { icon: "award", label: "Yapraklar elde ayıklanır" },
        { icon: "leaf", label: "Katkısız & boyasız" },
      ],
      specs: [
        ["Net miktar", "380 g"], ["İçerik", "Gül yaprağı, şeker, limon"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "18 ay"], ["Şeker", "Düşük — geleneksel ölçü"],
      ],
    },
    en: {
      tagline: "Handmade rose petal jam, simmered slowly in a copper cauldron from fresh petals.",
      gallery: [
        { label: "jam — jar", tone: "rose" },
        { label: "in the copper pot", tone: "cream" },
        { label: "rose petals", tone: "rose" },
        { label: "breakfast table", tone: "sage" },
      ],
      desc: [
        "Our Rose Petal Jam is made from the fresh petals of Isparta roses picked in the cool of morning. The petals are sorted one by one and simmered patiently in a copper cauldron over low heat.",
        "No glucose syrup, no colouring, no artificial setting agent. The moment you open the jar, the scent of the rose garden fills your table.",
      ],
      ingredients: ["Fresh Isparta rose petals", "Beet sugar, fresh lemon", "No additives, dyes or syrups"],
      usage: [
        "Serve at breakfast with fresh bread, clotted cream or yoghurt.",
        "A teaspoon beside your tea is like a stroll through a rose garden.",
      ],
      storage: "Refrigerate after opening and use within 1 month. Keeps 18 months unopened in a cool place.",
      highlights: [
        { icon: "clock", label: "Slow-simmered in copper" },
        { icon: "award", label: "Petals sorted by hand" },
        { icon: "leaf", label: "No additives or dyes" },
      ],
      specs: [
        ["Net weight", "380 g"], ["Contents", "Rose petals, sugar, lemon"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "18 months"], ["Sugar", "Low — traditional measure"],
      ],
    },
  },

  "lavanta-yagi": {
    tr: {
      tagline: "Bahçemizin lavanta demetlerinden bakır imbikte damıtılan saf lavanta yağı.",
      gallery: [
        { label: "şişe — önden", tone: "sage" },
        { label: "lavanta tarlası", tone: "sage" },
        { label: "damıtma anı", tone: "cream" },
        { label: "doku & detay", tone: "rose" },
      ],
      desc: [
        "Lavanta Yağımız, bahçemizde kimyasal kullanılmadan yetişen lavantaların çiçeklenme mevsiminde elle biçilip bakır imbiklerde damıtılmasıyla elde edilir.",
        "Sakinleştirici kokusuyla uyku öncesi rahatlamadan cilt bakımına, ev kokusundan masaj yağına kadar pek çok kullanımı vardır. Saf ve katkısızdır.",
      ],
      ingredients: ["Saf lavanta (Lavandula) yağı", "Seyreltilmemiş, katkısız", "Bakır imbikte geleneksel damıtma"],
      usage: [
        "Yastığınıza ya da difüzöre birkaç damla damlatarak sakinleştirici kokusundan yararlanın.",
        "Cilt için bir taşıyıcı yağla seyrelterek masaj yağı olarak kullanabilirsiniz.",
      ],
      storage: "Ağzı sıkıca kapalı, koyu renkli şişede; serin ve karanlık bir yerde saklayın.",
      highlights: [
        { icon: "droplet", label: "Bakır imbikte damıtma" },
        { icon: "sprout", label: "Kimyasalsız kendi tarlamızdan" },
        { icon: "leaf", label: "Saf & seyreltilmemiş" },
      ],
      specs: [
        ["Net miktar", "10 ml"], ["İçerik", "Saf lavanta yağı"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "24 ay"], ["Kullanım", "Aromaterapi & cilt bakımı"],
      ],
    },
    en: {
      tagline: "Pure lavender oil, distilled in copper stills from our garden's lavender bundles.",
      gallery: [
        { label: "bottle — front", tone: "sage" },
        { label: "lavender field", tone: "sage" },
        { label: "the distillation", tone: "cream" },
        { label: "texture & detail", tone: "rose" },
      ],
      desc: [
        "Our Lavender Oil comes from lavender grown in our garden without chemicals, cut by hand in flowering season and distilled in copper stills.",
        "With its calming scent it serves many purposes — from bedtime relaxation to skin care, home fragrance to massage oil. Pure and additive-free.",
      ],
      ingredients: ["Pure lavender (Lavandula) oil", "Undiluted, additive-free", "Traditionally distilled in copper stills"],
      usage: [
        "Add a few drops to your pillow or diffuser to enjoy its calming scent.",
        "For skin, dilute with a carrier oil and use as a massage oil.",
      ],
      storage: "Keep tightly closed in a dark glass bottle, in a cool, dark place.",
      highlights: [
        { icon: "droplet", label: "Copper-still distilled" },
        { icon: "sprout", label: "Chemical-free, from our own field" },
        { icon: "leaf", label: "Pure & undiluted" },
      ],
      specs: [
        ["Net volume", "10 ml"], ["Contents", "Pure lavender oil"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "24 months"], ["Use", "Aromatherapy & skin care"],
      ],
    },
  },

  "lavanta-mayasi": {
    tr: {
      tagline: "Lavanta çiçeklerinden damıtılan ferahlatıcı lavanta suyu — yöresel adıyla lavanta mayası.",
      gallery: [
        { label: "şişe — önden", tone: "sage" },
        { label: "lavanta hasadı", tone: "sage" },
        { label: "damıtma anı", tone: "cream" },
        { label: "doku & detay", tone: "rose" },
      ],
      desc: [
        "Lavanta Mayamız, bahçemizin lavanta çiçeklerinin bakır imbiklerde damıtılmasıyla elde edilen saf lavanta suyudur. İçine hiçbir koruyucu, alkol ya da yapay koku katılmaz.",
        "Cildi yatıştırır ve ferahlatır; yastığa, çarşafa ya da odaya sıkıldığında sakinleştirici lavanta kokusunu her yere taşır.",
      ],
      ingredients: ["Saf lavanta (Lavandula) suyu", "Doğal lavanta yağı — eser miktarda", "Katkısız, alkolsüz, koruyucusuz"],
      usage: [
        "Temizlenmiş cilde tonik olarak, bir pamukla ya da püskürterek uygulayın.",
        "Yastık, çarşaf ve ortam spreyi olarak kullanarak sakinleştirici kokusundan yararlanın.",
      ],
      storage: "Serin ve güneş görmeyen bir yerde saklayın. Açıldıktan sonra 6 ay içinde tüketilmesi önerilir.",
      highlights: [
        { icon: "droplet", label: "Bakır imbikte damıtma" },
        { icon: "leaf", label: "Alkolsüz & koruyucusuz" },
        { icon: "sprout", label: "Kimyasalsız kendi tarlamızdan" },
      ],
      specs: [
        ["Net miktar", "400 ml"], ["İçerik", "Saf lavanta suyu"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "18 ay"], ["Kullanım", "Cilt & ortam spreyi"],
      ],
    },
    en: {
      tagline: "Refreshing lavender water distilled from lavender blooms — known locally as lavanta mayası.",
      gallery: [
        { label: "bottle — front", tone: "sage" },
        { label: "lavender harvest", tone: "sage" },
        { label: "the distillation", tone: "cream" },
        { label: "texture & detail", tone: "rose" },
      ],
      desc: [
        "Our Lavender Water is pure hydrosol distilled from our garden's lavender blooms in copper stills. No preservative, alcohol or synthetic fragrance is added.",
        "It soothes and refreshes the skin; misted onto pillows, linens or into the room, it carries lavender's calming scent everywhere.",
      ],
      ingredients: ["Pure lavender (Lavandula) water", "Natural lavender oil — trace amount", "No additives, alcohol-free, preservative-free"],
      usage: [
        "Apply to cleansed skin as a tonic, with a cotton pad or misted directly.",
        "Use as a pillow, linen and room spray to enjoy its calming scent.",
      ],
      storage: "Keep cool and away from sunlight. Best used within 6 months of opening.",
      highlights: [
        { icon: "droplet", label: "Copper-still distilled" },
        { icon: "leaf", label: "Alcohol & preservative-free" },
        { icon: "sprout", label: "Chemical-free, from our own field" },
      ],
      specs: [
        ["Net volume", "400 ml"], ["Contents", "Pure lavender water"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "18 months"], ["Use", "Skin & room spray"],
      ],
    },
  },

  "gul-sirkesi": {
    tr: {
      tagline: "Isparta gülü yapraklarıyla doğal fermente edilen, gül kokulu ev sirkesi.",
      gallery: [
        { label: "şişe — önden", tone: "cream" },
        { label: "gül yaprakları", tone: "rose" },
        { label: "fermantasyon", tone: "sage" },
        { label: "sofra sunumu", tone: "cream" },
      ],
      desc: [
        "Gül Sirkemiz, taze gül yapraklarının doğal yolla, aylarca fermente edilmesiyle yapılır. Pastörize edilmez, filtre edilip sadeleştirilmez; içindeki 'sirke anası' canlılığının işaretidir.",
        "Hafif gül kokusuyla salatalara bambaşka bir tat verir; geleneksel olarak cilt ve saç bakımında da kullanılır.",
      ],
      ingredients: ["Taze Isparta gülü yaprağı", "Doğal fermantasyon — aylarca", "Katkısız, pastörizesiz"],
      usage: [
        "Salata ve zeytinyağlı yemeklerde sofra sirkesi olarak kullanın.",
        "Cilt için suyla seyrelterek tonik, saç için son durulama suyu olarak kullanabilirsiniz.",
      ],
      storage: "Serin ve karanlık bir yerde, ağzı kapalı cam şişede saklayın. Tortu, doğallığının işaretidir.",
      highlights: [
        { icon: "clock", label: "Aylarca doğal fermantasyon" },
        { icon: "leaf", label: "Pastörizesiz & katkısız" },
        { icon: "sprout", label: "Kendi bahçemizin gülleri" },
      ],
      specs: [
        ["Net miktar", "500 ml"], ["İçerik", "Gül yaprağı sirkesi"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "24 ay"], ["Kullanım", "Sofra & doğal bakım"],
      ],
    },
    en: {
      tagline: "Rose-scented homemade vinegar, naturally fermented with Isparta rose petals.",
      gallery: [
        { label: "bottle — front", tone: "cream" },
        { label: "rose petals", tone: "rose" },
        { label: "fermentation", tone: "sage" },
        { label: "at the table", tone: "cream" },
      ],
      desc: [
        "Our Rose Vinegar is made by naturally fermenting fresh rose petals over months. It is not pasteurised or fine-filtered; the 'vinegar mother' inside is a sign of its liveliness.",
        "Its light rose aroma gives salads a character all their own; traditionally it is also used in skin and hair care.",
      ],
      ingredients: ["Fresh Isparta rose petals", "Natural fermentation — over months", "No additives, unpasteurised"],
      usage: [
        "Use as a table vinegar for salads and olive-oil dishes.",
        "Dilute with water as a skin tonic, or use as a final rinse for hair.",
      ],
      storage: "Keep in a closed glass bottle in a cool, dark place. Sediment is a sign of its naturalness.",
      highlights: [
        { icon: "clock", label: "Months of natural fermentation" },
        { icon: "leaf", label: "Unpasteurised & additive-free" },
        { icon: "sprout", label: "Roses from our own garden" },
      ],
      specs: [
        ["Net volume", "500 ml"], ["Contents", "Rose petal vinegar"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "24 months"], ["Use", "Table & natural care"],
      ],
    },
  },

  "tarhana": {
    tr: {
      tagline: "Güneşte gün gün kurutulan, mayalı ev tarhanası — kış sofralarının sıcak başlangıcı.",
      gallery: [
        { label: "tarhana — kase", tone: "sage" },
        { label: "güneşte kuruma", tone: "cream" },
        { label: "çorba servisi", tone: "rose" },
        { label: "doku & detay", tone: "sage" },
      ],
      desc: [
        "Ev Tarhanamız; bahçe domatesi, tatlı biber, soğan, nane ve yoğurdun haftalar süren bir mayalanmayla buluşmasıyla yapılır. Hamur, bezler üzerine serilip güneşte gün gün kurutulur, sonra elle ufalanır.",
        "Hiçbir un katkısı, koruyucu ya da hazır baharat kullanılmaz. Bir kaşığı kaynar suyla buluştuğunda, anneannelerin mutfağındaki o ekşimsi, derin lezzet geri gelir.",
      ],
      ingredients: ["Bahçe domatesi & tatlı biber", "Süzme yoğurt, soğan, nane", "Taş değirmen unu, deniz tuzu"],
      usage: [
        "Bir su bardağı tarhanayı 2,5 bardak ılık su ya da et suyuyla ezerek karıştırın.",
        "Kısık ateşte, sürekli karıştırarak 15–20 dakika pişirin. Üzerine kızdırılmış tereyağı ve pul biber gezdirin.",
      ],
      storage: "Ağzı kapalı kavanozda, kuru ve serin bir yerde saklayın. Açılmadan 12 ay dayanır.",
      highlights: [
        { icon: "clock", label: "Haftalarca doğal mayalanma" },
        { icon: "sprout", label: "Güneşte kurutuldu" },
        { icon: "leaf", label: "Katkısız & koruyucusuz" },
      ],
      specs: [
        ["Net miktar", "500 g"], ["İçerik", "Domates, biber, yoğurt, un, nane"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "12 ay"], ["Porsiyon", "~10 kâse çorba"],
      ],
    },
    en: {
      tagline: "Sun-dried, naturally fermented homemade tarhana — the warm start to winter tables.",
      gallery: [
        { label: "tarhana — bowl", tone: "sage" },
        { label: "drying in the sun", tone: "cream" },
        { label: "served as soup", tone: "rose" },
        { label: "texture & detail", tone: "sage" },
      ],
      desc: [
        "Our Homemade Tarhana brings together garden tomatoes, sweet peppers, onion, mint and yoghurt through weeks of slow fermentation. The dough is spread on cloths, sun-dried day by day, then crumbled by hand.",
        "No added flour, preservative or ready-made spice is used. The moment a spoonful meets boiling water, that tangy, deep flavour of a grandmother's kitchen returns.",
      ],
      ingredients: ["Garden tomatoes & sweet peppers", "Strained yoghurt, onion, mint", "Stone-milled flour, sea salt"],
      usage: [
        "Whisk one cup of tarhana into 2.5 cups of warm water or stock until smooth.",
        "Simmer over low heat, stirring, for 15–20 minutes. Finish with sizzling butter and chilli flakes.",
      ],
      storage: "Keep in a sealed jar in a cool, dry place. Lasts 12 months unopened.",
      highlights: [
        { icon: "clock", label: "Weeks of natural fermentation" },
        { icon: "sprout", label: "Sun-dried" },
        { icon: "leaf", label: "No additives or preservatives" },
      ],
      specs: [
        ["Net weight", "500 g"], ["Contents", "Tomato, pepper, yoghurt, flour, mint"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "12 months"], ["Yield", "~10 bowls of soup"],
      ],
    },
  },

  "eriste": {
    tr: {
      tagline: "Yumurta ve sütle yoğrulan, ince ince elle açılıp kesilen köy usulü erişte.",
      gallery: [
        { label: "erişte — kase", tone: "cream" },
        { label: "el ile açma", tone: "sage" },
        { label: "pişmiş servis", tone: "rose" },
        { label: "doku & detay", tone: "cream" },
      ],
      desc: [
        "Ev Eriştemiz; köy yumurtası, süt ve taş değirmen unuyla yoğrulur. Hamur oklavayla ince ince açılır, katlanır ve elle kesilir — sonra rüzgârda, gölgede kurutulur.",
        "Makine değil, sabırlı eller işin başında. Haşlandığında dağılmaz, hamur kokmaz; tereyağı ve cevizle buluştuğunda sade ama doyurucu bir sofra olur.",
      ],
      ingredients: ["Taş değirmen buğday unu", "Köy yumurtası, süt", "Bir tutam deniz tuzu"],
      usage: [
        "Bol tuzlu kaynar suda 8–10 dakika haşlayın, süzün.",
        "Kızdırılmış tereyağı, ceviz içi ve dilerseniz lor peyniriyle harmanlayıp sıcak servis edin.",
      ],
      storage: "Ağzı kapalı kavanozda, kuru ve serin yerde saklayın. 10 ay dayanır.",
      highlights: [
        { icon: "award", label: "El açması, makinesiz" },
        { icon: "sprout", label: "Gölgede doğal kurutma" },
        { icon: "leaf", label: "Katkısız, sade içerik" },
      ],
      specs: [
        ["Net miktar", "400 g"], ["İçerik", "Un, yumurta, süt, tuz"],
        ["Köken", "Eğirdir, Isparta"], ["Raf ömrü", "10 ay"], ["Pişme süresi", "8–10 dakika"],
      ],
    },
    en: {
      tagline: "Village-style noodles kneaded with egg and milk, rolled thin and cut by hand.",
      gallery: [
        { label: "erişte — bowl", tone: "cream" },
        { label: "rolling by hand", tone: "sage" },
        { label: "cooked & served", tone: "rose" },
        { label: "texture & detail", tone: "cream" },
      ],
      desc: [
        "Our Handmade Erişte is kneaded from village eggs, milk and stone-milled flour. The dough is rolled paper-thin, folded and cut by hand — then dried in the breeze, in the shade.",
        "Patient hands, not machines, do the work. It holds together when boiled and never tastes of raw dough; tossed with butter and walnuts it makes a simple, satisfying table.",
      ],
      ingredients: ["Stone-milled wheat flour", "Village eggs, milk", "A pinch of sea salt"],
      usage: [
        "Boil in plenty of salted water for 8–10 minutes, then drain.",
        "Toss with sizzling butter, walnuts and — if you like — curd cheese, and serve hot.",
      ],
      storage: "Keep in a sealed jar in a cool, dry place. Lasts 10 months.",
      highlights: [
        { icon: "award", label: "Hand-rolled, no machine" },
        { icon: "sprout", label: "Naturally shade-dried" },
        { icon: "leaf", label: "Simple, additive-free" },
      ],
      specs: [
        ["Net weight", "400 g"], ["Contents", "Flour, egg, milk, salt"],
        ["Origin", "Eğirdir, Isparta"], ["Shelf life", "10 months"], ["Cook time", "8–10 minutes"],
      ],
    },
  },
};

window.DETAILS = DETAILS;

// ── Small building blocks ─────────────────────────────────────────────
function Stepper({ qty, setQty, label }) {
  const btn = "flex items-center justify-center text-ink/70 hover:text-ink transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed";
  return (
    <div className="flex items-center gap-3">
      <span className="text-ink/55" style={{ fontSize: 13.5 }}>{label}</span>
      <div className="flex items-center rounded-full" style={{ border: "1px solid rgba(45,55,72,0.16)" }}>
        <button className={btn} style={{ width: 40, height: 44 }} onClick={() => setQty(Math.max(1, qty - 1))} disabled={qty <= 1} aria-label="−">
          <Icon name="minus" size={15} />
        </button>
        <span className="text-ink tabular-nums text-center" style={{ width: 28, fontSize: 16, fontWeight: 500 }}>{qty}</span>
        <button className={btn} style={{ width: 40, height: 44 }} onClick={() => setQty(Math.min(99, qty + 1))} aria-label="+">
          <Icon name="plus" size={15} />
        </button>
      </div>
    </div>
  );
}

function priceNumber(price) {
  const n = parseInt(String(price).replace(/[^\d]/g, ""), 10);
  return isNaN(n) ? 0 : n;
}

// ── Product detail page ───────────────────────────────────────────────
function ProductDetailPage({ slug, lang, setLang }) {
  const c = window.CONTENT[lang];
  const L = c.pdp;
  const cart = useCart();

  const [list, setList] = useStateP(null); // null = yükleniyor
  const [qty, setQty] = useStateP(1);
  const [fav, setFav] = useStateP(false);
  const [tab, setTab] = useStateP("desc");
  const [added, setAdded] = useStateP(false);

  useEffectP(() => {
    let cancelled = false;
    fetchCatalog(lang).then((items) => { if (!cancelled) setList(items); });
    return () => { cancelled = true; };
  }, [lang]);

  useEffectP(() => {
    setQty(1); setFav(false); setTab("desc"); setAdded(false);
    window.scrollTo(0, 0);
  }, [slug]);

  if (!list) {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <Nav c={c} lang={lang} setLang={setLang} />
        <div className="pt-[160px] pb-40 text-center text-ink/50">{lang === "tr" ? "Yükleniyor…" : "Loading…"}</div>
      </div>
    );
  }

  const idx = Math.max(0, list.findIndex((x) => x.slug === slug));
  const p = list[idx] || list[0];

  if (!p) {
    return (
      <div style={{ backgroundColor: "#faf7f2" }}>
        <Nav c={c} lang={lang} setLang={setLang} />
        <div className="pt-[160px] pb-40 text-center text-ink/50">{lang === "tr" ? "Ürün bulunamadı." : "Product not found."}</div>
      </div>
    );
  }

  const d = p; // zengin ürün detayları artık doğrudan katalog satırında

  function handleAddToCart() {
    cart.addItem(p, qty);
    setAdded(true);
  }
  const gallery = d.gallery;
  const heroImg = p.imagePath ? productImageUrl(p.imagePath) : null;
  const soldOut = (p.stock || 0) <= 0;
  const related = list.filter((x) => x.slug !== slug);

  const tabBody = {
    desc: <div className="space-y-4">{d.desc.map((t, i) => <p key={i} style={{ textWrap: "pretty" }}>{t}</p>)}</div>,
    ingredients: (
      <ul className="space-y-3">
        {d.ingredients.map((t, i) => (
          <li key={i} className="flex items-start gap-3">
            <span className="mt-2 shrink-0 rounded-full" style={{ width: 5, height: 5, backgroundColor: "var(--accent,#a87d79)" }} />
            <span>{t}</span>
          </li>
        ))}
      </ul>
    ),
    usage: (
      <ol className="space-y-4">
        {d.usage.map((t, i) => (
          <li key={i} className="flex items-start gap-4">
            <span className="shrink-0 flex items-center justify-center rounded-full font-serif text-ink"
              style={{ width: 28, height: 28, fontSize: 14, backgroundColor: "rgba(155,170,144,0.18)" }}>{i + 1}</span>
            <span className="pt-0.5">{t}</span>
          </li>
        ))}
      </ol>
    ),
    storage: <p style={{ textWrap: "pretty" }}>{d.storage}</p>,
  };

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />

      <main className="pt-[84px]">
        {/* Breadcrumb */}
        <div className="mx-auto max-w-[1240px] px-6 lg:px-10 pt-8">
          <nav className="flex items-center gap-2 text-ink/45" style={{ fontSize: 13 }}>
            <a href="/" className="hover:text-ink transition-colors">{L.home}</a>
            <span>/</span>
            <a href="/urunler" className="hover:text-ink transition-colors">{L.productsCrumb}</a>
            <span>/</span>
            <span className="text-ink/70">{p.name}</span>
          </nav>
        </div>

        {/* Hero: gallery + buy box */}
        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pt-8 pb-20 lg:pb-28">
          <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 items-start">
            {/* Gallery */}
            <div className="lg:col-span-7 lg:sticky lg:top-[96px]">
              {/* Tek görsel — küçük resim sırası kaldırıldı; tükenen ürün hafif blur'lu */}
              <div className="relative overflow-hidden rounded-[26px]">
                {heroImg
                  ? <img src={heroImg} alt={p.name} className={`rounded-[26px] block w-full h-auto ${soldOut ? "blur-[3px] grayscale-[35%]" : ""}`} />
                  : <Placeholder label={gallery[0].label} tone={gallery[0].tone}
                      rounded="rounded-[26px]" className="aspect-[5/4] w-full" />}
                {soldOut && (
                  <span className="absolute inset-0 flex items-center justify-center" style={{ backgroundColor: "rgba(250,247,242,0.30)" }}>
                    <span className="rounded-full px-6 py-2.5 text-cream" style={{ backgroundColor: "rgba(45,55,72,0.85)", fontSize: 15, fontWeight: 600, letterSpacing: "0.04em" }}>
                      {lang === "en" ? "Sold out" : "Tükendi"}
                    </span>
                  </span>
                )}
              </div>
            </div>

            {/* Buy box */}
            <div className="lg:col-span-5">
              <Eyebrow>{p.cat}</Eyebrow>
              <h1 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(30px,3.6vw,46px)", lineHeight: 1.1, letterSpacing: "-0.01em", textWrap: "balance" }}>
                {p.name}
              </h1>
              <p className="text-ink/65 mt-5" style={{ fontSize: 17, lineHeight: 1.7, textWrap: "pretty" }}>{d.tagline}</p>

              {/* Reviews + batch */}
              <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2">
                <div className="flex items-center gap-1.5">
                  <span className="flex items-center gap-0.5" style={{ color: "var(--accent,#bb8e89)" }}>
                    {[0, 1, 2, 3, 4].map((s) => <Icon key={s} name="star" size={14} stroke={0} className="fill-current" />)}
                  </span>
                  <span className="text-ink/55" style={{ fontSize: 13 }}>4.9 · 128</span>
                </div>
                <span className="h-3 w-px" style={{ backgroundColor: "rgba(45,55,72,0.16)" }} />
                <span className="text-ink/55" style={{ fontSize: 13 }}>{L.batch}</span>
              </div>

              {/* Price */}
              <div className="mt-7 flex items-baseline gap-3">
                <span className="font-serif text-ink" style={{ fontSize: 34, lineHeight: 1 }}>{p.price}</span>
                <span className="text-ink/45" style={{ fontSize: 14 }}>· {p.meta}</span>
              </div>

              {/* Qty + actions */}
              <div className="mt-7 flex flex-wrap items-center gap-3">
                <Stepper qty={qty} setQty={setQty} label={L.qty} />
              </div>
              <div className="mt-4 flex items-stretch gap-3">
                <button onClick={soldOut ? undefined : handleAddToCart} disabled={soldOut}
                  className="group flex-1 inline-flex items-center justify-center gap-2.5 rounded-full px-7 py-4 text-cream transition-all duration-400 hover:gap-3.5 disabled:cursor-not-allowed"
                  style={{ backgroundColor: soldOut ? "rgba(45,55,72,0.35)" : (added ? "#6f7e67" : "#2d3748"), fontSize: 15.5 }}>
                  <Icon name={added ? "check" : "cart"} size={19} />
                  {soldOut
                    ? (lang === "tr" ? "Tükendi" : "Sold Out")
                    : (added ? (lang === "tr" ? "Sepete Eklendi" : "Added to Cart") : (lang === "tr" ? "Sepete Ekle" : "Add to Cart"))}
                </button>
                <button onClick={() => setFav(!fav)} aria-label={L.fav} title={fav ? L.faved : L.fav}
                  className="shrink-0 flex items-center justify-center rounded-full transition-all duration-300"
                  style={{ width: 54, height: 54, border: "1px solid rgba(45,55,72,0.16)",
                    color: fav ? "#bb8e89" : "rgba(45,55,72,0.6)", backgroundColor: fav ? "rgba(187,142,137,0.10)" : "transparent" }}>
                  <Icon name="heart" size={20} stroke={fav ? 0 : 1.7} className={fav ? "fill-current" : ""} />
                </button>
              </div>
              <p className="mt-3 text-ink/50" style={{ fontSize: 13, lineHeight: 1.5 }}>
                {added
                  ? <a href="/sepet" className="underline hover:text-ink transition-colors">{lang === "tr" ? "Sepete git →" : "Go to cart →"}</a>
                  : (lang === "tr" ? "Sorularınız için sağ alttaki WhatsApp'tan da yazabilirsiniz." : "You can also reach us on WhatsApp for questions.")}
              </p>

              {/* Reassurance */}
              <div className="mt-6 flex flex-col gap-2.5">
                <div className="flex items-center gap-2.5 text-ink/65" style={{ fontSize: 13.5 }}>
                  {soldOut
                    ? <><Icon name="clock" size={16} style={{ color: "#b23c3c" }} />
                        {lang === "tr" ? "Tükendi — yeni hasatla birlikte tekrar stokta olacak" : "Sold out — back in stock with the next harvest"}</>
                    : <><Icon name="check" size={16} className="text-sage-deep" />{L.inStock}</>}
                </div>
                <div className="flex items-center gap-2.5 text-ink/65" style={{ fontSize: 13.5 }}>
                  <Icon name="truck" size={16} className="text-sage-deep" />{L.ship}
                </div>
              </div>

              {/* Highlights */}
              <div className="mt-8 pt-8" style={{ borderTop: "1px solid rgba(45,55,72,0.10)" }}>
                <h4 className="uppercase text-ink/45" style={{ fontSize: 11, letterSpacing: "0.2em" }}>{L.highlightsTitle}</h4>
                <div className="mt-4 grid sm:grid-cols-3 gap-4">
                  {d.highlights.map((h, i) => (
                    <div key={i} className="flex flex-col gap-2">
                      <span className="flex items-center justify-center rounded-full" style={{ width: 38, height: 38, backgroundColor: "rgba(155,170,144,0.16)" }}>
                        <Icon name={h.icon} size={18} className="text-sage-deep" />
                      </span>
                      <span className="text-ink/75" style={{ fontSize: 13, lineHeight: 1.45 }}>{h.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Detail tabs + specs */}
        <section style={{ backgroundColor: "#f3ede4" }}>
          <div className="mx-auto max-w-[1240px] px-6 lg:px-10 py-20 lg:py-28">
            <div className="grid lg:grid-cols-12 gap-10 lg:gap-16">
              <div className="lg:col-span-7">
                <div className="flex flex-wrap items-center gap-1" style={{ borderBottom: "1px solid rgba(45,55,72,0.12)" }}>
                  {["desc", "ingredients", "usage", "storage"].map((k) => (
                    <button key={k} onClick={() => setTab(k)} className="relative px-1 py-3 mr-6 transition-colors duration-300"
                      style={{ fontSize: 15, color: tab === k ? "#2d3748" : "rgba(45,55,72,0.5)" }}>
                      {L.tabs[k]}
                      <span className="absolute -bottom-px left-0 right-0 h-[2px] transition-all duration-300"
                        style={{ backgroundColor: "var(--accent,#a87d79)", transform: tab === k ? "scaleX(1)" : "scaleX(0)" }} />
                    </button>
                  ))}
                </div>
                <div className="mt-7 text-ink/70" style={{ fontSize: 16, lineHeight: 1.8 }}>{tabBody[tab]}</div>
              </div>

              {/* Specs */}
              <div className="lg:col-span-5">
                <div className="rounded-[20px] bg-cream p-7" style={{ boxShadow: "0 24px 50px -30px rgba(45,55,72,0.22)" }}>
                  <h4 className="uppercase text-ink/45" style={{ fontSize: 11, letterSpacing: "0.2em" }}>{L.specsTitle}</h4>
                  <dl className="mt-5">
                    {d.specs.map(([k, v], i) => (
                      <div key={i} className="flex items-baseline justify-between gap-4 py-3.5"
                        style={{ borderTop: i === 0 ? "none" : "1px solid rgba(45,55,72,0.08)" }}>
                        <dt className="text-ink/55 shrink-0" style={{ fontSize: 13.5 }}>{k}</dt>
                        <dd className="text-ink text-right" style={{ fontSize: 14.5, fontWeight: 500 }}>{v}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Related */}
        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 py-20 lg:py-28">
          <div className="flex items-end justify-between gap-6 mb-12">
            <div>
              <Eyebrow>{L.relatedTitle}</Eyebrow>
              <h2 className="font-serif text-ink mt-4" style={{ fontSize: "clamp(26px,3vw,40px)", lineHeight: 1.1, letterSpacing: "-0.01em" }}>{L.relatedSub}</h2>
            </div>
            <a href="/urunler" className="hidden sm:inline-flex items-center gap-2 text-ink/70 hover:text-ink transition-colors" style={{ fontSize: 14.5 }}>
              {L.back}<Icon name="arrowRight" size={15} />
            </a>
          </div>
          <div className="grid sm:grid-cols-3 gap-7">
            {related.map((r) => {
              const rImg = r.imagePath ? productImageUrl(r.imagePath) : null;
              const rSoldOut = (r.stock || 0) <= 0;
              return (
              <a key={r.slug} href={`/urun/${r.slug}`} className="group block">
                <div className={`relative overflow-hidden rounded-[18px] w-full ${rImg ? "" : "aspect-[4/3]"}`}>
                  {rImg
                    ? <img src={rImg} alt={r.label} loading="lazy" className={`block w-full h-auto rounded-[18px] transition-transform duration-[1100ms] ease-out group-hover:scale-[1.06] ${rSoldOut ? "blur-[3px] grayscale-[35%]" : ""}`} />
                    : <Placeholder label={r.label} tone={r.tone} rounded="rounded-[18px]"
                        className="absolute inset-0 transition-transform duration-[1100ms] ease-out group-hover:scale-[1.06]" />}
                  {rSoldOut && (
                    <span className="absolute inset-0 flex items-center justify-center" style={{ backgroundColor: "rgba(250,247,242,0.30)" }}>
                      <span className="rounded-full px-4 py-1.5 text-cream" style={{ backgroundColor: "rgba(45,55,72,0.85)", fontSize: 12.5, fontWeight: 600 }}>
                        {lang === "en" ? "Sold out" : "Tükendi"}
                      </span>
                    </span>
                  )}
                </div>
                <div className="flex items-end justify-between gap-3 pt-4">
                  <div>
                    <h3 className="font-serif text-ink" style={{ fontSize: 20, lineHeight: 1.15 }}>{r.name}</h3>
                    <p className="text-ink/55 mt-1" style={{ fontSize: 13 }}>{r.price} · {r.meta}</p>
                  </div>
                  <span className="shrink-0 flex items-center justify-center rounded-full text-ink transition-all duration-400"
                    style={{ width: 38, height: 38, border: "1px solid rgba(45,55,72,0.16)" }}>
                    <Icon name="arrowUpRight" size={16} className="transition-transform duration-400 group-hover:rotate-45" />
                  </span>
                </div>
              </a>
              );
            })}
          </div>
        </section>
      </main>

      <Footer c={c} />
    </div>
  );
}

Object.assign(window, { ProductDetailPage });
