@extends('layouts/layout')

@section('title', "Buy Now | Quintessence Biologics Regenerative Skincare & Haircare")
@section('page-description', "Secure your access to Quintessence Biologics' regenerative skincare and haircare products. Preorder today to be among the first to experience advanced rejuvenation with umbilical cord-derived growth factors.")
@section('page-keywords', 'Buy regenerative skincare, Buy regenerative haircare, Buy exosomes, Buy peptides, Buy growthfactors, Quintessence Biologics preorder, Buy Umbilical cord growth factors, Buy Amniotic membrane bioactives, Buy Advanced skincare, Limited batch beauty products, Buy Next-gen skincare, Buy Skin rejuvenation, Buy Hair regeneration products, Buy Bioactive molecules, Buy Science-backed beauty, Secure your access, Early access skincare, Exclusive skincare products')

@section('page-style')
@endsection

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

@section('content')
    <div class="preorder-page">
        <div class="container">
            <div class="description-wrapper text-center">
                <p class="mw-md fs-20">
                    At Quintessence Biologics, our commitment to excellence means we manufacture our products in small, carefully controlled batches. 
                    <br>Preordering secures your priority access to our next batch, guaranteeing you're among the first to experience this advanced regeneration.
                </p>
                <div class="description-date-wrapper">
                    <label class="delivery-date-label d-flex align-items-center mx-auto fs-14 fs-md-16">
                        <div class="delivery-date-dot"></div>
                        Anticipated delivery date for the next batch
                    </label>
                    <h1 class="fw-strong py-4">{{(new DateTime($config->estimated_delivery_date))->format('F d, Y');}}</h1>
                    <p>*As demand increases, anticipated delivery date may change for later preorders</p>
                </div>
            </div>
            <div class="goods-wrapper">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="goods-item">
                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-pro'])}}">
                                <h4 class="text-center goods-title">QBio Pro</h4>
                            </a>
                            <div class="goods-img">
                                <a href="{{route('product-detail-page',  ['goods_str' => 'qbio-pro'])}}">
                                    <img src="{{asset('assets/imgs/goods-pro.png')}}" class="w-100">
                                </a>
                            </div>
                            <div class="goods-description-wrapper">
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Price</label>
                                    <label class="goods-specificity-detail">${{config('variables.pro_price')}}</label>
                                </div>
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Preorder</label>
                                    <label>
                                        <label class="goods-specificity-detail-fake">${{config('variables.pro_price')}}</label>
                                        <label class="goods-specificity-detail">${{config('variables.pro_preorder_price')}}</label>
                                    </label>
                                </div>
                            </div>
                            <h4 class="fw-bold text-center">Due today ${{config('variables.due_today_price')}}</h4>
                            <p class="text-center color-translucent-4 fs-16 pb-3 mb-4">Fully refundable</p>
                            <div>
                                <button class="btn btn-lg btn-primary mb-3 w-100 preorder-btn" data-item="pro">Pre-Order</button>
                                <a class="btn btn-lg btn-outline-primary d-none d-lg-block w-100" href="#">See Pre-Clinical Results</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="goods-item">
                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-elixir'])}}">    
                                <h4 class="text-center goods-title">QBio Elixir</h4>
                            </a>
                            <div class="goods-img">
                                <a href="{{route('product-detail-page',  ['goods_str' => 'qbio-elixir'])}}">
                                    <img src="{{asset('assets/imgs/goods-elixir.png')}}" class="w-100">
                                </a>
                            </div>
                            <div class="goods-description-wrapper">
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Price</label>
                                    <label class="goods-specificity-detail">${{config('variables.elixir_price')}}</label>
                                </div>
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Preorder</label>
                                    <label>
                                        <label class="goods-specificity-detail-fake">${{config('variables.elixir_price')}}</label>
                                        <label class="goods-specificity-detail">${{config('variables.elixir_preorder_price')}}</label>
                                    </label>
                                </div>
                            </div>
                            <h4 class="fw-bold text-center">Due today ${{config('variables.due_today_price')}}</h4>
                            <p class="text-center color-translucent-4 fs-16 pb-3 mb-4">Fully refundable</p>
                            <div>
                                <button class="btn btn-primary btn-lg mb-3 w-100 preorder-btn" data-item="elixir">Pre-Order</button>
                                <a class="btn btn-outline-primary btn-lg d-none d-lg-block w-100" href="#">See Pre-Clinical Results</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="goods-item">
                            <a class="text-white text-decoration-none" href="{{route('product-detail-page',  ['goods_str' => 'qbio-gro'])}}">
                                <h4 class="text-center goods-title">QBio Gro</h4>
                            </a>
                            <div class="goods-img">
                                <a href="{{route('product-detail-page',  ['goods_str' => 'qbio-gro'])}}">
                                    <img src="{{asset('assets/imgs/goods-gro.png')}}" class="w-100">
                                </a>
                            </div>
                            <div class="goods-description-wrapper">
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Price</label>
                                    <label class="goods-specificity-detail">${{config('variables.gro_price')}}</label>
                                </div>
                                <div class="goods-description-item">
                                    <label class="goods-specificity color-translucent-4">Preorder</label>
                                    <label>
                                        <label class="goods-specificity-detail-fake">${{config('variables.gro_price')}}</label>
                                        <label class="goods-specificity-detail">${{config('variables.gro_preorder_price')}}</label>
                                    </label>
                                </div>
                            </div>
                            <h4 class="fw-bold text-center">Due today ${{config('variables.due_today_price')}}</h4>
                            <p class="text-center color-translucent-4 fs-16 pb-3 mb-4">Fully refundable</p>
                            <div>
                                <button class="btn btn-primary btn-lg mb-3 w-100 preorder-btn" data-item="gro">Pre-Order</button>
                                <a class="btn btn-outline-primary btn-lg d-none d-lg-block w-100" href="#">See Pre-Clinical Results</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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