import { useState, useEffect, useRef } from 'react'
import { useLang } from '@/context/LangContext'
import { MapPin, CalendarDays, Video, Volume2, FileText, ArrowLeft, ArrowRight, ExternalLink, ChevronRight, ChevronLeft, Mail, Download } from 'lucide-react'

const NAVY = '#0A192F' // Figma's primary dark color
const SECONDARY_NAVY = '#032340' // Figma's secondary navy color
const GOLD = '#CD9E53' // Figma's gold color
const LIGHT_GOLD = '#FBEED9' // Figma's light peach/gold color
const BG_WHITE = '#FFFFFF'

const CONTENT = {
  fa: {
    hero: {
      location: 'سالن نگین سپاهان‌شهر',
      title: 'آینده بازار فولاد در سایه تحولات انرژی ۲۰۲۵',
      desc: 'بررسی سناریوهای قیمت‌گذاری و زنجیره تامین در دورانی که گذار به انرژی‌های پاک، معادلات صنعت را تغییر می‌دهد.',
      cta: 'رزرو صندلی / ثبت‌نام مستقیم',
      days: 'روز',
      hours: 'ساعت',
      minutes: 'دقیقه',
    },
    upcomingTitle: 'رویدادهای پیش رو',
    featured: {
      title: 'گزارش ارزیابی فرصت‌ها و تهدیدهای ناشی از کلان روندها',
      badge: 'فقط ۱۵ ظرفیت باقی است',
      date: '۱۶ مهر ۱۴۰۵',
      location: 'سالن نگین سپاهان‌شهر',
      whyTitle: 'چرا این رویداد اهمیت دارد؟',
      whyDesc: '«تحلیل سوات (SWOT) خوب است، اما متفکران استـراتژیک می‌دانند نقطه‌ای وجود دارد که در آن فرصت‌ها به تهدید تبدیل می‌شوند و تهدیدها به فرصت.»',
      cta: 'رزرو صندلی',
    },
    vip: {
      title: 'میزگردِ تخصصیِ تدوین نقشه راه فولاد سبز',
      desc: 'نشست بسته - ویژه مدیران ارشد و سیاست‌گذاران کلان. این نشست بدون پوشش رسانه‌ای برگزار می‌گردد.',
      cta: 'درخواست دعوت‌نامه',
    },
    archiveTitle: 'آرشیو رویدادهای گذشته',
    pastEvents: [
      {
        id: 'past-1',
        title: 'چشم‌انداز صادرات محصولات تخت...',
        date: 'اردیبهشت ۱۴۰۵',
        summary: 'تحلیل جامع قوانین جدید کربن و تاثیر آن ...',
        image: '/assets/specialized-meetings/past_event_1.png',
        buttons: [
          { type: 'content_pack', label: 'بسته‌ی محتوایی', color: '#000306' },
          { type: 'watch_video', label: 'تماشای ویدیو', color: '#CD9E53' }
        ]
      },
      {
        id: 'past-2',
        title: 'چشم‌انداز صادرات محصولات تخت...',
        date: 'اردیبهشت ۱۴۰۵',
        summary: 'تحلیل جامع قوانین جدید کربن و تاثیر آن ...',
        image: '/assets/specialized-meetings/past_event_2.png',
        buttons: [
          { type: 'read_report', label: 'مطالعه گزارش رویداد', color: '#CD9E53' }
        ]
      },
      {
        id: 'past-3',
        title: 'چشم‌انداز صادرات محصولات تخت...',
        date: 'اردیبهشت ۱۴۰۵',
        summary: 'تحلیل جامع قوانین جدید کربن و تاثیر آن ...',
        image: '/assets/specialized-meetings/past_event_3.png',
        buttons: [
          { type: 'download_report', label: 'دانلود گزارش', color: '#032340' },
          { type: 'watch_video', label: 'تماشای ویدیو', color: '#CD9E53' }
        ]
      }
    ],
    ctaBanner: {
      text: 'آیا مایلید در رویدادِ بعدیِ اندیشکده، صدای برندِ خود را به گوشِ رهبران صنعت برسانید؟',
      button: 'تماس با ما',
    }
  },
  en: {
    hero: {
      location: 'Negin Hall, Sepahanshar',
      title: 'The Future of the Steel Market in the Shadow of 2025 Energy Developments',
      desc: 'Analyzing pricing scenarios and supply chain dynamics in an era where the transition to clean energy shifts industrial equations.',
      cta: 'Reserve Seat / Direct Register',
      days: 'Days',
      hours: 'Hours',
      minutes: 'Mins',
    },
    upcomingTitle: 'Upcoming Events',
    featured: {
      title: 'Opportunities & Threats Assessment Report from Megatrends',
      badge: 'Only 15 seats left',
      date: 'October 8, 2026',
      location: 'Negin Hall, Sepahanshar',
      whyTitle: 'Why does this event matter?',
      whyDesc: '"SWOT analysis is good, but strategic thinkers know there is a point where opportunities turn into threats and threats into opportunities."',
      cta: 'Reserve Seat',
    },
    vip: {
      title: 'Specialized Roundtable: Formulating the Green Steel Roadmap',
      desc: 'Closed meeting - exclusively for C-level executives and policymakers. Held without media coverage.',
      cta: 'Request Invitation',
    },
    archiveTitle: 'Past Events Archive',
    pastEvents: [
      {
        id: 'past-1',
        title: 'Flat Products Export Outlook...',
        date: 'May 2026',
        summary: 'Comprehensive analysis of new carbon laws and their impact...',
        image: '/assets/specialized-meetings/past_event_1.png',
        buttons: [
          { type: 'content_pack', label: 'Content Pack', color: '#000306' },
          { type: 'watch_video', label: 'Watch Video', color: '#CD9E53' }
        ]
      },
      {
        id: 'past-2',
        title: 'Flat Products Export Outlook...',
        date: 'May 2026',
        summary: 'Comprehensive analysis of new carbon laws and their impact...',
        image: '/assets/specialized-meetings/past_event_2.png',
        buttons: [
          { type: 'read_report', label: 'Read Report', color: '#CD9E53' }
        ]
      },
      {
        id: 'past-3',
        title: 'Flat Products Export Outlook...',
        date: 'May 2026',
        summary: 'Comprehensive analysis of new carbon laws and their impact...',
        image: '/assets/specialized-meetings/past_event_3.png',
        buttons: [
          { type: 'download_report', label: 'Download Report', color: '#032340' },
          { type: 'watch_video', label: 'Watch Video', color: '#CD9E53' }
        ]
      }
    ],
    ctaBanner: {
      text: 'Would you like to project your brand voice to industry leaders at our next event?',
      button: 'Contact Us',
    }
  }
}

// 24 days, 12 hours, 42 minutes target countdown
const TARGET_DATE = new Date(Date.now() + (24 * 86400000) + (12 * 3600000) + (42 * 60000))

export default function SpecializedMeetings() {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const t = CONTENT[lang]
  const scrollRef = useRef<HTMLDivElement>(null)

  const [timeLeft, setTimeLeft] = useState({ days: 24, hours: 12, minutes: 42 })

  useEffect(() => {
    const interval = setInterval(() => {
      const difference = TARGET_DATE.getTime() - Date.now()
      if (difference <= 0) {
        clearInterval(interval)
        setTimeLeft({ days: 0, hours: 0, minutes: 0 })
      } else {
        setTimeLeft({
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
        })
      }
    }, 1000)
    return () => clearInterval(interval)
  }, [])

  const faNum = (n: number) => isFa ? n.toLocaleString('fa-IR', { useGrouping: false }) : n.toString()

  const scrollLeft = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: -360, behavior: 'smooth' })
    }
  }

  const scrollRight = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: 360, behavior: 'smooth' })
    }
  }

  const renderNavCard = () => (
    <div 
      onClick={isFa ? scrollLeft : scrollRight}
      className="flex-shrink-0 w-[181px] h-[416px] rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-all duration-300 hover:opacity-95 shadow-md relative overflow-hidden select-none"
      style={{ 
        background: SECONDARY_NAVY, 
        border: `1.5px solid ${GOLD}`
      }}
      id="past-events-nav-card"
    >
      {/* Decorative inner shape */}
      <div 
        style={{
          position: 'absolute',
          width: '155px',
          height: '412px',
          border: '1px solid rgba(205, 158, 83, 0.15)',
          borderRadius: '14px',
          pointerEvents: 'none'
        }}
      />
      
      {/* Interactive Arrow Buttons */}
      <div className="flex flex-col gap-5 z-10">
        <div style={{
          width: '48px', height: '48px', borderRadius: '50%',
          border: '1.5px solid rgba(255,255,255,0.15)',
          display: 'flex', alignItems: 'center', justifySelf: 'center', justifyContent: 'center',
          color: '#fff', background: 'rgba(255,255,255,0.05)', transition: 'all 0.2s'
        }}>
          {isFa ? <ChevronRight size={24} color={GOLD} /> : <ChevronLeft size={24} color={GOLD} />}
        </div>
        <div style={{
          width: '48px', height: '48px', borderRadius: '50%',
          border: '1.5px solid rgba(205, 158, 83, 0.3)',
          display: 'flex', alignItems: 'center', justifySelf: 'center', justifyContent: 'center',
          color: '#fff', background: 'rgba(205, 158, 83, 0.08)', transition: 'all 0.2s'
        }}>
          {isFa ? <ChevronLeft size={24} color={GOLD} /> : <ChevronRight size={24} color={GOLD} />}
        </div>
      </div>
      
      <span style={{ color: GOLD, fontSize: '13px', marginTop: '20px', fontWeight: 'bold', zIndex: 10 }}>
        {isFa ? 'رویدادهای بعد' : 'Next Events'}
      </span>
    </div>
  )

  return (
    <div 
      dir={isFa ? 'rtl' : 'ltr'} 
      style={{ 
        background: BG_WHITE, 
        minHeight: '100vh', 
        fontFamily: 'Vazirmatn, Vazir, IRANYekanFN, sans-serif',
        position: 'relative',
        overflow: 'hidden'
      }}
    >

      <style dangerouslySetInnerHTML={{ __html: `
        .hero-section-clean {
          position: relative;
          min-height: 569px;
          background-color: ${NAVY};
          display: flex;
          align-items: center;
          color: #fff;
          z-index: 10;
        }
        .hero-clean-container {
          position: relative;
          z-index: 1;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 64px;
          flex-wrap: wrap;
        }
        .upcoming-clean-grid {
          display: grid;
          grid-template-columns: 1fr 354px;
          gap: 32px;
          align-items: stretch;
        }
        .vip-rounded-row-clean {
          margin: 48px auto 0 auto;
          max-width: 1100px;
          width: 100%;
          border-radius: 16px;
          overflow: hidden;
          background-color: ${SECONDARY_NAVY};
          background-image: linear-gradient(135deg, rgba(3, 35, 64, 0.45) 0%, rgba(3, 35, 64, 0.9) 100%), url(/assets/specialized-meetings/vip_bg.png);
          background-size: cover;
          background-position: center;
          min-height: 426px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          box-shadow: 0 12px 36px rgba(3,35,64,0.12);
        }
        .vip-glass-card {
          width: 100%;
          max-width: 470px;
          min-height: 319px;
          padding: 36px;
          margin-left: 54px;
          margin-right: 54px;
          background: rgba(255, 255, 255, 0.72);
          border: 1px solid rgba(255, 255, 255, 0.42);
          backdrop-filter: blur(11px);
          border-radius: 15px;
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .countdown-glass-box {
          width: 84px;
          height: 84px;
          border-radius: 20px;
          background: rgba(255, 255, 255, 0.5);
          border: 2.5px solid rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(10px);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
        }
        .countdown-glass-box:hover {
          transform: translateY(-2px);
          background: rgba(255, 255, 255, 0.6);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
        }
        .book-mockup-wrapper {
          position: absolute;
          left: 48px;
          top: -67px;
          width: 620px;
          height: 397px;
          z-index: 20;
          pointer-events: none;
        }
        .past-event-card-btn {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          background: #fff;
          border-radius: 6px;
          padding: 10px 6px;
          font-size: 13px;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.2s ease;
        }
        .past-event-card-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 10px rgba(0,0,0,0.06);
        }
        
        @media (max-width: 1150px) {
          #cta-banner {
            height: auto !important;
            min-height: 400px !important;
            display: flex !important;
            flex-direction: column-reverse !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 40px 24px 100px 24px !important;
          }
          .book-mockup-absolute {
            position: relative !important;
            width: 100% !important;
            max-width: 480px !important;
            height: auto !important;
            margin: 0 auto 24px auto !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
          }
          .cta-text-container-absolute {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            align-items: center !important;
            text-align: center !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
          }
        }
        @media (max-width: 1024px) {
          .upcoming-clean-grid {
            grid-template-columns: 1fr;
          }
        }
        @media (max-width: 768px) {
          .hero-clean-container {
            flex-direction: column;
            align-items: center;
            text-align: center;
          }
          .hero-clean-container > div {
            align-items: center !important;
            text-align: center !important;
          }
          .vip-rounded-row-clean {
            justify-content: center;
            padding: 24px 0;
          }
          .vip-glass-card {
            margin: 16px;
            padding: 24px;
            max-width: 90%;
          }
        }
      ` }} />

      {/* Hero Section */}
      <section className="hero-section-clean" id="hero-section">
        <div className="max-w-7xl mx-auto px-12 max-md:px-5 hero-clean-container" style={{ paddingTop: '100px', paddingBottom: '100px', width: '100%', maxWidth: '1280px' }}>
          
          {/* Hero Details */}
          <div style={{ flex: '1 1 500px', display: 'flex', flexDirection: 'column', gap: 20, textAlign: isFa ? 'right' : 'left', alignItems: 'flex-start', zIndex: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(219, 234, 254, 0.9)', flexDirection: isFa ? 'row' : 'row-reverse' }}>
              <MapPin size={18} color={GOLD} className="no-rtl-flip" />
              <span style={{ fontSize: 16, fontWeight: 500 }}>{t.hero.location}</span>
            </div>
            
            <h1 style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 700, color: GOLD, lineHeight: 1.3, margin: 0 }}>
              {t.hero.title}
            </h1>
            
            <p style={{ fontSize: 18, lineHeight: 1.8, color: 'rgba(219, 234, 254, 0.85)', margin: 0, maxWidth: 660 }}>
              {t.hero.desc}
            </p>

            <div style={{ marginTop: 12 }}>
              <button 
                id="hero-reserve-btn"
                style={{ 
                  background: GOLD, 
                  color: '#fff', 
                  border: 'none', 
                  borderRadius: 8, 
                  padding: '14px 28px', 
                  fontSize: 16, 
                  fontWeight: 600, 
                  cursor: 'pointer', 
                  display: 'inline-flex', 
                  alignItems: 'center', 
                  gap: 8, 
                  boxShadow: '0 4px 14px rgba(205,158,83,0.35)',
                  transition: 'all 0.2s ease'
                }}
                className="hover:scale-[1.02] active:scale-[0.98]"
              >
                <ExternalLink size={16} />
                <span>{t.hero.cta}</span>
              </button>
            </div>
          </div>

          {/* Countdown Clock */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px', zIndex: 10 }}>
            <div style={{ display: 'flex', gap: '24px', direction: 'ltr' }}>
              {['days', 'hours', 'minutes'].map((unit) => {
                const label = t.hero[unit as keyof typeof t.hero]
                const val = timeLeft[unit as keyof typeof timeLeft]
                return (
                  <div key={unit} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
                    <div className="countdown-glass-box">
                      <span style={{ fontSize: 32, fontWeight: 600, color: SECONDARY_NAVY, lineHeight: 1 }}>{faNum(val)}</span>
                    </div>
                    <span style={{ fontSize: 15, color: GOLD, fontWeight: 500 }}>{label}</span>
                  </div>
                )
              })}
            </div>
          </div>

        </div>
      </section>

      {/* Upcoming Events Section */}
      <section style={{ paddingTop: 72, paddingBottom: 64, background: BG_WHITE, position: 'relative', zIndex: 10 }}>
        <div style={{ maxWidth: '1125px', margin: '0 auto', padding: '0 20px' }}>
          
          {/* Title */}
          <div style={{ 
            display: 'flex', 
            alignItems: 'center', 
            borderRight: isFa ? `4px solid ${GOLD}` : 'none', 
            borderLeft: !isFa ? `4px solid ${GOLD}` : 'none', 
            paddingRight: isFa ? 12 : 0, 
            paddingLeft: !isFa ? 12 : 0, 
            marginBottom: 36 
          }}>
            <h2 style={{ fontSize: 24, fontWeight: 700, color: SECONDARY_NAVY, margin: 0, fontFamily: 'IRANYekanFN, sans-serif' }}>
              {t.upcomingTitle}
            </h2>
          </div>

          {/* Grid Container */}
          <div className="upcoming-clean-grid">
            
            {/* Navy Card (SWOT details) */}
            <div style={{ 
              borderRadius: '16px', 
              padding: '28px 36px', 
              display: 'flex', 
              flexDirection: 'column', 
              background: SECONDARY_NAVY, 
              boxShadow: '0 12px 30px rgba(3, 35, 64, 0.08)',
              border: `1px solid rgba(205, 158, 83, 0.2)`,
              position: 'relative',
              height: '287px',
              justifyContent: 'space-between',
              boxSizing: 'border-box'
            }}
              id="upcoming-swot-card"
            >
              {/* Top Row: Date/Location (left) and Red Badge (right) */}
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center',
                width: '100%'
              }}>
                {/* Red warning badge */}
                <span style={{ 
                  fontSize: '12px', 
                  fontWeight: '400', 
                  background: '#E53935', 
                  color: '#fff', 
                  padding: '6px 14px', 
                  borderRadius: '6px',
                  fontFamily: 'IRANYekanFN, sans-serif'
                }}>
                  {t.featured.badge}
                </span>

                {/* Date & Location */}
                <div style={{ 
                  display: 'flex', 
                  gap: '24px', 
                  alignItems: 'center',
                  color: '#ADADAD'
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <CalendarDays size={18} color={GOLD} />
                    <span style={{ fontSize: '16px', fontWeight: 400, fontFamily: 'IRANYekanFN, sans-serif' }}>
                      {t.featured.date}
                    </span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <MapPin size={18} color={GOLD} />
                    <span style={{ fontSize: '16px', fontWeight: 400, fontFamily: 'IRANYekanFN, sans-serif' }}>
                      {t.featured.location}
                    </span>
                  </div>
                </div>
              </div>

              {/* Middle Row: Title */}
              <h3 style={{ 
                fontSize: '18px', 
                fontWeight: '500', 
                color: GOLD, 
                margin: '12px 0', 
                lineHeight: '1.5',
                textAlign: isFa ? 'right' : 'left',
                fontFamily: 'IRANYekanFN, sans-serif'
              }}>
                {t.featured.title}
              </h3>
              
              {/* Bottom Row: SWOT Description */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                <h4 style={{ 
                  fontSize: '18px', 
                  fontWeight: '500', 
                  color: GOLD, 
                  margin: 0, 
                  textAlign: isFa ? 'right' : 'left',
                  fontFamily: 'IRANYekanFN, sans-serif'
                }}>
                  {t.featured.whyTitle}
                </h4>
                <p style={{ 
                  fontSize: '16px', 
                  lineHeight: '1.8', 
                  color: '#F9F9F9', 
                  margin: 0, 
                  fontWeight: 500,
                  textAlign: isFa ? 'right' : 'left',
                  fontFamily: 'IRANYekanFN, sans-serif'
                }}>
                  {t.featured.whyDesc}
                </p>
              </div>
            </div>

            {/* Speaker Card (Image background) */}
            <div style={{ 
              width: '354px',
              height: '287px', 
              backgroundImage: 'url(/assets/specialized-meetings/upcoming_speaker.png)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              borderRadius: '16px',
              position: 'relative',
              boxShadow: '0 12px 30px rgba(0,0,0,0.08)',
              overflow: 'hidden',
              border: '1px solid rgba(0,0,0,0.05)',
              margin: '0 auto',
              boxSizing: 'border-box'
            }}
              id="upcoming-speaker-card"
            >
              {/* Bottom gradient overlay */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)' }} />
              
              {/* Gold button inside speaker card */}
              <button 
                id="upcoming-reserve-btn"
                style={{
                  position: 'absolute', 
                  bottom: '24px', 
                  left: isFa ? '24px' : 'auto', 
                  right: !isFa ? '24px' : 'auto',
                  background: GOLD, 
                  color: '#fff', 
                  border: 'none', 
                  borderRadius: '8px',
                  padding: '10px 20px', 
                  fontSize: '16px', 
                  fontWeight: '500',
                  cursor: 'pointer', 
                  display: 'flex', 
                  alignItems: 'center', 
                  gap: '8px',
                  boxShadow: '0 4px 12px rgba(205,158,83,0.3)', 
                  transition: 'all 0.2s ease',
                  fontFamily: 'IRANYekanFN, sans-serif'
                }}
                className="hover:scale-[1.02] active:scale-[0.98]"
              >
                <span>{t.featured.cta}</span>
                {isFa ? <ArrowLeft size={16} color="#fff" /> : <ArrowRight size={16} color="#fff" />}
              </button>
            </div>
        </div>


        {/* VIP Roundtable Card */}
        <div className="vip-rounded-row-clean">
          <div className="vip-glass-card">
            <h3 style={{ fontSize: '26px', fontWeight: '700', color: '#1B1C1C', margin: 0, lineHeight: 1.3 }}>
              {t.vip.title}
            </h3>
            <p style={{ fontSize: '15px', lineHeight: '1.8', color: '#4E4637', margin: '16px 0 24px 0', fontWeight: 500 }}>
              {t.vip.desc}
            </p>
            <button 
              id="vip-request-btn"
              style={{
                background: GOLD, 
                color: '#fff', 
                border: 'none', 
                borderRadius: '8px',
                padding: '14px 24px', 
                fontSize: '18px', 
                fontWeight: '700',
                cursor: 'pointer', 
                width: '100%', 
                textAlign: 'center',
                boxShadow: '0 4px 12px rgba(205,158,83,0.3)',
                transition: 'all 0.2s ease'
              }}
              className="hover:scale-[1.01] active:scale-[0.99]"
            >
              {t.vip.cta}
            </button>
          </div>
        </div>
      </div>
    </section>

      {/* Past Events Archive Section */}
      <section className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingBottom: 72, width: '100%', maxWidth: '1280px', position: 'relative', zIndex: 10 }}>
        
        {/* Title */}
        <div style={{ display: 'flex', alignItems: 'center', borderRight: isFa ? `5px solid ${GOLD}` : 'none', borderLeft: !isFa ? `5px solid ${GOLD}` : 'none', paddingRight: isFa ? 16 : 0, paddingLeft: !isFa ? 16 : 0, marginBottom: 36 }}>
          <h2 style={{ fontSize: 24, fontWeight: 700, color: SECONDARY_NAVY, margin: 0 }}>
            {t.archiveTitle}
          </h2>
        </div>

        {/* Scroll Container */}
        <div style={{ position: 'relative' }}>
          <div 
            ref={scrollRef}
            className="flex gap-6 overflow-x-auto pb-6 scroll-smooth" 
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {/* Render Navigation Card First (on the Right in RTL visual order) */}
            {isFa && renderNavCard()}

            {t.pastEvents.map((ev) => (
              <div 
                key={ev.id} 
                className="flex-shrink-0 w-[340px] bg-white rounded-2xl border border-[#EBEBEB] overflow-hidden flex flex-col shadow-sm hover:shadow-md transition-all duration-300"
                style={{ height: '416px' }}
              >
                {/* Image / Header area */}
                <div style={{ height: 180, position: 'relative', overflow: 'hidden' }}>
                  <img src={ev.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <span style={{ 
                    position: 'absolute', 
                    top: 14, 
                    right: isFa ? 14 : 'auto', 
                    left: !isFa ? 14 : 'auto', 
                    fontSize: 13, 
                    fontWeight: 500, 
                    background: 'rgba(3, 35, 64, 0.9)', 
                    color: '#fff', 
                    padding: '5px 12px', 
                    borderRadius: 6 
                  }}>
                    {ev.date}
                  </span>
                </div>

                {/* Body Details */}
                <div style={{ padding: '20px 24px', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div>
                    <h3 style={{ fontSize: 17, fontWeight: 700, color: '#151617', margin: 0, lineHeight: 1.5 }}>
                      {ev.title}
                    </h3>
                    <p style={{ fontSize: 14, lineHeight: 1.7, color: '#676F71', marginTop: 8, marginBottom: 0 }}>
                      {ev.summary}
                    </p>
                  </div>
                  
                  {/* Custom Styled Action Buttons from Figma */}
                  <div style={{ display: 'flex', gap: 10, marginTop: 'auto' }}>
                    {ev.buttons.map((btn, bIdx) => {
                      const isGold = btn.color === '#CD9E53';
                      const isBlack = btn.color === '#000306';
                      
                      let icon = <Video size={15} color={GOLD} />;
                      if (btn.type === 'content_pack') icon = <Volume2 size={15} color={SECONDARY_NAVY} />;
                      if (btn.type === 'read_report') icon = <FileText size={15} color={GOLD} />;
                      if (btn.type === 'download_report') icon = <Download size={15} color={SECONDARY_NAVY} />;

                      return (
                        <button 
                          key={bIdx}
                          className="past-event-card-btn"
                          style={{
                            color: btn.color,
                            border: `1.2px solid ${isGold ? 'rgba(205,158,83,0.3)' : isBlack ? 'rgba(0,3,6,0.12)' : 'rgba(3,35,64,0.15)'}`
                          }}
                        >
                          {icon}
                          <span>{btn.label}</span>
                        </button>
                      )
                    })}
                  </div>
                </div>
              </div>
            ))}

            {/* Render Navigation Card Last (on the Left in LTR visual order) */}
            {!isFa && renderNavCard()}
          </div>
        </div>
      </section>

      {/* CTA Banner Section */}
      <section className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingBottom: 120, width: '100%', maxWidth: '1280px', position: 'relative', zIndex: 10 }}>
        
        {/* Banner Box */}
        <div 
          className="relative rounded-2xl overflow-visible shadow-md" 
          style={{
            background: '#032340',
            boxShadow: '0px 8px 64px rgba(41, 65, 115, 0.08)',
            borderRadius: '16px',
            width: '1101px',
            maxWidth: '100%',
            height: '221px',
            margin: '0 auto',
            position: 'relative',
            overflow: 'visible'
          }}
          id="cta-banner"
        >
          {/* Ellipse 610 (White Glow) */}
          <div style={{
            position: 'absolute',
            width: '506px',
            height: '240px',
            left: isFa ? '555px' : 'auto',
            right: isFa ? 'auto' : '555px',
            top: '-1px',
            background: 'rgba(255, 255, 255, 0.39)',
            opacity: 0.9,
            filter: 'blur(50px)',
            borderRadius: '50%',
            pointerEvents: 'none',
            zIndex: 1
          }} />

          {/* Ellipse 611 (Gray Glow) */}
          <div style={{
            position: 'absolute',
            width: '202px',
            height: '195px',
            left: isFa ? 'auto' : '-133px',
            right: isFa ? '-133px' : 'auto',
            top: '-99px',
            background: 'rgba(103, 111, 113, 0.24)',
            filter: 'blur(50px)',
            borderRadius: '50%',
            pointerEvents: 'none',
            zIndex: 1
          }} />

          {/* Frame 1890166247 (Gold Bar) */}
          <div style={{
            position: 'absolute',
            height: '78px',
            left: '0px',
            right: '0px',
            top: '174px',
            background: '#CD9E53',
            zIndex: 2,
            borderRadius: '0 0 16px 16px'
          }} />

          {/* Lanyard Card Mockup (Horizontal_Book_Mockup_6 1) */}
          <div 
            className="book-mockup-absolute"
            style={{
              position: 'absolute',
              width: '620px',
              height: '397px',
              left: isFa ? 'auto' : '-25px',
              right: isFa ? '-25px' : 'auto',
              top: '-67px',
              zIndex: 10,
              pointerEvents: 'none'
            }}
          >
            <img 
              src="/assets/specialized-meetings/book_mockup.png" 
              alt="VIP Lanyard Badge" 
              style={{ width: '100%', height: '100%', objectFit: 'contain' }} 
            />
          </div>

          {/* Frame 2147229451 (Text & Button Container) */}
          <div 
            className="cta-text-container-absolute"
            style={{
              position: 'absolute',
              width: '480px',
              height: '153px',
              left: isFa ? '78px' : 'auto',
              right: isFa ? 'auto' : '78px',
              top: '42px',
              display: 'flex',
              flexDirection: 'column',
              alignItems: isFa ? 'flex-end' : 'flex-start',
              justifyContent: 'space-between',
              zIndex: 10
            }}
          >
            {/* Title text */}
            <div style={{ width: '480px', height: '82px', display: 'flex', alignItems: 'center' }}>
              <h3 style={{
                fontSize: '24px',
                fontWeight: 500,
                lineHeight: '41px',
                fontFamily: 'IRANYekanFN, sans-serif',
                color: '#FFFFFF',
                margin: 0,
                textAlign: isFa ? 'right' : 'left',
                width: '100%'
              }}>
                {t.ctaBanner.text}
              </h3>
            </div>
            
            {/* Button */}
            <button 
              id="cta-contact-btn"
              style={{
                background: LIGHT_GOLD, 
                color: SECONDARY_NAVY, 
                border: 'none', 
                borderRadius: '8px',
                width: '145px',
                height: '40px',
                cursor: 'pointer', 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                gap: '8px',
                transition: 'all 0.2s ease'
              }}
              className="hover:scale-[1.02] active:scale-[0.98]"
            >
              {/* sms-edit icon */}
              <Mail size={18} color={SECONDARY_NAVY} />
              <span style={{ fontSize: '18px', fontWeight: 500, lineHeight: '31px', fontFamily: 'IRANYekanFN, sans-serif' }}>
                {t.ctaBanner.button}
              </span>
            </button>
          </div>

        </div>
      </section>

    </div>
  )
}
