"use client";
import LSServices1 from "@/assets/used-images/learning-solutions-services-1.png"
import LSServices2 from "@/assets/used-images/learning-solutions-services-2.jpg"
import LSServices3 from "@/assets/used-images/learning-solutions-services-3.jpg"
import LSServices4 from "@/assets/used-images/learning-solutions-services-4.png"
import LSServices5 from "@/assets/used-images/learning-solutions-services-5.png"
import { Link } from "react-router-dom";
import { FaBalanceScale, FaBook, FaBookOpen, FaBriefcaseMedical, FaCalendarAlt, FaChartBar, FaChartLine, FaClock, FaCogs, FaComments, FaCrown, FaExclamationTriangle, FaEye, FaGlobe, FaGraduationCap, FaHandHolding, FaHandHoldingHeart, FaHandshake, FaHandsHelping, FaHeartbeat, FaIdCard, FaLightbulb, FaMapMarkedAlt, FaNetworkWired, FaPencilRuler, FaPuzzlePiece, FaRandom, FaSeedling, FaShieldAlt, FaStar, FaSyncAlt, FaTasks, FaTrophy, FaUserFriends, FaUserGraduate, FaUsers, FaUserTie } from "react-icons/fa";
import Breadcrumb from "@/ui/breadcrumb";
import { useState } from "react";

import IvoryGold from "@/assets/used-icons/IvoryGold.svg";
import VideoOne from "@/assets/used-icons/level-1.png";

import { useTranslation } from 'react-i18next';

import DevelopmentStrategiesSection from "../components/development-strategies";

import GradesTwo from "../components/grade-2";

export default function LevelTwo() {
    const { t } = useTranslation();
    const [triggeredSection, setTriggeredSection] = useState(0);
    const percentages = [25, 20, 20, 35]; // Dynamic percentages
    const labels = [
        'conceptsAndKnowledge',
        'skillsMeasurementSurveys',
        'personalPlanningWorksheets',
        'appliedActivitiesAndCollaborativeTasks'
    ];
    const services = [
        {
            title: 'lecture',  // Translation key from JSON
            image: LSServices1
        },
        {
            title: 'surveysTests',  // Translation key from JSON
            image: LSServices2
        },
        {
            title: 'practicalPractice',  // Translation key from JSON
            image: LSServices3
        },
        {
            title: 'practicalCollaborativeTasks',  // Translation key from JSON
            image: LSServices4
        },
        {
            title: 'finalProjects',  // Translation key from JSON
            image: LSServices5
        }
    ];
    const dimensions = [
        {
            trigger: 'organization', // Translation key for "للمنظمة"
            items: [
                {
                    title: 'supportSuccessionPlanWithExperiencedAndEligibleLeaders', // Translation key for "دعم خطة التعاقب بخبرات لديها الدافع والأهلية"
                    icon: <FaBookOpen size={20} />,
                    details: t(`leadership.item-one-details`, { returnObjects: true })
                },
                {
                    title: 'performanceDevelopmentBasedOnPersonalCapabilitiesAndAptitudes', // Translation key for "تطوير الأداء في إطار القدرات والميول الشخصية"
                    icon: <FaBalanceScale size={20} />,
                    details: ['صياغة المهمة الشخصية', 'القدوة والالتزام', 'الشجاعة الاخلاقية']
                },
                {
                    title: 'optimizeOperationalProcessesAndAlignEffortsWithGoals', // Translation key for "ضبط عمليات التشغيل وتوجيه الجهود نحو الأهداف"
                    icon: <FaPencilRuler size={20} />,
                    details: ['نشأة اخلاقيات العمل', 'القيادة الاخلاقية', 'التصرف الاخلاقي']
                },
                {
                    title: 'increaseProductivityAndQualityOfAdministrativeUnits', // Translation key for "رفع إنتاجية وجودة أداء الوحدات الإدارية"
                    icon: <FaStar size={20} />,
                    details: ['القيم الشخصية', 'القيم المؤسسية', 'الدور والغاية']
                },
                {
                    title: 'achieveEffectiveStressAndCrisisManagement', // Translation key for "تحقيق فعالية إدارة الضغوط والأزمات"
                    icon: <FaHandHoldingHeart size={20} />,
                    details: ['القيادة الرحيمة', 'البهجة والمرح', 'التنمر والتحرش']
                },
                {
                    title: 'improveCommunicationAtIntermediateAndLowerLevels', // Translation key for "تحسين التواصل في المستويات الوسيطة والدنيا"
                    icon: <FaComments size={20} />,
                    details: ['الاستماع النشط', 'السرد القصصي', 'إظهار القوة']
                },
                {
                    title: 'projectPlanningAndEffectiveProfessionalRelationshipManagement', // Translation key for "تخطيط المشروعات وإدارة العلاقات بمهنية وفعالية"
                    icon: <FaHandshake size={20} />,
                    details: ['أهمية الثقة', 'كسب الثقة', 'استعادة الثقة']
                },
                {
                    title: 'empowerSubordinatesThroughDelegationAndCoaching', // Translation key for "تمكين المرؤوسين بالتفويض والإرشاد"
                    icon: <FaExclamationTriangle size={20} />,
                    details: ['دراسة الحالة', 'التعاطف', 'منطقة الراحة']
                }
            ]
        },
        {
            trigger: 'individual', // Translation key for "للفرد"
            items: [
                {
                    title: 'developLeadershipAndManagementSkillsToEnhanceJobPerformance', // Translation key for "تطوير مهارات القيادة والإدارة لتطوير الأداء الوظيفي"
                    icon: <FaChartLine size={20} />,
                    details: ['النماذج الاستراتيجية', 'التخطيط', 'التفكير الاستراتيجي']
                },
                {
                    title: 'understandBehavioralMotivationsAndTheirOrganizationalImpact', // Translation key for "فهم دوافع السلوك فردي وانعكاساته التنظيمية"
                    icon: <FaShieldAlt size={20} />,
                    details: ['فهم المخاطر التنظيمية', 'إدارة المخاطر', 'قياس المخاطر']
                },
                {
                    title: 'recognizeTeamDynamicsAndPracticeSituationalLeadership', // Translation key for "التعرف على ديناميكيات الفرق وممارسة القيادة الظرفية"
                    icon: <FaSyncAlt size={20} />,
                    details: ['مفهوم التغيير', 'نماذج إدارة التغيير', 'الإدارة العاطفية للتغيير']
                },
                {
                    title: 'motivateTeamsAndIndividualsByLeveragingTheirStrengths', // Translation key for "تحفيز الفرق والأفراد وتفعيل نقاط القوة لدى الأعضاء"
                    icon: <FaStar size={20} />,
                    details: ['الدافع والمشاركة', 'التشجيع', 'نمذجة الدور']
                },
                {
                    title: 'implementStrategicPlansAndDevelopActionPlans', // Translation key for "تنفيذ الخطط الإستراتيجية ووضع الخطط التنفيذية"
                    icon: <FaLightbulb size={20} />,
                    details: ['مفهوم الإبداع', 'الذات المبدعة', 'إدارة الإبداع التنظيمي']
                },
                {
                    title: 'increaseProductivityAndAchieveOutstandingPerformanceAndRewardIt', // Translation key for "رفع الإنتاجية وتحقيق الأداء المتميز ومكافأته"
                    icon: <FaEye size={20} />,
                    details: ['القيادة الرقمية', 'رصد التوجهات', 'تخطيط السيناريوهات']
                },
                {
                    title: 'manageChangeAndDevelopCareerPathForBothParticipantsAndSubordinates', // Translation key for "إدارة التغيير وتطوير المسار المهني لكل من المشارك ومرؤوسيه"
                    icon: <FaLightbulb size={20} />,
                    details: ['مفهوم الابتكار', 'إدارة الابتكار', 'التطوير الدائم']
                }
            ]
        },
        {
            trigger: 'deliverables', // Translation key for "التسليمات"
            items: [
                {
                    title: 'attendanceCertificateFromIvorySilverInstitute', // Translation key for "شهادة حضور البرنامج المشترك من العاج الفضي"
                    icon: <FaHeartbeat size={20} />,
                    details: ['الانضباط', 'إدارة الأزمات', 'عقلية النمو']
                },
                {
                    title: 'digitalCertificateAndAccreditationFromIL', // Translation key for "شهادة ووثيقة اعتماد رقميتين من IL"
                    icon: <FaChartBar size={20} />,
                    details: ['مراجعة الأداء', 'علاج ضعف الأداء', 'تحديد أهداف الأداء']
                },
                {
                    title: 'freeMembershipInIL', // Translation key for "عضوية مجانية في IL"
                    icon: <FaBriefcaseMedical size={20} />,
                    details: ['الصحة والسلامة', 'العافية والصحة النفسية', 'التوازن المهني الشخصي']
                }
            ]
        },
        {
            trigger: 'ILInstituteMembership', // Translation key for "عضوية معهد IL"
            items: [
                {
                    title: 'development', // Translation key for "التطوير"
                    icon: <FaLightbulb size={20} />,
                    details: ['المبادرة الواثقة', 'رصد الفرص', 'التوجهات']
                },
                {
                    title: 'insight', // Translation key for "الاطلاع"
                    icon: <FaChartLine size={20} />,
                    details: ['الكيانات القانونية التجارية', 'نموذج العمل التجاري', 'قيادة القطاع العام']
                },
                {
                    title: 'recognition', // Translation key for "الاعتراف"
                    icon: <FaCogs size={20} />,
                    details: ['المرؤوس المهني', 'إدارة الرؤساء', 'الإبداع التشاركي']
                },
                {
                    title: 'communication', // Translation key for "التواصل"
                    icon: <FaUsers size={20} />,
                    details: ['التفويض', 'التمكين', 'التفاعل']
                }
            ]
        }
    ];
    const instituteInfos = [
        {
            title: "communication", // Translation key for "التواصل"
            description: "communicationDescription" // Translation key for "clear transmission and reception of information across management levels."
        },
        {
            title: "detail", // Translation key for "التفصيل"
            description: "detailDescription" // Translation key for "Paying attention to all aspects of the topic being discussed and linking it to its context."
        },
        {
            title: "organization", // Translation key for "التنظيم"
            description: "organizationDescription" // Translation key for "Arranging steps, planning time, and providing resources and people to perform tasks."
        },
        {
            title: "empathy", // Translation key for "التعاطف"
            description: "empathyDescription" // Translation key for "Showing care and appreciation for others' feelings and thoughts, offering support."
        },
        {
            title: "negotiation", // Translation key for "التفاوض"
            description: "negotiationDescription" // Translation key for "Managing mediation between employees and the organization’s management to achieve both parties' interests."
        },
        {
            title: "decisionMaking", // Translation key for "القرار"
            description: "decisionMakingDescription" // Translation key for "Gathering relevant information and data and making decisions based on them."
        },
        {
            title: "empowerment", // Translation key for "التمكين"
            description: "empowermentDescription" // Translation key for "Managing performance through delegation, evaluation, coaching, and skill development."
        },
        {
            title: "interaction", // Translation key for "التفاعل"
            description: "interactionDescription" // Translation key for "Involving stakeholders in data and goals, and working collectively."
        }
    ];
    const coreSkill = [
        {
            title: 'workshops',
            number: "15"
        },
        {
            title: 'months',
            number: "5"
        },
        {
            title: 'days',
            number: "43"
        },
        {
            title: 'hours',
            number: "84"
        }
    ];
    const mainSkillsArray = [
        "selfManagementAndGoalAlignment",
        "operationalVisionAndChangeManagement",
        "organizationVisionAndPlanning",
        "performanceManagementTechniques",
        "initiativeInProblemPrevention",
        "empowermentAndPersonalDevelopmentPlans"
    ];
    return (
        <>

            <Breadcrumb
                pages={[
                    { link: '/services/leadership-solutions', name: t('level_1.leadership_development_solutions') },
                    { link: '/level-2', name: t('secondLevel') }
                ]}
            />
            <div className="mt-16">

                {/* الجدارات المعتمدة */}
                <section className="layout layout !py-8">
                    <section className="relative border rounded-lg text-start p-8 mt-5 mb-5">
                        <div className="flex justify-center items-center">
                            <div className="absolute -top-4 bg-primary-tw text-white px-4 !py-3 rounded-xl">
                                {t('programTitle')}
                            </div>
                        </div>
                        <article className="!px-2 text-center mt-5">
                            {t('programDescription')}
                        </article>
                    </section>
                </section>
                <div className="">
                    <section className="bg-primary-tw grid place-items-center px-3">
                        <div className="four-div p-14">
                            {coreSkill.map((skill, i) => (
                                <div key={i} className="text-center number-div text-white">
                                    <div
                                        className="size-12 flex justify-center items-center rounded-full text-secondary-tw"
                                        style={{ width: '100%' }}
                                    >
                                        <span className="text-lg font-bold">{skill.number}</span>
                                    </div>
                                    <p className="text-xl">{t(`levels.${skill.title}`)}</p>
                                </div>
                            ))}
                        </div>
                    </section>

                </div>
                {/* مهارات اساسيه */}

                <section className="bg-[#F5F5F5] py-5">
                    <div className="layout">
                        <div className="p-4 flex flex-col items-center !gap-4">
                            <h2 className="services-header after:w-20 after:-bottom-2 flex justify-center">
                                {t('programNatureTitle')}  {/* Translate the title */}
                            </h2>
                            <p className="text-slate-400 lg:px-20">
                                {t('programNatureDescription')}  {/* Translate the program description */}
                            </p>
                        </div>
                        <div className="grid place-items-center xl:grid-cols-3 lg:grid-cols-2 gap-8 px-4 my-6">
                            {mainSkillsArray.map((skill, i) => (
                                <div key={i} className="border px-4 py-8 rounded-lg text-start relative z-0 w-full bg-white text-secondary-tw">
                                    <div className="size-12 flex justify-center items-center rounded-full border-2 border-secondary-tw bg-secondary-tw z-10 absolute -top-5 text-white" style={{ right: '45%' }}>
                                        <span className="text-lg font-bold -secondary-tw">{++i}</span>
                                    </div>
                                    <p className="fs-6 text-center mt-2" style={{ color: '#7A7A7A' }}>
                                        {t(skill)}  {/* Translate each skill description */}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
                {/*  الابعاد القيادية و جدارتها */}
                <section className="layout">
                    {/* Section Title */}
                    <div className="grid place-items-center my-4">
                        <h2 className="services-header flex justify-center after:w-32 after:-bottom-2">
                            {t('importanceOfParticipation')} {/* Dynamically translated section title */}
                        </h2>
                    </div>

                    <section>
                        {/* Buttons for Sections */}
                        <div className="flex justify-content-center items-center gap-2 scrolling">
                            {
                                dimensions.map((item, i) => (
                                    <button
                                        key={i}
                                        className={`px-4 py-1 rounded-md border ${i === triggeredSection ? 'bg-primary-tw text-white' : 'text-slate-400'}`}
                                        onClick={() => setTriggeredSection(i)}>
                                        {t(item.trigger)}  {/* Dynamically translated button text */}
                                    </button>
                                ))
                            }
                        </div>

                        {/* Item List */}
                        <div className="grid lg:grid-cols-4 gap-4 my-4">
                            {
                                dimensions[triggeredSection].items?.map((item, i) => (
                                    <p className="border p-2 rounded-md hover:bg-secondary-tw/5 transition-all mt-4" key={i}>
                                        <summary className="flex items-center flex-col gap-2 cursor-pointer p-2">
                                            <p className="flex justify-center items-center rounded-full bg-secondary-tw text-white" style={{ width: '40px', height: '40px', marginTop: '-25px' }}>
                                                {item.icon} {/* Static icon */}
                                            </p>
                                            {t(item.title)} {/* Dynamically translated item title */}
                                        </summary>
                                    </p>
                                ))
                            }
                        </div>
                    </section>
                </section>

                <div className="layout">
                    {/* Section Title */}
                    <div className="grid place-items-center my-4">
                        <h2 className="services-header flex justify-center after:w-32 after:-bottom-2">
                            {t('targetCompetencyModel')} {/* Dynamically translated section title */}
                        </h2>
                        <p className="text-slate-400 lg:px-20">
                            {t('programDescription')} {/* Dynamically translated description */}
                        </p>
                    </div>

                    {/* Video Section */}
                    <section className="grid grid-cols-[40%_59%] gap-2" style={{ margin: '80px 0' }}>
                        <img src={VideoOne} alt="video" className="w-full h-full object-cover rounded-lg" />
                        <section className="grid lg:grid-cols-2 gap-8">
                            {
                                instituteInfos.map((info, i) => (
                                    <div className="!border-2 !border-b-4 border-b-secondary-tw !p-3 rounded-lg" key={i}>
                                        <h2 className="flex items-center gap-2 text-secondary-tw text-lg font-semibold">
                                            <img src={IvoryGold} alt="" className="w-3" />
                                            <span>{t(info.title)}</span> {/* Dynamically translated title */}
                                        </h2>
                                        <article className="text-start text-common-text">
                                            {t(info.description)} {/* Dynamically translated description */}
                                        </article>
                                    </div>
                                ))
                            }
                        </section>
                    </section>
                </div>
            </div>
            <div className="layout mt-5 mb-5">

                <GradesTwo />
            </div>

            <section className="layout text-center">
                {/* Section Title */}
                <div className="grid place-items-center my-4">
                    <h2 className="services-header flex justify-center after:w-32 after:-bottom-2">
                        {t('executionMethodology')} {/* Dynamically translated section title */}
                    </h2>
                </div>

                {/* Description */}
                <p className="text-slate-400 lg:px-20">
                    {t('executionMethodologyDescription')} {/* Dynamically translated description */}
                </p>

                {/* Services Grid */}
                <div className="grid grid-cols-3 gap-8 py-6 px-2 max-xl:grid-cols-2 max-lg:grid-cols-1">
                    {services.map((service, i) => (
                        <div key={i} className="text-center relative flex justify-center">
                            <div className="w-full h-52">
                                <img
                                    src={service.image}
                                    alt={service?.title}
                                    className="rounded-lg w-full h-full object-cover"
                                />
                            </div>
                            <div className="bg-light-red absolute z-0 w-full h-full rounded-lg top-0"></div>
                            <p className="text-lg text-white absolute z-10 bottom-3 font-semibold m-0">
                                {t(service.title)} {/* Dynamically translated service title */}
                            </p>
                        </div>
                    ))}
                </div>
            </section>
            <section className="layout text-center">
                <DevelopmentStrategiesSection percentages={percentages} labels={labels} />
            </section>

            <Link to='/training-courses/221' className="items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50  m-auto  mb-3 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 grid place-items-center bg-primary-tw text-white w-40" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:rl:" data-state="closed">سجل الآن</Link>
        </>
    )
}