import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.html',
  styleUrls: ['./home.scss'],
})
export class Home implements AfterViewInit {
  private readonly isBrowser: boolean;

  constructor(
    private router: Router,
    @Inject(PLATFORM_ID) platformId: Object
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  iniciar(): void {
    this.router.navigate(['/register']);
  }

  scrollToFeatures(): void {
    if (!this.isBrowser) return;
    document.getElementById('features')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  goToLogin(): void {
  this.router.navigate(['/login']);
}

  ngAfterViewInit(): void {
    if (!this.isBrowser) return;

    document.documentElement.classList.add('js-animate');

    setTimeout(() => {
      const items = Array.from(document.querySelectorAll<HTMLElement>('[data-animate]'));
      if (!items.length) return;

      const reduceMotion =
        window.matchMedia &&
        window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      if (reduceMotion) {
        items.forEach(i => i.classList.add('is-visible'));
        return;
      }

      if (!('IntersectionObserver' in window)) {
        items.forEach(i => i.classList.add('is-visible'));
        return;
      }

      const io = new IntersectionObserver((entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            (entry.target as HTMLElement).classList.add('is-visible');
            io.unobserve(entry.target);
          }
        }
      }, { threshold: 0.12 });

      items.forEach(el => io.observe(el));
    }, 0);
    
  }
}