@include('partials.navbar')

    <!-- Hero / Mandate Frame Section -->
    <section class="position-relative bg-dark text-white overflow-hidden py-5 border-bottom border-primary border-4" style="background: linear-gradient(135deg, #021a44 0%, #0033aa 100%);">
        <div class="container py-4 position-relative z-index-2">
            <div class="row align-items-center g-5">
                <div class="col-lg- text-center text-lg-start">
                    <span class="badge bg-warning text-dark mb-3 px-3 py-2 rounded-pill fw-bold text-uppercase tracking-wider">Official Regulatory Gateway</span>
                    <h1 class="display-4 fw-black text-white mb-3">
                        Safeguarding Personal Data in Somalia
                    </h1>
                    <p class="lead text-white-50 mb-4" style="max-width: 600px;">
                        Regulating the processing of personal information, protecting individuals' foundational privacy rights, and driving digital accountability across corporate and public sectors.
                    </p>
                    <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-lg-start">
                        <a href="/data_handler_registration" class="btn btn-warning btn-lg px-4 fw-bold rounded-pill shadow">Register as Data Handler</a>
                        <a href="#" class="btn btn-outline-light btn-lg px-4 rounded-pill">Download Framework PDFs</a>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <!-- Core Action Pillars: The 3 Structural Targets Inspired by ODPC -->
    <main class="flex-grow-1 py-5 my-3">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold text-dark">Data Protection Services</h2>
                <p class="text-muted" style="max-width: 500px; margin: 0 auto;">Select your relevant channel below to initiate statutory filing processes.</p>
            </div>
            
            <div class="row g-4 justify-content-center">
                <!-- Pillar 1: Data Subject Actions -->
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0 border-top border-primary border-4 p-4 text-center rounded-4 transition-all hover-shadow">
                        <div class="text-primary mb-3">
                            <i class="bi bi-person-exclamation display-4"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Data Subjects</h4>
                        <p class="text-muted small flex-grow-1">
                            Are you an individual who believes your privacy parameters or data security laws have been compromised?
                        </p>
                        <a href="#" class="btn btn-outline-primary w-100 rounded-pill mt-3">File a Direct Complaint</a>
                    </div>
                </div>

                <!-- Pillar 2: Data Controller Operations -->
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0 border-top border-warning border-4 p-4 text-center rounded-4 transition-all hover-shadow">
                        <div class="text-warning mb-3">
                            <i class="bi bi-building-check display-4"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Data Handlers</h4>
                        <p class="text-muted small flex-grow-1">
                            Entities acting as Data Controllers or Processors must formalize entries onto the Official National Register.
                        </p>
                        <a href="/data_handler_registration" class="btn btn-warning w-100 rounded-pill text-dark fw-bold mt-3">Register / Renew Entry</a>
                    </div>
                </div>

                <!-- Pillar 3: Breach Reporting -->
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0 border-top border-danger border-4 p-4 text-center rounded-4 transition-all hover-shadow">
                        <div class="text-danger mb-3">
                            <i class="bi bi-exclamation-triangle display-4"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Data Breaches</h4>
                        <p class="text-muted small flex-grow-1">
                            Statutory guidelines command immediate notifications upon discovery of vector compromises or internal data leaks.
                        </p>
                        <a href="#" class="btn btn-outline-danger w-100 rounded-pill mt-3">Report a Data Breach</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('partials.footer')