import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent implements OnInit {
  activeSection: string = '';
  currentStoryIndex: number = 0;

  featuredStories = [
    {
      category: 'Emergency Response',
      categoryColor: '#ef4444',
      title: 'Faster Response Times in Downtown LA',
      description: 'How Los Angeles emergency services reduced response time by 22% using Smart Mapping zone intelligence.',
      image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=800&q=80',
      link: '#'
    },
    {
      category: 'Logistics',
      categoryColor: '#3b82f6',
      title: 'Optimizing Last-Mile Delivery',
      description: 'Major logistics company achieves 30% improvement in delivery efficiency with dynamic zone routing.',
      image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=800&q=80',
      link: '#'
    },
    {
      category: 'Campus Security',
      categoryColor: '#8b5cf6',
      title: 'University Campus Safety Enhanced',
      description: 'Real-time zone monitoring helps campus security protect 50,000 students across 200 acres.',
      image: 'https://images.unsplash.com/photo-1562774053-701939374585?w=800&q=80',
      link: '#'
    },
    {
      category: 'Urban Planning',
      categoryColor: '#10b981',
      title: 'Smart City Infrastructure',
      description: 'Municipal planners use zone analytics to optimize traffic flow and reduce congestion by 35%.',
      image: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
      link: '#'
    }
  ];

  constructor() {}

  ngOnInit(): void {
    // Start story carousel auto-rotation
    this.startStoryRotation();
  }

  setActiveSection(section: string): void {
    this.activeSection = section;
    if (section !== 'map') {
      const element = document.getElementById(section);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }

  // Story carousel methods
  nextStory(): void {
    this.currentStoryIndex = (this.currentStoryIndex + 1) % this.featuredStories.length;
  }

  prevStory(): void {
    this.currentStoryIndex = this.currentStoryIndex === 0
      ? this.featuredStories.length - 1
      : this.currentStoryIndex - 1;
  }

  goToStory(index: number): void {
    this.currentStoryIndex = index;
  }

  private storyRotationInterval: any;

  startStoryRotation(): void {
    this.storyRotationInterval = setInterval(() => {
      this.nextStory();
    }, 5000); // Change story every 5 seconds
  }

  ngOnDestroy(): void {
    if (this.storyRotationInterval) {
      clearInterval(this.storyRotationInterval);
    }
  }
}
