@extends('layouts.public')

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

@section('content')
<div style="animation: fadeInUp 0.6s ease-out;">
    {{-- Header --}}
    <section class="text-center mb-2xl">
        <h1 class="mb-lg">Hubungi Kami</h1>
        <p class="text-muted" style="font-size: 1.125rem; line-height: 1.8; max-width: 600px; margin: 0 auto;">
            Kami siap membantu Anda. Hubungi tim kami melalui berbagai saluran komunikasi di bawah.
        </p>
    </section>

    <div class="dr-grid dr-grid-3 mb-2xl">
        {{-- Email Card --}}
        <div class="dr-card text-center">
            <div style="font-size: 2.5rem; margin-bottom: var(--spacing-lg);">📧</div>
            <h4>Email</h4>
            <p class="text-muted mb-lg">Hubungi kami melalui email untuk pertanyaan umum</p>
            <a href="mailto:support@daisyrisk.com" style="color: var(--primary-orange); font-weight: 700; transition: var(--transition);">
                support@daisyrisk.com
            </a>
        </div>

        {{-- WhatsApp Card --}}
        <div class="dr-card text-center">
            <div style="font-size: 2.5rem; margin-bottom: var(--spacing-lg);">💬</div>
            <h4>WhatsApp</h4>
            <p class="text-muted mb-lg">Chat langsung dengan tim support kami</p>
            <a href="https://wa.me/628123456789" target="_blank" rel="noopener noreferrer" 
               style="color: var(--primary-orange); font-weight: 700; transition: var(--transition);">
                +62 812-3456-789
            </a>
        </div>

        {{-- Address Card --}}
        <div class="dr-card text-center">
            <div style="font-size: 2.5rem; margin-bottom: var(--spacing-lg);">📍</div>
            <h4>Alamat</h4>
            <p class="text-muted mb-lg">Kunjungi kantor kami di Jakarta</p>
            <p style="color: var(--primary-orange); font-weight: 700;">
                Jakarta, Indonesia
            </p>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-2xl);">
        {{-- Contact Form --}}
        <div>
            <div class="dr-card">
                <h2 class="mb-lg">Kirim Pesan</h2>

                {{-- Success Message --}}
                @if (session('success'))
                    <div class="dr-alert dr-alert-success mb-lg">
                        ✅ {{ session('success') }}
                    </div>
                @endif

                <form method="POST" action="{{ route('landing.contact.store') }}" style="display: grid; gap: var(--spacing-lg);">
                    @csrf

                    {{-- Name --}}
                    <div>
                        <label for="name" style="display: block; font-weight: 700; margin-bottom: var(--spacing-sm);">
                            Nama Lengkap
                        </label>
                        <input type="text" 
                               id="name" 
                               name="name" 
                               value="{{ old('name') }}"
                               class="dr-input @error('name') @enderror"
                               placeholder="Masukkan nama Anda">
                        @error('name')
                            <p style="color: var(--danger); font-size: 0.875rem; margin-top: var(--spacing-sm);">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Email --}}
                    <div>
                        <label for="email" style="display: block; font-weight: 700; margin-bottom: var(--spacing-sm);">
                            Email
                        </label>
                        <input type="email" 
                               id="email" 
                               name="email" 
                               value="{{ old('email') }}"
                               class="dr-input @error('email') @enderror"
                               placeholder="Masukkan email Anda">
                        @error('email')
                            <p style="color: var(--danger); font-size: 0.875rem; margin-top: var(--spacing-sm);">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Subject --}}
                    <div>
                        <label for="subject" style="display: block; font-weight: 700; margin-bottom: var(--spacing-sm);">
                            Subjek
                        </label>
                        <input type="text" 
                               id="subject" 
                               name="subject" 
                               value="{{ old('subject') }}"
                               class="dr-input @error('subject') @enderror"
                               placeholder="Masukkan subjek pesan">
                        @error('subject')
                            <p style="color: var(--danger); font-size: 0.875rem; margin-top: var(--spacing-sm);">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Message --}}
                    <div>
                        <label for="message" style="display: block; font-weight: 700; margin-bottom: var(--spacing-sm);">
                            Pesan
                        </label>
                        <textarea id="message" 
                                  name="message" 
                                  rows="5"
                                  class="dr-input @error('message') @enderror"
                                  placeholder="Tulis pesan Anda di sini...">{{ old('message') }}</textarea>
                        @error('message')
                            <p style="color: var(--danger); font-size: 0.875rem; margin-top: var(--spacing-sm);">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Submit Button --}}
                    <button type="submit" class="dr-btn dr-btn-primary" style="width: 100%; padding: var(--spacing-lg) var(--spacing-lg); font-size: 1rem;">
                        ✉️ Kirim Pesan
                    </button>
                </form>
            </div>
        </div>

        {{-- Social Media & Info --}}
        <div style="display: grid; gap: var(--spacing-lg);">
            {{-- Social Media --}}
            <div class="dr-card">
                <h4 class="mb-lg">Ikuti Kami</h4>
                <div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
                    <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"
                       style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); transition: var(--transition);">
                        <span style="font-size: 1.25rem;">𝕏</span>
                        <span class="text-muted">Twitter / X</span>
                    </a>
                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer"
                       style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); transition: var(--transition);">
                        <span style="font-size: 1.25rem;">in</span>
                        <span class="text-muted">LinkedIn</span>
                    </a>
                    <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"
                       style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); transition: var(--transition);">
                        <span style="font-size: 1.25rem;">f</span>
                        <span class="text-muted">Facebook</span>
                    </a>
                    <a href="https://instagram.com" target="_blank" rel="noopener noreferrer"
                       style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); transition: var(--transition);">
                        <span style="font-size: 1.25rem;">📷</span>
                        <span class="text-muted">Instagram</span>
                    </a>
                </div>
            </div>

            {{-- FAQ Quick Links --}}
            <div class="dr-card">
                <h4 class="mb-lg">Informasi Lainnya</h4>
                <div style="display: flex; flex-direction: column; gap: var(--spacing-md);">
                    <a href="{{ route('landing.about') }}" 
                       style="color: var(--primary-orange); font-weight: 600; transition: var(--transition);">
                        → Tentang DaisyRisk
                    </a>
                    <a href="{{ route('info.api-docs') }}" 
                       style="color: var(--primary-orange); font-weight: 600; transition: var(--transition);">
                        → Dokumentasi API
                    </a>
                    <a href="{{ route('info.data-sources') }}" 
                       style="color: var(--primary-orange); font-weight: 600; transition: var(--transition);">
                        → Sumber Data
                    </a>
                    <a href="{{ route('register') }}" 
                       style="color: var(--primary-orange); font-weight: 600; transition: var(--transition);">
                        → Daftar Akun
                    </a>
                </div>
            </div>

            {{-- Response Time --}}
            <div class="dr-card" style="background: var(--primary-yellow-light); border: 2px solid var(--primary-yellow);">
                <h4 class="mb-md">⏱️ Waktu Respons</h4>
                <p class="text-muted mb-md">
                    Kami biasanya merespons email dalam 24 jam kerja.
                </p>
                <p style="font-size: 0.875rem; color: var(--text-muted);">
                    Jam kerja: Senin-Jumat, 09:00-17:00 WIB
                </p>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @media (max-width: 768px) {
        div[style*="grid-template-columns: 2fr"] {
            grid-template-columns: 1fr !important;
        }
    }
</style>
@endsection