@extends('layouts.app')

@section('title', 'گلد آرا | تماس و درخواست مشاوره')
@section('meta_description', 'برای دریافت مشاوره درباره راه اندازی فروشگاه ساز تخصصی طلا و جواهر با گلد آرا در تماس باشید.')

@push('styles')
    <style>
        .page-hero { background-image: url('{{ asset('theme/image/bg-hero.png') }}'); background-position: bottom; min-height: 72vh; }
        .contact-card, .contact-form-box, .faq-box {
            background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-radius: 28px; border: 1px solid rgba(15,16,21,.06);
            box-shadow: 0 24px 70px -40px rgba(17,18,25,.34);
        }
        .contact-card { padding: 1.8rem; height: 100%; }
        .contact-form-box, .faq-box { padding: 2rem; }
        .contact-card h5, .faq-box h5 { font-weight: 800; }
    </style>
@endpush

@section('content')
    <section class="section page-hero bg-attach-cover">
        <div class="r-container d-flex flex-column gap-3 align-items-center justify-content-center h-100">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb scrollanimation animated fadeInUp adr-5">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">خانه</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">تماس و مشاوره</li>
                </ol>
            </nav>
            <span class="sub-heading">همراه شما در مسیر فروش آنلاین طلا</span>
            <h2 class="text-center">برای بررسی نیاز کسب وکار شما، <br><span class="accent-color-5">در تماس هستیم</span></h2>
            <p class="text-center" style="max-width: 520px;">اگر می خواهید درباره استقرار، طراحی ویترین، مسیر فروش یا امکانات گلد آرا تصمیم دقیق تری بگیرید، فرم زیر بهترین نقطه شروع است.</p>
        </div>
    </section>

    <section class="section">
        <div class="r-container">
            <div class="row row-cols-xl-3 row-cols-1 g-4">
                <div class="col"><div class="contact-card text-center"><div class="icon-box mx-auto mb-3"><i class="rtmicon rtmicon-classic-phone fs-4"></i></div><h5 class="text-color fw-semibold">تماس مستقیم</h5><p class="m-0 mb-3">برای شروع سریع تر گفت وگو و بررسی اولیه نیازها با ما تماس بگیرید.</p><hr class="w-100 text-color"><h6 class="accent-color mb-0">0912-0489630</h6></div></div>
                <div class="col"><div class="contact-card text-center"><div class="icon-box mx-auto mb-3"><i class="fa-brands fa-whatsapp fs-4"></i></div><h5 class="text-color fw-semibold">واتساپ و هماهنگی سریع</h5><p class="m-0 mb-3">اگر ترجیح می دهید ابتدا پیام بفرستید، روی واتساپ پاسخگوی شما هستیم.</p><hr class="w-100 text-color"><a href="https://wa.me/989107526651" target="_blank" rel="noopener" class="accent-color">شروع گفت وگو</a></div></div>
                <div class="col"><div class="contact-card text-center"><div class="icon-box mx-auto mb-3"><i class="rtmicon rtmicon-envelope fs-4"></i></div><h5 class="text-color fw-semibold">ایمیل</h5><p class="m-0 mb-3">برای ارسال اطلاعات برند، نیازها یا هماهنگی اولیه می توانید ایمیل بزنید.</p><hr class="w-100 text-color"><h6 class="accent-color mb-0">info@gol-dara.ir</h6></div></div>
            </div>
        </div>
    </section>

    <section class="section pt-0">
        <div class="container">
            <div class="row g-4 align-items-stretch">
                <div class="col-lg-7">
                    <div class="contact-form-box" id="consult-form">
                        <span class="sub-heading mb-3">درخواست مشاوره</span>
                        <h3 class="mb-2 mt-3">فرم نیازسنجی کوتاه</h3>
                        <p class="mb-4">این فرم به ما کمک می کند متناسب با نوع فروشگاه، تعداد محصولات و مدل فروش شما، پیشنهاد دقیق تری ارائه کنیم.</p>
                        @if ($errors->any())
                            <div class="alert alert-danger mb-4">لطفاً اطلاعات فرم را کامل تر وارد کنید.</div>
                        @endif
                        <form method="post" action="{{ route('demo-request') }}" class="d-flex flex-column gap-3">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6"><input type="text" name="name" class="form-control" placeholder="نام و نام خانوادگی" value="{{ old('name') }}" required></div>
                                <div class="col-md-6"><input type="tel" name="phone" class="form-control" placeholder="شماره تماس" value="{{ old('phone') }}" required></div>
                                <div class="col-md-6"><input type="email" name="email" class="form-control" placeholder="ایمیل" value="{{ old('email') }}"></div>
                                <div class="col-md-6">
                                    <select name="business_type" class="form-select" required>
                                        <option value="">نوع کسب وکار</option>
                                        <option value="طلافروشی" @selected(old('business_type') === 'طلافروشی')>طلافروشی</option>
                                        <option value="گالری جواهر" @selected(old('business_type') === 'گالری جواهر')>گالری جواهر</option>
                                        <option value="برند طراحی و ساخت" @selected(old('business_type') === 'برند طراحی و ساخت')>برند طراحی و ساخت</option>
                                        <option value="فروش آنلاین طلا" @selected(old('business_type') === 'فروش آنلاین طلا')>فروش آنلاین طلا</option>
                                    </select>
                                </div>
                            </div>
                            <textarea name="message" rows="6" class="form-control" placeholder="کمی درباره محصولات، مدل فروش و انتظارتان از سایت بنویسید.">{{ old('message') }}</textarea>
                            <button type="submit" class="btn btn-accent py-3 d-flex flex-row gap-2 align-items-center justify-content-center"><span>ثبت درخواست مشاوره</span><i class="rtmicon rtmicon-arrow-up-right"></i></button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="faq-box h-100">
                        <span class="sub-heading mb-3">پرسش های رایج</span>
                        <div class="accordion d-flex flex-column gap-3 mt-4" id="contactFaq">
                            <div class="accordion-item"><h5 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne" aria-expanded="true" aria-controls="faqOne">آیا این سیستم فقط برای فروش طلا طراحی شده است؟</button></h5><div id="faqOne" class="accordion-collapse collapse show" data-bs-parent="#contactFaq"><div class="accordion-body">تمرکز اصلی گلد آرا روی فروشگاه های طلا، گالری های جواهر و برندهایی است که به ویترین لوکس، قیمت گذاری خاص و سفارش سازی نیاز دارند.</div></div></div>
                            <div class="accordion-item"><h5 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqTwo" aria-expanded="false" aria-controls="faqTwo">قبل از شروع، چه اطلاعاتی باید آماده داشته باشیم؟</button></h5><div id="faqTwo" class="accordion-collapse collapse" data-bs-parent="#contactFaq"><div class="accordion-body">اگر مدل فروش، تعداد تقریبی محصولات، نمونه برندینگ و نیازهای اصلی خود را بدانید، جلسه مشاوره خیلی سریع تر به نتیجه می رسد.</div></div></div>
                            <div class="accordion-item"><h5 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqThree" aria-expanded="false" aria-controls="faqThree">بعد از ارسال فرم چه اتفاقی می افتد؟</button></h5><div id="faqThree" class="accordion-collapse collapse" data-bs-parent="#contactFaq"><div class="accordion-body">درخواست شما بررسی می شود و برای هماهنگی گفت وگو، شناخت نیازها و ارائه مسیر همکاری با شما تماس می گیریم.</div></div></div>
                        </div>
                        <div class="mt-4 pt-4 border-top"><h5 class="mb-2">محدوده خدمت رسانی</h5><p class="mb-0">مشاوره و استقرار برای کسب وکارهای طلا و جواهر در سراسر ایران قابل انجام است و جلسات اولیه می تواند به صورت تلفنی یا آنلاین برگزار شود.</p></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection