import { useState } from 'react'
import { Link } from 'react-router-dom'
import { team } from '@/data/team'

function ProfileCard({ member }: { member: (typeof team)[0] }) {
  const [hovered, setHovered] = useState(false)

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background:    hovered ? 'var(--paper)' : 'transparent',
        border:        '1px solid var(--rule-thin)',
        padding:       '24px 18px 18px',
        display:       'flex',
        flexDirection: 'column',
        alignItems:    'center',
        textAlign:     'center',
        transition:    'background 160ms, transform 160ms',
        transform:     hovered ? 'translateY(-2px)' : 'none',
        cursor:        'pointer',
        position:      'relative',
      }}
    >
      {/* Reports count badge — top-end */}
      <div
        style={{
          position:    'absolute',
          top:         10,
          left:        10,
          background:  'var(--ink)',
          color:       'var(--paper)',
          fontSize:    9,
          fontWeight:  700,
          letterSpacing: '0.5px',
          padding:     '3px 7px',
          fontVariantNumeric: 'tabular-nums',
          display:     'flex',
          alignItems:  'center',
          gap:         3,
        }}
      >
        <span>{member.reportCount.toLocaleString('fa-IR')}</span>
        <span style={{ opacity: 0.55 }}>گزارش</span>
      </div>

      {/* Avatar */}
      <div
        style={{
          width:          72,
          height:         72,
          background:     'var(--ink)',
          color:          'var(--paper)',
          display:        'flex',
          alignItems:     'center',
          justifyContent: 'center',
          fontSize:       26,
          fontWeight:     900,
          borderRadius:   '50%',
          marginBottom:   12,
          border:         '3px solid var(--paper-2)',
          boxShadow:      '0 4px 12px rgba(26,23,18,0.08)',
        }}
      >
        {member.initial}
      </div>

      {/* Name */}
      <h3
        style={{
          fontSize:      14,
          fontWeight:    800,
          color:         'var(--ink)',
          letterSpacing: '-0.2px',
          lineHeight:    1.3,
          marginBottom:  4,
        }}
      >
        {member.name}
      </h3>

      {/* Role */}
      <span
        style={{
          fontSize:      10,
          fontWeight:    700,
          color:         'var(--red)',
          letterSpacing: '1.2px',
          textTransform: 'uppercase',
          marginBottom:  12,
        }}
      >
        {member.role}
      </span>

      {/* Top expertise chip */}
      {member.expertise[0] && (
        <div
          style={{
            fontSize:     10,
            padding:      '3px 9px',
            background:   'var(--paper-2)',
            color:        'var(--ink-3)',
            border:       '1px solid var(--rule-thin)',
            fontWeight:   500,
            marginBottom: 14,
          }}
        >
          {member.expertise[0]}
        </div>
      )}

      {/* Email footer */}
      {member.email && (
        <a
          href={`mailto:${member.email}`}
          onClick={e => e.stopPropagation()}
          style={{
            fontSize:       10,
            color:          'var(--ink-5)',
            textDecoration: 'none',
            fontWeight:     500,
            direction:      'ltr',
            fontFamily:     'ui-monospace, monospace',
            paddingTop:     10,
            borderTop:      '1px solid var(--rule-thin)',
            width:          '100%',
            textAlign:      'center',
          }}
        >
          {member.email}
        </a>
      )}
    </div>
  )
}

export default function TeamSection() {
  return (
    <section style={{ background: 'var(--paper-2)' }}>
      <div className="max-w-6xl mx-auto px-12 py-24 max-md:px-5 max-md:py-16">
        {/* Editorial sub-bar */}
        <div
          style={{
            display:        'flex',
            alignItems:     'center',
            justifyContent: 'space-between',
            borderBottom:   '1px solid var(--rule-thin)',
            paddingBottom:  16,
            marginBottom:   40,
          }}
          className="flex-wrap gap-3"
        >
          <span
            style={{
              fontSize:  12,
              color:     'var(--ink-4)',
              fontStyle: 'italic',
            }}
          >
            هیئت تحریریه و متخصصان راهبردی
          </span>
          <Link
            to="/team"
            style={{
              fontSize:       11,
              fontWeight:     700,
              letterSpacing:  '1px',
              color:          'var(--red)',
              textDecoration: 'none',
            }}
          >
            همه کارشناسان ←
          </Link>
        </div>

        {/* Profile grid — 4 col desktop, 2 col tablet, 1 col mobile */}
        <div
          style={{
            display:             'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap:                 20,
          }}
          className="mq-stack-2 max-lg:grid-cols-2 max-sm:grid-cols-1"
        >
          {team.slice(0, 4).map(member => (
            <ProfileCard key={member.id} member={member} />
          ))}
        </div>
      </div>
    </section>
  )
}
