import { Component, OnInit, inject, signal } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { SeoService } from '@core/services/seo.service';

interface ProjectFeature {
  icon: string;
  title: string;
  description: string;
}

interface Project {
  slug: string;
  company: string;
  branch: string;
  image: string;
  galleryImages: string[];
  shortDescription: string;
  description: string;
  features: ProjectFeature[];
  result?: string;
  testimonial?: {
    quote: string;
    author: string;
    role: string;
  };
}

const PROJECTS: Project[] = [
  {
    slug: 'metzgerei-schlachthof-qualitaet',
    company: 'Metzgerei Schlachthof-Qualität',
    branch: 'Fleischerei & Metzgerei',
    image: '/images/projekte/metzgerei.jpg',
    galleryImages: [
      '/images/projekte/metzgerei.jpg',
      '/images/projekte/metzgerei-detail1.jpg',
      '/images/projekte/metzgerei-detail2.jpg'
    ],
    shortDescription: 'Premium-Webauftritt für traditionelle Metzgerei mit Fleischerei in der Region',
    description: 'Eine traditionelle Metzgerei mit jahrzehntelanger Erfahrung wollte ihre handwerkliche Qualität auch online sichtbar machen. Wir haben einen Webauftritt geschaffen, der die Wertigkeit ihrer Produkte widerspiegelt – modern, aber mit einem Hauch von Tradition.',
    features: [
      {
        icon: 'search',
        title: 'SEO-Optimierung',
        description: 'Auffindbar bei Google für regionale Suchbegriffe wie "Metzgerei in der Region" und "Frisches Fleisch online".'
      },
      {
        icon: 'smartphone',
        title: 'Responsive Design',
        description: 'Perfekte Darstellung auf allen Geräten – vom Smartphone beim Einkauf bis zum Desktop.'
      },
      {
        icon: 'shield',
        title: 'DSGVO-konform',
        description: 'Vollständig rechtssicher mit Cookie-Banner, Impressum und Datenschutzerklärung nach aktuellen Standards.'
      }
    ],
    result: '+40% mehr Anfragen über Website',
    testimonial: {
      quote: 'Endlich eine Webseite, die unsere handwerkliche Qualität widerspiegelt. Die Zusammenarbeit war professionell und unkompliziert.',
      author: 'Thomas B.',
      role: 'Inhaber'
    }
  },
  {
    slug: 'finanzberatung-vermoegenswert',
    company: 'Finanzberatung Vermögenswert',
    branch: 'Finanzdienstleistung',
    image: '/images/projekte/finanzberatung.jpg',
    galleryImages: [
      '/images/projekte/finanzberatung.jpg',
      '/images/projekte/finanzberatung-detail1.jpg',
      '/images/projekte/finanzberatung-detail2.jpg'
    ],
    shortDescription: 'Vertrauenswürdiger Online-Auftritt für unabhängige Finanzberatung',
    description: 'Als unabhängige Finanzberatung ist Vertrauen das wichtigste Gut. Wir haben eine Website entwickelt, die Kompetenz und Seriosität vermittelt, ohne dabei steif oder unpersönlich zu wirken.',
    features: [
      {
        icon: 'target',
        title: 'Lead-Generierung',
        description: 'Strategisch platzierte Call-to-Actions und ein optimiertes Kontaktformular für qualifizierte Anfragen.'
      },
      {
        icon: 'calendar',
        title: 'Terminbuchung',
        description: 'Online-Terminvereinbarung direkt über die Website – rund um die Uhr, ohne telefonische Hürden.'
      },
      {
        icon: 'award',
        title: 'Premium-Design',
        description: 'Hochwertige Optik, die das Qualitätsversprechen der Beratung visuell unterstreicht.'
      }
    ],
    result: '+60% neue Terminbuchungen',
    testimonial: {
      quote: 'Unsere neuen Kunden sagen oft, dass sie uns wegen der professionellen Website kontaktiert haben. Das zeigt, wie wichtig ein guter erster Eindruck ist.',
      author: 'Michael S.',
      role: 'Geschäftsführer'
    }
  },
  {
    slug: 'physiotherapie-beweglich',
    company: 'Physiotherapie Beweglich',
    branch: 'Gesundheitswesen',
    image: '/images/projekte/physiotherapie.jpg',
    galleryImages: [
      '/images/projekte/physiotherapie.jpg',
      '/images/projekte/physiotherapie-detail1.jpg',
      '/images/projekte/physiotherapie-detail2.jpg'
    ],
    shortDescription: 'Moderne Praxis-Website für Physiotherapie und Rehabilitation',
    description: 'Eine modern aufgestellte Physiotherapie-Praxis mit focus auf ganzheitliche Behandlungsmethoden. Die Website sollte Patienten dabei helfen, die richtige Behandlung zu finden und einfach einen Termin zu buchen.',
    features: [
      {
        icon: 'calendar-check',
        title: 'Online-Terminbuchung',
        description: 'Intuitives Buchungssystem mit Kalenderansicht und automatischen Erinnerungen per E-Mail.'
      },
      {
        icon: 'list',
        title: 'Leistungsübersicht',
        description: 'Übersichtliche Darstellung aller Behandlungsangebote mit detaillierten Beschreibungen.'
      },
      {
        icon: 'google',
        title: 'Google-optimiert',
        description: 'Lokale SEO-Strategie für Top-Platzierungen bei Suchbegriffen wie "Physiotherapie" in der Umgebung.'
      }
    ],
    result: 'Top 3 bei Google-Suche',
    testimonial: {
      quote: 'Wir werden regelmäßig für unsere moderne Website gelobt. Viele Patienten buchen sogar direkt online – das spart uns Zeit.',
      author: 'Sarah M.',
      role: 'Praxisinhaberin'
    }
  }
];

@Component({
  selector: 'app-project-detail',
  imports: [RouterLink],
  templateUrl: './project-detail.component.html',
  styleUrl: './project-detail.component.scss',
})
export class ProjectDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private seo = inject(SeoService);

  project = signal<Project | null>(null);
  otherProjects = signal<Project[]>([]);

  ngOnInit(): void {
    const slug = this.route.snapshot.paramMap.get('slug');
    const project = PROJECTS.find(p => p.slug === slug) || null;
    
    this.project.set(project);
    this.otherProjects.set(PROJECTS.filter(p => p.slug !== slug));

    if (project) {
      this.seo.updateMetadata({
        title: `${project.company} | Hurler Webdesign`,
        description: project.shortDescription,
        socialsDescription: `Erfahren Sie, wie wir ${project.company} zu mehr Erfolg im Internet verholfen haben.`,
        type: 'website'
      });
    }
  }

  getProjectBySlug(slug: string): Project | undefined {
    return PROJECTS.find(p => p.slug === slug);
  }
}
