'use client'

import PivoineDocsIcon from './PivoineDocsIcon'

export default function PivoineIconDemo() {
  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
      padding: '4rem 2rem',
      color: '#fff'
    }}>
      <div style={{
        maxWidth: '1400px',
        margin: '0 auto'
      }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
          <h1 style={{
            fontSize: '3rem',
            fontWeight: 'bold',
            background: 'linear-gradient(135deg, #ec4899, #a855f7, #c084fc)',
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            marginBottom: '1rem'
          }}>
            Pivoine Docs Icon
          </h1>
          <p style={{
            fontSize: '1.25rem',
            color: '#94a3b8',
            maxWidth: '600px',
            margin: '0 auto'
          }}>
            A beautiful animated peony blossom icon with interactive states
          </p>
        </div>

        {/* Main Showcase */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '3rem',
          marginBottom: '4rem'
        }}>
          {/* Large Interactive */}
          <div style={{
            background: 'rgba(255, 255, 255, 0.05)',
            borderRadius: '1rem',
            padding: '2rem',
            textAlign: 'center',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255, 255, 255, 0.1)'
          }}>
            <h3 style={{ marginBottom: '1.5rem', color: '#f472b6' }}>
              Interactive (Hover & Click)
            </h3>
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '320px'
            }}>
              <PivoineDocsIcon size="280px" />
            </div>
            <p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
              Hover to bloom • Click to close
            </p>
          </div>

          {/* With Label */}
          <div style={{
            background: 'rgba(255, 255, 255, 0.05)',
            borderRadius: '1rem',
            padding: '2rem',
            textAlign: 'center',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255, 255, 255, 0.1)'
          }}>
            <h3 style={{ marginBottom: '1.5rem', color: '#c084fc' }}>
              With Label
            </h3>
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '320px'
            }}>
              <PivoineDocsIcon size="240px" showLabel />
            </div>
            <p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
              Perfect for hero sections
            </p>
          </div>

          {/* Non-Interactive */}
          <div style={{
            background: 'rgba(255, 255, 255, 0.05)',
            borderRadius: '1rem',
            padding: '2rem',
            textAlign: 'center',
            backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255, 255, 255, 0.1)'
          }}>
            <h3 style={{ marginBottom: '1.5rem', color: '#fb7185' }}>
              Static (Non-Interactive)
            </h3>
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '320px'
            }}>
              <PivoineDocsIcon size="240px" interactive={false} />
            </div>
            <p style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: '1rem' }}>
              Ideal for favicons & PWA icons
            </p>
          </div>
        </div>

        {/* Size Variations */}
        <div style={{
          background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '1rem',
          padding: '3rem',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          marginBottom: '4rem'
        }}>
          <h2 style={{
            fontSize: '2rem',
            fontWeight: 'bold',
            marginBottom: '2rem',
            textAlign: 'center',
            color: '#f0abfc'
          }}>
            Size Variations
          </h2>
          <div style={{
            display: 'flex',
            justifyContent: 'space-around',
            alignItems: 'flex-end',
            flexWrap: 'wrap',
            gap: '2rem',
            padding: '2rem'
          }}>
            <div style={{ textAlign: 'center' }}>
              <PivoineDocsIcon size="64px" />
              <p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
                64px<br />Favicon
              </p>
            </div>
            <div style={{ textAlign: 'center' }}>
              <PivoineDocsIcon size="96px" />
              <p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
                96px<br />Small
              </p>
            </div>
            <div style={{ textAlign: 'center' }}>
              <PivoineDocsIcon size="128px" />
              <p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
                128px<br />Medium
              </p>
            </div>
            <div style={{ textAlign: 'center' }}>
              <PivoineDocsIcon size="192px" />
              <p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
                192px<br />Large
              </p>
            </div>
            <div style={{ textAlign: 'center' }}>
              <PivoineDocsIcon size="256px" />
              <p style={{ color: '#94a3b8', fontSize: '0.75rem', marginTop: '0.5rem' }}>
                256px<br />X-Large
              </p>
            </div>
          </div>
        </div>

        {/* Feature List */}
        <div style={{
          background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '1rem',
          padding: '3rem',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)'
        }}>
          <h2 style={{
            fontSize: '2rem',
            fontWeight: 'bold',
            marginBottom: '2rem',
            textAlign: 'center',
            color: '#f0abfc'
          }}>
            Features
          </h2>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
            gap: '2rem'
          }}>
            {[
              {
                icon: '🌸',
                title: 'Realistic Design',
                description: 'Multi-layered peony with natural gradients'
              },
              {
                icon: '✨',
                title: 'Smooth Animations',
                description: 'Gentle breathing in normal state'
              },
              {
                icon: '🎭',
                title: 'Interactive States',
                description: 'Bloom on hover, close on click'
              },
              {
                icon: '💫',
                title: 'Particle Effects',
                description: '12 bloom particles flying around'
              },
              {
                icon: '🎨',
                title: 'Beautiful Colors',
                description: 'Pink to purple gradient palette'
              },
              {
                icon: '♿',
                title: 'Accessible',
                description: 'Reduced motion & touch support'
              },
              {
                icon: '📱',
                title: 'Responsive',
                description: 'Works perfectly on all devices'
              },
              {
                icon: '⚡',
                title: 'High Performance',
                description: 'GPU-accelerated CSS animations'
              }
            ].map((feature, i) => (
              <div key={i} style={{
                padding: '1.5rem',
                background: 'rgba(255, 255, 255, 0.03)',
                borderRadius: '0.75rem',
                border: '1px solid rgba(255, 255, 255, 0.08)'
              }}>
                <div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>
                  {feature.icon}
                </div>
                <h4 style={{
                  fontSize: '1.125rem',
                  fontWeight: '600',
                  marginBottom: '0.5rem',
                  color: '#fda4af'
                }}>
                  {feature.title}
                </h4>
                <p style={{
                  fontSize: '0.875rem',
                  color: '#94a3b8'
                }}>
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Usage Example */}
        <div style={{
          marginTop: '4rem',
          background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '1rem',
          padding: '2rem',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255, 255, 255, 0.1)'
        }}>
          <h2 style={{
            fontSize: '1.5rem',
            fontWeight: 'bold',
            marginBottom: '1rem',
            color: '#f0abfc'
          }}>
            Quick Start
          </h2>
          <pre style={{
            background: 'rgba(0, 0, 0, 0.3)',
            padding: '1.5rem',
            borderRadius: '0.5rem',
            overflow: 'auto',
            fontSize: '0.875rem',
            color: '#e2e8f0'
          }}>
{`import PivoineDocsIcon from '@/components/icons/PivoineDocsIcon'

// Basic usage
<PivoineDocsIcon size="256px" />

// With label
<PivoineDocsIcon size="200px" showLabel />

// Static for favicon
<PivoineDocsIcon size="128px" interactive={false} />`}
          </pre>
        </div>

        {/* Footer */}
        <div style={{
          marginTop: '4rem',
          textAlign: 'center',
          color: '#64748b',
          fontSize: '0.875rem'
        }}>
          <p>Made with 🌸 for beautiful documentation experiences</p>
        </div>
      </div>
    </div>
  )
}