import { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { ChevronLeft, Globe, Instagram } from 'lucide-react'
import HeaderTitle from '../components/HeaderTitle'
import infoIcon from '../assets/images/Info.svg'
import './QuickInfoPage.css'

const SOCIAL_LINKS = [
  {
    title: 'پیج اینستاگرام قنادی بلوط',
    href: 'https://instagram.com/shirini_balout',
    label: 'shirini_balout',
    icon: 'instagram' as const,
  },
  {
    title: 'پیج اینستاگرام سوهان صالح نیا',
    href: 'https://instagram.com/sohansalehnia',
    label: 'sohansalehnia',
    icon: 'instagram' as const,
  },
  {
    title: 'پیج اینستاگرام اُک',
    href: 'https://instagram.com/oaktasty',
    label: 'oaktasty',
    icon: 'instagram' as const,
  },
  {
    title: 'پیج اینستاگرام کافه بلوط',
    href: 'https://instagram.com/cafe_balout',
    label: 'cafe_balout',
    icon: 'instagram' as const,
  },
  {
    title: 'سایت سوهان صالح نیا',
    href: 'https://sohansalehnia.com/',
    label: 'Sohansalehnia.com',
    icon: 'globe' as const,
  },
]

const BRANCHES = [
  {
    title: 'شعبه مرکزی',
    address: 'قم،باجک یک، نبش کوچه ۴۴',
    phone: '٣٧٧٢٨١٨١-(٠٢٥)',
    phoneHref: 'tel:02537728181',
    social: '٠٩١٩٩٧٠١١٦١',
    socialHref: 'tel:09199701161',
    mapHref: 'https://balad.ir/p/74BfuVy0ARg7rd',
  },
  {
    title: 'شعبه غدیر',
    address: 'بلوار غدیر،رو به روی دانشگاه قم',
    phone: '۳۲۸۵۸۱۸۱-(٠٢٥)',
    phoneHref: 'tel:02532858181',
    social: '۰۹۳۹۶۳۴۲۴۲۴',
    socialHref: 'tel:09396342424',
    mapHref: 'https://balad.ir/p/2e7GW3RbAgSDL7',
  },
  {
    title: 'شعبه هپی سنتر',
    address: 'بلوار غدیر،نبش کوچه ۱۹،همکف مجتمع هپی سنتر(مجموعه اُک)',
    phone: '۳۲۸۵۹۱۹۱-(٠٢٥)',
    phoneHref: 'tel:02532859191',
    social: '۰۹۱۲۰۶۹۹۲۲۰',
    socialHref: 'tel:09120699220',
    mapHref: 'https://balad.ir/p/6hUczGps3bZcrE',
  },
]

export default function QuickInfoPage() {
  useEffect(() => {
    document.title = 'شیرینی بلوط - صفحه اطلاعات مجموعه'
  }, [])

  return (
    <div className="quick-info">
      <div className="max-container">
        <div className="quick-info__header">
          <div className="quick-info__title-row">
            <img src={infoIcon} alt="" className="quick-info__icon" width={115} height={128} />
            <HeaderTitle
              placeholder="Quick Info"
              secondary="اطلاعات"
              primary="مجموعه بلوط"
              size="md"
              align="separated"
            />
          </div>

          <nav className="quick-info__breadcrumbs" aria-label="مسیر صفحه">
            <ol>
              <li>
                <Link to="/">صفحه اصلی</Link>
              </li>
              <li className="quick-info__breadcrumbs-divider" aria-hidden="true">
                /
              </li>
              <li className="quick-info__breadcrumbs-current">اطلاعات مجموعه</li>
            </ol>
          </nav>
        </div>
      </div>

      <div className="max-container quick-info__content">
        <div className="quick-info__socials">
          {SOCIAL_LINKS.map((item) => (
            <div key={item.href} className="quick-info-item quick-info-item--social">
              <h3>
                {item.icon === 'instagram' ? (
                  <Instagram size={18} strokeWidth={1.75} className="quick-info-item__icon" />
                ) : (
                  <Globe size={18} strokeWidth={1.75} className="quick-info-item__icon" />
                )}
                {item.title}
              </h3>
              <a href={item.href} target="_blank" rel="noopener noreferrer">
                {item.label}
              </a>
            </div>
          ))}
        </div>

        <div className="quick-info__branches">
          {BRANCHES.map((branch) => (
            <div key={branch.title} className="quick-info-item quick-info-item--branch">
              <h3>{branch.title}</h3>
              <h5>آدرس</h5>
              <p>{branch.address}</p>
              <h5>شماره تماس</h5>
              <a href={branch.phoneHref} className="quick-info-item__contact">
                {branch.phone}
              </a>
              <h5 className="quick-info-item__spaced">فضای مجازی</h5>
              <a href={branch.socialHref} className="quick-info-item__contact">
                {branch.social}
              </a>
              <h5 className="quick-info-item__spaced">آدرس شعبه روی نقشه</h5>
              <a
                href={branch.mapHref}
                className="quick-info-item__button"
                target="_blank"
                rel="noopener noreferrer"
              >
                برای مشاهده کلیک کنید
                <ChevronLeft size={14} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
