// blog.jsx — SEO odaklı blog: Supabase'den çekilen içerik (admin panelden
// yönetilebilir), migration çalıştırılmadıysa aşağıdaki statik içeriğe
// (STATIC_BLOG_POSTS) zarif geri düşüş yapar — bkz. blog-catalog.jsx.
const { useState: useStateBlog, useEffect: useEffectBlog } = React;

// Her blok ya bir alt başlık ("h2") ya da bir paragraf ("p").
const STATIC_BLOG_POSTS = [
  {
    slug: "gul-suyunun-cilde-faydalari",
    date: "2026-03-10",
    tone: "rose",
    tr: {
      title: "Gül Suyunun Cilde 7 Faydası (ve Doğru Kullanım Şekli)",
      excerpt: "Isparta gülünden damıtılan saf gül suyu, cilt bakımında yüzyıllardır kullanılıyor. İşte bilimin ve geleneğin buluştuğu 7 fayda.",
      readMinutes: 5,
      blocks: [
        { type: "p", text: "Gül suyu, Rosa damascena çiçeklerinin buharla damıtılmasıyla elde edilen, katkısız bir cilt tonik. Isparta ve Eğirdir'in gül bahçelerinde yüzyıllardır süregelen bir üretim geleneği olan gül suyu, bugün de doğal cilt bakımının vazgeçilmezlerinden." },
        { type: "h2", text: "1. Cildi yatıştırır ve ferahlatır" },
        { type: "p", text: "Gül suyunun hafif antiseptik ve yatıştırıcı özellikleri, güneşte kalmış ya da tahriş olmuş ciltler için doğal bir rahatlama sağlar. Sabah ve akşam birkaç püskürtme, cildin gerginliğini azaltır." },
        { type: "h2", text: "2. Gözenekleri sıkılaştırır" },
        { type: "p", text: "Doğal bir tonik olarak gül suyu, temizlik sonrası cildin pH dengesini korumaya ve gözenekleri sıkılaştırmaya yardımcı olur. Makyaj öncesi kullanıldığında ciltteki fazla yağı da dengeler." },
        { type: "h2", text: "3. Nem dengesini korur" },
        { type: "p", text: "Alkol ve koruyucu içermeyen saf gül suyu, cildin doğal nem bariyerine zarar vermeden nem takviyesi yapar — özellikle kuru ciltler için gün içinde tazeleyici bir mist olarak kullanılabilir." },
        { type: "h2", text: "4. Cilt tonunu eşitlemeye yardımcı olur" },
        { type: "p", text: "Düzenli kullanımda gül suyu, cildin genel görünümünü daha canlı ve dinlenmiş hale getirir. Özellikle gül yağıyla zenginleştirilmiş formüllerde bu etki daha belirgin olur." },
        { type: "h2", text: "5. Göz çevresini canlandırır" },
        { type: "p", text: "Soğutulmuş gül suyuna batırılmış bir pamuk, göz çevresindeki şişkinlik ve yorgunluk hissini azaltmada geleneksel bir yöntemdir." },
        { type: "h2", text: "6. Doğal bir koku verir" },
        { type: "p", text: "Sentetik parfüm içermeyen gül suyu, cilde ağır kimyasallar olmadan hafif ve doğal bir gül kokusu bırakır." },
        { type: "h2", text: "7. Makyaj sonrası fiksatör olarak kullanılabilir" },
        { type: "p", text: "İnce bir sprey halinde uygulanan gül suyu, makyajın daha uzun süre canlı kalmasına yardımcı olabilir." },
        { type: "h2", text: "Doğru kullanım için 3 ipucu" },
        { type: "p", text: "Temizlenmiş cilde uygulayın, güneşten uzak ve serin bir yerde saklayın, açıldıktan sonra 6 ay içinde tüketin. Elfinrose Yağlı Gül Suyu, bu üç kurala uygun, bakır imbikte damıtılmış ve içine hiçbir koruyucu katılmamış şekilde üretilir." },
      ],
    },
    en: {
      title: "7 Skin Benefits of Rose Water (and How to Use It Right)",
      excerpt: "Pure rose water distilled from Isparta roses has been used in skincare for centuries. Here are 7 benefits where science meets tradition.",
      readMinutes: 5,
      blocks: [
        { type: "p", text: "Rose water is a pure skin tonic made by steam-distilling Rosa damascena blossoms. With a production tradition going back centuries in the rose gardens of Isparta and Eğirdir, it remains a staple of natural skincare today." },
        { type: "h2", text: "1. Soothes and refreshes the skin" },
        { type: "p", text: "Rose water's mild antiseptic and calming properties offer natural relief for sun-exposed or irritated skin. A few spritzes morning and evening can ease tightness and redness." },
        { type: "h2", text: "2. Tightens pores" },
        { type: "p", text: "As a natural toner, rose water helps restore the skin's pH balance after cleansing and tighten pores. Used before makeup, it also helps balance excess oil." },
        { type: "h2", text: "3. Maintains moisture balance" },
        { type: "p", text: "Free of alcohol and preservatives, pure rose water hydrates without disrupting the skin's natural moisture barrier — a refreshing mist for dry skin throughout the day." },
        { type: "h2", text: "4. Helps even out skin tone" },
        { type: "p", text: "With regular use, rose water can leave skin looking more vibrant and rested — an effect that's even more pronounced in formulas enriched with rose oil." },
        { type: "h2", text: "5. Revives the eye area" },
        { type: "p", text: "A cotton pad soaked in chilled rose water is a traditional way to reduce puffiness and tired-looking eyes." },
        { type: "h2", text: "6. Leaves a natural scent" },
        { type: "p", text: "Free of synthetic fragrance, rose water leaves a light, natural rose scent without harsh chemicals." },
        { type: "h2", text: "7. Works as a post-makeup setting mist" },
        { type: "p", text: "Applied as a fine mist, rose water can help makeup stay fresh for longer." },
        { type: "h2", text: "3 tips for correct use" },
        { type: "p", text: "Apply to cleansed skin, store away from sunlight in a cool place, and use within 6 months of opening. Elfinrose Rose Water follows all three rules — copper-still distilled, with no preservatives added." },
      ],
    },
  },
  {
    slug: "ev-yapimi-tarhana-nasil-yapilir",
    date: "2026-02-18",
    tone: "sage",
    tr: {
      title: "Ev Yapımı Tarhana Nasıl Yapılır? Geleneksel Tarifin İncelikleri",
      excerpt: "Bahçe domatesi, yoğurt ve haftalarca süren doğal mayalanma — ev tarhanasının lezzetinin sırrı sabırda saklı.",
      readMinutes: 6,
      blocks: [
        { type: "p", text: "Tarhana, Anadolu mutfağının en eski konserve yöntemlerinden biri. Yaz sebzelerinin bereketini kışa taşımanın, hiçbir katkı maddesi kullanmadan yapılan en doğal yolu." },
        { type: "h2", text: "Malzemeler nelerdir?" },
        { type: "p", text: "Geleneksel tarhana; bahçe domatesi, tatlı biber, soğan, nane, süzme yoğurt ve taş değirmen unundan yapılır. Her bir malzemenin mevsiminde ve olgunlaşmış halde toplanması, nihai lezzeti doğrudan etkiler." },
        { type: "h2", text: "Mayalanma neden bu kadar önemli?" },
        { type: "p", text: "Hamur karıldıktan sonra haftalarca süren doğal bir mayalanma sürecine bırakılır. Bu süreçte yoğurttaki laktik asit bakterileri hamuru ekşitir ve tarhanaya o karakteristik derin, ekşimsi tadı kazandırır. Acele edilen bir mayalanma, tarhananın lezzetini büyük ölçüde eksik bırakır." },
        { type: "h2", text: "Güneşte kurutma adımı" },
        { type: "p", text: "Mayalanan hamur ince bezler üzerine serilip güneşte gün gün kurutulur. Bu adım hem tarhananın raf ömrünü uzatır hem de güneşin doğal olarak lezzeti yoğunlaştırmasını sağlar. Kurutma tamamlandığında hamur elle ufalanarak tarhananın son haline getirilir." },
        { type: "h2", text: "Nasıl pişirilir?" },
        { type: "p", text: "Bir su bardağı tarhana, 2,5 bardak ılık su ya da et suyuyla pürüzsüz olana kadar karıştırılır. Kısık ateşte, sürekli karıştırarak 15-20 dakika pişirilir. Üzerine kızdırılmış tereyağı ve pul biber gezdirilerek servis edilir." },
        { type: "h2", text: "Nasıl saklanır?" },
        { type: "p", text: "Ağzı sıkıca kapanan bir kavanozda, kuru ve serin bir yerde saklanan ev tarhanası 12 aya kadar bozulmadan dayanır. Nem alması, küflenmeye yol açabileceği için özellikle dikkat edilmesi gereken bir noktadır." },
        { type: "p", text: "Elfinrose Ev Tarhanası, tam olarak bu geleneksel yöntemle — hiçbir un katkısı, koruyucu ya da hazır baharat kullanılmadan, haftalarca süren doğal mayalanmayla hazırlanır." },
      ],
    },
    en: {
      title: "How to Make Homemade Tarhana: The Traditional Recipe, Step by Step",
      excerpt: "Garden tomatoes, yoghurt, and weeks of natural fermentation — the secret to homemade tarhana's flavour lies in patience.",
      readMinutes: 6,
      blocks: [
        { type: "p", text: "Tarhana is one of Anatolian cuisine's oldest preservation methods — the most natural way to carry summer's bounty into winter, without a single additive." },
        { type: "h2", text: "What goes into it?" },
        { type: "p", text: "Traditional tarhana is made from garden tomatoes, sweet peppers, onion, mint, strained yoghurt and stone-milled flour. Picking each ingredient ripe and in season directly shapes the final flavour." },
        { type: "h2", text: "Why fermentation matters so much" },
        { type: "p", text: "Once mixed, the dough is left to ferment naturally for weeks. During this time, lactic acid bacteria in the yoghurt sour the dough, giving tarhana its characteristic deep, tangy flavour. Rushing the fermentation leaves the flavour noticeably flat." },
        { type: "h2", text: "The sun-drying step" },
        { type: "p", text: "The fermented dough is spread thin on cloths and sun-dried day by day. This extends shelf life and lets the sun naturally concentrate the flavour. Once dry, it's crumbled by hand into its final form." },
        { type: "h2", text: "How is it cooked?" },
        { type: "p", text: "Whisk one cup of tarhana into 2.5 cups of warm water or stock until smooth. Simmer over low heat, stirring constantly, for 15–20 minutes. Serve finished with sizzling butter and chilli flakes." },
        { type: "h2", text: "How should it be stored?" },
        { type: "p", text: "Kept in a tightly sealed jar in a cool, dry place, homemade tarhana lasts up to 12 months. Moisture is the main thing to guard against, as it can lead to mould." },
        { type: "p", text: "Elfinrose Homemade Tarhana is prepared exactly this way — no added flour, no preservatives, no ready-made spice, just weeks of natural fermentation." },
      ],
    },
  },
  {
    slug: "isparta-gulu-neden-ozel",
    date: "2026-01-22",
    tone: "rose",
    tr: {
      title: "Isparta Gülü (Rosa Damascena) Neden Bu Kadar Değerli?",
      excerpt: "Dünyanın en değerli gül yağı ve gül suyunun kaynağı olan Isparta gülünün hikayesi, iklimden hasat saatine uzanıyor.",
      readMinutes: 4,
      blocks: [
        { type: "p", text: "Isparta ve çevresi, dünya gül yağı üretiminin en önemli merkezlerinden biri. Bunun sebebi tesadüf değil — bölgenin rakımı, iklimi ve toprağı Rosa damascena için neredeyse ideal koşulları sunuyor." },
        { type: "h2", text: "İklim ve rakımın rolü" },
        { type: "p", text: "Isparta'nın 1000-1500 metre rakımı, gündüz-gece arasındaki büyük sıcaklık farkı ve bol güneşli günleri, gülün yağ ve koku bileşenlerini yoğunlaştıran koşullar oluşturuyor. Bu, dünyanın birçok yerinde yetiştirilen güllerde bulunmayan bir avantaj." },
        { type: "h2", text: "Neden sabahın erken saatlerinde toplanır?" },
        { type: "p", text: "Gülün uçucu yağ oranı, güneş yükseldikçe buharlaşarak azalır. Bu yüzden hasat, çiy kalkmadan, sabahın ilk ışığıyla birlikte elle yapılır. Bir kilogram gül yağı elde etmek için binlerce kilogram gül yaprağı gerekir — bu da gül yağının neden bu kadar değerli olduğunu açıklıyor." },
        { type: "h2", text: "Gül suyu ile gül yağı arasındaki fark" },
        { type: "p", text: "Gül yaprakları bakır imbiklerde buharla damıtıldığında iki ürün elde edilir: yüzeyde toplanan konsantre gül yağı ve damıtma suyunun geri kalanı olan gül suyu. Gül suyu, gül yağına kıyasla çok daha yaygın kullanılan, günlük cilt bakımına uygun, daha hafif bir üründür." },
        { type: "h2", text: "Eğirdir'deki bahçemiz" },
        { type: "p", text: "Elfin Gül Bahçesi, tam da bu coğrafyanın avantajlarından yararlanan Eğirdir'de, kimyasal gübre ve ilaç kullanılmadan yetiştirilen kendi gül fidanlarımızla üretim yapıyor. Her şişe gül suyumuz, bu topraklarda sabırla yetişen güllerin hikayesini taşıyor." },
      ],
    },
    en: {
      title: "Why Is the Isparta Rose (Rosa Damascena) So Prized?",
      excerpt: "The story behind the world's most valued rose oil and rose water source spans climate, altitude, and the exact hour of harvest.",
      readMinutes: 4,
      blocks: [
        { type: "p", text: "Isparta and its surroundings are one of the world's most important centres of rose oil production. That's no accident — the region's altitude, climate and soil offer near-ideal conditions for Rosa damascena." },
        { type: "h2", text: "The role of climate and altitude" },
        { type: "p", text: "Isparta's altitude of 1,000–1,500 metres, its large day-night temperature swing, and its abundant sunny days concentrate the rose's oil and fragrance compounds — an advantage roses grown in many other places simply don't have." },
        { type: "h2", text: "Why is it picked so early in the morning?" },
        { type: "p", text: "The rose's essential oil content evaporates as the sun climbs, so harvest is done by hand at first light, before the dew lifts. It takes thousands of kilograms of rose petals to yield a single kilogram of rose oil — which explains why rose oil is so prized." },
        { type: "h2", text: "The difference between rose water and rose oil" },
        { type: "p", text: "When rose petals are steam-distilled in copper stills, two products emerge: the concentrated rose oil that collects on the surface, and rose water, the rest of the distillate. Rose water is the far more everyday product — lighter, and suited to daily skincare." },
        { type: "h2", text: "Our garden in Eğirdir" },
        { type: "p", text: "Elfin Rose Garden makes the most of this region's advantages, growing our own rose saplings in Eğirdir without chemical fertiliser or pesticide. Every bottle of our rose water carries the story of roses grown patiently in this soil." },
      ],
    },
  },
  {
    slug: "bakir-kazanda-recel-yapimi",
    date: "2025-12-05",
    tone: "cream",
    tr: {
      title: "Bakır Kazanda Reçel Yapımı: Katkısız Reçelin Sırrı",
      excerpt: "Ne jelleştirici ne de aşırı şeker — bakır kazanda kısık ateşte saatlerce pişen reçelin lezzeti, yalnızca zamana ve doğru malzemeye dayanıyor.",
      readMinutes: 5,
      blocks: [
        { type: "p", text: "Bakır kazan, geleneksel reçel yapımının vazgeçilmez aracı. Isıyı eşit dağıtması ve reçelin yanmadan, kontrollü şekilde koyulaşmasını sağlaması, bakırı diğer malzemelerden ayıran en önemli özellik." },
        { type: "h2", text: "Jelleştirici kullanmadan nasıl koyulaşır?" },
        { type: "p", text: "Reçelin kıvamını veren şey aslında meyvenin kendi pektini ve uzun pişirme süresi. Kısık ateşte saatlerce pişen meyve, suyunu doğal olarak kaybederek kendiliğinden koyulaşır — hiçbir yapay jelleştiriciye ihtiyaç duymadan." },
        { type: "h2", text: "Neden az şeker yeterli?" },
        { type: "p", text: "Endüstriyel reçellerde şeker hem tatlandırıcı hem de koruyucu görevi görür. Ancak bakır kazanda uzun pişirme, meyvenin kendi şekerini yoğunlaştırdığı için çok daha az eklenen şekerle de dengeli bir tat elde edilebiliyor." },
        { type: "h2", text: "Patlıcan reçeli gibi alışılmadık lezzetler" },
        { type: "p", text: "Türk mutfağının zengin reçel geleneği, sadece meyvelerle sınırlı değil. Minik patlıcanların karanfil ve tarçınla birlikte saatlerce pişirilmesiyle yapılan patlıcan reçeli, dışı hafif çıtır içi yumuşacık, baharatlı ve alışılmadık bir lezzet sunuyor." },
        { type: "h2", text: "Doğru saklama" },
        { type: "p", text: "Açılmamış bir kavanoz reçel, serin ve karanlık bir yerde 18 aya kadar dayanabilir. Açıldıktan sonra ise buzdolabında saklanmalı ve makul bir sürede (genellikle 1 ay içinde) tüketilmelidir." },
        { type: "p", text: "Elfinrose Patlıcan Reçeli, tam olarak bu yöntemle — bakır kazanda, kısık ateşte saatlerce, hiçbir yapay jelleştirici ya da aşırı şeker kullanılmadan hazırlanıyor." },
      ],
    },
    en: {
      title: "Making Jam in a Copper Cauldron: The Secret to Additive-Free Preserves",
      excerpt: "No setting agent, no excess sugar — jam simmered for hours in a copper cauldron owes its flavour to time and the right ingredients alone.",
      readMinutes: 5,
      blocks: [
        { type: "p", text: "The copper cauldron is the indispensable tool of traditional jam-making. Its even heat distribution, letting jam thicken in a controlled way without scorching, is what sets copper apart from other materials." },
        { type: "h2", text: "How does it thicken without a setting agent?" },
        { type: "p", text: "What actually gives jam its texture is the fruit's own pectin combined with long cooking time. Simmered for hours over low heat, the fruit naturally loses moisture and thickens on its own — no artificial setting agent required." },
        { type: "h2", text: "Why a little sugar is enough" },
        { type: "p", text: "In industrial jams, sugar serves both as sweetener and preservative. But long cooking in a copper cauldron concentrates the fruit's own sugars, so a balanced flavour can be achieved with far less added sugar." },
        { type: "h2", text: "Unexpected flavours, like eggplant jam" },
        { type: "p", text: "Turkish cuisine's rich preserving tradition isn't limited to fruit. Eggplant jam — tiny eggplants simmered for hours with clove and cinnamon — is lightly firm outside, tender within, spiced and wonderfully unexpected." },
        { type: "h2", text: "Storing it properly" },
        { type: "p", text: "An unopened jar of jam keeps for up to 18 months in a cool, dark place. Once opened, it should be refrigerated and used within a reasonable time, typically a month." },
        { type: "p", text: "Elfinrose Eggplant Jam is made exactly this way — hours in a copper cauldron over low heat, with no artificial setting agent and no excess sugar." },
      ],
    },
  },
  {
    slug: "egirdirde-bir-gun",
    date: "2025-11-14",
    tone: "sage",
    tr: {
      title: "Eğirdir'de Bir Gün: Elfin Gül Bahçesi'nde Hasattan Sofraya",
      excerpt: "On bin metrekarelik bahçemizde bir günün nasıl geçtiğini, hasattan üretime kadar tüm süreci sizinle paylaşıyoruz.",
      readMinutes: 4,
      blocks: [
        { type: "p", text: "Isparta Eğirdir'in Yılgıncak Köyü'nde kurulu Elfin Gül Bahçesi'nde bir gün, güneş doğmadan, çiy henüz kalkmadan başlar." },
        { type: "h2", text: "Sabahın erken saatleri: hasat" },
        { type: "p", text: "Gül hasadı, uçucu yağ oranının en yüksek olduğu sabahın ilk ışığında, elle yapılır. Aynı sabah, bahçenin diğer köşelerinde mevsimine göre domates, patlıcan ya da biber toplanır — hepsi olgunluğunun tam kıvamında." },
        { type: "h2", text: "Öğleye doğru: damıtma ve pişirme" },
        { type: "p", text: "Toplanan güller kısa süre içinde bakır imbiklere aktarılır ve damıtma başlar. Aynı anda mutfakta, bir gün önce hazırlanmış tarhana hamuru güneşte kurumaya bırakılır ya da bakır kazanda reçel kısık ateşte pişmeye başlar." },
        { type: "h2", text: "Öğleden sonra: sabırlı bekleyiş" },
        { type: "p", text: "Üretimin çoğu, aslında beklemekten ibaret — tarhananın mayalanması, reçelin kısık ateşte koyulaşması, eriştenin gölgede kuruması. Bu bahçede acele eden yok; her ürün kendi zamanını buluyor." },
        { type: "h2", text: "Akşamüstü: paketleme ve sipariş hazırlığı" },
        { type: "p", text: "Günün sonunda, hazır olan ürünler kontrol edilip paketlenir. Sınırlı sayıda üretilen her parti, o günün emeğini ve o mevsimin lezzetini taşır." },
        { type: "p", text: "\"Hayata Gülümse\" sloganıyla yola çıktığımız bu bahçede, her ürünün arkasında gerçek bir emek ve gerçek bir gün var. Sizi de bir gün bahçemizde ağırlamak isteriz." },
      ],
    },
    en: {
      title: "A Day in Eğirdir: From Harvest to Table at Elfin Rose Garden",
      excerpt: "Here's how a day unfolds across our ten-thousand-square-metre garden, from the morning harvest all the way to the finished product.",
      readMinutes: 4,
      blocks: [
        { type: "p", text: "A day at Elfin Rose Garden, in Yılgıncak Village, Eğirdir, Isparta, begins before sunrise, before the dew has even lifted." },
        { type: "h2", text: "Early morning: the harvest" },
        { type: "p", text: "Roses are picked by hand at first light, when their essential oil content is at its peak. The same morning, other corners of the garden yield tomatoes, eggplant or peppers, depending on the season — each picked at the exact point of ripeness." },
        { type: "h2", text: "Toward midday: distilling and simmering" },
        { type: "p", text: "The picked roses are soon moved to copper stills and distillation begins. At the same time in the kitchen, tarhana dough prepared the day before is left to dry in the sun, or jam begins its slow simmer in the copper cauldron." },
        { type: "h2", text: "Afternoon: patient waiting" },
        { type: "p", text: "Most of the work is, in truth, waiting — tarhana fermenting, jam thickening over low heat, erişte drying in the shade. Nothing is rushed in this garden; every product finds its own time." },
        { type: "h2", text: "Evening: packing and preparing orders" },
        { type: "p", text: "By the end of the day, whatever is ready gets checked and packed. Each limited batch carries that day's work and that season's flavour." },
        { type: "p", text: "We began this work under the motto \"Smile at Life,\" and behind every product in this garden is a real day's real effort. We'd love to welcome you here one day, too." },
      ],
    },
  },
];

window.BLOG_POSTS = STATIC_BLOG_POSTS;

function BlogCard({ post, lang }) {
  const imgUrl = post.imagePath ? blogPhotoUrl(post.imagePath) : null;
  return (
    <a href={`/blog/${post.slug}`} className="group block">
      <div className="relative overflow-hidden rounded-[18px] aspect-[4/3] w-full">
        {imgUrl
          ? <img src={imgUrl} alt={post.title} loading="lazy" className="absolute inset-0 w-full h-full object-cover transition-transform duration-[1100ms] ease-out group-hover:scale-[1.06]" />
          : <Placeholder label={post.title} tone={post.tone} rounded="rounded-[18px]"
              className="absolute inset-0 transition-transform duration-[1100ms] ease-out group-hover:scale-[1.06]" />}
      </div>
      <div className="pt-4">
        <span className="text-ink/45" style={{ fontSize: 12.5 }}>
          {new Date(post.date).toLocaleDateString(lang === "tr" ? "tr-TR" : "en-US", { year: "numeric", month: "long", day: "numeric" })}
          {" · "}{post.readMinutes} {lang === "tr" ? "dk okuma" : "min read"}
        </span>
        <h3 className="font-serif text-ink mt-2" style={{ fontSize: 21, lineHeight: 1.2 }}>{post.title}</h3>
        <p className="text-ink/60 mt-2" style={{ fontSize: 14, lineHeight: 1.6 }}>{post.excerpt}</p>
      </div>
    </a>
  );
}

function BlogListPage({ lang, setLang }) {
  const c = window.CONTENT[lang];
  const [posts, setPosts] = useStateBlog(null); // null = yükleniyor

  useEffectBlog(() => {
    let cancelled = false;
    fetchBlogPosts(lang).then((list) => { if (!cancelled) setPosts(list); });
    window.scrollTo(0, 0);
    return () => { cancelled = true; };
  }, [lang]);

  const sorted = posts ? [...posts].sort((a, b) => new Date(b.date) - new Date(a.date)) : [];

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />
      <main className="pt-[110px] lg:pt-[128px]">
        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-6">
          <nav className="flex items-center gap-2 text-ink/45" style={{ fontSize: 13 }}>
            <a href="/" className="hover:text-ink transition-colors">{c.pdp.home}</a>
            <span>/</span>
            <span className="text-ink/70">Blog</span>
          </nav>
          <Eyebrow className="mt-8">{lang === "tr" ? "Bahçeden Notlar" : "Notes From the Garden"}</Eyebrow>
          <h1 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(30px,4vw,52px)", lineHeight: 1.08, letterSpacing: "-0.01em" }}>
            {lang === "tr" ? "Doğal ürünler, gelenek ve bahçemizden hikayeler." : "Natural products, tradition, and stories from our garden."}
          </h1>
        </section>

        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-28">
          {posts === null && (
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
              {["rose", "sage", "cream"].map((tone, i) => (
                <Placeholder key={i} label="" tone={tone} rounded="rounded-[18px]" className="aspect-[4/3] w-full" />
              ))}
            </div>
          )}
          {posts && sorted.length === 0 && (
            <p className="text-ink/50" style={{ fontSize: 15 }}>{lang === "tr" ? "Henüz yazı yok." : "No posts yet."}</p>
          )}
          {posts && sorted.length > 0 && (
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
              {sorted.map((post) => <BlogCard key={post.slug} post={post} lang={lang} />)}
            </div>
          )}
        </section>
      </main>
      <Footer c={c} />
    </div>
  );
}

function BlogPostPage({ slug, lang, setLang }) {
  const c = window.CONTENT[lang];
  const [posts, setPosts] = useStateBlog(null); // null = yükleniyor

  useEffectBlog(() => {
    let cancelled = false;
    fetchBlogPosts(lang).then((list) => { if (!cancelled) setPosts(list); });
    window.scrollTo(0, 0);
    return () => { cancelled = true; };
  }, [lang, slug]);

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

  const post = posts.find((p) => p.slug === slug);
  if (!post) {
    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" ? "Yazı bulunamadı." : "Post not found."}</div>
        <Footer c={c} />
      </div>
    );
  }

  const imgUrl = post.imagePath ? blogPhotoUrl(post.imagePath) : null;
  const related = posts.filter((p) => p.slug !== slug).slice(0, 3);

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />
      <main className="pt-[110px] lg:pt-[128px]">
        <article className="mx-auto max-w-[760px] px-6 lg:px-10 pb-24">
          <nav className="flex items-center gap-2 text-ink/45" style={{ fontSize: 13 }}>
            <a href="/" className="hover:text-ink transition-colors">{c.pdp.home}</a>
            <span>/</span>
            <a href="/blog" className="hover:text-ink transition-colors">Blog</a>
          </nav>
          <span className="text-ink/45 mt-8 block" style={{ fontSize: 12.5 }}>
            {new Date(post.date).toLocaleDateString(lang === "tr" ? "tr-TR" : "en-US", { year: "numeric", month: "long", day: "numeric" })}
            {" · "}{post.readMinutes} {lang === "tr" ? "dk okuma" : "min read"}
          </span>
          <h1 className="font-serif text-ink mt-4" style={{ fontSize: "clamp(28px,4vw,44px)", lineHeight: 1.15, letterSpacing: "-0.01em", textWrap: "balance" }}>
            {post.title}
          </h1>
          {imgUrl
            ? <img src={imgUrl} alt={post.title} className="rounded-[20px] object-cover aspect-[16/9] w-full mt-8" />
            : <Placeholder label={post.title} tone={post.tone} rounded="rounded-[20px]" className="aspect-[16/9] w-full mt-8" />}
          <div className="mt-10 text-ink/75" style={{ fontSize: 16.5, lineHeight: 1.85 }}>
            {post.blocks.map((block, i) => block.type === "h2"
              ? <h2 key={i} className="font-serif text-ink mt-9 mb-3" style={{ fontSize: 23 }}>{block.text}</h2>
              : <p key={i} className="mt-4" style={{ textWrap: "pretty" }}>{block.text}</p>
            )}
          </div>
        </article>

        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-28">
          <Eyebrow>{lang === "tr" ? "Diğer Yazılar" : "More Posts"}</Eyebrow>
          <div className="grid sm:grid-cols-3 gap-7 mt-8">
            {related.map((p) => <BlogCard key={p.slug} post={p} lang={lang} />)}
          </div>
        </section>
      </main>
      <Footer c={c} />
    </div>
  );
}

Object.assign(window, { BlogListPage, BlogPostPage });