import { useState, useEffect } from 'react'
import Globe from '@/components/ui/globe'
import StrategicEvents from '@/components/ui/StrategicEvents'
import { useLang } from '@/context/LangContext'

export default function MapEventsSection() {
  const { lang } = useLang()
  const [globeSize, setGlobeSize] = useState(420)

  useEffect(() => {
    const update = () => {
      const w = window.innerWidth
      setGlobeSize(w < 768 ? Math.min(w - 32, 255) : 420)
    }
    update()
    window.addEventListener('resize', update)
    return () => window.removeEventListener('resize', update)
  }, [])

  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: 270 }} className="max-md:flex-col">

        {/* ── Strategic events — RIGHT in RTL — wider so titles fit on one line ── */}
        <div style={{ flex: '7 7 0', minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '18px 24px' }} className="max-md:!px-5">
          <StrategicEvents />
        </div>

        {/* ── Globe — LEFT, no text — nudged a bit further left ── */}
        <div style={{ flex: '5 5 0', minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 16px', transform: 'translateX(-30px)' }} className="max-md:!transform-none">
          <Globe size={globeSize} />
        </div>

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