Full website

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -0,0 +1,567 @@
+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, resolveLocalized, toRecord } from '../../lib/localization'
+
+type DynamicPageRendererProps = {
+  sections: PageSection[]
+  categories: Category[]
+  lang?: string
+}
+
+function categoryName(category: Category, lang: string) {
+  if (typeof category.name === 'string') return category.name
+  return category.name[lang] ?? category.name.th ?? category.name.en ?? Object.values(category.name)[0] ?? ''
+}
+
+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 AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const slides = Array.isArray(payload.slides) ? payload.slides : []
+  if (!slides.length) return null
+
+  return (
+    <section className="bg-pop-black px-4 py-3 text-center text-sm font-semibold tracking-wide text-white">
+      {slides.map((slide, index) => (
+        <span key={index} className={index === 0 ? '' : 'hidden md:inline'}>
+          {index > 0 && <span className="mx-4 text-white/30">/</span>}
+          {localizedFromRecord({ slide }, 'slide', lang)}
+        </span>
+      ))}
+    </section>
+  )
+}
+
+function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const tagline = localizedFromRecord(payload, 'tagline', lang)
+  const title = localizedFromRecord(payload, 'title', lang)
+  const description = localizedFromRecord(payload, 'description', lang)
+  const buttonText = localizedFromRecord(payload, 'buttonText', lang)
+  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-[78vh] w-full items-center justify-center overflow-hidden bg-white">
+      <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-gradient-to-r from-pop-bg/90 via-pop-bg/55 to-white/10" />
+      <div className="relative z-10 mx-auto w-full max-w-6xl px-6 py-24">
+        <div className="max-w-3xl space-y-6">
+          {tagline && (
+            <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
+              {tagline}
+            </p>
+          )}
+          <h1 className="text-5xl font-semibold leading-tight text-pop-black md:text-7xl">
+            {title || 'HomAroma'}
+          </h1>
+          {description && (
+            <p className="max-w-2xl text-lg leading-relaxed text-gray-700 md:text-xl">
+              {description}
+            </p>
+          )}
+          <Link href={buttonLink} className="inline-flex rounded-full bg-pop-pink px-8 py-4 font-semibold text-white shadow-brutal transition hover:bg-pop-red">
+            {buttonText || 'Explore Collection'}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CategoriesSection({
+  payload,
+  categories,
+  lang,
+}: {
+  payload: Record<string, unknown>
+  categories: Category[]
+  lang: string
+}) {
+  const title = localizedFromRecord(payload, 'title', lang) || 'Our Collections'
+  const subtitle = localizedFromRecord(payload, 'subtitle', lang)
+  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-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, lang)
+
+            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} Products</span>
+                  )}
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const title = localizedFromRecord(payload, 'title', lang) || 'Featured Picks'
+  const subtitle = localizedFromRecord(payload, 'subtitle', lang)
+  const products = getProducts(payload)
+
+  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">
+            View All Collection &rarr;
+          </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">
+            No products found in this section.
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function BannerSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const title = localizedFromRecord(payload, 'title', lang)
+  const description = localizedFromRecord(payload, 'description', lang)
+  const buttonText = localizedFromRecord(payload, 'buttonText', lang)
+  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 title = localizedFromRecord(payload, 'title', lang)
+  const content = localizedFromRecord(payload, 'content', lang)
+  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 title = localizedFromRecord(payload, 'title', lang) || 'Stay in touch'
+  const description = localizedFromRecord(payload, 'description', lang)
+  const buttonText = localizedFromRecord(payload, 'buttonText', lang) || '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 title = localizedFromRecord(payload, 'title', lang)
+  const description = localizedFromRecord(payload, 'description', lang)
+  const buttonText = localizedFromRecord(payload, 'buttonText', lang)
+  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 title = localizedFromRecord(payload, 'title', lang)
+  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', lang)
+            const description = localizedFromRecord(slide, 'description', lang)
+            const category = localizedFromRecord(slide, 'category', lang)
+            const buttonText = localizedFromRecord(slide, 'buttonText', lang)
+            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 title = localizedFromRecord(payload, 'title', lang) || 'Scent Guide Article'
+  const subtitle = localizedFromRecord(payload, 'subtitle', lang)
+  const author = localizedFromRecord(payload, 'author', lang)
+  const category = localizedFromRecord(payload, 'category', lang)
+  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
+      : ''
+
+  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 && `By ${author}`, date].filter(Boolean).join(' / ')}
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const title = localizedFromRecord(payload, 'title', lang) || 'Scent Notes'
+  const description = localizedFromRecord(payload, 'description', lang)
+  const notes = [
+    ['Top Notes', optionalText(payload.topNotes, lang) || 'The initial, lighter smells of the fragrance.'],
+    ['Heart Notes', optionalText(payload.heartNotes ?? payload.middleNotes, lang) || 'The core of the fragrance, emerging just after the top notes.'],
+    ['Base Notes', optionalText(payload.baseNotes, lang) || '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 quote = localizedFromRecord(payload, 'quote', lang)
+  const author = localizedFromRecord(payload, 'author', lang)
+  const role = localizedFromRecord(payload, 'role', lang)
+  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 }: { payload: Record<string, unknown> }) {
+  const categories = Array.isArray(payload.categories) ? payload.categories.map(toRecord) : []
+  if (!categories.length) return null
+
+  return (
+    <section className="bg-pop-bg px-6 py-20">
+      <div className="mx-auto max-w-4xl space-y-10">
+        {categories.map((category, categoryIndex) => {
+          const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
+          const name = typeof category.name === 'string' ? category.name : ''
+          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 = typeof item.q === 'string' ? item.q : ''
+                  const answer = typeof item.a === 'string' ? item.a : ''
+                  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 }: { payload: Record<string, unknown> }) {
+  const items = [
+    ['ที่อยู่', typeof payload.address === 'string' ? payload.address : '', MapPin],
+    ['อีเมล', typeof payload.email === 'string' ? payload.email : '', Mail],
+    ['Line', typeof payload.line === 'string' ? payload.line : '', MessageCircle],
+    ['เวลาทำการ', typeof payload.hours === 'string' ? payload.hours : '', 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">
+        {items.map(([label, value, Icon]) => {
+          if (!value) return null
+
+          return (
+            <article key={label} 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>
+              {label === 'อีเมล' ? (
+                <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 = 'th' }: DynamicPageRendererProps) {
+  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} />
+          case 'CONTACT_INFO':
+            return <ContactInfoSection key={section.id} payload={payload} />
+          default:
+            if (process.env.NODE_ENV !== 'production') {
+              console.warn(`[DynamicPageRenderer] Unsupported section type: ${section.type}`)
+            }
+            return null
+        }
+      })}
+    </div>
+  )
+}