<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Portal Partner Mizyan | Premium Dashboard</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.4/babel.min.js"></script>

  <style>
    :root {
      --primary: #38bdf8;
      --accent: #fbbf24;
      --success: #10b981;
      --warning: #facc15;
      --danger: #ef4444;
      --font-family: 'Plus Jakarta Sans', sans-serif;
      --font-heading: 'Outfit', 'Poppins', sans-serif;
      
      --bg-dark: #020617; 
      --bg-card: rgba(15, 23, 42, 0.50);
      --bg-card-solid: #0f172a;
      --text-main: #f8fafc;
      --text-heading: #ffffff;
      --text-muted: #94a3b8;
      --border-light: rgba(255, 255, 255, 0.08);
      --border-medium: rgba(255, 255, 255, 0.15);
      --glass-bg: rgba(15, 23, 42, 0.75);
      --overlay-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.2) 0%, rgba(2, 6, 23, 0.5) 100%);
      --input-bg: rgba(2, 6, 23, 0.6);
      --card-shadow: 0 10px 25px rgba(0,0,0,0.25);
      --hover-shadow: 0 15px 35px rgba(0,0,0,0.45);
      --modal-bg: #0f172a;
      --menu-card-hover: rgba(30, 41, 59, 0.85);
      --cms-list-hover: rgba(15, 23, 42, 0.85);
      --bottom-nav-bg: rgba(15, 23, 42, 0.90);
      --sidebar-bg: rgba(15, 23, 42, 0.98);

      --c-yellow: #f59e0b;
      --c-red: #ef4444;
      --c-blue: #3b82f6; 
      --c-purple: #8b5cf6;
      --c-green: #10b981;
      --c-orange: #f97316;
      --c-pink: #ec4899;
    }

    [data-theme="light"] {
      --bg-dark: #f8fafc; 
      --bg-card: rgba(255, 255, 255, 0.60);
      --bg-card-solid: #ffffff;
      --text-main: #334155; 
      --text-heading: #0f172a; 
      --text-muted: #64748b;
      --border-light: rgba(0, 0, 0, 0.08);
      --border-medium: rgba(0, 0, 0, 0.15);
      --glass-bg: rgba(255, 255, 255, 0.80);
      --overlay-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.1) 0%, rgba(248, 250, 252, 0.4) 100%);
      --input-bg: rgba(255, 255, 255, 0.85);
      --card-shadow: 0 10px 25px rgba(0,0,0,0.06);
      --hover-shadow: 0 15px 35px rgba(0,0,0,0.12);
      --modal-bg: #ffffff;
      --menu-card-hover: rgba(255, 255, 255, 1);
      --cms-list-hover: rgba(255, 255, 255, 0.95);
      --bottom-nav-bg: rgba(255, 255, 255, 0.92);
      --sidebar-bg: rgba(255, 255, 255, 0.99);
    }

    *, *::before, *::after { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
      -webkit-font-smoothing: antialiased; 
      -webkit-tap-highlight-color: transparent;
    }
    
    html { 
      width: 100%; 
      height: 100%; 
      background: var(--bg-dark); 
      color: var(--text-main); 
      overflow-x: hidden !important;
      -webkit-text-size-adjust: 100%;
    }

    body { 
      font-family: var(--font-family); 
      width: 100%; 
      min-height: 100%; 
      position: relative; 
      overflow-x: hidden !important; 
      touch-action: pan-y;
      background: var(--bg-dark);
      padding-top: 95px; 
      padding-bottom: 90px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    button, input, select, textarea { font-family: var(--font-family); }
    #root { width: 100%; min-height: 100vh; overflow-x: hidden !important; position: relative; }
    
    ::-webkit-scrollbar { width: 6px; height: 6px;}
    ::-webkit-scrollbar-track { background: var(--border-light); }
    ::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.5); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.8); }

    .bg-fixed { 
      position: fixed; inset: 0; background-color: var(--bg-dark); 
      background-size: cover !important; background-position: center center !important; 
      z-index: 0; transition: background-image 0.5s ease; pointer-events: none;
    }
    .bg-fixed::after {
      content: ''; position: absolute; inset: 0;
      background: var(--overlay-bg);
      z-index: 1; transition: background 0.3s ease;
    }

    .app-container { 
      width: 100%; max-width: 1100px; margin: 0 auto; 
      padding: 20px 20px 120px 20px; display: flex; flex-direction: column; 
      position: relative; z-index: 10; animation: fadeIn 0.4s ease-out forwards;
    }
    
    @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

    /* HEADER UTAMA BARU */
    .header-atas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(13, 22, 45, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 12px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      box-sizing: border-box;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 12px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .header-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-grow: 1;
      min-width: 0;
    }

    .header-title {
      font-size: 19px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: var(--font-heading);
    }

    .header-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .badge {
      background: rgba(255, 255, 255, 0.08);
      padding: 3px 9px;
      border-radius: 12px;
      font-size: 10px;
      color: #cbd5e1;
      border: 1px solid rgba(255, 255, 255, 0.05);
      font-weight: 700;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .btn-buat-website {
      background: #10b981;
      color: white;
      padding: 7px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
      transition: 0.3s;
    }
    .btn-buat-website:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.7);
    }

    .rocket-box {
      width: 40px;
      height: 40px;
      background: rgba(30, 41, 59, 0.8);
      border: 1px solid rgba(56, 189, 248, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
      text-decoration: none;
      font-size: 18px;
      transition: 0.3s;
    }
    .rocket-box:hover {
      transform: scale(1.08);
      border-color: #38bdf8;
    }

    .btn-menu { 
      background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255,255,255,0.25); color: #ffffff; 
      width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; 
      justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.3s ease;
    }
    .btn-menu:hover { background: rgba(56, 189, 248, 0.25); border-color: rgba(56,189,248,0.6); transform: scale(1.05);}

    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin-bottom: 25px;}
    @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
    .stat-card { 
      background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-light); border-radius: 20px; padding: 18px; 
      display: flex; flex-direction: column; transition: all 0.3s ease; color: var(--text-main); 
      cursor: default; box-shadow: var(--card-shadow);
    }
    .stat-card:hover { transform: translateY(-4px); border-color: rgba(56,189,248,0.25); box-shadow: var(--hover-shadow); }
    .stat-header { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
    .stat-header span { font-size: 13px; color: var(--text-muted); font-weight: 700; max-width: 65%; line-height: 1.4;}
    .stat-icon { 
      background: var(--border-light); width: 44px; height: 44px; display: flex; 
      align-items: center; justify-content: center; border-radius: 14px; font-size: 18px; 
      flex-shrink: 0; border: 1px solid var(--border-light);
    }
    .stat-value { font-size: 28px; font-weight: 800; margin-top: 14px; color: var(--text-heading); font-family: var(--font-heading);}

    .banner-slider { 
      position: relative; width: 100%; height: 240px; border-radius: 24px; overflow: hidden; 
      border: 1px solid var(--border-medium); box-shadow: var(--card-shadow); 
      margin-bottom: 30px; z-index: 10; 
    }
    .slider-wrapper { display: flex; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
    .slide { 
      min-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; 
      padding: 35px 40px; position: relative; background-size: cover; background-position: center; 
    }
    .slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%); z-index: 1; }
    .slide-content { position: relative; z-index: 2; max-width: 700px; }
    .slide-tag { 
      font-size: 10px; font-weight: 800; background: var(--warning); color: #000; 
      padding: 6px 14px; border-radius: 8px; text-transform: uppercase; margin-bottom: 12px; display: inline-block; letter-spacing: 0.5px;
    }
    .slide h2 { font-size: 30px; font-weight: 800; margin: 0 0 8px 0; color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,0.6); line-height: 1.2;}
    .slide p { font-size: 14px; color: #cbd5e1; text-shadow: 0 2px 5px rgba(0,0,0,0.6); line-height: 1.5; font-weight: 500; }
    
    .slider-dots { position: absolute; bottom: 20px; right: 30px; display: flex; gap: 8px; z-index: 5;}
    .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: 0.3s; cursor: pointer;}
    .dot.active { background: #fff; width: 20px; border-radius: 4px;}

    .menu-section-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; color: var(--text-heading); display: flex; align-items: center; gap: 10px;}
    .menu-section-title::before { content: ''; display: block; width: 6px; height: 24px; background: linear-gradient(to bottom, var(--primary), #0ea5e9); border-radius: 4px; }
    
    .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
    @media (max-width: 768px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
    .menu-card { 
      display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; 
      padding: 24px 16px; background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-light); border-radius: 24px; text-decoration: none; color: var(--text-main); 
      transition: all 0.3s ease; box-shadow: var(--card-shadow);
    }
    .menu-card:hover { 
      transform: translateY(-8px); border-color: rgba(56, 189, 248, 0.4); background: var(--menu-card-hover);
      box-shadow: var(--hover-shadow), 0 0 20px rgba(56,189,248,0.15);
    }
    .menu-icon-wrapper { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; transition: transform 0.3s ease;}
    .menu-card:hover .menu-icon-wrapper { transform: scale(1.1); }
    .menu-icon-img { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px; object-fit: cover; transition: transform 0.3s ease;}
    .menu-card:hover .menu-icon-img { transform: scale(1.1); }
    .menu-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; color: var(--text-heading); }
    .menu-card p { font-size: 12px; color: var(--text-muted); font-weight: 600; }

    .product-controls-container {
      display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px;
      background: var(--bg-card); backdrop-filter: blur(16px);
      border: 1px solid var(--border-light); border-radius: 24px; padding: 20px;
      box-shadow: var(--card-shadow);
    }
    .product-search-input-box {
      display: flex; align-items: center; background: var(--input-bg);
      border: 1px solid var(--border-medium); border-radius: 16px; padding: 14px 20px; gap: 14px; transition: all 0.3s ease;
    }
    .product-search-input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); }
    .product-search-input-box i { color: var(--primary); font-size: 16px; }
    .product-search-input-box input { background: transparent; border: none; outline: none; color: var(--text-heading); width: 100%; font-size: 14px; font-weight: 500; }
    .product-search-input-box input::placeholder { color: var(--text-muted); }
    
    .category-tabs-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
    .category-tabs-scroll::-webkit-scrollbar { display: none; }
    .category-tab-btn {
      background: var(--border-light); border: 1px solid var(--border-medium);
      color: var(--text-muted); padding: 10px 20px; border-radius: 50px; font-size: 13px; font-weight: 700;
      white-space: nowrap; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
    }
    .category-tab-btn:hover { color: var(--text-heading); border-color: rgba(56, 189, 248, 0.5); background: var(--border-medium);}
    .category-tab-btn.active { background: var(--primary); color: #020617; border-color: var(--primary); box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3); }

    .group-section-wrapper { margin-bottom: 50px; }
    
    .group-badge-center-container { display: flex; justify-content: center; align-items: center; margin: 30px 0; width: 100%; position: relative; }
    .group-badge-center-container::before {
      content: ''; position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.4) 50%, transparent 100%); z-index: 1;
    }
    .group-badge-pill {
      position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
      background: var(--bg-card-solid); border: 1px solid rgba(56, 189, 248, 0.5);
      border-radius: 50px; padding: 12px 30px; color: var(--text-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 20px rgba(56,189,248,0.2);
    }
    .group-badge-count { background: rgba(56, 189, 248, 0.2); border: 1px solid rgba(56, 189, 248, 0.4); color: #0ea5e9; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; }

    .katalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: 25px; }
    .katalog-card { 
      background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-light); border-radius: 20px; padding: 18px 12px; 
      display: flex; flex-direction: column; align-items: center; justify-content: space-between; 
      min-height: 160px; text-decoration: none; transition: all 0.3s ease; box-shadow: var(--card-shadow); position: relative; overflow: hidden;
    }
    .katalog-card:hover { transform: translateY(-6px); border-color: rgba(56, 189, 248, 0.4); background: var(--menu-card-hover); box-shadow: var(--hover-shadow), 0 0 20px rgba(56,189,248,0.15); }
    .katalog-icon { 
      width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; 
      margin-bottom: 14px; font-size: 26px; color: #ffffff !important; transition: transform 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.2); flex-shrink: 0;
    }
    .katalog-icon i { color: #ffffff !important; font-size: 26px !important; line-height: 1; display: inline-block; }
    .katalog-card:hover .katalog-icon { transform: scale(1.1) translateY(-2px); }
    .katalog-img { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px; object-fit: cover; transition: transform 0.3s ease; flex-shrink: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.2);}
    .katalog-card:hover .katalog-img { transform: scale(1.1) translateY(-2px); }
    .katalog-title { color: var(--text-heading); font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; margin: 0 0 14px 0; line-height: 1.4; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .katalog-btn { background: var(--border-light); border: 1px solid var(--border-medium); border-radius: 50px; padding: 8px 16px; color: var(--text-main); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; width: 100%; text-align: center; }
    .katalog-card:hover .katalog-btn { background: var(--primary); border-color: var(--primary); color: #020617; box-shadow: 0 8px 20px rgba(56,189,248,0.3); }

    .bottom-nav { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 480px; background: var(--bottom-nav-bg); backdrop-filter: blur(20px); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 100px; display: flex; justify-content: space-around; padding: 14px 12px; z-index: 999; box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
    .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; transition: 0.3s;}
    .nav-item i { font-size: 20px; }
    .nav-item:hover, .nav-item.active { color: var(--primary); transform: translateY(-2px);}

    .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 10000; visibility: hidden; opacity: 0; transition: all 0.3s ease; }
    .sidebar-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
    .sidebar-menu { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background-color: var(--sidebar-bg); backdrop-filter: blur(20px); z-index: 10001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-left: 1px solid rgba(56, 189, 248, 0.3); }
    .sidebar-menu.active { transform: translateX(0); }
    .sidebar-header { padding: 24px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
    .sidebar-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; color: var(--text-heading); font-family: var(--font-heading); }
    .close-sidebar { background: var(--border-light); border: none; color: var(--text-muted); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: 0.2s;}
    .close-sidebar:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
    .sidebar-content { flex: 1; overflow-y: auto; padding: 20px; }
    .sidebar-link { display: flex; align-items: center; gap: 14px; padding: 14px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; border-radius: 14px; margin-bottom: 6px; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: 0.2s;}
    .sidebar-link i { font-size: 18px; width: 22px; text-align: center; color: var(--text-muted); transition: 0.2s;}
    .sidebar-link:hover { background: var(--border-light); color: var(--text-heading); }
    .sidebar-link.active { background: linear-gradient(135deg, #0ea5e9, #38bdf8); font-weight: 700; color: #000; box-shadow: 0 5px 15px rgba(56, 189, 248, 0.3);}
    .sidebar-link.active i { color: #000; }

    .bg-yellow { background: var(--c-yellow); } .bg-red { background: var(--c-red); } .bg-blue { background: var(--c-blue); }
    .bg-purple { background: var(--c-purple); } .bg-green { background: var(--c-green); } .bg-orange { background: var(--c-orange); } .bg-pink { background: var(--c-pink); }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { useState, useEffect, useMemo } = React;

    const getIconClass = (iconName) => {
      if (!iconName) return 'fa-solid fa-box';
      const trimmed = iconName.trim();
      if (trimmed.startsWith('fa-solid ') || trimmed.startsWith('fa-brands ') || trimmed.startsWith('fa-regular ')) return trimmed;
      const clean = trimmed.replace(/^(fa-solid|fa-brands|fa-regular|fas|fab|far|fa)\s+/, '');
      const iconKey = clean.startsWith('fa-') ? clean : `fa-${clean}`;
      return `fa-solid ${iconKey}`;
    };

    // Data Lengkap Asli
    const DEFAULT_PROFILE = { 
      storeName: 'Mizyan Digital', 
      badge1: 'Belajar', 
      badge2: 'Berkembang', 
      badge3: 'Menghasilkan', 
      stat1: 247, 
      stat2: 29, 
      stat3: 3354, 
      stat4: '4.9', 
      bgImage: 'https://lh3.googleusercontent.com/file/d/1jBN6BWJxHfyLxLRJYV0lL2X6Ls0d5kwz', 
      mode: 'dark' 
    };

    const DEFAULT_BANNERS = [
      { id: 'b1', tag: 'BISMILLAH', title: 'Pejuang Produk Digital', desc: 'Mulai langkah bisnismu hari ini dan raih kesuksesan finansial.', bgImage: 'https://images.unsplash.com/photo-1542816417-0983c9c9ad53?auto=format&fit=crop&w=1200&q=80' },
      { id: 'b2', tag: 'EDUKASI', title: 'Belajar Tanpa Batas', desc: 'Akses ratusan modul pembelajaran berkualitas tinggi.', bgImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80' }
    ];

    const DEFAULT_NAVS = [
      { id: 'n1', title: 'Produk', desc: 'Akses Katalog File', url: '#produk-section', type: 'link', icon: 'fa-box', color: 'blue' },
      { id: 'n2', title: 'Grup Telegram', desc: 'Komunitas Belajar', url: 'https://t.me/', type: 'link', icon: 'fa-telegram', color: 'purple' }
    ];

    const DEFAULT_PRODUCTS = [
      { id: 'p1', title: 'Tasbih Digital', url: '#', icon: 'fa-fingerprint', color: 'yellow' },
      { id: 'p2', title: 'Kalkulator Zakat', url: '#', icon: 'fa-calculator', color: 'green' },
      { id: 'p3', title: 'Panduan Sholat', url: '#', icon: 'fa-book-open', color: 'blue' }
    ];

    const DEFAULT_GROUPS = [
      { id: 'grp_islami', name: '🕌 KHUSUS ISLAMI', productIds: ['p1', 'p2', 'p3'] }
    ];

    function App() {
      const [profile] = useState(DEFAULT_PROFILE);
      const [banners] = useState(DEFAULT_BANNERS);
      const [navs] = useState(DEFAULT_NAVS);
      const [products] = useState(DEFAULT_PRODUCTS);
      const [productGroups] = useState(DEFAULT_GROUPS);
      const [isSidebarOpen, setIsSidebarOpen] = useState(false);
      const [storefrontSearch, setStorefrontSearch] = useState('');
      const [selectedCategoryTab] = useState('ALL');
      const [currentSlide, setCurrentSlide] = useState(0);

      useEffect(() => {
        const timer = setInterval(() => {
          setCurrentSlide(prev => (prev + 1) % banners.length);
        }, 5000);
        return () => clearInterval(timer);
      }, [banners.length]);

      const displayGroups = useMemo(() => {
        const query = storefrontSearch.trim().toLowerCase();
        const productMap = new Map();
        products.forEach(p => productMap.set(p.id, p));
        let activeGroupList = selectedCategoryTab === 'ALL' ? productGroups : productGroups.filter(g => g.id === selectedCategoryTab);
        const result = [];
        activeGroupList.forEach(grp => {
          let grpProducts = (grp.productIds || []).map(pid => productMap.get(pid)).filter(Boolean);
          if (query) grpProducts = grpProducts.filter(p => p.title.toLowerCase().includes(query));
          if (grpProducts.length > 0) result.push({ id: grp.id, name: grp.name, items: grpProducts });
        });
        return result;
      }, [products, productGroups, storefrontSearch, selectedCategoryTab]);

      return (
        <>
          <div className="bg-fixed" style={{backgroundImage: `url(${profile.bgImage})`}}></div>
          
          {/* HEADER UTAMA BARU */}
          <header className="header-atas">
            <div className="header-container">
              <div className="header-left">
                <div className="header-title">{profile.storeName}</div>
                <div className="header-badges">
                  {profile.badge1 && <span className="badge">{profile.badge1}</span>}
                  {profile.badge2 && <span className="badge">{profile.badge2}</span>}
                  {profile.badge3 && <span className="badge">{profile.badge3}</span>}
                </div>
              </div>
              <div className="header-right">
                <a href="https://akbar-kabul-wahyudi.myscalev.com/buat-website-sendiri" target="_blank" rel="noreferrer" className="btn-buat-website">
                  Buat Website
                </a>
                <a href="https://akbar-kabul-wahyudi.myscalev.com/buat-website-sendiri" target="_blank" rel="noreferrer" className="rocket-box">
                  <i className="fa-solid fa-rocket" style={{ color: '#38bdf8' }}></i>
                </a>
                <button className="btn-menu" onClick={() => setIsSidebarOpen(true)}>
                  <i className="fa-solid fa-bars"></i>
                </button>
              </div>
            </div>
          </header>

          <div className="app-container">
            {/* STATS */}
            <section className="stats-grid">
              <div className="stat-card">
                <div className="stat-header"><span>📚 Produk Digital</span><div className="stat-icon"><i className="fa-solid fa-folder-open"></i></div></div>
                <div className="stat-value">{profile.stat1}+</div>
              </div>
              <div className="stat-card">
                <div className="stat-header"><span>👥 Total Partner</span><div className="stat-icon"><i className="fa-solid fa-users"></i></div></div>
                <div className="stat-value">{profile.stat2}K</div>
              </div>
              <div className="stat-card">
                <div className="stat-header"><span>⭐ Kepuasan</span><div className="stat-icon"><i className="fa-solid fa-star"></i></div></div>
                <div className="stat-value">{profile.stat4}</div>
              </div>
              <div className="stat-card">
                <div className="stat-header"><span>🚀 Akses Aktif</span><div className="stat-icon"><i className="fa-solid fa-bolt"></i></div></div>
                <div className="stat-value">100%</div>
              </div>
            </section>

            {/* BANNER SLIDER */}
            <div className="banner-slider">
              <div className="slider-wrapper" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
                {banners.map((b, idx) => (
                  <div key={b.id} className="slide" style={{ backgroundImage: `url(${b.bgImage})` }}>
                    <div className="slide-overlay"></div>
                    <div className="slide-content">
                      <span className="slide-tag">{b.tag}</span>
                      <h2>{b.title}</h2>
                      <p>{b.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
              <div className="slider-dots">
                {banners.map((_, idx) => (
                  <div key={idx} className={`dot ${currentSlide === idx ? 'active' : ''}`} onClick={() => setCurrentSlide(idx)}></div>
                ))}
              </div>
            </div>

            {/* QUICK MENU */}
            <h2 className="menu-section-title">Menu Utama</h2>
            <section className="menu-grid">
              {navs.map(nav => (
                <a key={nav.id} href={nav.url} className="menu-card">
                  <div className={`menu-icon-wrapper bg-${nav.color}`}><i className={getIconClass(nav.icon)}></i></div>
                  <h3>{nav.title}</h3>
                  <p>{nav.desc}</p>
                </a>
              ))}
            </section>

            {/* KATALOG PRODUK */}
            <div id="produk-section" style={{scrollMarginTop: '100px'}}></div>
            <h2 className="menu-section-title" style={{borderLeftColor: '#38bdf8'}}>Katalog Produk Digital</h2>

            <div className="product-controls-container">
              <div className="product-search-input-box">
                <i className="fa-solid fa-magnifying-glass"></i>
                <input type="text" value={storefrontSearch} onChange={e => setStorefrontSearch(e.target.value)} placeholder="Ketik nama produk..." />
              </div>
            </div>

            {displayGroups.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-muted)' }}>
                <i className="fa-solid fa-box-open" style={{ fontSize: '48px', marginBottom: '12px' }}></i>
                <p>Produk tidak ditemukan.</p>
              </div>
            ) : (
              displayGroups.map(grp => (
                <div key={grp.id} className="group-section-wrapper">
                  <div className="group-badge-center-container">
                    <div className="group-badge-pill">
                      <span>{grp.name}</span>
                      <span className="group-badge-count">{grp.items.length}</span>
                    </div>
                  </div>
                  <section className="katalog-grid">
                    {grp.items.map(prod => (
                      <a key={prod.id} href={prod.url} target="_blank" rel="noreferrer" className="katalog-card">
                        <div className={`katalog-icon bg-${prod.color}`}><i className={getIconClass(prod.icon)}></i></div>
                        <h3 className="katalog-title">{prod.title}</h3>
                        <span className="katalog-btn">LIHAT PRODUK</span>
                      </a>
                    ))}
                  </section>
                </div>
              ))
            )}
          </div>

          {/* BOTTOM NAVIGATION */}
          <nav className="bottom-nav">
            <a href="#" className="nav-item active"><i className="fa-solid fa-house"></i>Home</a>
            <a href="#produk-section" className="nav-item"><i className="fa-solid fa-box-open"></i>Produk</a>
          </nav>

          {/* SIDEBAR */}
          <div className={`sidebar-overlay ${isSidebarOpen ? 'active' : ''}`} onClick={() => setIsSidebarOpen(false)}></div>
          <aside className={`sidebar-menu ${isSidebarOpen ? 'active' : ''}`}>
            <div className="sidebar-header">
              <div className="sidebar-brand"><i className="fa-solid fa-compass" style={{color: '#38bdf8'}}></i> Navigasi</div>
              <button className="close-sidebar" onClick={() => setIsSidebarOpen(false)}><i className="fa-solid fa-xmark"></i></button>
            </div>
            <div className="sidebar-content">
              <button className="sidebar-link active" onClick={() => setIsSidebarOpen(false)}><i className="fa-solid fa-house"></i> Beranda</button>
              <a href="#produk-section" className="sidebar-link" onClick={() => setIsSidebarOpen(false)}><i className="fa-solid fa-box"></i> Katalog Produk</a>
              <a href="https://akbar-kabul-wahyudi.myscalev.com/buat-website-sendiri" target="_blank" rel="noreferrer" className="sidebar-link"><i className="fa-solid fa-rocket"></i> Buat Website</a>
            </div>
          </aside>
        </>
      );
    }

    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>