import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { ChevronLeft } from 'lucide-react'
import HeaderTitle from '../components/HeaderTitle'
import macaronRight from '../assets/images/brown-macaron-right.png'
import macaronLeft from '../assets/images/brown-macaron-left.png'
import chocolateCake from '../assets/images/chocolate-cake.png'
import deliciousDecorate from '../assets/images/delicious-decorate.png'
import strawberryDecorate from '../assets/images/strawberry-decorate.png'
import muffinsDecorate from '../assets/images/muffins-decorate.png'
import tiramisuCake from '../assets/images/tiramisu-cake.png'
import sohan from '../assets/images/sohan4.png'
import sohanPattern from '../assets/images/backImage1.png'
import cookies from '../assets/images/cookies.png'
import flatLay from '../assets/images/FlatLay.png'
import peste from '../assets/images/peste.png'
import './HomePage.css'

const DECOR_CARDS = [
  {
    title: 'انواع',
    subtitle: 'کیـــــــــــک',
    image: deliciousDecorate,
    to: '/products/cake',
  },
  {
    title: 'انواع',
    subtitle: 'شیرینـــــی',
    image: strawberryDecorate,
    to: '/products/shirini',
  },
  {
    title: 'انواع',
    subtitle: 'نـــــــــــــان',
    image: muffinsDecorate,
  },
]

const OFFER_CATEGORIES = [
  {
    title: 'شیرینی',
    description:
      'شیرینی‌های بلوط همیشه تازه، خوش‌طعم و باکیفیت تهیه می‌شوند 🌰 از مدل‌های ساده برای دورهمی‌های خانوادگی تا شیرینی‌های شیک و مجلسی، همه با بهترین مواد اولیه آماده می‌شوند تا کنار هر فنجان چای و هر جشن، لحظه‌هایتان شیرین‌تر شود.',
  },
  { title: 'كيكی جات' },
  { title: 'شیرینی تر' },
  { title: 'شیرینی خشک' },
  { title: 'زولبیا و بامیه' },
  { title: 'کیک شکلاتی' },
  { title: 'کیک' },
  { title: 'وسایل تم تولد' },
  { title: 'سوهان' },
  { title: 'آجیل و شکلات' },
  { title: 'دسر ها' },
  { title: 'شیرینی ها' },
  { title: 'کیک های خامه ای' },
]

export default function HomePage() {
  const [openOffer, setOpenOffer] = useState(0)

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

  return (
    <div className="home">
      {/* Hero title */}
      <HeaderTitle
        placeholder="Balout"
        primary="شیرینی بلوط"
        secondary="بلوط؛ شیرینیِ لحظه‌های کنار هم بودن"
        size="xl"
        align="center"
        primaryFirst
        className="home__hero-title"
      />

      {/* Carousel / cake with macarons */}
      <div className="carousel-layout">
        <div className="carousel-layout__side carousel-layout__side--right">
          <img src={macaronRight} alt="" className="carousel-layout__img--right" />
        </div>
        <div className="carousel-layout__center">
          <img src={chocolateCake} alt="کیک شکلاتی" className="carousel-layout__cake" />
        </div>
        <div className="carousel-layout__side carousel-layout__side--left">
          <img src={macaronLeft} alt="" className="carousel-layout__img--left" />
        </div>
      </div>

      {/* For The Best */}
      <HeaderTitle
        placeholder="For The Best"
        secondary="بهترین ها"
        primary="را از مــــا بخـــــواهید"
        size="lg"
        align="center"
        className="home__best-title"
      />

      {/* Decor cards */}
      <div className="max-container home-decor">
        <div className="home-decor__row">
          {DECOR_CARDS.map((card) => {
            const content = (
              <>
                <div className="home-decor__card-text">
                  <p className="home-decor__cards--title">{card.title}</p>
                  <p className="home-decor__cards--subtitle">{card.subtitle}</p>
                </div>
                <img src={card.image} alt={card.subtitle} />
              </>
            )

            return card.to ? (
              <Link
                key={card.subtitle}
                to={card.to}
                className="home-decor__card home-decor__card--link"
              >
                {content}
              </Link>
            ) : (
              <div key={card.subtitle} className="home-decor__card">
                {content}
              </div>
            )
          })}
        </div>
      </div>

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

      {/* Sohan */}
      <section className="sohan-section">
        <img src={peste} alt="" className="sohan-section__peste" />
        <div className="sohan-section__inner">
          <div className="sohan-section__top">
            <div className="sohan-section__media">
              <img src={sohan} alt="سوهان" className="sohan-section__image" />
              <img src={sohanPattern} alt="" className="sohan-section__pattern" />
            </div>
            <HeaderTitle
              placeholder="Sohan"
              secondary="سوهان"
              primary="لذیذ و تازه بلوط"
              size="lg"
              align="start"
              className="sohan-section__title"
            />
          </div>
          <p className="sohan-section__text">
            سوهان یکی از اصیل‌ترین سوغات قم است که در شیرینی‌سرای بلوط با استفاده از مواد اولیه
            باکیفیت و تازه تهیه می‌شود. عطر دل‌انگیز کره و زعفران در کنار بافتی لطیف و طعمی
            ماندگار، سوهان بلوط را به انتخابی مناسب برای پذیرایی و هدیه تبدیل کرده است.
          </p>
        </div>
      </section>

      {/* Special offers + hours */}
      <div className="home-footer-block">
        <section className="offers-wrapper">
          <div className="offers-wrapper__img">
            <img src={cookies} alt="کوکی" />
          </div>

          <HeaderTitle
            placeholder="Special Menu Offers"
            secondary="پیشنهاد ویژه"
            primary="مارو از دست ندید!"
            size="lg"
            align="center"
            className="offers-wrapper__title"
          />

          <div className="offers">
            {OFFER_CATEGORIES.map((cat, index) => {
              const isOpen = openOffer === index
              return (
                <div key={cat.title} className="offers__item">
                  <button
                    type="button"
                    className={`offers__trigger${isOpen ? ' offers__trigger--open' : ''}`}
                    onClick={() => setOpenOffer(isOpen ? -1 : index)}
                  >
                    <span className="star">✱</span>
                    <span>{cat.title}</span>
                  </button>
                  {isOpen && cat.description && (
                    <div className="offers__body">
                      <p className="offers__description">{cat.description}</p>
                      <div className="offers__cta">
                        <Link to="/products" className="btn-primary">
                          مشاهده محصولات
                          <ChevronLeft size={14} />
                        </Link>
                      </div>
                    </div>
                  )}
                </div>
              )
            })}
          </div>

          <div className="semicolon">
            <img src={flatLay} alt="" />
          </div>

          <HeaderTitle
            placeholder="Working Hours"
            secondary="ساعت کاری"
            primary="کافه نان و شیرینی بلوط"
            size="lg"
            align="center"
          />

          <div className="hours">
            <div>
              <span className="star">✱</span>
              شنبه تا پنجشنبه <span className="hours__number">۸</span> صبـــــــــح /{' '}
              <span className="hours__number">۱۲</span> شـــــــــــب
            </div>
            <div>
              <span className="star">✱</span>
              جمعه و تعطیلات <span className="hours__number">۹</span> صبـــــــــح /{' '}
              <span className="hours__number">۱۲</span> شـــــــــــب
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}