import { useMemo, useState } from "react"; import { Link, useNavigate, useParams } from "react-router"; import perfumes from "../data/perfumes"; import "../style/navbar.css"; import "./ProductDetailPage.css"; function ProductDetailContent({ perfumeSlug }) { const navigate = useNavigate(); const perfume = useMemo( () => perfumes.find((item) => item.slug === perfumeSlug) || perfumes[0], [perfumeSlug] ); const [selectedImage, setSelectedImage] = useState( perfume.gallery?.[0] || perfume.image ); const [selectedSize, setSelectedSize] = useState("sample"); const sizeOptions = [ { key: "sample", title: "Sample 2ml", price: perfume.prices.sample, note: "Zum Testen · ca. 20 Anwendungen", }, { key: "full", title: "Full Size 50ml", price: perfume.prices.full, note: "Nachkauf · 500+ Anwendungen", }, ]; return (
{perfume.name}
{[perfume.image, ...(perfume.gallery || [])] .slice(0, 3) .map((img, index) => ( ))}

DUFTSTRUKTUR

PHASE 1: TOP NOTES (0–1 H)
{perfume.phases.top.map((note) => ( {note} ))}
PHASE 2: HEART NOTES (1–4 H)
{perfume.phases.heart.map((note) => ( {note} ))}
PHASE 3: BASE NOTES (4 H+)
{perfume.phases.base.map((note) => ( {note} ))}
MOODSETTING

{perfume.mood}

TRAGEHINWEIS

{perfume.dosage}

HALTBARKEIT

{perfume.longevity}

ANLASS

{perfume.occasion}

{perfume.name}

{perfume.shortText}

MATERIAL-KOMPOSITION
{perfume.materialTags.map((tag) => ( {tag} ))}
GRÖSSE WÄHLEN
{sizeOptions.map((option) => ( ))}
Discovery Set wird angerechnet

Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf automatisch abgezogen.

BESCHREIBUNG

{perfume.description}

HERKUNFT

{perfume.origin}

KONZENTRATION

{perfume.concentration}

EDITION

{perfume.edition}

LIEFERUNG CH
VERSAND

Innerhalb von 1–2 Werktagen

ZUSTELLUNG

In der Regel in 5–6 Tagen bei dir

HINWEIS

Sorgfältig verpackt und geschützt versendet.

Lieber erst testen?

Bestelle ein 2ml Sample für CHF 12 oder das komplette Discovery Set mit allen 6 Düften für CHF 48. Beide werden beim späteren Full-Size-Kauf vollständig angerechnet.

); } function ProductDetailPage() { const { perfumeSlug = "kalter-beton" } = useParams(); return ; } export default ProductDetailPage;