'use client'

import { useEffect, useState } from "react"
import { User, Target, Award, BarChart3 } from "lucide-react"
import { useTranslation } from "react-i18next"

interface TranslationKeys {
  [key: string]: string | string[] | undefined;
}

export default function CMIDesign() {
  const [isMobile, setIsMobile] = useState<boolean>(false)
  const { t } = useTranslation()

  useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

    // Initial check
    checkIfMobile()

    // Add event listener for window resize
    window.addEventListener("resize", checkIfMobile)

    // Cleanup
    return () => {
      window.removeEventListener("resize", checkIfMobile)
    }
  }, [])

  // Function to safely return an array from t()
  const getTranslationArray = (key: string) => {
    const result = t(key, { returnObjects: true });
    // Ensure it is an array, fallback to empty array if not
    return Array.isArray(result) ? result : [];
  }

  return (
    <div className="min-h-screen flex flex-col items-start justify-center bg-[#6A2f38] p-6 layout">
      <div className="container text-white rounded-lg">
        <div className="text-center mb-8">
          <h2 className="text-2xl md:text-3xl font-bold mb-2">{t('cmi.program-design')}</h2>
          <div className="w-24 h-0.5 bg-[#e6c9a8] mx-auto mb-6"></div>

          <p className="text-sm md:text-base leading-relaxed mb-4">
            {t('cmi.program-description')}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* Card 1 */}
          <div className="border border-[#8a4555] rounded-lg p-6 relative mt-4">
            <div className="absolute top-0 -start-5 transform -translate-y-1/2 bg-[#e6c9a8] rounded-full p-3">
              <User className="w-6 h-6 text-[#6d2c3e]" />
            </div>
            <h2 className="text-xl font-bold text mt-4 mb-6">{t('cmi.personal-excellence')}</h2>
            <ul className="space-y-2 !text-start">
              {getTranslationArray('cmi.personal-excellence-items').map((item, index) => (
                <li key={index} className="flex items-start justify-start gap-2">
                  <span className="text-[#e6c9a8]">•</span>
                  <span className="text-sm">{item}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Card 2 */}
          <div className="border border-[#8a4555] rounded-lg p-6 relative mt-4">
            <div className="absolute top-0 -start-5 transform -translate-y-1/2 bg-[#e6c9a8] rounded-full p-3">
              <Target className="w-6 h-6 text-[#6d2c3e]" />
            </div>
            <div className="flex flex-col items-start justify-start text-start">
              <h2 className="text-2xl font-bold mb-4">
                {t('cmi.personal-effectiveness')}
              </h2>
              <ul className="list-disc list-inside space-y-2 text-start">
                {getTranslationArray('cmi.personal-effectiveness-items').map((item, index) => (
                  <li key={index}>{item}</li>
                ))}
              </ul>
            </div>
          </div>

          {/* Card 3 */}
          <div className="border border-[#8a4555] rounded-lg p-6 relative mt-4">
            <div className="absolute top-0 -start-5 transform -translate-y-1/2 bg-[#e6c9a8] rounded-full p-3">
              <Award className="w-6 h-6 text-[#6d2c3e]" />
            </div>
            <div className="flex flex-col items-start justify-start text-start">
              <h2 className="text-2xl font-bold mb-4">
                {t('cmi.ethical-leadership')}
              </h2>
              <ul className="list-disc list-inside space-y-2 text-start">
                {getTranslationArray('cmi.ethical-leadership-items').map((item, index) => (
                  <li key={index}>{item}</li>
                ))}
              </ul>
            </div>
          </div>

          {/* Card 4 */}
          <div className="border border-[#8a4555] rounded-lg p-6 relative mt-4">
            <div className="absolute top-0 -start-5 transform -translate-y-1/2 bg-[#e6c9a8] rounded-full p-3">
              <BarChart3 className="w-6 h-6 text-[#6d2c3e]" />
            </div>
            <h2 className="text-xl font-bold text-start mt-4 mb-6">{t('cmi.organizational-performance')}</h2>
            <ul className="space-y-2 !text-start"
              style={{ width: '100%' }}>
              {getTranslationArray('cmi.organizational-performance-items').map((item, index) => (
                <li key={index} className="flex items-start justify-start gap-2">
                  <span className="text-[#e6c9a8]">•</span>
                  <span className="text-sm">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}