"use client"; import Link from "next/link"; import Image from "next/image"; function IconRegister() { return ( ); } function IconListProducts() { return ( ); } function IconConnect() { return ( ); } function IconArrowCircle() { return ( ); } function IconCertifiedProducers() { return ( ); } const ICON_MAP = [IconRegister, IconListProducts, IconConnect, IconCertifiedProducers] as const; export type HowItWorksSectionData = { title?: string; description?: string; buttonLabel?: string; buttonHref?: string; steps?: { id: string; number: string; svg?: string; title: string; description: string }[]; } | null; export type HowItWorksSectionProps = { data?: HowItWorksSectionData }; const DESKTOP_CARD_HEIGHT = 207; export default function HowItWorksSection(props: HowItWorksSectionProps) { const { data } = props; const sectionTitle = data?.title || ""; const sectionTitleWords = sectionTitle.trim().split(/\s+/).filter(Boolean); const sectionDescription = data?.description || ""; const sectionButtonLabel = data?.buttonLabel || ""; const sectionButtonHref = data?.buttonHref || ""; const apiSteps = data?.steps ?? []; if (!apiSteps.length) return null; const stepsData: { id: string; number: string; svg?: string; icon: (typeof ICON_MAP)[number]; title: string; description: string; }[] = apiSteps.map((s, i) => ({ id: s.id || String(i + 1), number: s.number || String(i + 1).padStart(2, "0"), svg: s.svg, icon: ICON_MAP[i % ICON_MAP.length], title: s.title || "", description: s.description || "", })); return (
How it works background
{stepsData.map((stepItem) => { const Icon = stepItem.icon; return (
{stepItem.number}

{stepItem.title}

{stepItem.description}

); })}
{stepsData.map((stepItem) => { const Icon = stepItem.icon; return (
{stepItem.number}

{stepItem.title}

{stepItem.description}
); })}

{sectionTitleWords.slice(0, 2).join(" ")} {sectionTitleWords.length > 2 ? ( <> {" "} {sectionTitleWords.slice(2).join(" ")} ) : null}

{sectionDescription}

{sectionButtonLabel}

); }