klz-cables.com/components/home/VideoSection.tsx

'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useTranslations } from 'next-intl';

export default function VideoSection({ data }: { data?: any }) {
  const t = useTranslations('Home.video');
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '200px' },
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <section ref={sectionRef} className="relative h-[70vh] overflow-hidden bg-primary">
      {isVisible && (
        <video className="w-full h-full object-cover opacity-60" autoPlay muted loop playsInline>
          <source
            src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm"
            type="video/webm"
          />
        </video>
      )}
      <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center pointer-events-none">
        <div className="max-w-5xl px-6 text-center animate-slide-up pointer-events-auto">
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-[1.1]">
            {data?.title ? (
              <span
                dangerouslySetInnerHTML={{
                  __html: data.title
                    .replace(/<future>/g, '<span class="italic text-accent">')
                    .replace(/<\/future>/g, '</span>'),
                }}
              />
            ) : (
              t.rich('title', {
                future: (chunks) => <span className="italic text-accent">{chunks}</span>,
              })
            )}
          </h2>
        </div>
      </div>
    </section>
  );
}