// ===== Hauptseite =====

const { useState: _useState2, useEffect: _useEffect2, useRef: _useRef2, useMemo: _useMemo2 } = React;
const useState = _useState2;
const useEffect = _useEffect2;
const useRef = _useRef2;
const useMemo = _useMemo2;

// -------- Hero --------
function Hero() {
  return (
    <header className="starry text-cream relative overflow-hidden">
      {/* Decorative flight arc */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="heroArc" x1="0" x2="1">
            <stop offset="0%" stopColor="#f9b000" stopOpacity="0" />
            <stop offset="50%" stopColor="#ffd066" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#f9b000" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="heroArc2" x1="0" x2="1">
            <stop offset="0%" stopColor="#f6f0e2" stopOpacity="0" />
            <stop offset="60%" stopColor="#f6f0e2" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#f6f0e2" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M -100 720 Q 800 200 1700 720" fill="none" stroke="url(#heroArc)" strokeWidth="1.6"
              className="draw-route" pathLength="1400" />
        <path d="M -100 820 Q 800 380 1700 820" fill="none" stroke="url(#heroArc2)" strokeWidth="1"
              strokeDasharray="2 6" />
        <path d="M -100 620 Q 800 60  1700 620" fill="none" stroke="url(#heroArc2)" strokeWidth="0.8"
              strokeDasharray="2 8" opacity="0.6" />
      </svg>

      {/* Plane silhouette drifting */}
      <div className="absolute right-[8%] top-[28%] text-amber/85 drift pointer-events-none">
        <Icon.PlaneTilt width="120" height="120" />
      </div>

      <div className="relative max-w-7xl mx-auto px-6 md:px-10 pt-20 pb-28 md:pt-28 md:pb-36">
        <Reveal className="font-mono text-[11px] tracking-[0.35em] uppercase text-amber">
          Eine Familien‑Erinnerung · privat · 2026
        </Reveal>

        <Reveal delay={1} className="mt-6">
          <h1 className="font-display text-[44px] leading-[1.02] sm:text-6xl md:text-[88px] md:leading-[0.95] tracking-tight text-cream">
            Moritz Schieder.
            <br />
            <span className="text-amber">Meine Lufthansa Jahre</span>
            <br />
            <span className="italic font-light">2001 bis 2011.</span>
          </h1>
        </Reveal>

        <Reveal delay={2} className="mt-8 max-w-2xl text-cream/85 text-lg md:text-xl leading-relaxed">
          Vom Flugbegleiter zum Purser. Zehn Jahre, vier Streifen mehr auf der Schulter,
          und unterwegs: <strong className="text-amber font-semibold">993 Flüge</strong>,
          <strong className="text-amber font-semibold"> 46 Länder</strong>,
          <strong className="text-amber font-semibold"> fünf Kontinente</strong>.
        </Reveal>

        <Reveal delay={3} className="mt-12 flex flex-wrap items-center gap-3">
          <Pill tone="amber" className="!bg-amber !text-night !border-amber">01.04.2001 · Einstellung</Pill>
          <span className="text-cream/40">———</span>
          <Pill tone="amber" className="!bg-amber !text-night !border-amber">01.09.2008 · Purser</Pill>
          <span className="text-cream/40">———</span>
          <Pill tone="amber" className="!bg-amber !text-night !border-amber">14.12.2011 · letzter Flug</Pill>
        </Reveal>

        <Reveal delay={4} className="mt-16">
          <Stub
            dark
            left={
              <div>
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-cream/55">Erinnerungsticket</div>
                <div className="font-display text-2xl text-cream mt-1">MUC / FRA — die ganze Welt</div>
              </div>
            }
            right={
              <div className="text-right">
                <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">Crew</div>
                <div className="font-display text-2xl text-amber mt-1">SCHIEDER · M.</div>
              </div>
            }
          />
        </Reveal>
      </div>

      {/* Bottom edge perforation */}
      <div className="text-cream/30 perf"></div>
    </header>
  );
}

// -------- Kennzahlen (animated counters) --------
function Kennzahlen() {
  return (
    <section id="kennzahlen" className="paper-soft relative">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-24">
        <Reveal className="flex items-baseline gap-4 mb-10">
          <span className="font-mono text-[11px] tracking-[0.25em] uppercase text-amber-deep">§ 02</span>
          <span className="font-mono text-[11px] tracking-[0.25em] uppercase text-night/40">In Zahlen</span>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="font-display text-4xl md:text-6xl leading-[1.05] text-night max-w-3xl">
            Zehn Jahre, gemessen in Strecken, Stunden, Häfen.
          </h2>
        </Reveal>
        <div className="mt-14 grid grid-cols-2 md:grid-cols-3 gap-x-10 gap-y-14">
          {KENNZAHLEN.map((k, i) => (
            <Reveal key={k.label} delay={Math.min(4, 1 + (i % 4))}>
              <Stat
                value={k.value}
                label={k.label}
                suffix={k.suffix}
                decimals={k.decimals || 0}
                note={k.note}
                big={i === 0 || i === 1}
              />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// -------- Karte Sektion --------
function MapSection() {
  return (
    <Section
      id="weltkarte"
      kicker="§ 03"
      eyebrow="Weltkarte"
      dark
      title={<>Liniennetz eines Lebens.<br/><span className="text-amber italic font-light">Von München und Frankfurt aus, in alle Himmelsrichtungen.</span></>}
      intro="Großkreisbogen für jede Strecke. Häufige Routen liegen dicker, geografische Eckpunkte sind hell gestrichelt. Über eine Linie fahren zeigt Strecke und Anzahl."
    >
      <Reveal><WorldMap /></Reveal>
      <Reveal delay={1} className="mt-8 grid md:grid-cols-3 gap-6">
        {[
          { code: "EU", text: "Europa: London, Barcelona, Stockholm, Rom, Athen, Istanbul." },
          { code: "NA", text: "Nordamerika: Chicago, Charlotte, Boston, New York, San Francisco, Vancouver." },
          { code: "AS+AF", text: "Asien & Afrika: Hongkong, Tokio, Johannesburg." },
        ].map((c) => (
          <div key={c.code} className="text-cream/75 border-t border-cream/20 pt-4">
            <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">{c.code}</div>
            <div className="mt-1 text-[15px] leading-relaxed">{c.text}</div>
          </div>
        ))}
      </Reveal>
    </Section>
  );
}

// -------- Zeitstrahl --------
function TimelineSection() {
  return (
    <Section
      id="zeitstrahl"
      kicker="§ 04"
      eyebrow="Laufbahn"
      title={<>Die Karriere in vier Daten und einem Jahr ohne Belege.</>}
      intro="Eine knappe Chronik. Pro Jahr eine kleine Kennzahl, ehrlich auch dort, wo das Logbuch eine Lücke hat."
    >
      <div className="relative">
        {/* Center rule */}
        <div className="hidden md:block absolute left-1/2 top-0 bottom-0 -translate-x-1/2 text-night/25 perf-v" />
        <div className="space-y-12 md:space-y-16">
          {ZEITSTRAHL.map((t, i) => {
            const left = i % 2 === 0;
            return (
              <Reveal key={t.titel} delay={(i % 4) + 1} className="md:grid md:grid-cols-2 md:gap-12 items-center">
                <div className={`${left ? "md:order-1 md:text-right md:pr-12" : "md:order-2 md:pl-12"}`}>
                  <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">{t.datum}</div>
                  <div className="mt-2 font-display text-3xl md:text-4xl text-night leading-tight">{t.titel}</div>
                  <div className={`mt-3 text-night/75 leading-relaxed max-w-prose ${left ? "md:ml-auto" : ""}`}>{t.text}</div>
                  {t.kennzahl && (
                    <div className={`mt-4 flex gap-4 flex-wrap ${left ? "md:justify-end" : ""}`}>
                      <div>
                        <div className="font-display text-2xl text-night">{t.kennzahl.fluege}</div>
                        <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-night/55">Flüge</div>
                      </div>
                      <div>
                        <div className="font-display text-2xl text-night">{t.kennzahl.km.toLocaleString("de-DE")}</div>
                        <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-night/55">Kilometer</div>
                      </div>
                    </div>
                  )}
                </div>
                <div className={`${left ? "md:order-2 md:pl-12" : "md:order-1 md:pr-12"} relative flex items-center mt-6 md:mt-0`}>
                  <div className="hidden md:block absolute left-1/2 -translate-x-1/2 w-5 h-5 rounded-full bg-amber border-2 border-cream ring-4 ring-night/10" />
                  <Photo
                    note={`um ${t.jahr} — ${t.titel.toLowerCase()}`}
                    code={`year=${t.jahr} type=${t.typ}`}
                    ratio="4/3"
                    className={`w-full max-w-md ${left ? "md:ml-12" : "md:mr-12"}`}
                  />
                </div>
              </Reveal>
            );
          })}
          {/* 2005 gap row */}
          <Reveal className="md:grid md:grid-cols-2 md:gap-12 items-center">
            <div className="md:col-span-2 text-center">
              <div className="inline-flex items-center gap-3 px-6 py-3 border border-dashed border-night/30 bg-cream-soft">
                <Icon.Ticket width="18" height="18" className="text-night/55" />
                <div className="font-mono text-[11px] tracking-[0.25em] uppercase text-night/70">
                  2005 · keine Aufzeichnungen
                </div>
              </div>
              <div className="mt-3 italic text-night/55 text-sm">
                Irgendwo zwischen Crews und Layovern ist das Logbuch verlorengegangen.
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

// -------- Diagramme --------
function ChartsSection() {
  return (
    <Section
      id="diagramme"
      kicker="§ 05"
      eyebrow="Jahres- und Saisondiagramme"
      title={<>Wie sich die Jahre verteilt haben.</>}
      intro="Säulen für Flüge und für Kilometer pro Jahr. Darunter die Monatsverteilung über alle Jahre — die Sommerspitze ist deutlich sichtbar."
    >
      <Reveal><YearChart /></Reveal>
      <Reveal delay={1} className="mt-8"><MonthChart /></Reveal>
    </Section>
  );
}

// -------- Top Ziele Galerie --------
function ZieleSection() {
  return (
    <Section
      id="ziele"
      kicker="§ 06"
      eyebrow="Top Auslandsziele"
      dark
      title={<>Die zwölf häufigsten Adressen,<br/><span className="text-amber italic font-light">zwischen Frühstück in Bayern und Mitternacht andernorts.</span></>}
    >
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
        {ZIELE.map((z, i) => (
          <Reveal key={z.code} delay={(i % 4) + 1}>
            <div className="bg-cream-soft text-night rounded-sm overflow-hidden border border-cream/30 shadow-[0_30px_60px_-40px_rgba(0,0,0,0.4)]">
              <Photo
                note={`${z.stadt}, ${z.land}`}
                code={`top=${z.code}`}
                ratio="4/3"
                className="border-b border-night/10"
              />
              <div className="px-4 py-3 flex items-start justify-between">
                <div>
                  <div className="font-display text-xl leading-tight">{z.stadt}</div>
                  <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-night/55 mt-0.5">{z.land} · {z.code}</div>
                </div>
                <div className="text-right">
                  <div className="font-display text-2xl text-amber-deep">{z.anzahl}×</div>
                  <div className="font-mono text-[9px] tracking-[0.18em] uppercase text-night/50">Flüge</div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// -------- Flotte --------
function FleetSection() {
  return (
    <Section
      id="flotte"
      kicker="§ 07"
      eyebrow="Flotte"
      title={<>Drei Muster, drei Lebensgefühle.</>}
      intro="Die B747 war eine kurze, große Liebe in 2001. Die A340/A330 öffnete die Welt. Die A320 war der Alltag — und der heimliche Hauptdarsteller."
    >
      <Reveal><FleetChart /></Reveal>

      <Reveal delay={1} className="mt-10 grid md:grid-cols-3 gap-5">
        {FLOTTE.map((f) => (
          <div key={f.typ} className="ticket rounded-sm p-6 border border-night/10">
            <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">{f.era}</div>
            <div className="mt-1 font-display text-3xl text-night">{f.typ}</div>
            <div className="mt-3 italic text-night/70 font-display text-lg">„{f.hinweis}”</div>
            <div className="mt-5 flex items-baseline gap-6">
              <div>
                <div className="font-display text-2xl text-night">{f.fluege}</div>
                <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-night/55">Flüge</div>
              </div>
              <div>
                <div className="font-display text-2xl text-night">{f.km.toLocaleString("de-DE")}</div>
                <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-night/55">Kilometer</div>
              </div>
            </div>
          </div>
        ))}
      </Reveal>

      <Reveal delay={2} className="mt-8 text-night/55 text-sm italic max-w-2xl">
        Hinweis: Die Zuordnung der Flugzeugmuster ist eine Rekonstruktion nach Strecke und Epoche.
        B747 nur 2001. Einzelne Blockzeiten ebenfalls geschätzt.
      </Reveal>
    </Section>
  );
}

// -------- Jetlag --------
function JetlagSection() {
  const ostShare = JETLAG.ost / (JETLAG.ost + JETLAG.west);
  return (
    <Section
      id="jetlag"
      kicker="§ 08"
      eyebrow="Jetlag & Zeitzonen"
      dark
      title={<>Die innere Uhr, oft auf der Wanderschaft.</>}
      intro="Wer viel fliegt, lebt in Zeitfenstern. Hier ein paar Werte, die zusammenfassen, wie oft die Uhr neu gestellt werden musste."
    >
      <div className="grid md:grid-cols-2 gap-10 items-start">
        <div className="space-y-8">
          <Reveal>
            <div className="font-display text-7xl md:text-8xl text-amber leading-none">
              <Counter to={JETLAG.zeitzonenstunden} />
            </div>
            <div className="stat-rule mt-3" />
            <div className="mt-2 font-mono text-[11px] tracking-[0.25em] uppercase text-cream/70">überquerte Zeitzonenstunden</div>
            <div className="mt-2 italic text-cream/60 font-display text-lg">addiert über alle Flüge</div>
          </Reveal>

          <Reveal delay={1}>
            <div className="ticket-dark p-5 rounded-sm border border-amber/20">
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">Größter Sprung</div>
              <div className="mt-1 font-display text-3xl text-cream">{JETLAG.groessterSprung.h} Stunden</div>
              <div className="text-cream/70">{JETLAG.groessterSprung.von} → {JETLAG.groessterSprung.nach}</div>
            </div>
          </Reveal>
        </div>

        <div className="space-y-8">
          {/* East / West balance */}
          <Reveal delay={1}>
            <div className="ticket-dark p-6 rounded-sm border border-cream/15">
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">Ost vs. West</div>
              <div className="mt-2 font-display text-2xl text-cream">Fast Gleichstand.</div>
              <div className="mt-5 flex items-center gap-4">
                <Icon.ArrowWest className="text-cream/70" width="22" height="22" />
                <div className="flex-1 h-2 bg-cream/15 rounded-full overflow-hidden flex">
                  <div className="h-full bg-amber" style={{ width: `${ostShare * 100}%` }} />
                  <div className="h-full bg-cream/40" style={{ width: `${(1 - ostShare) * 100}%` }} />
                </div>
                <Icon.ArrowEast className="text-amber" width="22" height="22" />
              </div>
              <div className="mt-3 flex justify-between font-mono text-[11px] tracking-[0.15em] uppercase">
                <span className="text-cream/70">{JETLAG.west} westwärts</span>
                <span className="text-amber">{JETLAG.ost} ostwärts</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="ticket-dark p-6 rounded-sm border border-cream/15">
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">Schwere Verschiebungen</div>
              <div className="mt-2 font-display text-5xl text-cream"><Counter to={JETLAG.ueber5h} /></div>
              <div className="mt-1 text-cream/70">Flüge mit mindestens 5 Stunden Differenz</div>
              <div className="mt-3 text-cream/55 text-sm italic">jeder vierte Flug, grob gerechnet</div>
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

// -------- Fun Facts --------
function FunFactsSection() {
  return (
    <Section
      id="lustig"
      kicker="§ 09"
      eyebrow="Lustige Fakten"
      title={<>Zahlen mit Augenzwinkern.</>}
      intro="Wenn man 993 Flüge in irdische Vergleiche umrechnet, kommt schon einiges zusammen."
    >
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {FUN_FACTS.map((f, i) => (
          <Reveal key={f.kopf} delay={(i % 4) + 1}>
            <div className="bg-cream-soft border border-night/10 p-6 h-full flex flex-col justify-between rounded-sm relative overflow-hidden">
              <div className="absolute -top-3 -right-3 text-amber/15">
                <Icon.Star width="100" height="100" />
              </div>
              <div className="relative">
                <div className="font-display text-4xl md:text-5xl text-night leading-none">{f.kopf}</div>
                <div className="stat-rule mt-3" />
                <div className="mt-3 text-night/80 leading-relaxed">{f.text}</div>
              </div>
              <div className="relative mt-4 font-mono text-[10px] tracking-[0.2em] uppercase text-night/50">{f.klein}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// -------- Anekdoten (V2 Platzhalter) --------
function AnekdotenSection() {
  const slots = [
    { titel: "Lieblingsstrecke",   note: "die eine Strecke, die immer leicht war",      code: "lieblings_route" },
    { titel: "Kuriosester Einsatz", note: "der Tag, an dem nichts nach Plan lief",       code: "kurioser_tag" },
    { titel: "Promi an Bord",      note: "ja, es gab welche — mit ohne Namen",          code: "promi_anekdote" },
    { titel: "Wetter",             note: "der schlimmste Sturm, der schönste Sonnenaufgang", code: "wetter" },
    { titel: "Crews",              note: "die Menschen hinter den vier Streifen",       code: "crew_geschichten" },
    { titel: "Lieblingslayover",   note: "Bar, Hotelbalkon oder Park bei Sonnenaufgang", code: "layover" },
  ];
  return (
    <Section
      id="anekdoten"
      kicker="§ 10"
      eyebrow="Anekdoten"
      dark
      title={<>Was zwischen den Zahlen passiert ist —<br/><span className="italic font-light text-amber">kommt in Version 2.</span></>}
      intro="Hier wird Moritz später selbst erzählen. Solange stehen Platzhalter für Bordkarten, Dienstmarken, Patches und kleine Geschichten."
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
        {slots.map((s, i) => (
          <Reveal key={s.titel} delay={(i % 4) + 1}>
            <div className="bg-cream-soft/[0.06] border border-dashed border-cream/30 rounded-sm overflow-hidden">
              <div className="aspect-[4/3] relative">
                <div className="absolute inset-0"
                     style={{ backgroundImage:
                       "repeating-linear-gradient(45deg, rgba(246,240,226,0.06) 0 1px, transparent 1px 14px)" }} />
                <div className="absolute inset-0 flex flex-col justify-between p-5 text-cream/75">
                  <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.25em] uppercase">
                    <Icon.Camera width="14" height="14" />
                    <span className="text-cream/50">Foto · Bordkarte · Patch</span>
                  </div>
                  <div>
                    <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-amber">{`// ${s.code}`}</div>
                    <div className="mt-1 text-sm">{s.note}</div>
                  </div>
                </div>
              </div>
              <div className="px-5 py-4 border-t border-cream/15 flex items-center justify-between">
                <div className="font-display text-xl text-cream">{s.titel}</div>
                <Pill tone="inv">V2</Pill>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// -------- Finale: der letzte Flug --------
function FinaleSection() {
  return (
    <section id="letzter-flug" className="starry text-cream relative overflow-hidden">
      <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="finaleArc" x1="0" x2="1">
            <stop offset="0%" stopColor="#ffd066" stopOpacity="0" />
            <stop offset="50%" stopColor="#ffd066" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#ffd066" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M 1700 720 Q 800 100 -100 720" fill="none" stroke="url(#finaleArc)" strokeWidth="1.5" strokeDasharray="4 8" />
        <path d="M 1700 800 Q 800 280 -100 800" fill="none" stroke="url(#finaleArc)" strokeWidth="0.9" strokeDasharray="2 8" opacity="0.6" />
      </svg>

      <div className="relative max-w-6xl mx-auto px-6 md:px-10 py-24 md:py-36">
        <Reveal className="font-mono text-[11px] tracking-[0.35em] uppercase text-amber">
          § 11 · der letzte Flug
        </Reveal>

        <Reveal delay={1} className="mt-6">
          <h2 className="font-display text-5xl md:text-7xl leading-[1.04] text-cream">
            14. Dezember 2011.
            <br />
            <span className="text-amber">LH0791. Singapur nach München.</span>
            <br />
            <span className="italic font-light text-cream/85">10.058 Kilometer.</span>
          </h2>
        </Reveal>

        <Reveal delay={2} className="mt-12 grid md:grid-cols-2 gap-10 items-stretch">
          <div className="ticket-dark border border-amber/25 p-7 rounded-sm">
            <div className="flex items-center justify-between">
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber">Bordkarte</div>
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-cream/60">14 · 12 · 2011</div>
            </div>
            <div className="mt-6 grid grid-cols-3 gap-4">
              <div>
                <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-cream/55">von</div>
                <div className="font-display text-3xl text-cream">SIN</div>
                <div className="text-cream/70 text-sm mt-1">Singapur</div>
              </div>
              <div className="flex items-center justify-center text-amber">
                <Icon.Plane width="42" height="42" />
              </div>
              <div className="text-right">
                <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-cream/55">nach</div>
                <div className="font-display text-3xl text-amber">MUC</div>
                <div className="text-cream/70 text-sm mt-1">München</div>
              </div>
            </div>
            <div className="perf my-6 text-cream/30" />
            <div className="grid grid-cols-3 gap-4 text-sm">
              <div>
                <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-cream/55">Flug</div>
                <div className="font-mono text-cream">LH 0791</div>
              </div>
              <div>
                <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-cream/55">Rolle</div>
                <div className="font-mono text-cream">Purser</div>
              </div>
              <div className="text-right">
                <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-cream/55">Strecke</div>
                <div className="font-mono text-amber">10.058 km</div>
              </div>
            </div>
          </div>

          <div className="flex flex-col justify-between">
            <Reveal delay={3}>
              <p className="font-display text-2xl md:text-3xl text-cream leading-snug">
                Der weiteste Flug der gesamten zehn Jahre war zugleich
                der allerletzte. Die längste Heimkehr.
              </p>
            </Reveal>
            <Reveal delay={4} className="mt-8">
              <p className="text-cream/80 leading-relaxed">
                Mit 29 Jahren ein Logbuch zugeklappt, das mit 19 aufgeschlagen worden war.
                993 Flüge dazwischen, 46 Länder, fünf Kontinente, ein paar gute Crews
                und sehr viele Sonnenaufgänge über Wolken.
              </p>
              <p className="mt-5 text-cream/80 leading-relaxed">
                Diese Seite ist ein kleines Dankeschön der Familie an
                <span className="text-amber"> zehn schöne Jahre</span> —
                aufbewahrt in Zahlen, Linien und Erinnerungen.
              </p>
            </Reveal>
            <Reveal delay={4} className="mt-8 flex items-center gap-3 text-amber">
              <Icon.Heart width="18" height="18" />
              <span className="font-display italic text-lg">für Moritz, von uns allen.</span>
            </Reveal>
          </div>
        </Reveal>
      </div>

      <div className="text-cream/30 perf"></div>
      <div className="text-center text-cream/45 font-mono text-[10px] tracking-[0.3em] uppercase py-6">
        Erinnerungsseite · privat · nicht öffentlich · alle Werte fest im Code · 2026
      </div>
    </section>
  );
}

// -------- Sticky kleine Nav --------
function MiniNav() {
  const items = [
    { id: "kennzahlen", t: "Zahlen" },
    { id: "weltkarte", t: "Karte" },
    { id: "zeitstrahl", t: "Laufbahn" },
    { id: "diagramme", t: "Jahre" },
    { id: "ziele", t: "Ziele" },
    { id: "flotte", t: "Flotte" },
    { id: "jetlag", t: "Jetlag" },
    { id: "lustig", t: "Fakten" },
    { id: "anekdoten", t: "Anekdoten" },
    { id: "letzter-flug", t: "Finale" },
  ];
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div
      className={`fixed top-1/2 -translate-y-1/2 right-3 z-40 hidden lg:block transition-opacity duration-500 ${visible ? "opacity-100" : "opacity-0 pointer-events-none"}`}
    >
      <nav className="ticket-dark border border-amber/25 rounded-sm py-3 px-3 space-y-2">
        {items.map((it) => (
          <a key={it.id} href={`#${it.id}`}
             className="block font-mono text-[10px] tracking-[0.2em] uppercase text-cream/70 hover:text-amber transition-colors">
            {it.t}
          </a>
        ))}
      </nav>
    </div>
  );
}

// -------- Root --------
function App() {
  return (
    <main>
      <Hero />
      <MiniNav />
      <Kennzahlen />
      <MapSection />
      <TimelineSection />
      <ChartsSection />
      <ZieleSection />
      <FleetSection />
      <JetlagSection />
      <FunFactsSection />
      <AnekdotenSection />
      <FinaleSection />
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);