@extends('layouts.public')

@php
    $lang = session('locale', 'en');

    $translations = [
        'en' => [
            'title' => 'Contact Us',
            'meta' => 'Contact the UsedStore.ca support team.',
            'eyebrow' => 'CONTACT',
            'hero_title' => 'How can we help you?',
            'hero_text' => 'Send us a message and our team will respond as soon as possible.',
            'email_title' => 'Email support',
            'location_title' => 'Location',
            'website_title' => 'Website',
            'form_title' => 'Send us a message',
            'name' => 'Full name',
            'email' => 'Email address',
            'subject' => 'Subject',
            'message' => 'Message',
            'send' => 'Send Message',
            'name_placeholder' => 'Enter your full name',
            'email_placeholder' => 'name@example.com',
            'subject_placeholder' => 'How can we help?',
            'message_placeholder' => 'Write your message here...',
        ],

        'fr' => [
            'title' => 'Nous contacter',
            'meta' => 'Contactez l’équipe de soutien UsedStore.ca.',
            'eyebrow' => 'CONTACT',
            'hero_title' => 'Comment pouvons-nous vous aider?',
            'hero_text' => 'Envoyez-nous un message et notre équipe vous répondra dès que possible.',
            'email_title' => 'Soutien par courriel',
            'location_title' => 'Emplacement',
            'website_title' => 'Site Web',
            'form_title' => 'Envoyez-nous un message',
            'name' => 'Nom complet',
            'email' => 'Adresse courriel',
            'subject' => 'Sujet',
            'message' => 'Message',
            'send' => 'Envoyer le message',
            'name_placeholder' => 'Entrez votre nom complet',
            'email_placeholder' => 'nom@exemple.com',
            'subject_placeholder' => 'Comment pouvons-nous vous aider?',
            'message_placeholder' => 'Écrivez votre message ici...',
        ],
    ];

    $t = $translations[$lang] ?? $translations['en'];
@endphp

@section('title', $t['title'] . ' | UsedStore.ca')
@section('meta_description', $t['meta'])

@section('content')
<style>
    .contact-page,
    .contact-page * {
        box-sizing: border-box;
    }

    .contact-page {
        min-height: 700px;
        padding: 80px 0;
        background:
            radial-gradient(circle at top right, rgba(79,70,229,.13), transparent 30%),
            #f8fafc;
    }

    .contact-container {
        width: min(1100px, calc(100% - 32px));
        margin: 0 auto;
    }

    .contact-header {
        max-width: 750px;
        margin: 0 auto 50px;
        text-align: center;
    }

    .contact-eyebrow {
        color: #4f46e5;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 2px;
    }

    .contact-header h1 {
        margin: 15px 0;
        color: #0f172a;
        font-size: clamp(38px, 6vw, 62px);
        letter-spacing: -2px;
    }

    .contact-header p {
        margin: 0;
        color: #64748b;
        font-size: 18px;
        line-height: 1.8;
    }

    .contact-layout {
        display: grid;
        grid-template-columns: .8fr 1.4fr;
        gap: 28px;
    }

    .contact-details {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .contact-detail-card,
    .contact-form-card {
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        background: white;
        box-shadow: 0 18px 45px rgba(15,23,42,.06);
    }

    .contact-detail-card {
        padding: 25px;
    }

    .contact-detail-icon {
        display: flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        border-radius: 14px;
        background: #eef2ff;
        color: #4f46e5;
        font-size: 21px;
    }

    .contact-detail-card h3 {
        margin: 0 0 8px;
        color: #0f172a;
        font-size: 18px;
    }

    .contact-detail-card p,
    .contact-detail-card a {
        margin: 0;
        color: #64748b;
        line-height: 1.7;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .contact-form-card {
        padding: 35px;
    }

    .contact-form-card h2 {
        margin: 0 0 28px;
        color: #0f172a;
        font-size: 28px;
    }

    .contact-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .contact-field-full {
        grid-column: 1 / -1;
    }

    .contact-label {
        display: block;
        margin-bottom: 8px;
        color: #334155;
        font-size: 14px;
        font-weight: 800;
    }

    .contact-input,
    .contact-textarea {
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 13px;
        background: white;
        color: #0f172a;
        font: inherit;
        outline: none;
        transition: .2s;
    }

    .contact-input {
        height: 52px;
        padding: 0 16px;
    }

    .contact-textarea {
        min-height: 160px;
        padding: 15px 16px;
        resize: vertical;
    }

    .contact-input:focus,
    .contact-textarea:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79,70,229,.1);
    }

    .contact-submit {
        display: inline-flex;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        padding: 0 25px;
        border: 0;
        border-radius: 13px;
        background: #4f46e5;
        color: white;
        font-size: 15px;
        font-weight: 900;
        cursor: pointer;
    }

    @media (max-width: 800px) {
        .contact-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 560px) {
        .contact-page {
            padding: 58px 0;
        }

        .contact-form-grid {
            grid-template-columns: 1fr;
        }

        .contact-field-full {
            grid-column: auto;
        }

        .contact-form-card {
            padding: 24px;
        }

        .contact-submit {
            width: 100%;
        }
    }
</style>

<section class="contact-page">
    <div class="contact-container">
        <header class="contact-header">
            <span class="contact-eyebrow">{{ $t['eyebrow'] }}</span>
            <h1>{{ $t['hero_title'] }}</h1>
            <p>{{ $t['hero_text'] }}</p>
        </header>

        <div class="contact-layout">
            <aside class="contact-details">
                <article class="contact-detail-card">
                    <div class="contact-detail-icon">✉</div>
                    <h3>{{ $t['email_title'] }}</h3>
                    <a href="mailto:support@usedstore.ca">
                        support@usedstore.ca
                    </a>
                </article>

                <article class="contact-detail-card">
                    <div class="contact-detail-icon">⌖</div>
                    <h3>{{ $t['location_title'] }}</h3>
                    <p>Montréal, Québec, Canada</p>
                </article>

                <article class="contact-detail-card">
                    <div class="contact-detail-icon">◎</div>
                    <h3>{{ $t['website_title'] }}</h3>
                    <a href="https://usedstore.ca">
                        www.usedstore.ca
                    </a>
                </article>
            </aside>

            <div class="contact-form-card">
                <h2>{{ $t['form_title'] }}</h2>

                <form method="POST" action="mailto:support@usedstore.ca">
                    @csrf

                    <div class="contact-form-grid">
                        <div>
                            <label class="contact-label" for="contact_name">
                                {{ $t['name'] }}
                            </label>

                            <input
                                id="contact_name"
                                name="name"
                                type="text"
                                class="contact-input"
                                placeholder="{{ $t['name_placeholder'] }}"
                                value="{{ old('name') }}"
                                required
                            >
                        </div>

                        <div>
                            <label class="contact-label" for="contact_email">
                                {{ $t['email'] }}
                            </label>

                            <input
                                id="contact_email"
                                name="email"
                                type="email"
                                class="contact-input"
                                placeholder="{{ $t['email_placeholder'] }}"
                                value="{{ old('email') }}"
                                required
                            >
                        </div>

                        <div class="contact-field-full">
                            <label class="contact-label" for="contact_subject">
                                {{ $t['subject'] }}
                            </label>

                            <input
                                id="contact_subject"
                                name="subject"
                                type="text"
                                class="contact-input"
                                placeholder="{{ $t['subject_placeholder'] }}"
                                value="{{ old('subject') }}"
                                required
                            >
                        </div>

                        <div class="contact-field-full">
                            <label class="contact-label" for="contact_message">
                                {{ $t['message'] }}
                            </label>

                            <textarea
                                id="contact_message"
                                name="message"
                                class="contact-textarea"
                                placeholder="{{ $t['message_placeholder'] }}"
                                required
                            >{{ old('message') }}</textarea>
                        </div>

                        <div class="contact-field-full">
                            <button type="submit" class="contact-submit">
                                {{ $t['send'] }}
                            </button>
                        </div> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection