"use client"; import { useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { ArrowRight, Layers3 } from "lucide-react"; import { m, useReducedMotion } from "framer-motion"; import { useLocale } from "next-intl"; import TypewriterText from "@/components/TypewriterText"; import { getCollectionLocale, type NordenCollection } from "@/lib/collections"; const copy = { tr: { eyebrow: "Bir ürün değil, bir sistem", title: "Mutfağın ölçüsünden alevin karakterine kadar.", body: "Cam, Inox ve Vitroceramic yüzeyler; 30–90 cm ölçüler ve modele göre yapılandırılabilen pişirme bileşenleri. Norden kataloğu, tasarım kararlarını teknik gerçeklerle aynı düzlemde sunar.", explore: (count: number) => `${count} seriyi keşfet`, products: "Tüm ocakları karşılaştır", pillars: ["İşlev", "Dayanıklılık", "Kişiselleştirme", "Güç"], }, en: { eyebrow: "Not a product, but a system", title: "From the dimensions of the kitchen to the character of the flame.", body: "Glass, Inox and Vitroceramic surfaces; 30–90 cm dimensions and model-dependent cooking components. The Norden catalogue presents design decisions and technical facts on the same plane.", explore: (count: number) => `Explore all ${count} series`, products: "Compare all hobs", pillars: ["Function", "Durability", "Customisation", "Power"], }, ru: { eyebrow: "Не просто продукт, а система", title: "От размеров кухни до характера пламени.", body: "Поверхности из стекла, Inox и Vitroceramic; размеры 30–90 см и компоненты, зависящие от модели. Каталог Norden объединяет дизайнерские решения и технические факты.", explore: (count: number) => `Открыть ${count} серий`, products: "Сравнить все панели", pillars: ["Функция", "Надёжность", "Персонализация", "Мощность"], }, }; type SeriesTriangle = { clipPath: string; labelX: number; labelY: number; side: "left" | "right" | "center"; }; function getSeriesPoint(index: number, count: number) { const lastPoint = Math.max(count - 1, 1); return { x: index % 2 === 0 ? 0 : 100, y: (index / lastPoint) * 100, }; } function getSeriesTriangle(index: number, count: number): SeriesTriangle { if (count <= 1) { return { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", labelX: 50, labelY: 50, side: "center" }; } const lastIndex = count - 1; const formatPoint = ({ x, y }: { x: number; y: number }) => `${x}% ${y}%`; let points: Array<{ x: number; y: number }>; if (index === 0) { points = [getSeriesPoint(0, count), { x: 100, y: 0 }, getSeriesPoint(1, count)]; } else if (index === lastIndex) { const lastPoint = getSeriesPoint(lastIndex, count); points = [ getSeriesPoint(lastIndex - 1, count), { x: lastPoint.x === 0 ? 100 : 0, y: 100 }, lastPoint, ]; } else { points = [ getSeriesPoint(index - 1, count), getSeriesPoint(index, count), getSeriesPoint(index + 1, count), ]; } const centroidX = points.reduce((sum, point) => sum + point.x, 0) / points.length; return { clipPath: `polygon(${points.map(formatPoint).join(", ")})`, labelX: centroidX > 50 ? 74 : 26, labelY: points.reduce((sum, point) => sum + point.y, 0) / points.length, side: centroidX > 50 ? "right" : "left", }; } export default function CategoryShowcase({ collections }: { collections: NordenCollection[] }) { const locale = getCollectionLocale(useLocale()); const t = copy[locale]; const reduceMotion = useReducedMotion(); const [activeIndex, setActiveIndex] = useState(0); const collectionCount = collections.length; const activeCollection = collections[activeIndex] ?? collections[0]; const seriesTriangles = collections.map((_, index) => getSeriesTriangle(index, collectionCount)); const zigzagPoints = Array.from({ length: collectionCount }, (_, index) => { const { x, y } = getSeriesPoint(index, collectionCount); return `${x},${y}`; }).join(" "); return (
); }