@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: 68vh; }
        .feature-service-card, .feature-detail-card, .process-card {
            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); overflow: hidden;
        }
        .feature-service-card img { width: 100%; object-fit: cover; }
        .feature-service-card .content { padding: 1.8rem; }
        .feature-grid .col { display: flex; }
        .feature-detail-card { padding: 2rem; height: 100%; width: 100%; }
        .feature-detail-card h5, .process-card h5 { font-weight: 800; }
        .process-card { padding: 1.8rem; height: 100%; }
    </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: 560px;">اینجا خبری از ابزارهای عمومی و نیمه کاره نیست؛ هر بخش از گلد آرا برای فرآیند واقعی فروش، معرفی و پیگیری محصولات طلا و جواهر طراحی شده است.</p>
        </div>
    </section>

    <section class="section">
        <div class="r-container d-flex flex-column gap-4">
            <div class="d-flex flex-column gap-3 align-items-center justify-content-center text-center mx-auto">
                <span class="sub-heading">هسته محصول</span>
                <h3 class="text-center">زیرساختی برای فروش دقیق، <span class="accent-color-5">اعتمادساز و مقیاس پذیر</span></h3>
                <p class="text-center" style="max-width: 620px;">از مدیریت محصول تا ارتباط با مشتری، گلد آرا مسیر فروش را برای تیم های کوچک و برندهای رو به رشد منظم و قابل توسعه می کند.</p>
            </div>
            <div class="row row-cols-xl-2 row-cols-1">
                <div class="col col-xl-7 mb-3">
                    <div class="feature-service-card d-flex flex-column h-100">
                        <div class="content d-flex flex-column gap-3">
                            <h5>قیمت گذاری پویا برای طلا، جواهر و سفارش های اختصاصی</h5>
                            <p class="mb-0">قواعد قیمت گذاری را بر اساس نوع محصول، وزن، اجرت، سود، تخفیف، مناسبت ها و سناریوهای فروش تعریف کنید تا تیم شما همیشه با قیمت های منظم و قابل اتکا کار کند.</p>
                            <div class="w-max-content"><a href="{{ route('contact') }}#consult-form" class="btn btn-accent"><span>درخواست مشاوره</span></a></div>
                        </div>
                        <img src="{{ asset('theme/image/card_service_01.png') }}" alt="قیمت گذاری پویا">
                    </div>
                </div>
                <div class="col col-xl-5 mb-3">
                    <div class="feature-service-card d-flex flex-column h-100">
                        <img src="{{ asset('theme/image/card_service_02.png') }}" alt="ویترین دیجیتال">
                        <div class="content d-flex flex-column gap-3">
                            <h5>ویترین دیجیتال با تمرکز بر حس لوکس و اعتماد</h5>
                            <p class="mb-0">صفحه های محصول، کالکشن ها، صفحه برند و محتواهای داستانی را طوری مدیریت کنید که برند شما در نگاه اول حرفه ای و قابل اعتماد دیده شود.</p>
                        </div>
                    </div>
                </div>
                <div class="col col-xl-5 mb-3">
                    <div class="feature-service-card d-flex flex-column h-100">
                        <img src="{{ asset('theme/image/card_service_3.png') }}" alt="سفارش و پیگیری">
                        <div class="content d-flex flex-column gap-3">
                            <h5>ثبت درخواست، سفارش سازی و پیگیری مشتری</h5>
                            <p class="mb-0">از مشاوره اولیه تا ثبت سفارش سفارشی، همه درخواست ها را با یادداشت داخلی، وضعیت پیگیری و جزئیات دقیق مدیریت کنید.</p>
                        </div>
                    </div>
                </div>
                <div class="col col-xl-7 mb-3">
                    <div class="feature-service-card d-flex flex-column h-100">
                        <div class="content d-flex flex-column gap-3">
                            <h5>گزارش گیری و هماهنگی تیم فروش آنلاین و حضوری</h5>
                            <p class="mb-0">عملکرد فروش، رفتار مشتری، کانال های موثر و وضعیت موجودی را در یک داشبورد یکپارچه ببینید و تصمیم های سریع تر و دقیق تری بگیرید.</p>
                            <div class="w-max-content"><a href="{{ route('pricing') }}" class="btn btn-accent line"><span>مسیر استقرار</span></a></div>
                        </div>
                        <img src="{{ asset('theme/image/card_service_4.png') }}" alt="گزارش گیری و داشبورد">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section pt-0">
        <div class="container">
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 feature-grid">
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-gem"></i></div><h5 class="mb-2">مدیریت دقیق مشخصات محصول</h5><p class="mb-0">ثبت وزن، عیار، اجرت، سنگ، متریال و زمان تحویل در کنار عکس و ویدیو برای هر محصول یا سفارش اختصاصی.</p></div></div>
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-bullhorn"></i></div><h5 class="mb-2">کمپین، پیشنهاد ویژه و لیدسازی</h5><p class="mb-0">صفحات کمپین، فرم های مشاوره و CTAهای هدفمند برای تبدیل بازدیدکننده به مشتری واقعی و آغاز گفت وگو با تیم فروش.</p></div></div>
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-link"></i></div><h5 class="mb-2">یکپارچگی و توسعه پذیری</h5><p class="mb-0">ساختار آماده برای اتصال ابزارهای ارتباطی، حسابداری، تحلیل و فرآیندهای داخلی با توجه به نیاز برند شما.</p></div></div>
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-magnifying-glass-chart"></i></div><h5 class="mb-2">محتوای سئو محور برای ویترین آنلاین</h5><p class="mb-0">ساختار صفحه ها و معرفی محصول ها طوری طراحی می شود که علاوه بر زیبایی، در جذب ترافیک هدفمند هم موثر باشد.</p></div></div>
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-mobile-screen"></i></div><h5 class="mb-2">تجربه روان در موبایل و دسکتاپ</h5><p class="mb-0">کاربران بخش زیادی از تصمیم خرید را در موبایل می گیرند؛ برای همین تجربه کاربری شما روی همه دستگاه ها هماهنگ می ماند.</p></div></div>
                <div class="col"><div class="feature-detail-card"><div class="icon-box mb-3"><i class="fa-solid fa-headset"></i></div><h5 class="mb-2">مسیر استقرار همراه با تحلیل نیاز</h5><p class="mb-0">هر برند، مدل فروش متفاوتی دارد. قبل از اجرا، نیازها و سناریوی مناسب شما بررسی می شود تا تصمیم دقیقی بگیرید.</p></div></div>
            </div>
        </div>
    </section>

    <section class="section section-soft">
        <div class="container">
            <div class="text-center mb-5">
                <span class="sub-heading mb-4">فرآیند اجرا</span>
                <h3 class="mt-3">چطور امکانات را متناسب با کسب وکار شما می چینیم؟</h3>
            </div>
            <div class="row g-4">
                <div class="col-md-3"><div class="process-card text-center"><div class="icon-box mx-auto mb-3"><i class="fa-solid fa-comments"></i></div><h5>۱. جلسه کشف نیاز</h5><p class="mb-0">نوع محصولات، مدل فروش، نقاط ضعف فعلی و هدف رشد شما بررسی می شود.</p></div></div>
                <div class="col-md-3"><div class="process-card text-center"><div class="icon-box mx-auto mb-3"><i class="fa-solid fa-object-group"></i></div><h5>۲. طراحی ساختار</h5><p class="mb-0">ماژول ها، مسیرهای کاربر، فرم ها و چیدمان ویترین متناسب با برند شما تعریف می شود.</p></div></div>
                <div class="col-md-3"><div class="process-card text-center"><div class="icon-box mx-auto mb-3"><i class="fa-solid fa-gear"></i></div><h5>۳. استقرار و تنظیم</h5><p class="mb-0">پنل، صفحات فروش و فرایندهای تیمی آماده می شوند تا کار روزانه شما روان تر پیش برود.</p></div></div>
                <div class="col-md-3"><div class="process-card text-center"><div class="icon-box mx-auto mb-3"><i class="fa-solid fa-chart-simple"></i></div><h5>۴. بهینه سازی رشد</h5><p class="mb-0">پس از شروع، روی بهبود تجربه خرید، لیدسازی و نرخ تبدیل تمرکز می کنیم.</p></div></div>
            </div>
        </div>
    </section>
@endsection