import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit, HostListener } from '@angular/core';
import { Navigation } from './components/navigation/navigation';
import { Feature } from './interfaces/feature';
import { Plan } from './interfaces/plan';
import { Stat } from './interfaces/stat';
import { Footer } from './components/footer/footer';

@Component({
  selector: 'app-root',
  imports: [CommonModule, Navigation, Footer],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit, OnDestroy {
  mobileMenuOpen = false;
  scrolled = false;

  stats: Stat[] = [
    { value: '99.9%', label: 'Uptime' },
    { value: '10k+', label: 'Servers' },
    { value: '24/7', label: 'Support' },
    { value: '<1min', label: 'Setup Time' }
  ];

  features: Feature[] = [
    {
      icon: '<svg class="w-12 h-12 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
      title: 'Lightning Fast',
      description: 'NVMe SSDs and powerful CPUs ensure zero lag and instant world loading.'
    },
    {
      icon: '<svg class="w-12 h-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>',
      title: 'DDoS Protected',
      description: 'Enterprise-grade protection keeps your server online during attacks.'
    },
    {
      icon: '<svg class="w-12 h-12 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>',
      title: 'Instant Deploy',
      description: 'Your server goes live in under 60 seconds. No waiting, just playing.'
    },
    {
      icon: '<svg class="w-12 h-12 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" /></svg>',
      title: '24/7 Support',
      description: 'Expert team ready to help anytime via chat, ticket, or Discord.'
    }
  ];

  plans: Plan[] = [
    {
      name: 'Starter',
      price: '$5',
      players: '10 Players',
      ram: '2GB RAM',
      storage: '10GB SSD',
      features: ['DDoS Protection', 'Instant Setup', 'Daily Backups', 'Mod Support']
    },
    {
      name: 'Pro',
      price: '$15',
      players: '50 Players',
      ram: '6GB RAM',
      storage: '30GB SSD',
      features: ['DDoS Protection', 'Instant Setup', 'Daily Backups', 'Mod Support', 'Priority Support', 'Free Subdomain'],
      popular: true
    },
    {
      name: 'Ultimate',
      price: '$30',
      players: 'Unlimited',
      ram: '16GB RAM',
      storage: '100GB SSD',
      features: ['DDoS Protection', 'Instant Setup', 'Daily Backups', 'Mod Support', 'Priority Support', 'Free Subdomain', 'Dedicated IP', 'Custom Plugins']
    },
    {
      name: 'Custom',
      price: '$$$',
      players: 'Unlimited',
      ram: 'Up to 128GB RAM',
      storage: 'Up to 2TB',
      features: ['DDoS Protection', 'Instant Setup', 'Daily Backups', 'Mod Support', 'Priority Support', 'Free Subdomain', 'Dedicated IP', 'Custom Plugins', 'Priority Support']
    },
  ];

  ngOnInit(): void {
    window.addEventListener('scroll', this.onWindowScroll.bind(this));
  }

  ngOnDestroy(): void {
    window.removeEventListener('scroll', this.onWindowScroll.bind(this));
  }

  @HostListener('window:scroll', [])
  onWindowScroll(): void {
    this.scrolled = window.scrollY > 50;
  }
}