@extends('layouts.layout1')
@section('title', 'Tentang Kami || KLINIK PKP JAWA 3')

@section('content')
    <style>
        /* Base styles with theme transitions */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        :root {
            --primary-color: #667eea;
            --primary-gradient: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            --secondary-color: #f093fb;
            --secondary-gradient: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            --accent-color: #4facfe;
            --success-color: #00f2fe;
            --warning-color: #ffecd2;
            --text-dark: #2d3748;
            --text-light: #718096;
            --bg-light: #f7fafc;
            --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 15px 35px rgba(0, 0, 0, 0.15);

            /* Dark mode variables */
            --bg-white: #ffffff;
            --card-bg: #ffffff;
            --border-light: rgba(226, 232, 240, 0.8);
            --hover-bg: #f8fafc;
        }

        [data-theme="dark"] {
            --text-dark: #e2e8f0;
            --text-light: #a0aec0;
            --bg-light: #1a202c;
            --bg-white: #2d3748;
            --card-bg: #2d3748;
            --border-light: rgba(102, 126, 234, 0.2);
            --hover-bg: #4a5568;
            --shadow-soft: 0 10px 25px rgba(102, 126, 234, 0.1);
            --shadow-medium: 0 15px 35px rgba(102, 126, 234, 0.15);
        }

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

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

        .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: 1000px;
            text-align: center;
            color: white;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            background: linear-gradient(45deg, #ffffff, #e2e8f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="dark"] .hero-title {
            background: linear-gradient(45deg, #f1f5f9, #cbd5e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

        [data-theme="dark"] .hero-subtitle {
            color: #e2e8f0;
        }

        .hero-divider {
            width: 120px;
            height: 4px;
            background: linear-gradient(90deg, #ffffff, transparent);
            margin: 2rem auto;
            border-radius: 2px;
        }

        [data-theme="dark"] .hero-divider {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        /* Main Content */
        .about-section {
            padding: 6rem 2rem;
            background: var(--bg-light);
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* PKP Definition Card */
        .pkp-definition {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 3rem;
            margin-bottom: 4rem;
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
        }

        .pkp-definition::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: var(--primary-gradient);
        }

        .pkp-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .pkp-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-gradient);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        .pkp-description {
            font-size: 1.125rem;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 2rem;
        }

        .pkp-visual {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 3rem;
            align-items: center;
        }

        .visual-elements {
            display: flex;
            gap: 2rem;
            justify-content: flex-end;
        }

        .visual-house {
            position: relative;
            width: 200px;
            height: 150px;
        }

        .house-base {
            width: 100%;
            height: 60%;
            background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
            border-radius: 8px;
            position: absolute;
            bottom: 0;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .house-base {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .house-roof {
            width: 100%;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 60px solid #e74c3c;
            position: absolute;
            top: 0;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .house-roof {
            border-bottom-color: #f093fb;
            filter: drop-shadow(0 2px 8px rgba(240, 147, 251, 0.3));
        }

        .house-door {
            width: 20px;
            height: 35px;
            background: #2c3e50;
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .house-door {
            background: #1a202c;
            box-shadow: 0 2px 8px rgba(26, 32, 44, 0.5);
        }

        .house-window {
            width: 15px;
            height: 15px;
            background: #3498db;
            position: absolute;
            bottom: 25px;
            left: 20px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .house-window {
            background: #fbbf24;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
        }
        }

        .bricks-stack {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            width: 120px;
        }

        .brick {
            width: 25px;
            height: 15px;
            background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .brick {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            box-shadow: 0 2px 6px rgba(79, 172, 254, 0.3);
        }

        .workers {
            display: flex;
            gap: 1rem;
        }

        .worker {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] .worker {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .worker::before {
            content: '👷';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
        }

        /* Goals Section */
        .goals-section {
            margin-bottom: 4rem;
        }

        .goals-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 3rem;
        }

        .goals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .goal-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
        }

        .goal-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-medium);
        }

        [data-theme="dark"] .goal-card:hover {
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
        }

        .goal-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-gradient);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .goal-card:hover::before {
            transform: scaleX(1);
        }

        .goal-icon {
            width: 70px;
            height: 70px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            margin-bottom: 1.5rem;
        }

        .goal-icon.measure {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .goal-icon.improve {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .goal-icon.support {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .goal-icon.inform {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .goal-title {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .goal-description {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-light);
        }

        /* Scope & Target Section */
        .scope-target-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-bottom: 4rem;
        }

        .scope-card,
        .target-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
        }

        .scope-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        .target-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .section-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: white;
        }

        .scope-icon {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        .target-icon {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
        }

        .section-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-dark);
        }

        .checklist {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .checklist li {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
            padding: 0.75rem;
            border-radius: 12px;
            transition: background 0.3s ease;
        }

        .checklist li:hover {
            background: var(--hover-bg);
        }

        [data-theme="dark"] .checklist li:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        .check-icon {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.875rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .check-text {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-light);
        }

        /* Service Flow Section */
        .service-flow {
            margin-bottom: 4rem;
        }

        .flow-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 3rem;
        }

        .flow-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .flow-card {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: var(--shadow-soft);
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
        }

        .flow-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-medium);
        }

        [data-theme="dark"] .flow-card:hover {
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
        }

        .flow-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-gradient);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .flow-card:hover::before {
            transform: scaleX(1);
        }

        .flow-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            background: var(--primary-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            margin: 0 auto 1.5rem;
        }

        .flow-title-text {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .flow-description {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-light);
        }

        .whatsapp-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 1rem;
            transition: all 0.3s ease;
        }

        .whatsapp-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
            color: white;
            text-decoration: none;
        }

        .chat-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow-medium);
            transition: all 0.3s ease;
        }

        .chat-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .chat-tooltip {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--card-bg);
            padding: 0.75rem 1rem;
            border-radius: 12px;
            box-shadow: var(--shadow-soft);
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-dark);
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border-light);
        }

        [data-theme="dark"] .chat-tooltip {
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
        }

        .chat-btn:hover+.chat-tooltip {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .scope-target-section {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .pkp-visual {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }

            .visual-elements {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

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

            .pkp-definition,
            .scope-card,
            .target-card,
            .flow-card {
                padding: 2rem;
            }

            .pkp-title {
                font-size: 2rem;
                flex-direction: column;
                text-align: center;
            }

            .goals-grid,
            .flow-grid {
                grid-template-columns: 1fr;
            }

            .visual-elements {
                flex-direction: column;
                align-items: center;
            }

            .visual-house {
                width: 150px;
                height: 120px;
            }

            .bricks-stack {
                width: 100px;
                grid-template-columns: repeat(3, 1fr);
            }

            .brick {
                width: 20px;
                height: 12px;
            }

            .worker {
                width: 60px;
                height: 60px;
            }

            .worker::before {
                font-size: 1.5rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        .delay-4 {
            animation-delay: 0.4s;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content fade-in-up">
            <h1 class="hero-title">Apa Itu Klinik PKP?</h1>
            <div class="hero-divider"></div>
            <p class="hero-subtitle">
                Klinik Perumahan dan Kawasan Permukiman (Klinik PKP) adalah pusat layanan terpadu untuk memberikan
                informasi, bantuan teknis, dan pendampingan dalam pengembangan perumahan dan permukiman yang layak huni.
            </p>
        </div>
    </section>

    <!-- Main Content -->
    <section class="about-section">
        <div class="container">
            <!-- PKP Definition -->
            <div class="pkp-definition fade-in-up">
                <div class="pkp-visual">
                    <div>
                        <h2 class="pkp-title">
                            <div class="pkp-icon">
                                <i class="fas fa-home"></i>
                            </div>
                            Klinik Perumahan dan Kawasan Permukiman
                        </h2>
                        <p class="pkp-description">
                            Klinik Perumahan dan Kawasan Permukiman (Klinik PKP) adalah kegiatan pemberian layanan
                            informasi dan bantuan teknis kepada masyarakat secara individu atau kelompok terkait
                            pembangunan rumah layak huni yang berkelanjutan dan ramah lingkungan.
                        </p>
                    </div>
                    <div class="visual-elements">
                        <div class="visual-house">
                            <div class="house-roof"></div>
                            <div class="house-base">
                                <div class="house-door"></div>
                                <div class="house-window"></div>
                            </div>
                        </div>
                        <div class="bricks-stack">
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                            <div class="brick"></div>
                        </div>
                        <div class="workers">
                            <div class="worker"></div>
                            <div class="worker"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Goals Section -->
            <div class="goals-section">
                <h2 class="goals-title fade-in-up">Tujuan Klinik PKP</h2>
                <div class="goals-grid">
                    <div class="goal-card fade-in-up delay-1">
                        <div class="goal-icon measure">
                            <i class="fas fa-ruler-combined"></i>
                        </div>
                        <h3 class="goal-title">Mengukur Tingkat Kebutuhan</h3>
                        <p class="goal-description">
                            Mengukur tingkat kebutuhan masyarakat terhadap layanan rumah layak huni dan mengidentifikasi
                            permasalahan yang dihadapi dalam pembangunan perumahan.
                        </p>
                    </div>
                    <div class="goal-card fade-in-up delay-2">
                        <div class="goal-icon improve">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3 class="goal-title">Meningkatkan Keswadayaan</h3>
                        <p class="goal-description">
                            Meningkatkan keswadayaan masyarakat dalam pemenuhan rumah layak huni melalui program
                            pendampingan dan pemberian bantuan teknis yang komprehensif.
                        </p>
                    </div>
                    <div class="goal-card fade-in-up delay-3">
                        <div class="goal-icon support">
                            <i class="fas fa-hands-helping"></i>
                        </div>
                        <h3 class="goal-title">Memberikan Layanan Bantuan</h3>
                        <p class="goal-description">
                            Memberikan layanan bantuan teknis kepada masyarakat dalam perencanaan, pelaksanaan, dan
                            pemeliharaan rumah layak huni yang sesuai standar.
                        </p>
                    </div>
                    <div class="goal-card fade-in-up delay-4">
                        <div class="goal-icon inform">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <h3 class="goal-title">Memberikan Layanan Informasi</h3>
                        <p class="goal-description">
                            Memberikan layanan informasi rumah layak huni yang komprehensif termasuk aspek teknis,
                            regulasi, dan pembiayaan untuk masyarakat.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Scope & Target Section -->
            <div class="scope-target-section">
                <div class="scope-card fade-in-up">
                    <div class="section-header">
                        <div class="section-icon scope-icon">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <h3 class="section-title">Ruang Lingkup</h3>
                    </div>
                    <ul class="checklist">
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Informasi dan dokumen terkait perencanaan rumah</span>
                        </li>
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Informasi mengenai pelaksanaan konstruksi</span>
                        </li>
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Informasi pengawasan konstruksi</span>
                        </li>
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Informasi terkait pemanfaatan rumah</span>
                        </li>
                    </ul>
                </div>

                <div class="target-card fade-in-up">
                    <div class="section-header">
                        <div class="section-icon target-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="section-title">Target Pelayanan</h3>
                    </div>
                    <ul class="checklist">
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Penerima bantuan stimulan pembangunan/perbaikan rumah</span>
                        </li>
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Masyarakat berpenghasilan di bawah 7.5 juta/bulan</span>
                        </li>
                        <li>
                            <div class="check-icon">
                                <i class="fas fa-check"></i>
                            </div>
                            <span class="check-text">Masyarakat yang ingin membangun/memperbaiki rumah sederhana</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Service Flow Section -->
            <div class="service-flow">
                <h2 class="flow-title fade-in-up">Alur Pelayanan</h2>
                <div class="flow-grid">
                    <div class="flow-card fade-in-up delay-1">
                        <div class="flow-icon">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        <h3 class="flow-title-text">Kunjungi Website/WhatsApp Klinik PKP</h3>
                        <p class="flow-description">
                            Mulai dengan mengunjungi website resmi atau menghubungi melalui WhatsApp untuk mendapatkan
                            informasi awal tentang layanan Klinik PKP.
                        </p>
                        <a href="https://wa.me/6281234567890" class="whatsapp-btn">
                            <i class="fab fa-whatsapp"></i>
                            WhatsApp
                        </a>
                    </div>
                    <div class="flow-card fade-in-up delay-2">
                        <div class="flow-icon">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <h3 class="flow-title-text">Masukkan Informasi Status Kepemilikan</h3>
                        <p class="flow-description">
                            Masukkan informasi status kepemilikan tanah, pendapatan bulanan, dan persiapan dana sesuai
                            petunjuk dan arahan dari sistem Klinik PKP.
                        </p>
                    </div>
                    <div class="flow-card fade-in-up delay-3">
                        <div class="flow-icon">
                            <i class="fas fa-home"></i>
                        </div>
                        <h3 class="flow-title-text">Dapatkan Informasi Desain Rumah</h3>
                        <p class="flow-description">
                            Dapatkan informasi desain rumah, pengurusan izin, dan sebagainya sesuai kebutuhan Anda
                            berdasarkan konsultasi dengan tim ahli.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Scroll animations
        function animateOnScroll() {
            const elements = document.querySelectorAll('.fade-in-up');

            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('animate');
                }
            });
        }

        // WhatsApp function
        function openWhatsApp() {
            window.open('https://wa.me/6281234567890?text=Halo, saya ingin berkonsultasi tentang layanan Klinik PKP',
                '_blank');
        }

        // Event listeners
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

        // Smooth scrolling for internal links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add loading animation
        document.addEventListener('DOMContentLoaded', function() {
            // Add staggered animation delay to cards
            document.querySelectorAll('.goal-card, .flow-card').forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });
    </script>
    <x-footer_one />
@endsection