@extends('front.front_layouts')

@section('content')
    <!-- Breadcrumb Hero -->
    <section class="hero-section">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        <div class="hero-content">
            <h1 class="hero-heading animate-on-scroll">
                {{ $frontSetting->contact_text ?? 'Contact Us' }}
            </h1>

            <div class="hero-divider animate-on-scroll">
                <span class="hero-divider-thin"></span>
                <span class="hero-divider-thick"></span>
                <span class="hero-divider-thin"></span>
            </div>

            <nav class="breadcrumb-pill animate-on-scroll" aria-label="Breadcrumb">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                <a href="{{ route('front.index') }}"
                    class="link-muted">{{ $frontSetting->home_text ?? 'Home' }}</a>
                <svg class="breadcrumb-separator" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
                <span class="text-foreground font-semibold">{{ $frontSetting->contact_text ?? 'Contact Us' }}</span>
            </nav>
        </div>
    </section>

    <!-- Contact Info Cards -->
    <section class="content-section">
        <!-- Background decorative elements -->
        <div
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-transparent rounded-full blur-3xl pointer-events-none">
        </div>

        <div class="max-w-5xl mx-auto">
            <!-- Section Header -->
            <div class="section-header animate-on-scroll">
                <div class="section-accent">
                    <span class="section-accent-dot"></span>
                    <span class="section-accent-line-right"></span>
                    <span class="section-accent-text">
                        {{ $frontSetting->contact_text ?? 'Contact Us' }}</span>
                    <span class="section-accent-line-left"></span>
                    <span class="section-accent-dot"></span>
                </div>
                <h2 class="section-title text-anime">{{ $frontSetting->contact_title ?? __('front.howCanWeHelp') }}</h2>
                <p class="section-subtitle">{{ $frontSetting->contact_description ?? __('front.chooseWayToConnect') }}</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
                <!-- Send Email Card -->
                <div class="contact-info-card animate-on-scroll" style="--delay: 0s">
                    <div class="contact-info-card-inner">
                        <div class="contact-info-glow"></div>
                        <div class="contact-info-icon">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                            </svg>
                        </div>
                        <span
                            class="contact-info-label">{{ $frontSetting->contact_form_email_text ?? __('front.emailUs') }}</span>
                        <h3 class="text-xl font-bold text-foreground mb-2">
                            {{ isset($frontSetting->contact_email_text) ? $frontSetting->contact_email_text : __('front.sendEmail') }}
                        </h3>
                        <a href="mailto:{{ $frontSetting->contact_email ?? 'contact@example.com' }}"
                            class="contact-info-link">
                            {{ $frontSetting->contact_email ?? 'contact@example.com' }}
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Call Us Card -->
                <div class="contact-info-card contact-info-card--featured animate-on-scroll" style="--delay: 0.1s">
                    <div class="contact-info-card-inner">
                        <div class="contact-info-glow"></div>
                        <div class="contact-info-icon contact-info-icon--featured">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                            </svg>
                        </div>
                        <span class="contact-info-label">
                            {{ $frontSetting->contact_form_phone_text ?? __('front.callUs') }}
                        </span>
                        <h3 class="text-xl font-bold text-foreground mb-2">
                            {{ isset($frontSetting->contact_phone_text) ? $frontSetting->contact_phone_text : __('front.phoneSupport') }}
                        </h3>
                        <a href="tel:{{ $frontSetting->contact_phone ?? '+1234567890' }}" class="contact-info-link">
                            {{ $frontSetting->contact_phone ?? '+1 234 567 890' }}
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Address Card -->
                <div class="contact-info-card animate-on-scroll" style="--delay: 0.2s">
                    <div class="contact-info-card-inner">
                        <div class="contact-info-glow"></div>
                        <div class="contact-info-icon">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                            </svg>
                        </div>
                        <span
                            class="contact-info-label">{{ $frontSetting->contact_address_text ?? __('front.visitUs') }}</span>
                        <h3 class="text-xl font-bold text-foreground mb-2">
                            {{ isset($frontSetting->contact_address_text) ? $frontSetting->contact_address_text : __('front.ourOffice') }}
                        </h3>
                        <span class="contact-info-link contact-info-link--static">
                            {{ $frontSetting->contact_address ?? '1 Street, City, 38401' }}
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Get in Touch Section -->
    <section class="content-section">
        <!-- Decorative background -->
        <div
            class="absolute top-0 right-0 w-[500px] h-[500px] bg-gradient-to-bl from-blue-500/5 via-purple-500/5 to-transparent rounded-full blur-3xl pointer-events-none">
        </div>
        <div
            class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-gradient-to-tr from-purple-500/5 via-blue-500/3 to-transparent rounded-full blur-3xl pointer-events-none">
        </div>

        <!-- Floating decorative dots -->
        <div class="contact-float-dot absolute top-[15%] right-[8%] w-3 h-3 rounded-full bg-[hsl(var(--primary)/0.3)]">
        </div>
        <div class="contact-float-dot absolute bottom-[20%] left-[5%] w-4 h-4 rounded-full border-2 border-[hsl(var(--primary)/0.2)]"
            style="animation-delay: 1s;"></div>
        <div class="contact-float-dot absolute top-[40%] left-[3%] w-2 h-2 rounded-full bg-[hsl(var(--primary)/0.2)]"
            style="animation-delay: 2s;"></div>

        <div class="max-w-6xl mx-auto">
            <!-- Section Header -->
            <div class="section-header animate-on-scroll">
                <div class="section-accent">
                    <span class="section-accent-dot"></span>
                    <span class="section-accent-line-right"></span>
                    <span class="section-accent-text">{{ isset($frontSetting->contact_form_description)
                            ? $frontSetting->contact_form_description
                            : __('front.contact') }}</span>
                    <span class="section-accent-line-left"></span>
                    <span class="section-accent-dot"></span>
                </div>
                <h2 class="section-title text-anime">
                    {{ isset($frontSetting->contact_form_title) ? $frontSetting->contact_form_title : __('front.getInTouch') }}
                </h2>
                <p class="section-subtitle">
                    {{ $frontSetting->contact_form_heading ?? __('front.getInTouchSubtitle') }}
                </p>
            </div>

            <!-- Two Column: Image | Form -->
            <div class="contact-form-wrapper animate-on-scroll">
                <div class="contact-form-inner">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
                        <!-- Left: Image Side -->
                        <div
                            class="contact-image-side relative overflow-hidden rounded-t-[calc(1.5rem-1px)] lg:rounded-l-[calc(1.5rem-1px)] lg:rounded-tr-none min-h-[320px] lg:min-h-[unset]">
                            @if (isset($frontSetting->contact_form_background_image_url) && $frontSetting->contact_form_background_image_url)
                                <img src="{{ $frontSetting->contact_form_background_image_url }}" alt="Contact us"
                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
                            @else
                                <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800&q=80"
                                    alt="Contact us"
                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
                            @endif
                            <div
                                class="absolute inset-0 bg-gradient-to-b from-[hsl(222.2,84%,4.9%,0.6)] via-[hsl(var(--primary)/0.4)] to-[hsl(222.2,84%,4.9%,0.85)]">
                            </div>

                            <!-- Decorative grid pattern overlay -->
                            <div class="absolute inset-0 opacity-[0.04]"
                                style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 40px 40px;">
                            </div>

                            <div class="relative z-10 p-8 sm:p-10 lg:p-12 flex flex-col justify-between h-full">
                                <div>
                                    <span
                                        class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-[13px] font-semibold text-white mb-6">
                                        <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
                                        {{ $frontSetting->contact_form_description ?? __('front.weAreOnline') }}
                                    </span>
                                    <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white leading-tight mb-4">
                                        {{ $frontSetting->contact_form_title ?? 'Get in touch' }}
                                    </h3>
                                    <p class="text-[15px] text-white/70 leading-relaxed max-w-sm">
                                        {{ $frontSetting->contact_form_heading ?? '' }}
                                    </p>
                                </div>

                                <div class="mt-10 space-y-4">
                                    <div class="contact-image-info-item flex items-center gap-3.5">
                                        <span
                                            class="flex-shrink-0 w-11 h-11 rounded-xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center transition-transform duration-300 hover:scale-110">
                                            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                                            </svg>
                                        </span>
                                        <div>
                                            <p
                                                class="text-[11px] font-medium uppercase tracking-wider text-white/50 mb-0.5">
                                                {{ $frontSetting->contact_form_email_text ?? 'Email' }}</p>
                                            <p class="text-[15px] font-semibold text-white">
                                                {{ $frontSetting->contact_email ?? 'contact@example.com' }}</p>
                                        </div>
                                    </div>
                                    <div class="contact-image-info-item flex items-center gap-3.5">
                                        <span
                                            class="flex-shrink-0 w-11 h-11 rounded-xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center transition-transform duration-300 hover:scale-110">
                                            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                                            </svg>
                                        </span>
                                        <div>
                                            <p
                                                class="text-[11px] font-medium uppercase tracking-wider text-white/50 mb-0.5">
                                                {{ $frontSetting->contact_form_phone_text ?? 'Phone' }}</p>
                                            <p class="text-[15px] font-semibold text-white">
                                                {{ $frontSetting->contact_phone ?? '+1 234 567 890' }}</p>
                                        </div>
                                    </div>

                                    <!-- Social links row -->
                                    @if (
                                        (isset($frontSetting->twitter_link) && $frontSetting->twitter_link) ||
                                            (isset($frontSetting->linkedin_link) && $frontSetting->linkedin_link) ||
                                            (isset($frontSetting->instagram_link) && $frontSetting->instagram_link) ||
                                            (isset($frontSetting->facebook_link) && $frontSetting->facebook_link))
                                        <div class="flex items-center gap-2.5 pt-4 mt-4 border-t border-white/10">
                                            <span
                                                class="text-[12px] font-medium uppercase tracking-wider text-white/40 mr-2">{{ __('front.followUs') }}</span>
                                            @if (isset($frontSetting->facebook_link) && $frontSetting->facebook_link)
                                                <a href="{{ $frontSetting->facebook_link }}"
                                                    class="w-9 h-9 rounded-lg bg-white/10 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300">
                                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                        <path
                                                            d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                                    </svg>
                                                </a>
                                            @endif
                                            @if (isset($frontSetting->twitter_link) && $frontSetting->twitter_link)
                                                <a href="{{ $frontSetting->twitter_link }}"
                                                    class="w-9 h-9 rounded-lg bg-white/10 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300">
                                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                        <path
                                                            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                                                    </svg>
                                                </a>
                                            @endif
                                            @if (isset($frontSetting->linkedin_link) && $frontSetting->linkedin_link)
                                                <a href="{{ $frontSetting->linkedin_link }}"
                                                    class="w-9 h-9 rounded-lg bg-white/10 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300">
                                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                        <path
                                                            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                                                    </svg>
                                                </a>
                                            @endif
                                            @if (isset($frontSetting->instagram_link) && $frontSetting->instagram_link)
                                                <a href="{{ $frontSetting->instagram_link }}"
                                                    class="w-9 h-9 rounded-lg bg-white/10 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300">
                                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                                        <path
                                                            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
                                                    </svg>
                                                </a>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Right: Form Side -->
                        <div class="p-8 sm:p-10 lg:p-12">
                            <div class="mb-8">
                                <h3 class="text-xl font-bold text-foreground mb-2">
                                    {{ $frontSetting->contact_form_title ?? 'Get in touch' }}
                                </h3>
                                <p class="text-[14px] text-muted-foreground">
                                    {{ $frontSetting->contact_form_heading ?? '' }}
                                </p>
                            </div>

                            {{ html()->form('POST', '')->class(['ajax-form'])->id('ajax-contact-form')->open() }}
                            <div id="alert"></div>
                            <div class="contact-us-div space-y-5">
                                <!-- Name -->
                                <div class="form-group contact-field-group">
                                    <label for="name"
                                        class="form-label">
                                        {{ isset($frontSetting->contact_form_name_text) ? $frontSetting->contact_form_name_text : __('front.name') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                                            </svg>
                                        </span>
                                        <input type="text" id="name" name="name"
                                            placeholder="{{ isset($frontSetting->contact_form_name_text) ? $frontSetting->contact_form_name_text : __('front.yourName') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="form-group contact-field-group">
                                    <label for="email"
                                        class="form-label">
                                        {{ isset($frontSetting->contact_form_email_text) ? $frontSetting->contact_form_email_text : __('front.email') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                                            </svg>
                                        </span>
                                        <input type="email" id="email" name="email"
                                            placeholder="{{ isset($frontSetting->contact_form_email_text) ? $frontSetting->contact_form_email_text : __('front.yourEmail') }}"
                                            class="form-control contact-input contact-input--icon" />
                                    </div>
                                </div>

                                <!-- Message -->
                                <div class="form-group contact-field-group">
                                    <label for="message"
                                        class="form-label">
                                        {{ isset($frontSetting->contact_form_message_text)
                                            ? $frontSetting->contact_form_message_text
                                            : __('front.message') }}
                                        <span class="text-red-400">*</span>
                                    </label>
                                    <div class="relative">
                                        <span class="contact-input-icon contact-input-icon--textarea">
                                            <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                            </svg>
                                        </span>
                                        <textarea id="message" name="message" rows="5"
                                            placeholder="{{ isset($frontSetting->contact_form_message_text) ? $frontSetting->contact_form_message_text : __('front.yourMessage') }}"
                                            class="form-control contact-input contact-input--icon resize-none"></textarea>
                                    </div>
                                </div>

                                <!-- Submit -->
                                <button type="submit"
                                    class="contact-submit-btn btn-primary w-full inline-flex items-center justify-center gap-2.5 px-8 py-3.5 text-[15px] font-semibold rounded-xl group"
                                    onclick="updateContactForm(); return false;">
                                    <span>{{ isset($frontSetting->contact_form_send_message_text)
                                        ? $frontSetting->contact_form_send_message_text
                                        : __('front.sendMessage') }}</span>
                                    <svg class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                                    </svg>
                                </button>
                            </div>
                            {{ html()->form()->close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('front.sections.call_to_action')
@endsection

@section('scripts')
    <script>
        "use strict";

        function updateContactForm() {
            art.sendXhr({
                url: '{{ route('front.submit-contact-form') }}',
                type: "POST",
                file: true,
                container: "#ajax-contact-form",
                disableButton: true,
                messageLocation: 'inline',
                success: function(response) {
                    if (response.status == 'success') {
                        jQuery('.contact-us-div').remove();
                    }
                }
            });
        }
    </script>
@endsection