import { motion } from 'framer-motion'
import WorldMap from '@/components/ui/world-map'
import { useLang } from '@/context/LangContext'

const T = {
  fa: {
    h2a: 'تمام رویدادهای فولادی دنیا', h2b: ' را رصد می‌کنیم',
    sub: 'از بورس دالیان چین تا گمرک بصره عراق، از تصمیمات کمیته فولاد OECD تا ظرفیت‌سازی‌های هند — هر سیگنالی که بر رقابت‌پذیری ایران اثر می‌گذارد، پیش از بقیه به دست شما می‌رسد.',
    stats: [
      { n: '۱۸۰+', label: 'بازار رصد‌شده',  sub: 'در ۵ قاره'           },
      { n: '۷/۲۴',  label: 'پایش لحظه‌ای',   sub: 'قیمت و حجم'          },
      { n: '۴۰+',   label: 'منبع داده',        sub: 'بورس‌ها و گمرک‌ها'  },
      { n: '۱۵',    label: 'کشور رقیب',        sub: 'زیر ذره‌بین'         },
    ],
  },
  en: {
    h2a: 'Every Global Steel Event,', h2b: ' Monitored',
    sub: "From the Dalian Commodity Exchange to the Basra customs gate, from OECD Steel Committee decisions to India's capacity build-up — every signal affecting Iran's competitiveness reaches you first.",
    stats: [
      { n: '180+', label: 'Markets Tracked', sub: 'Across 5 continents' },
      { n: '24/7', label: 'Live Monitoring', sub: 'Price & volume'       },
      { n: '40+',  label: 'Data Sources',    sub: 'Exchanges & customs'  },
      { n: '15',   label: 'Rival Countries', sub: 'Under the lens'       },
    ],
  },
}

/* ─── Steel trade routes ─────────────────────────────────────────────
   Arcs show geopolitically relevant steel flows affecting Iran's market
──────────────────────────────────────────────────────────────────── */
const ROUTES = [
  // ── Iran's trade flows (2 routes) ───────────────────────────────
  // Iran → Iraq  (main export market)
  { start: { lat: 35.69, lng: 51.39 }, end: { lat: 33.31, lng: 44.36 } },
  // Iran → Central Asia  (Uzbekistan)
  { start: { lat: 35.69, lng: 51.39 }, end: { lat: 41.30, lng: 69.24 } },

  // ── China's global reach (3 routes) ─────────────────────────────
  // Shanghai → Rotterdam  (European market dumping)
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 51.92, lng: 4.47 } },
  // Shanghai → Lagos  (China–Africa infrastructure push)
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 6.45, lng: 3.39 } },
  // Shanghai → Singapore  (SE Asia dominance)
  { start: { lat: 31.23, lng: 121.47 }, end: { lat: 1.35, lng: 103.82 } },

  // ── Russia flows (2 routes) ──────────────────────────────────────
  // Moscow → Beijing  (raw material / billet supply)
  { start: { lat: 55.75, lng: 37.62 }, end: { lat: 39.91, lng: 116.39 } },
  // Moscow → Tehran  (billet supply to Iran)
  { start: { lat: 55.75, lng: 37.62 }, end: { lat: 35.69, lng: 51.39 } },

  // ── India's competing routes (2 routes) ──────────────────────────
  // Mumbai → Dubai  (competing with Iran in Gulf)
  { start: { lat: 19.07, lng: 72.88 }, end: { lat: 25.20, lng: 55.27 } },
  // Mumbai → Mombasa  (East Africa — directly competes with Iran)
  { start: { lat: 19.07, lng: 72.88 }, end: { lat: -4.05, lng: 39.67 } },

  // ── Americas → Asia (iron ore flows) ────────────────────────────
  // São Paulo → Shanghai  (Brazilian iron ore)
  { start: { lat: -23.55, lng: -46.63 }, end: { lat: 31.23, lng: 121.47 } },

  // ── South Korea → SE Asia ───────────────────────────────────────
  { start: { lat: 37.56, lng: 126.97 }, end: { lat: 1.35, lng: 103.82 } },

  // ── Turkey → Europe ──────────────────────────────────────────────
  // Istanbul → Berlin  (Turkey as EU steel supplier)
  { start: { lat: 41.01, lng: 28.97 }, end: { lat: 52.52, lng: 13.40 } },

  // ── Australia → China (iron ore) ────────────────────────────────
  { start: { lat: -33.87, lng: 151.21 }, end: { lat: 31.23, lng: 121.47 } },
]

/* ─── Section ────────────────────────────────────────── */
export default function GlobalScannerSection() {
  const { lang } = useLang()
  const t = T[lang]
  return (
    <section
      style={{
        background: 'var(--paper)',
        overflow:   'hidden',
      }}
    >
      <div className="max-w-7xl mx-auto w-full px-12 max-md:px-5 pb-12">
        {/* ── Text header ────────────────────────────────── */}
        <div
          style={{ textAlign: 'center', paddingTop: 72, paddingBottom: 48 }}
        >
          {/* Headline */}
          <h2 style={{
            fontSize:      'clamp(22px, 2.5vw, 32px)',
            fontWeight:    900,
            lineHeight:    1.1,
            letterSpacing: '-1.5px',
            color:         'var(--ink)',
            marginBottom:  16,
          }}>
            {t.h2a}{' '}
            <motion.span
              style={{ color: 'var(--ink-6)', display: 'inline' }}
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.3 }}
            >
              {t.h2b}
            </motion.span>
          </h2>

          {/* Subhead */}
          <p style={{
            fontSize:   15,
            lineHeight: 1.85,
            fontWeight: 400,
            color:      'var(--ink-3)',
            maxWidth:   600,
            margin:     '0 auto',
          }}>
            {t.sub}
          </p>
        </div>

        {/* ── World map (full width within container) ─── */}
        <div className="max-md:px-0">
          <WorldMap
            dots={ROUTES}
            lineColor="#9b1c1c"
            dotColor="#c8c2bc"
          />
        </div>

        {/* ── Stats strip ──────────────────────────────── */}
        <div
          style={{
            borderTop:   '1px solid var(--rule-thin)',
            marginTop:   48,
          }}
          className="grid grid-cols-4 max-md:grid-cols-2 max-sm:grid-cols-1"
        >
          {t.stats.map((s, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.08 }}
              style={{
                padding:     '28px 24px',
                textAlign:   'center',
              }}
              className="border-r border-[var(--rule-thin)] first:border-r-0 max-md:border-r-0 max-md:border-b max-md:border-[var(--rule-thin)] max-md:nth-child(even):border-r max-md:nth-child(even):border-[var(--rule-thin)] max-sm:border-r-0 max-sm:border-b max-sm:last:border-b-0 max-md:nth-child(3):border-b-0 max-md:nth-child(4):border-b-0"
            >
              <div style={{
                fontSize:      32,
                fontWeight:    900,
                color:         'var(--ink)',
                lineHeight:    1,
                marginBottom:  4,
              }}>
                {s.n}
              </div>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-2)', marginBottom: 2 }}>
                {s.label}
              </div>
              <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>
                {s.sub}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}
