@extends('layouts/layout')

@section('title', "QBio Pro | Professional Regenerative Treatment for Spas & Clinics | Quintessence Biologics")
@section('page-description', 'Introducing QBio Pro by Quintessence Biologics—an advanced regenerative solution exclusively for trained professionals in licensed spas and aesthetic clinics. Enhance post-procedure recovery with bioactive biomolecules derived from human umbilical cord and amniotic membrane tissues.')
@section('page-keywords', 'QBio Pro, Professional skincare, Regenerative treatment, Licensed spas, Aesthetic clinics, Post-procedure recovery, Bioactive biomolecules, Exosomes, Umbilical cord derived, Amniotic membrane extract, Skin rejuvenation, Laser resurfacing recovery, Microneedling enhancement, Chemical peel recovery, Advanced aesthetics, Dermatologically tested, Spa professionals, Skin healing solutions, Professional-grade skincare, Skin regeneration, Quintessence Biologics')

@section('page-style')
@endsection

@section('page-script')
<script src="{{asset('assets/js/preorder.js')}}"></script>
<script src="{{asset('assets/js/product-detail-page.js')}}"></script>
@endsection

@section('content')
    <div class="each-page product-detail-page">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">QBio Pro</li>
                </ol>
            </nav>

            <div class="introduce-wrapper g-5">
                <div class="about-img-wrapper pt-4 text-center">
                    <img src="{{asset('assets/imgs/goods-pro.png')}}" class="about-img w-100">
                </div>
                <div class="text-content-wrapper">
                    <h1 class="fs-72 fw-strong mb-24">QBIO PRO</h1>
                    <p class="fs-18 mb-24">Exclusively designed for use by trained professionals in licensed spas and aesthetic clinics</p>
                    <div class="d-block d-md-flex gap-4">
                        <div class="goods-spec mb-3">
                            Compatible with all skin types
                        </div>
                        <div class="goods-spec mb-3">
                            Dermatologically tested
                        </div>
                    </div>

                    <hr>

                    <h6 class="fs-18 color-translucent-5 mb-32">POST-PROCEDURE APPLICATION FOR</h6>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="40" viewBox="0 0 40 40">
                                    <use xlink:href="#icon-resurfacing"></use>
                                </svg>
                                <label>Laser Resurfacing</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="48" viewBox="0 0 40 48">
                                    <use xlink:href="#icon-skin_rejuvenation"></use>
                                </svg>
                                <label>Laser Skin Rejuvenation</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="41" viewBox="0 0 40 41">
                                    <use xlink:href="#icon-microneedling"></use>
                                </svg>
                                <label>Microneedling</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="48" viewBox="0 0 40 48">
                                    <use xlink:href="#icon-microdermabrasion"></use>
                                </svg>
                                <label>Microdermabrasion</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="41" viewBox="0 0 40 41">
                                    <use xlink:href="#icon-chemical"></use>
                                </svg>
                                <label>Chemical Peels</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="31" viewBox="0 0 40 31">
                                    <use xlink:href="#icon-acne_blue_light"></use>
                                </svg>
                                <label>Acne Blue Light Therapy</label>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="goods-property">
                                <svg width="40" height="37" viewBox="0 0 40 37">
                                    <use xlink:href="#icon-thermage"></use>
                                </svg>
                                <label>Thermage</label>
                            </div>
                        </div>

                        <div class="col-sm-6 d-flex align-items-center">
                            <div class="goods-property  mb-0">
                                <label>And many more...</label>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="row g-0">
                        <div class="col-6 mb-sm-0">
                            <label class="fs-18 color-translucent-5 mb-3">PRICE</label>
                            <h2 class="fw-bold fs-48-important mb-0">${{config('variables.pro_price')}}</h2>
                        </div>
                        <div class="col-6 mb-sm-0">
                            <label class="fs-18 color-translucent-5 mb-3">PREORDER PRICE</label>
                            <h2 class="fw-bold fs-48-important mb-0">
                                <label class="fs-16 fw-regular text-decoration-through">${{config('variables.pro_price')}}</label>
                                ${{config('variables.pro_preorder_price')}}
                            </h2>
                        </div>
                    </div>

                    <hr>

                    <h4 class="text-center fw-bold fs-32-important">Due today ${{config('variables.due_today_price')}}</h4>
                    <p class="color-translucent-4 text-center">Fully refundable</p>

                    <hr>

                    <button class="btn btn-primary btn-lg w-100 mb-24 preorder-btn" data-item="pro">Pre-Order</button>
                    <p class="fs-18 mb-3">Anticipated delivery date for the next batch: {{(new DateTime($config->estimated_delivery_date))->format('F d, Y');}}*</p>
                    <p class="fs-14 color-translucent-5">As demand increases, anticipated delivery date may change for later preorders</p>

                    <hr>

                    <h5 class="mb-24 fw-regular">PRODUCT DETAILS</h5>

                    <h6 class="fs-18 fw-regular color-translucent-5 mb-3">MAIN INGREDIENT</h6>
                    <p class="fs-18 mb-24">Human umbilical cord and amniotic membrane derived regenerative bioactive biomolecule complex.</p>
                    
                    <h6 class="fs-18 fw-regular color-translucent-5 mb-3">PHYSICAL STATE</h6>
                    <p class="fs-18 mb-24">Uniformly translucent to slightly opalescent ultra-frozen solution.</p>

                    <h6 class="fs-18 fw-regular color-translucent-5 mb-3">STORAGE CONDITION</h6>
                    <p class="fs-18 mb-24">Store at or below -65 °C.</p>

                    <h6 class="fs-18 fw-regular color-translucent-5 mb-3">WHATS IN THE BOX</h6>
                    <ul class="fs-18 mb-32">
                        <li>QBio Pro - 1</li>
                        <li>QBio Pro Certificate of Analysis - 1</li>
                    </ul>

                    <a class="btn btn-lg btn-outline-primary mb-24 w-100" href="{{ asset('pdfs/QBio-Elixir-Preclinical-Insights.pdf') }}" target="_blank">Pre-Clinical Results</a>
                    <form class="view-certificate-form" data-goods="QBio Pro">
                        <div class="form-group d-block d-md-flex gap-4">
                            <input class="form-control form-control-outline certificate-product-id mb-24 mb-md-0" type="text" placeholder="Enter product ID for Certificate">
                            <button class="btn btn-lg btn-outline-primary text-nowrap view-certificate-btn w-100 w-md-auto" type="button">
                                View
                                <i class="fas fa-spinner fa-spin d-none ms-2"></i>
                            </button>
                        </div>
                        <div class="text-danger certificate-error-msg mt-3 ms-4 d-none">Invalid Product ID.</div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('_partials/_modals/modal-certificate-pro')

    @include('_partials/_modals/modal-preorder')
    @include('_partials/_modals/modal-stripe-order')
@endsection