import React from 'react'
import { Helmet } from 'react-helmet'

import Layout from '../components/layout'
import avatar from '../assets/images/avatar.jpg'

const SITE_TITLE = 'Dennis Thiessen — Data, Analytics & AI Engineer'
const SITE_DESCRIPTION =
  'Dennis Thiessen is a Staff Data, Analytics & AI Engineer in Bern, Switzerland, building the data pipelines and ML infrastructure that production systems run on.'

const EMAIL = 'dennis@thiessen.io'
const LINKEDIN = 'https://www.linkedin.com/in/dennis-thiessen'

// Career as a pipeline — most recent first. Each node is a role.
const ROLES = [
  {
    year: '2023 — PRESENT',
    company: 'Swisscom',
    location: 'Bern, CH',
    title: 'Staff Data, Analytics & AI Engineer',
    description:
      'ETL and streaming pipelines in Python, Kafka and SAP BODS feeding a Teradata warehouse — and migrating the legacy stack onto AWS (Glue, Redshift, Lambda, Step Functions, Airflow).',
    live: true,
  },
  {
    year: '2020 — 2023',
    company: 'Bosch Semiconductor',
    location: 'Dresden, DE',
    title: 'Senior Data Engineer',
    description:
      'Containerised ML inference (Docker, Kubernetes, Ansible) into 24/7 semiconductor production lines, and built Python, Java and C# data services over Oracle and Hadoop/Impala.',
  },
  {
    year: '2018 — 2020',
    company: 'Fraunhofer CML',
    location: 'Hamburg, DE',
    title: 'Research Software Engineer',
    description:
      'Optimisation-based crew-scheduling decision support in C#/.NET, plus research microservices and a Jenkins CI/CD pipeline with quality gates.',
  },
  {
    year: '2017 — 2018',
    company: 'Vizrt',
    location: 'Bergen, NO',
    title: 'DevOps Engineer',
    description:
      'A distributed video-transcoding backend in Python and C++, with automated audio/video integration testing for reliable releases.',
  },
  {
    year: '2015 — 2017',
    company: 'Generali',
    location: 'Hamburg, DE',
    title: 'Software Engineer & IT Consultant',
    description:
      'A Java/J2EE workflow portal on Oracle, and introduced behaviour-driven development and RPA automation (UiPath, Camunda).',
  },
]

const STACK = [
  { label: 'Languages', items: ['Python', 'SQL', 'Java', 'C#', 'TypeScript', 'C++'] },
  { label: 'Data & Pipelines', items: ['ETL / ELT', 'Kafka', 'Airflow', 'SAP BODS', 'Teradata', 'Hadoop / Impala'] },
  { label: 'Cloud & Infra', items: ['AWS', 'Docker', 'Kubernetes', 'Ansible', 'CI/CD'] },
  { label: 'ML & Observability', items: ['PyTorch', 'scikit-learn', 'ELK', 'Grafana', 'Prometheus'] },
  { label: 'Credentials', items: ['M.Eng., UniBw München', 'AWS Solutions Architect – Associate', 'iSAQB CPSA-F'] },
]

const Tags = ({ items }) =>
  items.map((item, i) => (
    <React.Fragment key={item}>
      {i > 0 && '  ·  '}
      <span className="t">{item}</span>
    </React.Fragment>
  ))

const IndexPage = () => (
  <Layout>
    <Helmet>
      <html lang="en" />
      <meta charSet="utf-8" />
      <title>{SITE_TITLE}</title>
      <meta name="description" content={SITE_DESCRIPTION} />
      <meta name="theme-color" content="#15171c" />
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap"
      />
    </Helmet>

    <div className="wrap">
      <header className="topbar">
        <span className="topbar__name">Dennis Thiessen</span>
        <span className="status">
          <span className="status__dot" aria-hidden="true" />
          Open to new work
        </span>
      </header>

      <section className="hero">
        <div className="hero__text">
          <p className="eyebrow">Data · Analytics · AI Engineering</p>
          <h1 className="hero__name">Dennis Thiessen</h1>
          <p className="hero__lead">
            I build the pipelines and platforms that move data and run models in production.
          </p>
          <p className="hero__meta">
            <strong>Staff Data, Analytics &amp; AI Engineer at Swisscom</strong> — based in Bern,
            Switzerland, with 8+ years across data engineering, ML infrastructure and DevOps.
          </p>
          <nav className="actions">
            <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
            <a href={LINKEDIN} target="_blank" rel="noopener noreferrer">
              LinkedIn ↗
            </a>
          </nav>
        </div>
        <div className="portrait">
          <img src={avatar} alt="Dennis Thiessen" />
        </div>
      </section>

      <section className="section">
        <h2 className="section__label">Profile</h2>
        <div className="prose">
          <p>
            I work where <strong>software engineering meets operations</strong> — designing ETL/ELT
            and streaming pipelines, containerising ML inference, and turning monolithic data
            processes into event-driven, serverless systems.
          </p>
          <p>
            Right now I&apos;m at Swisscom in Bern, moving a legacy Teradata and Oracle stack onto
            AWS. What I care about most is <strong>automation and reliability</strong>: systems that
            run themselves, recover on their own, and don&apos;t page anyone at 3&nbsp;a.m.
          </p>
        </div>
      </section>

      <section className="section">
        <h2 className="section__label">Experience</h2>
        <ol className="roles">
          {ROLES.map((role) => (
            <li className={`role${role.live ? ' role--live' : ''}`} key={role.company}>
              <div className="role__rail" aria-hidden="true">
                <span className="role__node" />
              </div>
              <div className="role__body">
                <p className="role__year">{role.year}</p>
                <div className="role__head">
                  <h3 className="role__co">{role.company}</h3>
                  <span className="role__loc">{role.location}</span>
                </div>
                <p className="role__title">{role.title}</p>
                <p className="role__desc">{role.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

      <section className="section">
        <h2 className="section__label">Stack</h2>
        <div className="stack">
          {STACK.map((group) => (
            <div className="group" key={group.label}>
              <p className="group__label">{group.label}</p>
              <p className="group__tags">
                <Tags items={group.items} />
              </p>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <h2 className="section__label">Contact</h2>
        <div>
          <p className="contact__intro">
            Open to interesting problems in data, ML and platform engineering — in Switzerland or
            remote. Email is the fastest way to reach me.
          </p>
          <a className="contact__email" href={`mailto:${EMAIL}`}>
            {EMAIL}
          </a>
          <div className="contact__links">
            <a href={LINKEDIN} target="_blank" rel="noopener noreferrer">
              LinkedIn ↗
            </a>
            {/* Add a GitHub profile URL here when you have one you want public. */}
          </div>
        </div>
      </section>

      <footer className="colophon">
        <span>© {new Date().getFullYear()} Dennis Thiessen</span>
        <span>Bern, Switzerland</span>
      </footer>
    </div>
  </Layout>
)

export default IndexPage
