'use client';

import { useState } from 'react';

interface Job {
  id: string;
  title: string;
  company: string;
  location: string;
  period: string;
  description: string;
  responsibilities: string[];
}

const jobs: Job[] = [
  {
    id: 'job1',
    title: 'Technischer Product Owner',
    company: 'IT im Bereich Finanzen und Banken',
    location: 'Regulatory & Risk, Nürnberg',
    period: 'Juni 2021 - heute',
    description: 'Technischer Product Owner in einem Nürnberger Unternehmen, welches die komplette Banken IT steuert.',
    responsibilities: [
      'Sicherstellung des Betriebs',
      'Planung und Priorisierung der Ressourcen & Aufgaben',
      'Technische Kommunikation und Architektur',
      'Migration der Infrastruktur K8s on prem & Cloud',
      'Aufbau neuer Services',
    ],
  },
  {
    id: 'job2',
    title: 'Product Owner',
    company: 'Mobile Applikationen Unternehmen',
    location: 'Nürnberg',
    period: 'Februar 2019 - März 2020',
    description: 'Product Owner in einem Nürnberger Unternehmen, welches mobile Applikationen zur Digitalisierung von Prozessen herstellt.',
    responsibilities: [
      'Abklärung der Anforderungen zwischen Stakeholdern und Entwicklern',
      'Planung und Priorisierung der Ressourcen & Aufgaben',
      'Technische Kommunikation und Architektur',
      'Migration der bestehenden Infrastruktur in die MagentaCloud (Kubernetes)',
      'Weiterentwicklung des Produktes',
    ],
  },
  {
    id: 'job3',
    title: 'Leiter IT',
    company: 'Unternehmen im Bereich Fahrzeugtechnik',
    location: 'Georgensgmünd',
    period: 'März 2014 - Januar 2019',
    description: 'Leiter einer IT-Abteilung in einem mittelfränkischen Unternehmen aus dem Bereich Fahrzeugtechnik.',
    responsibilities: [
      'Programmierung & Weiterentwicklung der Online Shops',
      'Anbindung der Warenwirtschaft',
      'Aufbau und Entwicklung eines Intranets',
      'Architektur der Datenbanken',
      'API Schnittstellenprogrammierung',
      'Migration/Neuaufbau und Entwicklung der Linux Server',
    ],
  },
  {
    id: 'job4',
    title: 'Marketing Manager',
    company: 'Trustec Energy GmbH',
    location: 'Solarbranche, Mittelfranken',
    period: 'Januar 2010 - März 2014',
    description: 'Marketing Manager in einem Unternehmen der Solarbranche mit Verantwortung für die komplette digitale Präsenz und Marketing-Kommunikation.',
    responsibilities: [
      'Aufbau, Programmierung und Pflege der Firmenwebseiten (trustec-energy.eu, mhm-marketing.com) mit Joomla CMS',
      'Entwicklung und Programmierung neuer CMS-Inhaltstypen und Module',
      'E-Mail Marketing: Erstellung, Versand und Erfolgsmessung von Newslettern und Messe-Respondern',
      'Print Design: Kataloge, Preislisten, Flyer, Rollups und Messestände (InDesign, Photoshop, Illustrator)',
      'Erstellung von 3D Produkt Mock-ups und Landing Pages',
      'Web Analytics mit Google Analytics und Piwik',
      'Koordination externer Dienstleister (Grafiker, Übersetzer, Messebauer)',
      'IT-Support: Betreuung Windows Server 2008, CRM-Software und Telefonanlage',
    ],
  },
  {
    id: 'job5',
    title: 'Freelancer Web Development & Design',
    company: 'Selbstständig',
    location: 'Verschiedene Branchen',
    period: 'Januar 2000 - Dezember 2010',
    description: 'Über 10 Jahre selbstständig für Unternehmenskunden aus unterschiedlichen Branchen tätig, mit Fokus auf webbasierte Lösungen.',
    responsibilities: [
      'Entwicklung von Präsentations- und Buchungssystemen',
      'Programmierung von CMS-Systemen und Content-Management-Lösungen',
      'Aufbau und Entwicklung von E-Commerce Shops',
      'Webdesign und Frontend-Entwicklung (HTML, CSS, JavaScript, Flash/Actionscript)',
      'Kundenberatung und Anforderungsanalyse',
      'Print Design und Corporate Design Entwicklung',
    ],
  },
];

export default function Experience() {
  const [activeJob, setActiveJob] = useState(0);

  return (
    <section id="experience" className="py-20 px-4 sm:px-6 lg:px-8 bg-white">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl sm:text-4xl font-bold text-text text-center mb-16 relative inline-block w-full after:content-[''] after:block after:w-12 after:h-1 after:bg-primary after:mt-6 after:mx-auto">
          Berufserfahrung
        </h2>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Job Tabs - Jetzt mit besserer Mobile-Darstellung */}
          <div className="lg:col-span-1">
            <div className="flex flex-col gap-3">
              {jobs.map((job, index) => (
                <button
                  key={job.id}
                  onClick={() => setActiveJob(index)}
                  className={`text-left p-4 sm:p-5 rounded-lg transition-all duration-300 ${
                    activeJob === index
                      ? 'bg-primary text-white shadow-lg scale-105'
                      : 'bg-gray-100 text-text hover:bg-gray-200 hover:shadow-md'
                  }`}
                >
                  <h3 className="font-bold text-sm sm:text-base lg:text-lg mb-1">
                    {job.title}
                  </h3>
                  <p className={`text-xs sm:text-sm ${activeJob === index ? 'text-white/80' : 'text-text-light'}`}>
                    {job.company}
                  </p>
                  <p className={`text-xs mt-1 font-semibold ${activeJob === index ? 'text-white/90' : 'text-primary'}`}>
                    {job.period.split(' - ')[0]}
                  </p>
                </button>
              ))}
            </div>
          </div>

          {/* Job Details */}
          <div className="lg:col-span-2">
            <div className="bg-bg-light rounded-lg p-6 sm:p-8 shadow-md hover:shadow-xl transition-shadow">
              {/* Header */}
              <div className="mb-6 pb-6 border-b border-gray-200">
                <h3 className="text-xl sm:text-2xl lg:text-3xl font-bold text-text mb-3">
                  {jobs[activeJob].title}
                </h3>
                <div className="flex flex-col gap-2 mb-2">
                  <p className="text-base sm:text-lg font-semibold text-text-light flex items-center">
                    <svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    {jobs[activeJob].company}
                  </p>
                  <p className="text-sm sm:text-base text-text-light flex items-center">
                    <svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    {jobs[activeJob].location}
                  </p>
                </div>
                <p className="text-primary font-bold text-base sm:text-lg flex items-center">
                  <svg className="w-5 h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  {jobs[activeJob].period}
                </p>
              </div>

              {/* Description */}
              <p className="text-text-light mb-6 text-sm sm:text-base leading-relaxed">
                {jobs[activeJob].description}
              </p>

              {/* Responsibilities */}
              <h4 className="font-bold text-text mb-4 text-base sm:text-lg flex items-center">
                <svg className="w-5 h-5 mr-2 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                </svg>
                Verantwortlichkeiten:
              </h4>
              <ul className="space-y-3">
                {jobs[activeJob].responsibilities.map((resp, idx) => (
                  <li 
                    key={idx} 
                    className="flex items-start group hover:translate-x-1 transition-transform"
                  >
                    <svg 
                      className="w-5 h-5 text-primary mt-0.5 mr-3 flex-shrink-0 group-hover:scale-110 transition-transform" 
                      fill="currentColor" 
                      viewBox="0 0 20 20"
                    >
                      <path 
                        fillRule="evenodd" 
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" 
                        clipRule="evenodd" 
                      />
                    </svg>
                    <span className="text-text-light leading-relaxed text-sm sm:text-base">{resp}</span>
                  </li>
                ))}
              </ul>

              {/* Tags for quick tech overview */}
              <div className="mt-8 pt-6 border-t border-gray-200">
                <div className="flex flex-wrap gap-2">
                  {activeJob === 0 && (
                    <>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Kubernetes</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Cloud Migration</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Systemarchitektur</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Financial IT</span>
                    </>
                  )}
                  {activeJob === 1 && (
                    <>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Kubernetes</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Mobile Apps</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Stakeholder Management</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Digitalisierung</span>
                    </>
                  )}
                  {activeJob === 2 && (
                    <>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Commerce</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Laravel</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Vue.js</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">API Development</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Team Leadership</span>
                    </>
                  )}
                  {activeJob === 3 && (
                    <>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Joomla</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Mail Marketing</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Adobe Suite</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Google Analytics</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">3D Design</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Print Design</span>
                    </>
                  )}
                  {activeJob === 4 && (
                    <>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">HTML/CSS/JS</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">CMS Development</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">E-Commerce</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Flash/Actionscript</span>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-semibold rounded-full">Webdesign</span>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}