/**
 * Rynex Starter Template
 * A premium dark-themed starter with modern UI and smooth interactions
 */

import { state } from 'rynex';
import * as UI from 'rynex';

export default function App() {
  const appState = state({
    hoveredButton: null as string | null
  });

  return UI.container({
    class: 'app',
    style: {
      minHeight: '100vh',
      background: '#000000',
      color: '#ffffff',
      fontFamily: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    }
  }, [
    // Main Content Container
    UI.vbox({
      class: 'container',
      style: {
        flex: '1',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '2rem',
        gap: '2.5rem'
      }
    }, [
      // Hero Section
      UI.vbox({
        class: 'hero',
        style: {
          textAlign: 'center',
          gap: '1.5rem',
          maxWidth: '800px'
        }
      }, [
        // Logo/Badge
        UI.container({
          style: {
            display: 'inline-block',
            padding: '0.5rem 1.25rem',
            background: '#0a0a0a',
            border: '1px solid #333333',
            borderRadius: '9999px',
            marginBottom: '1rem',
            boxShadow: '0 4px 6px -1px rgba(0, 255, 136, 0.1)'
          }
        }, [
          UI.text({
            style: {
              fontSize: '0.875rem',
              color: '#00ff88',
              fontWeight: '600',
              letterSpacing: '0.05em'
            }
          }, 'Rynex')
        ]),

        // Main Title
        UI.h1({
          style: {
            fontSize: '4rem',
            fontWeight: '800',
            lineHeight: '1.1',
            margin: '0',
            fontFamily: '"Montserrat", sans-serif',
            background: 'linear-gradient(135deg, #ffffff 0%, #b0b0b0 100%)',
            webkitBackgroundClip: 'text',
            webkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }
        }, 'Welcome to Rynex'),

        // Subtitle
        UI.text({
          style: {
            fontSize: '1.25rem',
            color: '#b0b0b0',
            lineHeight: '1.6',
            maxWidth: '600px',
            margin: '0 auto'
          }
        }, 'A modern, reactive web framework with elegant syntax and powerful features. Build beautiful applications with minimal code and maximum performance.'),

        // Button Group
        UI.hbox({
          class: 'button-group',
          style: {
            gap: '1rem',
            justifyContent: 'center',
            marginTop: '1rem',
            flexWrap: 'wrap'
          }
        }, [
          // Documentation Button
          UI.hbox({
            onClick: () => {
              window.open('https://github.com/your-repo/rynex/docs', '_blank');
            },
            style: {
              padding: '0.875rem 2rem',
              background: '#00ff88',
              color: '#000000',
              border: 'none',
              borderRadius: '9999px',
              fontSize: '1rem',
              fontWeight: '600',
              cursor: 'pointer',
              transition: 'all 0.2s ease-in-out',
              boxShadow: '0 4px 6px -1px rgba(0, 255, 136, 0.1)',
              gap: '0.5rem',
              alignItems: 'center',
              display: 'inline-flex'
            },
            onHover: {
              transform: 'translateY(-2px)',
              background: '#00cc6a'
            }
          }, [
            UI.svg({
              viewBox: '0 0 24 24',
              width: '20',
              height: '20',
              fill: 'currentColor',
              style: { display: 'block' }
            }, '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path d="M7 10h10v2H7zm0 4h7v2H7z"/>'),
            UI.text({}, 'Documentation')
          ]),

          // GitHub Button
          UI.hbox({
            onClick: () => {
              window.open('https://github.com/your-repo/rynex', '_blank');
            },
            style: {
              padding: '0.875rem 2rem',
              background: '#0a0a0a',
              color: '#ffffff',
              border: '1px solid #333333',
              borderRadius: '9999px',
              fontSize: '1rem',
              fontWeight: '600',
              cursor: 'pointer',
              transition: 'all 0.2s ease-in-out',
              boxShadow: '0 1px 2px rgba(0, 255, 136, 0.1)',
              gap: '0.5rem',
              alignItems: 'center',
              display: 'inline-flex'
            },
            onHover: {
              transform: 'translateY(-2px)',
              borderColor: '#00ff88'
            }
          }, [
            UI.svg({
              viewBox: '0 0 24 24',
              width: '20',
              height: '20',
              fill: 'currentColor',
              style: { display: 'block' }
            }, '<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>'),
            UI.text({}, 'GitHub')
          ])
        ])
      ]),

      // Features Grid
      UI.vbox({
        class: 'features',
        style: {
          gap: '1.5rem',
          maxWidth: '900px',
          width: '100%'
        }
      }, [
        UI.text({
          style: {
            fontSize: '1.5rem',
            fontWeight: '700',
            textAlign: 'center',
            marginBottom: '1rem',
            fontFamily: '"Montserrat", sans-serif'
          }
        }, 'Quick Start Guide'),

        UI.hbox({
          style: {
            gap: '1.5rem',
            flexWrap: 'wrap',
            justifyContent: 'center'
          }
        }, [
          // Feature Card 1
          UI.vbox({
            style: {
              flex: '1',
              minWidth: '250px',
              padding: '1.5rem',
              background: '#0a0a0a',
              border: '1px solid #333333',
              borderRadius: '0.5rem',
              gap: '0.75rem',
              boxShadow: '0 1px 2px rgba(0, 255, 136, 0.1)',
              transition: 'all 0.2s ease-in-out'
            }
          }, [
            UI.svg({
              viewBox: '0 0 24 24',
              width: '48',
              height: '48',
              fill: '#00ff88',
              style: { display: 'block' }
            }, '<path d="M7 2v11h3v9l7-12h-4l4-8z"/>') as any,
            UI.text({
              style: {
                fontSize: '1.125rem',
                fontWeight: '600',
                color: '#00ff88'
              }
            }, 'Reactive by Default'),
            UI.text({
              style: {
                fontSize: '0.875rem',
                color: '#b0b0b0',
                lineHeight: '1.5'
              }
            }, 'Built-in reactivity with automatic UI updates. No manual subscriptions needed.')
          ]),

          // Feature Card 2
          UI.vbox({
            style: {
              flex: '1',
              minWidth: '250px',
              padding: '1.5rem',
              background: '#0a0a0a',
              border: '1px solid #333333',
              borderRadius: '0.5rem',
              gap: '0.75rem',
              boxShadow: '0 1px 2px rgba(0, 255, 136, 0.1)',
              transition: 'all 0.2s ease-in-out'
            }
          }, [
            UI.svg({
              viewBox: '0 0 24 24',
              width: '48',
              height: '48',
              fill: '#00ff88',
              style: { display: 'block' }
            }, '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c.55 0 1-.45 1-1 0-.26-.1-.51-.26-.7-.16-.18-.26-.43-.26-.7 0-.55.45-1 1-1h1.18c3.03 0 5.5-2.47 5.5-5.5C20.16 5.79 16.63 2 12 2zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>') as any,
            UI.text({
              style: {
                fontSize: '1.125rem',
                fontWeight: '600',
                color: '#00ff88'
              }
            }, 'Clean Syntax'),
            UI.text({
              style: {
                fontSize: '0.875rem',
                color: '#b0b0b0',
                lineHeight: '1.5'
              }
            }, 'Elegant API design with TypeScript support for better developer experience.')
          ]),

          // Feature Card 3
          UI.vbox({
            style: {
              flex: '1',
              minWidth: '250px',
              padding: '1.5rem',
              background: '#0a0a0a',
              border: '1px solid #333333',
              borderRadius: '0.5rem',
              gap: '0.75rem',
              boxShadow: '0 1px 2px rgba(0, 255, 136, 0.1)',
              transition: 'all 0.2s ease-in-out'
            }
          }, [
            UI.svg({
              viewBox: '0 0 24 24',
              width: '48',
              height: '48',
              fill: '#00ff88',
              style: { display: 'block' }
            }, '<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>') as any,
            UI.text({
              style: {
                fontSize: '1.125rem',
                fontWeight: '600',
                color: '#00ff88'
              }
            }, 'Zero Config'),
            UI.text({
              style: {
                fontSize: '0.875rem',
                color: '#b0b0b0',
                lineHeight: '1.5'
              }
            }, 'Start building immediately with sensible defaults and minimal setup.')
          ])
        ])
      ])
    ]),

    // Footer
    UI.footer({
      style: {
        padding: '2rem',
        textAlign: 'center',
        borderTop: '1px solid #333333',
        background: '#0a0a0a'
      }
    }, [
      UI.text({
        style: {
          fontSize: '0.875rem',
          color: '#b0b0b0'
        }
      }, '© 2025 Razen Core. Built with ❤️ and modern web technologies.')
    ])
  ]);
}