import { Button } from '@/components/ui/button';
import vuk1 from "../../assets/vuk12.png";

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-primary pb-20 pt-16 text-primary-foreground md:pt-24">
      <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
      <div className="container relative">
        <div className="flex flex-col-reverse md:grid items-center md:gap-12 md:grid-cols-2">
          <div className="max-w-2xl text-center md:text-left">
            <h1 className="font-headline text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
              Discover yourself and truth on the board
            </h1>
            <p className="hidden md:block mt-6 text-lg leading-8 text-primary-foreground/80">
              Chess is a game in which you must follow the rules, but at the same time, you have to be very creative in using those rules to create your own plan and idea to win the game. Discovering the truth in chess is a very difficult task, but the path that leads to that truth is magnificent.
            </p>
            <div className="mt-10 flex items-center justify-center gap-3 md:gap-x-6 md:justify-start">
              <Button asChild size="lg" className="bg-accent text-accent-foreground hover:bg-accent/90">
                <a href="#pricing">Become a Student</a>
              </Button>
              <Button asChild size="lg" variant="ghost" className="hover:bg-primary-foreground/10 hover:text-primary-foreground">
                <a href="#achievements">See My Work &rarr;</a>
              </Button>
            </div>
          </div>
          <div className="flex justify-center w-full">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <clipPath id="circleClip">
                  <path fill="#FF0066" d="M38.9,-66.5C52,-59.9,65.1,-52.6,74.7,-41.3C84.3,-30.1,90.3,-15.1,88.2,-1.2C86.2,12.7,76.1,25.4,66.8,37.2C57.6,49.1,49.3,60,38.3,66.4C27.3,72.7,13.7,74.4,0,74.3C-13.6,74.3,-27.3,72.6,-39.3,66.8C-51.4,61.1,-61.9,51.5,-69.3,39.7C-76.6,27.9,-80.8,13.9,-79.6,0.7C-78.5,-12.6,-71.9,-25.2,-65.2,-38.1C-58.5,-51,-51.6,-64.1,-40.7,-72C-29.8,-79.9,-14.9,-82.4,-1,-80.7C12.9,-79.1,25.9,-73.1,38.9,-66.5Z" transform="translate(100 100)" />
                </clipPath>
              </defs>
              <image
                href={vuk1.src}
                width="100%"
                height="100%"
                clipPath="url(#circleClip)"
                preserveAspectRatio="xMidYMid slice"
              />
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}