import logo from '@/assets/logo.png';
import { Button } from '@/components/ui/button';
import { Highlighter } from '@/components/ui/highlighter';
import {
    AiWebBrowsingIcon,
    ArrowRight01Icon,
    InstagramIcon,
    PenTool01Icon,
} from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
export default function Header() {
    return (
        <>
            <div className="relative flex flex-col items-center justify-center py-32">
                <div className="flex flex-col items-center gap-4">
                    <div className="flex items-center gap-2 rounded-full border border-neutral-300 px-1 py-1 pr-3">
                        <div className="flex shrink-0 items-start -space-x-1.5">
                            <img
                                src={logo}
                                alt="logo"
                                className="size-5 rounded-full border-2 border-white bg-red-200"
                            />
                            <img
                                src={logo}
                                alt="logo"
                                className="size-5 rounded-full border-2 border-white bg-red-200"
                            />{' '}
                            <img
                                src={logo}
                                alt="logo"
                                className="size-5 rounded-full border-2 border-white bg-red-200"
                            />{' '}
                            <img
                                src={logo}
                                alt="logo"
                                className="size-5 rounded-full border-2 border-white bg-red-200"
                            />
                        </div>
                        <hr className="h-3 border border-neutral-300" />
                        <p className="text-sm text-neutral-400">
                            Brands who trust us for their solutions
                        </p>
                    </div>
                    <div className="flex flex-col items-center justify-center gap-8">
                        <div className="flex flex-col items-center">
                            <h1 className="text-center text-7xl leading-20 font-medium tracking-tight">
                                <Highlighter action="highlight" color="#A21AE9">
                                    Marketing
                                </Highlighter>{' '}
                                & IT Solutions <br />
                                That Solves Real{' '}
                                <Highlighter
                                    action="underline"
                                    color="#FF9800"
                                    iterations={2}
                                    strokeWidth={2}
                                >
                                    Problems
                                </Highlighter>
                            </h1>
                            <p className="text-3xl tracking-tight text-neutral-400">
                                Zero Marketing fluff, and real result delivered
                                to you!
                            </p>
                        </div>

                        <Button
                            size={'lg'}
                            className="font-600 !h-auto cursor-pointer !rounded-lg bg-linear-[180deg,#A21AE9_-35%,#4F17D5_132%] !px-6 !py-2.5 text-lg inset-shadow-[0_-4px_1px_0_#500BBC] hover:shadow-lg hover:shadow-[#4f0bbc4a]"
                        >
                            Get Solving
                            <HugeiconsIcon
                                icon={ArrowRight01Icon}
                                size={32}
                                color="currentColor"
                                strokeWidth={3}
                            />
                        </Button>
                    </div>
                </div>

                <div>
                    <HugeiconsIcon
                        icon={AiWebBrowsingIcon}
                        size={72}
                        color="#a1a1a1"
                        strokeWidth={1.2}
                        className="absolute top-5 right-[20%] rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
                    ></HugeiconsIcon>
                    <HugeiconsIcon
                        icon={PenTool01Icon}
                        size={72}
                        color="#a1a1a1"
                        strokeWidth={1.2}
                        className="absolute top-32 left-[15%] -rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
                    ></HugeiconsIcon>
                    <HugeiconsIcon
                        icon={InstagramIcon}
                        size={72}
                        color="#a1a1a1"
                        strokeWidth={1.2}
                        className="absolute right-[10%] bottom-32 -rotate-12 rounded-lg border border-[#a11ae92a] bg-white p-2 shadow-lg inset-shadow-[0_-3px_2px_0_#A21AE930] shadow-[#a11ae930]"
                    ></HugeiconsIcon>
                </div>
            </div>
        </>
    );
}