import { useTranslation } from '@/hooks/useTranslation';
import { scrollToElement } from '@/lib/utils';
import ZatcaHighlight from '@/components/ui/ZatcaHighlight';
import { LazyImage } from '@/components/ui/LazyImage';
import { Link } from 'wouter';
import heroImage from '@/assets/2_Tile-Toggle (1).webp';

const HeroSection = () => {
  const { t, isRTL, language } = useTranslation();
  
  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {
    e.preventDefault();
    scrollToElement(targetId);
  };

  return (
    <section id="home" className="bg-gradient-to-r from-blue-800 to-blue-700 text-white py-20 md:py-32" aria-label="Hero Section" style={{background: 'linear-gradient(to right, #2F5A85, #3F6B9E)'}}>
      <div className="container mx-auto px-4">
        {/* Main H1 Heading */}
        <h1 className="text-3xl md:text-4xl font-bold text-center mb-8">
          {language === 'en' 
            ? 'Leading ERP, POS & CRM Solution Provider, Saudi Arabia'
            : 'مزود رائد لحلول إدارة موارد المؤسسات ونقاط البيع وإدارة علاقات العملاء، السعودية'
          }
        </h1>
        
        <div className="flex flex-col md:flex-row md:items-center items-center md:space-x-8">
          <div className="md:w-1/2 lg:w-5/12 mb-10 md:mb-0">
            <header>
              <h2 className="text-4xl md:text-5xl font-bold mb-4 whitespace-nowrap">
                {language === 'en' ? 'Najmat Al-Nuzum' : 'نجمة النظم'}
              </h2>
              <h3 className="text-2xl md:text-3xl font-semibold mb-6">
                {language === 'en' ? (
                  <><span className="text-[#007BFF]">ZATCA</span> Compliant POS & ERP Solution Providers, Saudi Arabia</>
                ) : (
                  <>مزودو حلول <span className="text-[#007BFF]">الزكاة والضريبة والجمارك</span> المتوافقة لنقاط البيع وتخطيط موارد المؤسسات، المملكة العربية السعودية</>
                )}
              </h3>
            </header>
            
            <p className="text-xl mb-4">
              {language === 'en' ? (
                <>Authorized distributor of <strong>ZATCA-certified</strong> point-of-sale systems and enterprise software for Saudi businesses of all sizes.</>
              ) : (
                <>موزع معتمد لأنظمة نقاط البيع وبرامج المؤسسات <strong>المعتمدة من هيئة الزكاة والضريبة والجمارك</strong> للشركات السعودية من جميع الأحجام.</>
              )}
            </p>
            
            <ul className="mb-6 text-blue-100 grid grid-cols-2 gap-2">
              <li className="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                {language === 'en' ? 'Retail POS Systems' : 'أنظمة نقاط البيع للتجزئة'}
              </li>
              <li className="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                {language === 'en' ? 'Restaurant Management' : 'إدارة المطاعم'}
              </li>
              <li className="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                {language === 'en' ? 'ERP Solutions' : 'حلول تخطيط موارد المؤسسات'}
              </li>
              <li className="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                {language === 'en' ? 'CRM Platforms' : 'منصات إدارة علاقات العملاء'}
              </li>
            </ul>
            
            <div className="mb-8">
              <a 
                href="https://najmatalnuzum.com/blog/" 
                target="_blank" 
                rel="noopener noreferrer" 
                className="text-blue-300 hover:text-blue-100 underline transition-colors flex items-center"
                aria-label="Read Najmat Al - Nuzum's technology blog"
              >
                <span className={`${isRTL ? 'ml-2' : 'mr-2'}`}>{isRTL ? 'رؤى التكنولوجيا من نجمة النظم' : 'Najmat Al - Nuzum Tech Insights: ZATCA Compliance & Business Software'}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </a>
            </div>
            
            <div className={`flex flex-col sm:flex-row sm:${isRTL ? 'space-x-reverse' : ''} space-y-4 sm:space-y-0 sm:space-x-4 mb-8`}>
              <a 
                href="#solutions" 
                onClick={(e) => handleNavClick(e, 'solutions')} 
                className="bg-primary hover:opacity-90 text-white font-medium py-3 px-6 rounded-md transition-all text-center inline-block"
                aria-label="Explore our ZATCA-compliant software solutions"
              >
                {language === 'en' ? 'Explore ZATCA-Compliant Software' : 'استكشف البرامج المتوافقة مع هيئة الزكاة والضريبة والجمارك'}
              </a>
              <a 
                href="#contact" 
                onClick={(e) => handleNavClick(e, 'contact')}  
                className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-md transition-colors text-center inline-block"
                aria-label="Contact Najmat Al - Nuzum for ZATCA compliance solutions"
              >
                {language === 'en' ? 'Contact for Compliance Solutions' : 'تواصل معنا لحلول الامتثال'}
              </a>
            </div>
          </div>
          
          <div className="md:w-1/2 lg:w-7/12 flex justify-center">
            <figure className="w-full">
              <LazyImage 
                src={heroImage} 
                alt="Najmat Al-Nuzum ZATCA-compliant POS system dashboard showing real-time sales analytics for Saudi businesses" 
                className="rounded-lg shadow-xl w-full" 
                width={700} 
                height={450}
                placeholderColor="#f3f4f6"
              />
              <figcaption className="sr-only">
                {language === 'en' 
                  ? 'Najmat Al-Nuzum ZATCA Phase 2 compliant point-of-sale system from www.najmatalnuzum.com for Saudi businesses' 
                  : 'نظام نقاط بيع نجمة النظم المتوافق مع المرحلة 2 من هيئة الزكاة والضريبة والجمارك للشركات السعودية - www.najmatalnuzum.com'}
              </figcaption>
            </figure>
          </div>
        </div>
        
        {/* Services Description Section */}
        <div className="mt-16 py-8 px-6 bg-blue-50 bg-opacity-10 rounded-lg border border-gray-700">
          <h2 className="text-2xl font-bold mb-4 text-white">
            {language === 'en' ? 'Our Comprehensive Services' : 'خدماتنا الشاملة'}
          </h2>
          <div className="text-blue-100">
            <p className="mb-4">
              {language === 'en' ? (
                <>Najmat Al - Nuzum delivers a complete range of technology solutions for Saudi businesses of all sizes. Our expertise in <strong>ZATCA Phase 2</strong> compliance spans across various sectors including:</>
              ) : (
                <>تقدم نجمة النظم مجموعة كاملة من الحلول التقنية للشركات السعودية من جميع الأحجام. تمتد خبرتنا في الامتثال <strong>للمرحلة 2 من هيئة الزكاة والضريبة والجمارك</strong> عبر مختلف القطاعات بما في ذلك:</>
              )}
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div className="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                <h3 className="font-semibold mb-2">
                  <a href="#solutions" onClick={(e) => handleNavClick(e, 'solutions')} className="text-blue-300 hover:text-blue-100">
                    {language === 'en' ? 'POS Software & Computer Systems' : 'برامج نقاط البيع وأنظمة الكمبيوتر'}
                  </a>
                </h3>
                <p>
                  {language === 'en' 
                    ? <>We supply <strong>ZATCA-compliant POS software</strong> including <strong>TallyPrime</strong>, <strong>TMBill</strong>, and <strong>POS Solution</strong>, along with complete hardware systems optimized for retail and restaurant businesses.</>
                    : <>نوفر <strong>برامج نقاط بيع متوافقة مع هيئة الزكاة والضريبة والجمارك</strong> تشمل <strong>تالي برايم</strong>، <strong>تي إم بيل</strong>، و<strong>حلول نقاط البيع</strong>، إلى جانب أنظمة الأجهزة الكاملة المحسنة لمتاجر التجزئة والمطاعم.</>
                  }
                </p>
              </div>
              <div className="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                <h3 className="font-semibold mb-2">
                  <a href="#contact" onClick={(e) => handleNavClick(e, 'contact')} className="text-blue-300 hover:text-blue-100">
                    {language === 'en' ? 'Installation, Maintenance & Repair Services' : 'خدمات التركيب والصيانة والإصلاح'}
                  </a>
                </h3>
                <p>
                  {language === 'en' 
                    ? <>Our certified technicians provide expert <strong>installation</strong>, <strong>configuration</strong>, <strong>training</strong> and ongoing <strong>maintenance</strong> for all <strong>POS hardware and software</strong> systems to keep your business running smoothly.</>
                    : <>يقدم فنيونا المعتمدون خدمات <strong>التركيب</strong> و<strong>التكوين</strong> و<strong>التدريب</strong> و<strong>الصيانة</strong> المستمرة لجميع أنظمة <strong>أجهزة وبرامج نقاط البيع</strong> للحفاظ على سير عملك بسلاسة.</>
                  }
                </p>
              </div>
              <div className="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                <h3 className="font-semibold mb-2">
                  <a href="#contact" onClick={(e) => handleNavClick(e, 'contact')} className="text-blue-300 hover:text-blue-100">
                    {language === 'en' ? 'Security and Surveillance Systems' : 'أنظمة الأمن والمراقبة'}
                  </a>
                </h3>
                <p>
                  {language === 'en' 
                    ? <>We install and maintain comprehensive security solutions including <strong>attendance systems</strong>, <strong>surveillance cameras</strong>, <strong>access control</strong>, and integrated security networks for businesses of all sizes.</>
                    : <>نقوم بتركيب وصيانة حلول أمنية شاملة تتضمن <strong>أنظمة الحضور</strong>، <strong>كاميرات المراقبة</strong>، <strong>التحكم في الوصول</strong>، وشبكات الأمن المتكاملة للشركات من جميع الأحجام.</>
                  }
                </p>
              </div>
              <div className="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                <h3 className="font-semibold mb-2">
                  <a href="#contact" onClick={(e) => handleNavClick(e, 'contact')} className="text-blue-300 hover:text-blue-100">
                    {language === 'en' ? 'Software Development and IT Support' : 'تطوير البرمجيات ودعم تكنولوجيا المعلومات'}
                  </a>
                </h3>
                <p>
                  {language === 'en' 
                    ? <>Our team provides expert <strong>IT support</strong>, <strong>troubleshooting</strong>, and <strong>custom software development</strong> including integration of existing systems with <strong>ZATCA-compliant solutions</strong> for businesses across Saudi Arabia.</>
                    : <>يقدم فريقنا <strong>دعم تكنولوجيا المعلومات</strong> الخبير، <strong>استكشاف الأخطاء وإصلاحها</strong>، و<strong>تطوير البرمجيات المخصصة</strong> بما في ذلك تكامل الأنظمة الحالية مع <strong>حلول متوافقة مع هيئة الزكاة والضريبة والجمارك</strong> للشركات في جميع أنحاء المملكة العربية السعودية.</>
                  }
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;