import { useState } from 'react'
import { reports } from '@/data/reports'

const featured = reports.find(r => r.featured) ?? reports[0]

const items = [
  { num: '۱', title: 'تحلیل ۴ سناریوی اصلی', desc: 'از بدبینانه تا خوش‌بینانه با احتمال‌سنجی کمی و مدل‌سازی قیمتی' },
  { num: '۲', title: 'نقشه بازارهای هدف جدید', desc: 'جایگزین‌های اروپا: آفریقای شرقی، آسیای مرکزی، عراق و افغانستان' },
  { num: '۳', title: '۱۲ توصیه سیاستی مستقیم', desc: 'برای وزارت صمت، گمرک، سازمان بنادر و بانک مرکزی' },
  { num: '۴', title: 'مقایسه تطبیقی با رقبا', desc: 'ایران در برابر ترکیه، هند، روسیه و برزیل در هر سناریو' },
  { num: '۵', title: 'مدل Excel پیوست', desc: 'داده‌های خام و مدل قابل شخصی‌سازی برای تیم‌های تحلیلی' },
]

function BuyButton({ label, dark }: { label: string; dark?: boolean }) {
  const [hov, setHov] = useState(false)
  return (
    <button
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        padding: '12px 24px',
        border: dark ? 'none' : '1px solid rgba(255,255,255,0.3)',
        background: dark
          ? hov ? 'var(--paper-2)' : 'var(--paper)'
          : hov ? 'rgba(255,255,255,0.08)' : 'transparent',
        color: dark ? 'var(--ink)' : 'var(--paper)',
        fontFamily: 'Vazir, sans-serif',
        fontSize: 12,
        fontWeight: dark ? 700 : 400,
        cursor: 'pointer',
        borderRadius: 0,
        transition: 'background 200ms',
        whiteSpace: 'nowrap',
      }}
    >
      {label}
    </button>
  )
}

export default function SpecialSpreadSection() {
  return (
    <section
      style={{
        background: 'var(--ink)',
        color: 'var(--paper)',
        borderBottom: '3px solid var(--ink)',
        display: 'grid',
        gridTemplateColumns: '1.2fr 1fr',
      }}
      className="max-md:grid-cols-1"
    >
      {/* LEFT */}
      <div
        style={{
          padding: '72px 72px 72px 48px',
          borderLeft: '1px solid rgba(255,255,255,0.08)',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
        }}
        className="max-md:p-8"
      >
        <div>
          {/* Overline */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
            <div style={{ width: 28, height: 2, background: 'var(--red)', flexShrink: 0 }} />
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>
              گزارش استراتژیک · زمستان ۱۴۰۳
            </span>
          </div>

          {/* Headline */}
          <h2
            style={{
              fontSize: 'clamp(32px,3.5vw,52px)',
              fontWeight: 900,
              lineHeight: 1.1,
              letterSpacing: '-1.5px',
              color: 'var(--paper)',
              marginBottom: 24,
            }}
          >
            ایران در نقشه<br />
            جدید تجارت<br />
            فولاد جهان:<br />
            <span style={{ color: 'rgba(255,255,255,0.35)' }}>چهار سناریو</span><br />
            برای ۱۴۰۴
          </h2>

          {/* Description */}
          <p style={{ fontSize: 15, lineHeight: 1.85, color: 'rgba(255,255,255,0.65)', fontWeight: 300, marginBottom: 36 }}>
            {featured.summary}
          </p>
        </div>

        <div>
          {/* Author */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.12)', marginBottom: 28 }}>
            <div style={{ width: 38, height: 38, background: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 900, color: 'white', flexShrink: 0 }}>
              {featured.authorInitial}
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--paper)' }}>{featured.author}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)' }}>{featured.authorRole}</div>
            </div>
          </div>

          {/* Price + CTA */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 4 }}>قیمت گزارش</div>
              <div style={{ fontSize: 34, fontWeight: 900, color: 'var(--paper)', letterSpacing: '-1px' }}>
                {featured.price.toLocaleString('fa-IR')} تومان
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <BuyButton label="خرید گزارش" dark />
              <BuyButton label="خلاصه رایگان" />
            </div>
          </div>
        </div>
      </div>

      {/* RIGHT */}
      <div style={{ padding: '72px 48px 72px 40px', display: 'flex', flexDirection: 'column' }} className="max-md:p-8 max-md:pt-0">
        <div
          style={{
            fontSize: 9,
            fontWeight: 700,
            letterSpacing: '3px',
            textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.35)',
            paddingBottom: 12,
            borderBottom: '1px solid rgba(255,255,255,0.12)',
            marginBottom: 20,
          }}
        >
          آنچه در این گزارش می‌یابید
        </div>

        {items.map((item, i) => (
          <div
            key={i}
            style={{
              padding: '18px 0',
              borderBottom: i < items.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
              display: 'flex',
              gap: 16,
              alignItems: 'flex-start',
            }}
          >
            <div style={{ fontSize: 32, fontWeight: 900, color: 'rgba(255,255,255,0.1)', lineHeight: 1, flexShrink: 0, width: 32, textAlign: 'left', direction: 'ltr' }}>
              {item.num}
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'rgba(255,255,255,0.85)', marginBottom: 4 }}>{item.title}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', lineHeight: 1.65 }}>{item.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
