@extends('layouts.frontend')

@section('content')
    <!-- Page Header -->
    <section class="bg-success py-5 text-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center animate-on-scroll">
                    <h1 class="display-4 fw-bold">Contact Us</h1>
                    <p class="lead">Get in touch with AMAC PLC</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 animate-on-scroll">
                    <h2 class="section-title mb-4">Get In Touch</h2>
                    <form>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="firstName" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="firstName" required>
                            </div>
                            <div class="col-md-6">
                                <label for="lastName" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="lastName" required>
                            </div>
                            <div class="col-12">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="col-12">
                                <label for="subject" class="form-label">Subject</label>
                                <input type="text" class="form-control" id="subject" required>
                            </div>
                            <div class="col-12">
                                <label for="message" class="form-label">Message</label>
                                <textarea class="form-control" id="message" rows="5" required></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-success btn-lg">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-6 animate-on-scroll">
                    <h2 class="section-title mb-4">Contact Information</h2>
                    
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="bi bi-geo-alt-fill text-success me-2"></i>
                                Headquarters
                            </h5>
                            <p class="card-text mb-1">Westport Industrial City</p>
                            <p class="card-text mb-1">P.O. BOX 1838-00100</p>
                            <p class="card-text">Nairobi, Kenya</p>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="bi bi-envelope-fill text-success me-2"></i>
                                Email
                            </h5>
                            <p class="card-text">info@amacplc.com</p>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="bi bi-globe text-success me-2"></i>
                                Website
                            </h5>
                            <p class="card-text">www.amacplc.com</p>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Strategic Partners</h5>
                            <div class="row g-2">
                                <div class="col-6">
                                    <small class="text-muted">DHL Logistics</small>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">DMCC Dubai</small>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">Nawiri Digital Bank</small>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">KTDA Tea</small>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">WRSC Certification</small>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">KEBS Standards</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 class="section-title mb-4">Our Location</h2>
                    <div class="card border-0 shadow-lg">
                        <div class="card-body p-0">
                            <!-- Placeholder for map -->
                            <div class="bg-success text-white p-5 text-center rounded">
                                <i class="bi bi-map fs-1 mb-3"></i>
                                <h4>Westport Industrial City, Nairobi</h4>
                                <p class="mb-0">Interactive map would be embedded here</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection