@extends('landing.template.layout')
@section('content')

<div class="content">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-6">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('landing') }}" class="text-decoration-none">Beranda</a></li>
            <li class="breadcrumb-item active">Hubungi Kami</li>
        </ol>
    </nav>

    <!-- Hero Section -->
    <div class="position-relative mb-10">
        <div class="hero-gradient position-absolute top-0 start-0 w-100 h-100 rounded-3"></div>
        <div class="position-relative bg-light rounded-3 overflow-hidden p-4 text-center">
            <div class="hero-pattern position-absolute top-0 start-0 w-100 h-100 opacity-5"></div>
            <div class="position-relative">
                <div class="mb-6">
                    <div class="d-flex align-items-center justify-content-center gap-4 mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary bg-opacity-10" style="width: 60px; height: 60px;">
                            <i class="fas fa-headset text-primary"></i>
                        </div>
                        <h1 class="fw-bold mb-2 animate-fade-in">Hubungi Kami</h1>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>

    <div class="row g-5 g-lg-6">
        <!-- Contact Information -->
        <div class="col-lg-5">
            <div class="mb-6">
                <div class="d-flex align-items-center mb-4">
                    <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-info-circle text-primary"></i>
                    </div>
                    <h4 class="fw-bold mb-0">Informasi Kontak</h4>
                </div>

                <!-- Contact Cards -->
                <div class="d-flex flex-column gap-4">
                    <!-- Phone -->
                    <div class="contact-card d-flex gap-4 p-4 border-0 rounded-3 shadow-sm hover-lift transition-all duration-300">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-3 icon-wrapper">
                                <i class="fas fa-phone text-primary fs-5"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-2 text-primary">Telepon</h6>
                            <a href="tel:{{ $nomer }}" class="text-decoration-none text-dark fw-semibold fs-5">{{ $nomer }}</a>
                            
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="contact-card d-flex gap-4 p-4 border-0 rounded-3 shadow-sm hover-lift transition-all duration-300">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3 icon-wrapper">
                                <i class="fas fa-envelope text-success fs-5"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-2 text-success">Email</h6>
                            <a href="mailto:{{ $email }}" class="text-decoration-none text-dark fw-semibold fs-5">{{ $email }}</a>
                       
                        </div>
                    </div>

                    <!-- Address -->
                    <div class="contact-card d-flex gap-4 p-4 border-0 rounded-3 shadow-sm hover-lift transition-all duration-300">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle p-3 icon-wrapper">
                                <i class="fas fa-map-marker-alt text-warning fs-5"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="fw-bold mb-2 text-warning">Lokasi</h6>
                            <p class="text-dark fw-semibold mb-0 fs-5">{{ $alamat }}</p>
                            
                        </div>
                    </div>
                </div>
            </div>

           
        </div>

        <!-- Contact Form -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-body p-6">
                    <div class="d-flex align-items-center mb-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                            <i class="fas fa-paper-plane text-primary"></i>
                        </div>
                        <h4 class="fw-bold mb-0">Kirim Pesan</h4>
                    </div>
                    
                    <form class="contact-form">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nama Lengkap</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0">
                                        <i class="fas fa-user text-muted"></i>
                                    </span>
                                    <input type="text" class="form-control border-start-0" placeholder="Masukkan nama Anda" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0">
                                        <i class="fas fa-envelope text-muted"></i>
                                    </span>
                                    <input type="email" class="form-control border-start-0" placeholder="email@example.com" required>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Subjek</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0">
                                        <i class="fas fa-tag text-muted"></i>
                                    </span>
                                    <input type="text" class="form-control border-start-0" placeholder="Subjek pesan" required>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Pesan</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light border-0 align-items-start pt-3">
                                        <i class="fas fa-comment text-muted"></i>
                                    </span>
                                    <textarea class="form-control border-start-0" rows="4" placeholder="Tulis pesan Anda di sini..." required></textarea>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5">
                                    <i class="fas fa-paper-plane me-2"></i>Kirim Pesan
                                </button>
                                <button type="reset" class="btn btn-outline-secondary btn-lg rounded-pill px-5 ms-2">
                                    <i class="fas fa-redo me-2"></i>Reset
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Map Section -->
    <div class="mt-8">
        <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
            <div class="card-body p-0">
                <div class="row g-0">
                    <div class="col-lg-4 p-6">
                        <h4 class="fw-bold mb-4">Temukan Kami</h4>
                        <p class="text-muted mb-4">Kunjungi kantor kami untuk konsultasi langsung atau sekedar silaturahmi.</p>
                        <div class="d-grid gap-3">
                            <a href="tel:{{ $nomer }}" class="btn btn-outline-primary">
                                <i class="fas fa-phone me-2"></i>Hubungi Sekarang
                            </a>
                            <a href="#directions" class="btn btn-outline-secondary">
                                <i class="fas fa-directions me-2"></i>Petunjuk Arah
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="googlemap h-100" data-googlemap data-latlng="-7.524826067502947, 110.59967683627306" data-scrollwheel="false" data-zoom="15" style="min-height: 400px;">
                            <div class="marker-content py-2">
                                <h5>Lokasi Kami</h5>
                                <p class="mb-0">{{ $alamat }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
</div>

<style>
    .breadcrumb {
        background-color: transparent;
        padding: 0;
    }

    .breadcrumb-item a {
        color: #0d6efd;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .breadcrumb-item a:hover {
        color: #0a58ca;
    }

    .hero-gradient {
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(25, 135, 84, 0.1) 100%);
    }

    .hero-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .cta-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, #0d6efd 0%, #198754 100%);
    }

    .contact-card {
        border-left: 4px solid transparent;
        transition: all 0.3s ease;
    }

    .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-left-color: #0d6efd;
    }

    .contact-card:nth-child(2):hover {
        border-left-color: #198754;
    }

    .contact-card:nth-child(3):hover {
        border-left-color: #ffc107;
    }

    .icon-wrapper {
        transition: transform 0.3s ease;
    }

    .contact-card:hover .icon-wrapper {
        transform: scale(1.1);
    }

    .social-icon {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .social-icon:hover {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }

    .btn-primary {
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
    }

    .btn-light:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
    }

    .input-group .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .animate-fade-in {
        animation: fadeIn 1s ease-in;
    }

    .animate-slide-up {
        animation: slideUp 0.8s ease-out 0.3s both;
    }

    .animate-slide-up-delay {
        animation: slideUp 0.8s ease-out 0.6s both;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .contact-form {
        position: relative;
    }

    .contact-form::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.02) 0%, rgba(25, 135, 84, 0.02) 100%);
        border-radius: 0.375rem;
        pointer-events: none;
    }

    .form-control, .input-group-text {
        background-color: rgba(248, 249, 250, 0.8);
        backdrop-filter: blur(10px);
    }
</style>

@endsection
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Intersection Observer for animations
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, {
        threshold: 0.1
    });

    // Observe contact cards
    document.querySelectorAll('.contact-card').forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
        observer.observe(card);
    });

    // Form submission handler
    const form = document.querySelector('.contact-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show success message
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-check me-2"></i>Terkirim!';
            submitBtn.classList.add('btn-success');
            submitBtn.classList.remove('btn-primary');
            submitBtn.disabled = true;
            
            // Reset form after 2 seconds
            setTimeout(() => {
                form.reset();
                submitBtn.innerHTML = originalText;
                submitBtn.classList.remove('btn-success');
                submitBtn.classList.add('btn-primary');
                submitBtn.disabled = false;
            }, 2000);
        });
    }

    // Add ripple effect to buttons
    document.querySelectorAll('.btn').forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            ripple.classList.add('ripple');
            this.appendChild(ripple);
            
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            
            setTimeout(() => ripple.remove(), 600);
        });
    });
});
</script>

<style>
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn {
    position: relative;
    overflow: hidden;
}
</style>
@endpush