'use client';

import { useEffect, useRef, useState } from 'react';

export default function Intro() {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const currentRef = ref.current;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, []);

  const highlights = [
    { value: '20+', label: 'Jahre Erfahrung' },
    { value: '10+', label: 'Jahre Freelancing' },
    { value: '9+', label: 'Mitarbeiter geführt' },
    { value: '3', label: 'Produkte verantwortet' },
  ];

  const skills = [
    'Product Owner',
    'Technical Project Manager',
    'Laravel',
    'Vue.js',
    'PHP',
    'JavaScript',
    'MySQL',
    'MSSQL',
    'Systemarchitektur',
    'User Experience',
    'Team Leadership',
    'Compliance',
  ];

  const timeline = [
    { year: '2021 - heute', company: 'Sopra Financial Technology GmbH', role: 'Technical Product Owner' },
    { year: '2019 - 2020', company: 'APPsolute Mobility', role: 'Product Owner & Technical Project Manager' },
    { year: '2014 - 2019', company: 'SCC Fahrzeugtechnik GmbH', role: 'Leiter IT Abteilung' },
    { year: '2010 - 2014', company: 'Trustec Energy GmbH', role: 'Marketing Manager' },
    { year: '2000 - 2010', company: 'Freelancer', role: 'Web Development & Design' },
  ];

  return (
    <section
      id="intro"
      ref={ref}
      className={`py-20 px-4 sm:px-6 lg:px-8 bg-white transition-opacity duration-1000 ${
        isVisible ? 'opacity-100' : 'opacity-0'
      }`}
    >
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl sm:text-4xl font-bold text-text mb-12 text-center relative inline-block w-full after:content-[''] after:block after:w-12 after:h-1 after:bg-primary after:mt-6 after:mx-auto">
          Über mich
        </h2>

        {/* Highlights Box */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
          {highlights.map((item, index) => (
            <div
              key={index}
              className={`bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 text-center border border-primary/20 hover:border-primary/40 transition-all hover:shadow-lg ${
                isVisible ? 'animate-fade-in' : 'opacity-0'
              }`}
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <div className="text-3xl sm:text-4xl font-bold text-primary mb-2">
                {item.value}
              </div>
              <div className="text-sm text-text-light font-semibold">
                {item.label}
              </div>
            </div>
          ))}
        </div>

        {/* Main Text */}
        <div className="max-w-4xl mx-auto space-y-6 text-text-light leading-relaxed text-base sm:text-lg mb-12">
          <p>
            Mein Name ist Sebastian Fröhlich, ich bin 47 Jahre alt und lebe zusammen mit meiner 
            Familie in Neuendettelsau im Landkreis Ansbach.
          </p>

          <p>
            Von der Diskette zur Cloud durfte ich diesen spannenden und rasanten technischen 
            Wandel miterleben. Besonders die Themen{' '}
            <strong className="text-text font-semibold">
              redundante Datenerfassung, Systemarchitektur und User Experience
            </strong>{' '}
            haben mich schon immer besonders fasziniert.
          </p>

          <p>
            Bereits während meiner Berufsausbildung wurde mir die Verantwortung für den 
            Firmenserver (Netware) übertragen.
          </p>

          <p>
            Für die A-Socks GmbH, einem Unternehmen aus der Textilbranche entwickelte ich einen{' '}
            <strong className="text-text font-semibold">
              Shop (HTML/ Javascript/ Actionscript - Flash)
            </strong>, gestaltete die Verkaufsverpackungen und programmierte ein automatisiertes 
            EAN Vergabe System.
          </p>

          <p>
            Als Freelancer war ich über 10 Jahre für Unternehmenskunden aus unterschiedlichen 
            Branchen tätig. Mein Fokus lag dabei auf webbasierten Lösungen wie z.B.{' '}
            <strong className="text-text font-semibold">
              Präsentations- und Buchungssystemen, CMS-Systemen und Internetshops
            </strong>.
          </p>

          <p>
            Im Jahr 2010 erhielt ich die Gelegenheit meine Kompetenzen als Marketing Manager für 
            die Trustec Energy GmbH in der Solarbranche einzusetzen. Nach 4 Jahren erhielt ich eine 
            betriebsbedingte Kündigung und wechselte 2014 zur SCC Fahrzeugtechnik GmbH.
          </p>

          <p>
            Als{' '}
            <strong className="text-text font-semibold">Leiter der IT Abteilung</strong> war ich 
            hier fachlich und disziplinarisch für 6 Mitarbeiter und 3 Auszubildende verantwortlich. 
            Darüber hinaus entwickelte und programmierte ich ein eigenes Firmen-Intranet{' '}
            <strong className="text-text font-semibold">
              (PHP Framework: Laravel, Javascript/ Vue.js, MySql/ MSSQL)
            </strong>, wartete und migrierte die Server und sorgte für ein funktionierendes Backup- 
            und Sicherheitssystem{' '}
            <strong className="text-text font-semibold">(Master-Master Replication, BashScript)</strong>.
          </p>

          <p>
            Die nächste Karrierestufe erreichte ich mit meinem Wechsel zu einem Startupunternehmen, 
            wo ich als{' '}
            <strong className="text-text font-semibold">
              Product Owner & Technical Project Manager
            </strong>{' '}
            für die Firma &quot;APPsolute Mobility&quot; tätig war. Leider konnte das Startup die gesetzten 
            Ziele nicht erreichen, weswegen ich 1 Jahr später zu meinem jetzigen Arbeitgeber wechselte.
          </p>

          <p>
            Bei der{' '}
            <strong className="text-text font-semibold">Sopra Financial Technology GmbH</strong> bin 
            ich seit 2021 als{' '}
            <strong className="text-text font-semibold">Technical Product Owner</strong> im 
            Bereich Regulatory & Risk tätig. Ich verantworte{' '}
            <strong className="text-text font-semibold">3 Fintech-Produkte</strong> im{' '}
            <strong className="text-text font-semibold">Bankenmeldewesen</strong> und stelle 
            deren reibungslosen Betrieb unter strikten{' '}
            <strong className="text-text font-semibold">regulatorischen Vorgaben</strong> sicher.
          </p>

          <p>
            Zu meinen Kernaufgaben gehören die{' '}
            <strong className="text-text font-semibold">
              technische Projektleitung komplexer Migrationen
            </strong>{' '}
            (z.B. Kubernetes-Migration ohne Ausfallzeiten), die Steuerung{' '}
            <strong className="text-text font-semibold">
              internationaler Teams (inkl. Nearshore)
            </strong>, Code Reviews sowie die aktive Teilnahme an{' '}
            <strong className="text-text font-semibold">Cost-Savings-Programmen</strong>. 
            Darüber hinaus arbeite ich in den Bereichen{' '}
            <strong className="text-text font-semibold">
              Managed Application & Cloud Service
            </strong>, wo ich neue Produkte architektonisch begleite und bei 
            Bieterverfahren meine Expertise einbringe.
          </p>

          <p className="pt-4 border-t border-gray-200">
            Mit dieser Präsentation möchte ich die Gelegenheit nutzen, mich als motivierten und 
            kompetenten Bewerber bei Ihrem Unternehmen vorzustellen.
          </p>

          <p>
            Nachfolgend können Sie sich einen Eindruck über mich und meine abgeschlossenen Projekte{' '}
            <a 
              href="#portfolio" 
              className="text-primary hover:text-primary-dark font-semibold underline underline-offset-4 transition-colors"
            >
              hier
            </a>{' '}
            verschaffen. Gerne überzeuge ich Sie auch in einem persönlichen Gespräch von mir.
          </p>
        </div>

        {/* Timeline */}
        <div className="mb-12">
          <h3 className="text-2xl font-bold text-text mb-8 text-center">
            Karriere-Timeline
          </h3>
          <div className="max-w-3xl mx-auto">
            {timeline.map((item, index) => (
              <div
                key={index}
                className={`relative pl-8 pb-8 border-l-2 border-primary/30 last:border-transparent ${
                  isVisible ? 'animate-fade-in' : 'opacity-0'
                }`}
                style={{ animationDelay: `${(index + 4) * 100}ms` }}
              >
                {/* Timeline dot */}
                <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary border-4 border-white shadow-md" />
                
                <div className="bg-bg-light rounded-lg p-6 hover:shadow-lg transition-shadow">
                  <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-2">
                    <h4 className="text-lg font-bold text-text">{item.role}</h4>
                    <span className="text-sm font-semibold text-primary whitespace-nowrap">
                      {item.year}
                    </span>
                  </div>
                  <p className="text-text-light">{item.company}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Skills Tags */}
        <div className="max-w-4xl mx-auto">
          <h3 className="text-2xl font-bold text-text mb-6 text-center">
            Kernkompetenzen
          </h3>
          <div className="flex flex-wrap justify-center gap-3">
            {skills.map((skill, index) => (
              <span
                key={index}
                className={`px-4 py-2 bg-primary/10 text-primary font-semibold rounded-full text-sm border border-primary/20 hover:bg-primary hover:text-white transition-all cursor-default hover:scale-105 ${
                  isVisible ? 'animate-fade-in' : 'opacity-0'
                }`}
                style={{ animationDelay: `${(index + timeline.length + 4) * 50}ms` }}
              >
                {skill}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}