import { component$, useSignal } from "@builder.io/qwik";
import { useRelativeMouse } from "~/hooks/mouse";
import { OAUTH_LINK } from "~/lib/constants";
import GradientBorder from "../misc/GradientBorder";

export default component$(() => {
    const ref1 = useSignal<HTMLElement>();
    const mouse1 = useRelativeMouse(ref1);

    const ref2 = useSignal<HTMLElement>();
    const mouse2 = useRelativeMouse(ref2);

    return (
        <div class="flex flex-col w-full bg-gradient-to-b from-stereo/30 to-transparent overflow-x-clip select-none">
            <div class="mt-62 flex flex-col justify-center w-full h-full text-center">
                <div class="flex flex-col items-center justify-center gap-2 font-light">
                    <p class="text-6xl">
                        you bring the files, we'll bring the <span class="text-stereo">magic</span>.
                    </p>
                    <p class="text-2xl text-white/80">
                        stereo is no-bs file-host inspired by Tixte, that you'll love to use
                    </p>
                    <div class="flex gap-4 mt-1">
                        <a
                            href={OAUTH_LINK}
                            class="px-6 py-1 text-lg font-medium text-white bg-stereo rounded-full hover:text-stereo hover:bg-white transition duration-300"
                        >
                            get started
                        </a>
                        <a
                            href="discord.gg"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="px-6 py-1 text-lg font-medium text-stereo rounded-full border border-stereo hover:bg-stereo hover:text-white transition duration-300"
                        >
                            learn more
                        </a>
                    </div>
                    <div class="mt-10 flex items-center" style={{ perspective: "1000px" }}>
                        <GradientBorder
                            ref={ref1}
                            size="3px"
                            from="#ff264e"
                            to="transparent"
                            direction="to bottom"
                            style={{
                                transformStyle: "preserve-3d",
                                transformOrigin: "center center",
                                transform: `
                                    rotateX(${(mouse1.y / 120) + 30}deg)
                                    rotateY(${(-mouse1.x / 120) + 25}deg)
                                    rotateZ(-10deg)
                                `,
                            }}
                            class="rounded-2xl -mr-12"
                        >
                            <img src="dashboard 1.png" class="h-[32rem] rounded-2xl shadow-2xl shadow-stereo/10" />
                        </GradientBorder>
                        <GradientBorder
                            ref={ref2}
                            size="3px"
                            from="#ff264e"
                            to="transparent"
                            direction="to bottom"
                            style={{
                                transformStyle: "preserve-3d",
                                transformOrigin: "center center",
                                transform: `
                                    rotateX(${(mouse2.y / 120) + 30}deg)
                                    rotateY(${(-mouse2.x / 60) - 25}deg)
                                    rotateZ(10deg)
                                `,
                            }}
                            class="rounded-2xl -ml-12 shadow-2xl shadow-stereo/10"
                        >
                            <img src="dashboard 2.png" class="h-[36rem] rounded-2xl" />
                        </GradientBorder>
                    </div>
                </div>
            </div>
        </div>
    );
});