import { useEffect, useState, type CSSProperties } from 'react'
import { useLocation } from 'react-router-dom'
import { useLang } from '@/context/LangContext'
import { Telescope, Lightbulb, BarChart3, Leaf, Quote, Mail, Target, Link2, Gavel, ListChecks, Compass, ShieldCheck, type LucideIcon } from 'lucide-react'

const NAVY = '#032340'
const GOLD = '#CD9E53'
// gold "+" tile (Figma decorative grid behind testimonials)
const PLUS_BG = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><g stroke='%23CD9E53' stroke-width='1.3' fill='none'><path d='M7.5 3 V12 M3 7.5 H12'/></g></svg>")`

/* ── content (mirrors the Figma «درباره ما» design; assets in /about) ── */
const VISION_IMAGES = ['/about/vision-1.png', '/about/vision-2.png', '/about/vision-3.png', '/about/vision-4.png']

const VISION_PILLARS: { icon: LucideIcon; label: string }[] = [
  { icon: Telescope, label: 'آینده‌نگاری' },
  { icon: BarChart3, label: 'سیاست‌پژوهی' },
  { icon: Lightbulb, label: 'نوآوری راهبردی' },
  { icon: Leaf, label: 'توسعه پایدار' },
]

const COUNCIL_PILLARS: { icon: LucideIcon; label: string }[] = [
  { icon: Link2, label: 'اتصال مستقیم به مدیریت ارشد' },
  { icon: Gavel, label: 'تصویب موضوعات راهبردی' },
  { icon: ListChecks, label: 'تعیین اولویت‌های کلان' },
]

const DIRECTOR_PILLARS: { icon: LucideIcon; label: string }[] = [
  { icon: Compass, label: 'هدایت علمی و راهبردی' },
  { icon: ShieldCheck, label: 'تضمین کیفیت و اثربخشی خروجی‌ها' },
]

const DIRECTOR = {
  photo: '/about/board-zarandi.png',
  name: 'دکتر سعید زرندی',
  role: 'مدیر اندیشکده',
  email: 's.zarandi@fstt.ir',
  quote: 'هدایتِ علمی و راهبردیِ اندیشکده بر تضمینِ کیفیت و اثربخشیِ خروجی‌ها استوار است؛ تا هر گزارش و تحلیل، پلی میانِ دانشِ پژوهشی و تصمیمِ اجرایی در صنعتِ فولادِ کشور باشد.',
}

const COUNCIL_MEMBERS = [
  { photo: '/about/council-b.png', name: 'مهندس حمیدرضا کیانی', role: 'عضو ارشد شورا و مسئولِ تدوین اولویت‌های کلانِ صنعت' },
  { photo: '/about/council-a.png', name: 'دکتر فرزانه صیادی', role: 'عضو شورا و ناظرِ عالیِ تصویبِ موضوعاتِ راهبردی' },
  { photo: '/about/council-c.png', name: 'دکتر کیوان معتمدی', role: 'عضو شورا و رابطِ ارشدِ اجرایی با کانون‌های مدیریتِ کلان' },
  { photo: '/about/council-d.png', name: 'مهندس رامین نیک‌خو', role: 'عضو شورا و کارشناسِ ارشدِ سیاست‌گذاریِ صنعتی' },
]

const DEPTS = ['تحقیق و پژوهش', 'شبکه‌سازی نخبگان', 'اتاق‌های فکر', 'فولاد و توسعه ایران', 'برند و رسانه']

// each department tab shows its own team below
const DEPT_TEAMS: Record<string, { photo: string; name: string; role: string }[]> = {

  'تحقیق و پژوهش': [
    { photo: '/about/analyst-a.png', name: 'دکتر نازنین فروتن', role: 'پژوهشگر ارشد سیاست‌های صنعتی' },
    { photo: '/about/analyst-c.png', name: 'دکتر بهراد مهدوی', role: 'مسئول مطالعات بازار فولاد' },
    { photo: '/about/analyst-d.png', name: 'مهندس آرش طاهری', role: 'پژوهشگر زنجیره ارزش فولاد' },
    { photo: '/about/analyst-b.png', name: 'دکتر شیما عابدی', role: 'تحلیل‌گر اقتصاد انرژی' },
  ],
  'شبکه‌سازی نخبگان': [
    { photo: '/about/analyst-c.png', name: 'دکتر کاوه آرین', role: 'مسئول توسعه شبکه نخبگان' },
    { photo: '/about/analyst-b.png', name: 'مهندس لیلا حسینی', role: 'هماهنگ‌کننده همکاری‌های دانشگاهی' },
    { photo: '/about/analyst-a.png', name: 'دکتر امید رستگار', role: 'رابط نهادهای علمی و صنعتی' },
    { photo: '/about/analyst-d.png', name: 'مهندس نگار توکلی', role: 'مدیر برنامه‌های هم‌اندیشی' },
  ],
  'اتاق‌های فکر': [
    { photo: '/about/analyst-d.png', name: 'دکتر حسام میرزایی', role: 'راهبر اتاق فکر فناوری فولاد' },
    { photo: '/about/analyst-a.png', name: 'دکتر پریسا اکبری', role: 'تسهیل‌گر اتاق فکر سیاستی' },
    { photo: '/about/analyst-c.png', name: 'مهندس بابک شریفی', role: 'دبیر اتاق فکر زنجیره تأمین' },
    { photo: '/about/analyst-b.png', name: 'دکتر یاسمن قاسمی', role: 'پژوهشگر سناریونگاری' },
  ],
  'فولاد و توسعه ایران': [
    { photo: '/about/analyst-a.png', name: 'دکتر محسن دهقان', role: 'تحلیل‌گر ارشد توسعه صنعتی' },
    { photo: '/about/analyst-b.png', name: 'مهندس سحر کریمی', role: 'کارشناس طرح‌های توسعه فولاد' },
    { photo: '/about/analyst-c.png', name: 'دکتر فرهاد بنیادی', role: 'پژوهشگر اقتصاد کلان صنعت' },
    { photo: '/about/analyst-d.png', name: 'مهندس رضا املاکی', role: 'متخصص سرمایه‌گذاری صنعتی' },
  ],
  'برند و رسانه': [
    { photo: '/about/analyst-b.png', name: 'مهندس ندا شکوهی', role: 'مدیر محتوا و رسانه' },
    { photo: '/about/analyst-d.png', name: 'علیرضا فتاحی', role: 'راهبر برند و ارتباطات' },
    { photo: '/about/analyst-a.png', name: 'مریم اسدی', role: 'مسئول تولید محتوای تخصصی' },
    { photo: '/about/analyst-c.png', name: 'دکتر کامران ولی‌زاده', role: 'تحلیل‌گر افکار عمومی صنعت' },
  ],
}

const tr = {
  fa: {
    pageTitle: 'درباره ما', home: 'خانه',
    visionTitle: 'چشم انداز ما',
    visionDesc: 'اندیشکده فولاد آینده در افق پیش‌رو، مرجع معتبر آینده‌نگاری، سیاست‌پژوهی و نوآوری راهبردی در صنعت فولاد و صنایع وابسته خواهد بود؛ نهادی که با تولید بینش‌های آینده‌محور، مسیر توسعه پایدار، رقابت‌پذیری جهانی و تحول صنعتی را هموار می‌سازد.\nما می‌کوشیم پلی میان دانش، فناوری و تصمیم‌سازی راهبردی باشیم تا صنعت ایران بتواند فرصت‌های آینده را زودتر شناسایی کرده و در برابر عدم‌قطعیت‌ها هوشمندانه عمل کند.',
    missionTitle: 'رسالت ما',
    missionDesc: 'تولید و بسیج دانش و بینش راهبردی برای آینده صنعت فولاد و توسعه کشور از طریق پژوهش‌های عمیق، شبکه‌سازی نخبگان و ارائه راهکارهای سیاستی مؤثر.',
    councilTitle: 'شورای سیاست‌گذاری اندیشکده:',
    directorTitle: 'مدیر اندیشکده',
    teamTitle: 'تیم تحلیل‌گران',
    contactTitle: 'تماس با ما',
    contactDesc: 'مشتاقانه آماده‌ی دریافت پیام‌های شما هستیم. برای هرگونه سوال یا هماهنگی، کافی است روی دکمه‌ی زیر کلیک کنید.',
    contactBtn: 'تماس با ما',
  },
  en: {
    pageTitle: 'About Us', home: 'Home',
    visionTitle: 'Our Vision',
    visionDesc: 'In the horizon ahead, the Steel Futures Institute will be a trusted reference for foresight, policy research, and strategic innovation in the steel industry and related sectors.',
    missionTitle: 'Our Mission',
    missionDesc: 'To produce and mobilize strategic knowledge and insight for the future of the steel industry through deep research, elite networking, and effective policy solutions.',
    councilTitle: 'Policy Council:',
    directorTitle: 'Institute Director',
    teamTitle: 'Analyst Team',
    contactTitle: 'Contact Us',
    contactDesc: 'We look forward to hearing from you. For any question or coordination, simply click the button below.',
    contactBtn: 'Contact Us',
  },
}

/* ── small building blocks ── */
function SectionLabel({ text }: { text: string }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
      <span style={{ width: 3, height: 30, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
      <h2 style={{ fontSize: 'clamp(20px,2.4vw,30px)', fontWeight: 900, color: NAVY, margin: 0 }}>{text}</h2>
    </div>
  )
}

function PillarRow({ items }: { items: { icon: LucideIcon; label: string }[] }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18 }}>
      {items.map((p, i) => {
        const Icon = p.icon
        return (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#fff', border: '1px solid rgba(3,35,64,0.08)', borderRadius: 12, padding: '12px 18px', flex: '1 1 200px', minWidth: 180 }}>
            <span style={{ width: 46, height: 46, borderRadius: 12, background: `${GOLD}1a`, border: `1px solid ${GOLD}55`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon size={22} color={GOLD} strokeWidth={1.9} />
            </span>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: NAVY, lineHeight: 1.6 }}>{p.label}</span>
          </div>
        )
      })}
    </div>
  )
}

function Testimonial({ m }: { m: { photo: string; name: string; role: string; email: string; quote: string } }) {
  return (
    <div style={{ position: 'relative' }}>
      {/* gold "+" grid — half behind the card, half spilling past the bottom-right corner */}
      <div aria-hidden style={{ position: 'absolute', bottom: -42, insetInlineStart: 22, width: 150, height: 116, backgroundImage: PLUS_BG, backgroundSize: '15px 15px', opacity: 0.9, pointerEvents: 'none', zIndex: 0 }} className="max-md:!hidden" />
      <div style={{
        position: 'relative', zIndex: 1, background: '#fff', borderRadius: 16,
        display: 'grid', gridTemplateColumns: '300px 1fr', direction: 'ltr', minHeight: 300,
        boxShadow: '0 18px 50px -28px rgba(3,35,64,0.35)',
      }} className="max-md:!grid-cols-1">
        <div style={{ position: 'relative', overflow: 'hidden', background: '#fbeed9', borderRadius: '16px 0 0 16px' }} className="max-md:!rounded-t-2xl">
          <img src={m.photo} alt={m.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center' }} className="max-md:!relative max-md:!h-72" />
        </div>
        <div dir="rtl" style={{ padding: '38px 46px', position: 'relative', overflow: 'hidden', borderRadius: '0 16px 16px 0' }} className="max-md:!p-7">
          <h3 style={{ fontSize: 21, fontWeight: 900, color: NAVY, margin: '0 0 4px' }}>{m.name}</h3>
          <div style={{ fontSize: 13, fontWeight: 700, color: GOLD, marginBottom: 18 }}>{m.role}</div>
          <p style={{ fontSize: 14.5, color: 'rgba(3,35,64,0.78)', lineHeight: 2.2, textAlign: 'justify', margin: '0 0 20px', maxWidth: 560 }}>{m.quote}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 36, height: 36, borderRadius: '50%', background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Mail size={16} color="#fff" />
            </span>
            <a href={`mailto:${m.email}`} style={{ fontSize: 14, color: GOLD, fontWeight: 700, textDecoration: 'none', direction: 'ltr' }}>{m.email}</a>
          </div>
        </div>
        <div style={{ position: 'absolute', left: 274, top: 34, width: 50, height: 50, borderRadius: 10, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 4, boxShadow: '0 8px 18px -6px rgba(205,158,83,0.85)' }} className="max-md:!hidden">
          <Quote size={22} color="#fff" fill="#fff" />
        </div>
      </div>
    </div>
  )
}

function MemberCard({ m, selected, onClick }: { m: { photo: string; name: string; role: string }; selected: boolean; onClick: () => void }) {
  return (
    <div onClick={onClick} style={{ position: 'relative', cursor: 'pointer', transition: 'transform 160ms' }}
      onMouseEnter={e => { (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)' }}
      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = 'none' }}
    >
      <div style={{
        background: selected ? NAVY : '#D9D9D9', borderRadius: 18, padding: 9,
        border: `1px solid ${selected ? NAVY : 'rgba(3,35,64,0.06)'}`,
        boxShadow: selected ? '0 24px 52px -20px rgba(3,35,64,0.55)' : '0 10px 32px -16px rgba(3,35,64,0.3)',
        transition: 'background 220ms, box-shadow 220ms',
      }}>
        {/* framed photo */}
        <div style={{ borderRadius: 13, overflow: 'hidden' }}>
          <img src={m.photo} alt={m.name} style={{ width: '100%', height: 236, objectFit: 'cover', objectPosition: 'top center', display: 'block', filter: 'blur(8px)' }} />
        </div>
        {/* gold accent line under the photo */}
        <div style={{ height: 3, margin: '12px 16px 0', borderRadius: 99, background: `linear-gradient(90deg, rgba(205,158,83,0) 0%, ${GOLD} 16%, ${GOLD} 84%, rgba(205,158,83,0) 100%)` }} />
        <div style={{ padding: '12px 14px 14px 56px', textAlign: 'right' }}>
          <h3 style={{ fontSize: 15, fontWeight: 800, color: selected ? '#fff' : NAVY, margin: '0 0 6px' }}>{m.name}</h3>
          <p style={{ fontSize: 12, color: selected ? 'rgba(255,255,255,0.62)' : 'rgba(3,35,64,0.52)', lineHeight: 1.85, margin: 0, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{m.role}</p>
        </div>
      </div>
      {/* TRUE cut-out: a section-bg circle carves a concave notch into the card's bottom-left corner */}
      <div aria-hidden style={{ position: 'absolute', bottom: -3, insetInlineEnd: -18, width: 60, height: 60, borderRadius: '50%', background: 'var(--paper)', zIndex: 2 }} />
      {/* email badge nested inside the notch */}
      <span style={{ position: 'absolute', bottom: 5, insetInlineEnd: -10, width: 44, height: 44, borderRadius: 12, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3, boxShadow: '0 8px 18px -6px rgba(205,158,83,0.85)' }}>
        <Mail size={18} color="#fff" />
      </span>
    </div>
  )
}

const memberGrid: CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }

export default function About() {
  const { lang } = useLang()
  const t = tr[lang]
  const isFa = lang === 'fa'
  const { hash } = useLocation()
  const [councilSel, setCouncilSel] = useState(1)
  const [deptSel, setDeptSel] = useState(0)
  const [analystSel, setAnalystSel] = useState(1)

  useEffect(() => {
    if (!hash) return
    const id = decodeURIComponent(hash.slice(1))
    const timer = setTimeout(() => {
      const el = document.getElementById(id)
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' })
    }, 120)
    return () => clearTimeout(timer)
  }, [hash])

  return (
    <div dir={isFa ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '100vh' }}>

      {/* breadcrumb */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ borderBottom: '1px solid rgba(3,35,64,0.08)', padding: '14px 0', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(3,35,64,0.5)' }}>
        <span style={{ color: GOLD, fontWeight: 800, fontSize: 16 }}>|</span>
        <span style={{ color: NAVY, fontWeight: 700, fontSize: 15 }}>{t.home}</span>
        <span>›</span>
        <span style={{ color: GOLD, fontWeight: 700 }}>{t.pageTitle}</span>
      </div>

      {/* ── VISION ── */}
      <section id="vision" className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 64, paddingBottom: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="max-lg:!grid-cols-1 max-lg:!gap-10">
          <div>
            <SectionLabel text={t.visionTitle} />
            <p style={{ fontSize: 15.5, color: 'rgba(3,35,64,0.72)', lineHeight: 2.3, whiteSpace: 'pre-line', textAlign: 'justify', margin: '0 0 32px' }}>{t.visionDesc}</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="max-sm:!grid-cols-2">
              {VISION_PILLARS.map((p, i) => {
                const Icon = p.icon
                return (
                  <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center' }}>
                    <div style={{ width: 56, height: 56, borderRadius: 14, background: `${GOLD}1a`, border: `1px solid ${GOLD}55`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon size={26} color={GOLD} strokeWidth={1.8} />
                    </div>
                    <span style={{ fontSize: 12.5, fontWeight: 700, color: NAVY, lineHeight: 1.4 }}>{p.label}</span>
                  </div>
                )
              })}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 28 }}>
              <img src={VISION_IMAGES[0]} alt="" style={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 16, boxShadow: '0 8px 30px -12px rgba(3,35,64,0.3)' }} />
              <img src={VISION_IMAGES[2]} alt="" style={{ width: '100%', height: 150, objectFit: 'cover', borderRadius: 16, boxShadow: '0 8px 30px -12px rgba(3,35,64,0.3)' }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <img src={VISION_IMAGES[1]} alt="" style={{ width: '100%', height: 150, objectFit: 'cover', borderRadius: 16, boxShadow: '0 8px 30px -12px rgba(3,35,64,0.3)' }} />
              <img src={VISION_IMAGES[3]} alt="" style={{ width: '100%', height: 200, objectFit: 'cover', borderRadius: 16, boxShadow: '0 8px 30px -12px rgba(3,35,64,0.3)' }} />
            </div>
          </div>
        </div>
      </section>

      {/* ── MISSION ── */}
      <section className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingBottom: 60 }}>
        <div style={{ background: `linear-gradient(110deg, ${NAVY} 0%, #06335c 100%)`, borderRadius: 18, padding: '40px 48px', display: 'flex', alignItems: 'center', gap: 28, flexDirection: isFa ? 'row' : 'row-reverse' }} className="max-md:!flex-col max-md:!text-center max-md:!p-7">
          <div style={{ width: 76, height: 76, borderRadius: 18, background: `${GOLD}26`, border: `1px solid ${GOLD}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Target size={36} color={GOLD} strokeWidth={1.8} />
          </div>
          <div style={{ textAlign: isFa ? 'right' : 'left' }} className="max-md:!text-center">
            <h2 style={{ fontSize: 'clamp(18px,2.2vw,26px)', fontWeight: 900, color: '#fff', margin: '0 0 10px' }}>{t.missionTitle}</h2>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.78)', lineHeight: 2.1, margin: 0 }}>{t.missionDesc}</p>
          </div>
        </div>
      </section>

      {/* ── POLICY COUNCIL ── (hidden for now: whole section blurred + non-interactive) */}
      <section className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingBottom: 56, filter: 'blur(18px)', userSelect: 'none', pointerEvents: 'none' }} aria-hidden="true">
        <SectionLabel text={t.councilTitle} />
        <div style={{ marginBottom: 36 }}><PillarRow items={COUNCIL_PILLARS} /></div>
        <div style={memberGrid} className="max-lg:!grid-cols-2 max-sm:!grid-cols-1">
          {COUNCIL_MEMBERS.map((m, i) => <MemberCard key={i} m={m} selected={i === councilSel} onClick={() => setCouncilSel(i)} />)}
        </div>
      </section>

      {/* ── DIRECTOR ── (hidden for now: whole section blurred + non-interactive) */}
      <section style={{ background: '#efefef', padding: '56px 0', filter: 'blur(18px)', userSelect: 'none', pointerEvents: 'none' }} aria-hidden="true">
        <div className="max-w-7xl mx-auto px-12 max-md:px-5">
          <SectionLabel text={t.directorTitle} />
          <div style={{ marginBottom: 28 }}><PillarRow items={DIRECTOR_PILLARS} /></div>
          <Testimonial m={DIRECTOR} />
        </div>
      </section>

      {/* ── ANALYST TEAM ── (hidden for now: whole section blurred + non-interactive) */}
      <section id="team" className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 64, paddingBottom: 64, filter: 'blur(18px)', userSelect: 'none', pointerEvents: 'none' }} aria-hidden="true">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 30, justifyContent: isFa ? 'flex-start' : 'flex-end' }}>
          {DEPTS.map((d, i) => (
            <button key={d} type="button" onClick={() => { setDeptSel(i); setAnalystSel(0) }}
              style={{ fontSize: 12.5, fontWeight: 700, padding: '7px 16px', borderRadius: 20, background: i === deptSel ? GOLD : '#fff', color: i === deptSel ? NAVY : 'rgba(3,35,64,0.7)', border: `1px solid ${i === deptSel ? GOLD : 'rgba(3,35,64,0.1)'}`, cursor: 'pointer', fontFamily: 'inherit', transition: 'background 160ms, color 160ms, border-color 160ms' }}>{d}</button>
          ))}
        </div>
        <div style={memberGrid} className="max-lg:!grid-cols-2 max-sm:!grid-cols-1">
          {DEPT_TEAMS[DEPTS[deptSel]].map((m, i) => <MemberCard key={DEPTS[deptSel] + i} m={m} selected={i === analystSel} onClick={() => setAnalystSel(i)} />)}
        </div>
      </section>

      {/* ── CONTACT ── */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(3,35,64,0.08)', padding: '64px 0' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5">
          <SectionLabel text={t.contactTitle} />
          <p style={{ fontSize: 15, color: 'rgba(3,35,64,0.62)', lineHeight: 2, margin: '0 0 32px', textAlign: isFa ? 'right' : 'left' }}>{t.contactDesc}</p>
          <a href="/contact" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block', background: GOLD, color: NAVY, borderRadius: 10, padding: '14px 44px', fontSize: 15, fontWeight: 800, textDecoration: 'none', boxShadow: '0 8px 24px -10px rgba(205,158,83,0.7)' }}>{t.contactBtn}</a>
        </div>
      </section>
    </div>
  )
}
