@extends('layouts.app')

@push('page-styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/_contact.css') }}">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
@endpush

@section('title', 'Contact Us Digital Agency Jakarta - Croloze')
@section('description', 'Get in touch with our Jakarta-based digital marketing agency. We\'re ready to help you grow your business through SEO, SEM, social media, and creative campaigns.')

@section('content')
<main>
    <section id="contact-us-section" class="py-16 md:py-24 bg-light">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center max-w-2xl mx-auto mb-12 md:mb-16" data-aos="fade-up">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 text-dark">Get In Touch</h1>
                <p class="text-lg text-medium-gray">Have questions or want to discuss your project? Reach out to us!</p>
            </div>

            <div class="bg-white p-8 md:p-12 rounded-2xl shadow-lg" data-aos="fade-up" data-aos-delay="100">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
                    @include('components.contact-us.contact-info')
                    @include('components.contact-us.contact-form')
                </div>
                
            </div>
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="{{ asset('assets/js/main-script.js') }}" defer></script>
<script src="{{ asset('assets/js/contact-form.js') }}" defer></script>
<script src="{{ asset('assets/js/navbar.js') }}" defer></script>
@endpush