import { useState } from 'react'

function SocialIcon({ label }: { label: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <div
      role="button"
      tabIndex={0}
      aria-label={label}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        width: 28, height: 28,
        border: `1px solid ${hovered ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.12)'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10, fontWeight: 700,
        color: hovered ? '#fff' : 'rgba(255,255,255,0.4)',
        cursor: 'pointer',
        transition: 'border-color 150ms, color 150ms',
        flexShrink: 0,
      }}
    >
      {label}
    </div>
  )
}

function FooterLink({ href, label }: { href: string; label: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <a
      href={href}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        fontSize: 13,
        color: hovered ? '#fff' : 'rgba(255,255,255,0.55)',
        textDecoration: 'none',
        cursor: 'pointer',
        transition: 'color 150ms',
        display: 'inline-block',
        lineHeight: 1.4,
        whiteSpace: 'nowrap',
      }}
    >
      {label}
    </a>
  )
}

const FOOTER_LINKS = [
  { label: 'توضیح اندیشکده', href: '#' },
  { label: 'درباره ما',       href: '#' },
  { label: 'همکاری با ما',   href: '#' },
  { label: 'تماس با ما',     href: '#' },
]

export function Footer() {
  return (
    <footer
      dir="rtl"
      style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}
    >
      {/* TOP SECTION */}
      <div style={{ padding: '56px 0 48px' }} className="max-w-7xl mx-auto w-full px-12 max-md:px-5">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 40 }}>

          {/* Brand + description */}
          <div style={{ maxWidth: 360 }}>
            <div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.2, marginBottom: 4 }}>
              اندیشکده فولاد آینده
            </div>
            <div style={{ fontSize: 10, letterSpacing: 3, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20, direction: 'ltr', textAlign: 'right' }}>
              FUTURE STEEL POLICY INSTITUTE
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.8, color: 'rgba(255,255,255,0.5)', marginBottom: 24 }}>
              مرکز مستقل تحلیل راهبردی و سیاست‌گذاری صنعت فولاد و فلزات کشور — زیر نظر شرکت فولاد مبارکه
            </p>
            <div style={{ display: 'flex', gap: 6 }}>
              <SocialIcon label="in" />
              <SocialIcon label="tg" />
              <SocialIcon label="tw" />
              <SocialIcon label="@" />
            </div>
          </div>

          {/* 4 links */}
          <nav aria-label="پیوندهای پایین" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
            {FOOTER_LINKS.map(link => (
              <FooterLink key={link.label} href={link.href} label={link.label} />
            ))}
          </nav>
        </div>
      </div>

      {/* BOTTOM ROW */}
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div
          style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }}
          className="max-w-7xl mx-auto w-full px-12 max-md:px-5"
        >
          <div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div>
          <div style={{ color: 'rgba(255,255,255,0.55)', marginTop: 6, fontSize: 12 }}>
            با افتخار قدرت گرفته از دیدوان؛ چشم همیشه باز مدیران
          </div>
        </div>
      </div>
    </footer>
  )
}