import React from "react";
import { Navbar } from "./navbar";
import halfTone from "../assets/half-tone.png";
import manOnPhone from "../assets/man-on-phone.png"
import lookingAhead from "../assets/looking-ahead.png";
import { TextEffect } from "./ui/text-effect";
import { NavLink } from "react-router";
import { Button } from "./ui";

const MainHeader = () => {
  return (
    <header className="h-dvh z-10 overflow-hidden ">
      <img
        src={halfTone}
        alt="Background pattern"
        className="absolute w-full h-full opacity-20 -z-10"
        title="Background"
      />
      <div className="flex flex-col h-full">
        <Navbar />
        <div className="flex-grow flex items-center justify-center text-center max-w-4xl m-auto">
          <div className="m-auto">
          <p className="block text-2xl sm:text-4xl md:text-6xl uppercase font-medium uppercase m-4">
            <TextEffect per='word' as='span' preset='slide'>Brand with</TextEffect>{" "}
            <TextEffect per='word' as='span' preset='slide' delay={0.3} className="font-black text-red-700">Purpose</TextEffect>
            <br /> <TextEffect per='word' as='span' preset='slide' delay={0.8} className="font-black text-red-700">Grow</TextEffect>
            <TextEffect per='word' as='span' preset='slide' delay={0.9}> with Clarity</TextEffect>
          </p>
          </div>
        </div>    
        <div className="flex-grow flex  justify-center text-center mx-20">
          <img src={lookingAhead} alt="Looking Ahead" className="mx-auto absolute bottom-0 aspect-auto place-self-center hidden lg:block max-h-4/7 max-w-1/3" title="Looking Ahead" />
          <div className="grid lg:grid-cols-3 grid-cols-1 gap-4 mb-0 mx-auto mx-4 items-start">
            <div className="lg:text-left pt-8 lg:p-2">
              <div className=" lg:hidden relative size-38 mx-auto mb-4">
                <img className="absolute bottom-0 w-full z-20" src={manOnPhone} alt=""/>
                <div className="absolute bottom-0 bg-red-700 aspect-square w-full rounded-full"></div>
              </div>
              <h3 className="uppercase text-gray-800 font-bold text-lg">What we do and who it's for</h3>
              <p className="my-2 text-base mt-4">Visworks365 helps purpose-driven brands align vision, voice, and visuals through strategy-first design and storytelling.</p>
              <Button asChild  variant="link" className="block mx-auto lg:inline-flex lg:mx-0 border bg-red-700 rounded-full text-white text-center px-16 py-6 mt-4 no-underline group-hover:text-white hover:no-underline group-hover:bg-red-600">
                <NavLink to={"/schedule"} className="flex items-center justify-center">Book a Discovery Call</NavLink>
              </Button>
            </div>
            <div>
            </div>
            <div className="text-right pt-2 hidden lg:block">
              <h3 className="uppercase text-gray-800 font-bold text-lg">63.2% of Business Get Branding</h3>
              <p className="mt-2 text-base">According to some company I just made up, 63.2% of business get branding wrong which directly impact on their revenue</p>
              <div className="absolute  size-38 mt-10 right-20">
                <img className="absolute bottom-0 w-full z-20" src={manOnPhone} alt=""/>
                <div className="absolute bottom-0 bg-red-700 aspect-square w-full rounded-full"></div>
              </div>
            </div>
          </div>

        </div>
      </div> 
    </header>
  );
};

export { MainHeader };
