---
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/

import { DoesItAPI } from '~/helpers/api/client.js'

import Layout from '../layouts/default.astro'
import BgPlayer from '~/src/components/video/bg-player.astro'
import LinkButton from '~/components/link-button.vue'

const videosPage = await DoesItAPI.kind.tv(1).get()

const video = videosPage.items[0]

console.log('videos', video)

---
<Layout
	headOptions={ {
        title: `Benchmarks for ${ global.$config.processorsVerbiage } Processors and Apple Silicon - Does It ARM`,
        description: `Apple Silicon benchmark, performance, and compatibility videos for Macs using the ${ global.$config.processorsVerbiage } processors.`,
        // meta,
        // link,
        // structuredData: this.structuredData,

        // domain,
        pathname: '/benchmarks',
    } }
>

    <main class="container relative md:static overflow-hidden md:overflow-visible pb-16">
        <div class="flex flex-col items-center text-center space-y-12">
            <BgPlayer
                video={ video }
                classes="absolute overflow-hidden w-2x-screen md:w-full pointer-events-none"
            />

            <div class="page-heading flex justify-start w-full">
                <h1 class="title text-2xl leading-tight mt-12 mb-6">
                    Benchmarks
                </h1>
            </div>

            <div class="line-separator border-white border-t-2 mb-12" />

            <a
                href={ video.endpoint }
            >
                <div
                    class="relative flex flex-col w-full justify-center items-center space-y-8 py-16 md:pt-0 md:pb-12 md:px-10"
                >
                    <div
                        class="play-circle w-16 h-16 bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease"
                    >
                        <svg
                            viewBox="0 0 18 18"
                            style="width:24px;height:24px;margin-left:3px"
                        >
                            <path
                                fill="currentColor"
                                d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
                            />
                        </svg>
                    </div>
                    <h2 class="title text-lg md:text-2xl font-bold">
                        { video.name }
                    </h2>
                </div>
            </a>

            <!-- <div
                class="features-apps w-full"
            >
                <hr class="w-full" >
                <div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
                    <LinkButton
                        v-for="app in featuredApps"
                        href={ "app.endpoint" }
                        class="inline-block text-xs rounded-lg py-1 px-2"
                        class-groups={{
                            shadow: 'neumorphic-shadow-inner'
                        }}
                    >{ app.name }</LinkButton>
                </div>
            </div> -->


            { /* <div
                v-for="(row, key) in videoRows"
                class={ `${ key }-videos w-full max-w-4xl` }
            >
                <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">
                    { row.heading }
                </h2>
                <!-- <pre class="text-left">{{ benchmarkVideos }}</pre> -->
                <VideoRow
                    videos={ "row.videos" }
                />
            </div> */ }

        </div>
    </main>

	<!--

	You can also use imported framework components directly in your markup!

	Note: by default, these components are NOT interactive on the client.
	The `:visible` directive tells Astro to make it interactive.

	See https://docs.astro.build/core-concepts/component-hydration/

	-->

</Layout>