// ============================================================
//  Tim Taxis — "Einfach.Du.Sein"  CI components
// ============================================================

const { useState, useEffect, useRef } = React;

// ---------- small atoms ----------
const Rule = ({ className = "" }) => (
  <div className={`h-px w-full bg-[color:var(--ink)]/15 ${className}`} />
);

const Eyebrow = ({ children, className = "" }) => (
  <div className={`font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 ${className}`}>
    {children}
  </div>
);

const SectionLabel = ({ num, label }) => (
  <div className="flex items-baseline gap-4 mb-12">
    <span className="font-mono text-[11px] tracking-[0.22em] text-[color:var(--ink)]/50">{num}</span>
    <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/50">{label}</span>
    <div className="flex-1 h-px bg-[color:var(--ink)]/15" />
  </div>
);

// ---------- placeholder imagery ----------
const PortraitPlaceholder = ({ label = "portrait", ratio = "3 / 4", tone = "warm" }) => {
  const stripes = tone === "warm"
    ? "repeating-linear-gradient(135deg, oklch(0.88 0.035 70), oklch(0.88 0.035 70) 14px, oklch(0.84 0.04 65) 14px, oklch(0.84 0.04 65) 28px)"
    : "repeating-linear-gradient(135deg, oklch(0.94 0.02 80), oklch(0.94 0.02 80) 14px, oklch(0.90 0.025 75) 14px, oklch(0.90 0.025 75) 28px)";
  return (
    <div className="relative w-full overflow-hidden" style={{ aspectRatio: ratio, background: stripes }}>
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/10" />
      <div className="absolute bottom-3 left-3 right-3 flex justify-between items-end">
        <span className="font-mono text-[10px] tracking-wider text-white/90 bg-black/25 backdrop-blur-sm px-2 py-1">
          {label}
        </span>
        <span className="font-mono text-[10px] text-white/70">IMG</span>
      </div>
    </div>
  );
};

const SunMark = ({ size = 200, className = "" }) => (
  <svg viewBox="0 0 200 200" width={size} height={size} className={className} aria-hidden>
    <defs>
      <radialGradient id="sun-grad" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="oklch(0.95 0.09 75)" />
        <stop offset="60%" stopColor="oklch(0.80 0.13 65)" />
        <stop offset="100%" stopColor="oklch(0.65 0.14 55)" />
      </radialGradient>
    </defs>
    <circle cx="100" cy="100" r="42" fill="url(#sun-grad)" />
    {Array.from({ length: 24 }).map((_, i) => {
      const angle = (i * 360) / 24;
      return (
        <line
          key={i}
          x1="100" y1="100" x2="100" y2="18"
          stroke="oklch(0.78 0.12 65)"
          strokeWidth={i % 2 === 0 ? "1.2" : "0.6"}
          strokeLinecap="round"
          transform={`rotate(${angle} 100 100)`}
          opacity={i % 2 === 0 ? 0.9 : 0.45}
        />
      );
    })}
    <circle cx="100" cy="100" r="42" fill="none" stroke="oklch(0.55 0.10 50)" strokeWidth="0.5" opacity="0.4" />
  </svg>
);

// ---------- Header / Nav ----------
const SiteNav = () => (
  <header className="sticky top-0 z-40 bg-[color:var(--paper)]/85 backdrop-blur-md border-b border-[color:var(--ink)]/10">
    <div className="max-w-[1400px] mx-auto px-8 py-5 flex items-center justify-between">
      <div className="flex items-baseline gap-3">
        <span className="font-serif text-[22px] tracking-tight text-[color:var(--ink)]">tim&nbsp;taxis</span>
        <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/55 hidden md:inline">
          Einfach · Du · Sein
        </span>
      </div>
      <nav className="hidden md:flex items-center gap-9 font-mono text-[11px] tracking-[0.18em] uppercase text-[color:var(--ink)]/75">
        <a href="#" className="hover:text-[color:var(--accent)]">Über Tim</a>
        <a href="#" className="hover:text-[color:var(--accent)]">Weg</a>
        <a href="#" className="hover:text-[color:var(--accent)]">Kurs</a>
        <a href="#" className="hover:text-[color:var(--accent)]">Stimmen</a>
        <a href="#" className="hover:text-[color:var(--accent)]">Kontakt</a>
      </nav>
      <button className="font-mono text-[11px] tracking-[0.18em] uppercase px-5 py-2.5 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent)] transition-colors">
        Gespräch
      </button>
    </div>
  </header>
);

// ---------- HERO variants ----------
const HeroEditorial = () => (
  <section className="relative overflow-hidden">
    <div className="max-w-[1400px] mx-auto px-8 pt-24 pb-32">
      <div className="grid grid-cols-12 gap-8 items-end">
        <div className="col-span-12 md:col-span-7">
          <Eyebrow className="mb-8">№ 01 — Einladung</Eyebrow>
          <h1 className="font-serif text-[clamp(3.5rem,9vw,10rem)] leading-[0.92] tracking-[-0.02em] text-[color:var(--ink)]">
            Einfach.<br/>
            <span className="italic font-normal">Du.</span><br/>
            Sein.
          </h1>
          <p className="mt-10 font-serif text-[22px] md:text-[26px] leading-[1.45] text-[color:var(--ink)]/80 max-w-xl">
            Kein Werden. Kein Mehr. Kein Besser.
            <span className="block mt-2 italic text-[color:var(--accent-deep)]">
              Nur das, was schon da ist — erkannt.
            </span>
          </p>
          <div className="mt-14 flex flex-wrap items-center gap-6">
            <button className="group font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
              Den Weg beginnen →
            </button>
            <a href="#" className="font-mono text-[11px] tracking-[0.22em] uppercase text-[color:var(--ink)]/70 hover:text-[color:var(--accent)] border-b border-[color:var(--ink)]/30 pb-1">
              Tim kennenlernen
            </a>
          </div>
        </div>

        <div className="col-span-12 md:col-span-5 relative">
          <div className="absolute -top-10 -right-8 opacity-90">
            <SunMark size={260} />
          </div>
          <div className="relative mt-16 md:mt-0">
            <PortraitPlaceholder label="tim — lichthof" />
            <div className="absolute -bottom-6 -left-6 bg-[color:var(--paper)] border border-[color:var(--ink)]/15 px-5 py-4 max-w-[240px]">
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-[color:var(--ink)]/55 mb-2">
                Ein Gedanke
              </div>
              <div className="font-serif text-[15px] leading-[1.5] text-[color:var(--ink)] italic">
                „Nichts muss sich ändern, damit Du frei bist. Nur das Schauen.”
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* marquee-style claim strip */}
      <div className="mt-28 border-t border-b border-[color:var(--ink)]/15 py-6 overflow-hidden">
        <div className="flex gap-16 whitespace-nowrap font-serif text-[28px] md:text-[36px] tracking-tight text-[color:var(--ink)]/80">
          <span>Stille</span>
          <span className="text-[color:var(--accent-deep)]">·</span>
          <span className="italic">Klarheit</span>
          <span className="text-[color:var(--accent-deep)]">·</span>
          <span>Weite</span>
          <span className="text-[color:var(--accent-deep)]">·</span>
          <span className="italic">Wärme</span>
          <span className="text-[color:var(--accent-deep)]">·</span>
          <span>Einfachheit</span>
          <span className="text-[color:var(--accent-deep)]">·</span>
          <span className="italic">Sein</span>
        </div>
      </div>
    </div>
  </section>
);

const HeroStillness = () => (
  <section className="relative overflow-hidden bg-[color:var(--cream-deep)]">
    <div className="max-w-[1200px] mx-auto px-8 pt-32 pb-40 text-center">
      <div className="flex justify-center mb-16">
        <SunMark size={180} />
      </div>
      <Eyebrow className="mb-10">Eine stille Einladung</Eyebrow>
      <h1 className="font-serif text-[clamp(3rem,8vw,8rem)] leading-[1.0] tracking-[-0.02em] text-[color:var(--ink)]">
        Was, wenn Du <span className="italic">nichts</span><br/>
        mehr werden müsstest?
      </h1>
      <p className="mt-12 font-serif text-[22px] leading-[1.55] text-[color:var(--ink)]/75 max-w-2xl mx-auto">
        Ein Weg zurück zu dem, was Du immer schon warst — bevor die Welt Dir erzählt hat, wer Du sein sollst.
      </p>
      <div className="mt-16 flex justify-center gap-6">
        <button className="font-mono text-[11px] tracking-[0.22em] uppercase px-8 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
          Beginnen
        </button>
      </div>
    </div>
  </section>
);

const HeroSplit = () => (
  <section className="relative">
    <div className="grid grid-cols-1 md:grid-cols-2 min-h-[80vh]">
      <div className="bg-[color:var(--ink)] text-[color:var(--paper)] flex items-center p-12 md:p-20">
        <div>
          <Eyebrow className="mb-8 text-[color:var(--paper)]/60">Tim Taxis — Lehre</Eyebrow>
          <h1 className="font-serif text-[clamp(2.5rem,6vw,6rem)] leading-[0.98] tracking-[-0.02em]">
            Einfach.<br/>
            <span className="italic text-[color:var(--accent)]">Du.</span><br/>
            Sein.
          </h1>
          <p className="mt-10 font-serif text-[20px] leading-[1.5] text-[color:var(--paper)]/75 max-w-md">
            Die direkteste Einladung, die Du je bekommen wirst: nicht zu werden, sondern zu erkennen.
          </p>
          <button className="mt-12 font-mono text-[11px] tracking-[0.22em] uppercase px-7 py-3.5 bg-[color:var(--accent)] text-[color:var(--ink)] hover:bg-[color:var(--paper)] transition-colors">
            Den Kurs entdecken →
          </button>
        </div>
      </div>
      <div className="relative">
        <PortraitPlaceholder label="morgenlicht · tim" ratio="auto" />
        <div className="absolute inset-0 bg-gradient-to-r from-[color:var(--ink)]/20 to-transparent" />
      </div>
    </div>
  </section>
);

const Hero = ({ variant }) => {
  if (variant === "stillness") return <HeroStillness />;
  if (variant === "split") return <HeroSplit />;
  return <HeroEditorial />;
};

// ---------- Über Tim ----------
const AboutTim = () => (
  <section className="bg-[color:var(--paper)]">
    <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
      <SectionLabel num="02" label="Über Tim" />
      <div className="grid grid-cols-12 gap-8">
        <div className="col-span-12 md:col-span-5">
          <PortraitPlaceholder label="tim — werkstatt" ratio="4 / 5" />
          <div className="mt-6 grid grid-cols-2 gap-4 font-mono text-[11px] tracking-[0.12em] uppercase text-[color:var(--ink)]/60">
            <div>
              <div className="text-[color:var(--ink)]/40">seit</div>
              <div className="text-[color:var(--ink)] mt-1">2006</div>
            </div>
            <div>
              <div className="text-[color:var(--ink)]/40">Begegnungen</div>
              <div className="text-[color:var(--ink)] mt-1">~ 14 000</div>
            </div>
            <div>
              <div className="text-[color:var(--ink)]/40">Bücher</div>
              <div className="text-[color:var(--ink)] mt-1">Drei</div>
            </div>
            <div>
              <div className="text-[color:var(--ink)]/40">Wohnort</div>
              <div className="text-[color:var(--ink)] mt-1">München</div>
            </div>
          </div>
        </div>

        <div className="col-span-12 md:col-span-7 md:pl-12">
          <h2 className="font-serif text-[clamp(2rem,4vw,3.5rem)] leading-[1.05] tracking-[-0.01em] text-[color:var(--ink)]">
            Ich bin kein Coach.<br/>
            <span className="italic">Ich bin ein Spiegel.</span>
          </h2>
          <div className="mt-10 space-y-6 font-serif text-[18px] leading-[1.65] text-[color:var(--ink)]/85 max-w-xl">
            <p>
              Nach zwei Jahrzehnten in der Welt des Tuns, Erreichens, Beweisens kam der Moment, in dem alles in sich zusammenfiel — und etwas Klares, Stilles zurückblieb.
            </p>
            <p>
              Das, was ich heute weitergebe, ist keine Methode. Es ist ein Zeigen auf etwas, das in Dir schon längst da ist. Manche nennen es Erwachen. Ich nenne es: nach Hause kommen.
            </p>
            <p className="text-[color:var(--accent-deep)] italic border-l-2 border-[color:var(--accent-deep)] pl-6">
              Die einzige Frage, die zählt, ist nicht „Wer werde ich?” — sondern „Wer bin ich, bevor ich antworte?”
            </p>
          </div>
          <div className="mt-10 font-serif text-[18px] text-[color:var(--ink)]">
            Tim Taxis <span className="text-[color:var(--ink)]/50">— Lehrer, Autor, stiller Begleiter</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Der Weg / Methode ----------
const WaySteps = () => {
  const steps = [
    { num: "I", title: "Anhalten", body: "Bevor etwas Neues beginnt, braucht es ein Ende des Laufens. Einen Moment echter Stille." },
    { num: "II", title: "Hinschauen", body: "Nicht auf Lösungen. Auf das, was gerade ist — ehrlich, ohne Filter, ohne Urteil." },
    { num: "III", title: "Loslassen", body: "Was Du für Dich hältst, war nie Du. Was übrig bleibt, wenn Du das erkennst, ist das Geschenk." },
    { num: "IV", title: "Sein", body: "Keine neue Identität. Keine Rolle. Nur das natürliche, klare Gewahrsein — als Alltag." },
  ];
  return (
    <section className="bg-[color:var(--cream)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="03" label="Der Weg" />
        <div className="grid grid-cols-12 gap-8 mb-20">
          <h2 className="col-span-12 md:col-span-6 font-serif text-[clamp(2rem,4.5vw,4rem)] leading-[1.02] tracking-[-0.01em]">
            Vier Bewegungen,<br/>
            <span className="italic">keine davon neu</span>.
          </h2>
          <p className="col-span-12 md:col-span-5 md:col-start-8 font-serif text-[18px] leading-[1.65] text-[color:var(--ink)]/75 self-end">
            Was Du hier findest, ist keine Erfindung. Es ist das, was immer gilt — nur sauber benannt, damit Du es nicht übersiehst.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-0 border-t border-[color:var(--ink)]/15">
          {steps.map((s, i) => (
            <div
              key={s.num}
              className={`py-10 md:py-12 md:px-8 border-b md:border-b-0 border-[color:var(--ink)]/15 ${i < steps.length - 1 ? "md:border-r" : ""} relative group`}
            >
              <div className="font-serif italic text-[80px] leading-none text-[color:var(--accent)] mb-6 transition-colors group-hover:text-[color:var(--accent-deep)]">
                {s.num}
              </div>
              <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/50 mb-3">
                Bewegung {i + 1}
              </div>
              <h3 className="font-serif text-[30px] leading-[1.1] text-[color:var(--ink)] mb-4">
                {s.title}
              </h3>
              <p className="font-serif text-[15px] leading-[1.6] text-[color:var(--ink)]/75">
                {s.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Kurs / Programm ----------
const CourseOverview = () => {
  const modules = [
    { n: "01", title: "Das erste Sehen", dur: "Woche 1 · 4 Sessions", body: "Ein Raum, in dem zum ersten Mal nichts von Dir erwartet wird. Wir beginnen mit dem, was schon ruht." },
    { n: "02", title: "Identität und ihr Trugbild", dur: "Woche 2 · 4 Sessions", body: "Wir schauen auf die Geschichten, die Du für Dich hältst — und finden, was sie trägt." },
    { n: "03", title: "Der wache Alltag", dur: "Woche 3 · 4 Sessions", body: "Übungen nicht zur Erleuchtung, sondern zum Abwaschen mit offenem Blick." },
    { n: "04", title: "Begegnung", dur: "Woche 4 · 4 Sessions", body: "Andere Menschen, wenn niemand mehr „jemand” sein muss. Liebe ohne Projektion." },
    { n: "05", title: "Das Unmittelbare", dur: "Woche 5 · 4 Sessions", body: "Kein Warten. Kein später. Das, was jetzt ist, als einziger Ort, der existiert." },
    { n: "06", title: "Weiter ohne Weg", dur: "Woche 6 · Stille", body: "Integration. Rückkehr. Und die Einladung, dass dies nie endet — weil es nie begann." },
  ];
  return (
    <section id="course" className="bg-[color:var(--paper)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="04" label="Der Online-Kurs" />

        <div className="grid grid-cols-12 gap-8 mb-16">
          <div className="col-span-12 md:col-span-7">
            <Eyebrow className="mb-6">6 Wochen · 24 Sessions · 1 Rückkehr</Eyebrow>
            <h2 className="font-serif text-[clamp(2.25rem,5vw,4.5rem)] leading-[1.0] tracking-[-0.01em]">
              Einfach.Du.Sein. —<br/>
              <span className="italic">der stille Kurs</span>.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9 self-end">
            <p className="font-serif text-[17px] leading-[1.6] text-[color:var(--ink)]/75">
              Ein Online-Weg für Menschen, die nicht noch mehr lernen wollen — sondern endlich etwas loslassen.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          <div className="lg:col-span-8 border-t border-[color:var(--ink)]/15">
            {modules.map((m) => (
              <div key={m.n} className="grid grid-cols-12 gap-6 py-8 border-b border-[color:var(--ink)]/15 group hover:bg-[color:var(--cream)]/50 transition-colors px-2 -mx-2">
                <div className="col-span-2 md:col-span-1 font-mono text-[12px] tracking-[0.18em] text-[color:var(--accent-deep)] pt-1">
                  {m.n}
                </div>
                <div className="col-span-10 md:col-span-7">
                  <h3 className="font-serif text-[26px] leading-[1.1] text-[color:var(--ink)] mb-1">{m.title}</h3>
                  <p className="font-serif text-[15px] leading-[1.55] text-[color:var(--ink)]/70 mt-2">{m.body}</p>
                </div>
                <div className="col-span-10 col-start-3 md:col-span-4 md:col-start-auto font-mono text-[11px] tracking-[0.12em] uppercase text-[color:var(--ink)]/55 pt-1">
                  {m.dur}
                </div>
              </div>
            ))}
          </div>

          {/* Sticky price card */}
          <aside className="lg:col-span-4">
            <div className="sticky top-28 bg-[color:var(--cream-deep)] border border-[color:var(--ink)]/15 p-8">
              <Eyebrow className="mb-6">Teilnahme</Eyebrow>
              <div className="font-serif text-[clamp(2.5rem,4vw,4rem)] leading-none text-[color:var(--ink)]">
                890 €
              </div>
              <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-[color:var(--ink)]/55 mt-2">
                einmalig · inkl. MwSt.
              </div>

              <div className="my-6 h-px bg-[color:var(--ink)]/15" />

              <ul className="space-y-3 font-serif text-[15px] text-[color:var(--ink)]/80">
                <li className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span> 24 geführte Sessions</li>
                <li className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span> Wöchentlicher Live-Call mit Tim</li>
                <li className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span> Stiller Gruppen-Raum</li>
                <li className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span> Lebenslanger Zugang</li>
                <li className="flex gap-3"><span className="text-[color:var(--accent-deep)]">◦</span> Rückkehr-Garantie — 30 Tage</li>
              </ul>

              <button className="mt-8 w-full font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-4 bg-[color:var(--ink)] text-[color:var(--paper)] hover:bg-[color:var(--accent-deep)] transition-colors">
                Teilnehmen →
              </button>

              <p className="mt-4 font-mono text-[10px] tracking-[0.12em] text-[color:var(--ink)]/50 text-center">
                Nächste Gruppe beginnt 4. Mai
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

// ---------- Testimonials ----------
const Testimonials = () => {
  const voices = [
    {
      text: "Ich habe dreißig Jahre gesucht. Hier habe ich zum ersten Mal aufgehört — und genau das war die Ankunft.",
      name: "Anna W.",
      role: "Therapeutin · München",
    },
    {
      text: "Kein Ratschlag. Kein System. Nur ein Mensch, der mich daran erinnert hat, wer ich bin, wenn ich mich nicht erinnere, jemand zu sein.",
      name: "Markus H.",
      role: "Unternehmer · Hamburg",
    },
    {
      text: "Nach der zweiten Woche war etwas leiser. Nach der vierten war ich nicht mehr auf der Suche.",
      name: "Sabrina K.",
      role: "Ärztin · Wien",
    },
  ];
  return (
    <section className="bg-[color:var(--cream-deep)]">
      <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)]">
        <SectionLabel num="05" label="Stimmen" />

        <div className="grid grid-cols-12 gap-8 mb-16">
          <h2 className="col-span-12 md:col-span-7 font-serif text-[clamp(2rem,4.5vw,4rem)] leading-[1.02] tracking-[-0.01em]">
            Was Menschen sagen,<br/>
            <span className="italic">nachdem sie geschwiegen haben</span>.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {voices.map((v, i) => (
            <figure key={i} className="border-t-2 border-[color:var(--accent-deep)] pt-8 pr-4">
              <div className="font-serif text-[40px] leading-none text-[color:var(--accent-deep)] mb-4">“</div>
              <blockquote className="font-serif text-[20px] leading-[1.5] text-[color:var(--ink)] italic">
                {v.text}
              </blockquote>
              <figcaption className="mt-8 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full overflow-hidden">
                  <PortraitPlaceholder label="" ratio="1 / 1" tone="warm" />
                </div>
                <div>
                  <div className="font-serif text-[15px] text-[color:var(--ink)]">{v.name}</div>
                  <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--ink)]/55 mt-0.5">{v.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- CTA ----------
const CallToBook = () => (
  <section className="bg-[color:var(--ink)] text-[color:var(--paper)] relative overflow-hidden">
    <div className="absolute -right-32 -top-32 opacity-30">
      <SunMark size={520} />
    </div>
    <div className="max-w-[1400px] mx-auto px-8 py-[var(--section-py)] relative">
      <Eyebrow className="mb-10 text-[color:var(--paper)]/55">06 — Einladung</Eyebrow>
      <div className="grid grid-cols-12 gap-8 items-end">
        <div className="col-span-12 md:col-span-8">
          <h2 className="font-serif text-[clamp(2.5rem,6.5vw,7rem)] leading-[0.95] tracking-[-0.02em]">
            Wenn Du bis hierher<br/>
            gelesen hast —<br/>
            <span className="italic text-[color:var(--accent)]">dann wartet etwas</span>.
          </h2>
        </div>
        <div className="col-span-12 md:col-span-4 space-y-5">
          <p className="font-serif text-[19px] leading-[1.55] text-[color:var(--paper)]/75">
            Beginne mit einem kostenfreien Gespräch. Kein Verkauf. Nur ein ehrlicher Blick, ob der Weg für Dich ist.
          </p>
          <button className="w-full font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-5 bg-[color:var(--accent)] text-[color:var(--ink)] hover:bg-[color:var(--paper)] transition-colors">
            Gespräch buchen →
          </button>
          <button className="w-full font-mono text-[11px] tracking-[0.22em] uppercase px-6 py-5 border border-[color:var(--paper)]/30 text-[color:var(--paper)] hover:bg-[color:var(--paper)]/10 transition-colors">
            Kostenlos hineinhören
          </button>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Footer ----------
const SiteFooter = () => (
  <footer className="bg-[color:var(--paper)] border-t border-[color:var(--ink)]/15">
    <div className="max-w-[1400px] mx-auto px-8 py-16">
      <div className="grid grid-cols-12 gap-8">
        <div className="col-span-12 md:col-span-5">
          <div className="font-serif text-[32px] tracking-tight text-[color:var(--ink)] mb-3">tim taxis</div>
          <p className="font-serif text-[16px] leading-[1.55] text-[color:var(--ink)]/70 max-w-sm">
            Eine stille Einladung, das zu erkennen, was ohnehin schon da ist.
          </p>
        </div>
        {[
          { h: "Weg", items: ["Über Tim", "Der Weg", "Stimmen", "FAQ"] },
          { h: "Angebot", items: ["Online-Kurs", "Retreats", "Einzelbegleitung", "Bücher"] },
          { h: "Kontakt", items: ["hallo@timtaxis.de", "München, DE", "Newsletter", "Instagram"] },
        ].map((col) => (
          <div key={col.h} className="col-span-6 md:col-span-2">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-[color:var(--ink)]/50 mb-5">{col.h}</div>
            <ul className="space-y-2.5 font-serif text-[15px] text-[color:var(--ink)]/80">
              {col.items.map((it) => <li key={it}><a href="#" className="hover:text-[color:var(--accent-deep)]">{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="mt-16 pt-8 border-t border-[color:var(--ink)]/10 flex flex-wrap justify-between font-mono text-[10px] tracking-[0.14em] uppercase text-[color:var(--ink)]/50">
        <div>© Tim Taxis {new Date().getFullYear()} · Einfach. Du. Sein.</div>
        <div className="flex gap-6"><a href="#">Impressum</a><a href="#">Datenschutz</a><a href="#">AGB</a></div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Rule, Eyebrow, SectionLabel, PortraitPlaceholder, SunMark,
  SiteNav, Hero, AboutTim, WaySteps, CourseOverview, Testimonials, CallToBook, SiteFooter,
});
