import React, { useEffect, useRef, useState } from 'react';
import { Button } from '@/spa/components/ui/button';
import { Play, ChevronRight, X, Star } from 'lucide-react';
import { Link } from '@/spa/router';
import { PartnerTicker } from '@/spa/components/ui/partner-ticker';
import { WINNERS } from '@/spa/data/winners';
import BewerbungsForm from '@/spa/components/forms/BewerbungsForm';
import { NewsletterInterestForm, type NewsletterBenefit, type NewsletterInterestCms, type NewsletterInterestCopy } from '@/spa/components/forms/NewsletterInterestForm';
import TestimonialsSection from '@/spa/components/TestimonialsSection';
import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg';
import { useIsMobile } from '@/spa/hooks/useIsMobile';
import Image from '@/spa/components/ui/UnoptimizedImage'
import type { SpaApplicationPhaseData, SpaApplicationPhaseItem } from '@/spa/applicationPhase'
import { useApplicationPhase, useCmsCollection, useCmsRoute } from '@/spa/cmsRoute'
import { mediaAlt, mediaUrl } from '@/spa/cmsMediaField'
import { homeContent } from '@/spa/homeContent'
import { netzwerkContent } from '@/spa/netzwerkContent'
import { PartnerLogoMark, type PartnerLogoData } from '@/spa/components/ui/partner-logo'

const FF = '"IBM Plex Sans", sans-serif';

type CmsRecord = Record<string, unknown>;
type CmsLink = { label?: string | null; to?: string | null; url?: string | null };
type HomeHeroCms = {
  backgroundImage?: unknown;
  badge?: string | null;
  description?: string | null;
  headingAccent?: string | null;
  headingLine1?: string | null;
  imageAlt?: string | null;
  partners?: unknown;
  partnersLabel?: string | null;
  primaryCta?: CmsLink | null;
  secondaryCta?: CmsLink | null;
  videoLabel?: string | null;
};
type HomeSectionCms = CmsRecord & {
  awardCaption?: string | null;
  awardImage?: unknown;
  awardImageAlt?: string | null;
  benefits?: unknown;
  body?: string | null;
  cardFallbackTitle?: string | null;
  criteria?: unknown;
  cta?: CmsLink | null;
  eyebrow?: string | null;
  fallbackImage?: unknown;
  featured?: unknown;
  footnote?: string | null;
  footnoteStrong?: string | null;
  formEyebrow?: string | null;
  formTitle?: string | null;
  heading?: string | null;
  hoverLabel?: string | null;
  image?: unknown;
  imageAlt?: string | null;
  imageLabel?: string | null;
  items?: unknown;
  newsletterPhaseCompleted?: NewsletterInterestCms | null;
  newsletterPhaseEvaluation?: NewsletterInterestCms | null;
  note?: string | null;
  quote?: string | null;
  stats?: unknown;
};
type HomeVideoModalCms = {
  closeLabel?: string | null;
  description?: string | null;
  title?: string | null;
  video?: unknown;
};
type HomeTestimonialsCms = {
  desktopHeading?: string | null;
  eyebrow?: string | null;
  heading?: string | null;
  items?: Array<Record<string, unknown>> | null;
  nextLabel?: string | null;
  previousLabel?: string | null;
  slideLabelPrefix?: string | null;
  yearPrefix?: string | null;
};
type HomeCms = {
  application?: HomeSectionCms;
  benefits?: HomeSectionCms;
  form?: Partial<typeof homeContent.form>;
  hero?: HomeHeroCms;
  intro?: HomeSectionCms;
  quickCheck?: HomeSectionCms;
  testimonials?: HomeTestimonialsCms;
  videoModal?: HomeVideoModalCms;
  winners?: HomeSectionCms;
};
type NetzwerkPartnersCms = {
  defaultLogoColor?: string | null;
};
type RenderedStatusPhase = Omit<SpaApplicationPhaseItem, 'accent' | 'bg' | 'cta' | 'membershipCta'> & {
  accent: string;
  bg: string;
  cta?: { label: string; to: string } | null;
  membershipCta?: { label: string; to: string } | null;
};
type WinnerCardData = CmsRecord & {
  id?: string | number;
  slug?: string;
  title?: string;
  name?: string;
  img?: string;
  image?: unknown;
  spaPath?: string;
  year?: string | number;
  awardType?: string;
  type?: string;
  category?: string;
};

const fallbackText = (value: unknown, fallback: string) =>
  typeof value === 'string' && value.length > 0 ? value : fallback;

const fallbackArray = <T,>(value: unknown, fallback: readonly T[]) =>
  Array.isArray(value) && value.length > 0 ? (value as T[]) : fallback;

const HIDE_MEMBERSHIP_HOME_HERO_CTA = true;
const APPLICATION_PHASE_OPEN = '0';

const newsletterInterestCopy: Record<string, NewsletterInterestCopy> = {
  '1': homeContent.application.newsletterPhaseEvaluation,
  '2': homeContent.application.newsletterPhaseCompleted,
};

const mergeNewsletterInterestCopy = (
  value: NewsletterInterestCms | null | undefined,
  fallback: NewsletterInterestCopy,
): NewsletterInterestCopy => ({
  eyebrow: fallbackText(value?.eyebrow, fallback.eyebrow),
  heading: fallbackText(value?.heading, fallback.heading),
  body: fallbackText(value?.body, fallback.body),
  benefits: fallbackArray<NewsletterBenefit>(value?.benefits, fallback.benefits),
  formEyebrow: fallbackText(value?.formEyebrow, fallback.formEyebrow),
  formTitle: fallbackText(value?.formTitle, fallback.formTitle),
  formBody: fallbackText(value?.formBody, fallback.formBody),
  emailLabel: fallbackText(value?.emailLabel, fallback.emailLabel),
  emailPlaceholder: fallbackText(value?.emailPlaceholder, fallback.emailPlaceholder),
  submitLabel: fallbackText(value?.submitLabel, fallback.submitLabel),
  privacy: fallbackText(value?.privacy, fallback.privacy),
  validationRequired: fallbackText(value?.validationRequired, fallback.validationRequired),
  validationInvalid: fallbackText(value?.validationInvalid, fallback.validationInvalid),
  successHeading: fallbackText(value?.successHeading, fallback.successHeading),
  successBody: fallbackText(value?.successBody, fallback.successBody),
  footnote: fallbackText(value?.footnote, fallback.footnote),
  footnoteStrong: fallbackText(value?.footnoteStrong, fallback.footnoteStrong),
});

const getNewsletterInterestCopy = (phase: string | undefined, application: HomeSectionCms) => {
  const fallback = newsletterInterestCopy[phase || ''] || newsletterInterestCopy['2'];
  const cmsCopy = phase === '1' ? application.newsletterPhaseEvaluation : application.newsletterPhaseCompleted;
  return mergeNewsletterInterestCopy(cmsCopy, fallback);
};

const isMembershipCta = (cta?: { label?: string; url?: string; to?: string } | null) =>
  cta?.url === '/mitglied-werden' ||
  cta?.to === '/mitglied-werden' ||
  cta?.label?.trim().toLowerCase() === 'mitglied werden';

function Lines({ text }: { text: string }) {
  return <>{text.split('\n').map((line, i) => <React.Fragment key={`${line}-${i}`}>{i > 0 && <br />}{line}</React.Fragment>)}</>;
}

const isNetzwerkPage = (page: CmsRecord) =>
  page.spaPath === '/netzwerk' || page.slug === 'netzwerk' || page.slug === 'network'

function partnerLogos(partners: PartnerLogoData[], defaultLogoColor: string) {
  return partners.map((partner, index) => ({
    id: String(partner.stableId || partner.id || partner.name || index),
    label: (
      <span
        aria-label={fallbackText(partner.name, 'Partner')}
        style={{
          width: 224,
          height: 54,
          padding: '9px 18px',
          background: 'rgba(255,255,255,0.92)',
          border: '1px solid rgba(255,255,255,0.18)',
          borderRadius: 6,
          boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <PartnerLogoMark partner={partner} defaultLogoColor={defaultLogoColor} />
      </span>
    ),
  }));
}

function sortedPartners<T extends PartnerLogoData>(partners: T[]) {
  return partners
    .map((partner, index) => ({ partner, index }))
    .sort((a, b) => Number(a.partner.sortOrder ?? a.index) - Number(b.partner.sortOrder ?? b.index))
    .map(({ partner }) => partner);
}

function HomeWinnerCard({
  winner,
  fallbackTitle,
  fallbackImage,
  hoverLabel,
}: {
  winner: WinnerCardData;
  fallbackTitle: string;
  fallbackImage: string;
  hoverLabel: string;
}) {
  const [hovered, setHovered] = useState(false);
  const isMobile = useIsMobile();
  const staticWinner = WINNERS.find(
    (item) =>
      String(item.id) === String(winner?.id) ||
      item.slug === winner?.slug ||
      item.name === winner?.title ||
      item.name === winner?.name,
  );
  const title = fallbackText(winner?.title, fallbackText(winner?.name, staticWinner?.name || fallbackTitle));
  const imageSrc = mediaUrl(winner?.image, winner?.img || staticWinner?.img || fallbackImage);
  const href = winner?.spaPath || (winner?.slug ? `/preistraeger/${winner.slug}` : staticWinner ? `/preistraeger/${staticWinner.slug}` : '/preistraeger');
  return (
    <Link
      to={href}
      style={{ textDecoration: 'none', display: 'block', position: 'relative', height: isMobile ? 220 : 280, overflow: 'hidden', scrollSnapAlign: isMobile ? 'start' : undefined }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <Image unoptimized src={imageSrc} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.5s ease', transform: hovered ? 'scale(1.07)' : 'scale(1)', filter: 'grayscale(15%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%, transparent 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.2)', opacity: hovered ? 1 : 0, transition: 'opacity 0.25s' }} />
      <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, padding: '18px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 5 }}>
          <Star size={10} style={{ color: '#EFBF04', flexShrink: 0 }} fill="#EFBF04" />
          <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{winner?.year || staticWinner?.year} · {winner?.awardType || winner?.type || staticWinner?.type}</span>
        </div>
        <h3 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight: 700, color: '#fff', margin: '0 0 3px', lineHeight: 1.3 }}>{title}</h3>
        <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.75)', margin: 0 }}>{winner?.category || staticWinner?.category}</p>
        <div style={{ marginTop: 10, display: 'inline-block', background: '#EFBF04', color: '#101828', padding: '5px 14px', borderRadius: 999, fontSize: 10, fontFamily: '"IBM Plex Sans", sans-serif', fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: hovered ? 1 : 0, transform: hovered ? 'translateY(0)' : 'translateY(6px)', transition: 'all 0.25s' }}>
          {hoverLabel}
        </div>
      </div>
    </Link>
  );
}

const Home: React.FC = () => {
  const [showVideo, setShowVideo] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);
  const isMobile = useIsMobile();
  const home = (useCmsRoute()?.doc?.home || {}) as HomeCms;
  const netzwerkPage = useCmsCollection('pages').find((page) => isNetzwerkPage(page as CmsRecord)) as
    | ({ netzwerk?: { partners?: NetzwerkPartnersCms } } & CmsRecord)
    | undefined;
  const partnerSection = netzwerkPage?.netzwerk?.partners;
  const defaultLogoColor = fallbackText(partnerSection?.defaultLogoColor, netzwerkContent.partners.defaultLogoColor);
  const cmsPartners = useCmsCollection('partners') as PartnerLogoData[];
  const partnerSource = cmsPartners.length ? cmsPartners : (netzwerkContent.partners.items as PartnerLogoData[]);
  const networkPartners = sortedPartners(partnerSource)
    .filter((partner) => partner.active !== false && partner.showOnHomepage !== false)
    .map((partner) => ({
      ...partner,
      id: partner.stableId || partner.id,
      logoColor: fallbackText(partner.logoColor, defaultLogoColor),
    }));
  const hero = home.hero || {};
  const quickCheck = home.quickCheck || {};
  const intro = home.intro || {};
  const winnersSection = home.winners || {};
  const benefits = home.benefits || {};
  const application = home.application || {};
  const form = home.form || {};
  const videoModal = home.videoModal || {};
  const applicationPhase = useApplicationPhase();
  const activeApplicationPhase = applicationPhase?.activePhase || APPLICATION_PHASE_OPEN;
  const showApplicationForm = activeApplicationPhase === APPLICATION_PHASE_OPEN;
  const newsletterCopy = getNewsletterInterestCopy(activeApplicationPhase, application);
  const cmsPreistraeger = useCmsCollection('preistraeger');
  const selectedWinners = fallbackArray(winnersSection.featured, []);
  const heroSecondaryCta = {
    label: fallbackText(hero.secondaryCta?.label, homeContent.hero.secondaryCta.label),
    url: fallbackText(hero.secondaryCta?.url, homeContent.hero.secondaryCta.url),
  };
  const showHeroSecondaryCta = !HIDE_MEMBERSHIP_HOME_HERO_CTA || !isMembershipCta(heroSecondaryCta);
  const selectedWinnerDocs = selectedWinners
    .map((selected) => {
      const selectedRecord = selected as { id?: string | number }
      const selectedID = typeof selected === 'object' && selected !== null ? selectedRecord.id : selected
      const listDoc = cmsPreistraeger.find((doc) => String((doc as { id?: string | number }).id) === String(selectedID))
      return listDoc || (typeof selected === 'object' ? selected : undefined)
    })
  .filter(Boolean)
  const homeWinners = selectedWinnerDocs.length
    ? selectedWinnerDocs
    : (cmsPreistraeger.length ? cmsPreistraeger : WINNERS).filter((w) => Number((w as { year?: string | number }).year) === 2025).slice(0, 8);
  const quickCriteria = fallbackArray(quickCheck.criteria, homeContent.quickCheck.criteria);
  const introStats = fallbackArray(intro.stats, homeContent.intro.stats);
  const benefitItems = fallbackArray(benefits.items, homeContent.benefits.items);
  const applicationBenefits = fallbackArray(application.benefits, homeContent.application.benefits);
  const finalSectionBenefits = showApplicationForm ? applicationBenefits : newsletterCopy.benefits;
  const winnerFallbackImage = mediaUrl(winnersSection.fallbackImage, `/images/${homeContent.winners.fallbackImageFilename}`);
  const videoTitle = fallbackText(videoModal.title, homeContent.videoModal.title);
  const videoSrc = mediaUrl(videoModal.video, '');

  useEffect(() => {
    if (!showVideo || !videoSrc) return;

    videoRef.current?.play().catch(() => {
      // Browser autoplay rules can still require the native control click.
    });
  }, [showVideo, videoSrc]);

  return (
    <div className="animate-fade-in">
      {/* Hero Section */}
      <section className="relative flex items-center overflow-hidden" style={{ background: '#111D55', height: isMobile ? '88svh' : '100vh' }}>
        <div className="absolute inset-0 z-0">
          <Image unoptimized
            src={mediaUrl(hero.backgroundImage, `/images/${homeContent.hero.backgroundImageFilename}`)}
            alt={mediaAlt(hero.backgroundImage, fallbackText(hero.imageAlt, homeContent.hero.imageAlt))}
            className="w-full h-full object-cover scale-105"
            style={{ objectPosition: 'center top' }}
          />
          <div style={{ position:'absolute', inset:0, background: isMobile ? 'linear-gradient(to top, rgba(17,29,85,0.96) 0%, rgba(17,29,85,0.82) 42%, rgba(17,29,85,0.48) 72%, rgba(17,29,85,0.22) 100%)' : 'linear-gradient(to right, #111D55 0%, rgba(17,29,85,0.90) 38%, rgba(17,29,85,0.18) 65%, transparent 100%)' }}></div>
        </div>

        <div className="container mx-auto relative z-10" style={{ padding: isMobile ? '0 24px' : '0 24px' }}>
          <div style={{ maxWidth: isMobile ? '100%' : '48rem' }}>
            <div className="inline-flex items-center gap-3 bg-accent/20 border border-accent/30 rounded-full px-4 py-1.5 mb-8 backdrop-blur-sm animate-fade-in" style={{ marginBottom: isMobile ? 20 : undefined }}>
              <span className="flex h-2 w-2 rounded-full bg-accent"></span>
              <span className="text-accent text-[10px] uppercase tracking-[0.2em] font-bold">{fallbackText(hero.badge, homeContent.hero.badge)}</span>
            </div>
            
            <h1 className="font-display font-bold text-white mb-6 leading-[0.9] tracking-tight" style={{ fontSize: isMobile ? 'clamp(1.8rem, 10vw, 3rem)' : 'clamp(3.5rem, 8vw, 6rem)' }}>
              {fallbackText(hero.headingLine1, homeContent.hero.headingLine1)} <br />
              <span className="text-accent">{fallbackText(hero.headingAccent, homeContent.hero.headingAccent)}</span>
            </h1>
            
            <p className="text-white/70 mb-12 font-light leading-relaxed" style={{ fontSize: isMobile ? '1.0625rem' : '1.375rem', maxWidth: isMobile ? '100%' : '36rem', marginBottom: isMobile ? 28 : undefined }}>
              {fallbackText(hero.description, homeContent.hero.description)}
            </p>
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Link
                to={fallbackText(hero.primaryCta?.url, homeContent.hero.primaryCta.url)}
                style={{ fontFamily:'"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.12em', color:'#101828', background:'#EFBF04', padding:'16px 36px', textDecoration:'none', display:'inline-flex', alignItems:'center', justifyContent: isMobile ? 'center' : 'flex-start', gap:10, transition:'background 0.15s, box-shadow 0.2s', width: isMobile ? '100%' : 'auto' }}
                onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = '#FFD130'; (e.currentTarget as HTMLElement).style.boxShadow = '0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)'; }}
                onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.boxShadow = 'none'; }}
              >
                {fallbackText(hero.primaryCta?.label, homeContent.hero.primaryCta.label)} <ChevronRight size={16} />
              </Link>
              <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 16, alignItems: isMobile ? 'stretch' : 'center' }}>
                {showHeroSecondaryCta && (
                  <Link
                    to={heroSecondaryCta.url}
                    style={{ fontFamily:'"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.12em', color:'rgba(255,255,255,0.85)', border:'1.5px solid rgba(255,255,255,0.35)', padding:'14px 32px', textDecoration:'none', display:'inline-flex', alignItems:'center', justifyContent: isMobile ? 'center' : 'flex-start', gap:10, transition:'border-color 0.15s, color 0.15s', background:'transparent', width: isMobile ? '100%' : 'auto' }}
                    onMouseEnter={e => { (e.currentTarget as HTMLElement).style.borderColor = '#EFBF04'; (e.currentTarget as HTMLElement).style.color = '#EFBF04'; }}
                    onMouseLeave={e => { (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.35)'; (e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.85)'; }}
                  >
                    {heroSecondaryCta.label}
                  </Link>
                )}
                <button
                  type="button"
                  onClick={() => setShowVideo(true)}
                  className="flex items-center gap-4 text-white hover:text-accent transition-colors group"
                  style={{ justifyContent: isMobile ? 'center' : 'flex-start' }}
                >
                  <div className="w-12 h-12 rounded-full border border-white/30 flex items-center justify-center group-hover:border-accent group-hover:bg-accent/10 transition-all">
                    <Play size={20} fill="currentColor" />
                  </div>
                  <span className="uppercase text-xs tracking-widest font-bold">{fallbackText(hero.videoLabel, homeContent.hero.videoLabel)}</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Partner Bar */}
        <div className="absolute bottom-0 left-0 w-full bg-white/5 backdrop-blur-xl border-t border-white/10 hidden lg:block">
          <div className="px-8 py-5 flex items-center justify-between opacity-60 hover:opacity-100 transition-opacity duration-500">
            {/* Left: label – stays put */}
            <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap', flexShrink: 0 }}>{fallbackText(hero.partnersLabel, homeContent.hero.partnersLabel)}</span>
            {/* Right: ticker window */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 }}>
              <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.2)' }} />
              <div style={{ width: 'min(820px, calc(100vw - 260px))', overflow: 'hidden', flexShrink: 0 }}>
                <PartnerTicker logos={partnerLogos(networkPartners, defaultLogoColor)} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Status Phase Slider */}
      <StatusSlider data={applicationPhase} />

      {/* Schnell-Check Section */}
      <section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
        <MunichSkylineBg />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', position: 'relative' }}>
          {/* Left (desktop) / Bottom (mobile) – text block (light bg, dark text) */}
          <div style={{ background: '#fff', padding: isMobile ? '32px 24px 44px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
            {/* Eyebrow + heading – desktop only (on mobile these are overlaid on the image) */}
            {!isMobile && (
              <>
                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.8rem, 2.8vw, 2.5rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
                  <Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
                </h2>
              </>
            )}
            <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28 }} />
            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
              {fallbackText(quickCheck.body, homeContent.quickCheck.body)}
            </p>
            {/* Criteria list */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 36, borderTop: '1px solid #D0D5DD' }}>
              {quickCriteria.map((item, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 0', borderBottom: '1px solid #D0D5DD' }}>
                  <div style={{ width: 24, height: 24, background: '#111D55', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1,5 3.5,7.5 9,2" stroke="#EFBF04" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <div>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 16, fontWeight: 700, color: '#101828' }}>{item.label}</div>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(16,24,40,0.5)' }}>{item.desc}</div>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 14, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6, marginTop: 16, marginBottom: 28 }}>
              {fallbackText(quickCheck.note, homeContent.quickCheck.note)}
            </p>
            <Link
              to={fallbackText(quickCheck.cta?.url, homeContent.quickCheck.cta.url)}
              style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 15, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#101828', background: '#EFBF04', padding: '15px 32px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, alignSelf: isMobile ? 'stretch' : 'flex-start', transition: 'background 0.15s, box-shadow 0.2s' }}
              onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = '#FFD130'; (e.currentTarget as HTMLElement).style.boxShadow = '0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)'; }}
              onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.boxShadow = 'none'; }}
            >
              {fallbackText(quickCheck.cta?.label, homeContent.quickCheck.cta.label)} <ChevronRight size={14} />
            </Link>
          </div>

          {/* Right (desktop) / Top (mobile) – image; on mobile the heading is overlaid here */}
          <div style={{ position: 'relative', minHeight: isMobile ? 280 : 560, overflow: 'hidden', order: isMobile ? 1 : 0 }}>
            <Image unoptimized
              src={mediaUrl(quickCheck.image, `/images/${homeContent.quickCheck.imageFilename}`)}
              alt={mediaAlt(quickCheck.image, fallbackText(quickCheck.imageAlt, homeContent.quickCheck.imageAlt))}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: isMobile ? 'center right' : 'center center' }}
            />
            {/* Overlay: mobile = navy shadow bottom-left (for the heading); desktop = leftward fade into text bg */}
            <div style={{ position: 'absolute', inset: 0, background: isMobile
              ? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.55) 34%, rgba(3,9,58,0.12) 68%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.55) 0%, transparent 55%)'
              : 'linear-gradient(to left, transparent 40%, #fff 100%)' }} />
            {/* Heading overlay – mobile only */}
            {isMobile && (
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(quickCheck.eyebrow, homeContent.quickCheck.eyebrow)}</span>
                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                  <Lines text={fallbackText(quickCheck.heading, homeContent.quickCheck.heading)} />
                </h2>
              </div>
            )}
            {/* Gold accent line – bottom edge */}
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, rgba(239,191,4,0.2), #EFBF04, rgba(239,191,4,0.2))', zIndex: 3 }} />
          </div>
        </div>
      </section>

      {/* Intro Section – editorial split, no radius, no floating badge */}
      <section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
        <MunichSkylineBg />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%' }}>
          {/* Left – full-bleed image with stats overlay (+ heading on mobile) */}
          <div style={{ position: 'relative', minHeight: isMobile ? 300 : 600, overflow: 'hidden' }}>
            <Image unoptimized
              src={mediaUrl(intro.image, `/images/${homeContent.intro.imageFilename}`)}
              alt={mediaAlt(intro.image, fallbackText(intro.imageAlt, homeContent.intro.imageAlt))}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
            />
            {/* Dark overlay */}
            <div style={{ position: 'absolute', inset: 0, background: isMobile
              ? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.5) 36%, rgba(3,9,58,0.1) 70%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
              : 'linear-gradient(to right, transparent 50%, #fff 100%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, rgba(3,9,58,0.50) 60%, transparent 100%)' }} />
            {/* Heading overlay – mobile only (bottom-left) */}
            {isMobile && (
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.9rem, 8vw, 2.5rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                  <Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
                </h2>
              </div>
            )}
            {/* Stats bottom-left – desktop only (mobile shows them below the image) */}
            {!isMobile && (
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '32px 40px', background: 'linear-gradient(to top, rgba(3,9,58,0.88) 0%, transparent 100%)', display: 'flex', gap: 36 }}>
                {introStats.map(({ value: v, label: l }) => (
                  <div key={l}>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 28, fontWeight: 900, color: '#EFBF04', lineHeight: 1 }}>{v}</div>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{l}</div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Right – editorial text */}
          <div style={{ background: '#fff', padding: isMobile ? '32px 24px 40px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            {!isMobile && (
              <>
                <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(intro.eyebrow, homeContent.intro.eyebrow)}</span>
                <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 3.2vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
                  <Lines text={fallbackText(intro.heading, homeContent.intro.heading)} />
                </h2>
              </>
            )}
            {/* Stats row – mobile only, below the image */}
            {isMobile && (
              <div style={{ display: 'flex', gap: 16, marginBottom: 28, paddingBottom: 24, borderBottom: '1px solid #D0D5DD' }}>
                {introStats.map(({ value: v, label: l }) => (
                  <div key={l} style={{ flex: 1 }}>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 26, fontWeight: 900, color: '#101828', lineHeight: 1 }}>{v}</div>
                    <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 9, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#4A8FC9', marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
            )}
            <div style={{ width: 40, height: 2, background: '#EFBF04', marginBottom: 28, display: isMobile ? 'none' : 'block' }} />
            <blockquote style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 18, fontStyle: 'italic', color: '#101828', lineHeight: 1.7, borderLeft: '3px solid #EFBF04', paddingLeft: 20, margin: '0 0 24px' }}>
              {fallbackText(intro.quote, homeContent.intro.quote)}
            </blockquote>
            <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 17, color: 'rgba(16,24,40,0.6)', lineHeight: 1.7, margin: '0 0 36px' }}>
              {fallbackText(intro.body, homeContent.intro.body)}
            </p>
            <Link
              to={fallbackText(intro.cta?.url, homeContent.intro.cta.url)}
              style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 15, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#101828', background: '#EFBF04', padding: '14px 28px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, alignSelf: isMobile ? 'stretch' : 'flex-start', transition: 'background 0.15s, box-shadow 0.2s' }}
              onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = '#FFD130'; (e.currentTarget as HTMLElement).style.boxShadow = '0 0 18px rgba(239,191,4,0.65), 0 0 40px rgba(239,191,4,0.3)'; }}
              onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = '#EFBF04'; (e.currentTarget as HTMLElement).style.boxShadow = 'none'; }}
            >
              {fallbackText(intro.cta?.label, homeContent.intro.cta.label)} <ChevronRight size={14} />
            </Link>
          </div>
        </div>
      </section>

      {/* Winners Grid – neue Preisträger-Übersicht */}
      <section style={{ background: '#111D55' }}>
        <div style={{ padding: isMobile ? '48px 24px 32px' : '72px 80px 48px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between', gap: isMobile ? 16 : 0 }}>
          <div>
            <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.3em', textTransform: 'uppercase', color: '#EFBF04', display: 'block', marginBottom: 12 }}>{fallbackText(winnersSection.eyebrow, homeContent.winners.eyebrow)}</span>
            <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(2rem, 4vw, 3rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>
              <Lines text={fallbackText(winnersSection.heading, homeContent.winners.heading)} />
            </h2>
          </div>
          <Link
            to={fallbackText(winnersSection.cta?.url, homeContent.winners.cta.url)}
            style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 15, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#EFBF04', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, paddingBottom: 4, borderBottom: '1px solid #EFBF04', whiteSpace: 'nowrap' }}
          >
            {fallbackText(winnersSection.cta?.label, homeContent.winners.cta.label)} <ChevronRight size={14} />
          </Link>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? undefined : 'repeat(4, 1fr)',
          gridAutoFlow: isMobile ? 'column' : undefined,
          gridTemplateRows: isMobile ? 'repeat(2, 1fr)' : undefined,
          gridAutoColumns: isMobile ? '66vw' : undefined,
          overflowX: isMobile ? 'auto' : undefined,
          scrollSnapType: isMobile ? 'x mandatory' : undefined,
          gap: isMobile ? 8 : 0,
          padding: isMobile ? '0 16px 8px' : 0,
          WebkitOverflowScrolling: 'touch',
          scrollbarWidth: 'none',
        }}>
          {homeWinners.map((w) => (
            <HomeWinnerCard
              key={(w as WinnerCardData).id || (w as WinnerCardData).slug}
              winner={w as WinnerCardData}
              fallbackTitle={fallbackText(winnersSection.cardFallbackTitle, homeContent.winners.cardFallbackTitle)}
              fallbackImage={winnerFallbackImage}
              hoverLabel={fallbackText(winnersSection.hoverLabel, homeContent.winners.hoverLabel)}
            />
          ))}
        </div>
      </section>

      {/* Testimonials Section */}
      <TestimonialsSection data={home.testimonials} />


      {/* Benefits Section – editorial split */}
      <section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
        <MunichSkylineBg />
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%', minHeight: isMobile ? 'auto' : 560 }}>

          {/* Left – text on white */}
          <div style={{ background: '#fff', padding: isMobile ? '32px 24px 44px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
            {!isMobile && (
              <>
                <span style={{ fontFamily: FF, fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
                <h2 style={{ fontFamily: FF, fontSize: 'clamp(2rem, 3vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 48px' }}>
                  <Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
                </h2>
              </>
            )}

            {/* Numbered rows – no cards, no shadows */}
            <div style={{ borderTop: '1px solid #D0D5DD' }}>
              {benefitItems.map((item, i) => (
                <div
                  key={i}
                  style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: '0 20px', padding: '24px 0', borderBottom: '1px solid #D0D5DD', cursor: 'default', transition: 'background 0.15s' }}
                  onMouseEnter={e => (e.currentTarget.style.background = 'rgba(17,29,85,0.04)')}
                  onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                >
                  <span style={{ fontFamily: FF, fontSize: 11, fontWeight: 700, color: '#EFBF04', letterSpacing: '0.1em', paddingTop: 2 }}>{item.num}</span>
                  <div>
                    <div style={{ fontFamily: FF, fontSize: 17, fontWeight: 700, color: '#101828', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 5 }}>{item.title}</div>
                    <div style={{ fontFamily: FF, fontSize: 16, color: 'rgba(16,24,40,0.55)', lineHeight: 1.6 }}>{item.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right – full-bleed photo (+ heading on mobile) */}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : 'auto', order: isMobile ? 1 : 0 }}>
            <Image unoptimized
              src={mediaUrl(benefits.image, `/images/${homeContent.benefits.imageFilename}`)}
              alt={mediaAlt(benefits.image, fallbackText(benefits.imageAlt, homeContent.benefits.imageAlt))}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center', display: 'block' }}
            />
            <div style={{ position: 'absolute', inset: 0, background: isMobile
              ? 'linear-gradient(to top, rgba(3,9,58,0.92) 0%, rgba(3,9,58,0.5) 36%, rgba(3,9,58,0.1) 70%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
              : 'linear-gradient(to right, #fff 0%, transparent 30%), linear-gradient(to top, rgba(3,9,58,0.82) 0%, transparent 50%)' }} />
            {/* Heading overlay – mobile only (bottom-left) */}
            {isMobile && (
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 26px', zIndex: 2 }}>
                <span style={{ fontFamily: FF, fontSize: 10, color: '#8FBEEC', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(benefits.eyebrow, homeContent.benefits.eyebrow)}</span>
                <h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.4rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, textShadow: '0 2px 18px rgba(3,9,58,0.5)' }}>
                  <Lines text={fallbackText(benefits.heading, homeContent.benefits.heading)} />
                </h2>
              </div>
            )}
            {/* Bottom-left label – desktop only */}
            {!isMobile && (
              <div style={{ position: 'absolute', bottom: 40, left: 40 }}>
                <div style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#EFBF04', marginBottom: 6 }}>{fallbackText(benefits.imageLabel, homeContent.benefits.imageLabel)}</div>
                <div style={{ width: 32, height: 2, background: '#EFBF04' }} />
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA Section – with phase-aware embedded form */}
      <section style={{ background: '#24366A', position: 'relative', overflow: 'hidden', height: isMobile ? 'auto' : showApplicationForm ? 'calc(100vh - 60px)' : 'auto', minHeight: isMobile ? undefined : showApplicationForm ? undefined : 560, display: 'flex', flexDirection: 'column' }} id="bewerben">
        {/* Subtle radial glow behind left copy */}
        <div style={{ position: 'absolute', left: -120, top: '50%', transform: 'translateY(-50%)', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)', pointerEvents: 'none' }} />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}>

          {/* Left – pitch copy */}
          <div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
            <span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.36em', fontWeight: 700, display: 'block', marginBottom: 16, opacity: 0.8 }}>{showApplicationForm ? fallbackText(application.eyebrow, homeContent.application.eyebrow) : newsletterCopy.eyebrow}</span>
            <h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(1.8rem, 2.8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1.0, marginBottom: 16 }}>
              <Lines text={showApplicationForm ? fallbackText(application.heading, homeContent.application.heading) : newsletterCopy.heading} />
            </h2>
            <div style={{ width: 32, height: 2, background: '#EFBF04', marginBottom: 20 }} />
            <p style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, marginBottom: 32 }}>
              {showApplicationForm ? fallbackText(application.body, homeContent.application.body) : newsletterCopy.body}
            </p>

            {/* Benefit rows */}
            <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
              {finalSectionBenefits.map(item => (
                <div key={item.num} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: '0 14px', padding: '13px 0', borderBottom: '1px solid rgba(255,255,255,0.06)', alignItems: 'center' }}>
                  <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, color: 'rgba(239,191,4,0.55)', letterSpacing: '0.1em' }}>{item.num}</span>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                    <span style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{item.label}</span>
                    <span style={{ fontFamily: FF, fontSize: 14, color: 'rgba(255,255,255,0.45)', textAlign: 'right' }}>{item.desc}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Divider */}
          {!isMobile && <div style={{ background: 'rgba(255,255,255,0.07)' }} />}

          {/* Right – gold premium panel */}
          <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0, position: 'relative', background: 'linear-gradient(160deg,#DDB84A 0%,#C9A227 52%,#A87800 100%)' }}>

            {/* Premium award crosshatch pattern */}
            <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }} aria-hidden="true">
              <defs>
                <pattern id="bmpCross" width="18" height="18" patternUnits="userSpaceOnUse">
                  <path d="M0,0 L18,18 M18,0 L0,18" stroke="rgba(17,29,85,0.055)" strokeWidth="0.65" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#bmpCross)" />
            </svg>

            {/* Inner vignette – edges slightly deeper gold */}
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 55%, rgba(100,70,0,0.25) 100%)', pointerEvents: 'none', zIndex: 0 }} />

            {/* Award ceremony photo */}
            {!isMobile && (
              <div style={{ height: 220, position: 'relative', overflow: 'hidden', flexShrink: 0, zIndex: 1 }}>
                <Image unoptimized
                  src={mediaUrl(application.awardImage, `/images/${homeContent.application.awardImageFilename}`)}
                  alt={mediaAlt(application.awardImage, fallbackText(application.awardImageAlt, homeContent.application.awardImageAlt))}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', filter: 'sepia(0.18) brightness(0.92)' }}
                />
                {/* Blend photo into gold panel */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(168,120,0,0.1) 0%, rgba(168,120,0,0.25) 50%, rgba(168,120,0,0.92) 88%, #A87800 100%)' }} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'rgba(17,29,85,0.35)' }} />
                <div style={{ position: 'absolute', bottom: 14, left: 40, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 5, height: 5, borderRadius: '50%', background: 'rgba(17,29,85,0.7)' }} />
                  <span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(17,29,85,0.75)', textTransform: 'uppercase', letterSpacing: '0.2em' }}>{fallbackText(application.awardCaption, homeContent.application.awardCaption)}</span>
                </div>
              </div>
            )}

            {/* Form area */}
            <div style={{ padding: isMobile ? '32px 24px' : '24px 48px 32px 40px', flex: isMobile ? 'none' : 1, height: isMobile && showApplicationForm ? '82svh' : undefined, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative', zIndex: 1 }}>
              <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.5)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 8 }}>{showApplicationForm ? fallbackText(application.formEyebrow, homeContent.application.formEyebrow) : newsletterCopy.formEyebrow}</span>
              <h3 style={{ fontFamily: FF, fontSize: 'clamp(1.2rem, 1.8vw, 1.6rem)', fontWeight: 900, color: '#111D55', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 24 }}>{showApplicationForm ? fallbackText(application.formTitle, homeContent.application.formTitle) : newsletterCopy.formTitle}</h3>
              {showApplicationForm ? <BewerbungsForm theme="gold" content={form} /> : <NewsletterInterestForm copy={newsletterCopy} />}
            </div>
          </div>

        </div>

        {/* Footnote row */}
        <div style={{ position: 'relative', zIndex: 1, padding: isMobile ? '16px 24px 20px' : '14px 56px 18px', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', textAlign: 'center', borderTop: '1px solid rgba(255,255,255,0.06)', flexShrink: 0 }}>
          <span style={{ fontFamily: FF, fontSize: 15, color: 'rgba(255,255,255,0.45)', marginRight: isMobile ? 6 : 10 }}>{showApplicationForm ? fallbackText(application.footnote, homeContent.application.footnote) : newsletterCopy.footnote}</span>
          <span style={{ fontFamily: FF, fontSize: 15, fontWeight: 700, color: 'rgba(239,191,4,0.8)' }}>{showApplicationForm ? fallbackText(application.footnoteStrong, homeContent.application.footnoteStrong) : newsletterCopy.footnoteStrong}</span>
        </div>
        <div style={{ height: 2, background: 'linear-gradient(to right, #EFBF04, rgba(239,191,4,0.25), transparent)', flexShrink: 0 }} />
      </section>

      {/* Video Modal */}
      {showVideo && (
        <div className="fixed inset-0 z-[200] bg-black flex items-center justify-center p-6 bg-opacity-95">
          <button 
            type="button"
            onClick={() => setShowVideo(false)}
            className="absolute top-8 right-8 text-white/60 hover:text-white transition-colors"
            aria-label={fallbackText(videoModal.closeLabel, homeContent.videoModal.closeLabel)}
          >
            <X size={40} />
          </button>
          <div className="w-full max-w-6xl aspect-video bg-white/5 rounded-3xl overflow-hidden flex items-center justify-center relative">
            {videoSrc ? (
              <video
                ref={videoRef}
                src={videoSrc}
                className="h-full w-full bg-black object-contain"
                controls
                autoPlay
                playsInline
                aria-label={videoTitle}
              />
            ) : (
              <div className="text-center">
                <Play size={80} className="text-accent mx-auto mb-6 opacity-40" />
                <p className="text-white/40 uppercase tracking-widest text-sm">{videoTitle}</p>
                <p className="text-white/60 mt-4 text-xs italic font-body">{fallbackText(videoModal.description, homeContent.videoModal.description)}</p>
                <Button type="button" onClick={() => setShowVideo(false)} className="mt-8" variant="outline">{fallbackText(videoModal.closeLabel, homeContent.videoModal.closeLabel)}</Button>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

// ─── StatusSlider ─────────────────────────────────────────────────────────────

function StatusSlider({ data }: { data?: SpaApplicationPhaseData }) {
  const isMobile = useIsMobile();
  if (!data?.phases?.length) return null;

  const phases = data.phases.map((phase): RenderedStatusPhase => {
    const cta = phase.cta?.label
      ? { label: phase.cta.label, to: phase.cta.to || phase.cta.url || '/' }
      : null
    const membershipCta = phase.membershipCta?.label
      ? { label: phase.membershipCta.label, to: phase.membershipCta.to || phase.membershipCta.url || '/mitglied-werden' }
      : undefined

    return {
      ...phase,
      accent: phase.accent || '#EFBF04',
      bg: phase.bg || '#020A1E',
      cta,
      membershipCta,
    }
  });
  const configuredActive = Number(data.activePhase);
  const active = Math.max(0, Math.min(phases.length - 1, Number.isFinite(configuredActive) ? configuredActive : 0));
  const phase = phases[active];

  return (
    <section
      style={{
        position: 'relative',
        overflow: 'hidden',
        height: isMobile ? 'auto' : 480,
        minHeight: isMobile ? 360 : 'auto',
      }}
    >
      <StatusSlideCard
        phase={phase}
        isMobile={isMobile}
        noActionLabel={data.noActionLabel}
        successApplicationsLabel={data.successApplicationsLabel}
        successWinnersLabel={data.successWinnersLabel}
      />
    </section>
  );
}

// ─── StatusSlideCard ──────────────────────────────────────────────────────────

function StatusSlideCard({
  phase,
  isMobile,
  noActionLabel,
  successApplicationsLabel,
  successWinnersLabel,
}: {
  phase: RenderedStatusPhase;
  isMobile: boolean;
  noActionLabel: string;
  successApplicationsLabel: string;
  successWinnersLabel: string;
}) {
  return (
    <div
      style={{
        width: '100vw',
        height: '100%',
        flexShrink: 0,
        position: 'relative',
        background: phase.bg,
        overflow: 'hidden',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 360px',
      }}
    >

      {/* Left content */}
      <div style={{ padding: isMobile ? '48px 24px' : '52px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', zIndex: 1, gap: isMobile ? 24 : 0 }}>

        {/* Status badge + phase label */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: `${phase.accent}18`, border: `1px solid ${phase.accent}35`, borderRadius: 999, padding: '5px 14px' }}>
            {phase.pulse && <span className="animate-pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: phase.accent, display: 'inline-block' }} />}
            <span style={{ fontFamily: FF, fontSize: 9, fontWeight: 700, letterSpacing: '0.32em', textTransform: 'uppercase', color: phase.accent }}>{phase.tag}</span>
          </div>
          <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.50)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{phase.phase}</span>
        </div>

        {/* Headline + body + CTA */}
        <div>
          <h2 style={{ fontFamily: FF, fontSize: isMobile ? 'clamp(1.8rem, 8vw, 2.6rem)' : 'clamp(2.4rem, 3.8vw, 3.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 0.94, margin: '0 0 24px' }}>
            {phase.headline}
          </h2>
          <p style={{ fontFamily: '"Inter", sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.8, marginBottom: 32, maxWidth: 520 }}>
            {phase.body}
          </p>
          {phase.cta ? (
            <Link
              to={phase.cta.to}
              onMouseDown={e => e.stopPropagation()}
              style={{ fontFamily: FF, fontSize: 14, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#101828', background: phase.accent, padding: '14px 32px', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, transition: 'opacity 0.2s' }}
              onMouseEnter={e => ((e.currentTarget as HTMLElement).style.opacity = '0.85')}
              onMouseLeave={e => ((e.currentTarget as HTMLElement).style.opacity = '1')}
            >
              {phase.cta.label} <ChevronRight size={14} />
            </Link>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 20, height: 1, background: 'rgba(255,255,255,0.2)' }} />
              <span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.50)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{noActionLabel}</span>
            </div>
          )}
        </div>

        {/* Meta */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 20, height: 1, background: phase.accent, opacity: 0.35 }} />
          <span style={{ fontFamily: FF, fontSize: 10, color: `${phase.accent}70`, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{phase.meta}</span>
        </div>
      </div>

      {/* Right visual panel */}
      {!isMobile && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 36, padding: '52px 48px', position: 'relative', zIndex: 1, borderLeft: '1px solid rgba(255,255,255,0.05)' }}>
        {phase.num !== '03' ? (
          /* Concentric rings for active phases */
          <div style={{ position: 'relative', width: 180, height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {([0, 20, 44] as const).map((inset, i) => (
              <div key={inset} style={{ position: 'absolute', inset, borderRadius: '50%', border: `1px solid ${phase.accent}${['12', '25', '45'][i]}` }} />
            ))}
            <div style={{ width: 76, height: 76, borderRadius: '50%', background: `${phase.accent}15`, border: `1px solid ${phase.accent}55`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontFamily: FF, fontSize: 15, fontWeight: 900, color: phase.accent, letterSpacing: '0.05em' }}>{phase.num}</span>
            </div>
          </div>
        ) : (
          /* Success stats */
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: FF, fontSize: 68, fontWeight: 900, color: phase.accent, lineHeight: 1, opacity: 0.9 }}>{fallbackText(phase.successApplications, '')}</div>
            <div style={{ fontFamily: FF, fontSize: 8, fontWeight: 700, letterSpacing: '0.35em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.50)', marginTop: 4, marginBottom: 20 }}>{successApplicationsLabel}</div>
            <div style={{ width: 1, height: 28, background: 'rgba(255,255,255,0.08)', margin: '0 auto 20px' }} />
            <div style={{ fontFamily: FF, fontSize: 44, fontWeight: 900, color: '#fff', lineHeight: 1 }}>{fallbackText(phase.successWinners, '')}</div>
            <div style={{ fontFamily: FF, fontSize: 8, fontWeight: 700, letterSpacing: '0.35em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.50)', marginTop: 4 }}>{successWinnersLabel}</div>
          </div>
        )}

        {/* Membership CTA – for active phases only */}
        {phase.num !== '03' && (
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.08)', margin: '0 auto 20px' }} />
            <Link
              to={phase.membershipCta?.to || '/mitglied-werden'}
              onMouseDown={e => e.stopPropagation()}
              style={{
                fontFamily: FF,
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: '0.14em',
                textTransform: 'uppercase',
                color: phase.accent,
                border: `1.5px solid ${phase.accent}55`,
                background: 'transparent',
                textDecoration: 'none',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
                padding: '11px 22px',
                transition: 'border-color 0.2s, color 0.2s',
              }}
              onMouseEnter={e => {
                (e.currentTarget as HTMLElement).style.borderColor = phase.accent;
              }}
              onMouseLeave={e => {
                (e.currentTarget as HTMLElement).style.borderColor = `${phase.accent}55`;
              }}
            >
              {phase.membershipCta?.label} <ChevronRight size={13} />
            </Link>
          </div>
        )}
      </div>}
    </div>
  );
}

export default Home;