import { useState } from 'react'
import { motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'

const PLANS = {
  fa: [
    {
      id: 'basic', highlight: false,
      title: 'پایه', subtitle: 'دسترسی به گزارش‌های عمومی',
      price: '۲,۵۰۰,۰۰۰', period: 'تومان / سال',
      features: ['دسترسی به گزارش‌های رایگان', 'خبرنامه ماهانه', 'دعوت به رویدادهای عمومی'],
      cta: 'شروع رایگان', selected: '✓ انتخاب شد', recommended: 'پیشنهادی',
    },
    {
      id: 'pro', highlight: true,
      title: 'سازمانی', subtitle: 'مناسب شرکت‌های فولادی',
      price: '۱۸,۰۰۰,۰۰۰', period: 'تومان / سال',
      features: ['دسترسی کامل به نبض صنعت', 'تمام گزارش‌های تحلیلی', 'Flash Reports هفتگی', 'پشتیبانی اختصاصی', 'تا ۵ کاربر'],
      cta: 'شروع عضویت', selected: '✓ انتخاب شد', recommended: 'پیشنهادی',
    },
    {
      id: 'enterprise', highlight: false,
      title: 'ویژه', subtitle: 'برای سازمان‌های بزرگ',
      price: 'تماس بگیرید', period: '',
      features: ['همه امکانات سازمانی', 'کاربران نامحدود', 'API داده', 'گزارش‌های سفارشی', 'نشست‌های تحلیلی اختصاصی'],
      cta: 'تماس با ما', selected: '✓ انتخاب شد', recommended: 'پیشنهادی',
    },
  ],
  en: [
    {
      id: 'basic', highlight: false,
      title: 'Basic', subtitle: 'Access to public reports',
      price: '2,500,000', period: 'IRR / year',
      features: ['Access to free reports', 'Monthly newsletter', 'Invitation to public events'],
      cta: 'Get Started', selected: '✓ Selected', recommended: 'Recommended',
    },
    {
      id: 'pro', highlight: true,
      title: 'Professional', subtitle: 'For steel companies',
      price: '18,000,000', period: 'IRR / year',
      features: ['Full access to Industry Pulse', 'All analytical reports', 'Weekly Flash Reports', 'Dedicated support', 'Up to 5 users'],
      cta: 'Start Membership', selected: '✓ Selected', recommended: 'Recommended',
    },
    {
      id: 'enterprise', highlight: false,
      title: 'Enterprise', subtitle: 'For large organizations',
      price: 'Contact Us', period: '',
      features: ['All Professional features', 'Unlimited users', 'Data API', 'Custom reports', 'Dedicated analytical sessions'],
      cta: 'Contact Us', selected: '✓ Selected', recommended: 'Recommended',
    },
  ],
}

const T = {
  fa: {
    overline: 'MEMBERSHIP', heading: 'عضویت',
    sub: 'به جامعه تخصصی اندیشکده فولاد آینده بپیوندید و به داده‌ها و تحلیل‌های اختصاصی دسترسی داشته باشید',
    contactHeading: 'تکمیل فرآیند عضویت',
    contactSub: 'برای پرداخت و فعال‌سازی حساب، با تیم ما تماس بگیرید یا ایمیل ارسال کنید.',
  },
  en: {
    overline: 'MEMBERSHIP', heading: 'Membership',
    sub: 'Join the specialized community of the Future Steel Policy Institute and gain access to exclusive data and analysis',
    contactHeading: 'Complete Membership Process',
    contactSub: 'To complete payment and activate your account, contact our team or send an email.',
  },
}

export default function Membership() {
  const { lang } = useLang()
  const t = T[lang]
  const plans = PLANS[lang]
  const [selected, setSelected] = useState<string | null>(null)

  return (
    <div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
      <div style={{ borderBottom: '3px solid var(--ink)' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
          </div>
          <h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
          <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 560 }}>{t.sub}</p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 56, paddingBottom: 72 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 1, background: 'var(--rule-thin)', marginBottom: 56 }}>
          {plans.map((plan, i) => (
            <motion.div
              key={plan.id}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.08 }}
              style={{ background: plan.highlight ? 'var(--ink)' : 'var(--paper)', color: plan.highlight ? 'var(--paper)' : 'var(--ink)', padding: '36px 28px', position: 'relative', display: 'flex', flexDirection: 'column' }}
            >
              {plan.highlight && <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 4, background: 'var(--red)' }} />}
              {plan.highlight && (
                <div style={{ position: 'absolute', top: 16, left: 20, fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--red)', textTransform: 'uppercase' }}>
                  {plan.recommended}
                </div>
              )}
              <div style={{ fontSize: 11, fontWeight: 700, color: plan.highlight ? 'rgba(244,239,231,0.5)' : 'var(--ink-4)', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 8 }}>{plan.title}</div>
              <div style={{ fontSize: 13, color: plan.highlight ? 'rgba(244,239,231,0.6)' : 'var(--ink-3)', marginBottom: 24 }}>{plan.subtitle}</div>
              <div style={{ marginBottom: 28 }}>
                <span style={{ fontSize: plan.price === 'تماس بگیرید' || plan.price === 'Contact Us' ? 18 : 24, fontWeight: 900, letterSpacing: '-0.5px' }}>{plan.price}</span>
                {plan.period && <span style={{ fontSize: 11, color: plan.highlight ? 'rgba(244,239,231,0.5)' : 'var(--ink-4)', marginRight: lang === 'fa' ? 6 : 0, marginLeft: lang === 'en' ? 6 : 0 }}>{plan.period}</span>}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {plan.features.map(f => (
                  <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: plan.highlight ? 'rgba(244,239,231,0.8)' : 'var(--ink-3)' }}>
                    <span style={{ color: 'var(--red)', fontWeight: 900, fontSize: 13, flexShrink: 0 }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button
                onClick={() => setSelected(plan.id)}
                style={{ background: selected === plan.id ? 'var(--red)' : plan.highlight ? 'var(--paper)' : 'var(--ink)', color: plan.highlight && selected !== plan.id ? 'var(--ink)' : 'var(--paper)', border: 'none', padding: '12px 0', fontSize: 13, fontWeight: 700, fontFamily: 'Vazir, sans-serif', cursor: 'pointer', width: '100%', transition: 'background 150ms', letterSpacing: '0.3px' }}
              >
                {selected === plan.id ? plan.selected : plan.cta}
              </button>
            </motion.div>
          ))}
        </div>

        {selected && selected !== 'enterprise' && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            style={{ border: '2px solid var(--ink)', padding: '32px 28px', maxWidth: 480, position: 'relative' }}
          >
            <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 4, background: 'var(--red)' }} />
            <h3 style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink)', marginBottom: 10 }}>{t.contactHeading}</h3>
            <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.75, marginBottom: 20 }}>{t.contactSub}</p>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>info@steelforesight.com</div>
          </motion.div>
        )}
      </div>
    </div>
  )
}
