// landing_page.jsx — retraide.ch landing page

const LP = {
  pink: '#E8286A',
  pinkSoft: '#FDE7EE',
  pink600: '#C01E57',
  blue: '#2E5DA1',
  blueDeep: '#1E3A5F',
  blueSoft: '#EAF1F8',
  peach: '#F6957F',
  peachSoft: '#FFE4D8',
  sage: '#7FA894',
  ink: '#121212',
  ink2: '#263238',
  ink3: '#455A64',
  muted: '#6B7680',
  cream: '#FAF7F2',
  line: '#E6ECF4',
};

// ═══════════════════════ i18n ═══════════════════════
const LANG_KEY = 'retraide_lang';

const getInitialLang = () => {
  try {
    if (typeof localStorage !== 'undefined') {
      const stored = localStorage.getItem(LANG_KEY);
      if (stored === 'fr' || stored === 'de') return stored;
    }
    if (typeof navigator !== 'undefined' && navigator.language) {
      return navigator.language.toLowerCase().startsWith('de') ? 'de' : 'fr';
    }
  } catch (e) {
    // localStorage may throw in private mode / SSR
  }
  return 'fr';
};

const DICT = {
  fr: {
    'nav.app': "L'application",
    'nav.articles': 'Articles',
    'nav.project': 'Pour qui',
    'nav.faq': 'FAQ',
    'nav.signin': 'Se connecter',
    'nav.signup': 'Rejoindre la beta',

    'hero.eyebrow': 'BETA OUVERTE · SUISSE ROMANDE',
    'hero.title.before': "L'app qui ",
    'hero.title.highlight': 'épaule',
    'hero.title.after': " les proches aidants.",
    'hero.subtitle': "Coordonner les soins, partager les tâches avec votre cercle, retrouver les bonnes informations au bon moment. RetrAide vous aide à aider — sans vous épuiser.",
    'hero.cta.signup': 'Ouvrir RetrAide',
    'hero.cta.howItWorks': 'Voir comment ça marche',
    'hero.trust.free.bold': 'Gratuit',
    'hero.trust.free.rest': ' pendant la beta',
    'hero.trust.data.bold': 'Données en europe',
    'hero.trust.data.rest': ' · RGPD',
    'hero.trust.time.bold': '3 min',
    'hero.trust.time.rest': " pour s'inscrire",
    'hero.card1.t1': 'Marc · ton frère',
    'hero.card1.t2': '"Je m\'occupe des courses 👍"',
    'hero.card2.t1': 'Rendez-vous confirmé',
    'hero.card2.t2': 'Dr. Müller · Mardi 14:30',

    'logobar.label': 'Soutenu par',

    'problem.eyebrow': "Le quotidien d'un proche aidant",
    'problem.title.before': 'Aider, c\'est ',
    'problem.title.highlight': 'aussi',
    'problem.title.after': ' jongler en silence.',
    'problem.subtitle': "En Suisse, 1 personne sur 5 aide régulièrement un proche. La plupart le font seules, sans formation, et finissent par s'épuiser. RetrAide est là pour changer ça.",
    'problem.card1.h': 'La charge mentale est invisible',
    'problem.card1.p': "Médicaments, rendez-vous, papiers, repas — tout est dans votre tête, et personne autour ne mesure ce que ça représente.",
    'problem.card2.h': "L'entourage veut aider, mais ne sait pas comment",
    'problem.card2.p': "\"Dis-moi si je peux faire quelque chose\" — sans liste claire, l'aide reste théorique et la fatigue s'accumule sur une seule personne.",
    'problem.card3.h': "L'information utile est éparpillée",
    'problem.card3.p': "Aides cantonales, démarches juridiques, conseils médicaux : on cherche dans dix endroits différents, souvent dans l'urgence.",

    'features.eyebrow': 'Comment ça marche',
    'features.title.before': 'Trois piliers pour ',
    'features.title.highlight': 'alléger',
    'features.title.after': ' votre quotidien.',

    'features.f1.tag': 'ORGANISER',
    'features.f1.h.l1': "Toutes les tâches d'aide,",
    'features.f1.h.l2': 'au même endroit.',
    'features.f1.p': "Créez une tâche en 10 secondes, ajoutez le contexte, et voyez votre semaine à venir d'un seul coup d'œil.",
    'features.f1.b1.bold': 'Récurrences intelligentes',
    'features.f1.b1.rest': ' — médicaments du soir, courses du mardi, sans ressaisir.',
    'features.f1.b2.bold': 'Calendrier partagé',
    'features.f1.b2.rest': ' avec rappels avant chaque rendez-vous.',
    'features.f1.b3.bold': 'Documents joints',
    'features.f1.b3.rest': " — ordonnance, carte AVS, plan d'accès, toujours sous la main.",

    'features.f2.tag': 'PARTAGER',
    'features.f2.h.l1': "Un cercle d'aide,",
    'features.f2.h.l2': 'pas un poids unique.',
    'features.f2.p': "Invitez votre famille, vos voisins, le médecin, l'aide à domicile. Chacun voit son rôle, ses tâches, sans noyer les autres.",
    'features.f2.b1.bold': 'Niveaux de partage',
    'features.f2.b1.rest': " — la voisine ne voit pas l'ordonnance, le médecin si.",
    'features.f2.b2.bold': 'Tâches "à prendre"',
    'features.f2.b2.rest': " — l'entourage choisit, vous n'avez plus à demander.",
    'features.f2.b3.bold': "Vue d'équilibre",
    'features.f2.b3.rest': ' — qui fait quoi, sur la semaine, sans tableau Excel.',

    'features.f3.tag': "S'INFORMER",
    'features.f3.h.l1': 'Le bon savoir,',
    'features.f3.h.l2': 'au bon moment.',
    'features.f3.p': "Une bibliothèque d'articles courts, écrits par des soignants et juristes suisses. Suggérés selon votre situation — pas un Google qui vous noie.",
    'features.f3.b1.bold': 'Articles ciblés',
    'features.f3.b1.rest': ' par situation : début de la maladie, hospitalisation, retour à la maison.',
    'features.f3.b2.bold': 'Aides cantonales',
    'features.f3.b2.rest': ' — vaudoises, genevoises, fribourgeoises : ce à quoi vous avez droit.',
    'features.f3.b3.bold': 'Format lisible',
    'features.f3.b3.rest': ' — 3 à 6 minutes par article, sans jargon.',

    'outcomes.n1.unit': '/5',
    'outcomes.n1.l': 'Suisses aident régulièrement un proche.',
    'outcomes.n2.unit': '%',
    'outcomes.n2.l': 'se sentent seuls face à cette charge.',
    'outcomes.n3.unit': '/jour',
    'outcomes.n3.l': "en moyenne consacrées à l'aide.",
    'outcomes.n4.unit': '%',
    'outcomes.n4.l': "de charge ressentie après 3 mois d'usage.*",
    'outcomes.footnote': '* Étude pilote HES-SO 2025, n=84 proches aidants — résultats préliminaires.',

    'articles.eyebrow': 'La bibliothèque RetrAide',
    'articles.title.l1': 'Des articles concrets,',
    'articles.title.l2': 'pour traverser chaque étape.',
    'articles.subtitle': 'Plus de 80 articles écrits avec des soignants, juristes et psychologues romands.',
    'articles.featured.tag': 'À LA UNE',
    'articles.featured.meta': 'DOSSIER · 12 MIN',
    'articles.featured.h': 'Quand un parent ne peut plus rester seul à la maison : 5 questions à poser avant de décider.',
    'articles.featured.p': "Du maintien à domicile à l'EMS, un guide pour clarifier vos options sans précipitation, avec les ressources cantonales adaptées.",
    'articles.a2.tag': 'JURIDIQUE',
    'articles.a2.meta': '5 MIN',
    'articles.a2.h': 'La procuration : ce qu\'elle couvre vraiment.',
    'articles.a3.tag': 'ÉMOTIONNEL',
    'articles.a3.meta': '4 MIN',
    'articles.a3.h': "Reconnaître les signes d'épuisement de l'aidant.",
    'articles.a4.tag': 'FINANCIER',
    'articles.a4.meta': '6 MIN',
    'articles.a4.h': 'Les aides du canton de Vaud, expliquées simplement.',
    'articles.a5.tag': 'SANTÉ',
    'articles.a5.meta': '3 MIN',
    'articles.a5.h': 'Bien préparer un rendez-vous médical pour un proche.',

    'personas.eyebrow': 'Pour qui ?',
    'personas.title.before': 'Pensé pour ',
    'personas.title.highlight': 'tous',
    'personas.title.after': ' ceux qui aident.',
    'personas.p1.h': 'Vous aidez un parent',
    'personas.p1.p': 'Vos parents vieillissent. Vous gérez les rendez-vous, les médicaments, parfois à distance. Vos frères et sœurs voudraient aider — sans savoir comment.',
    'personas.p1.tag': "L'usage le plus fréquent",
    'personas.p2.h': 'Vous accompagnez un conjoint',
    'personas.p2.p': "La maladie change votre quotidien à deux. Vous voulez garder un cercle de soutien autour de vous, sans tout porter seul·e.",
    'personas.p2.tag': 'Soutien rapproché',
    'personas.p3.h': 'Vous êtes un aidant pro',
    'personas.p3.p': 'Aide à domicile, infirmier·ère, assistant·e social·e — coordonnez-vous avec la famille sans appels téléphoniques en boucle.',
    'personas.p3.tag': 'Mode professionnel',

    'quote.text': "Pour la première fois en deux ans, j'ai eu l'impression que je n'étais pas seule à m'occuper de ma mère.",
    'quote.author.name': 'Sophie C., 47 ans',
    'quote.author.meta': 'Lausanne · beta-testeuse depuis 4 mois',

    'faq.eyebrow': 'FAQ',
    'faq.title.l1': 'Vous avez',
    'faq.title.l2': 'des questions.',
    'faq.contact.before': "Si la vôtre n'y est pas, écrivez-nous : ",
    'faq.q1.q': "L'application est-elle gratuite ?",
    'faq.q1.a': "Pendant la beta (jusqu'à fin 2026), RetrAide est entièrement gratuite. Nous travaillons avec des partenaires cantonaux pour garantir un accès large à l'avenir.",
    'faq.q2.q': 'Mes données sont-elles en sécurité ?',
    'faq.q2.a': 'Toutes les données sont hébergées en europe, chiffrées de bout en bout. Vous gardez le contrôle de qui voit quoi dans votre cercle, et vous pouvez tout exporter ou supprimer à tout moment.',
    'faq.q3.q': "Est-ce que la personne aidée doit utiliser l'app aussi ?",
    'faq.q3.a': "Non. RetrAide est pensée pour les proches aidants. La personne aidée n'a rien à installer — bien que nous proposions un mode \"vue simple\" si elle souhaite voir son agenda.",
    'faq.q4.q': 'Comment inviter ma famille dans le cercle ?',
    'faq.q4.a': "Un lien d'invitation suffit. Pas de création de compte compliquée — la personne reçoit un SMS ou email et accède directement à sa vue.",
    'faq.q5.q': 'Disponible en plusieurs langues ?',
    'faq.q5.a': "L'application est actuellement disponible en Francais, Allemand, Italien et Anglais",
    'faq.q6.q': 'Qui est derrière RetrAide ?',
    'faq.q6.a': "Une équipe romande, soutenue par Innosuisse, la HES-SO et plusieurs fondations cantonales. Nous avons co-conçu l'app avec plus de 200 proches aidants depuis 2023.",

    'finalcta.title': "Aider, sans s'oublier.",
    'finalcta.subtitle': "Rejoignez les 1'800 proches aidants romands qui utilisent déjà RetrAide en beta. Disponible sur tous vos appareils.",
    'finalcta.cta': 'Ouvrir dans le navigateur',
    'finalcta.note': 'iOS et Android arrivent bientôt',
    'finalcta.footer': 'Vos données restent en europe · Synchronisation automatique entre web et mobile.',

    'footer.tagline': "L'application qui épaule les proches aidants en Suisse romande. Un projet associatif soutenu par Innosuisse.",
    'footer.col.product': 'Produit',
    'footer.col.product.l1': 'Fonctionnalités',
    'footer.col.product.l2': 'Articles',
    'footer.col.product.l3': 'Télécharger',
    'footer.col.project': 'Le projet',
    'footer.col.project.l1': 'Notre mission',
    'footer.col.project.l2': "L'équipe",
    'footer.col.project.l3': 'Partenaires',
    'footer.col.project.l4': 'Presse',
    'footer.col.contact': 'Contact',
    'footer.col.contact.l2': 'LinkedIn',
    'footer.legal.copyright': '© 2026 Association RetrAide · Lausanne, Suisse',
    'footer.legal.privacy': 'Confidentialité',
    'footer.legal.tos': 'CGU',
    'footer.legal.imprint': 'Mentions légales',
  },
  de: {
    'nav.app': 'Die App',
    'nav.articles': 'Artikel',
    'nav.project': 'Für wen',
    'nav.faq': 'FAQ',
    'nav.signin': 'Anmelden',
    'nav.signup': 'An der Beta teilnehmen',

    'hero.eyebrow': 'BETA OFFEN · SCHWEIZ',
    'hero.title.before': 'Die App, die pflegende Angehörige ',
    'hero.title.highlight': 'unterstützt',
    'hero.title.after': '.',
    'hero.subtitle': 'Pflege koordinieren, Aufgaben mit Ihrem Kreis teilen, die richtigen Informationen zur richtigen Zeit finden. RetrAide hilft Ihnen zu helfen — ohne sich zu erschöpfen.',
    'hero.cta.signup': 'RetrAide öffnen',
    'hero.cta.howItWorks': 'So funktioniert es',
    'hero.trust.free.bold': 'Kostenlos',
    'hero.trust.free.rest': ' während der Beta',
    'hero.trust.data.bold': 'Daten in Europa',
    'hero.trust.data.rest': ' · DSGVO',
    'hero.trust.time.bold': '3 Min.',
    'hero.trust.time.rest': ' für die Anmeldung',
    'hero.card1.t1': 'Marc · dein Bruder',
    'hero.card1.t2': '"Ich kümmere mich um die Einkäufe 👍"',
    'hero.card2.t1': 'Termin bestätigt',
    'hero.card2.t2': 'Dr. Müller · Dienstag 14:30',

    'logobar.label': 'Unterstützt von',

    'problem.eyebrow': 'Der Alltag pflegender Angehöriger',
    'problem.title.before': 'Helfen heisst ',
    'problem.title.highlight': 'auch',
    'problem.title.after': ', im Stillen zu jonglieren.',
    'problem.subtitle': 'In der Schweiz hilft jede fünfte Person regelmässig einem Angehörigen. Die meisten tun dies allein, ohne Ausbildung, und erschöpfen sich dabei. RetrAide will das ändern.',
    'problem.card1.h': 'Die mentale Last ist unsichtbar',
    'problem.card1.p': 'Medikamente, Termine, Papiere, Mahlzeiten — alles steckt in Ihrem Kopf, und niemand um Sie herum erfasst, was das bedeutet.',
    'problem.card2.h': 'Das Umfeld will helfen, weiss aber nicht wie',
    'problem.card2.p': '"Sag mir, wenn ich etwas tun kann" — ohne klare Liste bleibt die Hilfe theoretisch und die Erschöpfung sammelt sich bei einer einzigen Person.',
    'problem.card3.h': 'Nützliche Informationen sind verstreut',
    'problem.card3.p': 'Kantonale Hilfen, rechtliche Schritte, medizinischer Rat: Man sucht an zehn verschiedenen Orten, oft unter Zeitdruck.',

    'features.eyebrow': 'So funktioniert es',
    'features.title.before': 'Drei Säulen, um Ihren Alltag zu ',
    'features.title.highlight': 'erleichtern',
    'features.title.after': '.',

    'features.f1.tag': 'ORGANISIEREN',
    'features.f1.h.l1': 'Alle Pflegeaufgaben,',
    'features.f1.h.l2': 'an einem Ort.',
    'features.f1.p': 'Erstellen Sie eine Aufgabe in 10 Sekunden, fügen Sie den Kontext hinzu und sehen Sie Ihre kommende Woche auf einen Blick.',
    'features.f1.b1.bold': 'Intelligente Wiederholungen',
    'features.f1.b1.rest': ' — Medikamente am Abend, Einkäufe am Dienstag, ohne erneute Eingabe.',
    'features.f1.b2.bold': 'Geteilter Kalender',
    'features.f1.b2.rest': ' mit Erinnerungen vor jedem Termin.',
    'features.f1.b3.bold': 'Angehängte Dokumente',
    'features.f1.b3.rest': ' — Rezept, AHV-Karte, Wegbeschreibung, immer zur Hand.',

    'features.f2.tag': 'TEILEN',
    'features.f2.h.l1': 'Ein Hilfekreis,',
    'features.f2.h.l2': 'keine alleinige Last.',
    'features.f2.p': 'Laden Sie Ihre Familie, Ihre Nachbarn, den Arzt, die Spitex ein. Jede Person sieht ihre Rolle und ihre Aufgaben, ohne die anderen zu überfordern.',
    'features.f2.b1.bold': 'Freigabe-Stufen',
    'features.f2.b1.rest': ' — die Nachbarin sieht das Rezept nicht, der Arzt schon.',
    'features.f2.b2.bold': 'Aufgaben "zum Übernehmen"',
    'features.f2.b2.rest': ' — das Umfeld wählt selbst, Sie müssen nicht mehr fragen.',
    'features.f2.b3.bold': 'Übersicht der Aufteilung',
    'features.f2.b3.rest': ' — wer macht was in der Woche, ohne Excel-Tabelle.',

    'features.f3.tag': 'INFORMIEREN',
    'features.f3.h.l1': 'Das richtige Wissen,',
    'features.f3.h.l2': 'zur richtigen Zeit.',
    'features.f3.p': 'Eine Bibliothek mit kurzen Artikeln, geschrieben von Schweizer Pflegenden und Juristen. Auf Ihre Situation zugeschnitten — kein Google, das Sie überflutet.',
    'features.f3.b1.bold': 'Zielgerichtete Artikel',
    'features.f3.b1.rest': ' je nach Situation: Krankheitsbeginn, Spitalaufenthalt, Rückkehr nach Hause.',
    'features.f3.b2.bold': 'Kantonale Hilfen',
    'features.f3.b2.rest': ' — was Ihnen in Ihrem Kanton zusteht.',
    'features.f3.b3.bold': 'Lesbares Format',
    'features.f3.b3.rest': ' — 3 bis 6 Minuten pro Artikel, ohne Fachjargon.',

    'outcomes.n1.unit': '/5',
    'outcomes.n1.l': 'Personen in der Schweiz pflegen regelmässig Angehörige.',
    'outcomes.n2.unit': '%',
    'outcomes.n2.l': 'fühlen sich mit dieser Last allein.',
    'outcomes.n3.unit': '/Tag',
    'outcomes.n3.l': 'durchschnittlich für die Pflege aufgewendet.',
    'outcomes.n4.unit': '%',
    'outcomes.n4.l': 'weniger empfundene Belastung nach 3 Monaten Nutzung.*',
    'outcomes.footnote': '* Pilotstudie HES-SO 2025, n=84 pflegende Angehörige — vorläufige Ergebnisse.',

    'articles.eyebrow': 'Die RetrAide-Bibliothek',
    'articles.title.l1': 'Konkrete Artikel,',
    'articles.title.l2': 'um jede Etappe zu meistern.',
    'articles.subtitle': 'Über 80 Artikel, verfasst gemeinsam mit Schweizer Pflegenden, Juristinnen und Psychologen.',
    'articles.featured.tag': 'IM FOKUS',
    'articles.featured.meta': 'DOSSIER · 12 MIN',
    'articles.featured.h': 'Wenn ein Elternteil nicht mehr allein zu Hause bleiben kann: 5 Fragen, bevor Sie entscheiden.',
    'articles.featured.p': 'Vom Verbleib zu Hause bis zum Pflegeheim — ein Leitfaden, um Ihre Optionen ohne Eile zu klären, mit den passenden kantonalen Ressourcen.',
    'articles.a2.tag': 'RECHTLICH',
    'articles.a2.meta': '5 MIN',
    'articles.a2.h': 'Die Vollmacht: was sie wirklich abdeckt.',
    'articles.a3.tag': 'EMOTIONAL',
    'articles.a3.meta': '4 MIN',
    'articles.a3.h': 'Anzeichen einer Erschöpfung der pflegenden Person erkennen.',
    'articles.a4.tag': 'FINANZIELL',
    'articles.a4.meta': '6 MIN',
    'articles.a4.h': 'Die Hilfen des Kantons Waadt, einfach erklärt.',
    'articles.a5.tag': 'GESUNDHEIT',
    'articles.a5.meta': '3 MIN',
    'articles.a5.h': 'Einen Arzttermin für eine angehörige Person gut vorbereiten.',

    'personas.eyebrow': 'Für wen?',
    'personas.title.before': 'Gedacht für ',
    'personas.title.highlight': 'alle',
    'personas.title.after': ', die helfen.',
    'personas.p1.h': 'Sie helfen einem Elternteil',
    'personas.p1.p': 'Ihre Eltern werden älter. Sie organisieren Termine, Medikamente, manchmal aus der Ferne. Ihre Geschwister möchten helfen — wissen aber nicht wie.',
    'personas.p1.tag': 'Der häufigste Anwendungsfall',
    'personas.p2.h': 'Sie begleiten Ihren Partner',
    'personas.p2.p': 'Die Krankheit verändert Ihren Alltag zu zweit. Sie möchten einen Unterstützungskreis um sich behalten, ohne alles allein zu tragen.',
    'personas.p2.tag': 'Enge Begleitung',
    'personas.p3.h': 'Sie sind Pflegefachperson',
    'personas.p3.p': 'Spitex, Pflegefachperson, Sozialarbeiterin — koordinieren Sie sich mit der Familie ohne endlose Telefonate.',
    'personas.p3.tag': 'Profi-Modus',

    'quote.text': 'Zum ersten Mal seit zwei Jahren hatte ich das Gefühl, mit der Pflege meiner Mutter nicht allein zu sein.',
    'quote.author.name': 'Sophie C., 47 Jahre',
    'quote.author.meta': 'Lausanne · Beta-Testerin seit 4 Monaten',

    'faq.eyebrow': 'FAQ',
    'faq.title.l1': 'Sie haben',
    'faq.title.l2': 'Fragen.',
    'faq.contact.before': 'Wenn Ihre Frage hier nicht steht, schreiben Sie uns: ',
    'faq.q1.q': 'Ist die App kostenlos?',
    'faq.q1.a': 'Während der Beta (bis Ende 2026) ist RetrAide vollständig kostenlos. Wir arbeiten mit kantonalen Partnern zusammen, um auch in Zukunft einen breiten Zugang zu gewährleisten.',
    'faq.q2.q': 'Sind meine Daten sicher?',
    'faq.q2.a': 'Alle Daten werden in der Schweiz gehostet und Ende-zu-Ende verschlüsselt. Sie behalten die Kontrolle darüber, wer in Ihrem Kreis was sieht, und können jederzeit alles exportieren oder löschen.',
    'faq.q3.q': 'Muss die unterstützte Person die App auch nutzen?',
    'faq.q3.a': 'Nein. RetrAide ist für pflegende Angehörige gedacht. Die unterstützte Person muss nichts installieren — wir bieten allerdings einen Modus "Einfache Ansicht" an, falls sie ihren Kalender sehen möchte.',
    'faq.q4.q': 'Wie lade ich meine Familie in den Kreis ein?',
    'faq.q4.a': 'Ein Einladungslink genügt. Keine umständliche Kontoerstellung — die Person erhält eine SMS oder eine E-Mail und gelangt direkt zu ihrer Ansicht.',
    'faq.q5.q': 'In mehreren Sprachen verfügbar?',
    'faq.q5.a': "Die App ist derzeit auf Deutsch, Französisch, Italienisch und Englisch verfügbar",
    'faq.q6.q': 'Wer steht hinter RetrAide?',
    'faq.q6.a': 'Ein Schweizer Team, unterstützt von Innosuisse, der HES-SO und mehreren kantonalen Stiftungen. Wir haben die App seit 2023 gemeinsam mit über 200 pflegenden Angehörigen entwickelt.',

    'finalcta.title': 'Helfen, ohne sich selbst zu vergessen.',
    'finalcta.subtitle': "Schliessen Sie sich den 1'800 pflegenden Angehörigen an, die RetrAide bereits in der Beta nutzen. Auf allen Ihren Geräten verfügbar.",
    'finalcta.cta': 'Im Browser öffnen',
    'finalcta.note': 'iOS und Android folgen bald',
    'finalcta.footer': 'Ihre Daten bleiben in der Schweiz · Automatische Synchronisation zwischen Web und Mobile.',

    'footer.tagline': 'Die App, die pflegende Angehörige in der Schweiz unterstützt. Ein gemeinnütziges Projekt, gefördert von Innosuisse.',
    'footer.col.product': 'Produkt',
    'footer.col.product.l1': 'Funktionen',
    'footer.col.product.l2': 'Artikel',
    'footer.col.product.l3': 'Herunterladen',
    'footer.col.project': 'Das Projekt',
    'footer.col.project.l1': 'Unsere Mission',
    'footer.col.project.l2': 'Das Team',
    'footer.col.project.l3': 'Partner',
    'footer.col.project.l4': 'Presse',
    'footer.col.contact': 'Kontakt',
    'footer.col.contact.l2': 'LinkedIn',
    'footer.legal.copyright': '© 2026 Verein RetrAide · Lausanne, Schweiz',
    'footer.legal.privacy': 'Datenschutz',
    'footer.legal.tos': 'AGB',
    'footer.legal.imprint': 'Impressum',
  },
};

const LangContext = React.createContext({ lang: 'fr', setLang: () => {}, t: (k) => k });
const useT = () => React.useContext(LangContext);

const LangProvider = ({ children }) => {
  const [lang, setLangState] = React.useState(getInitialLang);

  const setLang = React.useCallback((next) => {
    setLangState(next);
    try {
      if (typeof localStorage !== 'undefined') {
        localStorage.setItem(LANG_KEY, next);
      }
    } catch (e) {
      // ignore
    }
  }, []);

  React.useEffect(() => {
    if (typeof document !== 'undefined' && document.documentElement) {
      document.documentElement.lang = lang;
    }
  }, [lang]);

  const t = React.useCallback((key) => {
    const dict = DICT[lang] || DICT.fr;
    if (dict[key] !== undefined) return dict[key];
    if (DICT.fr[key] !== undefined) return DICT.fr[key];
    return key;
  }, [lang]);

  const value = React.useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);

  return <LangContext.Provider value={value}>{children}</LangContext.Provider>;
};

// ─────────── C3 logo (têtes grandes — validé) ───────────
const Logo = ({ size = 40, id = 'logo' }) => {
  // Always paint the deep-blue background so the white silhouette stays
  // visible on light surfaces (Nav) as well as dark ones (Footer). The
  // previous onDark={false} path used #fff which made the white person
  // disappear into the nav.
  const bg = LP.blueDeep;
  const clipId = `clip-${id}-${size}`;
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ flexShrink: 0 }}>
      <defs>
        <clipPath id={clipId}><circle cx="60" cy="60" r="56"/></clipPath>
      </defs>
      <circle cx="60" cy="60" r="56" fill={bg}/>
      <g clipPath={`url(#${clipId})`}>
        <g fill="#fff">
          <path d="M 50 116 Q 50 80 64 74 Q 80 68 92 72 Q 102 78 104 92 Q 106 108 102 116 Z"/>
          <circle cx="76" cy="50" r="14"/>
        </g>
        <g fill={LP.pink}>
          <path d="M 18 116 Q 14 100 18 86 Q 24 74 38 70 Q 52 68 62 76 Q 70 82 70 116 Z"/>
          <circle cx="46" cy="46" r="14"/>
        </g>
      </g>
    </svg>
  );
};

const Wordmark = ({ onDark = false, size = 28 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <Logo size={size + 12} onDark={onDark} id={`wm-${onDark ? 'd' : 'l'}-${size}`}/>
    <div style={{
      fontSize: size, fontWeight: 800, letterSpacing: '-0.02em',
      color: onDark ? '#fff' : LP.ink, fontFamily: 'Montserrat',
    }}>
      Retr<span style={{ color: LP.pink }}>Aide</span>
    </div>
  </div>
);

// ─────────── Tiny phone-mockup (used as decorative product shots) ───────────
const PhoneMock = ({ children, w = 320, scale = 1 }) => (
  <div style={{
    width: w, transform: `scale(${scale})`, transformOrigin: 'center top',
    background: '#fff', borderRadius: 44, position: 'relative', overflow: 'hidden',
    boxShadow: '0 0 0 8px #1b1d21, 0 0 0 10px #2b2e33, 0 40px 80px -15px rgba(17,29,54,0.3)',
    aspectRatio: '320 / 600',
  }}>
    <div style={{
      position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
      width: 100, height: 28, borderRadius: 24, background: '#000', zIndex: 60,
    }}/>
    {children}
  </div>
);

// Status bar mini
const Status = () => (
  <div style={{ height: 50, padding: '20px 24px 4px', display: 'flex', justifyContent: 'space-between', fontSize: 13, fontWeight: 700, color: '#000' }}>
    <div>9:41</div>
    <div style={{ display: 'flex', gap: 5 }}>
      <svg width="16" height="11" viewBox="0 0 16 11"><path d="M1 8h2v2H1zM5 6h2v4H5zM9 4h2v6H9zM13 1h2v9h-2z" fill="#000"/></svg>
      <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2" stroke="#000"/><rect x="2" y="2" width="14" height="7" rx="1" fill="#000"/><rect x="19" y="3" width="2" height="5" rx="1" fill="#000"/></svg>
    </div>
  </div>
);

// Mock 1 — Dashboard (tâches du jour)
const MockDashboard = () => (
  <PhoneMock>
    <Status/>
    <div style={{ padding: '8px 18px 16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 12, color: LP.ink3, fontWeight: 600 }}>Bonjour Claire</div>
          <div style={{ fontSize: 18, fontWeight: 800, marginTop: 2 }}>Aujourd'hui</div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 999, background: LP.peach, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>CR</div>
      </div>

      <div style={{ background: LP.pinkSoft, borderRadius: 18, padding: 14, marginBottom: 12 }}>
        <div style={{ fontSize: 10, color: LP.pink, fontWeight: 700, letterSpacing: '0.1em' }}>PROCHAINE TÂCHE · 14:30</div>
        <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4, color: LP.ink }}>Rendez-vous médecin</div>
        <div style={{ fontSize: 12, color: LP.ink3, marginTop: 4, lineHeight: 1.4 }}>Mme Roos · Dr. Müller, Lausanne</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <div style={{ background: '#fff', borderRadius: 999, padding: '5px 10px', fontSize: 10, fontWeight: 600, color: LP.ink2 }}>Transport ✓</div>
          <div style={{ background: '#fff', borderRadius: 999, padding: '5px 10px', fontSize: 10, fontWeight: 600, color: LP.ink2 }}>Carte AVS ✓</div>
        </div>
      </div>

      {[
        { time: '16:00', t: 'Courses au Coop', who: '+ Marc' },
        { time: '18:00', t: 'Préparer le repas', who: 'Toi' },
        { time: 'Soir', t: 'Médicaments', who: 'Tournus' },
      ].map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < 2 ? `1px solid ${LP.line}` : 'none' }}>
          <div style={{ width: 8, height: 8, borderRadius: 999, background: LP.pink }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: LP.ink }}>{it.t}</div>
            <div style={{ fontSize: 10, color: LP.muted, marginTop: 2 }}>{it.time} · {it.who}</div>
          </div>
        </div>
      ))}
    </div>
  </PhoneMock>
);

// Mock 2 — Réseau / Cercle
// Real screenshot of the production "Cercle" tab (iPhone 17 Pro, 1206×2622),
// pulled from the Play Store capture set. Drops the previously-rendered
// hand-drawn orbit mock so what visitors see matches what they'll install.
const MockNetwork = () => (
  <PhoneMock>
    <img
      src="/screenshots/circle.png"
      alt="Aperçu : la vue cercle de l'app Retr'aide"
      style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'top',
        borderRadius: 'inherit',
      }}
    />
  </PhoneMock>
);

// Mock 3 — Articles / Savoir
const MockArticles = () => (
  <PhoneMock>
    <Status/>
    <div style={{ padding: '8px 18px 16px' }}>
      <div style={{ fontSize: 18, fontWeight: 800, marginBottom: 14 }}>Savoir</div>
      <div style={{ background: LP.blueSoft, borderRadius: 16, padding: 14, marginBottom: 12 }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: LP.blue, letterSpacing: '0.1em' }}>SUGGÉRÉ POUR TOI</div>
        <div style={{ fontFamily: 'DM Serif Display', fontSize: 17, lineHeight: 1.2, marginTop: 6, color: LP.ink }}>Comment parler de la perte d'autonomie ?</div>
        <div style={{ fontSize: 11, color: LP.ink3, marginTop: 8, lineHeight: 1.5 }}>Un guide en 5 étapes pour aborder le sujet sans heurter.</div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 10 }}>
          <div style={{ fontSize: 10, color: LP.muted }}>5 min · Émotionnel</div>
        </div>
      </div>
      {[
        { tag: 'JURIDIQUE', t: 'Procuration : par où commencer ?', m: '4 min' },
        { tag: 'FINANCIER', t: 'Aides cantonales en Suisse romande', m: '6 min' },
        { tag: 'SANTÉ', t: 'Reconnaître les signes d\'épuisement', m: '3 min' },
      ].map((a, i) => (
        <div key={i} style={{ padding: '12px 0', borderBottom: i < 2 ? `1px solid ${LP.line}` : 'none', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background: i === 0 ? LP.peachSoft : i === 1 ? LP.pinkSoft : LP.blueSoft, flexShrink: 0 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', color: LP.muted }}>{a.tag} · {a.m}</div>
            <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2, color: LP.ink, lineHeight: 1.3 }}>{a.t}</div>
          </div>
        </div>
      ))}
    </div>
  </PhoneMock>
);

// ═══════════════════════ COMPONENTS ═══════════════════════

// Beta URLs — point at the live PWA. The auth gate in app/_layout.tsx
// routes unauthenticated users into onboarding/phone, authed users into tabs.
const APP_URL = 'https://app.retraide.ch';
const SIGNUP_URL = `${APP_URL}/onboarding/phone`;
const LOGIN_URL = `${APP_URL}/`;

const LangToggle = () => {
  const { lang, setLang } = useT();
  const btnBase = {
    background: 'none',
    border: 'none',
    padding: '4px 6px',
    cursor: 'pointer',
    fontFamily: 'inherit',
    fontSize: 'inherit',
    lineHeight: 1,
  };
  const activeStyle = { ...btnBase, color: LP.pink, fontWeight: 800 };
  const inactiveStyle = { ...btnBase, color: LP.muted, fontWeight: 600 };
  return (
    <div className="lp-lang" style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
      <button type="button" onClick={() => setLang('fr')} style={lang === 'fr' ? activeStyle : inactiveStyle} aria-pressed={lang === 'fr'}>FR</button>
      <span style={{ color: LP.muted }}>·</span>
      <button type="button" onClick={() => setLang('de')} style={lang === 'de' ? activeStyle : inactiveStyle} aria-pressed={lang === 'de'}>DE</button>
    </div>
  );
};

const Nav = () => {
  const { t } = useT();
  return (
    <nav className="lp-nav">
      <div className="lp-container lp-nav-inner">
        <Wordmark size={20}/>
        <div className="lp-nav-links">
          <a href="#fonctions">{t('nav.app')}</a>
          {/* <a href="#savoir">{t('nav.articles')}</a> — Articles section hidden */}
          <a href="#projet">{t('nav.project')}</a>
          <a href="#faq">{t('nav.faq')}</a>
        </div>
        <div className="lp-nav-cta">
          <LangToggle/>
          <a href={LOGIN_URL} className="lp-btn ghost" style={{ height: 42 }}>{t('nav.signin')}</a>
        </div>
      </div>
    </nav>
  );
};

const Hero = () => {
  const { t } = useT();
  return (
    <section className="lp-hero">
      <div className="lp-hero-blob1"/>
      <div className="lp-hero-blob2"/>
      <div className="lp-container lp-hero-grid">
        <div>
          <div className="lp-eyebrow">
            <span className="dot"/>{t('hero.eyebrow')}
          </div>
          <h1 className="lp-h1">{t('hero.title.before')}<em>{t('hero.title.highlight')}</em>{t('hero.title.after')}</h1>
          <p className="lp-sub">
            {t('hero.subtitle')}
          </p>
          <div className="lp-cta-row">
            <a href={SIGNUP_URL} className="lp-btn lg">
              {t('hero.cta.signup')}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a href="#fonctions" className="lp-btn ghost lg">{t('hero.cta.howItWorks')}</a>
          </div>
          <div className="lp-trust">
            <div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={LP.sage} strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
              <span><b>{t('hero.trust.free.bold')}</b>{t('hero.trust.free.rest')}</span>
            </div>
            <div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={LP.sage} strokeWidth="2.5"><path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/></svg>
              <span><b>{t('hero.trust.data.bold')}</b>{t('hero.trust.data.rest')}</span>
            </div>
            <div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={LP.sage} strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
              <span><b>{t('hero.trust.time.bold')}</b>{t('hero.trust.time.rest')}</span>
            </div>
          </div>
        </div>
        <div className="lp-hero-visual">
          <div className="lp-phone-stack">
            <MockDashboard/>
          </div>
          <div className="lp-phone-card tl">
            <div className="row">
              <div className="av" style={{ background: LP.blue }}>M</div>
              <div>
                <div className="t1">{t('hero.card1.t1')}</div>
                <div className="t2">{t('hero.card1.t2')}</div>
              </div>
            </div>
          </div>
          <div className="lp-phone-card br">
            <div className="row">
              <div className="av" style={{ background: LP.sage }}>✓</div>
              <div>
                <div className="t1">{t('hero.card2.t1')}</div>
                <div className="t2">{t('hero.card2.t2')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const LogoBar = () => {
  const { t } = useT();
  return (
    <section className="lp-logobar">
      <div className="lp-container lp-logobar-inner">
        <div className="label">{t('logobar.label')}</div>
        <div className="partner">Innosuisse</div>
        <div className="partner">HES-SO</div>
        <div className="partner">UCreate</div>
        <div className="partner">Unil. HEC Lausanne</div>
      </div>
    </section>
  );
};

const Problem = () => {
  const { t } = useT();
  return (
    <section className="lp-section">
      <div className="lp-container">
        <div className="lp-section-head">
          <div className="lp-eyebrow-text">{t('problem.eyebrow')}</div>
          <h2 className="lp-h2">{t('problem.title.before')}<em>{t('problem.title.highlight')}</em>{t('problem.title.after')}</h2>
          <p className="lp-section-sub">
            {t('problem.subtitle')}
          </p>
        </div>
        <div className="lp-problem-grid">
          <div className="lp-problem-card">
            <div className="lp-problem-num">01</div>
            <h3 className="lp-problem-h">{t('problem.card1.h')}</h3>
            <p className="lp-problem-p">{t('problem.card1.p')}</p>
          </div>
          <div className="lp-problem-card">
            <div className="lp-problem-num">02</div>
            <h3 className="lp-problem-h">{t('problem.card2.h')}</h3>
            <p className="lp-problem-p">{t('problem.card2.p')}</p>
          </div>
          <div className="lp-problem-card">
            <div className="lp-problem-num">03</div>
            <h3 className="lp-problem-h">{t('problem.card3.h')}</h3>
            <p className="lp-problem-p">{t('problem.card3.p')}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  const { t } = useT();
  return (
    <section className="lp-section" id="fonctions" style={{ background: '#fff' }}>
      <div className="lp-container">
        <div className="lp-section-head">
          <div className="lp-eyebrow-text">{t('features.eyebrow')}</div>
          <h2 className="lp-h2">{t('features.title.before')}<em>{t('features.title.highlight')}</em>{t('features.title.after')}</h2>
        </div>

        {/* Feature 1 — Tâches partagées */}
        <div className="lp-feature-row">
          <div>
            <div className="lp-feature-tag"><span className="num">01</span>{t('features.f1.tag')}</div>
            <h3 className="lp-feature-h">{t('features.f1.h.l1')}<br/>{t('features.f1.h.l2')}</h3>
            <p className="lp-feature-p">
              {t('features.f1.p')}
            </p>
            <ul className="lp-feature-bullets">
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f1.b1.bold')}</b>{t('features.f1.b1.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f1.b2.bold')}</b>{t('features.f1.b2.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f1.b3.bold')}</b>{t('features.f1.b3.rest')}</span>
              </li>
            </ul>
          </div>
          <div className="lp-feature-visual">
            <div className="lp-feature-visual-bg"/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <MockDashboard/>
            </div>
          </div>
        </div>

        {/* Feature 2 — Cercle / Réseau */}
        <div className="lp-feature-row reverse">
          <div>
            <div className="lp-feature-tag"><span className="num">02</span>{t('features.f2.tag')}</div>
            <h3 className="lp-feature-h">{t('features.f2.h.l1')}<br/>{t('features.f2.h.l2')}</h3>
            <p className="lp-feature-p">
              {t('features.f2.p')}
            </p>
            <ul className="lp-feature-bullets">
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f2.b1.bold')}</b>{t('features.f2.b1.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f2.b2.bold')}</b>{t('features.f2.b2.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f2.b3.bold')}</b>{t('features.f2.b3.rest')}</span>
              </li>
            </ul>
          </div>
          <div className="lp-feature-visual blue">
            <div className="lp-feature-visual-bg"/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <MockNetwork/>
            </div>
          </div>
        </div>

        {/* Feature 3 — Savoir */}
        <div className="lp-feature-row">
          <div>
            <div className="lp-feature-tag"><span className="num">03</span>{t('features.f3.tag')}</div>
            <h3 className="lp-feature-h">{t('features.f3.h.l1')}<br/>{t('features.f3.h.l2')}</h3>
            <p className="lp-feature-p">
              {t('features.f3.p')}
            </p>
            <ul className="lp-feature-bullets">
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f3.b1.bold')}</b>{t('features.f3.b1.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f3.b2.bold')}</b>{t('features.f3.b2.rest')}</span>
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                <span><b>{t('features.f3.b3.bold')}</b>{t('features.f3.b3.rest')}</span>
              </li>
            </ul>
          </div>
          <div className="lp-feature-visual peach">
            <div className="lp-feature-visual-bg"/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <MockArticles/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Outcomes = () => {
  const { t } = useT();
  return (
    <section className="lp-section compact">
      <div className="lp-container">
        <div className="lp-outcomes">
          <div>
            <div className="lp-outcome-num">1<span>{t('outcomes.n1.unit')}</span></div>
            <div className="lp-outcome-l">{t('outcomes.n1.l')}</div>
          </div>
          <div>
            <div className="lp-outcome-num">63<span>{t('outcomes.n2.unit')}</span></div>
            <div className="lp-outcome-l">{t('outcomes.n2.l')}</div>
          </div>
          <div>
            <div className="lp-outcome-num">4h<span>{t('outcomes.n3.unit')}</span></div>
            <div className="lp-outcome-l">{t('outcomes.n3.l')}</div>
          </div>
          <div>
            <div className="lp-outcome-num">−40<span>{t('outcomes.n4.unit')}</span></div>
            <div className="lp-outcome-l">{t('outcomes.n4.l')}</div>
          </div>
        </div>
        <div style={{ fontSize: 11, color: LP.muted, marginTop: 12, textAlign: 'center' }}>{t('outcomes.footnote')}</div>
      </div>
    </section>
  );
};

const Articles = () => {
  const { t } = useT();
  return (
    <section className="lp-section lp-articles" id="savoir">
      <div className="lp-container">
        <div className="lp-section-head">
          <div className="lp-eyebrow-text">{t('articles.eyebrow')}</div>
          <h2 className="lp-h2">{t('articles.title.l1')}<br/><em>{t('articles.title.l2')}</em></h2>
          <p className="lp-section-sub">
            {t('articles.subtitle')}
          </p>
        </div>
        <div className="lp-articles-grid">
          <article className="lp-article-card feature">
            <div className="lp-article-img">
              <span className="lp-article-tag">{t('articles.featured.tag')}</span>
            </div>
            <div className="lp-article-body">
              <div className="lp-article-meta">{t('articles.featured.meta')}</div>
              <h3 className="lp-article-h">{t('articles.featured.h')}</h3>
              <p className="lp-article-p">{t('articles.featured.p')}</p>
            </div>
          </article>
          <article className="lp-article-card">
            <div className="lp-article-img b">
              <span className="lp-article-tag">{t('articles.a2.tag')}</span>
            </div>
            <div className="lp-article-body">
              <div className="lp-article-meta">{t('articles.a2.meta')}</div>
              <h3 className="lp-article-h">{t('articles.a2.h')}</h3>
            </div>
          </article>
          <article className="lp-article-card">
            <div className="lp-article-img c">
              <span className="lp-article-tag">{t('articles.a3.tag')}</span>
            </div>
            <div className="lp-article-body">
              <div className="lp-article-meta">{t('articles.a3.meta')}</div>
              <h3 className="lp-article-h">{t('articles.a3.h')}</h3>
            </div>
          </article>
          <article className="lp-article-card">
            <div className="lp-article-img">
              <span className="lp-article-tag">{t('articles.a4.tag')}</span>
            </div>
            <div className="lp-article-body">
              <div className="lp-article-meta">{t('articles.a4.meta')}</div>
              <h3 className="lp-article-h">{t('articles.a4.h')}</h3>
            </div>
          </article>
          <article className="lp-article-card">
            <div className="lp-article-img b">
              <span className="lp-article-tag">{t('articles.a5.tag')}</span>
            </div>
            <div className="lp-article-body">
              <div className="lp-article-meta">{t('articles.a5.meta')}</div>
              <h3 className="lp-article-h">{t('articles.a5.h')}</h3>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
};

const Personas = () => {
  const { t } = useT();
  return (
    <section className="lp-section" id="projet">
      <div className="lp-container">
        <div className="lp-section-head">
          <div className="lp-eyebrow-text">{t('personas.eyebrow')}</div>
          <h2 className="lp-h2">{t('personas.title.before')}<em>{t('personas.title.highlight')}</em>{t('personas.title.after')}</h2>
        </div>
        <div className="lp-personas">
          <div className="lp-persona">
            <div className="lp-persona-icon" style={{ background: LP.pinkSoft, color: LP.pink }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/></svg>
            </div>
            <h3 className="lp-persona-h">{t('personas.p1.h')}</h3>
            <p className="lp-persona-p">{t('personas.p1.p')}</p>
            <div className="lp-persona-tag">{t('personas.p1.tag')}</div>
          </div>
          <div className="lp-persona">
            <div className="lp-persona-icon" style={{ background: LP.blueSoft, color: LP.blue }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M16 4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zM4 18v-2c0-1.1.9-2 2-2h2v-3a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v3h2c1.1 0 2 .9 2 2v2H4z"/></svg>
            </div>
            <h3 className="lp-persona-h">{t('personas.p2.h')}</h3>
            <p className="lp-persona-p">{t('personas.p2.p')}</p>
            <div className="lp-persona-tag">{t('personas.p2.tag')}</div>
          </div>
          <div className="lp-persona">
            <div className="lp-persona-icon" style={{ background: LP.peachSoft, color: '#B54522' }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 22h20L12 2zm0 6l6.5 12h-13L12 8z"/></svg>
            </div>
            <h3 className="lp-persona-h">{t('personas.p3.h')}</h3>
            <p className="lp-persona-p">{t('personas.p3.p')}</p>
            <div className="lp-persona-tag">{t('personas.p3.tag')}</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Quote = () => {
  const { t } = useT();
  return (
    <section className="lp-section compact" style={{ background: '#fff' }}>
      <div className="lp-container">
        <div className="lp-quote">
          <div className="lp-quote-mark">"</div>
          <blockquote className="lp-quote-text">
            {t('quote.text')}
          </blockquote>
          <div className="lp-quote-author">
            <div className="lp-quote-av">SC</div>
            <div className="lp-quote-name">
              <b>{t('quote.author.name')}</b>
              <span>{t('quote.author.meta')}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const { t } = useT();
  const items = [
    { q: t('faq.q1.q'), a: t('faq.q1.a') },
    { q: t('faq.q2.q'), a: t('faq.q2.a') },
    { q: t('faq.q3.q'), a: t('faq.q3.a') },
    { q: t('faq.q4.q'), a: t('faq.q4.a') },
    { q: t('faq.q5.q'), a: t('faq.q5.a') },
    { q: t('faq.q6.q'), a: t('faq.q6.a') },
  ];
  return (
    <section className="lp-section" id="faq">
      <div className="lp-container">
        <div className="lp-faq-grid">
          <div>
            <div className="lp-eyebrow-text">{t('faq.eyebrow')}</div>
            <h2 className="lp-h2" style={{ fontSize: 38 }}>{t('faq.title.l1')}<br/>{t('faq.title.l2')}</h2>
            <p className="lp-section-sub">{t('faq.contact.before')}<a href="mailto:contact@retraide.ch" style={{ color: LP.pink, fontWeight: 700 }}>contact@retraide.ch</a></p>
          </div>
          <div className="lp-faq">
            {items.map((f, i) => (
              <details key={i} {...(i === 0 ? { open: true } : {})}>
                <summary>{f.q}</summary>
                <p>{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => {
  const { t } = useT();
  return (
    <section className="lp-section" id="download">
      <div className="lp-container">
        <div className="lp-final-cta">
          <h2>{t('finalcta.title')}</h2>
          <p>{t('finalcta.subtitle')}</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={SIGNUP_URL} className="lp-btn lg">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
              {t('finalcta.cta')}
            </a>
            <span style={{ fontSize: 13, opacity: 0.7, fontWeight: 600 }}>{t('finalcta.note')}</span>
          </div>
          <div style={{ marginTop: 20, fontSize: 12, opacity: 0.85 }}>
            {t('finalcta.footer')}
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const { t } = useT();
  return (
    <footer className="lp-footer">
      <div className="lp-container">
        <div className="lp-footer-grid">
          <div>
            <Wordmark size={20} onDark/>
            <p className="lp-footer-tagline">{t('footer.tagline')}</p>
          </div>
          <div>
            <h4>{t('footer.col.product')}</h4>
            <ul>
              <li><a href="#fonctions">{t('footer.col.product.l1')}</a></li>
              {/* <li><a href="#savoir">{t('footer.col.product.l2')}</a></li> — Articles hidden */}
              <li><a href="#download">{t('footer.col.product.l3')}</a></li>
            </ul>
          </div>
          <div>
            <h4><a href="/projet">{t('footer.col.project')}</a></h4>
            <ul>
              <li><a href="/mission">{t('footer.col.project.l1')}</a></li>
              <li><a href="/equipe">{t('footer.col.project.l2')}</a></li>
              <li><a href="/partenaires">{t('footer.col.project.l3')}</a></li>
              <li><a href="/presse">{t('footer.col.project.l4')}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t('footer.col.contact')}</h4>
            <ul>
              <li><a href="mailto:contact@retraide.ch">contact@retraide.ch</a></li>
              <li><a href="https://www.linkedin.com/company/retraide/" target="_blank" rel="noreferrer">{t('footer.col.contact.l2')}</a></li>
            </ul>
          </div>
        </div>
        <div className="lp-footer-bottom">
          <div>{t('footer.legal.copyright')}</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="/privacy">{t('footer.legal.privacy')}</a>
            <a href="#">{t('footer.legal.tos')}</a>
            <a href="#">{t('footer.legal.imprint')}</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

const Page = () => (
  <div className="lp-body" data-screen-label="Landing — retraide.ch">
    <Nav/>
    <Hero/>
    <LogoBar/>
    <Problem/>
    <Features/>
    <Outcomes/>
    {/* <Articles/> — temporarily hidden, re-enable when bibliothèque is back */}
    <Personas/>
    <Quote/>
    <FAQ/>
    <FinalCTA/>
    <Footer/>
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <LangProvider><Page/></LangProvider>
);
