import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { createBlock } from "../create";
import { Button } from "@wp2/ui/dist/button";
import { Image } from "@wp2/ui/dist/image";
import { Text } from "@wp2/ui/dist/text";
import { useLocalize } from "@wp2/helpers/dist/client";
import { useEffect, useState } from "react";
const Item = ({ title, number, field, src, iconField, variant, }) => {
    return (<div className="flex flex-col gap-3 w-full items-center text-center md:items-start md:text-left">
      <Image height={40} width={40} src={src || ""} alt={title || "Icon"} data-tina-field={iconField} className=""/>
      <Text variant={variant} data-tina-field={field}>
        {number}. {title}
      </Text>
    </div>);
};
const useMovement = () => {
    const [x, setX] = useState(0);
    const [y, setY] = useState(0);
    useEffect(() => {
        const handleMouseMove = (e) => {
            const { clientX, clientY } = e;
            setX(-clientX / 100);
            setY(-clientY / 100);
        };
        window.addEventListener("mousemove", handleMouseMove);
        return () => window.removeEventListener("mousemove", handleMouseMove);
    }, []);
    return { x, y };
};
export const Hero = createBlock(({ data }) => {
    const localize = useLocalize();
    const { x, y } = useMovement();
    return (<Section id="hero" className="min-h-screen justify-between" className2="-mt-mobile-header md:-mt-header">
      <div></div>
      <div className="grid md:grid-cols-2 gap-10 md:gap-0 w-full mt-mobile-header md:mt-header h-full">
        <div className="flex flex-col h-full gap-10 pb-5 items-center justify-center">
          <div className="flex flex-col gap-10 w-full">
            <div className="flex flex-col">
              <Text variant={data.welcome?.variant} data-tina-field={tinaField(data, "welcome")}>
                {localize(data.welcome?.text)}
              </Text>
              <Text variant={data.title?.variant} data-tina-field={tinaField(data, "title")}>
                {localize(data.title?.text)}
              </Text>
              <Text variant={data.subtitle?.variant} data-tina-field={tinaField(data, "subtitle")}>
                {localize(data.subtitle?.text)}
              </Text>
            </div>
            <div className="flex gap-6">
              <Button data-tina-field={tinaField(data, "button1")} href={data.button1?.url} variant={data.button1?.variant}>
                {localize(data.button1?.label)}
              </Button>
              <Button data-tina-field={tinaField(data, "button2")} href={data.button2?.url} variant={data.button2?.variant}>
                {localize(data.button2?.label)}
              </Button>
            </div>
          </div>
        </div>
        <div className="flex justify-end order-first md:order-last w-full items-center">
          <Image priority height={552} width={552} style={{ transform: `translate(${x}px, ${y}px)` }} alt="Hero image" className="h-[280px] w-[280px] md:h-[552px] md:w-[552px] object-cover translate-x-2 md:translate-x-0 shadow-lg" data-tina-field={tinaField(data, "image")} src={data.image || undefined}/>
        </div>
        <div className="absolute h-full w-full top-0 left-0 -z-10 overflow-hidden">
          <div className="absolute top-0 left-[65%] w-[35%] h-[300px] md:h-screen object-cover bg-secondary">
            <Image priority height={1008} width={526} className="h-full object-cover w-full" src={data.bgImage || undefined} alt="Background image" style={{ filter: "brightness(0.3)" }} data-tina-field={tinaField(data, "bgImage")}/>
          </div>
        </div>
      </div>
      <div className="grid md:grid-cols-2 py-4">
        <div className="flex gap-3">
          <Item variant={data.stepVariant} src={data.icon1} iconField={tinaField(data, "icon1")} field={tinaField(data, "step1")} title={localize(data.step1)} number={1}/>
          <Item variant={data.stepVariant} src={data.icon2} iconField={tinaField(data, "icon2")} field={tinaField(data, "step2")} title={localize(data.step2)} number={2}/>
          <Item variant={data.stepVariant} src={data.icon3} iconField={tinaField(data, "icon3")} field={tinaField(data, "step3")} title={localize(data.step3)} number={3}/>
        </div>
      </div>
    </Section>);
});