
<?php $__env->startSection('title', 'Bahan Bangunan || KLINIK PKP JAWA 3'); ?>

<?php $__env->startSection('content'); ?>
    <style>
        /* CSS Custom Properties for better dark mode support */
        :root {
            --bg-primary: #f9fafb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f8fafc;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-color: #e5e7eb;
            --border-hover: #667eea;
            --accordion-bg: #f8fafc;
            --accordion-border: #e2e8f0;
            --accordion-hover: #f1f5f9;
        }

        [data-theme="dark"],
        body.dark-mode {
            --bg-primary: #1f2937;
            --bg-secondary: #111827;
            --bg-card: #374151;
            --bg-card-hover: #4b5563;
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #4b5563;
            --border-hover: #667eea;
            --accordion-bg: #374151;
            --accordion-border: #4b5563;
            --accordion-hover: #6b7280;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, var(--judges-base) 0%, var(--judges-base) 100%);
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 4rem 2rem;
        }

        [data-theme="dark"] .hero-section,
        body.dark-mode .hero-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
            text-align: center;
            color: white;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            color: #f9fafb;
        }

        [data-theme="dark"] .hero-title,
        body.dark-mode .hero-title {
            color: #f1f5f9 !important;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            opacity: 0.95;
            line-height: 1.8;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        [data-theme="dark"] .hero-subtitle,
        body.dark-mode .hero-subtitle {
            color: #e2e8f0 !important;
        }

        .hero-divider {
            width: 100px;
            height: 4px;
            background: white;
            margin: 1.5rem auto;
            border-radius: 2px;
        }

        [data-theme="dark"] .hero-divider,
        body.dark-mode .hero-divider {
            background: #818cf8 !important;
        }

        /* Container Section */
        .material-section {
            padding: 4rem 2rem;
            background-color: var(--bg-primary);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 3rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Card Grid */
        .material-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Material Card */
        .material-card {
            background: var(--bg-card);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .material-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }

        .material-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            background-color: #e5e7eb;
        }

        [data-theme="dark"] .material-image,
        body.dark-mode .material-image {
            background-color: #6b7280;
        }

        .material-content {
            padding: 1.5rem;
        }

        .material-category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            text-transform: uppercase;
        }

        .material-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }

        .material-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .material-actions {
            display: flex;
            gap: 0.75rem;
        }

        .btn-download,
        .btn-view {
            flex: 1;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .btn-download {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }

        .btn-download:hover {
            background: linear-gradient(135deg, #5568d3 0%, #6941a0 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-view {
            background: var(--bg-card);
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-view:hover {
            background: #667eea;
            color: white;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
        }

        .empty-state-icon {
            font-size: 4rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .empty-state-text {
            font-size: 1.125rem;
            color: var(--text-secondary);
        }

        /* Loading */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4rem;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--border-color);
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Accordion Styles */
        .material-accordion {
            margin-top: 1.5rem;
            border-radius: 12px;
            overflow: hidden;
            background: var(--accordion-bg);
            border: 1px solid var(--accordion-border);
        }

        .accordion-item {
            border-bottom: none;
            position: relative;
        }

        .accordion-item:not(:last-child) {
            border-bottom: 1px solid var(--accordion-border);
        }

        .accordion-header {
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: linear-gradient(135deg, var(--accordion-bg) 0%, var(--accordion-hover) 100%);
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .accordion-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .accordion-header:hover {
            background: linear-gradient(135deg, var(--accordion-hover) 0%, var(--border-color) 100%);
            color: #667eea;
            transform: translateX(4px);
        }

        .accordion-header:hover::before {
            transform: scaleY(1);
        }

        .accordion-header.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateX(0);
        }

        .accordion-header.active::before {
            transform: scaleY(1);
            background: white;
        }

        .accordion-header i {
            transition: all 0.3s ease;
            color: var(--text-secondary);
            font-size: 1.1rem;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .accordion-header:hover i {
            color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .accordion-header.active i {
            transform: rotate(180deg);
            color: white;
            background: rgba(255, 255, 255, 0.2);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-card);
        }

        .accordion-content.active {
            max-height: 600px;
            padding: 1.5rem;
        }

        .accordion-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 0.75rem;
        }

        .accordion-content li {
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, var(--accordion-bg) 0%, var(--accordion-hover) 100%);
            border: 1px solid var(--accordion-border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9rem;
            line-height: 1.6;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .accordion-content li::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .accordion-content li:hover {
            background: linear-gradient(135deg, var(--border-color) 0%, var(--text-muted) 100%);
            transform: translateX(8px);
            border-color: #667eea;
            color: var(--text-primary);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }

        .accordion-content li:hover::before {
            opacity: 1;
        }

        .accordion-content li:nth-child(odd):hover {
            background: linear-gradient(135deg, #fef7ff 0%, #faf5ff 100%);
            border-color: #a855f7;
        }

        .accordion-content li:nth-child(odd):hover::before {
            background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .material-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 1.5rem;
            }

            .accordion-header {
                padding: 1rem;
                font-size: 0.9rem;
            }

            .accordion-header span {
                gap: 0.5rem !important;
            }

            .accordion-content.active {
                padding: 1rem;
            }

            .accordion-content li {
                padding: 0.75rem 1rem;
                font-size: 0.85rem;
            }
        }

        /* Additional Animation Styles */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .accordion-content.active ul {
            animation: slideDown 0.3s ease-out;
        }

        .accordion-content li:nth-child(1) {
            animation-delay: 0.1s;
        }

        .accordion-content li:nth-child(2) {
            animation-delay: 0.2s;
        }

        .accordion-content li:nth-child(3) {
            animation-delay: 0.3s;
        }

        .accordion-content li:nth-child(4) {
            animation-delay: 0.4s;
        }

        .accordion-content li:nth-child(5) {
            animation-delay: 0.5s;
        }

        .accordion-content.active li {
            animation: slideDown 0.4s ease-out both;
        }

        /* Dark Mode Support - Comprehensive */
        [data-theme="dark"] .hero-section,
        body.dark-mode .hero-section {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
        }

        [data-theme="dark"] .hero-title,
        [data-theme="dark"] .hero-subtitle,
        [data-theme="dark"] .hero-divider,
        body.dark-mode .hero-title,
        body.dark-mode .hero-subtitle,
        body.dark-mode .hero-divider {
            color: #f9fafb !important;
        }

        /* Force dark mode compatibility for all elements */
        [data-theme="dark"] .material-section,
        body.dark-mode .material-section {
            background-color: var(--bg-primary) !important;
            background: var(--bg-primary) !important;
        }

        [data-theme="dark"] .section-title,
        body.dark-mode .section-title {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .section-subtitle,
        body.dark-mode .section-subtitle {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] .material-card,
        [data-theme="dark"] .empty-state,
        body.dark-mode .material-card,
        body.dark-mode .empty-state {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .material-title,
        body.dark-mode .material-title {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .material-description,
        [data-theme="dark"] .empty-state-text,
        body.dark-mode .material-description,
        body.dark-mode .empty-state-text {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] .empty-state-icon,
        body.dark-mode .empty-state-icon {
            color: var(--text-muted) !important;
        }

        /* Dark mode for inline styled sections */
        [data-theme="dark"] div[style*="background: white"],
        body.dark-mode div[style*="background: white"] {
            background: var(--bg-card) !important;
        }

        [data-theme="dark"] h2[style*="color: #1f2937"],
        [data-theme="dark"] h3[style*="color: #1f2937"],
        body.dark-mode h2[style*="color: #1f2937"],
        body.dark-mode h3[style*="color: #1f2937"] {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] p[style*="color: #6b7280"],
        body.dark-mode p[style*="color: #6b7280"] {
            color: var(--text-secondary) !important;
        }

        /* Dark mode for buttons */
        [data-theme="dark"] .btn-view,
        body.dark-mode .btn-view {
            background: var(--bg-card) !important;
            color: #93c5fd !important;
            border-color: #93c5fd !important;
        }

        [data-theme="dark"] .btn-view:hover,
        body.dark-mode .btn-view:hover {
            background: #93c5fd !important;
            color: var(--bg-primary) !important;
        }

        /* Dark mode accordion hover effects */
        [data-theme="dark"] .accordion-content li:nth-child(odd):hover,
        body.dark-mode .accordion-content li:nth-child(odd):hover {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
            border-color: #a855f7 !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .accordion-content li:hover,
        body.dark-mode .accordion-content li:hover {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
            border-color: #667eea !important;
            color: var(--text-primary) !important;
        }

        /* Additional dark mode support for dynamic content */
        [data-theme="dark"] .material-card-dynamic,
        body.dark-mode .material-card-dynamic {
            background: var(--bg-card) !important;
        }

        [data-theme="dark"] .material-card-dynamic .material-title,
        [data-theme="dark"] .material-card-dynamic .material-description,
        body.dark-mode .material-card-dynamic .material-title,
        body.dark-mode .material-card-dynamic .material-description {
            color: inherit !important;
        }

        /* Dark mode for container sections */
        [data-theme="dark"] .container,
        [data-theme="dark"] div[style*="max-width: 1400px"],
        body.dark-mode .container,
        body.dark-mode div[style*="max-width: 1400px"] {
            color: var(--text-primary) !important;
        }

        /* Dark mode for inline styled white backgrounds - More specific */
        [data-theme="dark"] .material-section div[style*="background: white"],
        body.dark-mode .material-section div[style*="background: white"] {
            background: var(--bg-card) !important;
        }

        /* Dark mode for all headings with inline styles */
        [data-theme="dark"] .material-section h2[style*="color: #1f2937"],
        [data-theme="dark"] .material-section h3[style*="color: #1f2937"],
        body.dark-mode .material-section h2[style*="color: #1f2937"],
        body.dark-mode .material-section h3[style*="color: #1f2937"] {
            color: var(--text-primary) !important;
        }

        /* Dark mode for all paragraphs with inline styles */
        [data-theme="dark"] .material-section p[style*="color: #6b7280"],
        body.dark-mode .material-section p[style*="color: #6b7280"] {
            color: var(--text-secondary) !important;
        }

        /* Dark mode for gradient circles/icons backgrounds - keep them colorful */
        [data-theme="dark"] div[style*="background: linear-gradient"],
        body.dark-mode div[style*="background: linear-gradient"] {
            /* Keep gradients as is - they're decorative and colorful */
            opacity: 0.9;
        }

        /* Dark mode for material icon container */
        [data-theme="dark"] .material-icon-container,
        body.dark-mode .material-icon-container {
            /* Gradients will remain visible - no need to override */
            opacity: 1 !important;
        }

        /* Keep icons visible in dark mode */
        [data-theme="dark"] .material-icon-container i,
        body.dark-mode .material-icon-container i {
            color: white !important;
            opacity: 0.9 !important;
        }

        /* Ensure card backgrounds work properly in dark mode */
        [data-theme="dark"] .material-card-dynamic,
        body.dark-mode .material-card-dynamic {
            background: var(--bg-card) !important;
            border: 1px solid var(--border-color);
        }

        /* Fix hover state shadow in dark mode */
        [data-theme="dark"] .material-card-dynamic:hover,
        body.dark-mode .material-card-dynamic:hover {
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.2) !important;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content">
            <h1 class="hero-title">Bahan Bangunan</h1>
            <div class="hero-divider"></div>
            <p class="hero-subtitle">
                Bahan bangunan merujuk pada segala jenis materi atau substansi yang diperlukan dalam proses konstruksi,
                renovasi, atau pembangunan sebuah struktur. Temukan berbagai pilihan bahan yang sesuai dengan kebutuhan dan
                preferensi Anda.
            </p>
        </div>
    </section>

    <!-- Material Cards Section -->
    <section class="material-section">
        <div class="container" style="max-width: 1400px;">
            <!-- Harga Satuan Section -->
            <div
                style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 3rem;">
                <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 2rem;">Harga Satuan Bahan
                    Bangunan</h2>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
                    <!-- Klinik Konstruksi Card -->
                    <div style="text-align: center;">
                        <div
                            style="width: 120px; height: 120px; margin: 0 auto 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <img src="/image/logo/logo-klinik.png" alt="Klinik Konstruksi"
                                style="width: 80px; height: 80px; object-fit: contain;" onerror="this.style.display='none'">
                        </div>
                        <h3 style="font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-bottom: 0.5rem;">Klinik
                            Konstruksi</h3>
                        <p style="font-size: 0.875rem; color: #6b7280;">Yogyakarta</p>
                    </div>

                    <!-- Mas Petruk Card -->
                    <div style="text-align: center;">
                        <div
                            style="width: 120px; height: 120px; margin: 0 auto 1rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <img src="/image/logo/logo-petruk.png" alt="Mas Petruk"
                                style="width: 80px; height: 80px; object-fit: contain;" onerror="this.style.display='none'">
                        </div>
                        <h3 style="font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-bottom: 0.5rem;">Mas Petruk
                        </h3>
                        <p style="font-size: 0.875rem; color: #6b7280;">Jawa Tengah</p>
                    </div>
                </div>
            </div>

            <!-- Kriteria Pemilihan Bahan Section -->
            <div
                style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 3rem;">
                <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 2rem;">Kriteria Pemilihan Bahan
                </h2>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
                    <!-- Kualitas dan Kinerja -->
                    <div style="text-align: center;">
                        <div
                            style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-wrench" style="font-size: 2rem; color: white;"></i>
                        </div>
                        <h3 style="font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: 0.75rem;">Kualitas
                            dan Kinerja</h3>
                        <p style="font-size: 0.875rem; color: #6b7280; line-height: 1.6;">Pastikan bahan memiliki kualitas
                            yang memadai dan dapat memberikan kinerja yang diinginkan</p>
                    </div>

                    <!-- Ketersediaan dan Biaya -->
                    <div style="text-align: center;">
                        <div
                            style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-tags" style="font-size: 2rem; color: white;"></i>
                        </div>
                        <h3 style="font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: 0.75rem;">
                            Ketersediaan dan Biaya</h3>
                        <p style="font-size: 0.875rem; color: #6b7280; line-height: 1.6;">Perhatikan ketersediaan bahan di
                            lokasi proyek apakah mudah diakses dengan biaya yang sesuai</p>
                    </div>

                    <!-- Estetika dan Kesesuaian -->
                    <div style="text-align: center;">
                        <div
                            style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-palette" style="font-size: 2rem; color: white;"></i>
                        </div>
                        <h3 style="font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: 0.75rem;">Estetika
                            dan Kesesuaian</h3>
                        <p style="font-size: 0.875rem; color: #6b7280; line-height: 1.6;">Pertimbangkan estetika serta
                            kesesuaian dengan gaya arsitektur dan preferensi desain yang diinginkan</p>
                    </div>

                    <!-- Keberlanjutan -->
                    <div style="text-align: center;">
                        <div
                            style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-leaf" style="font-size: 2rem; color: white;"></i>
                        </div>
                        <h3 style="font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: 0.75rem;">
                            Keberlanjutan</h3>
                        <p style="font-size: 0.875rem; color: #6b7280; line-height: 1.6;">Tinjau dampak lingkungan dari
                            bahan tersebut, termasuk produksi, penggunaan energi, dan daur ulang</p>
                    </div>
                </div>
            </div>

            <!-- Jenis Bahan Bangunan Section -->
            <div style="background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
                <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 2rem;">Jenis Bahan Bangunan
                </h2>

                <div id="materialsContainer"
                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem;">
                    <!-- Materials will be loaded dynamically here -->
                </div>
            </div>
        </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Add dynamic dark mode class detection
        function syncDarkMode() {
            const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }

        // Initial sync
        syncDarkMode();

        // Watch for theme changes
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
                    syncDarkMode();
                }
            });
        });

        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['data-theme']
        });

        // Your existing JavaScript code continues here...
        const BASE_URL = '<?php echo e(env('BASE_URL')); ?>';

        // Accordion toggle function
        function toggleAccordion(button) {
            const content = button.nextElementSibling;
            const isActive = button.classList.contains('active');

            // Close all accordions in the same parent
            const parent = button.closest('.material-accordion');
            parent.querySelectorAll('.accordion-header').forEach(header => {
                header.classList.remove('active');
                header.nextElementSibling.classList.remove('active');
            });

            // Toggle current accordion
            if (!isActive) {
                button.classList.add('active');
                content.classList.add('active');
            }
        }

        // Function to render material card
        function renderMaterialCard(material) {
            // Icon and gradient mapping for materials
            const materialStyles = {
                'bambu': {
                    icon: 'fa-seedling',
                    gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
                    iconColor: '#fff'
                },
                'kayu': {
                    icon: 'fa-tree',
                    gradient: 'linear-gradient(135deg, #92400e 0%, #78350f 100%)',
                    iconColor: '#fff'
                },
                'pasir': {
                    icon: 'fa-mountain',
                    gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
                    iconColor: '#fff'
                },
                'bata': {
                    icon: 'fa-th-large',
                    gradient: 'linear-gradient(135deg, #dc2626 0%, #991b1b 100%)',
                    iconColor: '#fff'
                },
                'batu bata': {
                    icon: 'fa-th-large',
                    gradient: 'linear-gradient(135deg, #dc2626 0%, #991b1b 100%)',
                    iconColor: '#fff'
                },
                'semen': {
                    icon: 'fa-box',
                    gradient: 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)',
                    iconColor: '#fff'
                },
                'besi': {
                    icon: 'fa-hard-hat',
                    gradient: 'linear-gradient(135deg, #374151 0%, #1f2937 100%)',
                    iconColor: '#fff'
                },
                'batako': {
                    icon: 'fa-square',
                    gradient: 'linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)',
                    iconColor: '#fff'
                },
                'batu alam': {
                    icon: 'fa-gem',
                    gradient: 'linear-gradient(135deg, #0891b2 0%, #0e7490 100%)',
                    iconColor: '#fff'
                },
                'default': {
                    icon: 'fa-cube',
                    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    iconColor: '#fff'
                }
            };

            // Get material name and find matching style
            const materialName = (material.nama || material.name || 'material').toLowerCase();
            let materialStyle = materialStyles.default;

            // Find matching style
            for (const [key, value] of Object.entries(materialStyles)) {
                if (materialName.includes(key)) {
                    materialStyle = value;
                    break;
                }
            }

            // Create accordion items for each property
            let accordionHTML = '';

            if (material.jenis && Array.isArray(material.jenis) && material.jenis.length > 0) {
                accordionHTML += `
                    <div class="accordion-item">
                        <button class="accordion-header" onclick="toggleAccordion(this)">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <i class="fas fa-layer-group" style="color: #667eea;"></i>
                                Jenis Material
                            </span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <ul>
                                ${material.jenis.map(item => `<li><i class="fas fa-check-circle" style="color: #10b981; margin-right: 0.5rem;"></i>${item}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                `;
            }

            if (material.karakteristik && Array.isArray(material.karakteristik) && material.karakteristik.length > 0) {
                accordionHTML += `
                    <div class="accordion-item">
                        <button class="accordion-header" onclick="toggleAccordion(this)">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <i class="fas fa-cog" style="color: #f59e0b;"></i>
                                Karakteristik
                            </span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <ul>
                                ${material.karakteristik.map(item => `<li><i class="fas fa-star" style="color: #f59e0b; margin-right: 0.5rem;"></i>${item}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                `;
            }

            if (material.kegunaan && Array.isArray(material.kegunaan) && material.kegunaan.length > 0) {
                accordionHTML += `
                    <div class="accordion-item">
                        <button class="accordion-header" onclick="toggleAccordion(this)">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <i class="fas fa-tools" style="color: #8b5cf6;"></i>
                                Kegunaan
                            </span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <ul>
                                ${material.kegunaan.map(item => `<li><i class="fas fa-hammer" style="color: #8b5cf6; margin-right: 0.5rem;"></i>${item}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                `;
            }

            if (material.kelebihan && Array.isArray(material.kelebihan) && material.kelebihan.length > 0) {
                accordionHTML += `
                    <div class="accordion-item">
                        <button class="accordion-header" onclick="toggleAccordion(this)">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <i class="fas fa-trophy" style="color: #ef4444;"></i>
                                Kelebihan
                            </span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <ul>
                                ${material.kelebihan.map(item => `<li><i class="fas fa-thumbs-up" style="color: #ef4444; margin-right: 0.5rem;"></i>${item}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                `;
            }

            return `
                <div style="border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--bg-card); position: relative;" 
                     class="material-card-dynamic"
                     onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 24px rgba(0, 0, 0, 0.15)';" 
                     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px rgba(0, 0, 0, 0.1)';">
                    <div class="material-icon-container" style="height: 200px; overflow: hidden; position: relative; border-radius: 16px 16px 0 0; background: ${materialStyle.gradient}; display: flex; align-items: center; justify-content: center;">
                        <i class="fas ${materialStyle.icon}" style="font-size: 5rem; color: ${materialStyle.iconColor}; opacity: 0.9; transition: all 0.3s ease;" 
                           onmouseover="this.style.transform='scale(1.1) rotate(5deg)'; this.style.opacity='1';" 
                           onmouseout="this.style.transform='scale(1) rotate(0deg)'; this.style.opacity='0.9';"></i>
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);"></div>
                        <div style="position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 0.75rem; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.3);">
                            <i class="fas fa-cube" style="color: white; font-size: 1rem;"></i>
                        </div>
                    </div>
                    <div style="padding: 1.5rem;">
                        <h3 class="material-title" style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
                            ${material.nama || material.name || 'Material'}
                        </h3>
                        <p class="material-description" style="font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem;">
                            ${material.deskripsi || material.description || 'Deskripsi material'}
                        </p>
                        ${accordionHTML ? `<div class="material-accordion">${accordionHTML}</div>` : ''}
                    </div>
                </div>
            `;
        }

        // Function to load materials
        function loadMaterials() {
            Swal.fire({
                title: 'Loading...',
                text: 'Memuat data bahan bangunan',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: BASE_URL + '/api/public/materials',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    Swal.close();

                    const materialsContainer = $('#materialsContainer');
                    materialsContainer.empty();

                    if (response && response.data && Array.isArray(response.data) && response.data.length > 0) {
                        response.data.forEach(material => {
                            materialsContainer.append(renderMaterialCard(material));
                        });
                    } else if (response && Array.isArray(response) && response.length > 0) {
                        response.forEach(material => {
                            materialsContainer.append(renderMaterialCard(material));
                        });
                    } else {
                        // Show default materials if no data
                        showDefaultMaterials();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching materials:', error);
                    Swal.close();

                    // Show default materials on error
                    showDefaultMaterials();
                }
            });
        }

        // Function to show default materials
        function showDefaultMaterials() {
            const defaultMaterials = [{
                    nama: 'Bambu',
                    deskripsi: 'Bambu adalah material yang kuat, ringan, dan mudah dibentuk. Bambu merupakan salah satu material alternatif yang memenuhi kriteria sebagai material berkelanjutan',
                    jenis: ['Bambu Petung', 'Bambu Apus', 'Bambu Tali', 'Bambu Ori'],
                    karakteristik: ['Kuat dan tahan lama', 'Ringan dan fleksibel', 'Tahan terhadap gempa',
                        'Ramah lingkungan'
                    ],
                    kegunaan: ['Struktur bangunan', 'Dinding', 'Atap', 'Lantai', 'Furnitur'],
                    kelebihan: ['Pertumbuhan cepat', 'Mudah diperbaharui', 'Biaya rendah', 'Isolasi termal baik']
                },
                {
                    nama: 'Kayu',
                    deskripsi: 'Kayu adalah bahan mentah yang diperoleh dari pengolahan pohon-pohon di hutan. Kayu adalah bahan baku yang serbaguna, fleksibel, dan berkelanjutan',
                    jenis: ['Kayu Jati', 'Kayu Mahoni', 'Kayu Meranti', 'Kayu Sengon'],
                    karakteristik: ['Kuat dan tahan lama', 'Mudah dibentuk', 'Estetika natural', 'Tekstur indah'],
                    kegunaan: ['Rangka atap', 'Kusen', 'Pintu dan jendela', 'Lantai', 'Furnitur'],
                    kelebihan: ['Estetika tinggi', 'Isolasi termal baik', 'Mudah dikerjakan', 'Nilai investasi tinggi']
                },
                {
                    nama: 'Pasir',
                    deskripsi: 'Pasir adalah material butiran yang terdiri dari partikel batuan dan mineral yang terpecah halus. Ukuran pasir lebih halus dari kerikil dan lebih kasar dari lanau',
                    jenis: ['Pasir Beton', 'Pasir Pasang', 'Pasir Urug', 'Pasir Cor'],
                    karakteristik: ['Butiran halus', 'Mudah dibentuk', 'Kuat dalam campuran', 'Mudah diserap air'],
                    kegunaan: ['Campuran beton', 'Adukan semen', 'Plesteran', 'Urugan'],
                    kelebihan: ['Mudah didapat', 'Harga terjangkau', 'Serbaguna', 'Mudah diaplikasikan']
                },
                {
                    nama: 'Batu Bata',
                    deskripsi: 'Batu bata terbuat dari tanah liat atau tanah liat yang dibakar hingga berubah warna menjadi kemerahan',
                    jenis: ['Bata Merah', 'Bata Press', 'Bata Ekspos', 'Bata Ringan'],
                    karakteristik: ['Tahan terhadap api', 'Kuat dan kokoh', 'Insulasi termal baik', 'Tahan lama'],
                    kegunaan: ['Dinding struktural', 'Dinding pembatas', 'Pagar', 'Dekorasi arsitektur'],
                    kelebihan: ['Mudah didapat', 'Harga terjangkau', 'Tahan api', 'Insulasi suara baik']
                },
                {
                    nama: 'Batako',
                    deskripsi: 'Batako merupakan bahan bangunan alternatif pengganti batu bata yang tersusun dari komposisi antara pasir, semen Portland dan air',
                    jenis: ['Batako Beton', 'Batako Ringan', 'Bata Refraktori', 'Bata Glazed'],
                    karakteristik: [
                        'Paling umum digunakan dan terbuat dari campuran semen, pasir, kerikil, dan air yang dicetak dalam bentuk blok',
                        'Dibuat dengan menambahkan bahan pengisi ringan seperti serbuk gipsum, serat alami, atau busa ke campuran beton',
                        'Dibuat dari bahan-bahan tahan api seperti fireclay, bauxite, atau magnesia, dirancang untuk menahan suhu tinggi dan digunakan dalam konstruksi tungku industri, cerobong asap, dan dapur',
                        'Dilapisi dengan glasur atau lapisan keramik, sehingga menghasilkan permukaan yang halus dan tahan air'
                    ],
                    kegunaan: ['Dinding struktural', 'Partisi', 'Pagar', 'Pondasi ringan'],
                    kelebihan: ['Ukuran presisi', 'Pemasangan cepat', 'Harga ekonomis', 'Permukaan rata']
                },
                {
                    nama: 'Batu Alam',
                    deskripsi: 'Batu alam adalah material yang digunakan dalam berbagai aplikasi konstruksi dan dekoratif karena kekuatan dan keindahan alaminya',
                    jenis: ['Granit', 'Marmer', 'Andesit', 'Batu Kali', 'Slate'],
                    karakteristik: ['Sangat keras dan tahan lama', 'Tahan terhadap cuaca', 'Tekstur natural',
                        'Warna alami beragam'
                    ],
                    kegunaan: ['Lantai', 'Dinding', 'Countertop', 'Fasad bangunan', 'Landscape'],
                    kelebihan: ['Estetika premium', 'Sangat tahan lama', 'Tahan gores', 'Nilai investasi tinggi']
                }
            ];

            const materialsContainer = $('#materialsContainer');
            materialsContainer.empty();

            defaultMaterials.forEach(material => {
                materialsContainer.append(renderMaterialCard(material));
            });
        }

        $(document).ready(function() {
            console.log('Material page loaded');
            loadMaterials();
        });
    </script>
    <?php if (isset($component)) { $__componentOriginal86ed18220e5516026aef66b347e6e7af = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal86ed18220e5516026aef66b347e6e7af = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.footer_one','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('footer_one'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal86ed18220e5516026aef66b347e6e7af)): ?>
<?php $attributes = $__attributesOriginal86ed18220e5516026aef66b347e6e7af; ?>
<?php unset($__attributesOriginal86ed18220e5516026aef66b347e6e7af); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal86ed18220e5516026aef66b347e6e7af)): ?>
<?php $component = $__componentOriginal86ed18220e5516026aef66b347e6e7af; ?>
<?php unset($__componentOriginal86ed18220e5516026aef66b347e6e7af); ?>
<?php endif; ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.layout1', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laravel\krs-jawa3-template\daerah\resources\views/home/material.blade.php ENDPATH**/ ?>