import { useState, useEffect, useRef } from 'react'
import { useLang } from '@/context/LangContext'
import { motion, AnimatePresence } from 'framer-motion'
import { Globe, Cpu, BarChart3, Leaf, Quote } from 'lucide-react'

// --- Types ---
interface Expert {
  id: string
  nameFa: string
  nameEn: string
  roleFa: string
  roleEn: string
  bioFa: string
  bioEn: string
  photo: string
  telegram?: string
  linkedin?: string
  twitter?: string
  website?: string
}

// --- Data ---
const FEATURED_EXPERTS: Expert[] = [
  {
    id: 'saeed-zarandi',
    nameFa: 'دکتر سعید زرندی',
    nameEn: 'Dr. Saeed Zarandi',
    roleFa: 'مدیرعامل و نایب‌رئیس هیئت‌مدیره شرکت فولاد مبارکه اصفهان',
    roleEn: 'CEO & Vice Chairman of Mobarakeh Steel Company',
    bioFa: 'سعید زرندی یکی از مدیران ارشد صنعت و اقتصاد ایران است که با تحصیلات در حوزه مهندسی معدن و مدیریت دولتی، در سمت‌های مختلفی از جمله معاون طرح و برنامه وزارت صمت و مدیرعامل هلدینگ سرمایه‌گذاری صنایع شیمیایی ایران فعالیت داشته است. او در بهمن ۱۴۰۳ به‌عنوان مدیرعامل فولاد مبارکه منصوب شد.',
    bioEn: 'Saeed Zarandi is a senior executive in Iran\'s industrial and economic sectors. With a background in mining engineering and public administration, he has served as Deputy Minister of Industry, Mine and Trade, and CEO of major industrial holdings. He was appointed as CEO of Mobarakeh Steel in early 2025.',
    photo: '/avatar-placeholder.svg',
    telegram: 'https://t.me',
    linkedin: 'https://linkedin.com',
    twitter: 'https://x.com',
    website: 'https://google.com'
  },
  {
    id: 'fateme-ahmadi',
    nameFa: 'دکتر فاطمه احمدی',
    nameEn: 'Dr. Fatemeh Ahmadi',
    roleFa: 'مدیر تحقیقات ریسک ژئوپلیتیک و عضو اتاق فکر توسعه پایدار',
    roleEn: 'Geopolitical Risk Director & Member of Sustainable Development Think Tank',
    bioFa: 'فاطمه احمدی فارغ‌التحصیل دکتری مدیریت ریسک از دانشگاه علم و صنعت ایران با بیش از ۱۵ سال تجربه پژوهشی در حوزه زنجیره تأمین صنایع معدنی و فلزی است. وی مشاور ارشد چندین طرح کربن‌زدایی در صنعت فولاد است.',
    bioEn: 'Fatemeh Ahmadi holds a Ph.D. in Risk Management from Iran University of Science and Technology. She has over 15 years of research experience in mineral and metal supply chains and is a senior consultant on carbon border regulations.',
    photo: '/avatar-placeholder.svg',
    telegram: 'https://t.me',
    linkedin: 'https://linkedin.com',
    twitter: 'https://x.com'
  },
  {
    id: 'hosein-karimi',
    nameFa: 'دکتر حسین کریمی',
    nameEn: 'Dr. Hossein Karimi',
    roleFa: 'تحلیلگر ارشد بازار جهانی کامودیتی و عضو اتاق فکر صنعت فولاد',
    roleEn: 'Senior Commodity Analyst & Member of Steel Industry Think Tank',
    bioFa: 'حسین کریمی دکتری مهندسی مواد از دانشگاه صنعتی اصفهان دارد. حوزه تخصصی پژوهش‌های وی متالورژی صنعتی و پیش‌بینی تقاضای بازارهای آسیایی است و به‌طور مرتب در رسانه‌های بین‌المللی تحلیل منتشر می‌کند.',
    bioEn: 'Hossein Karimi received his Ph.D. in Materials Engineering from Isfahan University of Technology. His expertise covers industrial metallurgy and demand forecasting for Asian steel markets, frequently writing for global publications.',
    photo: '/avatar-placeholder.svg',
    linkedin: 'https://linkedin.com',
    twitter: 'https://x.com',
    website: 'https://google.com'
  },
  {
    id: 'sara-rezaei',
    nameFa: 'مهندس سارا رضایی',
    nameEn: 'Ms. Sara Rezaei',
    roleFa: 'پژوهشگر ارشد انرژی و پایداری و مدیر اتاق فکر فناوری و نوآوری',
    roleEn: 'Senior Energy & Sustainability Researcher & Head of Technology Think Tank',
    bioFa: 'سارا رضایی فارغ‌التحصیل کارشناسی ارشد مهندسی انرژی از دانشگاه صنعتی شریف است. پژوهش‌های او در زمینه بهره‌وری کوره قوس الکتریکی و کربن‌زدایی با هیدروژن، از مراجع علمی صنعت فولاد است.',
    bioEn: 'Sara Rezaei holds an M.Sc. in Energy Engineering from Sharif University of Technology. Her research on EAF efficiency, green hydrogen, and carbon reduction roadmaps serves as a benchmark in local clean steel policymaking.',
    photo: '/avatar-placeholder.svg',
    telegram: 'https://t.me',
    linkedin: 'https://linkedin.com'
  },
  {
    id: 'ali-mohammadi',
    nameFa: 'دکتر علی محمدی',
    nameEn: 'Dr. Ali Mohammadi',
    roleFa: 'مدیر ارشد اقتصاد صنعتی و دبیر علمی اتاق فکر اقتصادی',
    roleEn: 'Industrial Economics Director & Scientific Secretary of Economic Think Tank',
    bioFa: 'علی محمدی دکتری اقتصاد صنعتی از دانشگاه تهران دارد. وی پیش از این مشاور اقتصادی ایمیدرو بوده و بیش از ۵۰ گزارش تحلیلی در بازارهای فولاد و بازارهای مالی داخلی و جهانی منتشر کرده است.',
    bioEn: 'Ali Mohammadi holds a Ph.D. in Industrial Economics from the University of Tehran. Previously an economic advisor to IMIDRO, he has authored over 50 reports on steel tariffs, macro trends, and financial commodities.',
    photo: '/avatar-placeholder.svg',
    telegram: 'https://t.me',
    linkedin: 'https://linkedin.com',
    twitter: 'https://x.com',
    website: 'https://google.com'
  }
]

const ROOM_EXPERTS = {
  sustainability: [
    { nameFa: 'دکتر فاطمه احمدی', nameEn: 'Dr. Fatemeh Ahmadi', roleFa: 'مدیر ریسک ژئوپلیتیک', roleEn: 'Geopolitical Risk Director', photo: '/avatar-placeholder.svg' },
    { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'تحلیلگر پایداری و انرژی', roleEn: 'Energy & Sustainability Analyst', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر مریم حسینی', nameEn: 'Dr. Maryam Hosseini', roleFa: 'پژوهشگر بازاریابی بین‌الملل', roleEn: 'International Marketing Scholar', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر رضا عباسی', nameEn: 'Dr. Reza Abbasi', roleFa: 'مشاور محیط‌زیست صنعتی', roleEn: 'Industrial Environmental Advisor', photo: '/avatar-placeholder.svg' }
  ],
  steel: [
    { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'عضو هیئت‌مدیره فولاد مبارکه', roleEn: 'Board Member of MSC', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر حسین کریمی', nameEn: 'Dr. Hossein Karimi', roleFa: 'تحلیلگر متالورژی و بازار', roleEn: 'Metallurgy & Market Analyst', photo: '/avatar-placeholder.svg' },
    { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بورس کالا و آتی', roleEn: 'Mercantile & Futures Analyst', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر محمود صادقی', nameEn: 'Dr. Mahmoud Sadeghi', roleFa: 'مشاور فناوری کوره قوس', roleEn: 'EAF Steelmaking Consultant', photo: '/avatar-placeholder.svg' }
  ],
  economics: [
    { nameFa: 'دکتر علی محمدی', nameEn: 'Dr. Ali Mohammadi', roleFa: 'مدیر ارشد اقتصاد صنعتی', roleEn: 'Industrial Economics Director', photo: '/avatar-placeholder.svg' },
    { nameFa: 'مهندس رضا توکلی', nameEn: 'Ms. Reza Tavakoli', roleFa: 'تحلیلگر بازار کامودیتی', roleEn: 'Commodity Market Analyst', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر حمید علوی', nameEn: 'Dr. Hamid Alavi', roleFa: 'اقتصاددان زنجیره تأمین', roleEn: 'Supply Chain Economist', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر زهرا راد', nameEn: 'Dr. Zahra Rad', roleFa: 'تحلیلگر مالی سرمایه‌گذاری سبز', roleEn: 'Green Investment Financial Analyst', photo: '/avatar-placeholder.svg' }
  ],
  technology: [
    { nameFa: 'مهندس سارا رضایی', nameEn: 'Ms. Sara Rezaei', roleFa: 'پژوهشگر فناوری‌های نوین', roleEn: 'Emerging Technologies Researcher', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر سعید زرندی', nameEn: 'Dr. Saeed Zarandi', roleFa: 'استراتژیست تحول صنعتی', roleEn: 'Industrial Transformation Strategist', photo: '/avatar-placeholder.svg' },
    { nameFa: 'دکتر پیمان صالحی', nameEn: 'Dr. Peyman Salehi', roleFa: 'متخصص هوش مصنوعی صنعتی', roleEn: 'Industrial AI Specialist', photo: '/avatar-placeholder.svg' },
    { nameFa: 'مهندس نیما راد', nameEn: 'Mr. Nima Rad', roleFa: 'تحلیلگر طرح‌های هیدروژن سبز', roleEn: 'Green Hydrogen Analyst', photo: '/avatar-placeholder.svg' }
  ]
}

// --- Icons SVG components ---
const TelegramIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
    <path d="M11.94 20c.27 0 .42-.16.54-.28l2.56-2.48 5.3 3.91c.98.54 1.68.26 1.93-.91l3.39-16c.36-1.44-.55-2.09-1.49-1.66L4.01 10.37c-1.4.56-1.39 1.35-.25 1.7l5.13 1.6 11.89-7.5c.56-.34 1.07-.15.65.22L11.83 14.9l-.37 5.24c.51 0 .73-.23.98-.47v.33z"/>
  </svg>
)

const LinkedinIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
    <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.8v8.37h2.8v-4.67c0-.25.02-.5.1-.68a1.14 1.14 0 0 1 1-.77c.76 0 1 .58 1 1.42v4.7h2.8M6.5 8.37a1.37 1.37 0 1 0-1.37-1.37A1.37 1.37 0 0 0 6.5 8.37M8 18.5V10.13H5.2v8.37H8z"/>
  </svg>
)

const TwitterIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  </svg>
)

const WebsiteIcon = () => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <line x1="2" y1="12" x2="22" y2="12"/>
    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
  </svg>
)

// --- Local Translations ---
const TR = {
  fa: {
    title: 'شبکه خبرگان',
    subtitle: 'اصحاب اندیشه، تحلیلگران و خبرگان اتاق های فکر اندیشکده فولاد آینده',
    roomSustainability: 'اتاق فکر توسعه پایدار',
    roomSteel: 'اتاق فکر صنعت فولاد',
    roomEconomics: 'اتاق فکر اقتصادی',
    roomTechnology: 'اتاق فکر فناوری و نوآوری'
  },
  en: {
    title: 'Expert Network',
    subtitle: 'A collective of researchers, strategists, and thinkers across our specialized rooms',
    roomSustainability: 'Sustainable Development Think Tank Experts',
    roomSteel: 'Steel Industry Think Tank Experts',
    roomEconomics: 'Economic Think Tank Experts',
    roomTechnology: 'Technology & Innovation Think Tank Experts'
  }
}

// --- Main Page Component ---
export default function Experts() {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const t = TR[lang]

  // Carousel Autoplay state
  const [activeIndex, setActiveIndex] = useState(0)
  const [isPaused, setIsPaused] = useState(false)
  const [hoveredAvatarIndex, setHoveredAvatarIndex] = useState<number | null>(null)
  const autoPlayRef = useRef<(() => void) | null>(null)

  const activeExpert = FEATURED_EXPERTS[activeIndex]

  // Next slide function
  const handleNext = () => {
    setActiveIndex((prev) => (prev + 1) % FEATURED_EXPERTS.length)
  }

  // Set the slide changer reference
  useEffect(() => {
    autoPlayRef.current = handleNext
  })

  // Start/pause autoplay interval
  useEffect(() => {
    if (isPaused) return
    const interval = setInterval(() => {
      if (autoPlayRef.current) autoPlayRef.current()
    }, 5000)
    return () => clearInterval(interval)
  }, [isPaused])

  // only allow http(s) destinations — blocks javascript:/data: hrefs once these
  // URLs come from the CMS instead of the static seed data
  const safeHref = (url?: string) => (url && /^https?:\/\//i.test(url) ? url : undefined)

  const renderSocialIcon = (expert: Expert) => (
    <div style={{ display: 'flex', gap: 12, marginTop: 16, justifyContent: 'center' }}>
      {expert.telegram && (
        <a href={safeHref(expert.telegram)} target="_blank" rel="noreferrer"
          style={{ 
            width: 40, 
            height: 40, 
            borderRadius: '50%', 
            backgroundColor: '#CD9E53', 
            color: '#fff', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center', 
            transition: 'all 0.2s ease-in-out' 
          }}
          className="hover:scale-110 hover:brightness-110 shadow-sm"
        >
          <TelegramIcon />
        </a>
      )}
      {expert.linkedin && (
        <a href={safeHref(expert.linkedin)} target="_blank" rel="noreferrer"
          style={{ 
            width: 40, 
            height: 40, 
            borderRadius: '50%', 
            backgroundColor: '#CD9E53', 
            color: '#fff', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center', 
            transition: 'all 0.2s ease-in-out' 
          }}
          className="hover:scale-110 hover:brightness-110 shadow-sm"
        >
          <LinkedinIcon />
        </a>
      )}
      {expert.twitter && (
        <a href={safeHref(expert.twitter)} target="_blank" rel="noreferrer"
          style={{ 
            width: 40, 
            height: 40, 
            borderRadius: '50%', 
            backgroundColor: '#CD9E53', 
            color: '#fff', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center', 
            transition: 'all 0.2s ease-in-out' 
          }}
          className="hover:scale-110 hover:brightness-110 shadow-sm"
        >
          <TwitterIcon />
        </a>
      )}
      {expert.website && (
        <a href={safeHref(expert.website)} target="_blank" rel="noreferrer"
          style={{ 
            width: 40, 
            height: 40, 
            borderRadius: '50%', 
            backgroundColor: '#CD9E53', 
            color: '#fff', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center', 
            transition: 'all 0.2s ease-in-out' 
          }}
          className="hover:scale-110 hover:brightness-110 shadow-sm"
        >
          <WebsiteIcon />
        </a>
      )}
    </div>
  )

  return (
    <div dir={isFa ? 'rtl' : 'ltr'} style={{ background: '#faf7f4', minHeight: '100vh', paddingBottom: 80 }}>
      {/* ─── Page Header ─── */}
      <div style={{ background: '#032340', padding: '64px 0 56px' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5">
          <div style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'flex-start' }}>
            <div style={{
              [isFa ? 'borderRight' : 'borderLeft']: '4px solid #CD9E53',
              [isFa ? 'paddingRight' : 'paddingLeft']: 18,
            } as React.CSSProperties}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '3px', color: '#CD9E53', marginBottom: 8 }}>
                EXPERT NETWORK
              </div>
              <h1 style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 900, color: '#fff', letterSpacing: '-0.5px', margin: 0 }}>
                {t.title}
              </h1>
              <p style={{ fontSize: 'clamp(13px, 1.1vw, 16px)', color: 'rgba(255, 255, 255, 0.7)', margin: '12px 0 0', maxWidth: 640, lineHeight: 1.8 }}>
                {t.subtitle}
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ marginTop: 48, filter: 'blur(18px)', userSelect: 'none', pointerEvents: 'none' }} aria-hidden="true">
        
        {/* ─── Top Featured Carousel ─── */}
        <section 
          onMouseEnter={() => setIsPaused(true)}
          onMouseLeave={() => setIsPaused(false)}
          style={{
            background: 'none',
            border: 'none',
            boxShadow: 'none',
            overflow: 'visible',
            padding: 0,
            display: 'flex',
            flexDirection: 'column',
            marginBottom: 64
          }}
        >
          {/* Main Slide Split */}
          <div
            style={{ alignItems: 'center', gap: 48 }}
            className={`flex max-md:flex-col ${isFa ? 'flex-row-reverse' : 'flex-row'}`}
          >
            
            {/* Left Photo Column */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }} className="max-md:w-full">
              <div style={{ 
                width: 250, 
                height: 300, 
                borderRadius: 20, 
                overflow: 'hidden', 
                boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
                border: '1px solid rgba(7, 29, 73, 0.08)'
              }}>
                <AnimatePresence mode="wait">
                  <motion.img 
                    key={activeIndex}
                    src={activeExpert.photo} 
                    alt={isFa ? activeExpert.nameFa : activeExpert.nameEn}
                    initial={{ opacity: 0, scale: 0.98 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.98 }}
                    transition={{ duration: 0.3 }}
                    style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(18px)' }}
                  />
                </AnimatePresence>
              </div>
              {renderSocialIcon(activeExpert)}
            </div>

            {/* Right Text Details Bubble */}
            <div style={{ 
              flex: 1, 
              display: 'flex', 
              flexDirection: 'column', 
              justifyContent: 'center', 
              position: 'relative',
              background: '#eae6e1', // Elegant warm grey-beige bubble background to match the screenshot
              borderRadius: 24,
              padding: '32px 48px',
              borderRight: isFa ? '4px solid #CD9E53' : 'none',
              borderLeft: isFa ? 'none' : '4px solid #CD9E53',
              boxShadow: '0 8px 30px rgba(0, 0, 0, 0.03)',
              minHeight: 300
            }} className="max-md:px-6 max-md:py-8 max-md:mt-8">
              
              {/* Quote Icon at Top-Left */}
              <div style={{ 
                position: 'absolute', 
                top: -28, 
                [isFa ? 'left' : 'right']: 40, 
                color: '#CD9E53', 
                pointerEvents: 'none' 
              }}>
                <Quote size={54} fill="#CD9E53" color="none" />
              </div>
              
              <AnimatePresence mode="wait">
                <motion.div
                  key={activeIndex}
                  initial={{ opacity: 0, x: isFa ? 15 : -15 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: isFa ? -15 : 15 }}
                  transition={{ duration: 0.3 }}
                  style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
                >
                  {/* Name section with both Farsi and English names */}
                  <h2 style={{ fontSize: 26, fontWeight: 900, color: '#032340', margin: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <span>{isFa ? activeExpert.nameFa : activeExpert.nameEn}</span>
                    <span style={{ fontSize: 14, fontWeight: 600, color: 'rgba(3, 35, 64, 0.6)', letterSpacing: '0.5px', marginTop: 4 }}>
                      {isFa ? activeExpert.nameEn : activeExpert.nameFa}
                    </span>
                  </h2>
                  
                  {/* Gold line under names */}
                  <div style={{ width: 60, height: 3, background: '#CD9E53', marginTop: 10, marginBottom: 12 }} />

                  <div style={{ fontSize: 14, fontWeight: 700, color: '#b8893d', textTransform: 'uppercase', letterSpacing: '0.5px', lineHeight: 1.4 }}>
                    {isFa ? activeExpert.roleFa : activeExpert.roleEn}
                  </div>
                  
                  <p style={{ fontSize: 14, fontWeight: 400, color: '#4b5563', lineHeight: 1.8, marginTop: 16, textAlign: 'justify', marginInlineEnd: 12 }}>
                    {isFa ? activeExpert.bioFa : activeExpert.bioEn}
                  </p>
                </motion.div>
              </AnimatePresence>

              {/* Overlapping Stacked Avatars at the bottom right */}
              <div style={{ 
                position: 'absolute', 
                bottom: -24, 
                [isFa ? 'right' : 'left']: 40, 
                display: 'flex', 
                alignItems: 'center',
                flexDirection: isFa ? 'row-reverse' : 'row'
              }} className="max-md:static max-md:mt-8 max-md:justify-center">
                {FEATURED_EXPERTS.map((exp, idx) => {
                  const isActive = idx === activeIndex
                  const isHovered = idx === hoveredAvatarIndex
                  
                  // overlap negative margins (marginRight for RTL, marginLeft for LTR)
                  const overlapStyle = idx > 0 ? { [isFa ? 'marginRight' : 'marginLeft']: -12 } : {}
                  
                  let transformValue = 'scale(1)'
                  if (isActive && isHovered) {
                    transformValue = 'scale(1.22)'
                  } else if (isActive) {
                    transformValue = 'scale(1.18)'
                  } else if (isHovered) {
                    transformValue = 'scale(1.10)'
                  }

                  return (
                    <button
                      key={exp.id}
                      onClick={() => {
                        setActiveIndex(idx)
                        setIsPaused(true)
                      }}
                      onMouseEnter={() => setHoveredAvatarIndex(idx)}
                      onMouseLeave={() => setHoveredAvatarIndex(null)}
                      style={{
                        ...overlapStyle,
                        width: 48,
                        height: 48,
                        borderRadius: '50%',
                        overflow: 'hidden',
                        padding: 0,
                        border: isActive ? '3px solid #CD9E53' : '2px solid #fff',
                        cursor: 'pointer',
                        transform: transformValue,
                        zIndex: isActive ? 10 : 5,
                        transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)',
                        boxShadow: '0 4px 10px rgba(0,0,0,0.12)',
                        outline: 'none',
                        background: '#eae7e2'
                      }}
                    >
                      <img 
                        src={exp.photo} 
                        alt="" 
                        style={{ 
                          width: '100%', 
                          height: '100%', 
                          objectFit: 'cover',
                          filter: 'blur(5px)',
                          transition: 'filter 0.3s ease'
                        }}
                      />
                    </button>
                  )
                })}
              </div>

            </div>

          </div>
        </section>

        {/* ─── Grid Rooms Categories ─── */}
        
        {/* Room 1: Sustainable Development */}
        <section style={{ marginBottom: 64 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '2px solid #032340', marginBottom: 24, paddingBottom: 12 }}>
            <Leaf size={20} color="#CD9E53" />
            <h2 style={{ fontSize: 19, fontWeight: 900, color: '#032340', margin: 0 }}>{t.roomSustainability}</h2>
          </div>
          <div className="grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-2" style={{ gap: 24 }}>
            {ROOM_EXPERTS.sustainability.map((exp, index) => (
              <ExpertCard key={index} name={isFa ? exp.nameFa : exp.nameEn} role={isFa ? exp.roleFa : exp.roleEn} photo={exp.photo} icon={<Leaf size={14} />} />
            ))}
          </div>
        </section>

        {/* Room 2: Steel Industry */}
        <section style={{ marginBottom: 64 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '2px solid #032340', marginBottom: 24, paddingBottom: 12 }}>
            <Globe size={20} color="#CD9E53" />
            <h2 style={{ fontSize: 19, fontWeight: 900, color: '#032340', margin: 0 }}>{t.roomSteel}</h2>
          </div>
          <div className="grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-2" style={{ gap: 24 }}>
            {ROOM_EXPERTS.steel.map((exp, index) => (
              <ExpertCard key={index} name={isFa ? exp.nameFa : exp.nameEn} role={isFa ? exp.roleFa : exp.roleEn} photo={exp.photo} icon={<Globe size={14} />} />
            ))}
          </div>
        </section>

        {/* Room 3: Economics */}
        <section style={{ marginBottom: 64 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '2px solid #032340', marginBottom: 24, paddingBottom: 12 }}>
            <BarChart3 size={20} color="#CD9E53" />
            <h2 style={{ fontSize: 19, fontWeight: 900, color: '#032340', margin: 0 }}>{t.roomEconomics}</h2>
          </div>
          <div className="grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-2" style={{ gap: 24 }}>
            {ROOM_EXPERTS.economics.map((exp, index) => (
              <ExpertCard key={index} name={isFa ? exp.nameFa : exp.nameEn} role={isFa ? exp.roleFa : exp.roleEn} photo={exp.photo} icon={<BarChart3 size={14} />} />
            ))}
          </div>
        </section>

        {/* Room 4: Technology & Innovation */}
        <section>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '2px solid #032340', marginBottom: 24, paddingBottom: 12 }}>
            <Cpu size={20} color="#CD9E53" />
            <h2 style={{ fontSize: 19, fontWeight: 900, color: '#032340', margin: 0 }}>{t.roomTechnology}</h2>
          </div>
          <div className="grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-2" style={{ gap: 24 }}>
            {ROOM_EXPERTS.technology.map((exp, index) => (
              <ExpertCard key={index} name={isFa ? exp.nameFa : exp.nameEn} role={isFa ? exp.roleFa : exp.roleEn} photo={exp.photo} icon={<Cpu size={14} />} />
            ))}
          </div>
        </section>

      </div>
    </div>
  )
}

// --- Card Component ---
function ExpertCard({ name, role, photo, icon }: { name: string; role: string; photo: string; icon: React.ReactNode }) {
  const [hovered, setHovered] = useState(false)

  return (
    <div 
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        borderRadius: 14,
        overflow: 'hidden',
        border: '1px solid rgba(7, 29, 73, 0.07)',
        background: '#fff',
        boxShadow: hovered ? '0 12px 30px rgba(7, 29, 73, 0.08)' : '0 4px 12px rgba(7, 29, 73, 0.02)',
        transition: 'all 0.3s ease',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        display: 'flex',
        flexDirection: 'column'
      }}
    >
      {/* Image with grayscale hover */}
      <div style={{ width: '100%', aspectRatio: '3/4', overflow: 'hidden', position: 'relative', background: '#eae7e2' }}>
        <img 
          src={photo} 
          alt={name} 
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            filter: 'blur(8px)',
            transform: hovered ? 'scale(1.03)' : 'scale(1)',
            transition: 'all 0.4s ease'
          }}
        />
      </div>

      {/* Gold details footer */}
      <div style={{
        background: '#CD9E53',
        padding: '16px 20px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        flex: 1,
        color: '#032340',
        position: 'relative'
      }}>
        <div>
          <h3 style={{ fontSize: 15, fontWeight: 900, margin: 0, lineHeight: 1.3 }}>
            {name}
          </h3>
          <p style={{ fontSize: 11, fontWeight: 600, opacity: 0.8, margin: '6px 0 0', lineHeight: 1.4 }}>
            {role}
          </p>
        </div>
        
        {/* Themed Icon in bottom corner */}
        <div style={{
          position: 'absolute',
          bottom: 12,
          left: 16,
          opacity: 0.6,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          {icon}
        </div>
      </div>
    </div>
  )
}
