import Image from 'next/image'

export default function HeroSection() {
  return (
    <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div className="flex flex-col lg:mt-10 mb-10 lg:mb-16 justify-center items-center">
        {/* Coming Soon Badge */}
        <div className="flex items-center bg-[#F5F1FE] text-[#796CF7] w-fit rounded-3xl px-3 py-2.5 md:py-2.5 md:px-4 space-x-2.5 mb-6">
          <div className="w-2 h-2 bg-[#796CF7] rounded-full" />
          <p className="font-bold text-sm">Our Mission</p>
        </div>

        {/* Main Headline */}
        <h1 className="font-bold text-center my-6 font-medium text-text-dark-200 text-4xl md:text-6xl lg:text-[3.75rem] leading-tight max-w-5xl">
          Unlock a world of possibilities for you
        </h1>

        {/* Subtitle */}
        <p className="text-lg text-text-soft-200 text-center w-5/6 lg:w-7/12 md:text-xl leading-tight max-w-4xl">
        Our mission at Euphoria 5 is to connect our users to the best wealth creating
              opportunities in the world. Our goal is to help them create wealth and
              achieve their financial goals.
        </p>
      </div>

      <div className="relative">
            <Image
              src="/about.png"
              alt="Euphoria 5 Office"
              width={600}
              height={400}
              className="rounded-2xl w-full h-auto"
            />
          </div>
    </section>
  )
}
