'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 = [
    'AI Solution Architecture',
    'LangChain / LangGraph',
    'RAG & Vector Databases',
    'Technical Architecture',
    'Kubernetes & Cloud',
    'Product Owner',
    'Python',
    'Laravel',
    'Vue.js',
    'Systemarchitektur',
    'Team Leadership',
    'Compliance & Regulatorik',
  ];

  const timeline = [
    { year: '2024 - heute', company: 'Sopra Financial Technology GmbH', role: 'AI Solution Architect & Technical Architect' },
    { year: '2021 - 2024', company: 'Sopra Financial Technology GmbH', role: 'Technical Product Owner – Bankenmeldewesen' },
    { 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> war
            ich seit 2021 zunächst als{' '}
            <strong className="text-text font-semibold">Technical Product Owner</strong> im
            Bereich Regulatory & Risk tätig. Ich verantwortete{' '}
            <strong className="text-text font-semibold">3 Fintech-Produkte</strong> im{' '}
            <strong className="text-text font-semibold">Bankenmeldewesen</strong> (Abacus360, Okular, zeb.Trading) und
            leitete u.a. die erfolgreiche{' '}
            <strong className="text-text font-semibold">Kubernetes-Migration ohne Ausfallzeiten</strong>{' '}
            unter strikten regulatorischen Vorgaben.
          </p>

          <p>
            Seit Juni 2024 bin ich als{' '}
            <strong className="text-text font-semibold">AI Solution Architect</strong> und{' '}
            <strong className="text-text font-semibold">Technical Architect</strong> tätig.
            Ich konzipiere und begleite die unternehmensweite{' '}
            <strong className="text-text font-semibold">KI-Initiative im regulierten Bankenumfeld</strong> –
            von{' '}
            <strong className="text-text font-semibold">
              AI Agentic Systems und RAG-basierten Knowledge-Management-Architekturen
            </strong>{' '}
            bis hin zu{' '}
            <strong className="text-text font-semibold">
              LangChain/LangGraph-Workflows
            </strong>{' '}
            und der Integration von MCP-Servern. Gleichzeitig verantworte ich als Technical Architect
            Cloud-Native-Architekturen auf{' '}
            <strong className="text-text font-semibold">Azure und AWS</strong> mit{' '}
            <strong className="text-text font-semibold">Kubernetes, Terraform und Ansible</strong>{' '}
            und unterstütze bei Bieterverfahren mit technischer Expertise.
          </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>
  );
}