import { Download } from 'lucide-react'
import { useLang } from '@/context/LangContext'
import { bannerFor } from '@/data/banners'

const NAVY = '#032340'
const GOLD = '#CD9E53'
const FALLBACK_BOOK = '/Horizontal_Book_Mockup_6%201.webp'

export default function FeaturedReportBanner({ position = 'featured' }: { position?: string }) {
  const { lang } = useLang()
  const isFa = lang === 'fa'

  // CMS-managed banner (bootstrapped at startup); render nothing if none active
  const banner = bannerFor(position)
  if (!banner) return null
  const t = banner[lang]
  const book = banner.image || FALLBACK_BOOK

  // ctaUrl from CMS (PDF link or route); no-op when empty
  const onDownload = () => {
    if (banner.ctaUrl) window.open(banner.ctaUrl, '_blank', 'noopener')
  }

  return (
    <section style={{ background: 'var(--paper)', padding: '48px 0 72px' }} dir={isFa ? 'rtl' : 'ltr'}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-4">
        {/* wrapper allows the book to spill outside the frame */}
        <div style={{ position: 'relative', overflow: 'visible' }}>

          {/* clipped background (navy gradient + angled gold band) */}
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 20, overflow: 'hidden',
            background: `linear-gradient(110deg, ${NAVY} 0%, #06335c 55%, ${NAVY} 100%)`,
            boxShadow: '0 30px 70px -34px rgba(3,35,64,0.5)',
          }}>
            <div style={{
              position: 'absolute', insetInlineStart: 0, insetInlineEnd: 0, bottom: -6, height: 88,
              background: GOLD, transform: 'skewY(-2.4deg)', transformOrigin: isFa ? 'right' : 'left',
            }} className="max-md:hidden" />
          </div>

          {/* DESKTOP: row. MOBILE: column */}
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', minHeight: 240, direction: 'ltr' }}
            className="max-md:!flex-col">

            {/* TEXT */}
            <div style={{ width: '52%', padding: '40px 48px', direction: isFa ? 'rtl' : 'ltr' }}
              className="max-md:!w-full max-md:!px-6 max-md:!pb-7 max-md:!pt-5 max-md:!order-2">
              <div style={{ fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.55)', marginBottom: 10 }}>{t.overline}</div>
              <h2 style={{ fontSize: 'clamp(18px, 2.3vw, 30px)', fontWeight: 900, color: '#fff', lineHeight: 1.4, letterSpacing: '-0.5px', margin: '0 0 8px' }}>
                {t.title}
              </h2>
              <div style={{ fontSize: 'clamp(12px, 1.1vw, 15px)', color: 'rgba(255,255,255,0.58)', marginBottom: 20, direction: 'ltr', textAlign: isFa ? 'right' : 'left' }}>
                {t.subtitle}
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <button
                  onClick={onDownload}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    background: '#f4ede0', color: NAVY, border: 'none', borderRadius: 10,
                    padding: '13px 28px', fontSize: 14, fontWeight: 800, cursor: 'pointer', fontFamily: 'inherit',
                    transition: 'transform 180ms, box-shadow 180ms',
                  }}
                  onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)'; (e.currentTarget as HTMLElement).style.boxShadow = '0 12px 26px -10px rgba(0,0,0,0.4)' }}
                  onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLElement).style.boxShadow = 'none' }}
                >
                  <Download size={17} strokeWidth={2.4} />
                  {t.cta}
                </button>
              </div>
            </div>

            {/* BOOK */}
            <div style={{ width: '48%', position: 'relative', alignSelf: 'stretch' }}
              className="max-md:!w-full max-md:!order-1 max-md:!flex max-md:!justify-center max-md:!pt-6">
              {/* desktop */}
              <img
                src={book}
                alt={t.title}
                style={{
                  position: 'absolute', insetInlineEnd: '-2%', top: '50%', transform: 'translateY(-50%)',
                  width: '116%', maxWidth: 'none', height: 'auto',
                  filter: 'drop-shadow(0 30px 46px rgba(0,0,0,0.5))',
                }}
                className="max-md:!hidden"
              />
              {/* mobile — natural flow, no absolute */}
              <img
                src={book}
                alt=""
                style={{ filter: 'drop-shadow(0 16px 30px rgba(0,0,0,0.45))' }}
                className="hidden max-md:!block max-md:!w-[85%] max-md:!max-w-[300px] max-md:!h-auto"
              />
            </div>

          </div>
        </div>
      </div>
    </section>
  )
}
