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

export default function LevelFour() {
    const { t } = useTranslation();
    const [triggeredSection, setTriggeredSection] = useState(0);
    const percentages = [25, 15, 30, 30];
    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',
            items: [
                {
                    title: 'alignmentBetweenOwnerAndBusinessPerformance',
                    icon: <FaBookOpen size={20} />,
                    details: t(`leadership.item-one-details`, { returnObjects: true })
                },
                {
                    title: 'guidingBusinessPracticesTowardClearGoals',
                    icon: <FaBalanceScale size={20} />,
                    details: ['صياغة المهمة الشخصية', 'القدوة والالتزام', 'الشجاعة الاخلاقية']
                },
                {
                    title: 'increasingProductivityAndBuildingCommitment',
                    icon: <FaPencilRuler size={20} />,
                    details: ['نشأة اخلاقيات العمل', 'القيادة الاخلاقية', 'التصرف الاخلاقي']
                },
                {
                    title: 'enhancingCommunicationBetweenIndividualsAndAdminUnits',
                    icon: <FaStar size={20} />,
                    details: ['القيم الشخصية', 'القيم المؤسسية', 'الدور والغاية']
                },
                {
                    title: 'reducingEmployeeTurnoverAndBuildingTeams',
                    icon: <FaHandHoldingHeart size={20} />,
                    details: ['القيادة الرحيمة', 'البهجة والمرح', 'التنمر والتحرش']
                },
                {
                    title: 'riskManagementAndDevelopingHealthyWorkplace',
                    icon: <FaComments size={20} />,
                    details: ['الاستماع النشط', 'السرد القصصي', 'إظهار القوة']
                },
                {
                    title: 'effectiveExternalRelationshipPlanningAndManagement',
                    icon: <FaHandshake size={20} />,
                    details: ['أهمية الثقة', 'كسب الثقة', 'استعادة الثقة']
                },
                {
                    title: 'maximizingCulturalDiversityAmongEmployees',
                    icon: <FaExclamationTriangle size={20} />,
                    details: ['دراسة الحالة', 'التعاطف', 'منطقة الراحة']
                }
            ]
        },
        {
            trigger: 'individual',
            items: [
                {
                    title: 'developingLeadershipAndInfluenceSkillsForProductivity',
                    icon: <FaChartLine size={20} />,
                    details: ['النماذج الاستراتيجية', 'التخطيط', 'التفكير الاستراتيجي']
                },
                {
                    title: 'understandingEmployeeMotivationAndBuildingTeamSpirit',
                    icon: <FaShieldAlt size={20} />,
                    details: ['فهم المخاطر التنظيمية', 'إدارة المخاطر', 'قياس المخاطر']
                },
                {
                    title: 'enhancingPerformanceThroughEmotionalManagement',
                    icon: <FaSyncAlt size={20} />,
                    details: ['مفهوم التغيير', 'نماذج إدارة التغيير', 'الإدارة العاطفية للتغيير']
                },
                {
                    title: 'stimulatingEmployeeInterestAndIncreasingEngagement',
                    icon: <FaStar size={20} />,
                    details: ['الدافع والمشاركة', 'التشجيع', 'نمذجة الدور']
                },
                {
                    title: 'leadingEffortsUsingCoachingAndMentoringStrategies',
                    icon: <FaLightbulb size={20} />,
                    details: ['مفهوم الإبداع', 'الذات المبدعة', 'إدارة الإبداع التنظيمي']
                },
                {
                    title: 'managingAngerAndConflictResolutionThroughNegotiation',
                    icon: <FaEye size={20} />,
                    details: ['القيادة الرقمية', 'رصد التوجهات', 'تخطيط السيناريوهات']
                },
                {
                    title: 'integratingFutureVisionIntoCurrentOperations',
                    icon: <FaLightbulb size={20} />,
                    details: ['مفهوم الابتكار', 'إدارة الابتكار', 'التطوير الدائم']
                },
                {
                    title: 'enhancingEmployeeCommitmentToContinuousLearning',
                    icon: <FaLightbulb size={20} />,
                    details: ['مفهوم الابتكار', 'إدارة الابتكار', 'التطوير الدائم']
                }
            ]
        },
        {
            trigger: 'deliverables',
            items: [
                {
                    title: 'certificateOfAttendanceFromSilverILProgram',
                    icon: <FaHeartbeat size={20} />,
                    details: ['الانضباط', 'إدارة الأزمات', 'عقلية النمو']
                },
                {
                    title: 'certificateAndDigitalCertificateFromIL',
                    icon: <FaChartBar size={20} />,
                    details: ['مراجعة الأداء', 'علاج ضعف الأداء', 'تحديد أهداف الأداء']
                },
                {
                    title: 'freeILMembership',
                    icon: <FaBriefcaseMedical size={20} />,
                    details: ['الصحة والسلامة', 'العافية والصحة النفسية', 'التوازن المهني الشخصي']
                }
            ]
        },
        {
            trigger: 'ilMembershipInstitute',
            items: [
                {
                    title: 'development',
                    icon: <FaLightbulb size={20} />,
                    details: ['المبادرة الواثقة', 'رصد الفرص', 'التوجهات']
                },
                {
                    title: 'insight',
                    icon: <FaChartLine size={20} />,
                    details: ['الكيانات القانونية التجارية', 'نموذج العمل التجاري', 'قيادة القطاع العام']
                },
                {
                    title: 'recognition',
                    icon: <FaCogs size={20} />,
                    details: ['المرؤوس المهني', 'إدارة الرؤساء', 'الإبداع التشاركي']
                },
                {
                    title: 'communication',
                    icon: <FaUsers size={20} />,
                    details: ['التفويض', 'التمكين', 'التفاعل']
                }
            ]
        }
    ];
    const instituteInfos = [
        {
            title: 'vision',
            description: 'visionDescription'
        },
        {
            title: 'initiative',
            description: 'initiativeDescription'
        },
        {
            title: 'teamwork',
            description: 'teamworkDescription'
        },
        {
            title: 'adaptability',
            description: 'adaptabilityDescription'
        },
        {
            title: 'resultGeneration',
            description: 'resultGenerationDescription'
        },
        {
            title: 'businessWisdom',
            description: 'businessWisdomDescription'
        },
        {
            title: 'relationships',
            description: 'relationshipsDescription'
        },
        {
            title: 'personality',
            description: 'personalityDescription'
        }
    ];
    const coreSkill = [
        {
            title: 'workshops',
            number: "15"
        },
        {
            title: 'months',
            number: "5"
        },
        {
            title: 'days',
            number: "43"
        },
        {
            title: 'hours',
            number: "84"
        }
    ];
    const mainSkillsArray = [
        'personalGoalsAndLeadershipStyle',
        'futureVisionAndGoalsAlignment',
        'flexibilityAndStressManagement',
        'personalBrandingAndWorkCulture',
        'performanceManagementForTeamWork',
        'employeeEngagementAndLoyalty'
    ];
    return (
        <>

            <Breadcrumb
                pages={[
                    { link: '/services/leadership-solutions', name: t('level_1.leadership_development_solutions') },
                    { link: '/level-4', name: t('levelFour') }
                ]}
            />
            <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('advancedExecutiveLeadershipProgram')}
                            </div>
                        </div>
                        <article className="!px-2 text-center mt-5">
                            {t('level4Description')}
                        </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">
                        <div className="border rounded-lg p-3">
                            <h2 className="services-header after:w-20 after:-bottom-2">
                                {t('overviewTitle4')} {/* Updated translation key for section title */}
                            </h2>
                            <article className="text-semi-gray text-justify mt-4">
                                {t('overviewDescription4')} {/* Updated translation key for description */}
                            </article>
                        </div>

                        <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">
                            <h2 className="services-header after:w-20 after:-bottom-2 flex justify-center">
                                {t('programNatureAndObjectives')} {/* Dynamically translated section title */}
                            </h2>
                            <p className="text-slate-400 lg:px-20">
                                {t('programDescription')} {/* Dynamically translated 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((skillKey, 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(skillKey)} {/* 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')} {/* Dynamically translated section title */}
                        </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)} {/* Dynamically translated 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>
                                            <p className="text-center">
                                                {t(item.title)} {/* Dynamically translated item title */}
                                            </p>
                                        </summary>
                                    </p>
                                ))
                            }
                        </div>
                    </section>
                </section>


                <div className="layout !pb-8">
                    <div className="grid place-items-center my-4">
                        <h2 className="services-header flex justify-center after:w-32 after:-bottom-2">
                            {t('targetCompetencyModel')}
                        </h2>
                        <p className="text-slate-400 lg:px-20">
                            {t('programDescription')}
                        </p>
                    </div>

                    <section className="grid grid-cols-[40%_59%] gap-4 mt-12">
                        <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>
                                    </h2>
                                    <article className="text-start text-common-text">
                                        {t(info.description)}
                                    </article>
                                </div>
                            ))}
                        </section>
                    </section>
                </div>
            </div>
            <div className="layout mt-5 mb-5">
                <GradesFour />
            </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/227' 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>
        </>
    )
}