import React from 'react'
import { Button } from '../ui/button'
import Image from 'next/image'
import personTwo from '@/assets/personTwo.png'
import Link from 'next/link'

const Sectiontwo = () => {
  return (
    <div className="w-full flex justify-center ">
      <div className="w-3/4 max-w-full 3xl:max-w-[60%]  flex flex-col lg:flex-row gap-1 lg:gap-4 mt-6 pt-10">
        {/*  first div */}
        <div className="basis-1/2 flex justify-center items-center">
          <div className="lg:w-[517px] lg:h-[517px] w-[360px] h-[360px] flex-shrink-0 rounded-full border-2 border-dashed border-[rgba(42, 48, 65, 0.20)]  flex justify-center items-center relative ">
            <div className="lg:w-[465px] lg:h-[465px] w-80 h-80 rounded-full bg-imageBgColor" />
            <div className="absolute -top-6   lg:-top-16 w-80 lg:w-auto  ">
              <Image src={personTwo} alt="person" />
            </div>
          </div>
        </div>

        {/*  second div */}
        <div className="flex flex-col gap-4 lg:gap-8 basis-1/2  px-2 py-6 lg:pt-0 items-center lg:items-start  text-center lg:text-start">
          <h1 className="font-bold text-3xl leading-8 lg:text-[40px] lg:leading-[48px]">
            Learn from Our Mentors Who fueled Growth at Top Startups{' '}
          </h1>
          <p className="text-base font-normal leading-6 text-[#444]">
            Connect with seasoned mentors who've driven impressive growth in
            leading global startups. They offer a wealth of insights and
            expertise for those navigating the challenging entrepreneurial
            landscape. By tapping into their knowledge, you gain access to
            invaluable strategies honed through years of successful scaling.
            <br />
            <br />
            <span className="mt-4">
              This guidance can be the key to unlocking your entrepreneurial
              potential and propelling your venture to greatness. Don't miss the
              chance to learn from these mentors and elevate your startup's
              journey.
            </span>
          </p>

          <div className=" flex py-1 px-6 items-center justify-center gap-3 bg-white  rounded-[55px] border border-black border-solid font-bold capitalize ">
            <Link href="/search">
              <Button className="text-black bg-white hover:bg-white">
                Find your expert
              </Button>
            </Link>

            {/* <Image src={rightArrow} alt='rightarrow' /> */}

            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M19.75 11.7253L4.75 11.7253"
                stroke="#000"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M13.6992 5.701L19.7492 11.725L13.6992 17.75"
                stroke="#000"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Sectiontwo