@extends('layouts.app')

@section('title', 'Contact Soyogi — Japanese Language Classes Enquiry')

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-envelope"></i> Contact Us</div>
    <span class="jp-sub">お問い合わせ</span>
    <h1>Get in Touch</h1>
    <p>Book a free counselling session or call us directly — we're always ready to help.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Contact</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">
        @if(session('success'))
        <div style="background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);border-radius:12px;padding:16px 20px;margin-bottom:32px;color:#065f46;font-weight:600;">
            <i class="fas fa-check-circle" style="margin-right:8px;color:#10b981;"></i>{{ session('success') }}
        </div>
        @endif

        <div style="display:grid;grid-template-columns:1fr 1.5fr;gap:48px;">
            <!-- Contact Info -->
            <div data-aos="fade-right">
                <h2 style="font-size:26px;font-weight:800;color:var(--navy);margin-bottom:24px;">Contact Information</h2>
                @foreach([
                    ['fas fa-map-marker-alt','Address','Your Full Address, City, State - PIN Code'],
                    ['fas fa-phone-alt','Phone','+91 99999 99999 | +91 88888 88888'],
                    ['fas fa-envelope','Email','info@soyogi.in'],
                    ['fas fa-clock','Hours','Mon - Sat: 9:00 AM - 8:00 PM | Sun: 10 AM - 4 PM'],
                    ['fab fa-whatsapp','WhatsApp','+91 99999 99999 (Chat anytime)'],
                ] as $info)
                <div style="display:flex;gap:16px;margin-bottom:24px;align-items:flex-start;">
                    <div style="width:44px;height:44px;background:rgba(220,38,38,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0;">
                        <i class="{{ $info[0] }}"></i>
                    </div>
                    <div>
                        <div style="font-size:12px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">{{ $info[1] }}</div>
                        <div style="font-size:14px;color:var(--navy);font-weight:500;">{{ $info[2] }}</div>
                    </div>
                </div>
                @endforeach

                <div style="margin-top:32px;">
                    <div style="font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px;">Follow Us</div>
                    <div style="display:flex;gap:10px;">
                        @foreach(['fab fa-facebook-f','fab fa-instagram','fab fa-youtube','fab fa-linkedin-in'] as $icon)
                        <a href="#" style="width:40px;height:40px;background:var(--gray-100);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--navy);text-decoration:none;transition:all 0.2s;" onmouseover="this.style.background='var(--red)';this.style.color='white'" onmouseout="this.style.background='var(--gray-100)';this.style.color='var(--navy)'">
                            <i class="{{ $icon }}"></i>
                        </a>
                        @endforeach
                    </div>
                </div>

                <!-- Map Placeholder -->
                <div style="margin-top:32px;height:220px;background:var(--gray-100);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--gray-600);">
                    <div style="text-align:center;">
                        <i class="fas fa-map-marked-alt" style="font-size:40px;margin-bottom:10px;display:block;color:var(--red);"></i>
                        <span style="font-size:14px;">Google Map Embed Here</span>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div data-aos="fade-left">
                <div style="background:white;border-radius:20px;padding:40px;border:1px solid var(--gray-200);box-shadow:0 4px 20px rgba(0,0,0,0.04);">
                    <h2 style="font-size:22px;font-weight:800;color:var(--navy);margin-bottom:6px;">Send Us a Message</h2>
                    <p style="color:var(--gray-600);font-size:14px;margin-bottom:28px;">Fill out the form for a free counselling session — we'll call you back within 24 hours.</p>

                    <form action="{{ route('contact.submit') }}" method="POST">
                        @csrf
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                            <div class="form-group">
                                <label>Full Name *</label>
                                <input type="text" name="name" placeholder="Your full name" required>
                            </div>
                            <div class="form-group">
                                <label>Phone Number *</label>
                                <input type="tel" name="phone" placeholder="+91 00000 00000" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" placeholder="your@email.com">
                        </div>
                        <div class="form-group">
                            <label>Interested In</label>
                            <select name="interest">
                                <option>Select course/service...</option>
                                <option>Japanese Language Course (N5-N1)</option>
                                <option>Conversation Classes (Kaiwa)</option>
                                <option>Online Japanese Classes</option>
                                <option>JLPT Preparation</option>
                                <option>Japan Visa Assistance</option>
                                <option>Japan Job Assistance</option>
                                <option>Placement in Japan</option>
                                <option>India Return Job Support</option>
                                <option>Japanese in India Support</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Your Message</label>
                            <textarea name="message" rows="4" placeholder="Tell us a bit about yourself or ask anything you'd like to know..." required style="resize:vertical;"></textarea>
                        </div>
                        <button type="submit" class="btn-submit">
                            Send Message <i class="fas fa-paper-plane" style="margin-left:8px;"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Quick Contact Cards -->
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;">
            @foreach([
                ['fas fa-phone-alt','Call Us Now','For immediate queries and admissions.','tel:+919999999999','+91 99999 99999','var(--red)'],
                ['fab fa-whatsapp','WhatsApp','Quick responses on WhatsApp.','https://wa.me/919999999999','Chat on WhatsApp','#25D366'],
                ['fas fa-headset','Book Counselling','Free 30-min expert session.','#','Book Now','var(--navy)'],
            ] as $card)
            <div style="background:white;border-radius:16px;padding:28px;text-align:center;border:1px solid var(--gray-200);" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                <div style="width:56px;height:56px;background:{{ $card[5] }};border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:white;font-size:22px;">
                    <i class="{{ $card[0] }}"></i>
                </div>
                <h4 style="font-weight:700;color:var(--navy);margin-bottom:6px;">{{ $card[1] }}</h4>
                <p style="font-size:13px;color:var(--gray-600);margin-bottom:16px;">{{ $card[2] }}</p>
                <a href="{{ $card[3] }}" onclick="{{ $card[0]=='fas fa-headset'?'openModal();return false;':'' }}" style="color:{{ $card[5] }};font-weight:700;font-size:14px;text-decoration:none;">{{ $card[4] }} →</a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endsection