parfum_agsd/parfum-shop/src/components/ProductDetailPage.jsx

import { useMemo, useState } from "react";
import perfumes from "../data/perfumes";
import "../navbar.css";
import "./ProductDetailPage.css";

function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
  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 (
    <div className="detail-page">
      {/* Navbar */}
      <nav className="navbar navbar--light">
        <div className="nav-pill">
          <a href="#home" className="nav-link active">
            Name
          </a>
          <a href="#dufte" className="nav-link">
            Düfte
          </a>
          <a href="#testen" className="nav-link">
            Testen
          </a>
          <a href="#cart" className="nav-link">
            Cart
          </a>
        </div>
      </nav>
      {/* --- Navbar End --- */}

      {/* Product detail content */}
      <main className="detail-shell">
        <button className="back-link" type="button">
          ← Zurück zur Startseite
        </button>

        <section className="detail-layout">
          {/* Left column */}
          <div className="detail-gallery">
            <div className="detail-main-image">
              <img src={selectedImage} alt={perfume.name} />
            </div>

            <div className="detail-thumbs">
              {[perfume.image, ...(perfume.gallery || [])]
                .slice(0, 3)
                .map((img, index) => (
                  <button
                    key={`${img}-${index}`}
                    type="button"
                    className={`thumb-btn ${selectedImage === img ? "active" : ""}`}
                    onClick={() => setSelectedImage(img)}
                  >
                    <img src={img} alt={`${perfume.name} Ansicht ${index + 1}`} />
                  </button>
                ))}
            </div>

            <div className="detail-structure">
              <h3>DUFTSTRUKTUR</h3>

              <div className="structure-block">
                <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
                <div className="material-tags">
                  {perfume.phases.top.map((note) => (
                    <span key={note}>{note}</span>
                  ))}
                </div>
              </div>

              <div className="structure-block">
                <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
                <div className="material-tags">
                  {perfume.phases.heart.map((note) => (
                    <span key={note}>{note}</span>
                  ))}
                </div>
              </div>

              <div className="structure-block">
                <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
                <div className="material-tags">
                  {perfume.phases.base.map((note) => (
                    <span key={note}>{note}</span>
                  ))}
                </div>
              </div>

              <div className="mood-box">
                <span className="mood-label">MOODSETTING</span>
                <p>{perfume.mood}</p>
              </div>
            </div>

            <div className="detail-meta-grid">
              <div>
                <span>TRAGEHINWEIS</span>
                <p>{perfume.dosage}</p>
              </div>

              <div>
                <span>HALTBARKEIT</span>
                <p>{perfume.longevity}</p>
              </div>

              <div>
                <span>ANLASS</span>
                <p>{perfume.occasion}</p>
              </div>
            </div>
          </div>

          {/* Right column */}
          <div className="detail-info">
            <div className="detail-heading">
              <h1>{perfume.name}</h1>
              <p>{perfume.shortText}</p>
            </div>

            <div className="detail-section-block">
              <span className="label-title">MATERIAL-KOMPOSITION</span>
              <div className="material-tags">
                {perfume.materialTags.map((tag) => (
                  <span key={tag}>{tag}</span>
                ))}
              </div>
            </div>

            <div className="detail-section-block">
              <span className="label-title">GRÖSSE WÄHLEN</span>
              <div className="size-grid">
                {sizeOptions.map((option) => (
                  <button
                    key={option.key}
                    type="button"
                    className={`size-card ${selectedSize === option.key ? "active" : ""}`}
                    onClick={() => setSelectedSize(option.key)}
                  >
                    <span className="size-title">{option.title}</span>
                    <strong>{option.price}</strong>
                    <small>{option.note}</small>
                  </button>
                ))}
              </div>
            </div>

            <div className="discovery-note">
              <div className="discovery-note-text">
                <strong>Discovery Set wird angerechnet</strong>
                <p>
                  Hast du das Discovery Set gekauft, wird der volle Preis beim Kauf
                  automatisch abgezogen.
                </p>
              </div>
              <button className="discovery-note-btn" type="button">
                Zum Set
              </button>
              
            </div>

            <button className="buy-button" type="button">
              KAUFEN
            </button>

            <div className="detail-columns">
              <div className="detail-copy-block">
                <span className="label-title">BESCHREIBUNG</span>
                <p>{perfume.description}</p>
              </div>

              <div className="detail-copy-block">
                <span className="label-title">HERKUNFT</span>
                <p>{perfume.origin}</p>
              </div>

              <div className="detail-copy-block">
                <span className="label-title">KONZENTRATION</span>
                <p>{perfume.concentration}</p>
              </div>

              <div className="detail-copy-block">
                <span className="label-title">EDITION</span>
                <p>{perfume.edition}</p>
              </div>
            </div>
          </div>
        </section>

        {/* Bottom CTA */}
        <section className="detail-bottom-cta">
          <h2>Lieber erst testen?</h2>
          <p>
            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.
          </p>

          <div className="detail-bottom-actions">
            <button type="button">SAMPLE BESTELLEN – CHF 12</button>
            <button type="button">DISCOVERY SET – CHF 48</button>
          </div>
        </section>
      </main>
    </div>
  );
}

export default ProductDetailPage;