"use client"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight, CircleGauge, Flame, Layers3, Ruler, Sparkles, Timer, Touchpad } from "lucide-react"; import { m, useReducedMotion, useScroll, useTransform } from "framer-motion"; import { getProductCatalogFacets, getProductCookingSystem, getProductFormatLabels, localizeProductName, localizeSurface } from "@/lib/product-i18n"; import type { CollectionLocale, NordenCollection } from "@/lib/collections"; type StoryProduct = { id: string; slug: string; name: string; nameTr?: string | null; nameEn?: string | null; nameRu?: string | null; widthCm: number | null; surface: string | null; image: string }; type Chapter = { title: string; body: string; detail: string; image?: string; icon: "size" | "control" | "power" | "surface" | "choice" }; const shared = { tr: { back: "Tüm koleksiyonlar", eyebrow: "tasarım hikâyesi", scroll: "Hikâyeyi kaydır", family: "model ailesi", familyBody: "Yayımlanmış gerçek ürün görselleri, ölçüleri, yüzeyleri ve pişirme teknolojileriyle seri seçenekleri.", view: "Ürünü incele", matrix: "ÜRÜN MATRİSİ", index: "Konfigürasyon indeksi", models: "Yayımlanmış model", dimensions: "Mevcut ölçüler", surfaces: "Yüzey / teknoloji", continue: "Model ailesine geçin", browse: "Tüm seri ürünlerini filtrele", previous: "Önceki ürünler", next: "Sonraki ürünler" }, en: { back: "All collections", eyebrow: "design story", scroll: "Scroll the story", family: "model family", familyBody: "Published series options with real product imagery, dimensions, surfaces and cooking technologies.", view: "View product", matrix: "PRODUCT MATRIX", index: "Configuration index", models: "Published models", dimensions: "Available widths", surfaces: "Surface / technology", continue: "Continue to the model family", browse: "Browse all series products", previous: "Previous products", next: "Next products" }, ru: { back: "Все коллекции", eyebrow: "история дизайна", scroll: "Листайте историю", family: "семейство моделей", familyBody: "Опубликованные варианты серии с реальными изображениями, размерами, поверхностями и технологиями нагрева.", view: "Смотреть изделие", matrix: "МАТРИЦА МОДЕЛЕЙ", index: "Индекс конфигураций", models: "Опубликованные модели", dimensions: "Доступные размеры", surfaces: "Поверхность / технология", continue: "Перейти к семейству моделей", browse: "Все изделия серии", previous: "Предыдущие модели", next: "Следующие модели" }, } satisfies Record>; function buildChapters(collection: NordenCollection, locale: CollectionLocale): Chapter[] { const electric = collection.seriesFilter === "VTC"; const localizedSizes = locale === "ru" ? collection.sizes.replace(/cm/gi, "см") : collection.sizes; if (locale === "en") { return electric ? [ { title: "Four dimensions. One uninterrupted surface.", body: `${collection.name} layouts span ${collection.sizes}, bringing electric cooking into different kitchen plans.`, detail: collection.sizes.toUpperCase(), icon: "size" }, { title: "Control begins at a touch.", body: "Touch control and nine heat levels support direct, clearly stepped temperature adjustment on standard products.", detail: "TOUCH CONTROL · 9 HEAT LEVELS", icon: "control" }, { title: "Each zone keeps its own rhythm.", body: "Individual zone timers, Pause & Resume and child lock are available across much of the standard Vitroceramic range; final equipment is confirmed by model.", detail: "TIMER · PAUSE & RESUME · CHILD LOCK", icon: "power" }, { title: "A flat surface, built for clarity.", body: "The smooth vitroceramic glass brings heating areas and controls into one clean, easy-to-maintain plane.", detail: "VITROCERAMIC GLASS", icon: "surface" }, { title: "Choose the layout that fits the worktop.", body: "Zone count, zone diameter and optional Plug-and-Play configuration vary by model and requested setup.", detail: "MODEL-DEPENDENT CONFIGURATION", icon: "choice" }, ] : gasChaptersEn(collection); } if (locale === "ru") { return electric ? [ { title: "Четыре размера. Единая поверхность.", body: `Компоновки ${collection.name} представлены в размерах ${localizedSizes} для разных кухонных планировок.`, detail: localizedSizes.toUpperCase(), icon: "size" }, { title: "Управление начинается с касания.", body: "Сенсорное управление и девять уровней нагрева обеспечивают понятную ступенчатую регулировку температуры.", detail: "СЕНСОРНОЕ УПРАВЛЕНИЕ · 9 УРОВНЕЙ", icon: "control" }, { title: "У каждой зоны свой ритм.", body: "Таймеры отдельных зон, Pause & Resume и блокировка от детей доступны во многих стандартных моделях; комплектация уточняется по коду.", detail: "ТАЙМЕР · PAUSE & RESUME · БЛОКИРОВКА", icon: "power" }, { title: "Ровная и понятная поверхность.", body: "Гладкая стеклокерамика объединяет зоны нагрева и управление в одной легко очищаемой плоскости.", detail: "СТЕКЛОКЕРАМИКА", icon: "surface" }, { title: "Компоновка под вашу столешницу.", body: "Количество и диаметр зон, а также опция Plug-and-Play зависят от модели и выбранной конфигурации.", detail: "КОНФИГУРАЦИЯ ЗАВИСИТ ОТ МОДЕЛИ", icon: "choice" }, ] : gasChaptersRu(collection); } return electric ? [ { title: "Dört ölçü. Kesintisiz tek yüzey.", body: `${collection.name}; ${collection.sizes} yerleşimleriyle elektrikli pişirmeyi farklı mutfak planlarına taşır.`, detail: collection.sizes.toUpperCase(), icon: "size" }, { title: "Kontrol tek dokunuşla başlar.", body: "Dokunmatik kontrol ve dokuz ısı seviyesi, standart ürünlerde sıcaklığı doğrudan ve görünür adımlarla yönetir.", detail: "DOKUNMATİK KONTROL · 9 ISI SEVİYESİ", icon: "control" }, { title: "Her bölgenin kendi ritmi.", body: "Bölgesel zamanlayıcı, Pause & Resume ve çocuk kilidi standart Vitroceramic ürünlerin çoğunda bulunur; kesin donanım model koduna göre belirlenir.", detail: "ZAMANLAYICI · PAUSE & RESUME · ÇOCUK KİLİDİ", icon: "power" }, { title: "Düz, temiz ve anlaşılır yüzey.", body: "Pürüzsüz vitroceramic cam; ısıtma bölgeleriyle kontrol alanını kolay temizlenen tek bir düzlemde buluşturur.", detail: "VITROCERAMIC CAM", icon: "surface" }, { title: "Tezgâha uyan yerleşimi seçin.", body: "Bölge sayısı, bölge çapı ve opsiyonel Plug-and-Play yapı modele ve istenen konfigürasyona göre değişir.", detail: "MODELE BAĞLI KONFİGÜRASYON", icon: "choice" }, ] : gasChaptersTr(collection); } function gasChaptersTr(collection: NordenCollection): Chapter[] { return [ { title: "Ölçek değişir. Tasarım karakteri kalır.", body: `${collection.sizes} yerleşimleri, ${collection.name} serisinin kendine özgü ızgara geometrisini farklı mutfak ölçülerine taşır.`, detail: collection.sizes.toUpperCase(), icon: "size" }, { title: "Alev, dokuz kontrollü adımda.", body: "ChronoFlame, alev seviyesini 1’den 9’a kadar görünür ve tekrar edilebilir biçimde ayarlamaya yönelik opsiyonel bir kontrol yaklaşımıdır.", detail: "CHRONOFLAME · OPSİYONEL", image: "/media/story/catalog/chrono-9-level-960.webp", icon: "control" }, { title: "Wok merkezinde gerçek güç.", body: "Sabaf Wok 3,6 kW standart veya modele bağlı yapıdadır. Talebe göre 4,0 kW seçeneği sunulabilir.", detail: "3,6 KW · OPSİYONEL 4,0 KW", icon: "power" }, { title: "Dökümün dengesi. Yüzeyin imzası.", body: `Döküm ızgara seçenekleri pişirme kaplarını dengede tutar. ${collection.surfaces.tr} yüzey seçenekleri serinin tasarım çizgisini tamamlar.`, detail: "DÖKÜM IZGARA · OTOMATİK ATEŞLEME", icon: "surface" }, { title: "Bir yüzey değil, bir seçim sistemi.", body: "White, Black, Beige ve Gray camlar Glossy veya Matte seçilebilir. Cam kalınlığı modele göre 6 mm veya 8 mm olabilir. 60 cm siyah camlı 2+2 hibrit model, iki gazlı brülör ile iki elektrikli Ceran alanını birleştirir.", detail: "SIYAH CAM · INOX · GAZ + CERAN", image: collection.inoxImage, icon: "choice" }, ]; } function gasChaptersEn(collection: NordenCollection): Chapter[] { return [ { title: "Scale changes. Character remains.", body: `${collection.sizes} layouts carry the distinctive ${collection.name} pan-support geometry into different kitchen dimensions.`, detail: collection.sizes.toUpperCase(), icon: "size" }, { title: "Nine visible levels of flame.", body: "ChronoFlame is an optional control approach designed to make flame levels from 1 to 9 visible and repeatable.", detail: "CHRONOFLAME · OPTIONAL", image: "/media/story/catalog/chrono-9-level-960.webp", icon: "control" }, { title: "Real power at the centre of the Wok.", body: "Sabaf Wok 3.6 kW is standard or model dependent. A 4.0 kW alternative can be specified on request.", detail: "3.6 KW · OPTIONAL 4.0 KW", icon: "power" }, { title: "Cast-iron balance. A signature surface.", body: `Cast-iron supports stabilise cookware. ${collection.surfaces.en} surface options complete the series design language.`, detail: "CAST IRON · AUTOMATIC IGNITION", icon: "surface" }, { title: "Not one surface. A system of choices.", body: "White, Black, Beige and Gray glass can be Glossy or Matte. Glass may be 6 mm or 8 mm depending on model. The 60 cm black-glass 2+2 hybrid combines two gas burners with two electric Ceran zones.", detail: "BLACK GLASS · INOX · GAS + CERAN", image: collection.inoxImage, icon: "choice" }, ]; } function gasChaptersRu(collection: NordenCollection): Chapter[] { return [ { title: "Размер меняется. Характер остаётся.", body: `Компоновки ${collection.sizes.replace(/cm/gi, "см")} переносят характерную геометрию решёток ${collection.name} в кухни разных размеров.`, detail: collection.sizes.replace(/cm/gi, "см").toUpperCase(), icon: "size" }, { title: "Девять видимых уровней пламени.", body: "ChronoFlame — дополнительный способ управления с видимыми уровнями пламени от 1 до 9.", detail: "CHRONOFLAME · ОПЦИЯ", image: "/media/story/catalog/chrono-9-level-960.webp", icon: "control" }, { title: "Настоящая мощность Wok.", body: "Sabaf Wok 3,6 кВт — стандарт или зависит от модели. По запросу доступен вариант 4,0 кВт.", detail: "3,6 КВТ · ОПЦИЯ 4,0 КВТ", icon: "power" }, { title: "Баланс чугуна. Характер поверхности.", body: `Чугунные опоры стабилизируют посуду. Варианты ${collection.surfaces.ru} завершают язык дизайна серии.`, detail: "ЧУГУН · АВТОПОДЖИГ", icon: "surface" }, { title: "Система выбора поверхности.", body: "Стекло White, Black, Beige и Gray доступно в Glossy или Matte. Толщина зависит от модели: 6 или 8 мм. Гибридная модель 60 см из чёрного стекла объединяет две газовые конфорки и две электрические зоны Ceran.", detail: "ЧЁРНОЕ СТЕКЛО · INOX · ГАЗ + CERAN", image: collection.inoxImage, icon: "choice" }, ]; } export default function SeriesStoryExperience({ collection, locale, products }: { collection: NordenCollection; locale: CollectionLocale; products: StoryProduct[] }) { const t = shared[locale]; const chapters = buildChapters(collection, locale); const reduceMotion = useReducedMotion(); const productTrackRef = useRef(null); const [productPage, setProductPage] = useState(0); const [productStepPx, setProductStepPx] = useState(296); const [visibleProductCount, setVisibleProductCount] = useState(1); useEffect(() => { const track = productTrackRef.current; if (!track) return; const measure = () => { const firstCard = track.querySelector("[data-product-card]"); const step = (firstCard?.getBoundingClientRect().width ?? 280) + 16; setProductStepPx(step); setVisibleProductCount(Math.max(1, Math.floor((track.clientWidth + 16) / step))); }; measure(); const observer = new ResizeObserver(measure); observer.observe(track); return () => observer.disconnect(); }, []); const maximumProductPage = Math.max(0, products.length - visibleProductCount); const currentProductPage = Math.min(productPage, maximumProductPage); const scrollProducts = (direction: -1 | 1) => { setProductPage((current) => Math.min(maximumProductPage, Math.max(0, Math.min(current, maximumProductPage) + direction * visibleProductCount))); }; const availableWidths = Array.from(new Set(products.map((product) => product.widthCm).filter((width): width is number => width !== null))).sort((a, b) => a - b); const availableSurfaces = Array.from(new Set(products .flatMap((product) => getProductCatalogFacets(product)) .map((surface) => localizeSurface(surface, locale)) .filter((surface): surface is string => Boolean(surface)))); return
{collection.name}
{t.back} {collection.name} · {t.eyebrow}

9 ? "text-5xl md:text-6xl lg:text-[4.8rem]" : "text-6xl md:text-8xl lg:text-[7rem]"}`}>{Array.from(collection.name).map((letter, index) => {letter})}

{collection.tagline[locale]} {collection.story[locale]} {t.scroll}
{`${collection.name}
{chapters.map((chapter, index) => ) }

{collection.name} · {t.matrix}

{collection.name} {t.family}

{t.familyBody}
{products.map((product, index) => setProductPage(Math.min(index, maximumProductPage))} key={product.id} initial={reduceMotion ? false : { opacity: 0, y: 45 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ delay: (index % 5) * .055 }} className="group min-w-[280px] overflow-hidden rounded-[26px] border md:min-w-[360px]" style={{ borderColor: "var(--border)", background: "var(--surface-0)" }}>
{localizeProductName(product,
{getProductFormatLabels(product, locale).join(" · ") || collection.name}{product.widthCm ? `${product.widthCm} ${locale === "ru" ? "см" : "cm"}` : ""}

{localizeProductName(product, locale)}

{t.view}
)}
{t.browse}
{String(currentProductPage + 1).padStart(2, "0")}—{String(Math.min(currentProductPage + visibleProductCount, products.length)).padStart(2, "0")} / {String(products.length).padStart(2, "0")}
; } function ProductIndexBridge({ collection, locale, productCount, widths, surfaces, reduceMotion }: { collection: NordenCollection; locale: CollectionLocale; productCount: number; widths: number[]; surfaces: string[]; reduceMotion: boolean }) { const t = shared[locale]; const metrics = [ { label: t.models, value: String(productCount).padStart(2, "0") }, { label: t.dimensions, value: widths.length ? widths.map((width) => `${width}`).join(" · ") + ` ${locale === "ru" ? "см" : "cm"}` : collection.sizes.replace(/cm$/i, locale === "ru" ? "см" : "cm") }, { label: t.surfaces, value: surfaces.length ? surfaces.join(" · ") : collection.surfaces[locale] }, ]; return
{collection.name}

{collection.name} · {t.index}

{collection.tagline[locale]}

{t.continue}
{metrics.map((metric, index) => {metric.label} {metric.value} )}
; } function ChapterScene({ chapter, index, locale, collection, products, reduceMotion }: { chapter: Chapter; index: number; locale: CollectionLocale; collection: NordenCollection; products: StoryProduct[]; reduceMotion: boolean }) { const sceneRef = useRef(null); const mediaLeft = index % 2 === 1; const { scrollYProgress } = useScroll({ target: sceneRef, offset: ["start end", "end start"] }); const mediaScale = useTransform(scrollYProgress, [0, .48, 1], [.86, 1, .95]); const mediaY = useTransform(scrollYProgress, [0, .5, 1], [70, 0, -42]); const mediaRotate = useTransform(scrollYProgress, [0, .5, 1], [mediaLeft ? -2.2 : 2.2, 0, mediaLeft ? 1 : -1]); const icons = { size: , control: , power: , surface: , choice: }; if (chapter.icon === "control" && chapter.detail.includes("TOUCH")) icons.control = ; if (chapter.icon === "power" && chapter.detail.includes("TIMER")) icons.power = ; return
{icons[chapter.icon]} {String(index + 1).padStart(2, "0")}

{chapter.title.split(" ").map((word, i) => {word})}

{chapter.body}

{chapter.detail}

{index === 4 && }
; } function ChapterVisual({ chapter, index, locale, collection, products }: { chapter: Chapter; index: number; locale: CollectionLocale; collection: NordenCollection; products: StoryProduct[] }) { const electric = collection.seriesFilter === "VTC"; const visualCopy = locale === "tr" ? { lineup: "Yayımlanmış gerçek ölçüler", top: "Gerçek ürün üst görünüşü", wok: "Wok donanımlı gerçek model", control: "Kontrol yüzeyi detayı", choices: "Gerçek yüzey ve model seçenekleri" } : locale === "ru" ? { lineup: "Реальные опубликованные размеры", top: "Реальный вид изделия сверху", wok: "Реальная модель с Wok", control: "Деталь панели управления", choices: "Реальные варианты поверхности и моделей" } : { lineup: "Published real dimensions", top: "Real product top view", wok: "Real Wok-equipped model", control: "Control-surface detail", choices: "Real surface and model choices" }; if (index === 0) return ; if (index === 1) { const controlProduct = products.find((product) => product.widthCm === 60) ?? products[0]; const detailImage = electric && controlProduct ? controlProduct.image.replace(/01-perspective\.webp$/i, "03-detail.webp") : chapter.image; return ; } if (index === 2) { if (electric) { const controlProduct = products.find((product) => product.widthCm === 60) ?? products[0]; const detailImage = controlProduct?.image.replace(/01-perspective\.webp$/i, "03-detail.webp") ?? collection.image; return ; } const wokProduct = products.find((product) => product.widthCm === 60 && /\bwok\b/i.test(product.name) && !/inox/i.test(product.surface || "")) ?? products.find((product) => product.widthCm === 60 && /\bwok\b/i.test(product.name)) ?? products.find((product) => /\bwok\b/i.test(product.name)) ?? products.find((product) => product.widthCm === 60) ?? products[0]; return ; } if (index === 3) return ; return ; } function SizeLineup({ collection, locale, products, caption }: { collection: NordenCollection; locale: CollectionLocale; products: StoryProduct[]; caption: string }) { const byWidth = new Map(); for (const product of products) { if (product.widthCm !== null && !byWidth.has(product.widthCm)) byWidth.set(product.widthCm, product); } const lineup = [...byWidth.entries()].sort(([a], [b]) => a - b).slice(0, 4); return

{caption}

3 ? "grid-cols-2 xl:grid-cols-4" : "grid-cols-3"}`}> {lineup.map(([width, product]) =>
{localizeProductName(product,
{width}{locale === "ru" ? "см" : "cm"}
)}
{lineup.length === 0 && }
; } function TechnicalImageFrame({ src, alt, caption, cover = false }: { src: string; alt: string; caption: string; cover?: boolean }) { return
{alt}

{caption}

; } function SurfaceVariants({ collection, locale, products, caption }: { collection: NordenCollection; locale: CollectionLocale; products: StoryProduct[]; caption: string }) { const glass = products.find((product) => product.surface === "Siyah Cam" && getProductCookingSystem(product) === "gas"); const inox = products.find((product) => product.surface === "Inox"); const ceran = products.find((product) => getProductCookingSystem(product) !== "gas"); const alternatives = [glass, inox, ceran].filter((product, index, items): product is StoryProduct => Boolean(product) && items.findIndex((candidate) => candidate?.id === product?.id) === index); if (alternatives.length === 0 && products[0]) alternatives.push(products[0]); if (alternatives.length === 1) { const second = products.find((product) => product.id !== alternatives[0].id && product.widthCm !== alternatives[0].widthCm); if (second) alternatives.push(second); } return

{caption}

2 ? "grid-cols-2 md:grid-cols-3" : alternatives.length > 1 ? "grid-cols-2" : "grid-cols-1"}`}> {alternatives.map((product) =>
{localizeProductName(product,

{localizeProductName(product, locale)}

{getProductFormatLabels(product, locale).join(" · ") || collection.name} · {product.widthCm ?? "—"} {locale === "ru" ? "см" : "cm"}
)}
; } function TechnicalVisualDecor() { return ; } function SurfacePalette({ locale }: { locale: CollectionLocale }) { const finish = locale === "tr" ? "Parlak · Mat" : locale === "ru" ? "Глянцевое · Матовое" : "Glossy · Matte"; const colors = [ { name: locale === "ru" ? "Белый" : "White", value: "#f1f0eb" }, { name: locale === "ru" ? "Чёрный" : "Black", value: "#151517" }, { name: locale === "ru" ? "Бежевый" : "Beige", value: "#c39b6d" }, { name: locale === "ru" ? "Серый" : "Gray", value: "#aaa9a5" }, ]; return
{colors.map((color) =>
{color.name}
)}

{finish}

; }