@extends('layouts.app')

@section('title', 'Department of Kaumarabhritya | Ayurvedic Pediatrics and Child Health Care')
@section('meta_description', 'Department of Kaumarabhritya (Balroga) providing Ayurvedic pediatrics, neonatal care,
    child health clinics, growth monitoring, immunization support, and clinical training with OPD/IPD facilities and
    holistic pediatric therapies.')

@section('content')
    <!-- Optional: Add your custom styles here -->
    <style>
        /* =========================
            GLOBAL STYLES
            ========================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Open Sans', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            color: #333;
            background-color: #ffffff;
        }


        ul {
            list-style-image: url('bullet.png');
            /* Path to your bullet image */
            list-style-type: disc;
            /* Fallback if image is not available */
        }

        h1,
        h2,
        h3 {
            font-family: 'Poppins', 'Montserrat', sans-serif;
            color: #1f2a44;
            margin-bottom: 15px;
        }

        h1 {
            font-size: 36px;
        }

        h2 {
            font-size: 28px;
        }

        p {
            margin-bottom: 15px;
        }

        a {
            text-decoration: none;
            color: #1a4ed8;
        }

        a:hover {
            text-decoration: underline;
        }

        /* =========================
                                                        LAYOUT
                                                        ========================= */

        .container {
            max-width: 1100px;
            margin: auto;
            padding: 0 20px;
        }

        .section {
            padding: 60px 0;
        }

        .bg-light {
            background-color: #f7f9fc;
        }

        .bg-primary {
            background-color: #1f2a44;
        }

        /* =========================
                                                        HERO SECTION
                                                        ========================= */

        .hero-section {
            background: linear-gradient(rgba(31, 42, 68, 0.7),
                    rgba(31, 42, 68, 0.7)),
                url('campus-photo.jpg') center/cover no-repeat;
            text-align: center;
            padding: 100px 20px;
            color: #ffffff;
        }

        .hero-section h1 {
            color: #ffffff;
            font-size: 42px;
        }

        .hero-section p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        /* =========================
                                                        BUTTONS
                                                        ========================= */

        .btn {
            display: inline-block;
            padding: 12px 26px;
            margin: 5px;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn.primary {
            background-color: #f0b429;
            color: #1f2a44;
        }

        .btn.primary:hover {
            background-color: #d99b1f;
        }

        .btn.secondary {
            background-color: transparent;
            border: 2px solid #ffffff;
            color: #ffffff;
        }

        .btn.secondary:hover {
            background-color: #ffffff;
            color: #1f2a44;
        }

        /* =========================
                                                        LISTS & CONTENT
                                                        ========================= */

        .strength-list,
        .leadership-list,
        .important-links {
            list-style: none;
            padding-left: 0;
        }

        .strength-list li,
        .leadership-list li {
            padding: 10px 0;
            padding-left: 28px;
            position: relative;
        }

        .strength-list li::before {
            content: "✔";
            position: absolute;
            left: 0;
            color: #1a4ed8;
            font-weight: bold;
        }

        /* =========================
                                                        FACILITIES GRID
                                                        ========================= */

        .facility-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .facility-item {
            background: #c9c7bf;
            padding: 25px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            font-weight: 600;
        }

        /* =========================
                                                        LINKS SECTION
                                                        ========================= */

        .important-links li {
            margin-bottom: 10px;
        }

        .important-links a {
            color: #ffffff;
            font-weight: 500;
        }

        .section {
            padding: 30px 0;
        }

        /* =========================
                                                        FOOTER
                                                        ========================= */

        .footer {
            background-color: #f1f3f6;
            text-align: center;
            font-size: 14px;
            color: #666;
        }

        .footer p {
            margin: 0;
        }

        /* =========================
                                                        RESPONSIVE DESIGN
                                                        ========================= */

        @media (max-width: 768px) {
            h1 {
                font-size: 30px;
            }

            h2 {
                font-size: 24px;
            }

            .hero-section {
                padding: 70px 20px;
            }

            .btn {
                width: 100%;
                max-width: 280px;
            }
        }
    </style>
    <div class="container my-5">

        <!-- ================= PAGE HEADER ================= -->
        <header class="text-center mb-5">
            <h1 class="fw-bold">Department of Kaumarabhritya (Balroga)</h1>
            <p class="text-muted">
                Ayurvedic Pediatrics • Neonatal Care • Child Wellness • Growth & Development Sciences
            </p>
        </header>


        <!-- ================= Department Overview ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Department Overview</h2>

            <p class="text-justify">
                The Department of Kaumarabhritya, also known as Balroga, focuses on comprehensive
                pediatric healthcare based on classical Ayurvedic principles combined with modern
                child health practices. The department emphasizes neonatal care, growth monitoring,
                nutrition counseling, immunization support, and management of common childhood
                illnesses. Students receive structured clinical exposure through pediatric OPD, IPD,
                and preventive health programs to develop competence in safe and compassionate
                child care.
            </p>

            <ul>
                <li>Neonatal and infant healthcare services</li>
                <li>Growth and developmental assessment</li>
                <li>Management of pediatric disorders</li>
                <li>Preventive and nutritional care programs</li>
            </ul>
        </section>


        <!-- ================= Vision & Mission ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Vision & Mission</h2>

            <div class="row g-4">

                <div class="col-md-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <h5 class="fw-semibold">Vision</h5>
                            <p>
                                To promote healthy childhood and disease prevention through holistic,
                                evidence-based Ayurvedic pediatric practices and community outreach.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <h5 class="fw-semibold">Mission</h5>
                            <ul>
                                <li>Provide quality pediatric healthcare services</li>
                                <li>Enhance practical clinical training for students</li>
                                <li>Encourage research in child health sciences</li>
                                <li>Promote preventive and nutritional awareness</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </section>


        <!-- ================= Courses & Teaching Programs ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Courses & Teaching Programs</h2>

            <div class="table-responsive">
                <table class="table table-bordered table-striped align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Program</th>
                            <th>Year</th>
                            <th>Subject</th>
                            <th>Component</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>BAMS</td>
                            <td>Final Professional</td>
                            <td>Kaumarabhritya (Balroga)</td>
                            <td>Theory + Clinical Posting</td>
                        </tr>
                        <tr>
                            <td>Internship</td>
                            <td>Pediatric Rotation</td>
                            <td>Child Health Care Training</td>
                            <td>OPD/IPD Practice</td>
                        </tr>
                        <tr>
                            <td>Workshops</td>
                            <td>Special Module</td>
                            <td>Neonatal & Nutrition Care</td>
                            <td>Hands-on</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>


        <!-- ================= Faculty & Staff ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Faculty & Staff</h2>

            <div class="row g-4">

                <div class="col-md-4">
                    <div class="card text-center shadow-sm h-100">
                        <div class="card-body">
                            <h5 class="fw-bold">Dr. A. Joshi</h5>
                            <p class="text-muted mb-1">Professor & Head</p>
                            <small>MD (Kaumarabhritya) | Pediatric Specialist</small>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card text-center shadow-sm h-100">
                        <div class="card-body">
                            <h5 class="fw-bold">Dr. P. Sharma</h5>
                            <p class="text-muted mb-1">Assistant Professor</p>
                            <small>Child Nutrition & Growth Expert</small>
                        </div>
                    </div>
                </div>

            </div>
        </section>


        <!-- ================= Infrastructure & Facilities ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Infrastructure & Facilities</h2>

            <div class="row row-cols-1 row-cols-md-2 g-2">
                <div class="col">✔ Dedicated Pediatric OPD Rooms</div>
                <div class="col">✔ Neonatal & Child IPD Ward</div>
                <div class="col">✔ Immunization & Growth Monitoring Unit</div>
                <div class="col">✔ Nutrition & Diet Counseling Room</div>
                <div class="col">✔ Pediatric Pharmacy Support</div>
                <div class="col">✔ Smart Classroom & Case Discussion Hall</div>
            </div>
        </section>


        <!-- ================= Teaching Methodology ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Teaching Methodology</h2>

            <ul>
                <li>Clinical case-based pediatric learning</li>
                <li>Bedside patient evaluation and counseling</li>
                <li>Growth chart analysis & nutritional assessment</li>
                <li>Simulation-based neonatal care training</li>
                <li>Interactive seminars and workshops</li>
            </ul>
        </section>


        <!-- ================= Research & Publications ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Research & Publications</h2>

            <ul>
                <li>Studies on childhood immunity and nutrition</li>
                <li>Clinical research on pediatric disorders</li>
                <li>Preventive healthcare intervention programs</li>
                <li>Publications in national and international journals</li>
            </ul>
        </section>


        <!-- ================= Academic & Co-Curricular Activities ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Academic & Co-Curricular Activities</h2>

            <ul>
                <li>Child health screening camps</li>
                <li>Nutrition awareness workshops</li>
                <li>Immunization drives</li>
                <li>Guest lectures by pediatric specialists</li>
            </ul>
        </section>


        <!-- ================= Student Support ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Student Support</h2>

            <ul>
                <li>Pediatric case record books & manuals</li>
                <li>Mentorship and supervised clinical exposure</li>
                <li>Research guidance and dissertation support</li>
                <li>Career counseling in pediatric practice</li>
            </ul>
        </section>


        <!-- ================= Photo & Media Gallery ================= -->
        <section class="mb-5">
            <h2 class="border-bottom pb-2 mb-3">Photo & Media Gallery</h2>

            <div class="row g-3">
                <div class="col-md-3">
                    <img src="/images/balroga1.jpg" class="img-fluid rounded" alt="Pediatric OPD Consultation">
                </div>
                <div class="col-md-3">
                    <img src="/images/balroga2.jpg" class="img-fluid rounded" alt="Neonatal Care Unit">
                </div>
                <div class="col-md-3">
                    <img src="/images/balroga3.jpg" class="img-fluid rounded" alt="Growth Monitoring Session">
                </div>
                <div class="col-md-3">
                    <img src="/images/balroga4.jpg" class="img-fluid rounded" alt="Child Health Camp Activity">
                </div>
            </div>
        </section>
    </div>
@endsection