"use client";

import { SiteFrame, SiteLang, useSiteFrame } from "../components/SiteFrame";

const copy = {
  ar: {
    kicker: "قبل / بعد",
    title: "سنوات الخبرة ما خاصهاش تبقى مجرد رقم في السيرة الذاتية",
    body: "هنا كنبيّنو كيفاش يمكن تنظيم التجربة، استخراج الكفاءات، وبناء مسار نحو اعتراف أكاديمي أو تطور مهني أوضح.",
    note: "هذه نماذج توضيحية لمسارات ممكنة وليست شهادات عملاء أو ضماناً بالحصول على دبلوم. النتيجة النهائية تخضع لدراسة الملف والجهة المختصة.",
    before: "قبل المواكبة",
    bridge: "مسار التحويل",
    after: "الهدف الممكن بعد التقييم",
    years: "سنوات خبرة",
    proof: "الأدلة التي تقوّي الملف",
    cta: "شنو القصة اللي ممكن تكتبها خبرتك؟",
    ctaBody: "دير المحاكاة الأولية وخذ قراءة شخصية قبل ما تبدأ ملفك.",
    ctaButton: "اختبر أهليتي في 60 ثانية",
    stories: [
      { years: "8", role: "مسؤول جودة", before: "خبرة يومية قوية في الجودة، لكن بدون دبلوم يعكس المسؤوليات الحقيقية.", bridge: ["جرد المهام والإنجازات", "ربطها بالكفاءات المرجعية", "تجميع تقارير التدقيق وشواهد العمل"], after: "دراسة إمكانية مسار الإجازة المهنية", proof: ["شواهد العمل", "تقارير Audit", "إجراءات الجودة"] },
      { years: "10", role: "مشرف HSE", before: "خبرة ميدانية كبيرة وشهادات تكوين متفرقة بدون ملف مهني موحد.", bridge: ["حصيلة الكفاءات", "تنظيم المشاريع والحوادث المعالجة", "تحضير العرض أمام لجنة التقييم"], after: "توجيه نحو الشهادة أو المستوى الأنسب بعد التشخيص", proof: ["تقارير السلامة", "خطط الوقاية", "شهادات التكوين"] },
      { years: "6", role: "مسؤول لوجستيك", before: "مسؤوليات في المخزون والتوريد والفرق، لكن التطور المهني متوقف.", bridge: ["تحليل الوظيفة الفعلية", "إبراز مؤشرات الأداء", "صياغة إنجازات قابلة للإثبات"], after: "بناء مسار اعتراف وتطور مهني ملائم", proof: ["لوحات التتبع", "مؤشرات الأداء", "وصف المهام"] },
    ],
  },
  fr: {
    kicker: "Avant / Après",
    title: "Vos années d’expérience méritent mieux qu’une simple ligne sur le CV",
    body: "Découvrez comment structurer l’expérience, faire émerger les compétences et bâtir une trajectoire de reconnaissance ou d’évolution professionnelle.",
    note: "Ces parcours sont des exemples pédagogiques, pas des témoignages clients ni des garanties de diplôme. Toute orientation doit être confirmée après étude du dossier.",
    before: "Avant l’accompagnement",
    bridge: "Le parcours de transformation",
    after: "Objectif possible après évaluation",
    years: "années d’expérience",
    proof: "Preuves qui renforcent le dossier",
    cta: "Quelle histoire votre expérience peut-elle raconter ?",
    ctaBody: "Lancez la simulation et recevez une première lecture personnalisée.",
    ctaButton: "Tester mon éligibilité en 60 secondes",
    stories: [
      { years: "8", role: "Responsable qualité", before: "Une pratique solide, sans diplôme reflétant le niveau réel de responsabilité.", bridge: ["Inventaire des missions", "Correspondance avec les compétences", "Collecte des audits et attestations"], after: "Étudier une orientation vers une Licence professionnelle", proof: ["Attestations", "Rapports d’audit", "Procédures qualité"] },
      { years: "10", role: "Superviseur HSE", before: "Une forte expérience terrain et des formations dispersées, sans portefeuille structuré.", bridge: ["Bilan de compétences", "Organisation des projets", "Préparation à la présentation du parcours"], after: "Identifier la certification ou le niveau le plus cohérent", proof: ["Rapports sécurité", "Plans de prévention", "Certificats"] },
      { years: "6", role: "Responsable logistique", before: "Des responsabilités en stock, approvisionnement et management, mais une évolution freinée.", bridge: ["Analyse du poste réel", "Valorisation des indicateurs", "Formalisation des réalisations"], after: "Construire un parcours de reconnaissance et d’évolution", proof: ["Tableaux de bord", "KPI", "Fiches de poste"] },
    ],
  },
  en: {
    kicker: "Before / After",
    title: "Your experience deserves more than a single line on a résumé",
    body: "See how professional practice can be structured into evidence, competencies and a clearer recognition pathway.",
    note: "These are educational scenarios, not client testimonials or guarantees of a qualification. Any direction must be confirmed after reviewing the file.",
    before: "Before support",
    bridge: "Transformation pathway",
    after: "Possible goal after assessment",
    years: "years of experience",
    proof: "Evidence that strengthens the file",
    cta: "What story could your experience tell?",
    ctaBody: "Run the simulator for an initial personalized reading.",
    ctaButton: "Test my eligibility in 60 seconds",
    stories: [] as any[],
  },
  zgh: {} as any,
};

copy.en.stories = copy.fr.stories;
copy.zgh = copy.fr;

function StoriesContent() {
  const { lang } = useSiteFrame();
  const t = copy[lang as SiteLang];
  return (
    <main>
      <section className="subhero stories-hero"><div className="container"><a className="back-link" href="/">← Compétences+</a><span className="badge"><i />{t.kicker}</span><h1>{t.title}</h1><p>{t.body}</p><div className="truth-note">ⓘ {t.note}</div></div></section>
      <section className="section soft"><div className="container story-list">
        {t.stories.map((story: { years: string; role: string; before: string; bridge: string[]; after: string; proof: string[] }, index: number) => (
          <article className="story-card" key={story.role}>
            <div className="story-person"><span>{String(index + 1).padStart(2, "0")}</span><strong>{story.years}</strong><small>{t.years}</small><h2>{story.role}</h2></div>
            <div className="story-stage before"><small>{t.before}</small><p>{story.before}</p></div>
            <div className="story-stage bridge"><small>{t.bridge}</small><ol>{story.bridge.map((item: string) => <li key={item}>{item}</li>)}</ol></div>
            <div className="story-stage after"><small>{t.after}</small><h3>{story.after}</h3><div className="proofs"><b>{t.proof}</b>{story.proof.map((item: string) => <span key={item}>✓ {item}</span>)}</div></div>
          </article>
        ))}
      </div></section>
      <section className="cta"><div className="container"><div><span>VAE Navigator</span><h2>{t.cta}</h2><p>{t.ctaBody}</p></div><a className="button white" href="/#simulator">{t.ctaButton}</a></div></section>
    </main>
  );
}

export default function SuccessStoriesPage() { return <SiteFrame><StoriesContent /></SiteFrame>; }