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: '#' },
]

function NewsletterBox() {
  const [email, setEmail] = useState('')
  const [done, setDone] = useState(false)
  return (
    <div style={{ marginTop: 20 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}>
        خبرنامه فولاد
      </div>
      <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', maxWidth: '100%' }}>
        <input
          type="email" value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="ایمیل خود را وارد کنید..."
          disabled={done}
          style={{
            flex: 1, border: 'none', padding: '9px 12px', fontSize: 12,
            fontFamily: 'inherit', background: 'rgba(255,255,255,0.07)',
            color: '#fff', outline: 'none', direction: 'rtl',
          }}
        />
        <button
          onClick={() => { if (email) setDone(true) }}
          disabled={done}
          style={{
            background: done ? 'rgba(255,255,255,0.15)' : '#00AEEF',
            color: '#fff', border: 'none', padding: '9px 14px',
            fontSize: 11, fontWeight: 700, fontFamily: 'inherit',
            cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
          }}
        >
          {done ? '✓ ثبت شد' : 'عضویت'}
        </button>
      </div>
    </div>
  )
}

export function Footer() {
  return (
    <footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
      <div style={{ padding: '56px 0 48px' }} className="max-w-7xl mx-auto w-full px-6 max-md:px-5">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-start' }} className="max-md:grid-cols-1 max-md:gap-10">

          {/* Brand */}
          <div style={{ minWidth: 0 }}>
            <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', wordBreak: 'break-all' }}>
              FUTURE STEEL POLICY INSTITUTE
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <SocialIcon label="in" />
              <SocialIcon label="tg" />
              <SocialIcon label="tw" />
              <SocialIcon label="@" />
            </div>
          </div>

          {/* Links + newsletter */}
          <nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {FOOTER_LINKS.map(link => (
              <FooterLink key={link.label} href={link.href} label={link.label} />
            ))}
            <NewsletterBox />
          </nav>
        </div>
      </div>

      <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>
  )
}
