import React from 'react';
import Header from '../../components/Header';

interface DisplaySectionProps {
  onStartClick?: () => void;
}

const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
  const videoIds = ['dM8_d6Aud68', 'bb8nKmKcT0c', 'dM8_d6Aud68'];

  return (
    <div className="w-full h-full flex flex-col bg-[#121a1d] text-white relative overflow-hidden">
      <Header />

      <div className="content-safe-area pt-24 sm:pt-28">
        {/* Main visual frames container */}
        <div className="flex flex-row justify-center items-center gap-2 sm:gap-6 md:gap-10 lg:gap-14 mb-8 md:mb-16 w-full max-w-6xl">
          {videoIds.map((videoId, index) => (
            <div
              key={`${videoId}-${index}`}
              className={`
                ${index === 2 ? 'hidden md:flex' : 'flex'}
                w-[135px] sm:w-[190px] md:w-[230px] lg:w-[280px]
                aspect-[9/16] rounded-[24px] sm:rounded-[40px] md:rounded-[48px]
                bg-black border border-white border-opacity-10
                overflow-hidden relative shadow-[0_30px_80px_rgba(0,0,0,0.9)]
                items-center justify-center transition-all
              `}
            >
                {/* YouTube Embed Container - 9:16 ratio */}
                <div className="absolute inset-0 w-full h-full pointer-events-none overflow-hidden">
                  <iframe
                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[180%] h-[100%] object-cover"
                    src={`https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&loop=1&playlist=${videoId}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&disablekb=1&playsinline=1`}
                    title="YouTube video player"
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                  ></iframe>
                </div>

                {/* Device Bezel/Frame */}
                <div className="absolute inset-0 border-[6px] sm:border-[10px] border-[#20282b] rounded-[24px] sm:rounded-[40px] md:rounded-[48px] pointer-events-none z-20"></div>
                {/* Notch */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/4 h-3 sm:h-5 bg-[#20282b] rounded-b-2xl z-30 opacity-80"></div>
            </div>
          ))}
        </div>

        {/* Action Button */}
        <button
          onClick={onStartClick}
          className="py-3 px-14 sm:py-3.5 sm:px-16 rounded-full bg-[#a682ff] hover:bg-[#9570f0] transition-all transform active:scale-95 text-white font-bold text-xs sm:text-base tracking-wide shadow-xl shadow-[#a682ff44] mb-8"
        >
          시작하기
        </button>
      </div>
    </div>
  );
};

export default DisplaySection;