import { Marquee } from '@/components/ui/marquee'

interface Partner {
  short:  string
  name:   string
  sector: string
}

const partners: Partner[] = [
  { short: 'MSC', name: 'فولاد مبارکه اصفهان',     sector: 'تولید · اصفهان'   },
  { short: 'KSC', name: 'فولاد خوزستان',           sector: 'تولید · اهواز'    },
  { short: 'ESC', name: 'ذوب آهن اصفهان',          sector: 'تولید · اصفهان'   },
  { short: 'HSC', name: 'فولاد هرمزگان',           sector: 'تولید · بندرعباس' },
  { short: 'KJK', name: 'فولاد کاوه جنوب کیش',     sector: 'تولید · کیش'      },
  { short: 'CMG', name: 'چادرملو',                  sector: 'معدن · یزد'       },
  { short: 'GEG', name: 'گل گهر سیرجان',           sector: 'معدن · سیرجان'    },
  { short: 'IMD', name: 'ایمیدرو',                  sector: 'هلدینگ دولتی'    },
  { short: 'MIM', name: 'وزارت صمت',                sector: 'سیاست‌گذاری'      },
  { short: 'ICC', name: 'اتاق بازرگانی ایران',     sector: 'بخش خصوصی'       },
  { short: 'BIM', name: 'بانک صنعت و معدن',        sector: 'تأمین مالی'      },
  { short: 'NDF', name: 'صندوق توسعه ملی',         sector: 'سرمایه‌گذاری'     },
]

const half = Math.ceil(partners.length / 2)
const rowA = partners.slice(0, half)
const rowB = partners.slice(half)

function PartnerCard({ p }: { p: Partner }) {
  return (
    <div
      style={{
        width:         260,
        flexShrink:    0,
        background:    'var(--paper)',
        border:        '1px solid var(--rule-thin)',
        padding:       '18px 20px',
        display:       'flex',
        alignItems:    'center',
        gap:           14,
        direction:     'rtl',
        fontFamily:    'Vazir, sans-serif',
        transition:    'border-color 160ms, background 160ms',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = 'var(--ink)'
        e.currentTarget.style.background  = 'var(--paper-2)'
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = 'var(--rule-thin)'
        e.currentTarget.style.background  = 'var(--paper)'
      }}
    >
      <div
        style={{
          width:          44,
          height:         44,
          background:     'var(--ink)',
          color:          'var(--paper)',
          display:        'flex',
          alignItems:     'center',
          justifyContent: 'center',
          fontSize:       12,
          fontWeight:     900,
          letterSpacing:  '0.5px',
          direction:      'ltr',
          fontFamily:     'ui-monospace, monospace',
          flexShrink:     0,
          borderTop:      '2px solid var(--red)',
        }}
      >
        {p.short}
      </div>

      <div style={{ minWidth: 0, flex: 1 }}>
        <div
          style={{
            fontSize:      13,
            fontWeight:    800,
            color:         'var(--ink)',
            letterSpacing: '-0.2px',
            lineHeight:    1.3,
            marginBottom:  3,
            whiteSpace:    'nowrap',
            overflow:      'hidden',
            textOverflow:  'ellipsis',
          }}
        >
          {p.name}
        </div>
        <div
          style={{
            fontSize:   10,
            color:      'var(--ink-5)',
            fontWeight: 500,
            letterSpacing: '0.3px',
            whiteSpace: 'nowrap',
            overflow:   'hidden',
            textOverflow: 'ellipsis',
          }}
        >
          {p.sector}
        </div>
      </div>
    </div>
  )
}

export default function PartnersSection() {
  return (
    <section
      style={{
        background:   'var(--paper-2)',
        borderBottom: '2px solid var(--ink)',
        position:     'relative',
        overflow:     'hidden',
      }}
    >
      <div className="max-w-7xl mx-auto px-12 pt-24 pb-20 max-md:px-5 max-md:pt-16 max-md:pb-14">
        <div
          style={{
            display:        'grid',
            gridTemplateColumns: '1fr auto',
            alignItems:     'end',
            gap:            32,
            paddingBottom:  28,
            borderBottom:   '1px solid var(--rule-thin)',
            marginBottom:   48,
          }}
          className="mq-stack max-md:grid-cols-1 max-md:gap-4"
        >
          <div>
            <div
              style={{
                display:    'flex',
                alignItems: 'center',
                gap:        12,
                marginBottom: 18,
              }}
            >
              <div style={{ width: 32, height: 2, background: 'var(--red)' }} />
              <span
                style={{
                  fontSize:      11,
                  fontWeight:    700,
                  letterSpacing: '3px',
                  textTransform: 'uppercase',
                  color:         'var(--ink-4)',
                }}
              >
                همراهان و مشتریان
              </span>
            </div>
            <h2
              style={{
                fontSize:      'clamp(28px, 3.6vw, 48px)',
                fontWeight:    900,
                letterSpacing: '-1.2px',
                color:         'var(--ink)',
                lineHeight:    1.1,
                marginBottom:  12,
              }}
            >
              کسانی که با ما کار می‌کنند
            </h2>
            <p
              style={{
                fontSize:   14,
                lineHeight: 1.7,
                color:      'var(--ink-4)',
                maxWidth:   560,
              }}
            >
              تولیدکنندگان فولاد، شرکت‌های معدنی، نهادهای سیاست‌گذار و
              مؤسسات مالی که از گزارش‌های راهبردی ما استفاده می‌کنند.
            </p>
          </div>

          <span
            style={{
              fontSize:      11,
              fontWeight:    700,
              letterSpacing: '2px',
              color:         'var(--ink-5)',
              fontFamily:    'ui-monospace, monospace',
              direction:     'ltr',
              whiteSpace:    'nowrap',
              paddingBottom: 4,
            }}
            className="max-md:hidden"
          >
            {partners.length.toLocaleString('fa-IR')} · NETWORK
          </span>
        </div>

        <div
          style={{
            position: 'relative',
            padding:  '8px 0',
          }}
        >
          <Marquee
            pauseOnHover
            className="py-2"
            style={{ ['--duration' as never]: '38s' }}
          >
            {rowA.map((p) => (
              <PartnerCard key={p.short} p={p} />
            ))}
          </Marquee>

          <Marquee
            reverse
            pauseOnHover
            className="py-2 mt-3"
            style={{ ['--duration' as never]: '46s' }}
          >
            {rowB.map((p) => (
              <PartnerCard key={p.short} p={p} />
            ))}
          </Marquee>

          <div
            aria-hidden="true"
            style={{
              position:    'absolute',
              top:         0,
              bottom:      0,
              right:       0,
              width:       '18%',
              background:  'linear-gradient(to left, var(--paper-2), transparent)',
              pointerEvents: 'none',
            }}
          />
          <div
            aria-hidden="true"
            style={{
              position:    'absolute',
              top:         0,
              bottom:      0,
              left:        0,
              width:       '18%',
              background:  'linear-gradient(to right, var(--paper-2), transparent)',
              pointerEvents: 'none',
            }}
          />
        </div>
      </div>
    </section>
  )
}