"use client";
import {
    Scale,
    BookOpen,
    BriefcaseMedical,
    BarChart,
    LineChart,
    Settings,
    MessageCircle,
    Crown,
    AlertTriangle,
    Eye,
    HandHeart,
    Handshake,
    HeartPulse,
    Lightbulb,
    PencilRuler,
    Shield,
    Star,
    Users
} from "lucide-react";
import Breadcrumb from "@/ui/breadcrumb";
import { Link } from "react-router-dom";
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 { useTranslation } from 'react-i18next';

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

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

export default function LevelOne() {
    const { t } = useTranslation();
    const [triggeredSection, setTriggeredSection] = useState(0);
    const percentages = [30, 15, 20, 35];
    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: 'overallPerformanceAndFinancialGrowth',
                    icon: <BookOpen size={20} />,
                    details: t('leadership.item-one-details', { returnObjects: true })
                },
                {
                    title: 'activateOrganizationalCommunicationAndIncreaseEngagement',
                    icon: <Scale size={20} />,
                    details: ['صياغة المهمة الشخصية', 'القدوة والالتزام', 'الشجاعة الاخلاقية']
                },
                {
                    title: 'establishCultureOfResponsibilityAndOwnership',
                    icon: <PencilRuler size={20} />,
                    details: ['نشأة اخلاقيات العمل', 'القيادة الاخلاقية', 'التصرف الاخلاقي']
                },
                {
                    title: 'buildCommitmentAndTrustInPlansAndPolicies',
                    icon: <Star size={20} />,
                    details: ['القيم الشخصية', 'القيم المؤسسية', 'الدور والغاية']
                },
                {
                    title: 'talentMappingAndSuccessionPlanning',
                    icon: <HandHeart size={20} />,
                    details: ['القيادة الرحيمة', 'البهجة والمرح', 'التنمر والتحرش']
                },
                {
                    title: 'developTalentAndOptimizeResources',
                    icon: <MessageCircle size={20} />,
                    details: ['الاستماع النشط', 'السرد القصصي', 'إظهار القوة']
                },
                {
                    title: 'reduceEmployeeTurnover',
                    icon: <Handshake size={20} />,
                    details: ['أهمية الثقة', 'كسب الثقة', 'استعادة الثقة']
                },
                {
                    title: 'growthAndSustainabilityPlanning',
                    icon: <AlertTriangle size={20} />,
                    details: ['دراسة الحالة', 'التعاطف', 'منطقة الراحة']
                }
            ]
        },
        {
            trigger: 'individual',
            items: [
                {
                    title: 'recognizeStrengthsAndPracticePersonalDevelopmentTechniques',
                    icon: <LineChart size={20} />,
                    details: ['النماذج الاستراتيجية', 'التخطيط', 'التفكير الاستراتيجي']
                },
                {
                    title: 'developLeadershipStyleAlignedWithPersonalCapabilities',
                    icon: <Shield size={20} />,
                    details: ['فهم المخاطر التنظيمية', 'إدارة المخاطر', 'قياس المخاطر']
                },
                {
                    title: 'craftProfessionalVisionAndRoleAlignedWithPersonality',
                    details: ['مفهوم التغيير', 'نماذج إدارة التغيير', 'الإدارة العاطفية للتغيير']
                },
                {
                    title: 'developStrategicThinkingAndFutureVision',
                    icon: <Star size={20} />,
                    details: ['الدافع والمشاركة', 'التشجيع', 'نمذجة الدور']
                },
                {
                    title: 'setGoalsAndEstablishAppropriatePolicies',
                    icon: <Lightbulb size={20} />,
                    details: ['مفهوم الإبداع', 'الذات المبدعة', 'إدارة الإبداع التنظيمي']
                },
                {
                    title: 'enhanceNegotiationAndInfluenceSkills',
                    icon: <Eye size={20} />,
                    details: ['القيادة الرقمية', 'رصد التوجهات', 'تخطيط السيناريوهات']
                },
                {
                    title: 'gainFlexibilityAndAdaptabilitySkills',
                    icon: <Lightbulb size={20} />,
                    details: ['مفهوم الابتكار', 'إدارة الابتكار', 'التطوير الدائم']
                },
                {
                    title: 'buildInternalAndExternalRelationshipsAndManageSupervisorsAndSubordinatesEffectively',
                    icon: <Crown size={20} />,
                    details: ['مفهوم الريادة التنظيمية', 'القيادة الرائدة', 'إدارة النمو']
                },
                {
                    title: 'managePrioritiesAndEnhancePlanningAndExecutionEfficiency',
                    icon: <Crown size={20} />,
                    details: ['مفهوم الريادة التنظيمية', 'القيادة الرائدة', 'إدارة النمو']
                },
                {
                    title: 'establishPersonalBrandAndMaintainReputationAndCredibility',
                    icon: <Crown size={20} />,
                    details: ['مفهوم الريادة التنظيمية', 'القيادة الرائدة', 'إدارة النمو']
                }
            ]
        },
        {
            trigger: 'deliverables',
            items: [
                {
                    title: 'certificateOfAttendanceFromSilverILProgram',
                    icon: <HeartPulse size={20} />,
                    details: ['الانضباط', 'إدارة الأزمات', 'عقلية النمو']
                },
                {
                    title: 'certificateAndDigitalCertificateFromIL',
                    icon: <BarChart size={20} />,
                    details: ['مراجعة الأداء', 'علاج ضعف الأداء', 'تحديد أهداف الأداء']
                },
                {
                    title: 'freeILMembership',
                    icon: <BriefcaseMedical size={20} />,
                    details: ['الصحة والسلامة', 'العافية والصحة النفسية', 'التوازن المهني الشخصي']
                }
            ]
        },
        {
            trigger: 'ILInstituteMembership',
            items: [
                {
                    title: 'development',
                    icon: <Lightbulb size={20} />,
                    details: ['المبادرة الواثقة', 'رصد الفرص', 'التوجهات']
                },
                {
                    title: 'insight',
                    icon: <LineChart size={20} />,
                    details: ['الكيانات القانونية التجارية', 'نموذج العمل التجاري', 'قيادة القطاع العام']
                },
                {
                    title: 'recognition',
                    icon: <Settings size={20} />,
                    details: ['المرؤوس المهني', 'إدارة الرؤساء', 'الإبداع التشاركي']
                },
                {
                    title: 'communication',
                    icon: <Users size={20} />,
                    details: ['التفويض', 'التمكين', 'التفاعل']
                }
            ]
        }
    ];
    const instituteInfos = [
        {
            title: "selfAwareness",
            description: "selfAwarenessDescription"
        },
        {
            title: "empowermentAndDevelopment",
            description: "empowermentAndDevelopmentDescription"
        },
        {
            title: "interpersonalCommunication",
            description: "interpersonalCommunicationDescription"
        },
        {
            title: "creativityAndInnovation",
            description: "creativityAndInnovationDescription"
        },
        {
            title: "visionAndPlanning",
            description: "visionAndPlanningDescription"
        },
        {
            title: "respectForDifferences",
            description: "respectForDifferencesDescription"
        },
        {
            title: "participationAndMotivation",
            description: "participationAndMotivationDescription"
        },
        {
            title: "productivityAndEfficiency",
            description: "productivityAndEfficiencyDescription"
        }
    ];
    const coreSkill = [
        {
            title: 'workshops',
            number: "15"
        },
        {
            title: 'months',
            number: "5"
        },
        {
            title: 'days',
            number: "43"
        },
        {
            title: 'hours',
            number: "84"
        }
    ];
    const mainSkillsArray = [
        "selfAwarenessAndAdaptability",
        "communicationSkillsWithSelfAndOthers",
        "cultureOfResponsibilityAndOwnership",
        "productivityAndCulturalEffectiveness",
        "decisionMakingAndChangeManagement",
        "organizationalStrategyAndInfluence"
    ];

    return (
        <>
            <Breadcrumb
                pages={[
                    { link: '/services/leadership-solutions', name: t('level_1.leadership_development_solutions') },
                    { link: '/level-1', name: t('level_1.level_1') }
                ]}
            />
            <div className="mt-16">
                <section className="layout !py-8">
                    <section className="relative border rounded-lg  p-8">
                        <div className="flex justify-center items-center max-lg:my-4">
                            <div className="absolute -top-4 bg-primary-tw text-white px-4 !py-3 rounded-xl">
                                {t('level_1.advanced_executive_leadership_program')} - {t('level_1.level_1')}
                            </div>
                        </div>
                        <article className="!px-2 text-center mt-5">
                            {t('level_1.workshop_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">
                        <div className="border rounded-lg p-3">
                            <h2 className="services-header after:w-20 after:-bottom-2">
                                {t('overviewTitle')}
                            </h2>
                            <article className="text-semi-gray text-justify mt-4">
                                {t('overviewText')}
                            </article>
                        </div>
                        <div className="w-full rounded-xl relative">
                            <img
                                src='https://ivorytraining.com/li/assets/img/last/last.png'
                                alt={t('learningSolutions')}
                                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('programNatureTitle')}
                            </h2>

                            <p className="text-slate-400 lg:px-20">
                                {t('programNatureDescription')}
                            </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)}
                                    </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('أهمــية المشــاركة للفــرد والمنظــمة')} {/* Translated title */}
                        </h2>
                    </div>

                    <section className="layout !pb-4">
                        <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 flex-col items-center 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)} {/* Dynamically translated title */}
                                        </summary>
                                    </p>
                                ))}
                            </div>
                        </section>
                    </section>
                </section>

                <div className="layout !py-0">
                    {/* 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 text-center">
                            {t('executiveLeadershipTrainingImpact')} {/* 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 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">
                <Grades />
            </div>
            <section className="layout !py-2 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>
            {/* <div className='flex justify-center w-full my-8'>
                <ServiceRegister product_id={1} title={t('level_1.level_1')} />
            </div> */}
            <Link to='/training-courses/220' 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>

        </>
    )
}