<script setup lang="ts">

definePageMeta({ layout: 'header' });

const autoscroll = ref<HTMLElement>();

const x = ref<number>();
const y = ref<number>();

let mouseMoveHandler: any;

onUnmounted(() => {
    document.removeEventListener('mousemove', mouseMoveHandler);
});

onMounted(() => {
    mouseMoveHandler = function (e: MouseEvent) {
        x.value = e.screenX;
        y.value = e.screenY;
    }
    document.addEventListener('mousemove', mouseMoveHandler);
});

const blobSize = 40 * 16;

const mouseStyle = computed(() => {
    if (!x.value) return;
    if (!y.value) return;
    return `top: ${y.value - (blobSize / 2)}px; left: ${x.value - (blobSize / 2)}px; width: ${blobSize}px; height: ${blobSize}px;`
});



const email = ref<string>("");

</script>


<template>

    <div class="home relative h-full w-full bg-lyx-background px-8 py-10 overflow-x-hidden">

        <div class="headline">
            Analytics For
            <span class="text-lyx-primary"> Developers </span>
        </div>


        <div class="section">

            <div class="paragraph">
                30 Seconds Setup with One Line of Code.
                All Your Analytics in a Single AI Powered Dashboard.
            </div>

            <div class="button-container">
                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
            </div>

        </div>

        <div class="mt-8">
            <img :src="'placeholder.jpg'" alt="Placeholder">
        </div>

        <div class="text-center poppins mt-8">
            Trusted by
            <NuxtLink class="font-bold" target="_blank" to="#">NuvolAI</NuxtLink>,
            <NuxtLink class="font-bold" target="_blank" to="#">DTech</NuxtLink>,
            <NuxtLink class="font-bold" target="_blank" to="#">National Geografic (IT)</NuxtLink>,
            <NuxtLink class="font-bold" target="_blank" to="#">DeckX</NuxtLink>,
            <NuxtLink class="font-bold" target="_blank" to="#">Antichi Casali Camper Shop</NuxtLink>,
            for Data collection.
        </div>


        <div class="section">

            <div class="subtitle">
                Collect analytics, <br>easy way
            </div>

            <div class="paragraph">
                More than 10 KPIs like Page Visits, Custom Events
                Referrers and many more
            </div>


            <div class="flex justify-center items-center gap-2 text-[.8rem] mt-8">
                <LyxUiButton type="secondary"> Javascript </LyxUiButton>
                <LyxUiButton type="secondary"> Runtimes </LyxUiButton>
                <LyxUiButton type="secondary"> Events </LyxUiButton>
            </div>


            <LyxUiCard class="w-full mt-8 bg-lyx-background py-6 text-center">
                <span class="text-[#9CDCFE] menlo text-[1.1rem]">Lit</span>
                <span class="text-[#D3D3D3] menlo text-[1.1rem]">.</span>
                <span class="text-[#DCDCAA] menlo text-[1.1rem]">init</span>
                <span class="text-[#D3D3D3] menlo text-[1.1rem]">(</span>
                <span class="text-[#CE9178] menlo text-[1.1rem]">'project_id'</span>
                <span class="text-[#D3D3D3] menlo text-[1.1rem]">);</span>
            </LyxUiCard>



            <div class="poppins text-center mt-6 text-[1.1rem]">
                That’s It! You are <span class="font-bold"> Ready </span> to Collect data.
            </div>

            <div class="button-container">
                <LyxUiButton class="button" type="primary"> Start for free </LyxUiButton>
            </div>

        </div>




        <div class="section">
            <div class="subtitle">
                Plug in <br> everywhere.
            </div>

            <div class="paragraph">
                Seamless Integrations with popular
                <span class="text-[#FFCA27]">JS</span>/<span class="text-[#017ACB]">TS</span>
                runtimes like Nuxt, Deno, Next, Vue, React and many more.
            </div>

            <div class="mt-8">
                <img :src="'techs-new.png'" alt="Techs">
            </div>
        </div>


        <div class="section">

            <div class="subtitle">
                Transform DB's data in beautiful charts
            </div>

            <div class="paragraph">
                Easily connect all your databases to your dashboard like Supabase, MongoDB, Cassandra and more.
            </div>

            <div class="my-10">
                <img :src="'db-connect.png'" alt="DB-CONNECT">
            </div>

            <div class="paragraph">
                We don't only collect Analytics.
                We Agglomerate your Existing data! Showing
                Beautiful Charts!
            </div>

            <div class="mt-8">
                <img :src="'placeholder.jpg'" alt="Placeholder">
            </div>


            <div class="button-container">
                <LyxUiButton class="button" type="outline">
                    Go to live demo
                </LyxUiButton>
            </div>
        </div>


        <div class="section">

            <div class="subtitle">
                An AI data analyst available 24/7
            </div>

            <div class="paragraph">
                Take metrics-driven decision with Lit our AI agent. Generate charts chatting with Lit. 
            </div>

            <div class="mt-8">
                <img class="scale-125" :src="'ai-chat.png'" alt="Ai-Chat">
            </div>

        </div>

        <div class="section">


            <div class="subtitle">
                Our users loves Litlyx's simplicity
            </div>

            <div class="mt-10 flex flex-col gap-4">
                <Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
                </Testimonial>
                <Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
                </Testimonial>
                <Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
                </Testimonial>
                <Testimonial name="Victoria - CEO" sub="Founder" link-text="@DeckX" link="https://deckx.app"
                    text="Just one word: WOW! Easy to use. If I need to check my metrics, I open Litlyx. I love it.">
                </Testimonial>
            </div>

        </div>

        <div class="section">
            <div class="subtitle">
                Powered by <br> open-source
            </div>

            <div class="paragraph">
                Completely self-hostable with Docker.
            </div>

            <div class="mt-8 flex justify-center">
                <img class="w-[40%]" :src="'docker.png'" alt="Self-Host">
            </div>

            <div class="button-container flex-col items-center gap-4 !mt-10">
                <LyxUiButton class="button" type="outline">
                    Leave a Star on Github!
                </LyxUiButton>
                <LyxUiButton class="button" type="primary">
                    Start for free
                </LyxUiButton>
            </div>

        </div>


        <div class="section">
            <div class="subtitle">
                Why choose Litlyx
            </div>

            <div class="paragraph">
                Litlyx vs Plausible vs Google Analytics
            </div>

            <div class="button-container">
                <LyxUiButton class="button" type="primary">
                    Read more
                </LyxUiButton>
            </div>
        </div>

        <div class="section">
            <div class="subtitle">
                Update me!
            </div>

            <div class="paragraph">
                Litlyx is in beta version. We will keep you updated with our latest news.
            </div>

            <div class="flex justify-center mt-8">
                <LyxUiInput placeholder="Insert email" v-model="email" class="text-[1.1rem] w-full py-2 px-3">
                </LyxUiInput>
            </div>

            <div class="button-container">
                <LyxUiButton class="button" type="primary">
                    Keep me updated
                </LyxUiButton>
            </div>

        </div>


    </div>

</template>

<style scoped lang="scss">
.section {
    @apply mt-20
}

.button {
    @apply font-medium text-[1rem] px-6 py-2
}

.button-container {
    @apply flex justify-center mt-8
}

.headline {
    font-family: 'Poppins' !important;
    @apply font-semibold text-[3rem] text-center leading-[3.5rem]
}

.paragraph {
    font-family: 'Poppins' !important;
    @apply text-center text-lyx-text-dark mt-4 text-[1.1rem]
}

.subtitle {
    font-family: 'Poppins' !important;
    @apply text-center font-semibold text-[1.8rem]
}





.footer * {
    font-family: "Poppins";
}

.footer {
    border-style: dashed !important;
}


.blob {
    width: 100%;
    height: 100%;
    border-radius: 13rem;
    background: linear-gradient(197.37deg, #7450DB -0.38%, rgba(138, 234, 240, 0) 101.89%), linear-gradient(115.93deg, #3E88F6 4.86%, rgba(62, 180, 246, 0.33) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.7) 0%, rgba(62, 158, 246, 0.182) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, #2EE4E3 19.83%, rgba(46, 228, 227, 0) 97.33%);
    background-blend-mode: normal, normal, normal, normal, normal, normal;
    filter: blur(100px);
}



.animated-button {
    display: grid;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;
    width: 100%;

    --border-angle: 0turn; // For animation.

    --main-bg: conic-gradient(from var(--border-angle),
            rgb(17, 20, 51),
            rgb(17, 18, 34) 5%,
            rgb(17, 20, 34) 60%,
            rgb(17, 28, 51) 95%);


    border: solid 2px transparent;
    --gradient-border: conic-gradient(from var(--border-angle),
            transparent 25%,
            rgb(0, 136, 255),
            transparent 99%,
            transparent);

    background:
        // padding-box clip this background in to the overall element except the border.
        var(--main-bg) padding-box,
        // border-box extends this background to the border space
        var(--gradient-border) border-box,
        // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
        var(--main-bg) border-box;

    background-position: center center;

    animation: bg-spin 3s linear infinite;

    @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
    }

    &:hover {
        animation-play-state: paused;
    }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}
</style>