wip

components/content/Section.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import Image from 'next/image';
 import { cn } from '../../lib/utils';
 import { Container } from '../ui/Container';
 
@@ -16,6 +19,33 @@ interface SectionProps {
   className?: string;
   id?: string;
   as?: React.ElementType;
+  // Additional props for background images and overlays
+  backgroundImage?: string;
+  backgroundAlt?: string;
+  colorOverlay?: string;
+  overlayOpacity?: number;
+  backgroundColor?: string;
+  // WordPress Salient-specific props
+  enableGradient?: boolean;
+  gradientDirection?: 'left_to_right' | 'right_to_left' | 'top_to_bottom' | 'bottom_to_top';
+  colorOverlay2?: string;
+  parallaxBg?: boolean;
+  parallaxBgSpeed?: 'slow' | 'fast' | 'medium';
+  bgImageAnimation?: 'none' | 'zoom-out-reveal' | 'fade-in';
+  topPadding?: string;
+  bottomPadding?: string;
+  textAlignment?: 'left' | 'center' | 'right';
+  textColor?: 'light' | 'dark';
+  shapeType?: string;
+  scenePosition?: 'center' | 'top' | 'bottom';
+  fullScreenRowPosition?: 'middle' | 'top' | 'bottom';
+  // Additional styling
+  borderRadius?: string;
+  boxShadow?: boolean;
+  // Video background props
+  videoBg?: string;
+  videoMp4?: string;
+  videoWebm?: string;
 }
 
 // Helper function to get background styles
@@ -64,32 +94,362 @@ export const Section: React.FC<SectionProps> = ({
   className = '',
   id,
   as: Component = 'section',
+  backgroundImage,
+  backgroundAlt = '',
+  colorOverlay,
+  overlayOpacity = 0.5,
+  backgroundColor,
+  enableGradient = false,
+  gradientDirection = 'left_to_right',
+  colorOverlay2,
+  parallaxBg = false,
+  parallaxBgSpeed = 'medium',
+  bgImageAnimation = 'none',
+  topPadding,
+  bottomPadding,
+  textAlignment = 'left',
+  textColor = 'dark',
+  shapeType,
+  scenePosition = 'center',
+  fullScreenRowPosition,
+  borderRadius,
+  boxShadow = false,
+  videoBg,
+  videoMp4,
+  videoWebm,
 }) => {
-  const sectionClasses = cn(
-    'w-full',
-    getBackgroundStyles(background),
+  const hasBackgroundImage = !!backgroundImage;
+  const hasColorOverlay = !!colorOverlay;
+  const hasCustomBg = !!backgroundColor;
+  const hasGradient = !!enableGradient;
+  const hasParallax = !!parallaxBg;
+  const hasVideo = !!(videoMp4?.trim()) || !!(videoWebm?.trim());
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Get text alignment
+  const textAlignClass = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  }[textAlignment];
+
+  // Get text color
+  const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';
+
+  // Get gradient direction
+  const gradientDirectionClass = {
+    'left_to_right': 'bg-gradient-to-r',
+    'right_to_left': 'bg-gradient-to-l',
+    'top_to_bottom': 'bg-gradient-to-b',
+    'bottom_to_top': 'bg-gradient-to-t',
+  }[gradientDirection];
+
+  // Get parallax speed
+  const parallaxSpeedClass = {
+    slow: 'parallax-slow',
+    medium: 'parallax-medium',
+    fast: 'parallax-fast',
+  }[parallaxBgSpeed];
+
+  // Get background animation
+  const bgAnimationClass = {
+    none: '',
+    'zoom-out-reveal': 'animate-zoom-out',
+    'fade-in': 'animate-fade-in',
+  }[bgImageAnimation];
+
+  // Calculate padding from props
+  const customPaddingStyle = {
+    paddingTop: topPadding || undefined,
+    paddingBottom: bottomPadding || undefined,
+  };
+
+  // Base classes
+  const baseClasses = cn(
+    'w-full relative overflow-hidden',
     getPaddingStyles(padding),
+    textAlignClass,
+    textColorClass,
+    boxShadow && 'shadow-xl',
+    borderRadius && `rounded-${borderRadius}`,
     className
   );
 
-  const content = fullWidth ? (
-    <div className={sectionClasses} id={id}>
-      {children}
-    </div>
-  ) : (
-    <section className={sectionClasses} id={id}>
-      <Container maxWidth="6xl" padding="md">
-        {children}
-      </Container>
-    </section>
+  // Background style (for solid colors)
+  const backgroundStyle = hasCustomBg ? { backgroundColor, ...customPaddingStyle } : customPaddingStyle;
+
+  // Content wrapper classes
+  const contentWrapperClasses = cn(
+    'relative z-20 w-full',
+    !fullWidth && 'container mx-auto px-4 md:px-6'
   );
 
-  if (Component !== 'section' && !fullWidth) {
+  // Parallax effect handler
+  useEffect(() => {
+    if (!hasParallax || !sectionRef.current) return;
+
+    const handleScroll = () => {
+      if (!sectionRef.current) return;
+      
+      const rect = sectionRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      
+      // Calculate offset based on scroll position
+      const scrollProgress = (viewportHeight - rect.top) / (viewportHeight + rect.height);
+      const offset = scrollProgress * 50; // Max 50px offset
+      
+      // Apply to CSS variable
+      sectionRef.current.style.setProperty('--parallax-offset', `${offset}px`);
+    };
+
+    handleScroll(); // Initial call
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [hasParallax]);
+
+  const content = (
+    <div ref={sectionRef} className={baseClasses} id={id} style={backgroundStyle}>
+      {/* Video Background */}
+      {hasVideo && (
+        <div className="absolute inset-0 z-0">
+          <video
+            ref={videoRef}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover"
+            style={{ opacity: 1 }}
+          >
+            {videoWebm && <source src={videoWebm} type="video/webm" />}
+            {videoMp4 && <source src={videoMp4} type="video/mp4" />}
+          </video>
+        </div>
+      )}
+      
+      {/* Background Image with Parallax (fallback if no video) */}
+      {hasBackgroundImage && !hasVideo && (
+        <div className={cn(
+          'absolute inset-0 z-0',
+          hasParallax && parallaxSpeedClass,
+          bgAnimationClass
+        )}>
+          <Image
+            src={backgroundImage}
+            alt={backgroundAlt || ''}
+            fill
+            className={cn(
+              'object-cover',
+              hasParallax && 'transform-gpu'
+            )}
+            sizes="100vw"
+            priority={false}
+          />
+        </div>
+      )}
+
+      {/* Background Variant (if no image) */}
+      {!hasBackgroundImage && !hasCustomBg && (
+        <div className={cn(
+          'absolute inset-0 z-0',
+          getBackgroundStyles(background)
+        )} />
+      )}
+
+      {/* Gradient Overlay */}
+      {hasGradient && (
+        <div
+          className={cn(
+            'absolute inset-0 z-10',
+            gradientDirectionClass,
+            'from-transparent via-transparent to-transparent'
+          )}
+          style={{
+            opacity: overlayOpacity * 0.3,
+          }}
+        />
+      )}
+
+      {/* Color Overlay (from WordPress color_overlay) */}
+      {hasColorOverlay && (
+        <div
+          className="absolute inset-0 z-10"
+          style={{
+            backgroundColor: colorOverlay,
+            opacity: overlayOpacity
+          }}
+        />
+      )}
+
+      {/* Second Color Overlay (for gradients) */}
+      {colorOverlay2 && (
+        <div
+          className="absolute inset-0 z-10"
+          style={{
+            backgroundColor: colorOverlay2,
+            opacity: overlayOpacity * 0.5
+          }}
+        />
+      )}
+
+      {/* Shape Divider (bottom) */}
+      {shapeType && (
+        <div className="absolute bottom-0 left-0 right-0 z-10">
+          <svg
+            className="w-full h-16 md:h-24 lg:h-32"
+            viewBox="0 0 1200 120"
+            preserveAspectRatio="none"
+          >
+            {shapeType === 'waves_opacity_alt' && (
+              <path
+                d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.8,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
+                opacity=".25"
+                fill="#ffffff"
+              />
+            )}
+            {shapeType === 'mountains' && (
+              <path
+                d="M0,0V60c100,0,150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20V0Z"
+                opacity=".25"
+                fill="#ffffff"
+              />
+            )}
+          </svg>
+        </div>
+      )}
+
+      {/* Content */}
+      <div className={contentWrapperClasses}>
+        {fullWidth ? children : (
+          <Container maxWidth="6xl" padding="none">
+            {children}
+          </Container>
+        )}
+      </div>
+    </div>
+  );
+
+  if (Component !== 'section') {
     return (
-      <Component className={sectionClasses} id={id}>
-        <Container maxWidth="6xl" padding="md">
-          {children}
-        </Container>
+      <Component className={baseClasses} id={id} style={backgroundStyle}>
+        {/* Video Background */}
+        {hasVideo && (
+          <div className="absolute inset-0 z-0">
+            <video
+              ref={videoRef}
+              autoPlay
+              muted
+              loop
+              playsInline
+              className="absolute inset-0 w-full h-full object-cover"
+              style={{ opacity: 1 }}
+            >
+              {videoWebm && <source src={videoWebm} type="video/webm" />}
+              {videoMp4 && <source src={videoMp4} type="video/mp4" />}
+            </video>
+          </div>
+        )}
+        
+        {/* Background Image with Parallax (fallback if no video) */}
+        {hasBackgroundImage && !hasVideo && (
+          <div className={cn(
+            'absolute inset-0 z-0',
+            hasParallax && parallaxSpeedClass,
+            bgAnimationClass
+          )}>
+            <Image
+              src={backgroundImage}
+              alt={backgroundAlt || ''}
+              fill
+              className={cn(
+                'object-cover',
+                hasParallax && 'transform-gpu'
+              )}
+              sizes="100vw"
+              priority={false}
+            />
+          </div>
+        )}
+
+        {/* Background Variant (if no image) */}
+        {!hasBackgroundImage && !hasCustomBg && (
+          <div className={cn(
+            'absolute inset-0 z-0',
+            getBackgroundStyles(background)
+          )} />
+        )}
+
+        {/* Gradient Overlay */}
+        {hasGradient && (
+          <div
+            className={cn(
+              'absolute inset-0 z-10',
+              gradientDirectionClass,
+              'from-transparent via-transparent to-transparent'
+            )}
+            style={{
+              opacity: overlayOpacity * 0.3,
+            }}
+          />
+        )}
+
+        {/* Color Overlay */}
+        {hasColorOverlay && (
+          <div
+            className="absolute inset-0 z-10"
+            style={{
+              backgroundColor: colorOverlay,
+              opacity: overlayOpacity
+            }}
+          />
+        )}
+
+        {/* Second Color Overlay */}
+        {colorOverlay2 && (
+          <div
+            className="absolute inset-0 z-10"
+            style={{
+              backgroundColor: colorOverlay2,
+              opacity: overlayOpacity * 0.5
+            }}
+          />
+        )}
+
+        {/* Shape Divider */}
+        {shapeType && (
+          <div className="absolute bottom-0 left-0 right-0 z-10">
+            <svg
+              className="w-full h-16 md:h-24 lg:h-32"
+              viewBox="0 0 1200 120"
+              preserveAspectRatio="none"
+            >
+              {shapeType === 'waves_opacity_alt' && (
+                <path
+                  d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.8,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
+                  opacity=".25"
+                  fill="#ffffff"
+                />
+              )}
+              {shapeType === 'mountains' && (
+                <path
+                  d="M0,0V60c100,0,150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20V0Z"
+                  opacity=".25"
+                  fill="#ffffff"
+                />
+              )}
+            </svg>
+          </div>
+        )}
+
+        <div className={contentWrapperClasses}>
+          {fullWidth ? children : (
+            <Container maxWidth="6xl" padding="none">
+              {children}
+            </Container>
+          )}
+        </div>
       </Component>
     );
   }