@extends('layouts.landing')

@section('meta_title', __('contact.contact') . ' - Hisab Seba')
@section('meta_description', __('contact.contact_meta_description'))
@section('meta_keywords', __('contact.contact_meta_keywords'))
@section('canonical_url', route('landing.contact'))

@php
    $logoUrl = !empty($seo?->logo) ? asset($seo->logo) : asset('hisabseba.png');
@endphp

@section('content')

{{-- HEADER --}}
<header class="fixed left-0 right-0 top-0 z-50" x-data="{ mobileMenu: false }">
    <div class="w-full border-b bg-white/90 backdrop-blur-xl">
        <div class="px-6 lg:px-10 flex items-center justify-between py-4">

            {{-- Logo --}}
            <a href="{{ route('landing.home') }}" class="flex items-center gap-3">
                <img src="{{ $logoUrl }}" class="h-10" alt="{{ __('contact.site_name') }}">
                <span class="font-bold text-lg">{{ __('contact.site_name') }}</span>
            </a>

            {{-- Nav --}}
            <nav class="hidden xl:flex items-center gap-6 text-sm font-semibold">
                <a href="{{ route('landing.home') }}#features">{{ __('contact.features') }}</a>
                <a href="{{ route('landing.home') }}#pricing">{{ __('contact.pricing') }}</a>
                <a href="{{ route('landing.about') }}">{{ __('contact.about') }}</a>
                <a href="{{ route('landing.contact') }}" class="text-blue-600">{{ __('contact.contact') }}</a>
            </nav>

            {{-- Right --}}
            <div class="hidden sm:flex items-center gap-3">

                {{-- Language Toggle --}}
                <a href="{{ route('locale.switch','en') }}" class="px-3 py-1 border rounded">{{ __('contact.lang_en') }}</a>
                <a href="{{ route('locale.switch','bn') }}" class="px-3 py-1 border rounded">{{ __('contact.lang_bn') }}</a>

                <a href="{{ route('user.login') }}" class="px-4 py-2 border rounded-lg">
                    {{ __('contact.login') }}
                </a>

                <a href="{{ route('user.register') }}" class="px-5 py-2 bg-blue-600 text-white rounded-lg">
                    {{ __('contact.start_free_trial') }}
                </a>
            </div>

            {{-- Mobile Button --}}
            <button @click="mobileMenu = !mobileMenu" class="xl:hidden" aria-label="{{ __('contact.mobile_menu') }}">☰</button>
        </div>

        {{-- Mobile Menu --}}
        <div x-show="mobileMenu" x-cloak class="p-4 border-t bg-white">
            <a href="{{ route('landing.home') }}">{{ __('contact.home') }}</a>
        </div>
    </div>
</header>

<main class="pt-28">

{{-- HERO --}}
<section class="bg-gradient-to-r from-blue-900 to-slate-900 text-white py-20 text-center">
    <h1 class="text-4xl font-extrabold">{{ __('contact.contact') }}</h1>
    <p class="mt-4 text-slate-300">
        {{ __('contact.contact_hero_desc') }}
    </p>
</section>

{{-- CONTACT CARDS --}}
<section class="py-20 max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">

    <div class="bg-white p-6 rounded-2xl shadow">
        <h3 class="font-bold text-lg">{{ __('contact.email_support') }}</h3>
        <p class="text-slate-600 mt-2">{{ __('contact.email_support_desc') }}</p>
        <p class="mt-3 text-blue-600">{{ $seo->support_email ?? __('contact.default_support_email') }}</p>
    </div>

    <div class="bg-white p-6 rounded-2xl shadow">
        <h3 class="font-bold text-lg">{{ __('contact.phone') }}</h3>
        <p class="text-slate-600 mt-2">{{ __('contact.phone_desc') }}</p>
        <p class="mt-3 text-green-600">{{ $seo->support_phone ?? __('contact.default_support_phone') }}</p>
    </div>

    <div class="bg-white p-6 rounded-2xl shadow">
        <h3 class="font-bold text-lg">{{ __('contact.address') }}</h3>
        <p class="text-slate-600 mt-2">{{ __('contact.address_desc') }}</p>
        <p class="mt-3">{{ $seo->address ?? __('contact.default_address') }}</p>
    </div>

</section>

{{-- CTA --}}
<section class="py-20 text-center bg-gradient-to-r from-blue-600 to-cyan-500 text-white">
    <h2 class="text-3xl font-bold">{{ __('contact.contact_cta_title') }}</h2>
    <p class="mt-3">{{ __('contact.contact_cta_desc') }}</p>

    <div class="mt-6 flex justify-center gap-4">
        <a href="{{ route('user.register') }}" class="bg-white text-blue-600 px-6 py-3 rounded-xl">
            {{ __('contact.start_free_trial') }}
        </a>

        <a href="{{ route('landing.home') }}" class="border px-6 py-3 rounded-xl">
            {{ __('contact.back_to_home') }}
        </a>
    </div>
</section>

</main>

@endsection