"use client"

import Image from 'next/image'
import Link from '../LocalizedLink'
import { Clock, Mail, MapPin, MessageCircle, Send, ChevronLeft, ChevronRight, Leaf, Droplet, Sparkles, Gift, CheckCircle, ShieldCheck, Heart } from 'lucide-react'
import { useState, useRef } from '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 { useTranslation } from 'react-i18next'
import { customRegistry } from '../../config/customRegistry'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination, Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

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.map(v => localizedValue(v, lang)).filter(Boolean).join(', ')
  return localizedValue(value, lang)
}

function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
  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 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 left-0 top-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-surface-card'}`}
      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 { t } = useTranslation()
  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'
  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined

  return (
    <section className="relative w-full flex flex-col md:block md:h-[90vh] md:aspect-[21/9] bg-surface-page overflow-hidden">
      <div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full">
        <Image
          src={imageUrl}
          alt={title || ''}
          fill
          unoptimized
          className="object-cover md:scale-[1.02]"
          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
        />
      </div>
      <div className="relative z-10 mx-auto py-12 w-full max-w-4xl space-y-6 px-8 text-center md:py-0 md:h-full md:flex md:flex-col md:justify-center md:items-center">
        <div className="space-y-6">
          {tagline && (
            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md md:text-sm">
              {tagline}
            </p>
          )}
          <h1 className="ui-hero-title">
            {renderAccentTitle(title || '', 'ui-accent-text font-medium')}
          </h1>
          {description && (
            <p className="ui-hero-copy">
              {description}
            </p>
          )}
          <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
            <Link
              href={buttonLink}
              className="ui-hero-button"
            >
              {buttonText || 'Explore Collection'}
            </Link>
            <a
              href="#categories"
              className="ui-hero-link group"
            >
              {t('dynamic.heroLearnMore', { lng: resolvedLang })}
              <span className="transition-transform group-hover:translate-x-1">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}

const ICON_MAP: Record<string, React.ElementType> = {
  leaf: Leaf,
  droplet: Droplet,
  sparkles: Sparkles,
  gift: Gift,
  check: CheckCircle,
  shield: ShieldCheck,
  heart: Heart,
}

function UspBarSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const items = Array.isArray(payload.items) ? payload.items : []
  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : 'var(--surface-page)'

  if (items.length === 0) return null

  return (
    <section className="w-full py-8 border-t border-b border-line-primary/10" style={{ backgroundColor }}>
      <div className="ui-section-shell">
        <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-${Math.min(items.length, 4)} gap-6 divide-y sm:divide-y-0 sm:divide-x divide-line-primary/20`}>
          {items.slice(0, 4).map((item: any, idx: number) => {
            const Icon = ICON_MAP[item.icon] || CheckCircle
            return (
              <div key={idx} className="flex items-start gap-4 px-4 pt-4 sm:pt-0 first:pt-0">
                <div className="flex-shrink-0 text-brand-primary">
                  <Icon className="w-8 h-8" strokeWidth={1.5} />
                </div>
                <div>
                  <h3 className="text-sm md:text-base font-semibold text-text-main">
                    {localizedFromRecord(item, 'title', resolvedLang)}
                  </h3>
                  {item.subtitle && (
                    <p className="text-xs md:text-sm text-muted-text mt-1">
                      {localizedFromRecord(item, 'subtitle', resolvedLang)}
                    </p>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function HeroV2Section({ 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 primaryBtnText = localizedFromRecord(payload, 'primaryButtonText', resolvedLang)
  const primaryBtnLink = typeof payload.primaryButtonLink === 'string' ? payload.primaryButtonLink : undefined
  const secondaryBtnText = localizedFromRecord(payload, 'secondaryButtonText', resolvedLang)
  const secondaryBtnLink = typeof payload.secondaryButtonLink === 'string' ? payload.secondaryButtonLink : undefined

  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
  const align = typeof payload.contentAlignment === 'string' ? payload.contentAlignment : 'left'
  const showOrnament = typeof payload.showOrnament === 'boolean' ? payload.showOrnament : true
  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined

  // Alignment classes
  const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start'

  return (
    <section className="relative w-full flex flex-col md:block md:h-[80vh] md:min-h-[600px] bg-surface-page overflow-hidden">
      <div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full">
        <Image
          src={imageUrl}
          alt={title || 'Hero'}
          fill
          unoptimized
          className="object-cover"
          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
        />
      </div>
      
      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 py-12 md:py-0 md:h-full md:flex md:items-center md:px-12">
        <div className={`max-w-xl flex flex-col gap-6 ${alignClass}`}>
          {tagline && (
            <div className="flex items-center gap-4">
              {showOrnament && align !== 'right' && <div className="w-8 h-[1px] bg-brand-primary" />}
              <span className="text-sm font-semibold tracking-[0.2em] uppercase text-brand-primary">
                {tagline}
              </span>
              {showOrnament && align !== 'left' && <div className="w-8 h-[1px] bg-brand-primary" />}
            </div>
          )}
          
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-text-main leading-tight">
            {renderAccentTitle(title || '', 'text-brand-primary')}
          </h1>

          {showOrnament && (
            <div className="flex justify-center items-center text-brand-primary my-2">
              <Sparkles className="w-5 h-5" />
            </div>
          )}

          {description && (
            <p className="text-base md:text-lg text-text-main/80 leading-relaxed max-w-md">
              {description}
            </p>
          )}

          <div className={`flex flex-col sm:flex-row items-center gap-4 mt-4 w-full sm:w-auto ${align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start'}`}>
            {primaryBtnText && primaryBtnLink && (
              <Link
                href={primaryBtnLink}
                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-[#A18868] text-white font-medium rounded-md hover:bg-[#8B7355] transition-colors w-full sm:w-auto"
              >
                {primaryBtnText}
                <ChevronRight className="w-4 h-4" />
              </Link>
            )}
            {secondaryBtnText && secondaryBtnLink && (
              <Link
                href={secondaryBtnLink}
                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-[#A18868] text-[#A18868] font-medium rounded-md hover:bg-[#A18868]/5 transition-colors w-full sm:w-auto"
              >
                {secondaryBtnText}
                <ChevronRight className="w-4 h-4" />
              </Link>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}

function CategoriesSection({
  payload,
  categories,
  lang,
}: {
  payload: Record<string, unknown>
  categories: Category[]
  lang: string
}) {
  const i18nLang = useLang()
  const { t } = useTranslation()
  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

  return (
    <section id="categories" className="bg-surface-page ui-section-band">
      <div className="ui-section-shell space-y-14">
        <div className="mx-auto max-w-2xl space-y-4 text-center">
          <h2 className="ui-section-title">{title}</h2>
          {subtitle && <p className="ui-section-subtitle">{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-card transition hover:-translate-y-1 hover:shadow-card-hover"
              >
                <Image
                  src={category.imageUrl || getCategoryImage(name)}
                  alt={name}
                  fill
                  unoptimized
                  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/80 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
                <div className="absolute bottom-5 left-5 right-5 z-20 text-white">
                  <span className="block text-lg font-semibold">{name}</span>
                  {category._count && (
                    <span className="text-sm text-white/90">
                      {category._count.products} {t('dynamic.products', { lng: resolvedLang })}
                    </span>
                  )}
                </div>
              </Link>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const { t } = useTranslation()
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
  const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
  const layout = typeof payload.layout === 'string' ? payload.layout : 'grid'
  const products = getProducts(payload)
  
  const carouselRef = useRef<HTMLDivElement>(null)
  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' })
  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' })

  return (
    <section className="bg-surface-page ui-section-band">
      <div className="ui-section-shell space-y-10">
        <div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
          <div>
            <h2 className="ui-section-title">{title}</h2>
            {subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
          </div>
          <Link href="/shop" className="ui-section-link">
            {t('dynamic.viewAll', { lng: resolvedLang })}
          </Link>
        </div>
        {products.length ? (
          layout === 'carousel' ? (
            <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
              <button
                onClick={scrollLeft}
                className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
                aria-label="Scroll left"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>
              <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-4">
                {products.map((product) => (
                  <div key={product.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                    <ProductCard product={product} />
                  </div>
                ))}
              </div>
              <button
                onClick={scrollRight}
                className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
                aria-label="Scroll right"
              >
                <ChevronRight className="h-6 w-6" />
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
              {products.map((product) => <ProductCard key={product.id} product={product} />)}
            </div>
          )
        ) : (
          <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
            {t('dynamic.noProducts', { lng: resolvedLang })}
          </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 focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined

  const content = (
    <div className="ui-banner-shell">
      <Image
        src={imageUrl}
        alt={title || 'Banner'}
        fill
        unoptimized
        className="absolute inset-0 h-full w-full object-cover"
        style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
      />
      <div className="ui-banner-overlay" />
      <div className="ui-banner-content">
        {title && <h2 className="text-3xl font-semibold text-brand-primary drop-shadow-md md:text-5xl">{title}</h2>}
        {description && <p className="text-surface-page/90 drop-shadow-sm">{description}</p>}
        {buttonText && <span className="inline-flex cursor-pointer rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main transition-colors hover:bg-brand-primary hover:text-surface-card">{buttonText}</span>}
      </div>
    </div>
  )

  return <section className="bg-surface-page ui-section-band">{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-surface-page ui-section-band">
      <div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
        {title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
        {content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
      </div>
    </section>
  )
}

function ArticleMediaSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const heading = localizedFromRecord(payload, 'heading', resolvedLang)
  const body = localizedFromRecord(payload, 'body', resolvedLang)
  const imageAlt = localizedFromRecord(payload, 'imageAlt', resolvedLang)
  const imageCaption = localizedFromRecord(payload, 'imageCaption', resolvedLang)
  const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : ''
  const imagePosition = payload.imagePosition === 'left' || payload.imagePosition === 'top'
    ? payload.imagePosition
    : 'right'
  const widthClass = payload.width === 'narrow'
    ? 'max-w-3xl'
    : payload.width === 'wide'
      ? 'max-w-7xl'
      : 'max-w-6xl'
  const backgroundClass = payload.background === 'muted'
    ? 'bg-surface-card'
    : 'bg-surface-page'

  if (!body) return null

  const copy = (
    <div className="flex min-w-0 flex-col justify-center">
      {heading && (
        <h2 className="mb-5 text-3xl font-semibold text-text-main md:text-4xl">
          {heading}
        </h2>
      )}
      <p className="whitespace-pre-line text-base leading-8 text-muted-text md:text-lg">
        {body}
      </p>
    </div>
  )

  const media = imageUrl ? (
    <figure className="min-w-0">
      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg bg-surface-page">
        <Image
          src={imageUrl}
          alt={imageAlt || heading || ''}
          fill
          unoptimized
          sizes="(max-width: 768px) 100vw, 50vw"
          className="object-cover"
        />
      </div>
      {imageCaption && (
        <figcaption className="mt-3 text-sm leading-6 text-muted-text">
          {imageCaption}
        </figcaption>
      )}
    </figure>
  ) : null

  return (
    <section className={`${backgroundClass} ui-section-band`}>
      <div className={`mx-auto ${widthClass}`}>
        {!media ? copy : imagePosition === 'top' ? (
          <div className="space-y-8">
            {media}
            {copy}
          </div>
        ) : (
          <div className="grid items-center gap-8 md:grid-cols-2 md:gap-12">
            <div className={imagePosition === 'right' ? 'md:order-2' : undefined}>
              {media}
            </div>
            <div className={imagePosition === 'right' ? 'md:order-1' : undefined}>
              {copy}
            </div>
          </div>
        )}
      </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="ui-section-dark">
      <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-surface-card md:text-4xl">{title}</h2>
          {description && <p className="max-w-2xl text-surface-card">{description}</p>}
        </div>
        <form className="flex flex-col gap-3 sm:flex-row">
          <input className="ui-form-shell min-w-0 rounded-full" placeholder={placeholder} type="email" />
          <button className="ui-button-brand rounded-full" 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-surface-page ui-section-band" 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 relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
            <Image
              src={imageUrl}
              alt={title || 'Editorial'}
              fill
              unoptimized
              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-text-main md:text-6xl" style={{ color: textColor }}>
              {renderAccentTitle(title)}
            </h2>
          )}
          <div className="h-px w-14 bg-brand-primary" />
          {description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
          {buttonText && buttonLink && (
            <Link href={buttonLink} className="ui-section-link inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-surface-card">
              {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) : []
  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
  const bgClass = backgroundColor ? `bg-pop-${backgroundColor}` : 'bg-surface-page'
  const textClass = textColor ? `text-pop-${textColor}` : 'text-text-main'

  const isSplitScreen = payload.layout === 'split_screen'
  const imagePosition = typeof payload.imagePosition === 'string' ? payload.imagePosition : 'left'

  if (!slides.length) return null

  return (
    <section className={`overflow-hidden py-16 md:py-24 ${bgClass} ${textClass}`}>
      <div className={isSplitScreen ? 'w-full space-y-12' : 'mx-auto max-w-7xl px-6 space-y-12'}>
        {title && (
          <div className={`space-y-4 text-center ${isSplitScreen ? 'px-4 md:px-8' : ''}`}>
            <h2 className={`font-serif text-3xl font-light tracking-wide md:text-5xl ${textClass}`}>
              {renderAccentTitle(title)}
            </h2>
            <div className="mx-auto h-px w-16 bg-brand-primary" />
          </div>
        )}

        <div className="relative select-none pb-12">
          <Swiper
            modules={[Autoplay, Pagination, Navigation]}
            spaceBetween={isSplitScreen ? 0 : 30}
            slidesPerView={1}
            breakpoints={isSplitScreen ? undefined : {
              640: { slidesPerView: 2 },
              1024: { slidesPerView: 3 }
            }}
            pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-brand-primary' }}
            navigation={true}
            autoplay={{ delay: 5000, disableOnInteraction: false }}
            grabCursor={true}
            className="w-full"
          >
            {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 (
                <SwiperSlide key={index} className="h-auto flex flex-col">
                  {isSplitScreen ? (
                    <div className={`group grid grid-cols-1 bg-surface-card overflow-hidden transition-all duration-300 ${
                      imagePosition === 'left' ? 'md:grid-cols-[65%_35%]' : 'md:grid-cols-[35%_65%]'
                    }`}>
                      {imageUrl ? (
                        <div className={`relative aspect-[4/3] md:aspect-auto overflow-hidden h-64 md:h-full min-h-[300px] md:min-h-[500px] lg:min-h-[600px] ${
                          imagePosition === 'left' ? 'order-1 md:order-1' : 'order-1 md:order-2'
                        }`}>
                          <Image
                            src={imageUrl}
                            alt={slideTitle || 'Editorial slide'}
                            fill
                            unoptimized
                            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
                          />
                        </div>
                      ) : null}
                      <div className={`space-y-6 p-6 md:p-16 lg:p-24 flex flex-col justify-center ${
                        imagePosition === 'left' ? 'order-2 md:order-2' : 'order-2 md:order-1'
                      }`}>
                        <div className="space-y-3">
                          {category && <span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-brand-primary">{category}</span>}
                          {slideTitle && <h3 className="font-serif text-xl font-light tracking-wide text-text-main">{renderAccentTitle(slideTitle)}</h3>}
                          {description && <p className="line-clamp-6 text-xs font-light leading-relaxed text-muted-text md:text-sm">{description}</p>}
                        </div>
                        {buttonText && buttonLink && (
                          <div className="pt-2">
                            <Link href={buttonLink} className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-primary hover:text-text-main transition-colors group/link">
                              {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
                            </Link>
                          </div>
                        )}
                      </div>
                    </div>
                  ) : (
                    <div className="ui-card overflow-hidden group flex flex-col h-full transition-all duration-300 hover:border-brand-primary/30">
                      {imageUrl ? (
                        <div className="relative aspect-[4/3] overflow-hidden">
                          <Image
                            src={imageUrl}
                            alt={slideTitle || 'Editorial slide'}
                            fill
                            unoptimized
                            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
                          />
                        </div>
                      ) : null}
                      <div className="p-6 flex flex-col flex-1 justify-between space-y-6">
                        <div className="space-y-3">
                          {category && <span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-brand-primary">{category}</span>}
                          {slideTitle && <h3 className="font-serif text-xl font-light tracking-wide text-text-main">{renderAccentTitle(slideTitle)}</h3>}
                          {description && <p className="line-clamp-3 text-xs font-light leading-relaxed text-muted-text md:text-sm">{description}</p>}
                        </div>
                        {buttonText && buttonLink && (
                          <div className="pt-2">
                            <Link href={buttonLink} className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-primary hover:text-text-main transition-colors group/link">
                              {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
                            </Link>
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </SwiperSlide>
              )
            })}
          </Swiper>
        </div>
      </div>
    </section>
  )
}

function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const { t } = useTranslation()
  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 focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined

  return (
    <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
      {imageUrl && (
        <>
          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }} />
        </>
      )}
      <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-brand-accent">{category}</p>}
        <h1 className="ui-hero-title">{title}</h1>
        {subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
        {(author || date) && (
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
            {[author && `${t('dynamic.authorBy', { lng: resolvedLang })} ${author}`, date].filter(Boolean).join(' / ')}
          </p>
        )}
      </div>
    </section>
  )
}

function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const { t } = useTranslation()
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
  const description = localizedFromRecord(payload, 'description', resolvedLang)
  
  const notes = [
    [t('dynamic.notes.top', { lng: resolvedLang }), optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
    [t('dynamic.notes.heart', { lng: resolvedLang }), optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
    [t('dynamic.notes.base', { lng: resolvedLang }), optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
  ]

  return (
    <section className="bg-surface-page ui-section-band">
      <div className="mx-auto max-w-6xl space-y-12 text-center">
        <div className="mx-auto max-w-3xl space-y-4">
          <h2 className="ui-section-title">{title}</h2>
          {description && <p className="text-muted-text">{description}</p>}
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {notes.map(([label, value]) => (
            <article key={label} className="ui-section-card p-8 text-left">
              <h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-brand-primary">{label}</h3>
              <p className="leading-relaxed text-muted-text">{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-surface-page px-6 py-24">
      <div className="mx-auto max-w-4xl text-center">
        <p className="mb-8 text-7xl leading-none text-brand-primary/25">&quot;</p>
        <blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
          {quote}
        </blockquote>
        {(author || role) && (
          <p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-muted-text">
            {[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)
  const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
  const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
  const iconColor = typeof payload.iconColor === 'string' ? payload.iconColor : undefined

  return (
    <section className="ui-section-band" style={{ backgroundColor, color: textColor }}>
      <div className="mx-auto max-w-4xl space-y-10">
        {sectionTitle && <h2 className="ui-section-title">{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">
                  {icon && <span style={{ color: iconColor }}>{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-surface-card p-5 shadow-card">
                      <summary className="cursor-pointer list-none text-lg font-semibold marker:hidden">
                        {question}
                      </summary>
                      <p className="mt-4 whitespace-pre-wrap leading-relaxed text-muted-text">{answer}</p>
                    </details>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>
    </section>
  )
}

function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const { t } = useTranslation()
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  
  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: t('dynamic.contactInfo.address', { lng: resolvedLang }), value: address, Icon: MapPin },
    { key: 'email', label: t('dynamic.contactInfo.email', { lng: resolvedLang }), value: email, Icon: Mail },
    { key: 'line', label: t('dynamic.contactInfo.line', { lng: resolvedLang }), value: line, Icon: MessageCircle },
    { key: 'hours', label: t('dynamic.contactInfo.hours', { lng: resolvedLang }), value: hours, Icon: Clock },
  ] as const

  return (
    <section className="bg-surface-page ui-section-band">
      <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="ui-section-title">{title}</h2>
          </div>
        )}
        {items.map(({ key, label, value, Icon }) => {
          if (!value) return null

          return (
            <article key={key} className="ui-section-card-muted p-6 text-center">
              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-card text-brand-primary">
                <Icon className="h-6 w-6" />
              </div>
              <h3 className="mb-2 text-lg font-semibold text-text-main">{label}</h3>
              {key === 'email' ? (
                <a className="break-words text-muted-text transition hover:text-brand-primary" href={`mailto:${value}`}>
                  {value}
                </a>
              ) : (
                <p className="whitespace-pre-wrap break-words text-muted-text">{value}</p>
              )}
            </article>
          )
        })}
      </div>
    </section>
  )
}

function ContactFormSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
  const { t } = useTranslation()
  const i18nLang = useLang()
  const resolvedLang = lang === 'all' ? i18nLang : lang
  const [formData, setFormData] = useState({ name: '', email: '', message: '' })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const title = localizedFromRecord(payload, 'title', resolvedLang)
  const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setError(null)
    setIsSuccess(false)
    
    try {
      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
      const res = await fetch(`${apiUrl}/contacts`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      
      const data = await res.json().catch(() => ({}));
      
      if (!res.ok || data.error) {
        throw new Error(data.error || 'Failed to send message');
      }

      setIsSuccess(true)
      setFormData({ name: '', email: '', message: '' })
      setTimeout(() => setIsSuccess(false), 3000)
    } catch (err: any) {
      console.error(err);
      setError(err.message || 'An unexpected error occurred. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  return (
    <section className="ui-section-band bg-surface-page px-4 py-20 md:px-8">
      <div className="mx-auto max-w-3xl">
        <div className="mb-12 text-center">
          <h2 className="mb-4 text-3xl font-semibold text-text-main md:text-4xl">
            {title || t('contactForm.title', { lng: resolvedLang })}
          </h2>
          <p className="mx-auto max-w-xl text-lg text-muted-text">
            {subtitle || t('contactForm.subtitle', { lng: resolvedLang })}
          </p>
        </div>

        <div className="rounded-3xl border border-line-primary/20 bg-surface-card p-8 shadow-card md:p-12">
          {error && (
            <div className="mb-6 rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
              {error}
            </div>
          )}
          {isSuccess ? (
            <div className="py-12 text-center">
              <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-brand-success/20 text-brand-success">
                <Send size={32} />
              </div>
              <h3 className="mb-2 text-2xl font-semibold text-text-main">{t('contactForm.successTitle', { lng: resolvedLang })}</h3>
              <p className="text-muted-text">{t('contactForm.successBody', { lng: resolvedLang })}</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                <div className="space-y-2">
                  <label htmlFor="name" className="block text-sm font-medium text-text-main">
                    {t('contactForm.name', { lng: resolvedLang })}
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    required
                    value={formData.name}
                    onChange={handleChange}
                    placeholder={t('contactForm.namePlaceholder', { lng: resolvedLang })}
                    className="ui-form-shell"
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="email" className="block text-sm font-medium text-text-main">
                    {t('contactForm.email', { lng: resolvedLang })}
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    className="ui-form-shell"
                    placeholder="example@email.com"
                  />
                </div>
              </div>
              
              <div className="space-y-2">
                <label htmlFor="message" className="block text-sm font-medium text-text-main">
                  {t('contactForm.message', { lng: resolvedLang })}
                </label>
                <textarea
                  id="message"
                  name="message"
                  required
                  rows={4}
                  value={formData.message}
                  onChange={handleChange}
                  placeholder={t('contactForm.messagePlaceholder', { lng: resolvedLang })}
                  className="ui-form-shell resize-none"
                />
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className="flex w-full items-center justify-center gap-2 rounded-xl bg-brand-primary px-6 py-4 font-semibold text-white transition-colors hover:bg-brand-primary-hover disabled:cursor-not-allowed disabled:opacity-70"
              >
                {isSubmitting ? (
                  <span className="h-6 w-6 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                ) : (
                  <>
                    <Send size={18} />
                    {t('contactForm.submit', { lng: resolvedLang })}
                  </>
                )}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  )
}

import ScrollReveal from '../ScrollReveal'

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 (
              <ScrollReveal key={section.id}>
                <HeroSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'HERO_V2':
            return (
              <ScrollReveal key={section.id}>
                <HeroV2Section payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'USP_BAR':
            return (
              <ScrollReveal key={section.id}>
                <UspBarSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'CATEGORIES':
            return (
              <ScrollReveal key={section.id}>
                <CategoriesSection payload={payload} categories={categories} lang={lang} />
              </ScrollReveal>
            )
          case 'PRODUCTS':
            return (
              <ScrollReveal key={section.id}>
                <ProductsSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'PRODUCT_CAROUSEL':
            return (
              <ScrollReveal key={section.id}>
                <ProductsSection payload={{ ...payload, layout: 'carousel' }} lang={lang} />
              </ScrollReveal>
            )
          case 'BANNER':
            return (
              <ScrollReveal key={section.id}>
                <BannerSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'TEXT':
            return (
              <ScrollReveal key={section.id}>
                <TextSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'NEWSLETTER':
            return (
              <ScrollReveal key={section.id}>
                <NewsletterSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'EDITORIAL_TILE':
            return (
              <ScrollReveal key={section.id}>
                <EditorialTileSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'EDITORIAL_CAROUSEL':
            return (
              <ScrollReveal key={section.id}>
                <EditorialCarouselSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'HERO_ARTICLE':
            return (
              <ScrollReveal key={section.id}>
                <HeroArticleSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'RICH_TEXT':
            return (
              <ScrollReveal key={section.id}>
                <TextSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'ARTICLE_MEDIA':
            return (
              <ScrollReveal key={section.id}>
                <ArticleMediaSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'SCENT_NOTES_BREAKDOWN':
            return (
              <ScrollReveal key={section.id}>
                <ScentNotesBreakdownSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'QUOTE_CALLOUT':
            return (
              <ScrollReveal key={section.id}>
                <QuoteCalloutSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'ACCORDION':
            return (
              <ScrollReveal key={section.id}>
                <AccordionSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'CONTACT_INFO':
            return (
              <ScrollReveal key={section.id}>
                <ContactInfoSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'CONTACT_FORM':
            return (
              <ScrollReveal key={section.id}>
                <ContactFormSection payload={payload} lang={lang} />
              </ScrollReveal>
            )
          case 'CUSTOM': {
            const componentId = typeof payload.componentId === 'string' ? payload.componentId : ''
            const props = toRecord(payload.props)
            const CustomComponent = customRegistry[componentId]

            if (!CustomComponent) {
              if (process.env.NODE_ENV !== 'production') {
                console.warn(`[DynamicPageRenderer] Unknown custom component: ${componentId}`)
              }
              return null
            }

            return (
              <ScrollReveal key={section.id}>
                <CustomComponent props={props} lang={lang} />
              </ScrollReveal>
            )
          }
          default:
            if (process.env.NODE_ENV !== 'production') {
              console.warn(`[DynamicPageRenderer] Unsupported section type: ${section.type}`)
            }
            return null
        }
      })}
    </div>
  )
}