"use client"

import Link from 'next/link'
import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
import type { Category, PageSection, Product } from '@homaroma/types'
import { getCategoryImage } from '@homaroma/types'
import ProductCard from '../ProductCard'
import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
import { useLang } from '../../hooks/useLang'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'

type DynamicPageRendererProps = {
  sections: PageSection[]
  categories: Category[]
  lang?: string  // optional override; defaults to i18n.language
}

function categoryName(category: Category, lang: string) {
  return resolveCategoryName(category, lang)
}

function getProducts(payload: Record<string, unknown>): Product[] {
  return Array.isArray(payload.products) ? payload.products as Product[] : []
}

function getCategoriesFromPayload(payload: Record<string, unknown>): Category[] {
  return Array.isArray(payload.categories) ? payload.categories as Category[] : []
}

function localizedValue(value: unknown, lang: string) {
  return resolveLocalized(value as never, lang)
}

function optionalText(value: unknown, lang: string) {
  if (Array.isArray(value)) return value.filter(Boolean).join(', ')
  return localizedValue(value, lang)
}

function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic') {
  if (!text.includes('[') || !text.includes(']')) return text

  return text.split('[').map((part, index) => {
    if (!part.includes(']')) return <span key={index}>{part}</span>

    const [accent, rest] = part.split(']')
    return (
      <span key={index}>
        <span className={accentClassName}>{accent}</span>
        {rest}
      </span>
    )
  })
}

function heroLearnMoreText(lang: string) {
  const labels: Record<string, string> = {
    th: 'ดูรายละเอียดเพิ่มเติม',
    en: 'Learn More',
    ja: '詳しく見る',
    zh: '了解更多',
    vi: 'Tìm hiểu thêm',
    ko: '자세히 보기',
  }

  return labels[lang] ?? labels.en
}

function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const slides = Array.isArray(payload.slides) ? payload.slides : []
  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
  const speed = typeof payload.speed === 'number' ? payload.speed : 3000

  if (!slides.length) return null

  return (
    <section 
      className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
      style={{ backgroundColor, color: textColor }}
    >
      <Swiper
        modules={[Autoplay]}
        autoplay={{ delay: speed, disableOnInteraction: false }}
        loop={slides.length > 1}
        className="w-full select-none"
      >
        {slides.map((slide, index) => (
          <SwiperSlide key={index} className="flex items-center justify-center">
            <span className="inline-block truncate max-w-full">
              {localizedFromRecord({ slide }, 'slide', resolvedLang)}
            </span>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  )
}

function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
  const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'

  return (
    <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-neutral-900 md:aspect-[21/9] md:min-h-0">
      <img
        src={imageUrl}
        alt={title || 'HomAroma'}
        className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
      />
      <div className="absolute inset-0 bg-neutral-900/40" />
      <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" />
      <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
        <div className="space-y-6">
          {tagline && (
            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-white drop-shadow-md md:text-sm">
              {tagline}
            </p>
          )}
          <h1 className="font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
            {renderAccentTitle(title || 'HomAroma', 'font-medium italic text-[#E4BC32]')}
          </h1>
          {description && (
            <p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
              {description}
            </p>
          )}
          <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
            <Link
              href={buttonLink}
              className="rounded-full bg-white px-8 py-4 text-sm font-bold uppercase tracking-widest text-pop-black transition-all duration-300 hover:bg-pop-bg hover:shadow-xl"
            >
              {buttonText || 'Explore Collection'}
            </Link>
            <a
              href="#categories"
              className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-[#E4BC32]"
            >
              {heroLearnMoreText(resolvedLang)}
              <span className="transition-transform group-hover:translate-x-1">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}

function CategoriesSection({
  payload,
  categories,
  lang,
}: {
  payload: Record<string, unknown>
  categories: Category[]
  lang: string
}) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Our Collections'
  const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
  const categoryIds = Array.isArray(payload.categoryIds) ? payload.categoryIds.map(Number) : []
  const payloadCategories = getCategoriesFromPayload(payload)
  const sourceCategories = payloadCategories.length ? payloadCategories : categories
  const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
  const productsLabel: Record<string, string> = {
    th: 'สินค้า',
    en: 'Products',
    ja: '商品',
    zh: '商品',
    vi: 'Sản phẩm',
    ko: '상품',
  }

  return (
    <section id="categories" className="bg-white px-6 py-24">
      <div className="mx-auto max-w-7xl space-y-14">
        <div className="mx-auto max-w-2xl space-y-4 text-center">
          <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
          {subtitle && <p className="text-gray-500">{subtitle}</p>}
        </div>
        <div className="grid grid-cols-2 gap-5 md:grid-cols-5">
          {displayed.map((category) => {
            const name = categoryName(category, resolvedLang)

            return (
              <Link
                key={category.id}
                href={`/category/${category.id}`}
                className="group relative h-72 overflow-hidden rounded-2xl shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
              >
                <img
                  src={category.imageUrl || getCategoryImage(name)}
                  alt={name}
                  className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
                <div className="absolute bottom-5 left-5 right-5 text-white">
                  <span className="block text-lg font-semibold">{name}</span>
                  {category._count && (
                    <span className="text-sm text-white/80">
                      {category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en}
                    </span>
                  )}
                </div>
              </Link>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
  const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
  const products = getProducts(payload)
  const viewAllLabel: Record<string, string> = {
    th: 'ดูทั้งหมด →',
    en: 'View All Collection →',
    ja: 'すべて見る →',
    zh: '查看全部 →',
    vi: 'Xem tất cả →',
    ko: '전체 보기 →',
  }
  const emptyLabel: Record<string, string> = {
    th: 'ไม่พบสินค้าในหมวดนี้',
    en: 'No products found in this section.',
    ja: 'このセクションには商品がありません。',
    zh: '此区域中没有找到产品。',
    vi: 'Không tìm thấy sản phẩm nào trong mục này.',
    ko: '이 섹션에서 찾을 수 있는 상품이 없습니다.',
  }

  return (
    <section className="bg-pop-bg px-6 py-24">
      <div className="mx-auto max-w-7xl space-y-10">
        <div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
          <div>
            <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
            {subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>}
          </div>
          <Link href="/shop" className="font-semibold text-pop-pink transition hover:text-pop-red">
            {viewAllLabel[resolvedLang] ?? viewAllLabel.en}
          </Link>
        </div>
        {products.length ? (
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {products.map((product) => <ProductCard key={product.id} product={product} />)}
          </div>
        ) : (
          <p className="rounded-2xl bg-white p-8 text-center text-gray-500 shadow-brutal">
            {emptyLabel[resolvedLang] ?? emptyLabel.en}
          </p>
        )}
      </div>
    </section>
  )
}

function BannerSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
  const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''

  const content = (
    <div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal">
      <img src={imageUrl} alt={title || 'Banner'} className="absolute inset-0 h-full w-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-r from-pop-black/75 via-pop-black/35 to-transparent" />
      <div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
        {title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
        {description && <p className="text-white/90">{description}</p>}
        {buttonText && <span className="inline-flex rounded-full bg-white px-6 py-3 font-semibold text-pop-black">{buttonText}</span>}
      </div>
    </div>
  )

  return <section className="bg-white px-6 py-16">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
}

function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const content = localizedFromRecord(payload, 'content', resolvedLang)
  const alignClass = payload.textAlign === 'center'
    ? 'text-center'
    : payload.textAlign === 'right'
      ? 'text-right'
      : 'text-left'

  return (
    <section className="bg-white px-6 py-16">
      <div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
        {title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>}
        {content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />}
      </div>
    </section>
  )
}

function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Stay in touch'
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang) || 'Subscribe'
  const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'

  return (
    <section className="bg-pop-black px-6 py-20 text-white">
      <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
        <div className="space-y-3">
          <h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
          {description && <p className="max-w-2xl text-white/75">{description}</p>}
        </div>
        <form className="flex flex-col gap-3 sm:flex-row">
          <input className="min-w-0 rounded-full px-5 py-3 text-pop-black" placeholder={placeholder} type="email" />
          <button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button">
            {buttonText}
          </button>
        </form>
      </div>
    </section>
  )
}

function EditorialTileSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
  const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : ''
  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : ''
  const imagePosition = payload.imagePosition === 'right' ? 'right' : 'left'
  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined

  return (
    <section className="overflow-hidden bg-white px-6 py-20" style={{ backgroundColor, color: textColor }}>
      <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
        {imageUrl && (
          <div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
            <img
              src={imageUrl}
              alt={title || 'Editorial'}
              className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
            />
          </div>
        )}
        <div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
          {title && (
            <h2 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl" style={{ color: textColor }}>
              {renderAccentTitle(title)}
            </h2>
          )}
          <div className="h-px w-14 bg-pop-pink" />
          {description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>}
          {buttonText && buttonLink && (
            <Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-pop-pink hover:text-white">
              {buttonText}
            </Link>
          )}
        </div>
      </div>
    </section>
  )
}

function EditorialCarouselSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const slides = Array.isArray(payload.slides) ? payload.slides.map(toRecord) : []
  if (!slides.length) return null

  return (
    <section className="bg-pop-black px-6 py-20 text-white">
      <div className="mx-auto max-w-7xl space-y-12">
        {title && (
          <div className="mx-auto max-w-3xl space-y-4 text-center">
            <h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'text-pop-yellow italic')}</h2>
            <div className="mx-auto h-px w-16 bg-pop-yellow" />
          </div>
        )}
        <div className="grid gap-6 md:grid-cols-3">
          {slides.map((slide, index) => {
            const slideTitle = localizedFromRecord(slide, 'title', resolvedLang)
            const description = localizedFromRecord(slide, 'description', resolvedLang)
            const category = localizedFromRecord(slide, 'category', resolvedLang)
            const buttonText = localizedFromRecord(slide, 'buttonText', resolvedLang)
            const buttonLink = typeof slide.buttonLink === 'string' ? slide.buttonLink : ''
            const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''

            return (
              <article key={index} className="group overflow-hidden rounded-3xl border border-white/10 bg-white/5">
                {imageUrl && (
                  <div className="aspect-[4/3] overflow-hidden">
                    <img src={imageUrl} alt={slideTitle || 'Editorial slide'} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" />
                  </div>
                )}
                <div className="space-y-4 p-6">
                  {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>}
                  {slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>}
                  {description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
                  {buttonText && buttonLink && (
                    <Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-pop-yellow transition hover:text-white">
                      {buttonText} &rarr;
                    </Link>
                  )}
                </div>
              </article>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Guide Article'
  const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
  const author = localizedFromRecord(payload, 'author', resolvedLang)
  const category = localizedFromRecord(payload, 'category', resolvedLang)
  const imageUrl = typeof payload.imageUrl === 'string'
    ? payload.imageUrl
    : typeof payload.backgroundImageUrl === 'string'
      ? payload.backgroundImageUrl
      : ''
  const date = typeof payload.date === 'string'
    ? payload.date
    : typeof payload.publishDate === 'string'
      ? payload.publishDate
      : ''
  const authorPrefix: Record<string, string> = {
    th: 'โดย',
    en: 'By',
    ja: '著者',
    zh: '作者',
    vi: 'Bởi',
    ko: '작성자',
  }

  return (
    <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-pop-black px-6 py-24 text-center text-white md:min-h-[76vh]">
      {imageUrl && (
        <>
          <img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" />
          <div className="absolute inset-0 bg-pop-black/55" />
        </>
      )}
      <div className="relative z-10 mx-auto max-w-4xl space-y-6">
        {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-yellow">{category}</p>}
        <h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
        {subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
        {(author || date) && (
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">
            {[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}
          </p>
        )}
      </div>
    </section>
  )
}

function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  const noteLabels: Record<string, Record<string, string>> = {
    th: { top: 'กลิ่นเปิด', heart: 'กลิ่นกลาง', base: 'กลิ่นฐาน' },
    en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
    ja: { top: 'トップノート', heart: 'ミドルノート', base: 'ベースノート' },
    zh: { top: '前调', heart: '中调', base: '后调' },
    vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
    ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' },
  }
  const labels = noteLabels[resolvedLang] ?? noteLabels.en
  const notes = [
    [labels.top, optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
    [labels.heart, optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
    [labels.base, optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
  ]

  return (
    <section className="bg-pop-bg px-6 py-20">
      <div className="mx-auto max-w-6xl space-y-12 text-center">
        <div className="mx-auto max-w-3xl space-y-4">
          <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
          {description && <p className="text-gray-600">{description}</p>}
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {notes.map(([label, value]) => (
            <article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal">
              <h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3>
              <p className="leading-relaxed text-gray-600">{value}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const quote = localizedFromRecord(payload, 'quote', resolvedLang)
  const author = localizedFromRecord(payload, 'author', resolvedLang)
  const role = localizedFromRecord(payload, 'role', resolvedLang)
  if (!quote) return null

  return (
    <section className="bg-white px-6 py-24">
      <div className="mx-auto max-w-4xl text-center">
        <p className="mb-8 text-7xl leading-none text-pop-pink/25">&quot;</p>
        <blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl">
          {quote}
        </blockquote>
        {(author || role) && (
          <p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-gray-500">
            {[author, role].filter(Boolean).join(' / ')}
          </p>
        )}
      </div>
    </section>
  )
}

function AccordionSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const categories = Array.isArray(payload.categories) ? payload.categories.map(toRecord) : []
  if (!categories.length) return null
  const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang)

  return (
    <section className="bg-pop-bg px-6 py-20">
      <div className="mx-auto max-w-4xl space-y-10">
        {sectionTitle && <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{sectionTitle}</h2>}
        {categories.map((category, categoryIndex) => {
          const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
          const name = localizedFromRecord(category, 'name', resolvedLang)
          const icon = typeof category.icon === 'string' ? category.icon : ''

          return (
            <div key={categoryIndex} className="space-y-5">
              {name && (
                <h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black">
                  {icon && <span className="text-pop-pink">{icon}</span>}
                  {name}
                </h2>
              )}
              <div className="space-y-4">
                {questions.map((item, itemIndex) => {
                  const question = localizedFromRecord(item, 'q', resolvedLang)
                  const answer = localizedFromRecord(item, 'a', resolvedLang)
                  if (!question || !answer) return null

                  return (
                    <details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal">
                      <summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden">
                        {question}
                      </summary>
                      <p className="mt-4 whitespace-pre-wrap leading-relaxed text-gray-600">{answer}</p>
                    </details>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>
    </section>
  )
}

function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const labels: Record<string, Record<string, string>> = {
    th: { address: 'ที่อยู่', email: 'อีเมล', line: 'Line', hours: 'เวลาทำการ' },
    en: { address: 'Address', email: 'Email', line: 'Line', hours: 'Business Hours' },
    ja: { address: '住所', email: 'メール', line: 'Line', hours: '営業時間' },
    zh: { address: '地址', email: '电子邮件', line: 'Line', hours: '营业时间' },
    vi: { address: 'Địa chỉ', email: 'Email', line: 'Line', hours: 'Giờ làm việc' },
    ko: { address: '주소', email: '이메일', line: 'Line', hours: '운영 시간' },
  }
  const resolvedLabels = labels[resolvedLang] ?? labels.en
  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const address = localizedFromRecord(payload, 'address', resolvedLang)
  const email = typeof payload.email === 'string' ? payload.email : ''
  const line = typeof payload.line === 'string' ? payload.line : ''
  const hours = localizedFromRecord(payload, 'hours', resolvedLang)
  const items = [
    { key: 'address', label: resolvedLabels.address, value: address, Icon: MapPin },
    { key: 'email', label: resolvedLabels.email, value: email, Icon: Mail },
    { key: 'line', label: resolvedLabels.line, value: line, Icon: MessageCircle },
    { key: 'hours', label: resolvedLabels.hours, value: hours, Icon: Clock },
  ] as const

  return (
    <section className="bg-white px-6 py-20">
      <div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
        {title && (
          <div className="col-span-full mb-2">
            <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
          </div>
        )}
        {items.map(({ key, label, value, Icon }) => {
          if (!value) return null

          return (
            <article key={key} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal">
              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink">
                <Icon className="h-6 w-6" />
              </div>
              <h3 className="mb-2 text-lg font-semibold text-pop-black">{label}</h3>
              {key === 'email' ? (
                <a className="break-words text-gray-600 transition hover:text-pop-pink" href={`mailto:${value}`}>
                  {value}
                </a>
              ) : (
                <p className="whitespace-pre-wrap break-words text-gray-600">{value}</p>
              )}
            </article>
          )
        })}
      </div>
    </section>
  )
}

export default function DynamicPageRenderer({ sections, categories, lang: langProp }: DynamicPageRendererProps) {
  const i18nLang = useLang()
  // Use i18n.language reactively — switches immediately when user changes language
  const lang = langProp ?? i18nLang
  return (
    <div className="flex w-full flex-col">
      {sections.map((section) => {
        if (!section.isActive) return null

        const payload = toRecord(section.payload)
        const type = section.type.toUpperCase()

        switch (type) {
          case 'ANNOUNCEMENT_BAR':
            return <AnnouncementBar key={section.id} payload={payload} lang={lang} />
          case 'HERO':
            return <HeroSection key={section.id} payload={payload} lang={lang} />
          case 'CATEGORIES':
            return <CategoriesSection key={section.id} payload={payload} categories={categories} lang={lang} />
          case 'PRODUCTS':
          case 'PRODUCT_CAROUSEL':
            return <ProductsSection key={section.id} payload={payload} lang={lang} />
          case 'BANNER':
            return <BannerSection key={section.id} payload={payload} lang={lang} />
          case 'TEXT':
            return <TextSection key={section.id} payload={payload} lang={lang} />
          case 'NEWSLETTER':
            return <NewsletterSection key={section.id} payload={payload} lang={lang} />
          case 'EDITORIAL_TILE':
            return <EditorialTileSection key={section.id} payload={payload} lang={lang} />
          case 'EDITORIAL_CAROUSEL':
            return <EditorialCarouselSection key={section.id} payload={payload} lang={lang} />
          case 'HERO_ARTICLE':
            return <HeroArticleSection key={section.id} payload={payload} lang={lang} />
          case 'RICH_TEXT':
            return <TextSection key={section.id} payload={payload} lang={lang} />
          case 'SCENT_NOTES_BREAKDOWN':
            return <ScentNotesBreakdownSection key={section.id} payload={payload} lang={lang} />
          case 'QUOTE_CALLOUT':
            return <QuoteCalloutSection key={section.id} payload={payload} lang={lang} />
          case 'ACCORDION':
            return <AccordionSection key={section.id} payload={payload} lang={lang} />
          case 'CONTACT_INFO':
            return <ContactInfoSection key={section.id} payload={payload} lang={lang} />
          default:
            if (process.env.NODE_ENV !== 'production') {
              console.warn(`[DynamicPageRenderer] Unsupported section type: ${section.type}`)
            }
            return null
        }
      })}
    </div>
  )
}