import { useState } from 'react'
import { Send, Share2, AtSign, MessageCircle, MapPin, Phone, Mail, ChevronsUp } from 'lucide-react'

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

/* curved top edge with a centered scroll-to-top button (matches the Figma) */
function FooterCurve() {
  return (
    <div style={{ position: 'relative', height: 64, lineHeight: 0, background: 'var(--paper)' }}>
      <svg viewBox="0 0 1440 64" preserveAspectRatio="none" width="100%" height="64" style={{ display: 'block' }}>
        {/* white (page) above, navy below, with a smooth dip on the LEFT side */}
        <path
          d="M0,0 L132,0 C192,0 206,52 240,52 C274,52 288,0 348,0 L1440,0 L1440,64 L0,64 Z"
          fill="#071d49"
        />
      </svg>
      {/* scroll-to-top button sitting in the dip (left side) */}
      <button
        onClick={scrollToTop}
        aria-label="بازگشت به بالا"
        style={{
          position: 'absolute', top: 8, left: '16.7%', transform: 'translateX(-50%)',
          width: 40, height: 40, borderRadius: '50%', cursor: 'pointer',
          background: '#071d49', border: '2px solid rgba(255,255,255,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform 180ms, background 180ms',
        }}
        onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%) translateY(-3px)'; (e.currentTarget as HTMLElement).style.background = '#c9a227' }}
        onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateX(-50%)'; (e.currentTarget as HTMLElement).style.background = '#071d49' }}
      >
        <ChevronsUp size={20} color="#fff" strokeWidth={2.5} />
      </button>
    </div>
  )
}

const NAVY = '#071d49'
const GOLD = '#c9a227'

/* round social buttons (gold filled, like the screenshot) */
const SOCIALS = [
  { Icon: Send,          name: 'تلگرام',  href: '#' },
  { Icon: Share2,        name: 'لینکدین', href: '#' },
  { Icon: AtSign,        name: 'توییتر',  href: '#' },
  { Icon: MessageCircle, name: 'آپارات',  href: '#' },
]

function SocialIcon({ Icon, name, href }: { Icon: typeof Send; name: string; href: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <a
      href={href} target="_blank" rel="noopener noreferrer" aria-label={name} title={name}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{
        width: 42, height: 42, borderRadius: '50%', flexShrink: 0,
        background: GOLD, color: NAVY, display: 'flex', alignItems: 'center', justifyContent: 'center',
        textDecoration: 'none', cursor: 'pointer', transition: 'transform 150ms, opacity 150ms',
        transform: hovered ? 'translateY(-3px)' : 'none', opacity: hovered ? 0.9 : 1,
      }}
    >
      <Icon size={19} strokeWidth={2} />
    </a>
  )
}

/* center nav — the navbar items */
const NAV_LINKS = [
  { label: 'رادار آینده',   href: '/radar' },
  { label: 'آمار و داده',   href: '#' },
  { label: 'چندرسانه‌ای',   href: '#' },
  { label: 'در یک نگاه',    href: '/at-a-glance' },
  { label: 'شبکه خبرگان',   href: '#' },
  { label: 'درباره ما',     href: '#' },
]

function NavItem({ href, label }: { href: string; label: string }) {
  const [hovered, setHovered] = useState(false)
  return (
    <a href={href}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0',
        fontSize: 13.5, color: hovered ? '#fff' : 'rgba(255,255,255,0.6)',
        textDecoration: 'none', transition: 'color 150ms', flexDirection: 'row-reverse', justifyContent: 'flex-end',
      }}
    >
      {label}
      <span style={{ width: 4, height: 4, borderRadius: '50%', background: GOLD, flexShrink: 0 }} />
    </a>
  )
}

/* contact rows */
const CONTACT = [
  { Icon: MapPin, label: 'نشانی:', value: 'اصفهان، خیابان سعادت‌آباد' },
  { Icon: Phone,  label: 'شماره تماس:', value: '۰۳۱ - ۳۸۸۸۴۵۳۹', ltr: true },
  { Icon: Mail,   label: 'پست الکترونیک:', value: 'info@steelfutures.com', ltr: true, accent: true },
]

function NewsletterBox() {
  const [email, setEmail] = useState('')
  const [done, setDone] = useState(false)
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 12 }}>عضویت در خبرنامه اندیشکده</div>
      <div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 8, overflow: 'hidden', background: 'rgba(255,255,255,0.05)' }}>
        <input
          type="email" value={email} onChange={e => setEmail(e.target.value)}
          placeholder="ایمیل خود را وارد کنید..." disabled={done}
          style={{
            flex: 1, border: 'none', padding: '11px 14px', fontSize: 13, fontFamily: 'inherit',
            background: 'transparent', color: '#fff', outline: 'none', direction: 'rtl', minWidth: 0,
          }}
        />
        <button
          onClick={() => { if (email) setDone(true) }} disabled={done}
          style={{
            background: GOLD, color: NAVY, border: 'none', padding: '11px 22px',
            fontSize: 12, fontWeight: 800, fontFamily: 'inherit', cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
          }}
        >
          {done ? '✓ ثبت شد' : 'ثبت'}
        </button>
      </div>
    </div>
  )
}

export function Footer() {
  return (
    <footer dir="rtl" style={{ color: 'rgba(255,255,255,0.6)' }}>
      <FooterCurve />
      <div style={{ backgroundColor: NAVY, maxWidth: '100%' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px 48px' }} className="max-md:!px-6 max-md:!py-10">

        <div className="grid grid-cols-[1.3fr_0.8fr_1.2fr] max-lg:grid-cols-2 max-md:grid-cols-1 gap-12 max-md:gap-10">

          {/* ── BRAND (right side in RTL) ── */}
          <div style={{ textAlign: 'center' }}>
            <img src="/logo%20white.png" alt="اندیشکده فولاد آینده" style={{ height: 96, width: 'auto', display: 'block', margin: '0 auto 14px' }} />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 4 }}>
              <span style={{ height: 2, width: 28, background: 'linear-gradient(to left, #3b82f6, transparent)', borderRadius: 2 }} />
              <span style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.3, whiteSpace: 'nowrap' }}>اندیشکده فولاد آینده</span>
              <span style={{ height: 2, width: 28, background: 'linear-gradient(to right, #3b82f6, transparent)', borderRadius: 2 }} />
            </div>
            <div style={{ fontSize: 10, letterSpacing: 2, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', marginBottom: 18 }}>The Steel Futures Institute</div>

            <p style={{
              fontSize: 13, lineHeight: 2, color: 'rgba(255,255,255,0.62)',
              border: '1px solid rgba(255,255,255,0.15)', borderRadius: 14, padding: '16px 18px', margin: '0 0 26px',
            }}>
              فضایی همدلانه برای اندیشیدن به فردای صنعت؛ جایی که دانش، آینده‌پژوهی و نوآوری به بینش‌هایی برای توسعه صنعتی تبدیل می‌شوند.
            </p>

            <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14 }}>ما را در شبکه‌های اجتماعی دنبال کنید.</div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              {SOCIALS.map((s) => (
                <SocialIcon key={s.name} Icon={s.Icon} name={s.name} href={s.href} />
              ))}
            </div>
          </div>

          {/* ── NAV (center) ── */}
          <nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column' }}>
            {NAV_LINKS.map((l) => (
              <NavItem key={l.label} href={l.href} label={l.label} />
            ))}
          </nav>

          {/* ── CONTACT + badges + newsletter (left side in RTL) ── */}
          <div>
            <div style={{ fontSize: 14, fontWeight: 800, color: '#fff', marginBottom: 18 }}>اطلاعات تماس</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 26 }}>
              {CONTACT.map((c) => (
                <div key={c.label} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
                  <c.Icon size={15} color={GOLD} style={{ flexShrink: 0 }} />
                  <span style={{ color: 'rgba(255,255,255,0.45)' }}>{c.label}</span>
                  <span style={{ color: c.accent ? GOLD : 'rgba(255,255,255,0.75)', direction: c.ltr ? 'ltr' : 'rtl' }}>{c.value}</span>
                </div>
              ))}
            </div>

            {/* certification badges (placeholders — swap for real images) */}
            <div style={{ display: 'flex', gap: 12, marginBottom: 26 }}>
              {[0, 1, 2].map((i) => (
                <div key={i} style={{ width: 66, height: 66, borderRadius: 10, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ fontSize: 9, color: 'rgba(7,29,73,0.4)', fontWeight: 700 }}>نشان</span>
                </div>
              ))}
            </div>

            <NewsletterBox />
          </div>
        </div>
      </div>
      </div>

      {/* copyright bar */}
      <div style={{ background: GOLD, color: NAVY }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', fontSize: 12, fontWeight: 700 }}
             className="max-md:!px-6 max-md:!justify-center max-md:!text-center">
          <span>تمامی حقوق مادی و معنوی این وب‌سایت برای شرکت فولاد مبارکه اصفهان محفوظ می‌باشد.</span>
          <span style={{ opacity: 0.8 }}>طراحی شده توسط شرکت دانش‌بنیان نواندیشان آتی نگار فرتاک</span>
        </div>
      </div>
    </footer>
  )
}