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

'use client';

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

export default function VideoSection() {
  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]">
            {t.rich('title', {
              future: (chunks) => (
                <span className="relative inline-block mx-2">
                  <span className="relative z-10 italic text-accent">{chunks}</span>
                  <Scribble
                    variant="underline"
                    className="w-full h-4 -bottom-2 left-0 text-accent/40"
                  />
                </span>
              ),
            })}
          </h2>
        </div>
      </div>
    </section>
  );
}