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

const LANE_IMAGES = {
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1800&q=80",
  men: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1800&q=80",
};

const LANE_COPY = {
  es: {
    women: {
      kicker: "Carril 01 · Mujer",
      h1: ["Mujer,", "de pies a cabeza."],
      deck: "Sastrería que favorece, denim que cae bien y acabados pequeños que hacen que la ropa se convierta en look. Este carril empieza con una pregunta sencilla: qué merece un lugar en tu armario y qué solo ocupa espacio.",
      imageTag: "Portada · París · S/S 26",
      chapters: [["Construir", "Blazers, camisas, denim, vestidos, bolsos y la base de un armario que no se desordena."], ["Vestir", "Fórmulas para trabajo, fin de semana, viaje, noche y los días en que la ropa debe decidir rápido."], ["Estilo", "Color, proporción, tendencias, minimalismo y la diferencia entre gusto personal y costumbre."], ["Acabado", "Piel, pelo, joyería, fragancia y los últimos dos centímetros que cambian una silueta."], ["Temporada", "Primavera, verano, otoño, invierno y las semanas raras entre clima y calendario."]],
      notes: ["Empieza por la prenda que más repites.", "Ajuste antes que novedad.", "Una paleta pequeña viaja mejor."],
    },
    men: {
      kicker: "Carril 02 · Hombre",
      h1: ["Hombre,", "desde los hombros."],
      deck: "El armario diario, afinado. Del primer blazer al denim que envejece bien, este carril responde con calma las preguntas que muchos hombres prefieren no hacer en voz alta.",
      imageTag: "Portada · Florencia · S/S 26",
      chapters: [["Construir", "Camisas, punto, denim, zapatos, outerwear y el primer cinco que sostiene el resto."], ["Vestir", "Oficina, fin de semana, citas, viaje, calor, frío y las fórmulas que no parecen fórmula."], ["Ajuste", "Hombro, tiro, largo, caída, mangas, pantalones y el lenguaje básico para hablar con un sastre."], ["Acabado", "Pelo, fragancia, grooming, piel, metal, reloj y lo que hace que algo se vea terminado."], ["Temporada", "Primavera, verano, otoño, invierno y la ropa que funciona cuando el clima cambia de opinión."]],
      notes: ["Compra menos, rota mejor.", "El hombro decide primero.", "Los zapatos cuentan la verdad."],
    },
  },
  pt: {
    women: {
      kicker: "Caminho 01 · Mulher",
      h1: ["Mulher,", "dos pés à cabeça."],
      deck: "Alfaiataria que favorece, denim que veste bem e acabamentos pequenos que transformam roupa em look. Este caminho começa com uma pergunta simples: o que merece espaço no armário e o que só ocupa lugar.",
      imageTag: "Capa · Paris · S/S 26",
      chapters: [["Construir", "Blazers, camisas, denim, vestidos, bolsas e a base de um armário que não desanda."], ["Vestir", "Fórmulas para trabalho, fim de semana, viagem, noite e dias em que a roupa precisa decidir rápido."], ["Estilo", "Cor, proporção, tendências, minimalismo e a diferença entre gosto pessoal e hábito."], ["Acabar", "Pele, cabelo, joias, fragrância e os últimos centímetros que mudam uma silhueta."], ["Estação", "Primavera, verão, outono, inverno e as semanas estranhas entre clima e calendário."]],
      notes: ["Comece pela peça que você mais repete.", "Caimento antes de novidade.", "Uma paleta pequena viaja melhor."],
    },
    men: {
      kicker: "Caminho 02 · Homem",
      h1: ["Homem,", "a partir dos ombros."],
      deck: "O armário do dia a dia, mais afiado. Do primeiro blazer ao denim que envelhece bem, este caminho responde com calma às perguntas que muitos homens preferem não fazer em voz alta.",
      imageTag: "Capa · Florença · S/S 26",
      chapters: [["Construir", "Camisas, malhas, denim, sapatos, casacos e o primeiro cinco que sustenta o resto."], ["Vestir", "Escritório, fim de semana, encontro, viagem, calor, frio e fórmulas que não parecem fórmula."], ["Caimento", "Ombro, gancho, comprimento, queda, mangas, calças e a linguagem básica para falar com alfaiate."], ["Acabar", "Cabelo, fragrância, grooming, pele, metal, relógio e o que faz algo parecer terminado."], ["Estação", "Primavera, verão, outono, inverno e a roupa que funciona quando o clima muda de ideia."]],
      notes: ["Compre menos, rode melhor.", "O ombro decide primeiro.", "Os sapatos contam a verdade."],
    },
  },
  fr: {
    women: {
      kicker: "Univers 01 · Femme",
      h1: ["Femme,", "de la tête aux pieds."],
      deck: "Du tailleur qui flatte, du denim qui tombe juste, et des finitions qui transforment des vêtements en silhouette. Cet univers commence par une question simple: ce qui mérite une place dans le vestiaire, et ce qui prend seulement de la place.",
      imageTag: "Couverture · Paris · S/S 26",
      chapters: [["Construire", "Blazers, chemises, denim, robes, sacs et la base d’un vestiaire qui reste lisible."], ["Porter", "Formules pour travail, week-end, voyage, soir et journées où la tenue doit décider vite."], ["Style", "Couleur, proportion, tendances, minimalisme et différence entre goût personnel et habitude."], ["Finition", "Peau, cheveux, bijoux, parfum et les derniers centimètres qui changent une silhouette."], ["Saison", "Printemps, été, automne, hiver et les semaines étranges entre météo et calendrier."]],
      notes: ["Commencer par la pièce que l’on répète.", "La coupe avant la nouveauté.", "Une petite palette voyage mieux."],
    },
    men: {
      kicker: "Univers 02 · Homme",
      h1: ["Homme,", "depuis les épaules."],
      deck: "Le vestiaire quotidien, affûté. Du premier blazer au denim qui vieillit bien, cet univers répond calmement aux questions que beaucoup d’hommes préfèrent ne pas poser.",
      imageTag: "Couverture · Florence · S/S 26",
      chapters: [["Construire", "Chemises, maille, denim, chaussures, manteaux et les cinq premières pièces qui tiennent le reste."], ["Porter", "Bureau, week-end, rendez-vous, voyage, chaleur, froid et formules qui ne ressemblent pas à des formules."], ["Coupe", "Épaule, taille, longueur, tombé, manches, pantalons et langage simple pour parler au tailleur."], ["Finition", "Cheveux, parfum, grooming, peau, métal, montre et ce qui donne l’air fini."], ["Saison", "Printemps, été, automne, hiver et les vêtements qui fonctionnent quand la météo hésite."]],
      notes: ["Acheter moins, mieux faire tourner.", "L’épaule décide d’abord.", "Les chaussures disent la vérité."],
    },
  },
  de: {
    women: {
      kicker: "Bereich 01 · Damen",
      h1: ["Damen,", "von Kopf bis Fuß."],
      deck: "Tailoring, das schmeichelt, Denim, der sitzt, und kleine Finishes, die Kleidung zum Look machen. Dieser Bereich beginnt mit einer einfachen Frage: Was verdient Platz im Kleiderschrank und was nimmt nur Platz weg?",
      imageTag: "Cover · Paris · S/S 26",
      chapters: [["Aufbauen", "Blazer, Hemden, Denim, Kleider, Taschen und die Basis einer Garderobe, die lesbar bleibt."], ["Tragen", "Formeln für Arbeit, Wochenende, Reise, Abend und Tage, an denen Kleidung schnell entscheiden muss."], ["Stil", "Farbe, Proportion, Trends, Minimalismus und der Unterschied zwischen Geschmack und Gewohnheit."], ["Finish", "Haut, Haare, Schmuck, Duft und die letzten Zentimeter, die eine Silhouette verändern."], ["Saison", "Frühjahr, Sommer, Herbst, Winter und die seltsamen Wochen zwischen Wetter und Kalender."]],
      notes: ["Mit dem Teil beginnen, das du am meisten wiederholst.", "Passform vor Neuheit.", "Eine kleine Palette reist besser."],
    },
    men: {
      kicker: "Bereich 02 · Herren",
      h1: ["Herren,", "ab den Schultern."],
      deck: "Der Alltagskleiderschrank, geschärft. Vom ersten Blazer bis zu Denim, der gut altert, beantwortet dieser Bereich ruhig die Fragen, die viele Männer nicht laut stellen wollen.",
      imageTag: "Cover · Florenz · S/S 26",
      chapters: [["Aufbauen", "Hemden, Strick, Denim, Schuhe, Outerwear und die ersten fünf Teile, die den Rest tragen."], ["Tragen", "Büro, Wochenende, Date, Reise, Hitze, Kälte und Formeln, die nicht nach Formel aussehen."], ["Passform", "Schulter, Leibhöhe, Länge, Fall, Ärmel, Hosen und die Grundsprache für den Schneider."], ["Finish", "Haare, Duft, Grooming, Haut, Metall, Uhr und das, was etwas fertig wirken lässt."], ["Saison", "Frühjahr, Sommer, Herbst, Winter und Kleidung, die funktioniert, wenn das Wetter seine Meinung ändert."]],
      notes: ["Weniger kaufen, besser rotieren.", "Die Schulter entscheidet zuerst.", "Schuhe sagen die Wahrheit."],
    },
  },
  zh: {
    women: {
      kicker: "路线 01 · 女装",
      h1: ["女装，", "从头到脚。"],
      deck: "显身形的剪裁、真正合身的牛仔，以及把衣服变成造型的细节。这个路线先问一个简单问题：什么值得留在衣橱里，什么只是占地方。",
      imageTag: "封面 · 巴黎 · S/S 26",
      chapters: [["建立", "西装外套、衬衫、牛仔、连衣裙、包袋，以及不容易失控的衣橱基础。"], ["穿着", "工作、周末、旅行、夜晚，以及需要快速决定穿什么的日子。"], ["风格", "颜色、比例、趋势、极简，以及个人审美和习惯之间的区别。"], ["收尾", "皮肤、头发、首饰、香气，以及改变整体轮廓的最后几厘米。"], ["季节", "春、夏、秋、冬，以及天气和日历不一致的那些周。"]],
      notes: ["从你最常重复穿的单品开始。", "先看合身，再看新鲜感。", "小色盘更容易旅行。"],
    },
    men: {
      kicker: "路线 02 · 男装",
      h1: ["男装，", "从肩线开始。"],
      deck: "把日常衣橱整理得更锋利。从第一件西装外套到会越穿越好的牛仔，这条路线认真回答很多男人不太想开口问的问题。",
      imageTag: "封面 · 佛罗伦萨 · S/S 26",
      chapters: [["建立", "衬衫、针织、牛仔、鞋履、外套，以及支撑其余衣橱的首发五件。"], ["穿着", "办公室、周末、约会、旅行、炎热、寒冷，以及看不出公式感的穿衣公式。"], ["合身", "肩线、裆深、长度、垂坠、袖长、裤子，以及和裁缝沟通的基本语言。"], ["收尾", "头发、香气、理容、皮肤、金属、手表，以及让造型完整的东西。"], ["季节", "春、夏、秋、冬，以及天气忽然改变主意时还能工作的衣服。"]],
      notes: ["少买一点，轮换更好。", "肩线先决定成败。", "鞋子会说真话。"],
    },
  },
  ar: {
    women: {
      kicker: "المسار 01 · نساء",
      h1: ["نساء،", "من الرأس إلى القدم."],
      deck: "خياطة تليق بالجسم، دنيم يجلس كما يجب، وتفاصيل صغيرة تحول الملابس إلى إطلالة. يبدأ هذا المسار بسؤال بسيط: ما الذي يستحق مكانًا في الخزانة وما الذي يشغل مساحة فقط؟",
      imageTag: "غلاف · باريس · S/S 26",
      chapters: [["بناء", "بليزرات، قمصان، دنيم، فساتين، حقائب، وأساس خزانة لا تتفكك بسهولة."], ["ارتداء", "صيغ للعمل، نهاية الأسبوع، السفر، المساء، والأيام التي يجب أن تقرر فيها الملابس بسرعة."], ["أسلوب", "لون، نسبة، ترندات، بساطة، والفرق بين الذوق الشخصي والعادة."], ["لمسة أخيرة", "بشرة، شعر، مجوهرات، عطر، وآخر سنتيمترات تغير شكل الإطلالة."], ["موسم", "ربيع، صيف، خريف، شتاء، والأسابيع الغريبة بين الطقس والتقويم."]],
      notes: ["ابدئي بالقطعة التي تتكرر أكثر.", "المقاس قبل الجديد.", "لوحة ألوان صغيرة تسافر أفضل."],
    },
    men: {
      kicker: "المسار 02 · رجال",
      h1: ["رجال،", "من الكتفين نزولًا."],
      deck: "الخزانة اليومية بشكل أدق. من أول بليزر إلى دنيم يتحسن مع الوقت، يجيب هذا المسار بهدوء عن الأسئلة التي لا يحب كثير من الرجال طرحها بصوت عالٍ.",
      imageTag: "غلاف · فلورنسا · S/S 26",
      chapters: [["بناء", "قمصان، تريكو، دنيم، أحذية، معاطف، والخمس قطع الأولى التي تحمل الباقي."], ["ارتداء", "مكتب، نهاية أسبوع، موعد، سفر، حر، برد، وصيغ لا تبدو كأنها صيغ."], ["مقاس", "كتف، ارتفاع، طول، سقوط، أكمام، سراويل، ولغة بسيطة للتحدث مع الخياط."], ["لمسة أخيرة", "شعر، عطر، عناية، بشرة، معدن، ساعة، وما يجعل الإطلالة مكتملة."], ["موسم", "ربيع، صيف، خريف، شتاء، وملابس تعمل عندما يغير الطقس رأيه."]],
      notes: ["اشترِ أقل ودوّر أفضل.", "الكتف يقرر أولًا.", "الأحذية تقول الحقيقة."],
    },
  },
  hi: {
    women: {
      kicker: "रास्ता 01 · महिला",
      h1: ["महिला,", "सिर से पांव तक."],
      deck: "ऐसी टेलरिंग जो शरीर पर सही बैठे, ऐसा डेनिम जो सच में फिट हो, और वे छोटे फिनिश जो कपड़ों को लुक बनाते हैं। यह रास्ता एक सीधा सवाल पूछता है: अलमारी में क्या जगह पाने लायक है और क्या बस जगह घेर रहा है।",
      imageTag: "कवर · पेरिस · S/S 26",
      chapters: [["बनाएं", "ब्लेज़र, शर्ट, डेनिम, ड्रेस, बैग और ऐसी वार्डरोब की नींव जो बिखरती नहीं।"], ["पहनें", "काम, वीकेंड, यात्रा, शाम और उन दिनों की फॉर्मूला जब कपड़े जल्दी फैसला मांगते हैं।"], ["स्टाइल", "रंग, अनुपात, ट्रेंड, मिनिमलिज़्म और निजी स्वाद व आदत के बीच फर्क।"], ["फिनिश", "त्वचा, बाल, ज्वेलरी, खुशबू और वे आखिरी सेंटीमीटर जो सिलुएट बदलते हैं।"], ["मौसम", "वसंत, गर्मी, पतझड़, सर्दी और वे अजीब हफ्ते जब मौसम कैलेंडर से अलग चलता है।"]],
      notes: ["उस पीस से शुरू करें जिसे आप सबसे ज्यादा दोहराते हैं।", "नयापन बाद में, फिट पहले।", "छोटी रंग-पैलेट बेहतर यात्रा करती है।"],
    },
    men: {
      kicker: "रास्ता 02 · पुरुष",
      h1: ["पुरुष,", "कंधों से नीचे."],
      deck: "रोज़मर्रा की अलमारी को तेज करना। पहले ब्लेज़र से लेकर ऐसे डेनिम तक जो उम्र के साथ बेहतर दिखे, यह रास्ता उन सवालों का शांत जवाब देता है जिन्हें कई पुरुष ज़ोर से नहीं पूछते।",
      imageTag: "कवर · फ्लोरेंस · S/S 26",
      chapters: [["बनाएं", "शर्ट, निट, डेनिम, जूते, आउटरवियर और पहले पांच पीस जो बाकी सब संभालते हैं।"], ["पहनें", "ऑफिस, वीकेंड, डेट, यात्रा, गर्मी, ठंड और ऐसी फॉर्मूला जो फॉर्मूला जैसी न लगे।"], ["फिट", "कंधा, राइज़, लंबाई, गिरावट, स्लीव, पैंट और दर्जी से बात करने की मूल भाषा।"], ["फिनिश", "बाल, खुशबू, ग्रूमिंग, त्वचा, मेटल, घड़ी और वह चीज़ जो लुक पूरा करती है।"], ["मौसम", "वसंत, गर्मी, पतझड़, सर्दी और ऐसे कपड़े जो मौसम का मन बदलने पर भी काम करें।"]],
      notes: ["कम खरीदें, बेहतर घुमाएं।", "कंधा पहले फैसला करता है।", "जूते सच बोलते हैं।"],
    },
  },
};

const LANE_CHAPTER_SLUGS = {
  women: ["build", "wear", "style", "fit", "finish", "seasonal"],
  men: ["build", "wear", "style", "fit", "finish", "seasonal"],
};

const LANE_EXISTING_CHAPTER_SLUGS = {
  women: ["build", "wear", "style", "finish", "seasonal"],
  men: ["build", "wear", "fit", "finish", "seasonal"],
};

const LANE_MISSING_CHAPTER_COPY = {
  es: {
    women: { fit: ["Ajuste", "Hombro, tiro, largo, caída, manga, cintura, zapato y el vocabulario útil para comprar o ajustar mejor."] },
    men: { style: ["Estilo", "Color, proporción, minimalismo, workwear, clásico y el punto de vista que hace que la ropa parezca elegida."] },
  },
  pt: {
    women: { fit: ["Caimento", "Ombro, gancho, comprimento, queda, manga, cintura, sapato e a linguagem útil para comprar ou ajustar melhor."] },
    men: { style: ["Estilo", "Cor, proporção, minimalismo, workwear, clássico e o ponto de vista que faz a roupa parecer escolhida."] },
  },
  fr: {
    women: { fit: ["Coupe", "Épaule, taille, longueur, tombé, manche, chaussure et vocabulaire utile pour acheter ou ajuster mieux."] },
    men: { style: ["Style", "Couleur, proportion, minimalisme, workwear, classique et point de vue qui rend les vêtements choisis."] },
  },
  de: {
    women: { fit: ["Passform", "Schulter, Leibhöhe, Länge, Fall, Ärmel, Bund, Schuh und Sprache für bessere Käufe und Änderungen."] },
    men: { style: ["Stil", "Farbe, Proportion, Minimalismus, Workwear, Klassik und der Blickwinkel, der Kleidung gewählt wirken lässt."] },
  },
  zh: {
    women: { fit: ["合身", "肩线、裆深、长度、垂坠、袖长、腰部、鞋履，以及更会购买和修改的语言。"] },
    men: { style: ["风格", "颜色、比例、极简、工装、经典，以及让衣服看起来经过选择的视角。"] },
  },
  ar: {
    women: { fit: ["مقاس", "كتف، ارتفاع، طول، سقوط، أكمام، خصر، حذاء، ولغة مفيدة للشراء والتعديل."] },
    men: { style: ["أسلوب", "لون، نسبة، بساطة، ورك وير، كلاسيكي، ووجهة نظر تجعل الملابس تبدو مختارة."] },
  },
  hi: {
    women: { fit: ["फिट", "कंधा, राइज़, लंबाई, गिरावट, स्लीव, कमर, जूता और बेहतर खरीद या बदलाव की भाषा।"] },
    men: { style: ["स्टाइल", "रंग, अनुपात, मिनिमलिज़्म, वर्कवेयर, क्लासिक और वह नजरिया जिससे कपड़े चुने हुए लगें।"] },
  },
};

function completeLaneChapters(lang, lane, chapters) {
  const existingSlugs = LANE_EXISTING_CHAPTER_SLUGS[lane] || [];
  const bySlug = {};
  chapters.forEach((chapter, index) => {
    bySlug[existingSlugs[index]] = { slug: existingSlugs[index], title: chapter[0], body: chapter[1] };
  });
  const missing = LANE_MISSING_CHAPTER_COPY[lang]?.[lane] || {};
  return (LANE_CHAPTER_SLUGS[lane] || []).map((slug) => {
    if (bySlug[slug]) return bySlug[slug];
    const chapter = missing[slug] || [slug, ""];
    return { slug, title: chapter[0], body: chapter[1] };
  });
}

function chapterPath(slug) {
  const lang = window.FASHION_LANG || "en";
  const lane = window.LOCALIZED_LANE || "women";
  return `/${lang}/${lane}/${slug || "build"}/`;
}

function LocalizedLanePage() {
  const lang = window.FASHION_LANG || "es";
  const lane = window.LOCALIZED_LANE || "women";
  const data = LANE_COPY[lang]?.[lane] || LANE_COPY.es.women;
  const chapters = completeLaneChapters(lang, lane, data.chapters);
  return (
    <React.Fragment>
      <Masthead />
      <Header />
      <main className={`native-lane native-lane-${lane}`}>
        <section className="native-lane-hero">
          <div className="native-lane-image" style={{ backgroundImage: `url(${LANE_IMAGES[lane]})` }}>
            <span>{data.imageTag}</span>
          </div>
          <div className="native-lane-copy">
            <p>{data.kicker}</p>
            <h1>{data.h1[0]} <span>{data.h1[1]}</span></h1>
            <div>{data.deck}</div>
          </div>
        </section>

        <section className="native-lane-chapters">
          {chapters.map(({ slug, title, body }, index) => (
            <a href={chapterPath(slug)} key={slug}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h2>{title}</h2>
              <p>{body}</p>
            </a>
          ))}
        </section>

        <section className="native-lane-notes">
          {data.notes.map((note, index) => (
            <p key={note}><span>{String(index + 1).padStart(2, "0")}</span>{note}</p>
          ))}
        </section>
      </main>
      <Footer />
    </React.Fragment>
  );
}

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