import React from 'react';

interface VideoSectionProps {
  title: string;
  description: string;
  videoSrc: string;
  features: string[];
}

export const VideoSection: React.FC<VideoSectionProps> = ({
  title,
  description,
  videoSrc,
  features,
}) => {
  return (
    <section className="relative min-h-[80vh] w-full flex flex-col justify-center items-center overflow-hidden bg-background py-24">
      {/* Background Video */}
      <div className="absolute inset-0 z-0">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover opacity-70"
        >
          <source src={videoSrc} type="video/webm" />
        </video>
        {/* Gradient Overlays */}
        <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/10 to-background/40 z-1"></div>
        <div className="absolute inset-0 bg-gradient-to-r from-background/40 via-transparent to-background/40 z-1"></div>
      </div>

      <div className="relative z-10 container mx-auto px-4">
        <div className="max-w-4xl">
          <h3 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight mb-8 text-white">
            {title}
          </h3>
          <p className="text-xl md:text-2xl text-neutral-light leading-relaxed mb-12 max-w-2xl">
            {description}
          </p>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl">
            {features.map((feature, index) => (
              <div key={index} className="glass-effect p-6 rounded-xl flex items-center gap-4 group hover:border-primary/50 transition-all">
                <div className="w-3 h-3 rounded-full bg-primary shadow-[0_0_10px_rgba(0,113,227,0.8)]"></div>
                <span className="text-lg font-medium text-white/90">{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      
      {/* Blueprint Grid Overlay */}
      <div className="absolute inset-0 blueprint-grid opacity-[0.03] pointer-events-none"></div>
    </section>
  );
};
