import { Link } from 'react-router-dom'
import { Telescope, Scale, Database, Users, Lightbulb, Network, type LucideIcon } from 'lucide-react'
import { useLang } from '@/context/LangContext'
import { RadarCard } from '@/pages/Radar/Radar'
import { RADAR_FUTURE_ITEMS as RADAR_ITEMS } from '@/content/radarFuture'

type Area = { Icon: LucideIcon; color: string; title: string; desc: string }
const RESEARCH_AREAS: Record<'fa' | 'en', Area[]> = {
  fa: [
    { Icon: Database,  color: '#2471a3', title: 'تحلیل داده‌محور',      desc: 'استفاده از داده‌های بازار، اقتصاد، فناوری و زنجیره ارزش فولاد برای استخراج بینش‌های قابل اتکا.' },
    { Icon: Network,   color: '#7d3c98', title: 'نگاه نظام‌مند',         desc: 'تحلیل صنعت فولاد در تعامل با اقتصاد، انرژی، فناوری، محیط زیست و سیاست‌های جهانی.' },
    { Icon: Users,     color: '#16a085', title: 'هم‌اندیشی خبرگان',      desc: 'بهره‌گیری مستمر از شبکه‌ای از خبرگان صنعت، دانشگاه و فناوری.' },
    { Icon: Telescope, color: '#CD9E53', title: 'آینده‌نگاری علمی',      desc: 'تحلیل روندها، شناسایی عدم‌قطعیت‌ها و طراحی سناریوها.' },
    { Icon: Lightbulb, color: '#c0392b', title: 'از تحلیل تا اقدام',    desc: 'تبدیل تحلیل‌ها به توصیه‌ها و تجویزهای استراتژیک.' },
    { Icon: Scale,     color: '#1e8449', title: 'بی‌طرفی و استقلال',     desc: 'اندیشه‌های مستقل و متکی بر شواهد، داده‌ها و نگاه بلندمدت.' },
  ],
  en: [
    { Icon: Database,  color: '#2471a3', title: 'Data-Driven Analysis',   desc: 'Using market, economic, technology and value-chain data to extract reliable insights.' },
    { Icon: Network,   color: '#7d3c98', title: 'Systemic Thinking',      desc: 'Analysing the steel industry in its interaction with economy, energy, technology, environment and global policy.' },
    { Icon: Users,     color: '#16a085', title: 'Expert Collaboration',   desc: 'Continuous engagement with a network of industry, academic and technology experts.' },
    { Icon: Telescope, color: '#CD9E53', title: 'Scientific Foresight',   desc: 'Trend analysis, uncertainty identification and scenario design.' },
    { Icon: Lightbulb, color: '#c0392b', title: 'From Analysis to Action',desc: 'Turning analyses into actionable strategic recommendations.' },
    { Icon: Scale,     color: '#1e8449', title: 'Independence & Neutrality', desc: 'Evidence-based, data-driven thinking with a long-term perspective.' },
  ],
}

const T = {
  fa: {
    radarOverline: 'FUTURE RADAR', radarHeading: 'رادار آینده',
    radarSub: 'تحلیل چندوجهی آینده صنعت فولاد',
    radarAll: 'همه سیگنال‌ها ←',
    areasOverline: 'OUR FRAMEWORK', areasHeading: 'چارچوب اندیشه ما',
    areasSub: 'ترکیب داده، تحلیل، آینده‌نگاری و خرد جمعی برای فهم تحولات صنعت فولاد.',
  },
  en: {
    radarOverline: 'FUTURE RADAR', radarHeading: 'Future Radar',
    radarSub: 'Multi-dimensional analysis of the steel industry\'s future',
    radarAll: 'All Signals →',
    areasOverline: 'OUR FRAMEWORK', areasHeading: 'Our Thinking Framework',
    areasSub: 'Combining data, analysis, foresight and collective wisdom to understand steel industry transformations.',
  },
}

export default function RadarTechSection({ only }: { only?: 'radar' | 'approach' }) {
  const { lang } = useLang()
  const t = T[lang]
  const showRadar = only !== 'approach'
  const showApproach = only !== 'radar'
  return (
    <section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: only === 'approach' ? 'var(--paper-2)' : '#fff' }}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">

        {/* ══ رادار آینده ══ */}
        {showRadar && (
        <div style={{ paddingTop: 64, paddingBottom: 56 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.radarOverline}</div>
              <h2 style={{ fontSize: 'clamp(22px,2.5vw,32px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', marginBottom: 6 }}>{t.radarHeading}</h2>
              <p style={{ fontSize: 13, color: 'var(--ink-4)' }}>{t.radarSub}</p>
            </div>
            <Link to="/radar" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{t.radarAll}</Link>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }} className="max-lg:!grid-cols-2 max-sm:!grid-cols-1">
            {RADAR_ITEMS.slice(0, 4).map((item) => (
              <RadarCard key={item.id} item={item} lang={lang} />
            ))}
          </div>
        </div>
        )}

        {/* divider — only when both halves render together */}
        {showRadar && showApproach && <div style={{ height: 1, background: 'var(--rule-thin)' }} />}

        {/* ══ حوزه‌های پژوهشی ══ */}
        {showApproach && (
        <div style={{ paddingTop: 56, paddingBottom: 64 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.areasOverline}</div>
              <h2 style={{ fontSize: 'clamp(22px,2.5vw,32px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', marginBottom: 6 }}>{t.areasHeading}</h2>
              <p style={{ fontSize: 13, color: 'var(--ink-4)' }}>{t.areasSub}</p>
            </div>
          </div>

          <div className="grid grid-cols-3 max-md:grid-cols-1 max-lg:grid-cols-2" style={{ gap: 16 }}>
            {RESEARCH_AREAS[lang].map((a, i) => {
              const Icon = a.Icon
              return (
                <div
                  key={i}
                  style={{
                    background: '#fff', borderRadius: 16, padding: '20px 18px',
                    boxShadow: '0 2px 12px rgba(0,0,0,0.06)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
                    border: '1px solid var(--rule-thin)', transition: 'transform 0.2s, box-shadow 0.2s', textAlign: 'center',
                  }}
                  onMouseEnter={e => { const d = e.currentTarget as HTMLElement; d.style.transform = 'translateY(-4px)'; d.style.boxShadow = '0 14px 34px -18px rgba(7,29,73,0.25)' }}
                  onMouseLeave={e => { const d = e.currentTarget as HTMLElement; d.style.transform = 'translateY(0)'; d.style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)' }}
                >
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                    background: `${a.color}15`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon size={22} color={a.color} strokeWidth={2} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 14, fontWeight: 900, color: 'var(--ink)', lineHeight: 1.4, margin: '0 0 6px' }}>{a.title}</h3>
                    <p style={{ fontSize: 12, color: 'var(--ink-4)', lineHeight: 1.7, margin: 0 }}>{a.desc}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        )}

      </div>
    </section>
  )
}
