From 0786fbac8b6ea9ea66bfb30761960fdd8c684231 Mon Sep 17 00:00:00 2001
From: anielsen99 <amanda.nielsen@gmx.ch>
Date: Tue, 21 Apr 2026 18:31:04 +0200
Subject: [PATCH] add dropdown for duftstruktur and moodsetting

---
 .../src/components/ProductDetailPage.css      |  75 ++++++++-
 .../src/components/ProductDetailPage.jsx      | 149 +++++++++++-------
 2 files changed, 164 insertions(+), 60 deletions(-)

diff --git a/parfum-shop/src/components/ProductDetailPage.css b/parfum-shop/src/components/ProductDetailPage.css
index adf158e..7205678 100644
--- a/parfum-shop/src/components/ProductDetailPage.css
+++ b/parfum-shop/src/components/ProductDetailPage.css
@@ -395,6 +395,79 @@
 
 /* --- Mood Box End --- */
 
+/* --- Accordion / Dropdown Components Start --- */
+
+.accordion-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 26px;
+}
+
+.accordion-item {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  border-left: 3px solid #d9d9d9; /* Subtiler Rahmen im Normalzustand */
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.accordion-item.is-open {
+  border-left-color: #ff6a00; /* Farbabgleich: Orange, wenn offen */
+  background: #fcfcfc;
+}
+
+.accordion-toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 18px 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  letter-spacing: 0.24em;
+  font-weight: 500;
+  color: #1f1f1f;
+  transition: opacity 0.2s ease;
+}
+
+.accordion-toggle:hover {
+  opacity: 0.7;
+}
+
+.accordion-icon {
+  font-size: 20px;
+  line-height: 1;
+  color: #ff6a00;
+  font-weight: 300;
+}
+
+.accordion-content {
+  padding: 0 20px 22px 20px;
+}
+
+/* Bereinigung der alten Strukturen für die Dropdowns */
+.detail-structure-layout {
+  margin-top: 6px; /* Angepasst für das Innere des Dropdowns */
+}
+
+.detail-structure {
+  background: transparent; /* Hintergrund wird jetzt vom Akkordeon gesteuert */
+  border: none;
+  padding: 0;
+}
+
+.mood-box-content p {
+  font-size: 16px;
+  line-height: 1.65;
+  margin: 0;
+  color: #1f1f1f;
+  padding-top: 6px;
+}
+
+/* --- Accordion / Dropdown Components End --- */
+
 /* --- Right Column Start --- */
 
 .detail-info {
@@ -915,7 +988,7 @@
 }
 
 .discovery-note-text p {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.45;
   color: #d0d0d0;
   margin: 0;
diff --git a/parfum-shop/src/components/ProductDetailPage.jsx b/parfum-shop/src/components/ProductDetailPage.jsx
index 6e89918..2af906c 100644
--- a/parfum-shop/src/components/ProductDetailPage.jsx
+++ b/parfum-shop/src/components/ProductDetailPage.jsx
@@ -26,6 +26,8 @@ function ProductDetailContent({ perfumeSlug }) {
   const [selectedSize, setSelectedSize] = useState("sample");
   const [showReviewDetails, setShowReviewDetails] = useState(false);
   const [commentPage, setCommentPage] = useState(0);
+  const [isStructureOpen, setIsStructureOpen] = useState(false);
+  const [isMoodOpen, setIsMoodOpen] = useState(false);
   const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
   const selectedProductLabel = selectedSize === "sample" ? "Sample" : "Full Size";
   const selectedPriceCents = priceToCents(perfume.prices[selectedSize]);
@@ -146,73 +148,102 @@ function ProductDetailContent({ perfumeSlug }) {
               </div>
             </div>
 
-            <div className="detail-structure-layout">
-              <div className="detail-structure">
-                <h3>DUFTSTRUKTUR</h3>
+            {/* --- Accordion Group Start --- */}
+            <div className="accordion-group">
+              
+              {/* Dropdown: Duftstruktur */}
+              <div className={`accordion-item ${isStructureOpen ? "is-open" : ""}`}>
+                <button
+                  type="button"
+                  className="accordion-toggle"
+                  onClick={() => setIsStructureOpen(!isStructureOpen)}
+                >
+                  <span>DUFTSTRUKTUR</span>
+                  <span className="accordion-icon">{isStructureOpen ? "−" : "+"}</span>
+                </button>
+                
+                {isStructureOpen && (
+                  <div className="accordion-content">
+                    <div className="detail-structure-layout">
+                      <div className="detail-structure">
+                        <div className="structure-block">
+                          <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
+                          <div className="structure-tags-grid">
+                            {perfume.phases.top.map((note) => (
+                              <span key={note} className="structure-tag">{note}</span>
+                            ))}
+                          </div>
+                        </div>
 
-                <div className="structure-block">
-                  <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
-                  <div className="structure-tags-grid">
-                    {perfume.phases.top.map((note) => (
-                      <span key={note} className="structure-tag">
-                        {note}
-                      </span>
-                    ))}
-                  </div>
-                </div>
+                        <div className="structure-block">
+                          <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
+                          <div className="structure-tags-grid">
+                            {perfume.phases.heart.map((note) => (
+                              <span key={note} className="structure-tag">{note}</span>
+                            ))}
+                          </div>
+                        </div>
 
-                <div className="structure-block">
-                  <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
-                  <div className="structure-tags-grid">
-                    {perfume.phases.heart.map((note) => (
-                      <span key={note} className="structure-tag">
-                        {note}
-                      </span>
-                    ))}
-                  </div>
-                </div>
+                        <div className="structure-block">
+                          <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
+                          <div className="structure-tags-grid">
+                            {perfume.phases.base.map((note) => (
+                              <span key={note} className="structure-tag">{note}</span>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
 
-                <div className="structure-block">
-                  <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
-                  <div className="structure-tags-grid">
-                    {perfume.phases.base.map((note) => (
-                      <span key={note} className="structure-tag">
-                        {note}
-                      </span>
-                    ))}
+                      <aside className="structure-info-box">
+                        <span className="structure-info-label">ZUR EINORDNUNG</span>
+                        <p>
+                          Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
+                          der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
+                          und die Spur, die lange auf Haut und Kleidung bleibt.
+                        </p>
+
+                        <div className="structure-info-legend">
+                          <div>
+                            <span className="structure-info-dot structure-info-dot--light" />
+                            <span>Auftakt</span>
+                          </div>
+                          <div>
+                            <span className="structure-info-dot structure-info-dot--mid" />
+                            <span>Herz</span>
+                          </div>
+                          <div>
+                            <span className="structure-info-dot structure-info-dot--strong" />
+                            <span>Basis</span>
+                          </div>
+                        </div>
+                      </aside>
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
 
-              <aside className="structure-info-box">
-                <span className="structure-info-label">ZUR EINORDNUNG</span>
-                <p>
-                  Die Duftstruktur zeigt, wie sich der Duft über die Zeit entfaltet:
-                  der erste Eindruck im Auftakt, die eigentliche Signatur im Herzen
-                  und die Spur, die lange auf Haut und Kleidung bleibt.
-                </p>
-
-                <div className="structure-info-legend">
-                  <div>
-                    <span className="structure-info-dot structure-info-dot--light" />
-                    <span>Auftakt</span>
+              {/* Dropdown: Moodsetting */}
+              <div className={`accordion-item ${isMoodOpen ? "is-open" : ""}`}>
+                <button
+                  type="button"
+                  className="accordion-toggle"
+                  onClick={() => setIsMoodOpen(!isMoodOpen)}
+                >
+                  <span>MOODSETTING</span>
+                  <span className="accordion-icon">{isMoodOpen ? "−" : "+"}</span>
+                </button>
+                
+                {isMoodOpen && (
+                  <div className="accordion-content">
+                    <div className="mood-box-content">
+                      <p>{perfume.mood}</p>
+                    </div>
                   </div>
-                  <div>
-                    <span className="structure-info-dot structure-info-dot--mid" />
-                    <span>Herz</span>
-                  </div>
-                  <div>
-                    <span className="structure-info-dot structure-info-dot--strong" />
-                    <span>Basis</span>
-                  </div>
-                </div>
-              </aside>
-            </div>
-
-            <div className="mood-box">
-              <span className="mood-label">MOODSETTING</span>
-              <p>{perfume.mood}</p>
+                )}
+              </div>
+              
             </div>
+            {/* --- Accordion Group End --- */}
           </div>
 
           <div className="detail-info">