@extends('adminlte::page')

@section('title', 'Akilah - Home')

@section('content_header')
    <h1>Welcome to Owa by Akilaah Akilah</h1>
@stop

@section('content')
    <!-- Hero Section -->
    <header class="w-full lg:max-w-4xl max-w-[335px] text-sm mb-6 not-has-[nav]:hidden">
            @if (Route::has('login'))
                <nav class="flex items-center justify-end gap-4">
                    @auth
                        <a
                            href="{{ url('/dashboard') }}"
                            class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal"
                        >
                            Dashboard
                        </a>
                    @else
                        <a
                            href="{{ route('login') }}"
                            class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] text-[#1b1b18] border border-transparent hover:border-[#19140035] dark:hover:border-[#3E3E3A] rounded-sm text-sm leading-normal"
                        >
                            Log in
                        </a>

                        @if (Route::has('register'))
                            <a
                                href="{{ route('register') }}"
                                class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
                                Register
                            </a>
                        @endif
                    @endauth
                </nav>
            @endif
        </header>
    <div class="hero-section text-center py-5 bg-light">
        <h2>{{ $sections['hero_title'] ?? 'Empowering Communities' }}</h2>
        <p class="lead">{{ $sections['hero_description'] ?? 'Join us in making a difference.' }}</p>
        <a href="{{ route('register') }}" class="btn btn-primary btn-lg">Get Started</a>
    </div>

    <!-- Features Section -->
    <div class="features-section py-5">
        <div class="container">
            <h3 class="text-center mb-4">{{ $sections['features_title'] ?? 'Our Features' }}</h3>
            <div class="row">
                <div class="col-md-4 text-center">
                    <h4>Secure Wallets</h4>
                    <p>Manage your funds securely with our digital wallets.</p>
                </div>
                <div class="col-md-4 text-center">
                    <h4>Easy Transactions</h4>
                    <p>Send and receive funds with ease.</p>
                </div>
                <div class="col-md-4 text-center">
                    <h4>24/7 Support</h4>
                    <p>We're here to help you anytime.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials Section -->
    <div class="testimonials-section py-5 bg-light">
        <div class="container">
            <h3 class="text-center mb-4">{{ $sections['testimonials_title'] ?? 'What Our Users Say' }}</h3>
            <div class="row">
                <div class="col-md-6">
                    <blockquote class="blockquote">
                        <p>"Akilah has changed the way I manage my finances. Highly recommended!"</p>
                        <footer class="blockquote-footer">User 1</footer>
                    </blockquote>
                </div>
                <div class="col-md-6">
                    <blockquote class="blockquote">
                        <p>"The support team is amazing. They helped me resolve my issues quickly."</p>
                        <footer class="blockquote-footer">User 2</footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div class="contact-section py-5">
        <div class="container">
            <h3 class="text-center mb-4">{{ $sections['contact_title'] ?? 'Contact Us' }}</h3>
            <form>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter your email">
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
@stop