import { NgOptimizedImage } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { RouterLink } from '@angular/router'
import { AREAS, findArea } from '../../content/areas'
import { HOME } from '../../content/home'
import { PROJECTS } from '../../content/projects'
import { SITE_CONFIG } from '../core/app-config'
import { SeoService } from '../core/seo.service'
import { COMPANY } from '../core/site'
import { localBusinessJsonLd, organizationJsonLd, websiteJsonLd } from '../core/structured-data'
import { LatestPosts } from '../shared/latest-posts'
import { NeedsPicker } from '../shared/needs-picker'
import { PlaceholderBadge } from '../shared/placeholder-badge'

/**
 * Home. Testi in src/content/home.ts; sezioni in quest'ordine: hero, settori (Acqua in evidenza), energia
 * rinnovabile, servizi privati, servizi aziende, configuratore, realizzazioni, partner, recensioni, blog, contatti.
 */
@Component({
  selector: 'app-home',
  imports: [NgOptimizedImage, RouterLink, LatestPosts, NeedsPicker, PlaceholderBadge],
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './home.html',
  styleUrl: './home.scss',
})
export default class Home {
  protected readonly home = HOME
  protected readonly company = COMPANY
  /** Acqua in evidenza (card grande), poi le altre aree. */
  protected readonly featuredArea = AREAS.find((a) => a.slug === 'acqua') ?? AREAS[0]!
  protected readonly otherAreas = AREAS.filter((a) => a !== this.featuredArea)
  protected readonly energy = findArea('energia')
  protected readonly projects = PROJECTS.filter((p) => p.featured).slice(0, 3)
  protected readonly areaLabel = (slug: string) => findArea(slug)?.label ?? slug

  constructor() {
    const seo = inject(SeoService)
    const { siteUrl } = inject(SITE_CONFIG)
    seo.setPage({ title: HOME.seo.title, description: HOME.seo.description, path: '/' })
    seo.setJsonLd('organization', [organizationJsonLd(siteUrl), websiteJsonLd(siteUrl), localBusinessJsonLd(siteUrl)])
  }
}