import React from "react";
import styles from "./HeroSection.module.css";
import Link from "next/link";
const HeroSection: React.FC = () => {
  return (
    <section className="header">
      <div className="relative w-full h-[1075px] z-0">
        <div className="absolute w-full flex flex-col md:flex-row">
          {/* Left Background */}
          <div
            className={`${styles.bgLeft} w-full md:w-1/2 h-[500px] md:h-[1075px]`}
          ></div>

          {/* Right Background */}
          <div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
            <div
              className="absolute top-0 left-[-150px] mt-0 md:mt-40 ml-16 h-[542px] flex-col justify-start items-start gap-2.5 inline-flex z-50"
              data-aos="fade-left"
              data-aos-duration="2000"
            >
              <img
                src="/assets/images/hero-temp-slider.png"
                alt="Hero Slider"
              />
            </div>
          </div>

          {/* Main Content */}
          <div
            className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`}
          >
            <div className="p-8 md:p-16">
              <div className="text-2xl md:text-6xl leading-5xl font-normal font-['Gendy'] ">
                <span className="text-[#ff256d] md:text-white ">R</span>
                <span className="text-[#252525] ">
                  evolutionize Your Social Media Strategy with a Personalized
                </span>
                <br />
                <span className="text-[#ff256d]"> AI Agent</span>
              </div>
              <p className="w-full md:w-10/12 text-xs md:text-[20px] mt-4 leading-relaxed md:leading-loose">
                Customize your social media content, automate posts, and grow
                your brand with a personalized AI assistant designed for
                businesses and marketers.
              </p>

              <div className="flex">
                <div className="flex mt-5 items-center">
                  <div>
                    <p className="text-[#252525] text-[10px] md:text-xs font-normal">
                      Customers Rating
                    </p>
                    <p className="text-[#ff256d] text-xs md:text-md font-semibold">
                      ⭐ 4.8
                    </p>
                    <p className="text-[#727272] text-[10px] md:text-xs">
                      (8,279 reviews)
                    </p>
                  </div>
                </div>

                {/* CTA Button */}
                <Link
                  href="https://dashboard.planpostai.com/"
                  className="ml-5 mt-5  px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
                >
                  Generate
                  <img
                    src="/assets/svg/generate-icon.svg"
                    alt="Generate Icon"
                    className="w-6 h-6"
                  />
                </Link>
              </div>
              {/* Customer Reviews */}
            </div>
          </div>
        </div>

        {/* Social Icons */}
        <div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
          <img src="/assets/images/social-icons.png" alt="Social Icons" />
        </div>
      </div>
    </section>
  );
};

export default HeroSection;