import { Link } from '@tanstack/react-router'
import { useState, type ChangeEvent, type FormEvent } from 'react'
import {
  IconAlertTriangle,
  IconArrowDown,
  IconArrowsLeftRight,
  IconBolt,
  IconChevronDown,
  IconCircleCheck,
  IconClock,
  IconCurrencyEuro,
  IconHeart,
  IconMenu2,
  IconSettings,
  IconShield,
  IconTrendingDown,
  IconUserCheck,
  IconX,
} from '@tabler/icons-react'
import styles from './PilotLandingPage.module.css'

const facilityTypes = [
  { value: 'krankenhaus', label: 'Krankenhaus' },
  { value: 'altenpflege', label: 'Altenpflegeeinrichtung' },
  { value: 'ambulant', label: 'Ambulanter Pflegedienst' },
  { value: 'reha', label: 'Reha-Klinik' },
  { value: 'sonstige', label: 'Sonstige' },
]

const nursesNeededRanges = [
  { value: '1-5', label: '1–5' },
  { value: '6-15', label: '6–15' },
  { value: '16-30', label: '16–30' },
  { value: '30+', label: 'Mehr als 30' },
]

const problems = [
  {
    icon: IconClock,
    title: 'Langwierige Prozesse',
    description:
      'Bürokratie, Anerkennungsverfahren und Visaprozesse kosten wertvolle Zeit. Für zusätzliche Recruiting-Aufgaben fehlen im laufenden Betrieb oft die Ressourcen.',
  },
  {
    icon: IconCurrencyEuro,
    title: 'Hohe Agenturkosten',
    description:
      'Vermittlungsagenturen verlangen hohe Gebühren ohne nachhaltige Lösungen. Unklare Kommunikation kann zu falschen Erwartungen und mehr Fluktuation führen.',
  },
  {
    icon: IconAlertTriangle,
    title: 'Agenturabhängigkeit',
    description:
      'Ohne eigene Prozesse bleiben Sie dauerhaft auf externe Vermittler angewiesen. Sie geben Kontrolle über Ihr Recruiting aus der Hand.',
  },
]

const offers = [
  {
    icon: IconUserCheck,
    step: '01',
    title: 'Vorqualifizierte Pflegefachkräfte',
    description:
      'Wir verschaffen Ihnen direkten Zugang zu vorqualifizierten internationalen Pflegefachkräften. Unser Fokus liegt auf Kandidatinnen und Kandidaten in Deutschland, ergänzt durch qualifizierte Fachkräfte aus Drittstaaten.',
    highlights: [
      'Geprüfte Abschlüsse und Lizenzen',
      'Deutschkenntnisse mindestens B1',
      'ggfs. Defizitbescheid',
    ],
  },
  {
    icon: IconArrowsLeftRight,
    step: '02',
    title: 'Full-Service Recruiting',
    description:
      'Vom ersten Kontakt bis zur erfolgreichen Integration: Wir begleiten den gesamten Prozess – von der Anerkennung bis zum Onboarding. Auf Wunsch unterstützen wir Sie auch gezielt in einzelnen Prozessschritten.',
    highlights: [
      'Unterstützung im Anerkennungsverfahren',
      'Begleitung bei behördlichen und administrativen Prozessen',
      'Onboarding und Integration in Ihrer Einrichtung',
    ],
  },
  {
    icon: IconSettings,
    step: '03',
    title: 'Digitale Prozesse aufbauen',
    description:
      'Das Besondere: Während wir Sie operativ unterstützen, entwickeln wir gemeinsam mit Ihnen die Strukturen, mit denen Sie künftig selbst internationale Pflegekräfte rekrutieren und integrieren.',
    highlights: [
      'Klare, praxistaugliche Abläufe für Ihr Team',
      'Entlastung durch vereinfachte und digital unterstützte Prozesse',
      'Weniger Abhängigkeit von externen Vermittlern',
    ],
  },
]

const benefits = [
  {
    icon: IconTrendingDown,
    title: 'Kosten senken',
    description:
      'Deutlich günstiger als klassische Vermittlungsagenturen – und langfristig noch wirtschaftlicher durch geringere Fluktuation.',
  },
  {
    icon: IconBolt,
    title: 'Schneller besetzen',
    description:
      'Vermeiden Sie Verzögerungen bei den Behörden durch vollständige und fehlerfreie Anträge.',
  },
  {
    icon: IconShield,
    title: 'Unabhängig werden',
    description:
      'Durch eigene Prozesse reduzieren Sie dauerhaft die Abhängigkeit von externen Dienstleistern.',
  },
  {
    icon: IconHeart,
    title: 'Nachhaltig integrieren',
    description:
      'Mehr Kontrolle über Auswahl, Kommunikation und Onboarding sorgt für realistische Erwartungen und stärkt die langfristige Bindung Ihrer Mitarbeitenden.',
  },
]

const faqs = [
  {
    question: 'Für wen ist HeyGermany gedacht?',
    answers: [
      'HeyGermany richtet sich an Pflegeeinrichtungen in Deutschland – stationäre Pflegeeinrichtungen, ambulante Pflegedienste, Langzeitpflege, Reha-Kliniken – die internationale Pflegefachkräfte gewinnen und langfristig unabhängig rekrutieren und nachhaltig integrieren möchten.',
    ],
  },
  {
    question: 'Was unterscheidet HeyGermany von klassischen Vermittlungsagenturen?',
    answers: [
      'Wir vermitteln nicht nur Pflegefachkräfte, sondern bauen gemeinsam mit Ihnen klare, praxistaugliche Recruiting-Strukturen auf, mit denen Sie künftig selbst international rekrutieren können. Sie werden Schritt für Schritt durch alle notwendigen Abläufe geführt und durch die Digitalisierung manueller Prozesse sparen Sie Zeit und personelle Ressourcen.',
      'So werden Sie unabhängiger von externen Agenturen und reduzieren dauerhaft Ihre Kosten.',
    ],
  },
  {
    question: 'Welche Qualifikationen bringen die Pflegefachkräfte mit?',
    answers: [
      'Alle Pflegefachkräfte sind fachlich vorqualifiziert, verfügen über Deutschkenntnisse und werden gezielt auf den Einsatz in Deutschland vorbereitet.',
      'In unserem Talentpool befinden sich sowohl Fachkräfte mit bereits vorliegendem Defizitbescheid als auch Kandidat:innen ohne gestellten Anerkennungsantrag, bei denen nach sorgfältiger Prüfung eine hohe Wahrscheinlichkeit für die Anerkennung als Pflegefachmann/Pflegefachfrau besteht.',
    ],
  },
  {
    question: 'Was bedeutet es, Pilot-Partner zu werden?',
    answers: [
      'Als Pilot-Partner gestalten Sie unser Angebot aktiv mit und profitieren von exklusivem Zugang zu Pflegekräften, vergünstigten Konditionen und direktem Austausch mit unserem Gründerteam.',
      'Für eine erfolgreiche Zusammenarbeit ist ein regelmäßiger, unkomplizierter Austausch wichtig. So können wir Ihre bestehenden Abläufe verstehen und gezielt Prozesse entwickeln, die Sie im Alltag spürbar entlasten. Dabei halten wir den Abstimmungsaufwand für Sie so gering wie möglich.'
    ],
  },
  {
    question: 'Welche Kosten kommen auf mich zu?',
    answers: [
      'Wohlfahrtsorganisationen, gemeinnützigen Trägern und Einrichtungen in Brandenburg bieten wir die Teilnahme an unserem Pilotprogramm kostenfrei an.',
      'Für alle weiteren Pilotpartner stellen wir unseren Service zum Selbstkostenpreis bereit. Dieser liegt aktuell bei einem festen, reduzierten Preis von ca. 3.500 € pro erfolgreicher Vermittlung. Zusätzlich fallen ausschließlich tatsächlich entstehende externe Kosten an, etwa für Visa, Behörden oder Übersetzungen, transparent und ohne versteckte Gebühren.',
      'In der Pilotphase liegt unser Fokus darauf, die größten Herausforderungen im Recruiting internationaler Pflegefachkräfte zu verstehen und gezielt digitale Lösungen zu entwickeln. Es geht uns derzeit nicht um Gewinnmaximierung, sondern darum, Prozesse nachhaltig zu verbessern.'
    ],
  },
  {
    question: 'Warum gibt es HeyGermany?',
    answers: [
      'HeyGermany versteht sich als soziales Impact-Projekt. Wir wollen eine Brücke zwischen internationalen Bewerber:innen und deutschen Pflegeeinrichtungen bauen, um zwei der größten Herausforderungen unserer Zeit gemeinsam zu bewältigen: den Fachkräftemangel in der Pflege und die erfolgreiche Arbeitsmarktintegration internationaler Fachkräfte.',
    ],
  },
]

const footerLogos = [
  {
    src: '/footer-logos/hwr-logo-alt.svg',
    alt: 'HWR Berlin logo mark',
    width: 40,
    height: 66,
  },
  {
    src: '/footer-logos/hwr-type.svg',
    alt: 'HWR Berlin wordmark',
    width: 247,
    height: 65,
  },
  {
    src: '/footer-logos/sib-logo.png',
    alt: 'Startup Incubator Berlin logo',
    width: 1215,
    height: 314,
  },
  {
    src: '/footer-logos/berlin-logo.webp',
    alt: 'Berlin logo',
    width: 866,
    height: 650,
  },
  {
    src: '/footer-logos/eu-funded-by-eu.png',
    alt: 'Kofinanziert von der Europäischen Union',
    width: 3955,
    height: 788,
  },
] as const

const [hwrMarkLogo, hwrWordmarkLogo, sibLogo, berlinLogo, euLogo] = footerLogos

type LeadFormState = {
  firstName: string
  lastName: string
  email: string
  phone: string
  facilityName: string
  facilityType: string
  nursesNeededRange: string
  message: string
}

const initialFormState: LeadFormState = {
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  facilityName: '',
  facilityType: '',
  nursesNeededRange: '',
  message: '',
}

const getApiBaseUrl = () => {
  if (import.meta.env.VITE_API_BASE_URL) {
    return import.meta.env.VITE_API_BASE_URL
  }

  if (typeof window === 'undefined') {
    return ''
  }

  if (
    window.location.hostname === 'localhost' ||
    window.location.hostname === '127.0.0.1'
  ) {
    return 'http://localhost:3000'
  }

  return 'https://api.hey-germany.com'
}

export const PilotLandingPage = () => {
  const [open, setOpen] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const [formState, setFormState] = useState<LeadFormState>(initialFormState)

  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
    setOpen(false)
  }

  const handleChange = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    const { name, value } = event.currentTarget

    setFormState((current) => ({
      ...current,
      [name]: value,
    }))
  }

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setIsSubmitting(true)
    setErrorMessage(null)

    try {
      const response = await fetch(`${getApiBaseUrl()}/leads`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formState),
      })

      if (!response.ok) {
        throw new Error('Lead submission failed')
      }

      setSubmitted(true)
      setFormState(initialFormState)
    } catch (error) {
      console.error('Lead submission failed', error)
      setErrorMessage('Die Anfrage konnte gerade nicht übermittelt werden. Bitte versuchen Sie es erneut.')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <main className={styles.page}>
      <nav className={styles.navbar}>
        <div className={styles.container}>
          <div className={styles.navbarInner}>
            <span className={styles.brand}>HeyGermany</span>

            <div className={styles.navLinks}>
              <button type="button" onClick={() => scrollTo('angebot')}>
                Angebot
              </button>
              <button type="button" onClick={() => scrollTo('register')}>
                Registrieren
              </button>
              <button
                type="button"
                className={styles.headerButton}
                onClick={() => scrollTo('register')}
              >
                Pilot-Partner werden
              </button>
            </div>

            <div className={styles.mobileHeaderActions}>
              <button
                type="button"
                className={`${styles.headerButton} ${styles.mobileHeaderButton}`}
                onClick={() => scrollTo('register')}
              >
                Pilot-Partner werden
              </button>

              <button
                type="button"
                className={styles.mobileToggle}
                onClick={() => setOpen(!open)}
                aria-label="Menü umschalten"
              >
                {open ? <IconX size={22} /> : <IconMenu2 size={22} />}
              </button>
            </div>
          </div>

          {open ? (
            <div className={styles.mobileMenu}>
              <button type="button" onClick={() => scrollTo('angebot')}>
                Angebot
              </button>
              <button type="button" onClick={() => scrollTo('register')}>
                Registrieren
              </button>
              <button
                type="button"
                className={styles.headerButton}
                onClick={() => scrollTo('register')}
              >
                Pilot-Partner werden
              </button>
            </div>
          ) : null}
        </div>
      </nav>

      <section className={styles.hero}>
        <div className={styles.heroMedia}>
          <img
            src="/images/pilot-hero-nurses.jpg"
            alt="Internationale Pflegekräfte in einem deutschen Krankenhaus"
            loading="eager"
            sizes="100vw"
            className={styles.heroImage}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
          />
          <div className={styles.heroOverlay} />
        </div>

        <div className={`${styles.container} ${styles.heroInner}`}>
          <div className={styles.heroCopy}>
            <span className={styles.heroBadge}>🚀 Jetzt als Pilot-Partner bewerben</span>
            <h1 className={styles.heroTitle}>
              Internationale Pflegekräfte
              <br />
              <span>ohne Agenturen</span> gewinnen.
            </h1>
            <p className={styles.heroDescription}>
              Erhalten Sie direkten Zugang zu vorqualifizierten internationalen Pflegefachkräften und
              bauen Sie gleichzeitig eigene, nachhaltige Strukturen für Rekrutierung und Integration auf.
            </p>
            <p className={styles.heroDescription}>
              Unsere Lösung vereinfacht und automatisiert die Prozesse der Erwerbsmigration genau dort,
              wo sie für Sie den größten Mehrwert schafft. So besetzen Sie Stellen schneller, reduzieren
              Kosten und machen sich unabhängig von Agenturen. Dabei entwickeln wir eine passgenaue
              Lösung, individuell abgestimmt auf die Bedarfe Ihrer Einrichtung.
            </p>

            <div className={styles.heroActions}>
              <button
                type="button"
                className={styles.heroButton}
                onClick={() => scrollTo('register')}
              >
                Pilot-Partner werden
              </button>
              <button
                type="button"
                className={styles.heroOutlineButton}
                onClick={() => scrollTo('angebot')}
              >
                Mehr erfahren
              </button>
            </div>
          </div>
        </div>

        <div className={styles.scrollIndicator} aria-hidden="true">
          <IconArrowDown size={24} />
        </div>
      </section>

      <section className={styles.section}>
        <div className={styles.container}>
          <div className={`${styles.sectionHeader} ${styles.sectionHeaderCentered}`}>
            <span className={styles.sectionEyebrow}>Das Problem</span>
            <h2>Pflege in der Krise – und kein Ende in Sicht</h2>
            <p>
              Deutsche Pflegeeinrichtungen stehen vor enormen Herausforderungen bei der Gewinnung
              qualifizierter Fachkräfte.
            </p>
          </div>

          <div className={styles.problemGrid}>
            {problems.map(({ icon: Icon, title, description }) => (
              <article key={title} className={styles.problemCard}>
                <div className={styles.problemIcon}>
                  <Icon size={24} />
                </div>
                <h3>{title}</h3>
                <p>{description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="angebot" className={`${styles.section} ${styles.sectionMuted}`}>
        <div className={styles.container}>
          <div className={`${styles.sectionHeader} ${styles.sectionHeaderCentered}`}>
            <span className={styles.sectionEyebrow}>Unser Angebot</span>
            <h2>Mehr als nur Vermittlung</h2>
            <p>
              HeyGermany verbindet Fachkräftegewinnung mit dem Aufbau Ihrer eigenen Recruiting-Kompetenz.
            </p>
          </div>

          <div className={styles.offerGrid}>
            {offers.map(({ icon: Icon, step, title, description, highlights }) => (
              <article key={step} className={styles.offerCard}>
                <span className={styles.offerStep}>{step}</span>
                <div className={styles.offerIcon}>
                  <Icon size={28} />
                </div>
                <h3>{title}</h3>
                <p>{description}</p>
                <ul className={styles.offerHighlights}>
                  {highlights.map((highlight) => (
                    <li key={highlight}>
                      <IconCircleCheck size={16} />
                      <span>{highlight}</span>
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className={styles.section}>
        <div className={styles.container}>
          <div className={`${styles.sectionHeader} ${styles.sectionHeaderCentered}`}>
            <span className={styles.sectionEyebrow}>Ihre Vorteile</span>
            <h2>Warum Pflegeeinrichtungen HeyGermany wählen</h2>
          </div>

          <div className={styles.benefitGrid}>
            {benefits.map(({ icon: Icon, title, description }) => (
              <article key={title} className={styles.benefitItem}>
                <div className={styles.benefitIcon}>
                  <Icon size={32} />
                </div>
                <h3>{title}</h3>
                <p>{description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className={`${styles.section} ${styles.sectionFaq}`}>
        <div className={styles.container}>
          <div className={`${styles.sectionHeader} ${styles.sectionHeaderCentered}`}>
            <span className={styles.sectionEyebrow}>FAQ</span>
            <h2>Häufig gestellte Fragen</h2>
            <p>Hier finden Sie Antworten auf die wichtigsten Fragen rund um HeyGermany.</p>
          </div>

          <div className={styles.faqList}>
            {faqs.map((faq, index) => (
              <details key={faq.question} className={styles.faqItem} name="pilot-faq">
                <summary>
                  <span>{faq.question}</span>
                  <IconChevronDown size={18} />
                </summary>
                <div className={styles.faqAnswer}>
                  {faq.answers.map((answer) => (
                    <p key={`${index}-${answer}`}>{answer}</p>
                  ))}
                </div>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section id="register" className={`${styles.section} ${styles.registerSection}`}>
        <div className={styles.container}>
          {submitted ? (
            <div className={styles.successWrap}>
              <div className={styles.successIcon}>
                <IconCircleCheck size={40} />
              </div>
              <h2>Bewerbung eingegangen!</h2>
              <p>
                Vielen Dank für Ihr Interesse. Unser Team wird sich innerhalb von 48 Stunden bei Ihnen
                melden, um die nächsten Schritte zu besprechen.
              </p>
            </div>
          ) : (
            <div className={styles.registerGrid}>
              <div className={styles.registerCopy}>
                <span className={styles.registerEyebrow}>Limitierte Plätze</span>
                <h2>Jetzt als Pilot-Partner bewerben</h2>
                <p>
                  Wir suchen ausgewählte Pflegeeinrichtungen in Deutschland, die als Pilot-Partner unser
                  Projekt mitgestalten möchten. Als Pilot-Partner profitieren Sie von:
                </p>
                <ul className={styles.registerBenefits}>
                  {[
                    'Exklusiver Zugang zu vorqualifizierten Pflegekräften',
                    'Langfristig vergünstigte Konditionen',
                    'Direkter Draht zu unserem Gründerteam',
                    'Mitgestaltung der Lösung nach Ihren Bedürfnissen',
                  ].map((benefit) => (
                    <li key={benefit}>
                      <IconCircleCheck size={20} />
                      <span>{benefit}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className={styles.formWrap}>
                <form onSubmit={handleSubmit} className={styles.formCard}>
                  <h3>Kontaktdaten</h3>

                  <div className={styles.fieldGrid}>
                    <label>
                      <span>Vorname *</span>
                      <input
                        required
                        name="firstName"
                        value={formState.firstName}
                        onChange={handleChange}
                        placeholder="Max"
                      />
                    </label>
                    <label>
                      <span>Nachname *</span>
                      <input
                        required
                        name="lastName"
                        value={formState.lastName}
                        onChange={handleChange}
                        placeholder="Mustermann"
                      />
                    </label>
                  </div>

                  <div className={styles.fieldGrid}>
                    <label>
                      <span>E-Mail *</span>
                      <input
                        required
                        type="email"
                        name="email"
                        value={formState.email}
                        onChange={handleChange}
                        placeholder="max@pflegeeinrichtung.de"
                      />
                    </label>

                    <label>
                      <span>Telefon</span>
                      <input
                        type="tel"
                        name="phone"
                        value={formState.phone}
                        onChange={handleChange}
                        placeholder="+49 123 456789"
                      />
                    </label>
                  </div>

                  <div className={styles.fieldGrid}>
                    <label>
                      <span>Name der Einrichtung *</span>
                      <input
                        required
                        name="facilityName"
                        value={formState.facilityName}
                        onChange={handleChange}
                        placeholder="Pflegezentrum Musterstadt"
                      />
                    </label>

                    <label>
                      <span>Art der Einrichtung *</span>
                      <select
                        required
                        name="facilityType"
                        value={formState.facilityType}
                        onChange={handleChange}
                      >
                        <option value="">Bitte wählen</option>
                        {facilityTypes.map((option) => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </select>
                    </label>
                  </div>

                  <label>
                    <span>Wie viele Pflegekräfte suchen Sie aktuell?</span>
                    <select
                      name="nursesNeededRange"
                      value={formState.nursesNeededRange}
                      onChange={handleChange}
                    >
                      <option value="">Bitte wählen</option>
                      {nursesNeededRanges.map((option) => (
                        <option key={option.value} value={option.value}>
                          {option.label}
                        </option>
                      ))}
                    </select>
                  </label>

                  <label>
                    <span>Nachricht (optional)</span>
                    <textarea
                      name="message"
                      rows={3}
                      value={formState.message}
                      onChange={handleChange}
                      placeholder="Erzählen Sie uns kurz von Ihren Herausforderungen..."
                    />
                  </label>

                  {errorMessage ? <p className={styles.errorMessage}>{errorMessage}</p> : null}

                  <button
                    type="submit"
                    className={styles.submitButton}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? 'Wird gesendet ...' : 'Jetzt als Pilot-Partner bewerben'}
                  </button>

                  <p className={styles.formHint}>
                    Ihre Daten werden vertraulich behandelt. Wir melden uns innerhalb von 48 Stunden.
                  </p>
                </form>
              </div>
            </div>
          )}
        </div>
      </section>

      <footer className={styles.footer}>
        <div className={styles.container}>
          <div className={styles.footerCenter}>
            <p className={styles.footerMetaText}>
              HeyGermany | Internationale Pflegekräfte für Deutschland
            </p>

            <div className={styles.footerLogoList} aria-label="Partner und Förderlogos">
              <div className={styles.footerLogoPair}>
                <div className={styles.footerLogoItem}>
                  <img
                    src={hwrMarkLogo.src}
                    alt={hwrMarkLogo.alt}
                    width={hwrMarkLogo.width}
                    height={hwrMarkLogo.height}
                    sizes="(max-width: 640px) 42vw, (max-width: 1024px) 28vw, 220px"
                    className={styles.footerLogoImage}
                  />
                </div>

                <div className={styles.footerLogoItem}>
                  <img
                    src={hwrWordmarkLogo.src}
                    alt={hwrWordmarkLogo.alt}
                    width={hwrWordmarkLogo.width}
                    height={hwrWordmarkLogo.height}
                    sizes="(max-width: 640px) 42vw, (max-width: 1024px) 28vw, 220px"
                    className={styles.footerLogoImage}
                  />
                </div>
              </div>

              <div className={styles.footerLogoItem}>
                <img
                  src={sibLogo.src}
                  alt={sibLogo.alt}
                  width={sibLogo.width}
                  height={sibLogo.height}
                  sizes="(max-width: 640px) 42vw, (max-width: 1024px) 28vw, 220px"
                  className={styles.footerLogoImage}
                />
              </div>

              <div className={styles.footerLogoItem}>
                <img
                  src={berlinLogo.src}
                  alt={berlinLogo.alt}
                  width={berlinLogo.width}
                  height={berlinLogo.height}
                  sizes="(max-width: 640px) 42vw, (max-width: 1024px) 28vw, 220px"
                  className={styles.footerLogoImage}
                />
              </div>

              <div className={styles.footerLogoItem}>
                <img
                  src={euLogo.src}
                  alt={euLogo.alt}
                  width={euLogo.width}
                  height={euLogo.height}
                  sizes="(max-width: 640px) 42vw, (max-width: 1024px) 28vw, 220px"
                  className={styles.footerLogoImage}
                />
              </div>
            </div>

            <nav className={styles.footerLinks} aria-label="Rechtliches und Kontakt">
              <Link to="/de/legal/imprint">Impressum</Link>
              <Link to="/de/legal/terms-and-conditions">Nutzungsbedingungen</Link>
              <Link to="/de/legal/privacy">Datenschutzhinweis</Link>
              <a href="mailto:info@hey-germany.com">Kontakt</a>
            </nav>

            <p className={styles.footerCopyright}>
              © {new Date().getFullYear()} HeyGermany. Alle Rechte vorbehalten.
            </p>
          </div>
        </div>
      </footer>
    </main>
  )
}
