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

const L3_IMAGES = {
  women: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=1800&q=80",
  men: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1800&q=80",
};

const L3_COPY = {
  es: {
    home: "Inicio",
    lanes: { women: "Mujer", men: "Hombre" },
    chapters: { seasonal: "Temporada", finish: "Acabado" },
    issue: "Guía nativa en español",
    labels: ["Sistema", "Cuándo usarlo", "Regla Iris", "Volver al capítulo"],
    related: "Páginas vecinas",
    open: "Abrir",
    sections: {
      spring: ["Primavera", "Capas de transición, color más ligero, gabardinas, mocasines y mañanas que empiezan frías pero no terminan igual.", "Una capa exterior clara, una base que respira y un zapato que no parezca invierno."],
      summer: ["Verano", "Lino, algodón, sandalias, noches calientes, trabajo con calor y ropa que respira sin perder forma.", "La tela decide primero; después vienen proporción, color y piel visible."],
      fall: ["Otoño", "Textura, botas, chaquetas, denim, lana, ante y el primer momento en que el armario vuelve a tener peso.", "Añade profundidad por superficie antes de añadir más piezas."],
      winter: ["Invierno", "Abrigos, punto, botas, bufandas, capas base y siluetas que siguen teniendo forma con frío.", "Calor cerca del cuerpo, estructura fuera, volumen bajo control."],
      transitional: ["Transición", "Semanas de clima inestable, capas que se quitan, zapatos intermedios y piezas que funcionan en dos estaciones.", "Elige prendas bisagra: ni pleno verano ni pleno invierno."],
      "transitional-dressing": ["Transición", "Semanas de clima inestable, capas compactas, lluvia, viento y ropa masculina que se adapta sin rehacer el look.", "La capa exterior debe resolver el cambio sin cambiar todo el uniforme."],
      "skincare-for-men": ["Cuidado de piel masculino", "Limpiador, hidratante, protector solar, irritación de afeitado, sequedad de invierno y rutinas cortas.", "Menos pasos, mejor repetición; la piel debe apoyar la ropa, no competir con ella."],
      fragrance: ["Fragancia", "Aromas limpios, maderas, cítricos, ámbar, oficina, cita, verano e invierno.", "La fragancia tiene radio; debe sentirse cerca antes de llenar la habitación."],
      hair: ["Pelo", "Frecuencia de corte, peso del producto, brillo, textura, cuello, barba y proporción con la ropa.", "El pelo debe tener la misma intención que el cuello de la camisa y la chaqueta."],
      "grooming-basics": ["Grooming básico", "Uñas, cuellos, pelusa, zapatos, afeitado, líneas de barba, olor de ropa y mantenimiento visible.", "El buen grooming desaparece; solo deja la ropa viéndose más nítida."],
    },
  },
  pt: {
    home: "Início",
    lanes: { women: "Mulher", men: "Homem" },
    chapters: { seasonal: "Estação", finish: "Acabamento" },
    issue: "Guia nativo em português",
    labels: ["Sistema", "Quando usar", "Regra Iris", "Voltar ao capítulo"],
    related: "Páginas vizinhas",
    open: "Abrir",
    sections: {
      spring: ["Primavera", "Camadas de transição, cor mais leve, trench coats, loafers e manhãs frias que mudam até a tarde.", "Uma camada externa clara, uma base que respira e um sapato que não parece inverno."],
      summer: ["Verão", "Linho, algodão, sandálias, noites quentes, trabalho no calor e roupa que respira sem perder forma.", "O tecido decide primeiro; depois vêm proporção, cor e pele visível."],
      fall: ["Outono", "Textura, botas, jaquetas, denim, lã, camurça e o primeiro momento em que o armário ganha peso.", "Adicione profundidade pela superfície antes de adicionar mais peças."],
      winter: ["Inverno", "Casacos, malhas, botas, cachecóis, base layers e silhuetas que mantêm forma no frio.", "Calor perto do corpo, estrutura por fora, volume sob controle."],
      transitional: ["Transição", "Semanas de clima instável, camadas removíveis, sapatos intermediários e peças que funcionam em duas estações.", "Escolha peças dobradiça: nem pleno verão, nem pleno inverno."],
      "transitional-dressing": ["Transição", "Semanas de clima instável, camadas compactas, chuva, vento e roupa masculina que se adapta sem refazer o look.", "A camada externa deve resolver a mudança sem trocar o uniforme inteiro."],
      "skincare-for-men": ["Skincare masculino", "Limpeza, hidratação, protetor solar, irritação do barbear, ressecamento de inverno e rotinas curtas.", "Menos passos, mais repetição; a pele deve apoiar a roupa, não competir."],
      fragrance: ["Fragrância", "Aromas limpos, madeiras, cítricos, âmbar, escritório, encontro, verão e inverno.", "Fragrância tem raio; deve ser percebida perto antes de ocupar a sala."],
      hair: ["Cabelo", "Cadência de corte, peso do produto, brilho, textura, gola, barba e proporção com a roupa.", "O cabelo deve ter a mesma intenção da gola da camisa e da jaqueta."],
      "grooming-basics": ["Grooming básico", "Unhas, golas, fiapos, sapatos, barba, linhas, cheiro da roupa e manutenção visível.", "Bom grooming desaparece; só deixa a roupa mais nítida."],
    },
  },
  fr: {
    home: "Accueil",
    lanes: { women: "Femme", men: "Homme" },
    chapters: { seasonal: "Saison", finish: "Finition" },
    issue: "Guide natif en français",
    labels: ["Système", "Quand l'utiliser", "Règle Iris", "Retour au chapitre"],
    related: "Pages voisines",
    open: "Ouvrir",
    sections: {
      spring: ["Printemps", "Couches de transition, couleur plus légère, trenchs, mocassins et matins frais qui changent avant midi.", "Une couche claire, une base respirante et une chaussure qui ne dit pas hiver."],
      summer: ["Été", "Lin, coton, sandales, soirées chaudes, travail par forte chaleur et vêtements qui respirent sans perdre leur ligne.", "La matière décide d'abord; puis viennent proportion, couleur et peau visible."],
      fall: ["Automne", "Texture, bottes, vestes, denim, laine, daim et le premier moment où le vestiaire reprend du poids.", "Ajouter de la profondeur par la surface avant d'ajouter plus de pièces."],
      winter: ["Hiver", "Manteaux, maille, bottes, écharpes, couches de base et silhouettes qui gardent une forme dans le froid.", "Chaleur près du corps, structure dehors, volume sous contrôle."],
      transitional: ["Transition", "Semaines météo instables, couches que l'on retire, chaussures intermédiaires et pièces valables dans deux saisons.", "Choisir des pièces charnières: ni plein été, ni plein hiver."],
      "transitional-dressing": ["Transition", "Semaines météo instables, couches compactes, pluie, vent et vestiaire masculin qui s'adapte sans refaire la tenue.", "La couche extérieure doit résoudre le changement sans changer tout l'uniforme."],
      "skincare-for-men": ["Soin de peau homme", "Nettoyant, hydratant, SPF, irritation du rasage, sécheresse d'hiver et routines courtes.", "Moins d'étapes, plus de répétition; la peau soutient les vêtements."],
      fragrance: ["Parfum", "Senteurs propres, bois, agrumes, ambre, bureau, rendez-vous, été et hiver.", "Le parfum a un rayon; il doit se sentir près avant de remplir la pièce."],
      hair: ["Cheveux", "Rythme de coupe, poids du produit, brillance, texture, col, barbe et proportion avec les vêtements.", "Les cheveux doivent avoir la même intention que le col et la veste."],
      "grooming-basics": ["Grooming de base", "Ongles, cols, peluches, chaussures, rasage, barbe, odeur du linge et entretien visible.", "Le bon grooming disparaît; il rend seulement la tenue plus nette."],
    },
  },
  de: {
    home: "Start",
    lanes: { women: "Damen", men: "Herren" },
    chapters: { seasonal: "Saison", finish: "Finish" },
    issue: "Native deutsche Seite",
    labels: ["System", "Wann nutzen", "Iris-Regel", "Zurück zum Kapitel"],
    related: "Nachbarseiten",
    open: "Öffnen",
    sections: {
      spring: ["Frühjahr", "Übergangslagen, hellere Farbe, Trenchcoats, Loafer und kühle Morgen, die nicht kühl bleiben.", "Eine klare Außenschicht, eine atmende Basis und ein Schuh, der nicht Winter sagt."],
      summer: ["Sommer", "Leinen, Baumwolle, Sandalen, warme Abende, Arbeit bei Hitze und Kleidung, die atmet ohne Form zu verlieren.", "Der Stoff entscheidet zuerst; danach kommen Proportion, Farbe und sichtbare Haut."],
      fall: ["Herbst", "Textur, Boots, Jacken, Denim, Wolle, Wildleder und der Moment, in dem die Garderobe wieder Gewicht bekommt.", "Tiefe über Oberfläche hinzufügen, bevor mehr Teile dazukommen."],
      winter: ["Winter", "Mäntel, Strick, Boots, Schals, Baselayer und Silhouetten, die in Kälte Form behalten.", "Wärme nah am Körper, Struktur außen, Volumen kontrolliert."],
      transitional: ["Übergang", "Unbeständige Wochen, abnehmbare Lagen, Zwischenschuhe und Teile, die in zwei Saisons funktionieren.", "Brückenteile wählen: weder voller Sommer noch voller Winter."],
      "transitional-dressing": ["Übergang", "Unbeständige Wochen, kompakte Lagen, Regen, Wind und Herrenlooks, die sich anpassen ohne neu zu beginnen.", "Die äußere Lage löst den Wechsel, ohne die Uniform zu wechseln."],
      "skincare-for-men": ["Hautpflege für Herren", "Reiniger, Feuchtigkeit, Sonnenschutz, Rasurirritation, Wintertrockenheit und kurze Routinen.", "Weniger Schritte, bessere Wiederholung; Haut unterstützt Kleidung."],
      fragrance: ["Duft", "Saubere Düfte, Hölzer, Zitrus, Amber, Büro, Date, Sommer und Winter.", "Duft hat Radius; er sollte nah wirken, bevor er den Raum füllt."],
      hair: ["Haare", "Schnittrhythmus, Produktgewicht, Glanz, Textur, Kragen, Bart und Proportion zur Kleidung.", "Haare brauchen dieselbe Absicht wie Hemdkragen und Jacke."],
      "grooming-basics": ["Grooming-Basics", "Nägel, Kragen, Fusseln, Schuhe, Rasur, Bartlinien, Wäschegeruch und sichtbare Pflege.", "Gutes Grooming verschwindet; es macht Kleidung nur schärfer."],
    },
  },
  zh: {
    home: "首页",
    lanes: { women: "女装", men: "男装" },
    chapters: { seasonal: "季节", finish: "收尾" },
    issue: "中文原生指南",
    labels: ["系统", "适用场景", "Iris 规则", "返回章节"],
    related: "相邻页面",
    open: "打开",
    sections: {
      spring: ["春季", "换季层次、浅色、风衣、乐福鞋，以及早上冷但下午会变的日子。", "外层要清楚，内层要透气，鞋子不要还停在冬天。"],
      summer: ["夏季", "亚麻、棉、凉鞋、热夜晚、高温通勤，以及透气但不塌的衣服。", "先决定面料，再决定比例、颜色和露肤。"],
      fall: ["秋季", "质感、靴子、夹克、牛仔、羊毛、麂皮，以及衣橱重新有重量的时刻。", "先用表面增加深度，再决定是否增加单品。"],
      winter: ["冬季", "大衣、针织、靴子、围巾、贴身保暖层，以及冷天仍有形状的轮廓。", "热量贴近身体，结构放在外层，体积要被控制。"],
      transitional: ["换季", "天气不稳定的几周、可脱下的层次、中间鞋履，以及能跨两季工作的单品。", "选择桥梁单品：既不是盛夏，也不是深冬。"],
      "transitional-dressing": ["换季", "天气不稳定、紧凑层次、雨、风，以及不用重做整套的男装系统。", "外层要解决变化，而不是推翻整套制服。"],
      "skincare-for-men": ["男士护肤", "清洁、保湿、防晒、剃须刺激、冬季干燥和短流程。", "步骤少，重复好；皮肤应该支持衣服，而不是抢戏。"],
      fragrance: ["香气", "干净香、木质、柑橘、琥珀、办公室、约会、夏天和冬天。", "香气有半径；先在近处成立，再考虑整个房间。"],
      hair: ["头发", "修剪频率、产品重量、光泽、纹理、领口、胡须和与衣服的比例。", "头发要和衬衫领口、外套一样有意图。"],
      "grooming-basics": ["基础理容", "指甲、领口、毛絮、鞋面、剃须、胡须线条、衣物气味和可见维护。", "好的理容会消失，只留下更清晰的衣服。"],
    },
  },
  ar: {
    home: "الرئيسية",
    lanes: { women: "نساء", men: "رجال" },
    chapters: { seasonal: "موسم", finish: "لمسة أخيرة" },
    issue: "دليل عربي أصلي",
    labels: ["النظام", "متى يستخدم", "قاعدة Iris", "عودة إلى الفصل"],
    related: "صفحات قريبة",
    open: "افتح",
    sections: {
      spring: ["ربيع", "طبقات انتقالية، لون أخف، ترنش، لوفر، وصباح بارد لا يبقى باردا.", "طبقة خارجية واضحة، قاعدة تتنفس، وحذاء لا يقول شتاء."],
      summer: ["صيف", "كتان، قطن، صندل، ليال حارة، عمل في الحر، وملابس تتنفس دون أن تفقد الشكل.", "القماش يقرر أولا؛ بعده تأتي النسبة واللون والجلد الظاهر."],
      fall: ["خريف", "ملمس، أحذية، جاكيتات، دنيم، صوف، شمواه وأول لحظة يعود فيها وزن الخزانة.", "أضف العمق من السطح قبل إضافة قطع أكثر."],
      winter: ["شتاء", "معاطف، تريكو، أحذية، أوشحة، طبقات قاعدة وسيلويت يحتفظ بالشكل في البرد.", "الدفء قرب الجسم، الهيكل في الخارج، والحجم تحت السيطرة."],
      transitional: ["انتقال", "أسابيع طقس غير ثابت، طبقات قابلة للخلع، أحذية وسطية وقطع تعمل في موسمين.", "اختاري قطع الجسر: ليست صيفا كاملا ولا شتاء كاملا."],
      "transitional-dressing": ["انتقال", "أسابيع طقس غير ثابت، طبقات مدمجة، مطر، ريح وملابس رجالية تتكيف دون إعادة الزي.", "الطبقة الخارجية تحل التغيير دون تغيير الزي كله."],
      "skincare-for-men": ["عناية بشرة للرجال", "غسول، مرطب، واقي شمس، تهيج الحلاقة، جفاف الشتاء وروتين قصير.", "خطوات أقل، تكرار أفضل؛ البشرة تدعم الملابس لا تنافسها."],
      fragrance: ["عطر", "روائح نظيفة، أخشاب، حمضيات، عنبر، مكتب، موعد، صيف وشتاء.", "للعطر مدى؛ يجب أن يشعر به القريب قبل أن يملأ الغرفة."],
      hair: ["شعر", "وتيرة القص، وزن المنتج، اللمعان، الملمس، الياقة، اللحية والنسبة مع الملابس.", "الشعر يحتاج النية نفسها الموجودة في ياقة القميص والجاكيت."],
      "grooming-basics": ["أساسيات العناية", "أظافر، ياقات، وبر، أحذية، حلاقة، خطوط لحية، رائحة الغسيل وصيانة مرئية.", "العناية الجيدة تختفي؛ تترك الملابس أوضح فقط."],
    },
  },
  hi: {
    home: "होम",
    lanes: { women: "महिला", men: "पुरुष" },
    chapters: { seasonal: "मौसम", finish: "फिनिश" },
    issue: "हिंदी मूल गाइड",
    labels: ["सिस्टम", "कब पहनें", "Iris नियम", "अध्याय पर लौटें"],
    related: "नज़दीकी पेज",
    open: "खोलें",
    sections: {
      spring: ["वसंत", "बदलते मौसम की लेयर, हल्का रंग, ट्रेंच, लोफर और ऐसी सुबहें जो दोपहर तक बदल जाती हैं।", "साफ बाहरी लेयर, सांस लेने वाली बेस और ऐसा जूता जो सर्दी जैसा न लगे।"],
      summer: ["गर्मी", "लिनन, कॉटन, सैंडल, गर्म शामें, गर्मी में काम और ऐसे कपड़े जो आकार खोए बिना सांस लें।", "पहले फैब्रिक फैसला करता है; फिर अनुपात, रंग और दिखती त्वचा।"],
      fall: ["पतझड़", "टेक्सचर, बूट, जैकेट, डेनिम, ऊन, suede और वह समय जब अलमारी फिर वजन पाती है।", "ज्यादा कपड़ों से पहले सतह से गहराई जोड़ें।"],
      winter: ["सर्दी", "कोट, निट, बूट, स्कार्फ, बेस लेयर और ऐसी सिलुएट जो ठंड में भी आकार रखे।", "गरमी शरीर के पास, संरचना बाहर, और वॉल्यूम नियंत्रण में।"],
      transitional: ["बदलाव", "अस्थिर मौसम के हफ्ते, उतर सकने वाली लेयर, बीच के जूते और दो मौसमों में काम आने वाली चीजें।", "ब्रिज पीस चुनें: न पूरी गर्मी, न पूरी सर्दी।"],
      "transitional-dressing": ["बदलाव", "अस्थिर मौसम, कॉम्पैक्ट लेयर, बारिश, हवा और ऐसा पुरुष वार्डरोब जो बिना पूरा लुक बदले ढले।", "बाहरी लेयर बदलाव हल करे, पूरी यूनिफॉर्म नहीं बदले।"],
      "skincare-for-men": ["पुरुष स्किनकेयर", "क्लेंज़र, मॉइस्चराइज़र, सनस्क्रीन, शेविंग इरिटेशन, सर्दी की ड्रायनेस और छोटे रूटीन।", "कम कदम, बेहतर दोहराव; त्वचा कपड़ों को सपोर्ट करे, मुकाबला नहीं।"],
      fragrance: ["खुशबू", "क्लीन सेंट, वुड, सिट्रस, एम्बर, ऑफिस, डेट, गर्मी और सर्दी।", "खुशबू का दायरा होता है; कमरे से पहले पास वाले को महसूस हो।"],
      hair: ["बाल", "कट की cadence, प्रोडक्ट का वजन, चमक, टेक्सचर, कॉलर, दाढ़ी और कपड़ों से अनुपात।", "बालों में वही इरादा होना चाहिए जो शर्ट कॉलर और जैकेट में है।"],
      "grooming-basics": ["ग्रूमिंग बेसिक्स", "नाखून, कॉलर, लिंट, जूते, शेविंग, दाढ़ी लाइन, कपड़ों की गंध और दिखती देखभाल।", "अच्छी ग्रूमिंग गायब हो जाती है; सिर्फ कपड़े ज्यादा साफ दिखते हैं।"],
    },
  },
};

function currentData() {
  const lang = window.FASHION_LANG || "es";
  const lane = window.LOCALIZED_LANE || "women";
  const chapter = window.LOCALIZED_CHAPTER || "seasonal";
  const slug = window.LOCALIZED_L3 || "spring";
  const copy = L3_COPY[lang] || L3_COPY.es;
  const section = Array.isArray(window.LOCALIZED_SECTION) && window.LOCALIZED_SECTION.length === 3
    ? window.LOCALIZED_SECTION
    : copy.sections[slug] || copy.sections.spring;
  return { lang, lane, chapter, slug, copy, section };
}

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

function LocalizedSectionPage() {
  const { lang, lane, chapter, slug, copy, section } = currentData();
  const laneName = window.LOCALIZED_LANE_NAME || copy.lanes[lane] || copy.lanes.women;
  const chapterName = window.LOCALIZED_CHAPTER_NAME || copy.chapters[chapter] || chapter;
  const image = L3_IMAGES[lane] || L3_IMAGES.women;
  const siblingPages = Array.isArray(window.LOCALIZED_L3_SIBLINGS) && window.LOCALIZED_L3_SIBLINGS.length
    ? window.LOCALIZED_L3_SIBLINGS
    : siblingSlugs(chapter, lane).filter((item) => item !== slug).map((item) => {
      const page = copy.sections[item] || copy.sections.spring;
      return { slug: item, title: page[0], deck: page[1] };
    });

  return (
    <React.Fragment>
      <Masthead />
      <Header />
      <main className={`native-l3 native-l2 native-l2-${lane}`} dir={lang === "ar" ? "rtl" : "ltr"}>
        <section className="native-l3-hero">
          <div className="native-l3-copy">
            <div className="native-l2-crumbs">
              <a href={`/${lang}/`}>{copy.home}</a>
              <span>/</span>
              <a href={`/${lang}/${lane}/`}>{laneName}</a>
              <span>/</span>
              <a href={`/${lang}/${lane}/${chapter}/`}>{chapterName}</a>
            </div>
            <p>{copy.issue}</p>
            <h1>{section[0]}<span>{laneName}</span></h1>
            <div>{section[1]}</div>
          </div>
          <div className="native-l3-image" style={{ backgroundImage: `url(${image})` }}>
            <span>{chapterName}</span>
          </div>
        </section>

        <section className="native-l3-rule">
          <span>{copy.labels[2]}</span>
          <blockquote>{section[2]}</blockquote>
        </section>

        <section className="native-l3-grid">
          {copy.labels.slice(0, 3).map((label, index) => (
            <article key={label}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h2>{label}</h2>
              <p>{index === 0 ? section[1] : index === 1 ? section[2] : `${chapterName} / ${section[0]} / ${laneName}`}</p>
            </article>
          ))}
        </section>

        <section className="native-l2-related native-l3-related">
          <div>
            <p>{copy.related}</p>
            <h2>{chapterName}</h2>
          </div>
          <div className="native-l2-links">
            {siblingPages.map((page) => {
              return (
                <a href={`/${lang}/${lane}/${chapter}/${page.slug}/`} key={page.slug}>
                  <h3>{page.title}</h3>
                  <p>{page.deck}</p>
                  <span>{copy.open}</span>
                </a>
              );
            })}
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

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