@extends('layouts.frontend.app')

@section('title', 'Contact - Pay9')

@section('content')
<section class="contact-section py-5">
    <div class="container" style="font-size: 20px;">
        <div class="row align-items-center" style="margin-left: 50px;">

            <!-- Left Side: Contact Info -->
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h2 class="section-title mb-3">Contact Us</h2>
                <p class="text-muted mb-4">Let's connect to create impact</p>

                <div class="contact-info">

                    <!-- Head Office -->
                    <div class="d-flex mb-4 animate-contact">
                        <i class="bi bi-geo-alt-fill me-3 icon-style"></i>
                        <div>
                            <h4 class="fw-bold mb-1" style="color: var(--primary);">Head Office</h4>
                            <h6 class="fw-semibold">UPAY</h6>
                            <p class="mb-0 text-muted">
                                City: Nellore, District: Sri Potti Sriramulu Nellore<br>
                                State: Andhra Pradesh<br>
                                Pin Code: 524004
                            </p>
                        </div>
                    </div>

                    <!-- Contact -->
                    <div class="d-flex mb-4 animate-contact">
                        <i class="bi bi-telephone-fill me-3 icon-style"></i>
                        <div>
                            <h4 class="fw-bold mb-1" style="color: var(--primary);">Contact Us</h4>
                            <p class="mb-0">
                                <a href="tel:+919329939658" class="text-decoration-none" style="color: var(--secondary);">
                                    +91 93299 39658
                                </a>
                            </p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Right Side: Image -->
            <div class="col-lg-6 text-center animate-image">
                <img src="{{ asset('images/contact.png') }}" class="img-fluid contact-img" alt="Contact Pay9">
            </div>
        </div>

        <!-- Decorative Bar -->
        <div class="bar-box text-center my-5" data-aos="zoom-in"></div>

        <!-- Join With Us -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="d-flex align-items-start animate-contact">
                    <i class="bi bi-person-plus-fill me-3 icon-style"></i>
                    <div>
                        <h4 class="fw-bold mb-2" style="color: var(--primary);">Join With Us</h4>
                        <p class="text-muted mb-3">
                            If you want to become a Member of UPAY, kindly click on the link given below and download the UPAY application
                            from Google Play Store to earn the best commission by doing transactions.
                        </p>
                        <a href="https://play.google.com/store/apps/details?id=YOUR_APP_ID" target="_blank">
                            <img src="{{ asset('images/playstore.png') }}" alt="Download on Google Play" class="playstore-btn">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const animateElements = document.querySelectorAll('.animate-contact, .animate-image');
    function animateOnScroll() {
        const windowBottom = window.innerHeight + window.scrollY;
        animateElements.forEach(el => {
            const elementTop = el.offsetTop + el.offsetHeight / 4;
            if (windowBottom > elementTop) el.classList.add('active');
        });
    }
    window.addEventListener('scroll', animateOnScroll);
    animateOnScroll();
});
</script>

<style>
:root {
    --primary: #eb7f1a;
    --secondary: #189ab4;
    --accent: #75e6da;
    --light: #d4f1f4;
}

/* Section */
.contact-section {
    background-color: #fff;
    padding: 70px 10px;
}

/* Title */
.section-title {
    font-weight: 700;
    color: var(--primary);
    border-bottom: 3px solid var(--secondary);
    display: inline-block;
    padding-bottom: 6px;
}

/* Icons */
.icon-style {
    font-size: 1.8rem;
    color: var(--primary);
}

/* Info Layout */
.contact-info .d-flex {
    align-items: flex-start;
    transition: transform 0.3s ease;
}
.contact-info .d-flex:hover {
    transform: translateX(5px);
}

/* Text */
.contact-info h6,
.contact-info h5,
.contact-info h4 {
    color: var(--primary);
}
.contact-info p {
    color: #555;
    margin-bottom: 0;
}
.contact-info a:hover {
    color: var(--primary);
}

/* Image */
.contact-img {
    max-height: 330px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Animation */
.animate-contact,
.animate-image {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.animate-contact.active,
.animate-image.active {
    opacity: 1;
    transform: translateY(0);
}

/* Playstore Button */
.playstore-btn {
    height: 45px;
    transition: transform 0.3s ease;
}
.playstore-btn:hover {
    transform: scale(1.05);
}

/* Decorative Bar */
.bar-box {
    background: linear-gradient(90deg, #eb7f1a, #eb7f1a);
    padding: 8px;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

/* ---------------------------------------------------
   Tablet (≤ 991px)
--------------------------------------------------- */
@media (max-width: 991px) {

    .contact-section {
        padding: 50px 20px;
    }

    .contact-img {
        margin-top: 30px;
        max-height: 250px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .icon-style {
        font-size: 1.6rem;
    }

    .contact-info h4,
    .contact-info h5,
    .contact-info h6 {
        text-align: center;
    }

    .contact-info p {
        text-align: center;
    }

    .contact-info .d-flex {
        justify-content: center;
        text-align: center;
    }
}

/* ---------------------------------------------------
   Mobile (≤ 768px)
--------------------------------------------------- */
@media (max-width: 768px) {

    .section-title {
        font-size: 1.4rem;
        text-align: center;
    }

    .contact-info h4 {
        font-size: 1.2rem;
    }

    .contact-info p {
        font-size: 0.95rem;
    }

    .icon-style {
        font-size: 1.4rem;
    }

    .contact-img {
        max-height: 320px;
        width: 90%;
    }

    .contact-info .d-flex {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .playstore-btn {
        height: 40px;
        margin: 10px auto;
        display: block;
    }
}

/* ---------------------------------------------------
   Small Mobile (≤ 480px)
--------------------------------------------------- */
@media (max-width: 480px) {

    .section-title {
        font-size: 1.25rem;
    }

    .contact-info h4 {
        font-size: 1.1rem;
    }

    .contact-info p {
        font-size: 0.9rem;
    }

    .contact-img {
        max-height: 200px;
        width: 100%;
    }

    .icon-style {
        font-size: 1.2rem;
    }

    .playstore-btn {
        height: 38px;
    }
}

</style>
@endsection