keystone-design-bootstrap 1.0.48 → 1.0.49

package/src/design_system/sections/service-menu-section.tsx

@@ -0,0 +1,813 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { PhotoWithFallback, Carousel, Modal, MarkdownRenderer, Button } from '../elements';
+import type { OfferPublic } from '../../lib/server-api';
+import type { Service, ServiceItem } from '../../types/api/service';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { CompanyInformation } from '../../types/api/company-information';
+import type { PhotoAttachment } from '../../types/api/photos';
+
+const SERVICE_MENU_MODAL_ROOT_ID = 'service-menu-modal-root';
+const CYCLE_INTERVAL_MIN_MS = 6000;
+const CYCLE_INTERVAL_MAX_MS = 8000;
+
+/** Returns a stable value in [0, 1) from seed (for per-card random interval). */
+function seedToUnit(seed: string): number {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = (Math.imul(h, 16777619) >>> 0) >>> 0;
+  }
+  return (h >>> 0) / 4294967296;
+}
+
+/** Minimal package from public API (id, name, slug, summary, photo_attachments, description_markdown). */
+export interface PackagePublic {
+  id: number;
+  name: string;
+  slug: string;
+  summary?: string | null;
+  description_markdown?: string | null;
+  pricing_info?: string | null;
+  price_cents?: number | null;
+  photo_attachments?: PhotoAttachment[];
+  package_items?: Array<{ quantity: number; service_item?: { id: number; name: string; slug: string; summary?: string | null } }>;
+}
+
+/** Package with category names and first-service description fallback (derived from services). */
+export interface PackageForMenu extends PackagePublic {
+  category_names?: string[];
+  first_service_description_markdown?: string | null;
+}
+
+/** Offer with category names and first-service description fallback (derived from services). */
+export interface OfferForMenu extends OfferPublic {
+  category_names?: string[];
+  first_service_description_markdown?: string | null;
+}
+
+export interface ServiceMenuSectionProps {
+  title?: string;
+  subtitle?: string;
+  offers?: OfferPublic[] | null;
+  packages?: PackagePublic[] | null;
+  /** Services (used to derive service items for the third row). */
+  services?: Service[] | null;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+  viewAllHref?: string;
+  /** Label for the View All button (e.g. "View All"). */
+  viewAllText?: string;
+  /** Customer-friendly label for the third row (individual service items). Default "Treatments". */
+  servicesRowTitle?: string;
+  /** 'section' = compact header + carousel (e.g. home). 'page' = hero + grid (e.g. /service-menu). */
+  variant?: 'section' | 'page';
+}
+
+/** Service item with parent service info for display in the Service Menu (fallback description from service when item has none). */
+export interface ServiceItemWithService extends ServiceItem {
+  service_name?: string;
+  service_summary?: string | null;
+  service_description_markdown?: string | null;
+}
+
+type DetailItem =
+  | { type: 'offer'; item: OfferForMenu }
+  | { type: 'package'; item: PackageForMenu }
+  | { type: 'service_item'; item: ServiceItemWithService };
+
+function photoAttachmentDisplayUrl(pa: PhotoAttachment): string | undefined {
+  return pa.photo?.large_url || pa.photo?.medium_url;
+}
+function photoAttachmentAlt(pa: PhotoAttachment): string {
+  return pa.photo?.alt_text || pa.photo?.title || '';
+}
+
+/** Seeded shuffle: same seed => same order (SSR-safe). Different seeds => very different orders. */
+function shuffleWithSeed<T>(array: T[], seed: string): T[] {
+  if (array.length <= 1) return array;
+  const arr = [...array];
+  // FNV-1a style hash so small seed changes (e.g. index 0 vs 1 vs 2) produce very different values
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = (Math.imul(h, 16777619) >>> 0) >>> 0;
+  }
+  const next = (step: number) => {
+    h = (Math.imul(1664525, (h + step) >>> 0) + 1013904223) >>> 0;
+    return (h >>> 0) / 4294967296;
+  };
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(next(i) * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+const CROSSFADE_DURATION_MS = 600;
+
+/** Returns shuffled list of { url, alt }. Card owns all cycle/transition state. */
+function useCycledPhotoList(
+  photoAttachments: PhotoAttachment[] | undefined,
+  seed: string
+): Array<{ url: string; alt: string }> {
+  return useMemo(
+    () => {
+      const arr = Array.isArray(photoAttachments) && photoAttachments.length > 0 ? photoAttachments : [];
+      if (arr.length === 0) return [];
+      const shuffled = shuffleWithSeed(arr, seed);
+      return shuffled
+        .map((pa) => ({ url: photoAttachmentDisplayUrl(pa) ?? '', alt: photoAttachmentAlt(pa) }))
+        .filter((x) => x.url);
+    },
+    [photoAttachments, seed]
+  );
+}
+
+/** Card with image area. Cycles through photos every N ms with a simple crossfade. */
+function GridCardWithImage({
+  photoAttachments,
+  fallbackId,
+  fallbackAlt,
+  title,
+  subtitle,
+  children,
+  onClick,
+  websitePhotos,
+  companyInformation,
+  cycleSeed,
+}: {
+  photoAttachments?: PhotoAttachment[];
+  fallbackId: string | number;
+  fallbackAlt: string;
+  title: string;
+  subtitle?: string | null;
+  children?: React.ReactNode;
+  onClick: () => void;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+  cycleSeed?: string;
+}) {
+  const seed = cycleSeed ?? String(fallbackId);
+  const list = useCycledPhotoList(photoAttachments, seed);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [transitioning, setTransitioning] = useState(false);
+
+  // Per-card random interval 6–8s so cards don't all transition in sync
+  const intervalMs = useMemo(
+    () =>
+      CYCLE_INTERVAL_MIN_MS +
+      Math.floor(seedToUnit(seed) * (CYCLE_INTERVAL_MAX_MS - CYCLE_INTERVAL_MIN_MS + 1)),
+    [seed]
+  );
+
+  // Timer: every N ms, start a crossfade
+  useEffect(() => {
+    if (list.length <= 1) return;
+    const id = setInterval(() => setTransitioning(true), intervalMs);
+    return () => clearInterval(id);
+  }, [list.length, intervalMs]);
+
+  // When transitioning, after crossfade duration advance index and stop transitioning
+  useEffect(() => {
+    if (!transitioning || list.length <= 1) return;
+    const t = setTimeout(() => {
+      setCurrentIndex((i) => (i + 1) % list.length);
+      setTransitioning(false);
+    }, CROSSFADE_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [transitioning, list.length]);
+
+  const nextIndex = list.length > 1 ? (currentIndex + 1) % list.length : 0;
+  const currentItem = list[currentIndex];
+  const displayAlt = currentItem?.alt || fallbackAlt;
+  const singleUrl = list[0]?.url;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex flex-col h-full w-full text-left group block rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand-accent focus-visible:ring-offset-2"
+    >
+      <div className="w-full h-36 overflow-hidden rounded-lg mb-3 relative">
+        {list.length === 0 ? (
+          <PhotoWithFallback
+            item={undefined}
+            fallbackId={fallbackId}
+            alt={fallbackAlt}
+            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+            websitePhotos={websitePhotos}
+            companyInformation={companyInformation}
+          />
+        ) : list.length === 1 && singleUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element -- dynamic API URLs; next/image not configured for external host
+          <img
+            src={singleUrl}
+            alt={displayAlt}
+            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <>
+            {/* Only animate opacity when transitioning; when settling, snap so we don't double-fade */}
+            <div
+              className={`absolute inset-0 ${transitioning ? 'transition-opacity duration-[600ms] ease-in-out' : 'transition-none'}`}
+              style={{ opacity: transitioning ? 0 : 1 }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element -- dynamic API URLs */}
+              <img
+                src={list[currentIndex]?.url}
+                alt={list[currentIndex]?.alt ?? displayAlt}
+                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+            </div>
+            <div
+              className={`absolute inset-0 ${transitioning ? 'transition-opacity duration-[600ms] ease-in-out' : 'transition-none'}`}
+              style={{ opacity: transitioning ? 1 : 0 }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element -- dynamic API URLs */}
+              <img
+                src={list[nextIndex]?.url}
+                alt={list[nextIndex]?.alt ?? displayAlt}
+                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+              />
+            </div>
+          </>
+        )}
+      </div>
+      {subtitle && (
+        <p className="text-xs font-medium text-fg-secondary uppercase tracking-wide line-clamp-1">
+          {subtitle}
+        </p>
+      )}
+      <h4 className="font-display text-base font-normal text-fg-primary mt-1 group-hover:underline line-clamp-2">
+        {title}
+      </h4>
+      {children}
+    </button>
+  );
+}
+
+/** Single carousel row with small cards. Title and prev/next on one line to avoid excess spacing. */
+function CarouselRow<T>({
+  rowTitle,
+  items,
+  renderItem,
+}: {
+  rowTitle: string;
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+}) {
+  if (!items?.length) return null;
+  return (
+    <div className="mb-12 last:mb-0">
+      <Carousel.Root opts={{ align: 'start', loop: true }}>
+        <div className="flex items-center justify-between gap-4 mb-2">
+          <h3 className="font-display text-2xl font-normal text-fg-primary md:text-3xl">
+            {rowTitle}
+          </h3>
+          <div className="flex gap-2 flex-shrink-0">
+            <Carousel.PrevTrigger className="rounded-full p-1.5 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+              <svg className="w-5 h-5 text-fg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            </Carousel.PrevTrigger>
+            <Carousel.NextTrigger className="rounded-full p-1.5 border border-secondary hover:bg-primary_hover transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+              <svg className="w-5 h-5 text-fg-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+            </Carousel.NextTrigger>
+          </div>
+        </div>
+        <Carousel.Content className="-ml-3">
+          {items.map((item, index) => (
+            <Carousel.Item key={(item as { id?: number }).id ?? index} className="pl-3 basis-[70%] sm:basis-1/2 md:basis-1/3 lg:basis-1/4">
+              {renderItem(item, index)}
+            </Carousel.Item>
+          ))}
+        </Carousel.Content>
+      </Carousel.Root>
+    </div>
+  );
+}
+
+/** Grid row: same section title + items in a responsive grid (top to bottom, left to right). */
+function GridRow<T>({
+  rowTitle,
+  items,
+  renderItem,
+}: {
+  rowTitle: string;
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+}) {
+  if (!items?.length) return null;
+  return (
+    <div className="mb-12 last:mb-0">
+      <h3 className="font-display text-2xl font-normal text-fg-primary mb-3 md:text-3xl">
+        {rowTitle}
+      </h3>
+      <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {items.map((item, index) => (
+          <div key={(item as { id?: number }).id ?? index} className="min-w-0 flex">
+            {renderItem(item, index)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** One menu block: either carousel or grid, same title + cards. */
+function MenuBlock<T>({
+  rowTitle,
+  items,
+  renderItem,
+  layout,
+}: {
+  rowTitle: string;
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  layout: 'carousel' | 'grid';
+}) {
+  if (!items?.length) return null;
+  return layout === 'carousel' ? (
+    <CarouselRow rowTitle={rowTitle} items={items} renderItem={renderItem} />
+  ) : (
+    <GridRow rowTitle={rowTitle} items={items} renderItem={renderItem} />
+  );
+}
+
+function formatPriceCents(cents: number | null | undefined): string | null {
+  if (cents == null) return null;
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(cents / 100);
+}
+
+/** Section heading inside modal for consistent structure */
+function ModalSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h3 className="font-display text-sm font-semibold text-fg-primary uppercase tracking-wide mb-2">{title}</h3>
+      {children}
+    </div>
+  );
+}
+
+/** Renders modal body for the selected offer, package, or service item. */
+function DetailModalContent({
+  detail,
+  serviceItems = [],
+}: {
+  detail: DetailItem;
+  services?: Service[];
+  packages?: PackageForMenu[];
+  serviceItems?: ServiceItemWithService[];
+}) {
+  if (detail.type === 'offer') {
+    const o = detail.item;
+    const categoryLine = o.category_names?.length ? o.category_names.join(' | ') : null;
+    const descriptionContent = o.description || o.first_service_description_markdown;
+    // Backend includes nested services, service_items, and packages on every offer (list and single).
+    const relatedServices = o.services?.length ? o.services : (o.service_items ?? []);
+    const relatedPackages = o.packages ?? [];
+
+    return (
+      <div className="space-y-6">
+        {categoryLine && (
+          <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{categoryLine}</p>
+        )}
+        {o.value_terms && !categoryLine && (
+          <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{o.value_terms}</p>
+        )}
+        {descriptionContent && (
+          <ModalSection title="Offer details">
+            <div className="prose prose-sm font-body text-fg-primary max-w-none">
+              {o.description ? <p className="text-fg-primary">{o.description}</p> : <MarkdownRenderer content={o.first_service_description_markdown!} />}
+            </div>
+          </ModalSection>
+        )}
+        {o.expires_at && (() => {
+          const d = new Date(o.expires_at);
+          if (Number.isNaN(d.getTime())) return null;
+          return (
+            <p className="text-sm text-tertiary">
+              Expires {d.toLocaleDateString(undefined, { dateStyle: 'medium' })}
+            </p>
+          );
+        })()}
+
+        {relatedServices.length > 0 && (
+          <ModalSection title="Related services">
+            <ul className="space-y-4">
+              {relatedServices.map((s: Service | { id: number; name: string; summary?: string | null }) => (
+                <li key={s.id} className="border border-secondary rounded-lg p-4 bg-secondary/20">
+                  <p className="font-display font-medium text-fg-primary">{s.name}</p>
+                  {'description_markdown' in s && s.description_markdown ? (
+                    <div className="mt-2 prose prose-sm font-body text-fg-secondary max-w-none">
+                      <MarkdownRenderer content={s.description_markdown} />
+                    </div>
+                  ) : s.summary ? (
+                    <p className="mt-2 font-body text-sm text-fg-secondary">{s.summary}</p>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          </ModalSection>
+        )}
+
+        {relatedPackages.length > 0 && (
+          <ModalSection title="Related packages">
+            <ul className="space-y-4">
+              {relatedPackages.map((pkg) => (
+                <li key={pkg.id} className="border border-secondary rounded-lg p-4 bg-secondary/20">
+                  <p className="font-display font-medium text-fg-primary">{pkg.name}</p>
+                  {'description_markdown' in pkg && pkg.description_markdown ? (
+                    <div className="mt-2 prose prose-sm font-body text-fg-secondary max-w-none">
+                      <MarkdownRenderer content={pkg.description_markdown} />
+                    </div>
+                  ) : pkg.summary ? (
+                    <p className="mt-2 font-body text-sm text-fg-secondary">{pkg.summary}</p>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          </ModalSection>
+        )}
+      </div>
+    );
+  }
+
+  if (detail.type === 'package') {
+    const p = detail.item;
+    const categoryLine = p.category_names?.length ? p.category_names.join(' | ') : null;
+    const descriptionMarkdown = p.description_markdown || p.summary || p.first_service_description_markdown;
+
+    return (
+      <div className="space-y-6">
+        {categoryLine && (
+          <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{categoryLine}</p>
+        )}
+        {descriptionMarkdown && (
+          <ModalSection title="Package details">
+            <div className="prose prose-sm font-body text-fg-primary max-w-none">
+              <MarkdownRenderer content={descriptionMarkdown} />
+            </div>
+          </ModalSection>
+        )}
+
+        {p.package_items && p.package_items.length > 0 && (
+          <ModalSection title="What's included">
+            <ul className="space-y-4">
+              {p.package_items.map((pi, i) => {
+                const fullItem = pi.service_item?.id != null ? serviceItems.find((si) => si.id === pi.service_item!.id) : null;
+                const name = fullItem?.name ?? pi.service_item?.name ?? 'Item';
+                const desc = fullItem?.summary ?? fullItem?.description_markdown ?? pi.service_item?.summary;
+                return (
+                  <li key={pi.service_item?.id ?? i} className="border border-secondary rounded-lg p-4 bg-secondary/20">
+                    <p className="font-display font-medium text-fg-primary">
+                      {pi.quantity > 1 && `${pi.quantity}× `}{name}
+                    </p>
+                    {desc && (
+                      <div className="mt-2 prose prose-sm font-body text-fg-secondary max-w-none">
+                        {typeof desc === 'string' && !desc.includes('\n') && !desc.match(/[#*\[\]]/) ? (
+                          <p>{desc}</p>
+                        ) : (
+                          <MarkdownRenderer content={desc} />
+                        )}
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </ModalSection>
+        )}
+
+        {p.pricing_info && (
+          <ModalSection title="Pricing">
+            <div className="rounded-lg border border-secondary bg-secondary/40 p-4">
+              <div className="prose prose-sm font-body text-fg-primary max-w-none">
+                <MarkdownRenderer content={p.pricing_info} />
+              </div>
+            </div>
+          </ModalSection>
+        )}
+      </div>
+    );
+  }
+
+  const si = detail.item;
+  const priceStr = formatPriceCents(si.price_cents);
+  const summary = si.summary || si.service_summary;
+  const descriptionMarkdown = si.description_markdown || si.service_description_markdown;
+
+  return (
+    <div className="space-y-6">
+      {si.service_name && (
+        <p className="text-sm font-medium text-fg-secondary uppercase tracking-wide">{si.service_name}</p>
+      )}
+
+      {priceStr && (
+        <ModalSection title="Price">
+          <p className="font-display text-lg font-normal text-fg-primary">{priceStr}</p>
+          {si.duration_minutes != null && si.duration_minutes > 0 && (
+            <p className="font-body text-sm text-fg-secondary mt-1">Duration: {si.duration_minutes} min</p>
+          )}
+        </ModalSection>
+      )}
+
+      {summary && (
+        <ModalSection title="Overview">
+          <p className="font-body text-fg-primary">{summary}</p>
+        </ModalSection>
+      )}
+
+      {descriptionMarkdown && (
+        <ModalSection title="Full description">
+          <div className="prose prose-sm font-body text-fg-primary max-w-none">
+            <MarkdownRenderer content={descriptionMarkdown} />
+          </div>
+        </ModalSection>
+      )}
+
+      {si.pricing_info && (
+        <ModalSection title="Pricing details">
+          <div className="rounded-lg border border-secondary bg-secondary/40 p-4">
+            <div className="prose prose-sm font-body text-fg-primary max-w-none">
+              <MarkdownRenderer content={si.pricing_info} />
+            </div>
+          </div>
+        </ModalSection>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Service Menu section: up to 3 independent carousel rows (Offers, Packages, Service Items).
+ * Service items are derived from services (each service’s service_items with service name).
+ * Cards cycle through photos; clicking opens a detail modal.
+ */
+export function ServiceMenuSection({
+  title = 'Service Menu',
+  subtitle,
+  offers = null,
+  packages = null,
+  services = null,
+  websitePhotos,
+  companyInformation,
+  viewAllHref,
+  viewAllText = 'View All',
+  servicesRowTitle = 'Treatments',
+  variant = 'section',
+}: ServiceMenuSectionProps) {
+  const offerList = React.useMemo(
+    () => (Array.isArray(offers) ? offers.filter((o) => !o.expired) : []),
+    [offers]
+  );
+  const packageList = React.useMemo(
+    () => (Array.isArray(packages) ? packages : []),
+    [packages]
+  );
+  const serviceList = React.useMemo(
+    () => (Array.isArray(services) ? services : []),
+    [services]
+  );
+
+  const serviceItemIdToService = React.useMemo(() => {
+    const m = new Map<number, Service>();
+    serviceList.forEach((s) => (s.service_items || []).forEach((si) => m.set(si.id, s)));
+    return m;
+  }, [serviceList]);
+
+  const packagesForMenu: PackageForMenu[] = React.useMemo(
+    () =>
+      packageList.map((pkg) => {
+        const category_names = [
+          ...new Set(
+            (pkg.package_items || [])
+              .map((pi) => serviceItemIdToService.get(pi.service_item?.id ?? 0)?.name)
+              .filter(Boolean) as string[]
+          ),
+        ];
+        const firstPi = pkg.package_items?.[0];
+        const firstService = firstPi ? serviceItemIdToService.get(firstPi.service_item?.id ?? 0) : undefined;
+        const first_service_description_markdown =
+          firstService?.description_markdown || firstService?.summary || null;
+        return { ...pkg, category_names, first_service_description_markdown };
+      }),
+    [packageList, serviceItemIdToService]
+  );
+
+  const offersForMenu: OfferForMenu[] = React.useMemo(
+    () =>
+      offerList.map((offer) => {
+        const category_names =
+          (offer.category_names?.length ? offer.category_names : null) ??
+          ((offer.service_ids || [])
+            .map((id) => serviceList.find((s) => s.id === id)?.name)
+            .filter(Boolean) as string[]);
+        const firstServiceId = offer.service_ids?.[0];
+        const firstService = firstServiceId ? serviceList.find((s) => s.id === firstServiceId) : undefined;
+        const first_service_description_markdown =
+          firstService?.description_markdown || firstService?.summary || null;
+        return { ...offer, category_names: category_names ?? [], first_service_description_markdown };
+      }),
+    [offerList, serviceList]
+  );
+
+  const serviceItemsForMenu: ServiceItemWithService[] = serviceList.flatMap((s) =>
+    (s.service_items || []).map((si) => ({
+      ...si,
+      service_name: s.name,
+      service_summary: s.summary,
+      service_description_markdown: s.description_markdown,
+    }))
+  );
+  const hasAny = offersForMenu.length > 0 || packagesForMenu.length > 0 || serviceItemsForMenu.length > 0;
+
+  const CAROUSEL_MIN = 3;
+  // Page variant: always grid (full list, no carousel). Section variant: carousel when >=3 items else grid.
+  const isPage = variant === 'page';
+  const offersLayout: 'carousel' | 'grid' = isPage ? 'grid' : (offersForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
+  const packagesLayout: 'carousel' | 'grid' = isPage ? 'grid' : (packagesForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
+  const serviceItemsLayout: 'carousel' | 'grid' = isPage ? 'grid' : (serviceItemsForMenu.length >= CAROUSEL_MIN ? 'carousel' : 'grid');
+
+  const [detailItem, setDetailItem] = useState<DetailItem | null>(null);
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    let el = document.getElementById(SERVICE_MENU_MODAL_ROOT_ID);
+    if (!el) {
+      el = document.createElement('div');
+      el.id = SERVICE_MENU_MODAL_ROOT_ID;
+      document.body.appendChild(el);
+    }
+    // Portal root: set DOM ref once on mount (standard createPortal pattern)
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: portal mount node
+    setPortalTarget(el);
+    return () => { el?.remove(); };
+  }, []);
+
+  const closeModal = useCallback(() => setDetailItem(null), []);
+
+  const renderOfferCard = useCallback(
+    (offer: OfferForMenu, index: number) => {
+      const categorySubtitle =
+        offer.category_names?.length ? offer.category_names.join(' | ') : (offer.value_terms ?? null);
+      const cardDesc = offer.description || offer.first_service_description_markdown;
+      const plainDesc = cardDesc ? (typeof cardDesc === 'string' ? cardDesc : '').replace(/[#*`\[\]]/g, '').replace(/\n+/g, ' ').trim() : '';
+      const descText = plainDesc.length > 120 ? plainDesc.slice(0, 120) + '…' : plainDesc;
+      return (
+        <GridCardWithImage
+          photoAttachments={offer.photo_attachments}
+          fallbackId={offer.id}
+          fallbackAlt={offer.name}
+          title={offer.name}
+          subtitle={categorySubtitle}
+          onClick={() => setDetailItem({ type: 'offer', item: offer })}
+          websitePhotos={websitePhotos}
+          companyInformation={companyInformation}
+          cycleSeed={`offer-${offer.id}-${index}`}
+        >
+          {descText && (
+            <p className="font-body text-sm text-tertiary mt-1 line-clamp-2">{descText}</p>
+          )}
+        </GridCardWithImage>
+      );
+    },
+    [websitePhotos, companyInformation]
+  );
+
+  const renderPackageCard = useCallback(
+    (pkg: PackageForMenu, index: number) => {
+      const categorySubtitle = pkg.category_names?.length ? pkg.category_names.join(' | ') : null;
+      const cardDesc = pkg.description_markdown || pkg.summary || pkg.first_service_description_markdown;
+      const plainDesc = cardDesc ? cardDesc.replace(/[#*`\[\]]/g, '').replace(/\n+/g, ' ').trim() : '';
+      const descText = plainDesc.length > 120 ? plainDesc.slice(0, 120) + '…' : plainDesc;
+      return (
+        <GridCardWithImage
+          photoAttachments={pkg.photo_attachments}
+          fallbackId={`pkg-${pkg.id}`}
+          fallbackAlt={pkg.name}
+          title={pkg.name}
+          subtitle={categorySubtitle}
+          onClick={() => setDetailItem({ type: 'package', item: pkg })}
+          websitePhotos={websitePhotos}
+          companyInformation={companyInformation}
+          cycleSeed={`pkg-${pkg.id}-${index}`}
+        >
+          {descText && (
+            <p className="font-body text-sm text-tertiary mt-1 line-clamp-2">{descText}</p>
+          )}
+        </GridCardWithImage>
+      );
+    },
+    [websitePhotos, companyInformation]
+  );
+
+  const renderServiceItemCard = useCallback(
+    (si: ServiceItemWithService, index: number) => (
+      <GridCardWithImage
+        photoAttachments={si.photo_attachments}
+        fallbackId={`service-item-${si.id}`}
+        fallbackAlt={si.photo_attachments?.[0]?.photo?.title || si.name}
+        title={si.name}
+        subtitle={si.service_name ?? null}
+        onClick={() => setDetailItem({ type: 'service_item', item: si })}
+        websitePhotos={websitePhotos}
+        companyInformation={companyInformation}
+        cycleSeed={`service-item-${si.id}-${index}`}
+      >
+        {formatPriceCents(si.price_cents) && (
+          <p className="font-body text-sm font-medium text-fg-primary mt-1">
+            {formatPriceCents(si.price_cents)}
+          </p>
+        )}
+        {(() => {
+          const desc = si.summary || si.description_markdown || si.service_summary || si.service_description_markdown;
+          if (!desc) return null;
+          const plain = desc.replace(/[#*`\[\]]/g, '').replace(/\n+/g, ' ').trim();
+          const text = plain.length > 120 ? plain.slice(0, 120) + '…' : plain;
+          return (
+            <p className="font-body text-sm text-tertiary mt-1 line-clamp-2">
+              {text}
+            </p>
+          );
+        })()}
+      </GridCardWithImage>
+    ),
+    [websitePhotos, companyInformation]
+  );
+
+  if (!hasAny) return null;
+
+  const modalTitle = detailItem ? detailItem.item.name : '';
+
+  return (
+    <section className={variant === 'page' ? 'py-12 md:py-20' : 'py-12 md:py-16'}>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        {/* Section variant: centered title/subtitle in-section. Page variant: hero is provided by the page (GenericTextHero). */}
+        {variant === 'section' && (
+          <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
+            {title && (
+              <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                {title}
+              </h2>
+            )}
+            {subtitle && (
+              <p className="mt-4 font-display text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        <MenuBlock
+          rowTitle="Offers"
+          items={offersForMenu}
+          layout={offersLayout}
+          renderItem={renderOfferCard}
+        />
+
+        <MenuBlock
+          rowTitle="Packages"
+          items={packagesForMenu}
+          layout={packagesLayout}
+          renderItem={renderPackageCard}
+        />
+
+        <MenuBlock
+          rowTitle={servicesRowTitle}
+          items={serviceItemsForMenu}
+          layout={serviceItemsLayout}
+          renderItem={renderServiceItemCard}
+        />
+
+        {variant === 'section' && viewAllHref && viewAllText && (
+          <div className="mt-12 text-center">
+            <Button href={viewAllHref} color="primary" size="md">
+              {viewAllText}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {portalTarget &&
+        detailItem &&
+        createPortal(
+          <Modal
+            isOpen={true}
+            onClose={closeModal}
+            title={modalTitle}
+            maxWidth="2xl"
+          >
+            <DetailModalContent
+              detail={detailItem}
+              services={serviceList}
+              packages={packagesForMenu}
+              serviceItems={serviceItemsForMenu}
+            />
+          </Modal>,
+          portalTarget
+        )}
+    </section>
+  );
+}