"use client";

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

const copy = {
  ar: {
    kicker: "دليل توجيهي",
    title: "أي دبلوم يناسب خبرتي؟",
    body: "ماشي كل تجربة كتقود لنفس المستوى. قارن بين المسارات، وافهم شنو خاص يتراجع قبل اختيار الهدف.",
    compare: "مقارنة واضحة قبل القرار",
    profile: "الملف الذي يستحق الدراسة",
    goal: "الهدف المهني",
    evidence: "ما الذي يقوّي الملف؟",
    decision: "مهم",
    decisionText: "سنوات الخبرة وحدها لا تحدد الدبلوم. المستوى الدراسي، طبيعة المهام، الأدلة ومتطلبات المؤسسة المانحة كلها تدخل في القرار.",
    licence: "الإجازة المهنية",
    master: "الماستر المهني",
    higher: "الشهادات العليا والمتخصصة",
    licenceData: ["خبرة عملية متماسكة مرتبطة بتخصص واضح", "تثمين الخبرة وفتح فرص التطور أو متابعة الدراسة", "شواهد العمل، وصف المهام، الإنجازات والتكوينات"],
    masterData: ["مسؤوليات متقدمة، استقلالية، قيادة مشاريع أو فرق", "التقدم نحو وظائف أعلى وتعميق الخبرة المهنية", "مشاريع استراتيجية، نتائج قابلة للقياس، تقارير ومسؤوليات"],
    higherData: ["حاجة مهنية دقيقة أو تخصص تقني/تدبيري محدد", "تطوير كفاءة متخصصة أو الحصول على اعتماد مكمل", "ممارسة موثقة، تكوينات سابقة وأعمال تطبيقية"],
    navigator: "مؤشر توجيهي سريع",
    question: "شنو الهدف الأقرب ليك؟",
    options: ["تثمين خبرتي بدبلوم", "الوصول لمنصب مسؤولية", "التخصص في مجال دقيق", "مازال ما متأكدش"],
    show: "اقترح نقطة البداية",
    initial: "نقطة البداية المقترحة",
    answers: ["ابدأ بدراسة قابلية ملفك لمسار الإجازة المهنية، مع إبقاء المستوى النهائي مفتوحاً للتقييم.", "ابدأ بحصيلة كفاءات متقدمة ومقارنة مسؤولياتك بمتطلبات الماستر المهني.", "ابدأ بتحديد الكفاءة أو الاعتماد المستهدف ثم قياس الفجوة بين خبرتك والمتطلبات.", "ابدأ بمحاكي الأهلية والتشخيص الأولي قبل اختيار أي دبلوم."],
    cta: "حوّل المقارنة إلى تقييم شخصي",
    ctaBody: "جاوب على أسئلة المحاكي، وخلي النتيجة تدخل تلقائياً مع طلب التسجيل المرسل لفريق Compétences+.",
    ctaButton: "ابدأ المحاكاة",
  },
  fr: {
    kicker: "Guide d’orientation",
    title: "Quel diplôme correspond à mon expérience ?",
    body: "Toutes les expériences ne mènent pas au même niveau. Comparez les parcours et comprenez ce qui doit être vérifié avant de choisir votre objectif.",
    compare: "Une comparaison claire avant la décision",
    profile: "Profil à étudier",
    goal: "Objectif professionnel",
    evidence: "Éléments qui renforcent le dossier",
    decision: "À retenir",
    decisionText: "Les années d’expérience ne déterminent pas seules le diplôme. Le niveau initial, les responsabilités, les preuves et les critères de l’organisme certificateur comptent tous.",
    licence: "Licence professionnelle",
    master: "Master professionnel",
    higher: "Certifications supérieures et spécialisées",
    licenceData: ["Une expérience cohérente dans un domaine identifiable", "Valoriser l’expérience, évoluer ou poursuivre le parcours", "Attestations, missions, réalisations et formations"],
    masterData: ["Des responsabilités avancées, de l’autonomie, des projets ou du management", "Accéder à des fonctions supérieures et approfondir l’expertise", "Projets stratégiques, résultats mesurables, rapports et responsabilités"],
    higherData: ["Un besoin métier précis ou une spécialisation technique/managériale", "Développer une compétence spécialisée ou un complément ciblé", "Pratique documentée, formations antérieures et travaux appliqués"],
    navigator: "Orientation rapide",
    question: "Quel objectif vous ressemble le plus ?",
    options: ["Faire reconnaître mon expérience", "Accéder à plus de responsabilités", "Me spécialiser", "Je ne sais pas encore"],
    show: "Suggérer mon point de départ",
    initial: "Point de départ suggéré",
    answers: ["Commencez par étudier la recevabilité d’un parcours Licence, sans figer le niveau avant l’évaluation.", "Commencez par un bilan avancé et comparez vos responsabilités aux attendus d’un Master professionnel.", "Définissez d’abord la compétence ou certification visée, puis mesurez l’écart avec votre expérience.", "Commencez par le simulateur et un diagnostic initial avant de choisir un diplôme."],
    cta: "Transformez la comparaison en évaluation personnelle",
    ctaBody: "Répondez au simulateur ; le résultat sera joint à votre demande envoyée à l’équipe Compétences+.",
    ctaButton: "Démarrer la simulation",
  },
  en: {} as any,
  zgh: {} as any,
};

copy.en = { ...copy.fr, kicker: "Orientation guide", title: "Which qualification fits my experience?", compare: "A clear comparison before deciding", profile: "Profile to assess", goal: "Professional goal", evidence: "Evidence that strengthens the file", navigator: "Quick direction finder", question: "Which goal best matches you?", show: "Suggest my starting point", initial: "Suggested starting point", cta: "Turn the comparison into a personal assessment", ctaButton: "Start the simulator" };
copy.zgh = copy.fr;

function DiplomaContent() {
  const { lang } = useSiteFrame();
  const t = copy[lang as SiteLang];
  const [goal, setGoal] = useState("");
  const cards = [
    { name: t.licence, data: t.licenceData, tone: "licence" },
    { name: t.master, data: t.masterData, tone: "master" },
    { name: t.higher, data: t.higherData, tone: "higher" },
  ];
  return (
    <main>
      <section className="subhero diploma-hero"><div className="container subhero-grid"><div><a className="back-link" href="/">← Compétences+</a><span className="badge"><i />{t.kicker}</span><h1>{t.title}</h1><p>{t.body}</p></div><div className="diploma-stack"><span>Licence</span><span>Master</span><span>Certificat</span></div></div></section>
      <section className="section"><div className="container"><div className="section-head"><span className="kicker">Compétences+ VAE</span><h2>{t.compare}</h2></div><div className="diploma-grid">{cards.map((card) => <article className={`diploma-card ${card.tone}`} key={card.name}><div className="diploma-card-head"><span>+</span><h3>{card.name}</h3></div><dl><div><dt>{t.profile}</dt><dd>{card.data[0]}</dd></div><div><dt>{t.goal}</dt><dd>{card.data[1]}</dd></div><div><dt>{t.evidence}</dt><dd>{card.data[2]}</dd></div></dl></article>)}</div><div className="decision-note"><b>{t.decision}</b><p>{t.decisionText}</p></div></div></section>
      <section className="section soft"><div className="container diploma-navigator"><div><span className="kicker">VAE Navigator</span><h2>{t.navigator}</h2><p>{t.question}</p></div><div className="navigator-card"><div className="navigator-options">{t.options.map((option: string, index: number) => <label key={option} className={goal === String(index) ? "selected" : ""}><input type="radio" name="goal" value={index} checked={goal === String(index)} onChange={(e) => setGoal(e.target.value)} /><span>{String(index + 1).padStart(2, "0")}</span>{option}</label>)}</div>{goal !== "" ? <div className="navigator-result"><small>{t.initial}</small><h3>{t.answers[Number(goal)]}</h3><a className="button primary" href="/#simulator">{t.ctaButton} ←</a></div> : null}</div></div></section>
      <section className="cta"><div className="container"><div><span>Compétences+ VAE</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 DiplomaGuidePage() { return <SiteFrame><DiplomaContent /></SiteFrame>; }