import Image from 'next/image';

export function HeroVariant1 ({ item }: any) {
  const {
    style,
    headline,
    description,
    topText,
    image,
    cta,
    bottomText,
  } = item;

  return (
    <div className="mx-auto max-w-7xl px-6 py-20 md:py-28 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-32">
      {/* Sol Taraf: Metin ve CTA */}
      <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
        {/* Üst Metin */}
        {topText && (
          <div className="mb-10">
            <div className="inline-block rounded-full py-1.5 px-3 text-sm text-center leading-6 border">
              {topText.text}{' '}
              {topText.link && (
                <a
                  href={topText.link.href}
                  target={topText.link.target}
                  className="text-blue-600 hover:underline"
                >
                  {topText.link.text}
                </a>
              )}
            </div>
          </div>
        )}

        {/* Başlık */}
        <h1 className="max-w-2xl mx-auto text-4xl font-bold tracking-tight sm:text-6xl">
          {headline}
        </h1>

        {/* Açıklama */}
        <p className="max-w-3xl mx-auto mt-6 text-lg leading-8">
          {description}
        </p>

        {/* CTA Butonları */}
        <div className="mt-10">
          <ul className="flex flex-col md:flex-row items-center gap-4 md:gap-6">
            {cta.map((button, index) => (
              <a
                key={index}
                href={button.href}
                target={button.target}
                className={`py-2 px-4 rounded-md font-medium ${
                  button.isPrimary
                    ? 'bg-blue-600 text-white hover:bg-blue-500'
                    : 'flex items-center gap-1 text-gray-800 hover:text-gray-600'
                }`}
              >
                {button.text}
                {!button.isPrimary && (
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    aria-label="arrow-right-line"
                    className="w-5 h-5"
                  >
                    <path
                      d="M19 12L13 6M19 12L13 18M19 12H5"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    ></path>
                  </svg>
                )}
              </a>
            ))}
          </ul>
        </div>
      </div>

      {/* Sağ Taraf: Görsel */}
      {image && (
        <div className="relative mt-16 sm:mt-28 lg:mt-0 lg:flex-shrink-0 lg:flex-grow z-10">
          {/* Arka Plan Gradyanı */}
          <div className="absolute pointer-events-none w-[420px] h-[420px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[linear-gradient(-45deg,#f3d594_40%,#89e7d6_80%)] blur-[80px] rounded-[50%] z-10"></div>

          {/* Görsel */}
          <Image
            src={image}
            alt={headline}
            width={420}
            height={420}
            className="relative mx-auto max-w-full z-30"
          />
        </div>
      )}
    </div>
  );
};