import Globe from '@/components/ui/globe'
import StrategicEvents from '@/components/ui/StrategicEvents'
import { useLang } from '@/context/LangContext'

export default function MapEventsSection() {
  const { lang } = useLang()

  return (
    <section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', borderBottom: '1px solid var(--rule-thin)', overflow: 'hidden' }}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">
      <div style={{ display: 'flex', alignItems: 'stretch', minHeight: 360 }} className="max-md:flex-col">

        {/* ── Strategic events — RIGHT in RTL ── */}
        <div style={{ flex: '4 4 0', minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '24px 24px' }} className="max-md:!px-5">
          <StrategicEvents />
        </div>

        {/* ── Globe — LEFT, no text ── */}
        <div style={{ flex: '6 6 0', minWidth: 0, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 16px' }}>
          <Globe size={560} />
        </div>

      </div>
      </div>
    </section>
  )
}