ok

src/components/AcademySection.js

@@ -1,32 +1,60 @@
 import React, { useEffect, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import styles from './Styles.module.css';
+import useInView from '../hooks/useInView';
 
 const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, setWillDo}) => {
   const [products, setProducts] = useState([]);
   const [hoveredCard, setHoveredCard] = useState(null);
   
   useEffect(() => {
+    // Fetch all items to compute module/sessions reliably, then filter courses client-side
     fetch('https://bot.kediritechnopark.com/webhook/store-production/products', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ type: 'course' }),
+      body: JSON.stringify({}),
     })
       .then(res => res.json())
-      .then(data => setProducts(data))
+      .then(data => {
+        const all = Array.isArray(data) ? data : [];
+        const moduleCountMap = {};
+        const sessionsCountMap = {};
+        all.forEach(item => {
+          const parentId = item?.sub_product_of;
+          if (parentId) {
+            moduleCountMap[parentId] = (moduleCountMap[parentId] || 0) + 1;
+            const s = Number(item?.sessions || item?.session_count || 0);
+            sessionsCountMap[parentId] = (sessionsCountMap[parentId] || 0) + (isNaN(s) ? 0 : s);
+          }
+        });
+        const coursesOnly = all.filter(p => (p?.type || '').toLowerCase() === 'course');
+        const enriched = coursesOnly.map(p => ({
+          ...p,
+          module_count: p?.module_count ?? p?.modules ?? moduleCountMap[p.id] ?? 0,
+          session_count: p?.session_count ?? p?.sessions ?? sessionsCountMap[p.id] ?? 0,
+        }));
+        setProducts(enriched);
+      })
       .catch(err => console.error('Fetch error:', err));
   }, []);
 
+  const { ref, inView } = useInView();
   return (
 
-    <section id="services" className="services pt-5" ref={courseSectionRef}>
+    <section id="academy" className={`services pt-5 ${styles.academySection} ${styles.revealSection} ${inView ? styles.isVisible : ''}`} ref={(el) => {
+      if (typeof courseSectionRef === 'function') courseSectionRef(el);
+      if (ref) ref.current = el;
+    }}>
       <Container>
-        <div className="section-heading  mb-4">
-          <h4>OUR <em>ACADEMY PROGRAM</em></h4>
-          <img src="/assets/images/heading-line-dec.png" alt="" />
-          <p>Academy Program adalah wadah belajar digital untuk anak-anak dan remaja. Didesain interaktif, kreatif, dan gratis — setiap modul membekali peserta dengan keterampilan masa depan, dari teknologi dasar hingga coding dan proyek nyata.</p>
+        <div className={styles.sectionHeader}>
+          <div className={styles.sectionEyebrow}>Academy</div>
+          <h2 className={styles.sectionTitle}>Our Academy Program</h2>
+          <div className={styles.sectionRule} />
+          <p className={styles.sectionSubtitle}>
+            Academy Program adalah wadah belajar digital untuk anak-anak dan remaja. Didesain interaktif, kreatif, dan gratis — setiap modul membekali peserta dengan keterampilan masa depan, dari teknologi dasar hingga coding dan proyek nyata.
+          </p>
         </div>
 
         <div className={styles.coursesGrid}>
@@ -51,7 +79,14 @@ const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, s
                       )}
                     </div>
                     <div className={styles.courseContentTop}>
-                      <h3 className={styles.courseTitle}>{product.name}</h3>
+                      <div className={styles.titleRow}>
+                        <h3 className={styles.courseTitle}>{product.name}</h3>
+                        <div className={styles.pillRow}>
+                          <span className={`${styles.pill} ${styles.pillModules}`}>{Number(product?.module_count || 0)} Modul</span>
+                          <span className={`${styles.pill} ${styles.pillSessions}`}>{Number(product?.session_count || 0)} Sesi</span>
+                        </div>
+                      </div>
+                      <div className={styles.titleSeparator} />
                       <p className={styles.courseDesc}>{product.description}</p>
                     </div>
                   </div>
@@ -69,12 +104,12 @@ const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, s
                           : `Rp ${product.price.toLocaleString('id-ID')}`}
                       </span>
                     </div>
-                    <button className="px-4 py-2 rounded-pill text-white" style={{ background: 'linear-gradient(to right, #6a59ff, #8261ee)', border: 'none' }} 
+                    <button className={`${styles.enrollButton}`}
                     onClick={() => {
                     setSelectedProduct(product);
                     setShowedModal('product');
                     setWillDo('checkout');
-                  }}>Beli</button>
+                  }}>Daftar</button>
                   </div>
                 </div>
               ))}