import { WaveProvider, WaveSection } from 'wavy-bavy'

export default function Page() {
  return (
    <WaveProvider>
      <WaveSection background="#ffffff">
        <h1>Hero Section</h1>
      </WaveSection>

      <WaveSection background="#F7F7F5">
        <h2>Features</h2>
        {/* Wave auto-created: white → light gray */}
      </WaveSection>

      <WaveSection background="#191919">
        <h2 style={{ color: '#fff' }}>Dark Section</h2>
        {/* Wave auto-created: light gray → dark */}
      </WaveSection>
    </WaveProvider>
  )
}

<WaveSection pattern="smooth" />    {/* Classic sine curve */}
<WaveSection pattern="organic" />   {/* Irregular, natural shape */}
<WaveSection pattern="sharp" />     {/* Geometric angles */}
<WaveSection pattern="mountain" />  {/* Triangle peaks */}
<WaveSection pattern="layered" />   {/* Multiple overlapping waves */}

<WaveSection preset="hero" />       {/* Tall, dramatic wave */}
<WaveSection preset="footer" />     {/* Subtle footer transition */}
<WaveSection preset="dramatic" />   {/* Large organic shape */}
<WaveSection preset="subtle" />     {/* Minimal wave */}
<WaveSection preset="angular" />    {/* Sharp geometric */}
<WaveSection preset="peaks" />      {/* Mountain range */}

<WaveSection animate="flow" />           {/* Gentle horizontal drift */}
<WaveSection animate="pulse" />          {/* Vertical grow/shrink */}
<WaveSection animate="morph" />          {/* Shape morphing */}
<WaveSection animate="ripple" />         {/* Wave ripple */}
<WaveSection animate="bounce" />         {/* Subtle bounce */}
<WaveSection animate="drift" />          {/* Horizontal glide */}
<WaveSection animate="breathe" />        {/* Rhythmic amplitude */}
<WaveSection animate="undulate" />       {/* Full 2D wave motion */}

{/* Control speed */}
<WaveSection animate="flow" animationDuration={6} />

<WaveSection
  background="#1a1a2e"
  pattern="organic"
  height={200}
  amplitude={0.7}
  frequency={2}
  seed={42}                        {/* Reproducible random shape */}
  shadow={{ blur: 15, color: 'rgba(0,0,0,0.2)' }}
  layers={3}
  layerOpacity={0.25}
>
  <h2>Fully Customized</h2>
</WaveSection>

<WaveProvider
  defaults={{
    height: 150,
    pattern: 'organic',
    amplitude: 0.6,
    respectReducedMotion: true,
  }}
  debug={process.env.NODE_ENV === 'development'}
>
  {/* All WaveSections inherit these defaults */}
</WaveProvider>