import { useEffect } from 'react'
import HeaderTitle from '../components/HeaderTitle'
import PageHeader from '../components/PageHeader'
import OffersHours from '../components/OffersHours'
import infoIcon from '../assets/images/Info.svg'
import treeImage from '../assets/images/derakht-balout.png'
import strawberryCake from '../assets/images/strawberry-cake-cream.png'
import handbagIcon from '../assets/images/Handbag.svg'
import wavesIcon from '../assets/images/Waves.svg'
import cakeIcon from '../assets/images/Cake.svg'
import boxIcon from '../assets/images/Box.svg'
import './AboutUsPage.css'

const STATS = [
  { number: '31', label: 'ارسال های هفتگی' },
  { number: '43', label: 'پشتیبانی' },
  { number: '67', label: 'کاربران خوشحال' },
  { number: '23', label: 'تنوع محصول' },
]

const FEATURES_RIGHT = [
  {
    icon: handbagIcon,
    secondary: 'تنوع',
    primary: 'بالای محصولات',
  },
  {
    icon: wavesIcon,
    secondary: 'پخت',
    primary: 'تـــــازه و روزانـــــه',
  },
]

const FEATURES_LEFT = [
  {
    icon: cakeIcon,
    secondary: 'طرح های',
    primary: 'زیبــــــا و خــــــاص',
  },
  {
    icon: boxIcon,
    secondary: 'ارسال',
    primary: 'رایگان در شهر قم',
  },
]

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

  return (
    <div className="about-page">
      <PageHeader
        icon={infoIcon}
        placeholder="About Us"
        secondary="درباره"
        primary="ما بیشتر بدانید"
        crumbs={[
          { label: 'صفحه اصلی', to: '/' },
          { label: 'درباره ما' },
        ]}
      />

      <div className="max-container about-page__intro">
        <div className="about-page__intro-image">
          <img src={treeImage} alt="درخت بلوط" />
        </div>
        <div className="about-page__intro-content">
          <HeaderTitle
            placeholder="About Us"
            secondary="درباره"
            primary="شیرینی بلوط"
            size="lg"
            align="start"
          />
          <p className="about-page__description">
            شیرینی‌سرای بلوط از سال ۱۳۷۸ در قم فعالیت خود را آغاز کرده و با بیش از دو دهه تجربه، به
            عنوان نامی قابل اعتماد در تولید کیک و شیرینی شناخته می‌شود. این مجموعه با ترکیب مهارت،
            خلاقیت و مواد اولیه باکیفیت، انواع کیک‌های ساده تا عروسی و سفارشی را با دقت و تازگی بالا
            ارائه می‌دهد و رضایت مشتری را اولویت اصلی خود می‌داند.
          </p>
        </div>
      </div>

      <div className="max-container stat-section">
        {STATS.map((stat, index) => (
          <div key={stat.label} className="stat-section__group">
            {index > 0 && <div className="stat-section__divider" aria-hidden="true" />}
            <div className="stat-section__item">
              <p className="stat-section__item--number">{stat.number}</p>
              <p className="stat-section__item--label">{stat.label}</p>
            </div>
          </div>
        ))}
      </div>

      <HeaderTitle
        placeholder="For The Best"
        secondary="چرا باید"
        primary="ما را انتخاب کنید"
        size="lg"
        align="center"
        className="about-page__why-title"
      />

      <div className="max-container feature-section">
        <div className="feature-section__col">
          {FEATURES_RIGHT.map((feature, index) => (
            <div key={feature.primary}>
              <div className="feature-section__item">
                <img src={feature.icon} alt="" className="feature-section__icon" width={70} />
                <div className="feature-section__title">
                  <p className="feature-section__title--secondary">{feature.secondary}</p>
                  <p className="feature-section__title--primary">{feature.primary}</p>
                </div>
              </div>
              {index === 0 && <hr className="feature-section__hr" />}
            </div>
          ))}
        </div>

        <div className="feature-section__cake">
          <img src={strawberryCake} alt="کیک توت‌فرنگی" />
        </div>

        <div className="feature-section__col">
          {FEATURES_LEFT.map((feature, index) => (
            <div key={feature.primary}>
              <div className="feature-section__item feature-section__item--align">
                <img src={feature.icon} alt="" className="feature-section__icon" width={70} />
                <div className="feature-section__title">
                  <p className="feature-section__title--secondary">{feature.secondary}</p>
                  <p className="feature-section__title--primary">{feature.primary}</p>
                </div>
              </div>
              {index === 0 && <hr className="feature-section__hr" />}
            </div>
          ))}
        </div>
      </div>

      <OffersHours className="about-page__footer-block" />
    </div>
  )
}
