salmakis/app/components/HeroSplit.tsx

"use client";

import styles from "./HeroSplit.module.css";
import Link from "next/link";
import { heroSectionsData } from "../data/hero-sections";

export default function HeroSplit({ dict, currentLang }: { dict: any; currentLang: string }) {
  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>, videoId?: string) => {
    if (videoId) {
      const iframe = e.currentTarget.querySelector('iframe');
      if (iframe?.contentWindow) {
        iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
      }
    }
  };

  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>, videoId?: string) => {
    if (videoId) {
      const iframe = e.currentTarget.querySelector('iframe');
      if (iframe?.contentWindow) {
        iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
      }
    }
  };

  const mapDataToDict = heroSectionsData.map(item => {
    // @ts-ignore
    const translation = dict.sections[item.key] || {};
    return {
      ...item,
      title: translation.title || item.title,
      subtitle: translation.subtitle || item.subtitle
    }
  });

  return (
    <section className={styles.heroContainer}>
      <nav className={styles.navOverlay}>
        <div className={styles.logo}>SALMAKIS</div>
        <div className={styles.navLinks}>
          <Link href="/tr" className={styles.langBtn} style={{ opacity: currentLang === 'tr' ? 1 : 0.5 }}>TR</Link>
          <span className={styles.divider}></span>
          <Link href="/en" className={styles.langBtn} style={{ opacity: currentLang === 'en' ? 1 : 0.5 }}>EN</Link>
          <Link href="#contact" className={styles.contactIcon}>
            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
          </Link>
        </div>
      </nav>

      <div className={styles.splitWrapper}>
        {mapDataToDict.map((section, index) => (
          <div 
            key={index} 
            className={styles.splitPane}
            onMouseEnter={(e) => handleMouseEnter(e, section.videoId)}
            onMouseLeave={(e) => handleMouseLeave(e, section.videoId)}
          >
            {section.videoId ? (
              <div className={styles.paneBg}>
                {/* The background overlay thumbnail ensuring video loads smoothly behind */}
                <div style={{ backgroundImage: `url(${section.bgUrl})`, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundSize: 'cover', backgroundPosition: 'center', zIndex: 0 }}></div>
                
                <iframe
                  className={styles.videoIfrm}
                  src={`https://www.youtube.com/embed/${section.videoId}?autoplay=0&mute=1&controls=0&loop=1&playlist=${section.videoId}&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&vq=hd1080`}
                  allow="autoplay; encrypted-media"
                  frameBorder="0"
                ></iframe>
                {/* The background overlay thumbnail ensuring YouTube UI is hidden until hover */}
                <div 
                  className={styles.videoPlaceholder} 
                  style={{ backgroundImage: `url(${section.bgUrl})` }}
                ></div>
              </div>
            ) : (
              <div 
                className={styles.paneBg}
                style={{ backgroundImage: `url(${section.bgUrl})` }}
              ></div>
            )}
            <div className={styles.overlay}></div>
            
            <div className={styles.paneContent}>
              <h2 className={styles.title}>{section.title}</h2>
              <p className={styles.subtitle}>{section.subtitle}</p>
              
              <a href={section.link} target={section.link.startsWith('#') ? '_self' : '_blank'} rel="noreferrer" className={styles.exploreBtn}>
                {dict.nav.discover}
              </a>
              
              <div className={styles.socialsWrapper}>
                {section.socials.instagram && (
                  <a href={section.socials.instagram} target="_blank" rel="noreferrer" className={styles.socialLink}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                    </svg>
                  </a>
                )}
                {section.socials.twitter && (
                  <a href={section.socials.twitter} target="_blank" rel="noreferrer" className={styles.socialLink}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                    </svg>
                  </a>
                )}
                {section.socials.facebook && (
                  <a href={section.socials.facebook} target="_blank" rel="noreferrer" className={styles.socialLink}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}