"use client";
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 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 { 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 { Link } from "react-router-dom";
import DevelopmentStrategiesSection from "../components/development-strategies";

import GradesThree from "../components/grade-3";

export default function LevelThree() {
    const { t } = useTranslation();
    const [triggeredSection, setTriggeredSection] = useState(0);

    const percentages = [25, 15, 20, 40];
    const labels = [
        'conceptsAndKnowledge',
        'skillsMeasurementSurveys',
        'personalPlanningWorksheets',
        'appliedActivitiesAndCollaborativeTasks'
    ];
    const services = [
        {
            title: 'lecture',
            image: LSServices1
        },
        {
            title: 'surveysTests',
            image: LSServices2
        },
        {
            title: 'practicalPractice',
            image: LSServices3
        },
        {
            title: 'practicalCollaborativeTasks',
            image: LSServices4
        },
        {
            title: 'finalProjects',
            image: LSServices5
        }
    ];
    const dimensions = [
        {
            trigger: 'organization', // Translation key for 'للمنظمة'
            items: [
                {
                    title: 'leadershipSkillsSufficiency', // Translation key for 'كفاية المهارات القيادية لدى المشرفين وقادة الفرق'
                    icon: <FaBookOpen size={20} />,
                    details: t('leadership.item-one-details', { returnObjects: true })
                },
                {
                    title: 'processControl', // Translation key for 'ضبط العمليات وفق السياسات المعتمدة'
                    icon: <FaBalanceScale size={20} />,
                    details: ['personalMissionStatement', 'roleModelAndCommitment', 'moralCourage']
                },
                {
                    title: 'maximizeOperationalEfforts', // Translation key for 'تعظيم الاستفادة من جهود العاملين التشغيلية'
                    icon: <FaPencilRuler size={20} />,
                    details: ['workEthicsOrigins', 'ethicalLeadership', 'moralConduct']
                },
                {
                    title: 'fosterOrganizationalBelonging', // Translation key for 'ترسيخ الانتماء للمنظمة وتفاعل العاملين مع أهدافها'
                    icon: <FaStar size={20} />,
                    details: ['personalValues', 'organizationalValues', 'roleAndPurpose']
                },
                {
                    title: 'reduceProjectCostAndIncreaseQuality', // Translation key for 'خفض كلفة المشروعات وترقية مستويات الجودة'
                    icon: <FaHandHoldingHeart size={20} />,
                    details: ['compassionateLeadership', 'joyAndHappiness', 'bullyingAndHarassment']
                },
                {
                    title: 'integratedEffortPlanning', // Translation key for 'تخطيط الجهود وفق نظام متكامل'
                    icon: <FaComments size={20} />,
                    details: ['activeListening', 'storytelling', 'demonstratingStrength']
                },
                {
                    title: 'improveWorkEnvironment', // Translation key for 'تطوير بيئة العمل لصالح المنظمة وأعضائها'
                    icon: <FaHandshake size={20} />,
                    details: ['trustImportance', 'buildingTrust', 'restoringTrust']
                },
                {
                    title: 'coordinateOperationsAcrossParties', // Translation key for 'تنسيق العمليات بين كافة الأطراف ذات العلاقة'
                    icon: <FaExclamationTriangle size={20} />,
                    details: ['caseStudy', 'empathy', 'comfortZone']
                }
            ]
        },
        {
            trigger: 'individual', // Translation key for 'للفرد'
            items: [
                {
                    title: 'defineSkillsAndAbilities', // Translation key for 'توصيف المهارات والقدرات الشخصية والجماعية'
                    icon: <FaChartLine size={20} />,
                    details: ['strategicModels', 'planning', 'strategicThinking']
                },
                {
                    title: 'empathyAndDecisivenessInLeadership', // Translation key for 'ممارسة التعاطف والحسم في الأداء القيادي'
                    icon: <FaShieldAlt size={20} />,
                    details: ['understandingOrganizationalRisks', 'riskManagement', 'measuringRisks']
                },
                {
                    title: 'identifyStrengthsAndWeaknesses', // Translation key for 'رصد نقاط القوة والضعف في الأداء الفردي والجماعي'
                    icon: <FaSyncAlt size={20} />,
                    details: ['changeConcept', 'changeManagementModels', 'emotionalChangeManagement']
                },
                {
                    title: 'processPlanningAndProfessionalRelations', // Translation key for 'تخطيط العمليات وإدارة العلاقات المهنية'
                    icon: <FaStar size={20} />,
                    details: ['motivationAndParticipation', 'encouragement', 'roleModeling']
                },
                {
                    title: 'exerciseInfluenceAndMentoring', // Translation key for 'ممارسة التأثير وفعاليات الإرشاد والتوجيه'
                    icon: <FaLightbulb size={20} />,
                    details: ['creativityConcept', 'creativeSelf', 'managingOrganizationalCreativity']
                },
                {
                    title: 'developRoleModelBehavior', // Translation key for 'تطوير سلوك القدوة وعقلية النمو'
                    icon: <FaEye size={20} />,
                    details: ['digitalLeadership', 'trendMonitoring', 'scenarioPlanning']
                },
                {
                    title: 'enhanceThinkingAndDecisionMakingSkills', // Translation key for 'تعزيز مهارات التفكير والتحليل واتخاذ القرار'
                    icon: <FaLightbulb size={20} />,
                    details: ['innovationConcept', 'managingInnovation', 'continuousImprovement']
                }
            ]
        },
        {
            trigger: 'deliverables', // Translation key for 'التسليمات'
            items: [
                {
                    title: 'jointProgramCertificate', // Translation key for 'شهادة حضور البرنامج المشترك من العاج الفضي'
                    icon: <FaHeartbeat size={20} />,
                    details: ['discipline', 'crisisManagement', 'growthMindset']
                },
                {
                    title: 'ilCertification', // Translation key for 'شهادة ووثيقة اعتماد رقميتين من IL'
                    icon: <FaChartBar size={20} />,
                    details: ['performanceReview', 'addressingPerformanceIssues', 'settingPerformanceGoals']
                },
                {
                    title: 'freeIlMembership', // Translation key for 'عضوية مجانية في IL'
                    icon: <FaBriefcaseMedical size={20} />,
                    details: ['healthAndSafety', 'mentalHealthAndWellness', 'workLifeBalance']
                }
            ]
        },
        {
            trigger: 'ilMembershipInstitute', // Translation key for 'عضوية معهد IL'
            items: [
                {
                    title: 'development', // Translation key for 'التطوير'
                    icon: <FaLightbulb size={20} />,
                    details: ['confidentInitiative', 'opportunityMonitoring', 'trends']
                },
                {
                    title: 'insight', // Translation key for 'الاطلاع'
                    icon: <FaChartLine size={20} />,
                    details: ['commercialLegalEntities', 'businessModel', 'publicSectorLeadership']
                },
                {
                    title: 'recognition', // Translation key for 'الاعتراف'
                    icon: <FaCogs size={20} />,
                    details: ['professionalSubordinates', 'managingSuperiors', 'participatoryInnovation']
                },
                {
                    title: 'communication', // Translation key for 'التواصل'
                    icon: <FaUsers size={20} />,
                    details: ['delegation', 'empowerment', 'interaction']
                }
            ]
        }
    ];
    const instituteInfos = [
        {
            title: 'conflictManagement',
            description: 'conflictManagementDescription'
        },
        {
            title: 'diversityEnhancement',
            description: 'diversityEnhancementDescription'
        },
        {
            title: 'presentationAndListening',
            description: 'presentationAndListeningDescription'
        },
        {
            title: 'flexibilityAndCollaboration',
            description: 'flexibilityAndCollaborationDescription'
        },
        {
            title: 'simplificationAndDevelopment',
            description: 'simplificationAndDevelopmentDescription'
        },
        {
            title: 'roleModelAndDiscipline',
            description: 'roleModelAndDisciplineDescription'
        },
        {
            title: 'supportAndTrust',
            description: 'supportAndTrustDescription'
        },
        {
            title: 'organizationAndAnalysis',
            description: 'organizationAndAnalysisDescription'
        }
    ];
    const coreSkill = [
        {
            title: 'workshops',
            number: "15"
        },
        {
            title: 'months',
            number: "5"
        },
        {
            title: 'days',
            number: "43"
        },
        {
            title: 'hours',
            number: "84"
        }
    ];
    const mainSkillsArray = [
        "leadershipStyleDevelopment",
        "coachingTechniques",
        "workEnvironmentImprovement",
        "taskDelegation",
        "decisionMakingAndCrisisManagement",
        "operationsManagementAndProjectPractices"
    ];

    return (
        <>
            <Breadcrumb
                pages={[
                    { link: '/services/leadership-solutions', name: t('level_1.leadership_development_solutions') },
                    { link: '/level-2', name: t("levelThree") }
                ]}
            />
            <div className="mt-16">
                <section className="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("advancedExecutiveLeadershipProgramLevelThree")}  {/* Dynamically translated title */}
                            </div>
                        </div>
                        <article className="!px-2 text-center mt-5">
                            {t("workshopsDescription")} {/* Dynamically translated description */}
                        </article>
                    </section>
                </section>
                {/* الجدارات المعتمدة */}
                <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 className="layout">
                    <section className="grid grid-cols-[65%_29%] max-md:grid-cols-1 gap-4 mt-5 mb-5">
                        {/* Section Title */}
                        <div className="border rounded-lg p-3">
                            <h2 className="services-header after:w-20 after:-bottom-2">
                                {t('sectionTitle')} {/* Dynamically translated section title */}
                            </h2>
                            <article className="text-semi-gray text-justify mt-4">
                                {t('sectionDescription')} {/* Dynamically translated description */}
                            </article>
                        </div>

                        {/* Image Section */}
                        <div className="w-full rounded-xl relative">
                            <img
                                src="https://ivorytraining.com/li/assets/img/last/last.png"
                                alt="learning solutions"
                                className="w-full h-full object-cover object-top rounded-xl"
                            />
                        </div>
                    </section>
                </div>
                {/* مهارات اساسيه */}
                <section className="bg-[#F5F5F5] py-5">
                    <div className="layout">
                        <div className="p-4 flex flex-col items-center !gap-4">
                            {/* Section Title */}
                            <h2 className="services-header after:w-20 after:-bottom-2 flex justify-center">
                                {t('programNatureAndGoalsTitle')} {/* Dynamically translated section title */}
                            </h2>

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

                        {/* Skills Grid */}
                        <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 + 1}
                                        </span>
                                    </div>
                                    <p className="fs-6 text-center mt-2" style={{ color: '#7A7A7A' }}>
                                        {t(skill)} {/* Dynamically translated skill */}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
                {/*  الابعاد القيادية و جدارتها */}
                <section className="layout">

                    <div className="grid place-items-center my-4">
                        <h2 className="services-header flex justify-center after:w-32 after:-bottom-2">
                            {t("importanceOfParticipation")}
                        </h2>
                    </div>
                    <section>
                        <div className="flex lg:justify-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)}
                                    </button>
                                ))
                            }
                        </div>

                        <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} </p>
                                            {t(item.title)}
                                        </summary>


                                    </p>
                                ))
                            }
                        </div>
                    </section>
                </section>


                <div className="layout">
                    <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('programOverviewDescription')} {/* Dynamically translated description */}
                        </p>
                    </div>

                    <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 key={i} className="!border-2 !border-b-4 border-b-secondary-tw !p-3 rounded-lg">
                                    <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">

                <GradesThree />
            </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/222' 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>
        </>
    )
}