{{#partial "page"}}

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

<main class="page bd-showcase bd-custom-orders" data-bd-custom-orders>
    {{> components/bd/showcase/hero title=page.title lead=(lang 'bd.showcase.custom_lead')}}

    <section class="bd-custom-orders__intro" aria-label="{{page.title}}">
        <div class="bd-custom-orders__copy">
            <p class="bd-showcase__lead">{{lang 'bd.showcase.custom_lead_sub'}}</p>
            <p>{{lang 'bd.showcase.custom_body'}}</p>
            {{#if page.content}}
                <div class="bd-showcase__content">{{{page.content}}}</div>
            {{/if}}
            <div class="bd-showcase__actions">
                {{#if page.sub_pages}}
                    {{#each page.sub_pages}}
                        <a class="bd-btn {{#if @first}}bd-btn--primary{{else}}bd-btn--outline{{/if}}" href="{{url}}">{{trim title}}</a>
                    {{/each}}
                {{else}}
                    <a class="bd-btn bd-btn--primary" href="{{lang 'bd.showcase.contact_path'}}">{{lang 'bd.showcase.custom_cta'}}</a>
                {{/if}}
            </div>
        </div>
        <aside class="bd-custom-orders__services" aria-labelledby="bd-custom-orders-services-title">
            <h2 class="bd-custom-orders__services-title" id="bd-custom-orders-services-title">{{lang 'bd.showcase.custom_services_heading'}}</h2>
            <ul class="bd-custom-orders__services-list">
                <li>{{lang 'bd.showcase.custom_service_1'}}</li>
                <li>{{lang 'bd.showcase.custom_service_2'}}</li>
                <li>{{lang 'bd.showcase.custom_service_3'}}</li>
                <li>{{lang 'bd.showcase.custom_service_4'}}</li>
                <li>{{lang 'bd.showcase.custom_service_5'}}</li>
                <li>{{lang 'bd.showcase.custom_service_6'}}</li>
                <li>{{lang 'bd.showcase.custom_service_7'}}</li>
                <li>{{lang 'bd.showcase.custom_service_8'}}</li>
            </ul>
        </aside>
    </section>

    {{!-- Sample projects: the bd-case-carousel widget goes in this region.
          custom-orders.js guarantees every card carries the "Sample project"
          label and shows the note once cards are present. --}}
    <section class="bd-custom-orders__samples" data-bd-custom-orders-samples data-sample-label="{{lang 'bd.showcase.sample_label'}}">
        {{{region name="custom_orders_samples"}}}
        <p class="bd-custom-orders__samples-note" data-bd-custom-orders-samples-note hidden>{{lang 'bd.showcase.samples_note'}}</p>
    </section>

    <section class="bd-lifecycle" aria-labelledby="bd-lifecycle-title">
        <h2 class="bd-showcase__title" id="bd-lifecycle-title">{{lang 'bd.showcase.lifecycle_title'}}</h2>
        <ol class="bd-lifecycle__steps">
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">1</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_1'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">2</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_2'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">3</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_3'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">4</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_4'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">5</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_5'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">6</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_6'}}</span><span class="bd-lifecycle__time">{{lang 'bd.showcase.lifecycle_step_6_time'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">7</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_7'}}</span><span class="bd-lifecycle__time">{{lang 'bd.showcase.lifecycle_step_7_time'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">8</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_8'}}</span><span class="bd-lifecycle__time">{{lang 'bd.showcase.lifecycle_step_8_time'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">9</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_9'}}</span><span class="bd-lifecycle__time">{{lang 'bd.showcase.lifecycle_step_9_time'}}</span></span></li>
            <li class="bd-lifecycle__step"><span class="bd-lifecycle__marker" aria-hidden="true">10</span><span class="bd-lifecycle__text"><span class="bd-lifecycle__label">{{lang 'bd.showcase.lifecycle_step_10'}}</span><span class="bd-lifecycle__time">{{lang 'bd.showcase.lifecycle_step_10_time'}}</span></span></li>
        </ol>
    </section>

    <div class="bd-showcase__region">{{{region name="page_builder_content"}}}</div>

    <section class="bd-custom-orders__faq" aria-labelledby="bd-custom-orders-faq-title">
        <h2 class="bd-showcase__title" id="bd-custom-orders-faq-title">{{lang 'bd.showcase.faq_title'}}</h2>
        <div class="bd-accordion">
            {{#if theme_settings.bd_contact_email}}
                {{> components/bd/showcase/faq-item id='start' question=(lang 'bd.showcase.faq_start_q') answer=(lang 'bd.showcase.faq_start_a' email=theme_settings.bd_contact_email)}}
            {{else}}
                {{> components/bd/showcase/faq-item id='start' question=(lang 'bd.showcase.faq_start_q') answer=(lang 'bd.showcase.faq_start_a_no_email')}}
            {{/if}}
            {{> components/bd/showcase/faq-item id='artwork' question=(lang 'bd.showcase.faq_artwork_q') answer=(lang 'bd.showcase.faq_artwork_a')}}
            {{> components/bd/showcase/faq-item id='options' question=(lang 'bd.showcase.faq_options_q') answer=(lang 'bd.showcase.faq_options_a')}}
            {{> components/bd/showcase/faq-item id='addresses' question=(lang 'bd.showcase.faq_addresses_q') answer=(lang 'bd.showcase.faq_addresses_a')}}
            {{> components/bd/showcase/faq-item id='global' question=(lang 'bd.showcase.faq_global_q') answer=(lang 'bd.showcase.faq_global_a')}}
        </div>
    </section>
</main>

{{/partial}}

{{> layout/base}}