import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useLanguage } from '@/context/LanguageContext';
import { Play, ChevronRight } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { AnimatedButton, HoverEffect } from "@/components/enhanced/MicroInteractions";
import { OptimizedImage } from "@/components/performance/ImageOptimizer";

const HeroSection = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { isRTL } = useLanguage();
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <section 
      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-background via-background to-accent/10"
      aria-label="Hero section"
      itemScope 
      itemType="https://schema.org/WebPageElement"
    >
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-50" aria-hidden="true" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.05'%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
      }}></div>
      
      <div className="container mx-auto px-4 py-20 relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Content Side */}
          <article className={`space-y-8 ${isRTL ? 'lg:order-2' : ''}`}>
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium" role="status">
              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" aria-hidden="true"></span>
              {t('landing.revolutionarySolution')} {t('landing.forEngineeringTeams')}
            </div>

            {/* Main Headline */}
            <header className="space-y-4">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight" itemProp="headline">
                <span className="block">{t('landing.title').split(' ').slice(0, 3).join(' ')}</span>
                <span className="block text-gradient bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
                  {t('landing.title').split(' ').slice(3).join(' ')}
                </span>
              </h1>
              
              <p className="text-xl text-muted-foreground max-w-xl leading-relaxed" itemProp="description">
                {t('landing.subtitle')}
              </p>
            </header>

            {/* Social Proof */}
            <aside className="flex items-center gap-4 text-sm text-muted-foreground" aria-label="Social proof">
              <div className="flex -space-x-2" role="list" aria-label="User avatars">
                {[1, 2, 3, 4, 5].map((i) => (
                  <div 
                    key={i} 
                    className="w-8 h-8 bg-gradient-to-br from-primary to-accent rounded-full border-2 border-background flex items-center justify-center text-xs font-medium text-white"
                    role="listitem"
                    aria-label={`User ${String.fromCharCode(64 + i)}`}
                  >
                    {String.fromCharCode(64 + i)}
                  </div>
                ))}
              </div>
              <span aria-live="polite">מעל 500+ מהנדסים משתמשים</span>
            </aside>

            {/* Enhanced CTA Buttons with micro-interactions */}
            <nav className="flex flex-col sm:flex-row gap-4" aria-label="Primary navigation">
              <HoverEffect effect="glow" intensity="medium">
                <AnimatedButton 
                  size="lg" 
                  onClick={() => navigate("/register")}
                  className="group text-lg px-8 py-4 bg-gradient-to-r from-primary to-primary-hover shadow-primary hover:shadow-primary-hover"
                  aria-label="התחל לחפש - עבור לעמוד ההרשמה"
                >
                  {t('landing.startSearching')}
                  <ChevronRight className={`w-5 h-5 transition-transform group-hover:translate-x-1 ${isRTL ? 'rotate-180' : ''}`} aria-hidden="true" />
                </AnimatedButton>
              </HoverEffect>
              
              <HoverEffect effect="lift" intensity="subtle">
                <AnimatedButton 
                  size="lg" 
                  variant="outline"
                  onClick={() => setIsPlaying(true)}
                  className="group text-lg px-8 py-4"
                  aria-label="צפה בסרטון הדגמה"
                >
                  <Play className="w-5 h-5 mr-2" aria-hidden="true" />
                  צפה בהדגמה
                </AnimatedButton>
              </HoverEffect>
            </nav>

            {/* Stats Row */}
            <aside className="grid grid-cols-3 gap-8 pt-8 border-t border-border/50" aria-label="Key statistics">
              <div className="text-center">
                <div className="text-2xl font-bold text-primary" aria-label="98 אחוז">98%</div>
                <div className="text-sm text-muted-foreground">חיסכון בזמן</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-primary" aria-label="5 דקות">5 דק׳</div>
                <div className="text-sm text-muted-foreground">התקנה מהירה</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-primary" aria-label="24 שעות ביממה 7 ימים בשבוע">24/7</div>
                <div className="text-sm text-muted-foreground">זמינות</div>
              </div>
            </aside>
          </article>

          {/* Visual Side */}
          <aside className={`relative ${isRTL ? 'lg:order-1' : ''}`} aria-label="Product demonstration">
            <figure className="relative max-w-md mx-auto lg:max-w-none">
              {/* Interactive Demo Preview */}
              <div 
                className="relative bg-card border border-border/50 rounded-2xl shadow-2xl overflow-hidden"
                role="img"
                aria-label="תצוגה מקדימה של ממשק הצ'אט של Mate Viewer עם שאלות ותשובות על מסמכי הנדסה"
              >
                {/* Window Controls */}
                <div className="flex items-center gap-2 p-4 bg-muted/30 border-b border-border/50" aria-hidden="true">
                  <div className="flex gap-1.5">
                    <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                    <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                    <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  </div>
                  <div className="flex-1 text-center text-sm text-muted-foreground">
                    Mate Viewer - Demo
                  </div>
                </div>

                {/* Chat Interface Preview */}
                <div className="p-6 space-y-4 bg-gradient-to-br from-background to-muted/20 min-h-[300px]" role="presentation">
                  <div className="space-y-3">
                    {/* User Message */}
                    <div className="flex justify-end" role="article" aria-label="שאלת משתמש">
                      <div className="bg-primary text-primary-foreground px-4 py-2 rounded-2xl rounded-br-md max-w-xs text-sm">
                        מה הן דרישות הבטיחות במפרט?
                      </div>
                    </div>

                    {/* AI Response */}
                    <div className="flex justify-start" role="article" aria-label="תשובת AI">
                      <div className="bg-muted px-4 py-3 rounded-2xl rounded-bl-md max-w-xs text-sm">
                        <div className="space-y-2">
                          <p>על פי המפרט, דרישות הבטיחות כוללות:</p>
                          <ul className="list-disc list-inside space-y-1 text-xs">
                            <li>שימוש בציוד מגן אישי</li>
                            <li>בדיקת מערכות לפני הפעלה</li>
                            <li>תיעוד תקלות וטיפול</li>
                          </ul>
                        </div>
                      </div>
                    </div>

                    {/* Typing Indicator */}
                    <div className="flex justify-start" role="status" aria-label="המערכת מקלידה">
                      <div className="bg-muted px-4 py-2 rounded-2xl rounded-bl-md">
                        <div className="flex space-x-1" aria-hidden="true">
                          <div className="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
                          <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                          <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Floating Elements */}
              <div className="absolute -top-4 -right-4 bg-primary text-primary-foreground px-3 py-1 rounded-full text-xs font-medium shadow-lg" role="status" aria-label="מאפיין: בינה מלאכותית מתקדמת">
                AI מתקדם
              </div>
              
              <div className="absolute -bottom-4 -left-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-medium shadow-lg" role="status" aria-label="מאפיין: תשובות מיידיות">
                תשובות מיידיות
              </div>
              <figcaption className="sr-only">ממשק צ'אט אינטראקטיבי המדגים שאלות ותשובות על מסמכי הנדסה בזמן אמת</figcaption>
            </figure>
          </aside>
        </div>
      </div>

      {/* Video Modal */}
      {isPlaying && (
        <div 
          className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
          role="dialog"
          aria-modal="true"
          aria-labelledby="demo-video-title"
        >
          <div className="relative bg-background rounded-lg p-6 max-w-4xl w-full">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsPlaying(false)}
              className="absolute top-4 right-4"
              aria-label="סגור חלון הדגמה"
            >
              ✕
            </Button>
            <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
              <div className="text-center">
                <Play className="w-16 h-16 text-primary mx-auto mb-4" aria-hidden="true" />
                <p className="text-lg" id="demo-video-title">סרטון הדגמה יעלה כאן</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

export default HeroSection;