@extends('layouts.app')

@section('title', 'Somalia Data Protection Authority')

@section('content')

<!-- HERO SECTION -->
<section class="hero-section">
    <div class="container">

        <div class="row align-items-center">

            <div class="col-md-7">

                <span class="hero-badge">
                    Independent • Transparent • Trusted
                </span>

                <h1 class="hero-title">
                    Your Data, Your Rights,
                    Our Responsibility
                </h1>

                <p class="hero-description">
                    The Somalia Data Protection Authority ensures privacy,
                    safeguards personal data and enables trust in Somalia's
                    digital future.
                </p>

                <div class="hero-buttons">

                    <a href="{{ route('registration.create') }}"
                       class="btn btn-primary">
                        Register Now
                    </a>

                    <a href="{{ route('complaints.create') }}"
                       class="btn btn-outline-light">
                        File Complaint
                    </a>

                </div>

            </div>

            <div class="col-md-5">

                <div class="hero-card">

                    <h4>Quick Actions</h4>

                    <ul>

                        <li>
                            <a href="{{ route('registration.create') }}">
                                Register as Data Controller
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('complaints.create') }}">
                                File Complaint
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                Report Data Breach
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                Request Training
                            </a>
                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>
</section>

<!-- ABOUT -->
<section class="section-padding">

    <div class="container">

        <div class="row align-items-center">

            <div class="col-md-6">

                <img src="{{ asset('assets/images/about.jpg') }}"
                     class="img-fluid rounded">

            </div>

            <div class="col-md-6">

                <h2>About DPA</h2>

                <p>
                    The Somalia Data Protection Authority (DPA)
                    is the national independent authority mandated
                    under Law No. 005 (2023).
                </p>

                <a href="/about"
                   class="btn btn-primary">
                    Read More
                </a>

            </div>

        </div>

    </div>

</section>

<!-- SERVICES -->
<section class="bg-light section-padding">

    <div class="container">

        <div class="section-title">

            <h2>Our Services</h2>

        </div>

        <div class="row">

            @foreach($services as $service)

                <div class="col-md-4 mb-4">

                    <div class="card service-card h-100">

                        <div class="card-body">

                            <h4>
                                {{ $service->title }}
                            </h4>

                            <p>
                                {{ Str::limit($service->description,120) }}
                            </p>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

    </div>

</section>

<!-- DIRECTOR MESSAGE -->
@if($director)

<section class="section-padding">

    <div class="container">

        <div class="row">

            <div class="col-md-4">

                <img src="{{ asset($director->photo) }}"
                     class="img-fluid rounded">

            </div>

            <div class="col-md-8">

                <h2>
                    Message from Director General
                </h2>

                <p>
                    {!! $director->message !!}
                </p>

                <h5>
                    {{ $director->name }}
                </h5>

                <small>
                    {{ $director->designation }}
                </small>

            </div>

        </div>

    </div>

</section>

@endif

<!-- LATEST NEWS -->
<section class="bg-light section-padding">

    <div class="container">

        <div class="section-title">

            <h2>
                Latest News
            </h2>

        </div>

        <div class="row">

            @foreach($news as $item)

                <div class="col-md-4">

                    <div class="card news-card">

                        <img src="{{ asset($item->image) }}"
                             class="card-img-top">

                        <div class="card-body">

                            <h5>
                                {{ $item->title }}
                            </h5>

                            <p>
                                {{ Str::limit($item->summary,100) }}
                            </p>

                            <a href="{{ route('news.show',$item->slug) }}">
                                Read More
                            </a>

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

    </div>

</section>

<!-- CONTACT FORM -->
<section class="section-padding">

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <h2>
                    Contact Us
                </h2>

                <p>
                    Have a question or complaint?
                    Send us a message.
                </p>

            </div>

            <div class="col-md-6">

                <form action="{{ route('contact.store') }}"
                      method="POST">

                    @csrf

                    <div class="mb-3">
                        <input type="text"
                               name="name"
                               class="form-control"
                               placeholder="Full Name">
                    </div>

                    <div class="mb-3">
                        <input type="email"
                               name="email"
                               class="form-control"
                               placeholder="Email">
                    </div>

                    <div class="mb-3">
                        <input type="text"
                               name="subject"
                               class="form-control"
                               placeholder="Subject">
                    </div>

                    <div class="mb-3">
                        <textarea name="message"
                                  rows="5"
                                  class="form-control"></textarea>
                    </div>

                    <button class="btn btn-primary">
                        Submit Message
                    </button>

                </form>

            </div>

        </div>

    </div>

</section>

@endsection