/* global React, ReactDOM, Masthead, Header, Footer */

const LOCALIZED_CHAPTER_IMAGES = {
  women: {
    build: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1800&q=80",
    wear: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=1800&q=80",
    style: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1800&q=80",
    fit: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1800&q=80",
    finish: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1800&q=80",
    seasonal: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=1800&q=80",
  },
  men: {
    build: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1800&q=80",
    wear: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1800&q=80",
    style: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=1800&q=80",
    fit: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1800&q=80",
    finish: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1800&q=80",
    seasonal: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=1800&q=80",
  },
};

const CHAPTER_ORDER = ["build", "wear", "style", "fit", "finish", "seasonal"];

const CHUNK_L3_LINKS = {
  women: {
    seasonal: ["spring", "summer", "fall", "winter", "transitional"],
    style: ["trends", "editorial-direction", "color", "pattern", "personal-style", "minimalism", "classic-dressing"],
    fit: ["shirts", "trousers", "denim", "outerwear", "shoes", "alterations", "petite", "tall"],
    finish: ["skin-outfit-pairings", "lip-and-look", "nails-and-palette", "fragrance-by-mood", "hair-and-texture", "jewelry-and-metal", "bags-and-shoes", "beauty-bridges"],
  },
  men: {
    finish: ["skincare-for-men", "fragrance", "hair", "grooming-basics"],
    seasonal: ["spring", "summer", "fall", "winter", "transitional-dressing"],
  },
};

const MEN_FINISH_L3_LABELS = {
  es: ["Cuidado de piel masculino", "Fragancia", "Pelo", "Grooming básico"],
  pt: ["Skincare masculino", "Fragrância", "Cabelo", "Grooming básico"],
  fr: ["Soin de peau homme", "Parfum", "Cheveux", "Grooming de base"],
  de: ["Hautpflege für Herren", "Duft", "Haare", "Grooming-Basics"],
  zh: ["男士护肤", "香气", "头发", "基础理容"],
  ar: ["عناية بشرة للرجال", "عطر", "شعر", "أساسيات العناية"],
  hi: ["पुरुष स्किनकेयर", "खुशबू", "बाल", "ग्रूमिंग बेसिक्स"],
};

const WOMEN_CHUNK_TWO_L3_LABELS = {
  es: {
    style: ["Tendencias", "Dirección editorial", "Color", "Patrón", "Estilo personal", "Minimalismo", "Clásico"],
    fit: ["Camisas", "Pantalones", "Denim", "Abrigos", "Zapatos", "Arreglos", "Petite", "Alta"],
    finish: ["Piel y outfit", "Labio y look", "Uñas y paleta", "Fragancia por mood", "Pelo y textura", "Joyería y metal", "Bolsos y zapatos", "Puentes de belleza"],
  },
  pt: {
    style: ["Tendências", "Direção editorial", "Cor", "Estampa", "Estilo pessoal", "Minimalismo", "Clássico"],
    fit: ["Camisas", "Calças", "Denim", "Casacos", "Sapatos", "Ajustes", "Petite", "Alta"],
    finish: ["Pele e look", "Lábio e look", "Unhas e paleta", "Fragrância por mood", "Cabelo e textura", "Joias e metal", "Bolsas e sapatos", "Pontes de beleza"],
  },
  fr: {
    style: ["Tendances", "Direction éditoriale", "Couleur", "Motif", "Style personnel", "Minimalisme", "Classique"],
    fit: ["Chemises", "Pantalons", "Denim", "Manteaux", "Chaussures", "Retouches", "Petite", "Grande"],
    finish: ["Peau et tenue", "Lèvre et look", "Ongles et palette", "Parfum par humeur", "Cheveux et texture", "Bijoux et métal", "Sacs et chaussures", "Ponts beauté"],
  },
  de: {
    style: ["Trends", "Editorial Direction", "Farbe", "Muster", "Persönlicher Stil", "Minimalismus", "Klassik"],
    fit: ["Hemden", "Hosen", "Denim", "Outerwear", "Schuhe", "Änderungen", "Petite", "Tall"],
    finish: ["Haut und Outfit", "Lippe und Look", "Nägel und Palette", "Duft nach Stimmung", "Haare und Textur", "Schmuck und Metall", "Taschen und Schuhe", "Beauty-Brücken"],
  },
  zh: {
    style: ["趋势", "编辑方向", "颜色", "图案", "个人风格", "极简", "经典"],
    fit: ["衬衫", "裤装", "牛仔", "外套", "鞋履", "修改", "小个子", "高个子"],
    finish: ["皮肤与造型", "唇色与造型", "指甲与色盘", "按情绪选香", "头发与质感", "首饰与金属", "包袋与鞋履", "美妆桥梁"],
  },
  ar: {
    style: ["ترند", "اتجاه تحريري", "لون", "نقشة", "أسلوب شخصي", "بساطة", "كلاسيكي"],
    fit: ["قمصان", "سراويل", "دنيم", "معاطف", "أحذية", "تعديلات", "Petite", "طويلة"],
    finish: ["بشرة وإطلالة", "شفاه ولوك", "أظافر ولوحة", "عطر حسب المزاج", "شعر وملمس", "مجوهرات ومعدن", "حقائب وأحذية", "جسور الجمال"],
  },
  hi: {
    style: ["ट्रेंड", "एडिटोरियल दिशा", "रंग", "पैटर्न", "निजी स्टाइल", "मिनिमलिज़्म", "क्लासिक"],
    fit: ["शर्ट", "पैंट", "डेनिम", "आउटरवेयर", "जूते", "अल्टरेशन", "पेटाइट", "टॉल"],
    finish: ["त्वचा और आउटफिट", "लिप और लुक", "नेल और पैलेट", "मूड से खुशबू", "बाल और टेक्सचर", "ज्वेलरी और मेटल", "बैग और जूते", "ब्यूटी ब्रिज"],
  },
};

const LOCALIZED_CHAPTER_COPY = {
  es: {
    edition: "Edición en español",
    home: "Inicio",
    lanes: { women: "Mujer", men: "Hombre" },
    stat: ["carril", "capítulos", "idioma"],
    proof: "Criterio editorial",
    related: "También dentro del carril",
    open: "Abrir",
    sections: {
      build: { title: "Construir", deck: "La base del armario: prendas, materiales, repeticiones y compras que sostienen todo lo demás.", chapters: ["Básicos", "Abrigos", "Calzado", "Accesorios", "Trabajo", "Cápsula"], proof: "Antes de hablar de estilo, esta página decide qué piezas merecen entrar, cuánto deben trabajar y qué problema resuelven." },
      wear: { title: "Vestir", deck: "Fórmulas para trabajo, fin de semana, viaje, calor, frío y noches en las que la ropa tiene que decidir rápido.", chapters: ["Fórmulas", "Smart casual", "Business casual", "Citas", "Viaje", "Clima"], proof: "La ropa se organiza por situación real, no por fantasía de guardarropa." },
      style: { title: "Estilo", deck: "Color, proporción, tendencia, referencias, minimalismo y el punto de vista que hace que una elección parezca tuya.", chapters: ["Color", "Proporción", "Tendencias", "Patrón", "Minimalismo", "Clásico"], proof: "El estilo se trata como dirección editorial: una regla visible, no una colección de ocurrencias." },
      fit: { title: "Ajuste", deck: "Hombro, tiro, largo, caída, manga, cintura, zapato y el vocabulario útil para comprar o ajustar mejor.", chapters: ["Camisas", "Pantalones", "Denim", "Abrigos", "Zapatos", "Arreglos"], proof: "El ajuste aparece antes del adorno porque una prenda correcta no necesita pelear por atención." },
      finish: { title: "Acabado", deck: "Pelo, piel, joyería, fragancia, reloj, metal, bolsos, zapatos y los últimos detalles que cierran el look.", chapters: ["Piel", "Pelo", "Fragancia", "Metal", "Bolsos", "Grooming"], proof: "El acabado no es extra; es la diferencia entre ropa puesta y una silueta terminada." },
      seasonal: { title: "Temporada", deck: "Primavera, verano, otoño, invierno y las semanas raras en las que el clima no respeta el calendario.", chapters: ["Primavera", "Verano", "Otoño", "Invierno", "Transición", "Viaje"], proof: "La temporada se traduce en tela, capa, zapato y proporción, no solo en colores de calendario." },
    },
  },
  pt: {
    edition: "Edição em português",
    home: "Início",
    lanes: { women: "Mulher", men: "Homem" },
    stat: ["caminho", "capítulos", "idioma"],
    proof: "Critério editorial",
    related: "Também dentro do caminho",
    open: "Abrir",
    sections: {
      build: { title: "Construir", deck: "A base do guarda-roupa: peças, materiais, repetições e compras que sustentam todo o resto.", chapters: ["Básicos", "Casacos", "Calçados", "Acessórios", "Trabalho", "Cápsula"], proof: "Antes de falar de estilo, esta página decide quais peças entram, quanto trabalham e que problema resolvem." },
      wear: { title: "Vestir", deck: "Fórmulas para trabalho, fim de semana, viagem, calor, frio e noites em que a roupa precisa decidir rápido.", chapters: ["Fórmulas", "Smart casual", "Business casual", "Encontro", "Viagem", "Clima"], proof: "A roupa é organizada por situação real, não por fantasia de armário." },
      style: { title: "Estilo", deck: "Cor, proporção, tendência, referências, minimalismo e o ponto de vista que faz a escolha parecer sua.", chapters: ["Cor", "Proporção", "Tendências", "Estampa", "Minimalismo", "Clássico"], proof: "Estilo é tratado como direção editorial: uma regra visível, não uma sequência de impulsos." },
      fit: { title: "Caimento", deck: "Ombro, gancho, comprimento, queda, manga, cintura, sapato e a linguagem útil para comprar ou ajustar melhor.", chapters: ["Camisas", "Calças", "Denim", "Casacos", "Sapatos", "Ajustes"], proof: "O caimento vem antes do adorno porque uma peça correta não precisa disputar atenção." },
      finish: { title: "Acabamento", deck: "Cabelo, pele, joias, fragrância, relógio, metal, bolsas, sapatos e os últimos detalhes que fecham o look.", chapters: ["Pele", "Cabelo", "Fragrância", "Metal", "Bolsas", "Grooming"], proof: "Acabamento não é extra; é a diferença entre roupa vestida e silhueta concluída." },
      seasonal: { title: "Estação", deck: "Primavera, verão, outono, inverno e as semanas estranhas em que o clima não respeita o calendário.", chapters: ["Primavera", "Verão", "Outono", "Inverno", "Transição", "Viagem"], proof: "A estação vira tecido, camada, sapato e proporção, não apenas cor de calendário." },
    },
  },
  fr: {
    edition: "Édition française",
    home: "Accueil",
    lanes: { women: "Femme", men: "Homme" },
    stat: ["univers", "chapitres", "langue"],
    proof: "Critère éditorial",
    related: "Aussi dans cet univers",
    open: "Ouvrir",
    sections: {
      build: { title: "Construire", deck: "La base du vestiaire: pièces, matières, répétitions et achats qui tiennent tout le reste.", chapters: ["Basiques", "Manteaux", "Chaussures", "Accessoires", "Travail", "Capsule"], proof: "Avant le style, cette page décide quelles pièces entrent, combien elles travaillent et quel problème elles résolvent." },
      wear: { title: "Porter", deck: "Formules pour le travail, le week-end, le voyage, la chaleur, le froid et les soirs où la tenue doit décider vite.", chapters: ["Formules", "Smart casual", "Business casual", "Rendez-vous", "Voyage", "Météo"], proof: "Les vêtements sont classés par situation réelle, pas par fantasme de vestiaire." },
      style: { title: "Style", deck: "Couleur, proportion, tendance, références, minimalisme et point de vue qui rendent un choix personnel.", chapters: ["Couleur", "Proportion", "Tendances", "Motif", "Minimalisme", "Classique"], proof: "Le style devient une direction éditoriale: une règle visible, pas une suite d'impulsions." },
      fit: { title: "Coupe", deck: "Épaule, taille, longueur, tombé, manche, ceinture, chaussure et vocabulaire utile pour acheter ou ajuster mieux.", chapters: ["Chemises", "Pantalons", "Denim", "Manteaux", "Chaussures", "Retouches"], proof: "La coupe passe avant l'ornement parce qu'une pièce juste n'a pas besoin de forcer." },
      finish: { title: "Finition", deck: "Cheveux, peau, bijoux, parfum, montre, métal, sacs, chaussures et derniers détails qui ferment la silhouette.", chapters: ["Peau", "Cheveux", "Parfum", "Métal", "Sacs", "Grooming"], proof: "La finition n'est pas un bonus; c'est ce qui sépare des vêtements portés d'une silhouette terminée." },
      seasonal: { title: "Saison", deck: "Printemps, été, automne, hiver et semaines étranges où la météo ne respecte pas le calendrier.", chapters: ["Printemps", "Été", "Automne", "Hiver", "Transition", "Voyage"], proof: "La saison se traduit en matière, couche, chaussure et proportion, pas seulement en couleur." },
    },
  },
  de: {
    edition: "Deutsche Ausgabe",
    home: "Start",
    lanes: { women: "Damen", men: "Herren" },
    stat: ["bereich", "kapitel", "sprache"],
    proof: "Redaktioneller Maßstab",
    related: "Auch in diesem Bereich",
    open: "Öffnen",
    sections: {
      build: { title: "Aufbauen", deck: "Die Basis der Garderobe: Teile, Materialien, Wiederholungen und Käufe, die alles andere tragen.", chapters: ["Basics", "Outerwear", "Schuhe", "Accessoires", "Arbeit", "Capsule"], proof: "Vor dem Stil entscheidet diese Seite, welche Teile hineingehören, wie oft sie arbeiten und welches Problem sie lösen." },
      wear: { title: "Tragen", deck: "Formeln für Arbeit, Wochenende, Reise, Hitze, Kälte und Abende, an denen Kleidung schnell entscheiden muss.", chapters: ["Formeln", "Smart Casual", "Business Casual", "Date", "Reise", "Wetter"], proof: "Kleidung wird nach echter Situation geordnet, nicht nach Garderobenfantasie." },
      style: { title: "Stil", deck: "Farbe, Proportion, Trend, Referenzen, Minimalismus und der Blickwinkel, der eine Wahl persönlich macht.", chapters: ["Farbe", "Proportion", "Trends", "Muster", "Minimalismus", "Klassisch"], proof: "Stil wird als redaktionelle Richtung behandelt: eine sichtbare Regel, keine Reihe von Impulsen." },
      fit: { title: "Passform", deck: "Schulter, Leibhöhe, Länge, Fall, Ärmel, Bund, Schuh und nützliche Sprache für bessere Käufe und Änderungen.", chapters: ["Hemden", "Hosen", "Denim", "Outerwear", "Schuhe", "Änderungen"], proof: "Passform kommt vor Schmuck, weil ein richtiges Teil nicht um Aufmerksamkeit kämpfen muss." },
      finish: { title: "Finish", deck: "Haare, Haut, Schmuck, Duft, Uhr, Metall, Taschen, Schuhe und die letzten Details, die den Look schließen.", chapters: ["Haut", "Haare", "Duft", "Metall", "Taschen", "Grooming"], proof: "Finish ist kein Extra; es ist der Unterschied zwischen angezogener Kleidung und fertiger Silhouette." },
      seasonal: { title: "Saison", deck: "Frühjahr, Sommer, Herbst, Winter und die seltsamen Wochen, in denen das Wetter den Kalender ignoriert.", chapters: ["Frühjahr", "Sommer", "Herbst", "Winter", "Übergang", "Reise"], proof: "Saison bedeutet Stoff, Lage, Schuh und Proportion, nicht nur Kalenderfarbe." },
    },
  },
  zh: {
    edition: "中文版",
    home: "首页",
    lanes: { women: "女装", men: "男装" },
    stat: ["路线", "章节", "语言"],
    proof: "编辑标准",
    related: "同一路线",
    open: "打开",
    sections: {
      build: { title: "建立", deck: "衣橱的底层结构：单品、面料、重复穿着和真正能支撑其他造型的购买决定。", chapters: ["基础", "外套", "鞋履", "配饰", "工作", "胶囊"], proof: "在讨论风格之前，先判断哪些单品应该进入衣橱、它们要工作多久、解决什么问题。" },
      wear: { title: "穿着", deck: "工作、周末、旅行、炎热、寒冷和夜晚的穿衣公式，让衣服在真实场景里运转。", chapters: ["公式", "Smart casual", "Business casual", "约会", "旅行", "天气"], proof: "页面按真实生活场景组织衣服，而不是按想象中的衣橱分类。" },
      style: { title: "风格", deck: "颜色、比例、趋势、参考、极简和让选择看起来属于你的编辑视角。", chapters: ["颜色", "比例", "趋势", "图案", "极简", "经典"], proof: "风格被当作编辑方向处理：有清楚规则，而不是一串临时冲动。" },
      fit: { title: "合身", deck: "肩线、裆深、长度、垂坠、袖长、腰部、鞋履，以及更会购买和修改的语言。", chapters: ["衬衫", "裤装", "牛仔", "外套", "鞋履", "修改"], proof: "合身先于装饰，因为真正正确的衣服不需要大声证明自己。" },
      finish: { title: "收尾", deck: "头发、皮肤、首饰、香气、手表、金属、包袋和鞋履，把造型最后合拢。", chapters: ["皮肤", "头发", "香气", "金属", "包袋", "理容"], proof: "收尾不是额外步骤，而是穿上衣服和完成轮廓之间的差别。" },
      seasonal: { title: "季节", deck: "春、夏、秋、冬，以及天气和日历不一致时仍然能工作的穿衣系统。", chapters: ["春", "夏", "秋", "冬", "换季", "旅行"], proof: "季节最终落实为面料、层次、鞋履和比例，而不只是日历颜色。" },
    },
  },
  ar: {
    edition: "النسخة العربية",
    home: "الرئيسية",
    lanes: { women: "نساء", men: "رجال" },
    stat: ["مسار", "فصول", "لغة"],
    proof: "معيار تحريري",
    related: "داخل المسار أيضا",
    open: "افتح",
    sections: {
      build: { title: "بناء", deck: "قاعدة الخزانة: القطع، الأقمشة، التكرار، والشراء الذي يحمل بقية الإطلالات.", chapters: ["أساسيات", "معاطف", "أحذية", "إكسسوارات", "عمل", "كبسولة"], proof: "قبل الأسلوب، تحدد الصفحة ما الذي يدخل الخزانة، كم يعمل، وأي مشكلة يحلها." },
      wear: { title: "ارتداء", deck: "صيغ للعمل، نهاية الأسبوع، السفر، الحر، البرد، والليالي التي تحتاج فيها الملابس إلى قرار سريع.", chapters: ["صيغ", "سمارت كاجوال", "عمل", "موعد", "سفر", "طقس"], proof: "تنظم الملابس حسب الموقف الحقيقي لا حسب خيال الخزانة." },
      style: { title: "أسلوب", deck: "لون، نسبة، ترند، مراجع، بساطة، ووجهة نظر تجعل الاختيار يبدو شخصيا.", chapters: ["لون", "نسبة", "ترند", "نقشة", "بساطة", "كلاسيكي"], proof: "الأسلوب هنا اتجاه تحريري واضح، وليس سلسلة قرارات عشوائية." },
      fit: { title: "مقاس", deck: "كتف، ارتفاع، طول، سقوط، أكمام، خصر، حذاء، ولغة مفيدة للشراء والتعديل.", chapters: ["قمصان", "سراويل", "دنيم", "معاطف", "أحذية", "تعديلات"], proof: "المقاس يأتي قبل الزينة لأن القطعة الصحيحة لا تحتاج إلى رفع صوتها." },
      finish: { title: "لمسة أخيرة", deck: "شعر، بشرة، مجوهرات، عطر، ساعة، معدن، حقائب وأحذية تكمل الإطلالة.", chapters: ["بشرة", "شعر", "عطر", "معدن", "حقائب", "عناية"], proof: "اللمسة الأخيرة ليست إضافة؛ هي الفرق بين ملابس ملبوسة وصورة مكتملة." },
      seasonal: { title: "موسم", deck: "ربيع، صيف، خريف، شتاء، والأسابيع التي لا يحترم فيها الطقس التقويم.", chapters: ["ربيع", "صيف", "خريف", "شتاء", "انتقال", "سفر"], proof: "الموسم يعني قماشا وطبقة وحذاء ونسبة، لا لون تقويم فقط." },
    },
  },
  hi: {
    edition: "हिंदी संस्करण",
    home: "होम",
    lanes: { women: "महिला", men: "पुरुष" },
    stat: ["रास्ता", "अध्याय", "भाषा"],
    proof: "संपादकीय कसौटी",
    related: "इसी रास्ते में",
    open: "खोलें",
    sections: {
      build: { title: "बनाएँ", deck: "वार्डरोब की नींव: कपड़े, फैब्रिक, दोहराव और वे खरीदारी फैसले जो बाकी सब संभालते हैं।", chapters: ["बेसिक्स", "आउटरवेयर", "जूते", "एक्सेसरी", "काम", "कैप्सूल"], proof: "स्टाइल से पहले यह पेज तय करता है कि कौन सी चीज अलमारी में आए, कितनी चले और क्या समस्या हल करे।" },
      wear: { title: "पहनें", deck: "काम, वीकेंड, यात्रा, गर्मी, ठंड और शामों के लिए फॉर्मूला, जब कपड़ों को जल्दी फैसला करना हो।", chapters: ["फॉर्मूला", "स्मार्ट कैजुअल", "बिजनेस", "डेट", "यात्रा", "मौसम"], proof: "कपड़ों को असली स्थिति से व्यवस्थित किया गया है, कल्पना वाली अलमारी से नहीं।" },
      style: { title: "स्टाइल", deck: "रंग, अनुपात, ट्रेंड, संदर्भ, मिनिमलिज़्म और वह नजरिया जिससे चुनाव आपका लगता है।", chapters: ["रंग", "अनुपात", "ट्रेंड", "पैटर्न", "मिनिमल", "क्लासिक"], proof: "स्टाइल को संपादकीय दिशा की तरह रखा गया है: साफ नियम, अचानक फैसलों की भीड़ नहीं।" },
      fit: { title: "फिट", deck: "कंधा, राइज़, लंबाई, गिरावट, स्लीव, कमर, जूता और बेहतर खरीद या बदलाव की भाषा।", chapters: ["शर्ट", "पैंट", "डेनिम", "आउटरवेयर", "जूते", "अल्टरेशन"], proof: "फिट सजावट से पहले आता है क्योंकि सही कपड़ा ध्यान खींचने के लिए लड़ता नहीं।" },
      finish: { title: "फिनिश", deck: "बाल, त्वचा, ज्वेलरी, खुशबू, घड़ी, मेटल, बैग और जूते जो लुक को पूरा करते हैं।", chapters: ["त्वचा", "बाल", "खुशबू", "मेटल", "बैग", "ग्रूमिंग"], proof: "फिनिश अतिरिक्त नहीं; यही पहने हुए कपड़े और पूरी सिलुएट का फर्क है।" },
      seasonal: { title: "मौसम", deck: "वसंत, गर्मी, पतझड़, सर्दी और वे हफ्ते जब मौसम कैलेंडर से अलग चलता है।", chapters: ["वसंत", "गर्मी", "पतझड़", "सर्दी", "बदलाव", "यात्रा"], proof: "मौसम का मतलब फैब्रिक, लेयर, जूता और अनुपात है, सिर्फ कैलेंडर का रंग नहीं।" },
    },
  },
};

function chapterHref(lang, lane, chapter) {
  return `/${lang}/${lane}/${chapter}/`;
}

function relatedChapters(lang, lane, current) {
  const copy = LOCALIZED_CHAPTER_COPY[lang] || LOCALIZED_CHAPTER_COPY.es;
  return CHAPTER_ORDER.filter((chapter) => chapter !== current).slice(0, 4).map((chapter) => ({
    href: chapterHref(lang, lane, chapter),
    title: copy.sections[chapter].title,
    body: copy.sections[chapter].deck,
  }));
}

function sectionCards(lang, lane, chapter, section) {
  if (Array.isArray(window.LOCALIZED_CHAPTER_CARDS) && window.LOCALIZED_CHAPTER_CARDS.length) {
    return window.LOCALIZED_CHAPTER_CARDS;
  }
  const slugs = CHUNK_L3_LINKS[lane]?.[chapter];
  if (!slugs) return section.chapters.map((label) => ({ label }));
  const labels = chapter === "finish" && lane === "men"
    ? MEN_FINISH_L3_LABELS[lang] || MEN_FINISH_L3_LABELS.es
    : lane === "women" && WOMEN_CHUNK_TWO_L3_LABELS[lang]?.[chapter]
      ? WOMEN_CHUNK_TWO_L3_LABELS[lang][chapter]
    : slugs.map((slug, index) => section.chapters[index] || slug);
  return slugs.map((slug, index) => ({ label: labels[index], slug }));
}

function LocalizedChapterPage() {
  const lang = window.FASHION_LANG || "es";
  const lane = window.LOCALIZED_LANE || "women";
  const chapter = window.LOCALIZED_CHAPTER || "build";
  const copy = LOCALIZED_CHAPTER_COPY[lang] || LOCALIZED_CHAPTER_COPY.es;
  const section = copy.sections[chapter] || copy.sections.build;
  const laneName = copy.lanes[lane] || copy.lanes.women;
  const image = LOCALIZED_CHAPTER_IMAGES[lane]?.[chapter] || LOCALIZED_CHAPTER_IMAGES.women.build;
  const dir = lang === "ar" ? "rtl" : "ltr";
  const cards = sectionCards(lang, lane, chapter, section);

  return (
    <React.Fragment>
      <Masthead />
      <Header />
      <main className={`native-l2 native-l2-${lane}`} dir={dir}>
        <section className="native-l2-hero">
          <div className="native-l2-image" style={{ backgroundImage: `url(${image})` }}>
            <span>{copy.edition}</span>
          </div>
          <div className="native-l2-copy">
            <div className="native-l2-crumbs">
              <a href={`/${lang}/`}>{copy.home}</a>
              <span>/</span>
              <a href={`/${lang}/${lane}/`}>{laneName}</a>
            </div>
            <p>{laneName} · {section.title}</p>
            <h1>{section.title}<span>{laneName}</span></h1>
            <div>{section.deck}</div>
          </div>
        </section>

        <section className="native-l2-stats">
          <div><span>{copy.stat[0]}</span><b>{laneName}</b></div>
          <div><span>{copy.stat[1]}</span><b>{String(section.chapters.length).padStart(2, "0")}</b></div>
          <div><span>{copy.stat[2]}</span><b>{lang.toUpperCase()}</b></div>
        </section>

        <section className="native-l2-grid">
          {cards.map((item, index) => {
            const Tag = item.href || item.slug ? "a" : "article";
            const props = item.href ? { href: item.href } : item.slug ? { href: `/${lang}/${lane}/${chapter}/${item.slug}/` } : {};
            return (
            <Tag key={item.label} {...props}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h2>{item.label}</h2>
              <p>{section.deck}</p>
            </Tag>
          );})}
        </section>

        <section className="native-l2-proof">
          <p>{copy.proof}</p>
          <blockquote>{section.proof}</blockquote>
        </section>

        <section className="native-l2-related">
          <div>
            <p>{copy.related}</p>
            <h2>{laneName}</h2>
          </div>
          <div className="native-l2-links">
            {relatedChapters(lang, lane, chapter).map((item) => (
              <a href={item.href} key={item.href}>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
                <span>{copy.open}</span>
              </a>
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LocalizedChapterPage />);