// SectionDivider — smooth wave transition between sections
function SectionDivider({ fromColor = '#030712', toColor = '#030712', flip = false, height = 80 }) {
  return (
    <div
      className={`section-divider ${flip ? 'section-divider--flip' : ''}`}
      style={{
        '--from-color': fromColor,
        '--to-color': toColor,
        '--divider-height': `${height}px`
      }}
    >
      <svg
        viewBox="0 0 1440 120"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient id={`wave-grad-${fromColor.replace('#','')}`} x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor={fromColor} />
            <stop offset="100%" stopColor={toColor} />
          </linearGradient>
        </defs>
        <path
          d="M0,60 C240,120 480,0 720,60 C960,120 1200,0 1440,60 L1440,120 L0,120 Z"
          fill={toColor}
        />
        <path
          d="M0,80 C360,20 720,100 1080,40 C1260,10 1380,30 1440,50 L1440,120 L0,120 Z"
          fill={toColor}
          opacity="0.6"
        />
      </svg>

      <style>{`
        .section-divider {
          position: relative;
          width: 100%;
          height: var(--divider-height, 80px);
          overflow: hidden;
          background: linear-gradient(180deg, var(--from-color) 0%, var(--to-color) 100%);
          margin-top: -1px;
          margin-bottom: -1px;
        }

        .section-divider svg {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .section-divider--flip {
          transform: scaleY(-1);
        }

        .section-divider--flip svg {
          transform: scaleY(-1);
        }
      `}</style>
    </div>
  );
}

// GradientBlend — simple gradient fade between colors
function GradientBlend({ fromColor = '#030712', toColor = '#ffffff', height = 100 }) {
  return (
    <div
      className="gradient-blend"
      style={{
        background: `linear-gradient(180deg, ${fromColor} 0%, ${toColor} 100%)`,
        height: `${height}px`,
        marginTop: '-1px',
        marginBottom: '-1px'
      }}
    />
  );
}

// WaveDivider — standalone wave SVG
function WaveDivider({ color = '#ffffff', flip = false }) {
  return (
    <div className={`wave-divider ${flip ? 'wave-divider--flip' : ''}`}>
      <svg viewBox="0 0 1440 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M0,50 C360,100 720,0 1080,50 C1260,75 1380,25 1440,50 L1440,100 L0,100 Z"
          fill={color}
        />
      </svg>

      <style>{`
        .wave-divider {
          position: relative;
          width: 100%;
          height: 60px;
          overflow: hidden;
          margin-top: -1px;
        }

        .wave-divider svg {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .wave-divider--flip {
          transform: scaleY(-1);
          margin-top: 0;
          margin-bottom: -1px;
        }
      `}</style>
    </div>
  );
}

window.SectionDivider = SectionDivider;
window.GradientBlend = GradientBlend;
window.WaveDivider = WaveDivider;