import React from "react";

const HeroFour = ({ data }) => {
  const { heading1, description1, video_link1 } = data ?? {};
  return (
    <div className="min-h-[70vh] mt-10 pb-14 sm:px-6 lg:px-8">
      <div className="max-w-8xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="font-serif text-5xl text-slate-800 mb-4">
            {heading1 ?? "Explore Gupta Rudraksha"}
          </h1>
          <h2 className="text-xl text-slate-700">
            {description1 ??
              "Dive deep with us in our Gupta Rudraksha Journey and our get to know us even more better."}
          </h2>
        </div>
        <iframe
          src={`${video_link1 ?? "https://www.youtube.com/embed/_drMO01Mjtc"}`}
          title="Rudraksha &amp; It’s REAL POWER explained, Jaap Benefits | Pashupatinath, Bhairav, Nepal’s History | TRS"
          frameBorder="0"
          className="mx-auto h-[180px] sm:h-[570px]  w-[300px] sm:w-3/4"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
        ></iframe>
      </div>
    </div>
  );
};

export default HeroFour;