import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from '../../shared/ui/section/section.component';

type CourseItem = {
  title: string;
  provider: string;
  period: string;
};

@Component({
  selector: 'app-cv-section',
  standalone: true,
  imports: [CommonModule, SectionComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-section
      [id]="sectionId"
      eyebrow="CV"
      title="Snapshot of my experience"
      lead="Highlights of how I work and where I add value. Full CV is ready to share on request."
    >
      <div class="grid gap-6 lg:grid-cols-3">
        <div
          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
        >
          <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
            Experience focus
          </p>
          <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
            <li>• Software architecture, product ownership, and team support.</li>
            <li>• Full-stack development across .NET, Angular, and mobile apps.</li>
            <li>• Designing, testing, and maintaining reliable C# services.</li>
            <li>• Turning user feedback into prioritized product delivery.</li>
          </ul>
        </div>
        <div
          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
        >
          <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">Skills & tools</p>
          <div class="mt-3 flex flex-wrap gap-2 text-xs">
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              Angular
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              TypeScript
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              .NET
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              Blazor
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              Web API
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              MSSQL
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              .NET MAUI
            </span>
            <span class="rounded-full bg-emerald-50/80 px-3 py-1 text-zinc-700 ring-1 ring-emerald-100/70 dark:bg-slate-800/80 dark:text-zinc-200 dark:ring-0">
              Ionic
            </span>
          </div>
        </div>
        <div
          class="rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
        >
          <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
            How I structure work
          </p>
          <ul class="mt-2 space-y-2 text-sm text-zinc-600 dark:text-zinc-300">
            <li>• Shape product roadmaps through research and prioritization.</li>
            <li>• Manage backlogs, reviews, and retrospectives.</li>
            <li>• Collaborate with UX/UI, sales, marketing, and engineering.</li>
            <li>
              • Monitor KPIs and user feedback for continuous improvement.
            </li>
          </ul>
        </div>
      </div>

      <div
        class="mt-6 rounded-xl border border-zinc-200/70 bg-[#fbfcfa]/80 p-4 shadow-sm shadow-zinc-200/40 dark:border-slate-800/60 dark:bg-slate-900/40 dark:shadow-none"
      >
        <div class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p class="text-sm font-semibold text-emerald-600 dark:text-emerald-300">
              Courses & certifications
            </p>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">
              Publicly listed learning history from LinkedIn-derived profile data.
            </p>
          </div>
          <span class="text-xs text-zinc-500 dark:text-zinc-400">
            2018 - 2024
          </span>
        </div>

        <div class="mt-4 grid gap-3 md:grid-cols-2">
          @for (course of courses; track course.title) {
            <article
              class="rounded-lg border border-zinc-200/70 bg-white/55 p-3 dark:border-slate-800/70 dark:bg-slate-950/30"
            >
              <div class="flex items-start justify-between gap-3">
                <h3 class="text-sm font-semibold text-zinc-800 dark:text-zinc-50">
                  {{ course.title }}
                </h3>
                <span class="shrink-0 text-xs text-zinc-500 dark:text-zinc-400">
                  {{ course.period }}
                </span>
              </div>
              <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                {{ course.provider }}
              </p>
            </article>
          }
        </div>
      </div>
    </app-section>
  `
})
export class CvSectionComponent {
  readonly sectionId = 'cv';

  readonly courses: CourseItem[] = [
    {
      title: 'Learn Go Course',
      provider: 'Codecademy',
      period: 'Apr 2024'
    },
    {
      title: 'Reactive Angular RxJS (Angular 17)',
      provider: 'Udemy',
      period: 'Mar 2024'
    },
    {
      title: 'C# Advanced Topics: Prepare for Technical Interviews',
      provider: 'Udemy',
      period: 'Sep 2021'
    },
    {
      title: 'Learning Docker',
      provider: 'LinkedIn',
      period: 'Sep 2021'
    },
    {
      title: 'Applying MVVM in Xamarin.Forms Applications',
      provider: 'Pluralsight',
      period: 'May 2021'
    },
    {
      title: 'Architecting Xamarin.Forms Applications for code reuse',
      provider: 'Pluralsight',
      period: 'May 2021'
    },
    {
      title: 'Learning Entity Framework Core',
      provider: 'LinkedIn',
      period: 'May 2021'
    },
    {
      title: 'C# Intermediate: Classes, Objects and OOP',
      provider: 'Udemy',
      period: 'Oct 2020'
    },
    {
      title: 'Xamarin Forms: Build Native Cross-platform Apps with C#',
      provider: 'Udemy',
      period: 'Sep 2020'
    },
    {
      title: 'Building Web APIs with ASP.NET Core',
      provider: 'LinkedIn',
      period: 'Aug 2020'
    },
    {
      title: 'Database Foundations: Storage',
      provider: 'LinkedIn',
      period: 'Jul 2020'
    },
    {
      title: 'Software Architecture Foundations',
      provider: 'LinkedIn',
      period: 'Jul 2020'
    },
    {
      title: 'C# Essential Training: 2 Flow Control, Arrays, and Exception Handling',
      provider: 'LinkedIn',
      period: 'Jan 2020'
    },
    {
      title: 'C#: Interfaces and Generics',
      provider: 'LinkedIn',
      period: 'Jan 2020'
    },
    {
      title: 'C# Essential Training: 1 Syntax and Object Oriented Programming',
      provider: 'LinkedIn',
      period: 'Dec 2019'
    },
    {
      title: 'SQL Server - Easy Install & Configure a Developer Instance',
      provider: 'Udemy',
      period: 'Jan 2019'
    },
    {
      title: 'C# Fundamentals by Coding',
      provider: 'Udemy',
      period: 'Dec 2018'
    },
    {
      title: 'Javascript Essentials',
      provider: 'Udemy',
      period: 'Jul 2018'
    },
    {
      title: 'Linux Command Line',
      provider: 'Udemy',
      period: 'Jul 2018'
    }
  ];
}