export default function SportManagementBlogPlatform() {
  const navigation = [
    { label: "Start", href: "#start" },
    { label: "Blog", href: "#blog" },
    { label: "O mnie", href: "#about" },
    { label: "Współpraca", href: "#work" },
    { label: "Produkty", href: "#products" },
    { label: "Kontakt", href: "#contact" },
  ];

  const featuredPosts = [
    {
      category: "Zarządzanie w sporcie",
      title: "Dlaczego chaos organizacyjny w sporcie rzadko bierze się z braku zaangażowania",
      excerpt:
        "W wielu organizacjach problemem nie jest brak pracy, ale brak porządku, jasności odpowiedzialności i właściwego modelu działania.",
    },
    {
      category: "Rola lidera",
      title: "Prezes nie powinien być centrum każdej decyzji",
      excerpt:
        "Kiedy zarządzający staje się operacyjnym filtrem dla większości spraw, organizacja traci tempo, samodzielność i przestrzeń do rozwoju.",
    },
    {
      category: "Struktury i organizacja",
      title: "Kiedy problemem nie są ludzie, tylko źle ustawiona struktura",
      excerpt:
        "Zanim uznasz, że organizacja potrzebuje nowych osób, warto sprawdzić, czy obecny model pracy nie blokuje potencjału tych, którzy już są w środku.",
    },
  ];

  const categories = [
    {
      title: "Zarządzanie w sporcie",
      description:
        "Teksty o decyzjach, odpowiedzialności i codziennym funkcjonowaniu organizacji sportowych.",
    },
    {
      title: "Struktury i organizacja",
      description:
        "O tym, jak budować porządek, klarowność i przewidywalność działania.",
    },
    {
      title: "Rola prezesa i lidera",
      description:
        "Refleksje o przywództwie, delegowaniu i miejscu zarządzającego w całym modelu organizacji.",
    },
    {
      title: "Sportowiec jako projekt",
      description:
        "Spojrzenie na sportowca nie tylko przez wynik, ale też przez zaplecze, proces i sposób organizacji pracy.",
    },
    {
      title: "Kulisy pracy w sporcie",
      description:
        "O tym, co dzieje się poza oficjalną narracją i jak wygląda realna codzienność tej branży.",
    },
    {
      title: "Analizy i komentarze",
      description:
        "Autorskie przemyślenia na temat mechanizmów, zjawisk i kierunków rozwoju w sporcie.",
    },
  ];

  const collaborationAreas = [
    {
      title: "Konsulting dla klubów i organizacji sportowych",
      description:
        "Wsparcie dla tych, którzy chcą lepiej zrozumieć swoją organizację, odzyskać kontrolę nad procesami i podejmować trafniejsze decyzje rozwojowe.",
    },
    {
      title: "Audyt struktur i procesów",
      description:
        "Analiza odpowiedzialności, przepływu informacji oraz miejsc, w których organizacja traci sprawność lub przeciąża osoby decyzyjne.",
    },
    {
      title: "Wsparcie dla sportowców i menedżerów",
      description:
        "Pomoc w uporządkowaniu sposobu działania, zaplecza organizacyjnego i kierunku rozwoju kariery lub projektu sportowego.",
    },
  ];

  const products = [
    {
      title: "Checklista prezesa klubu sportowego",
      description:
        "Zestaw pytań pomagających ocenić, czy organizacja działa w sposób uporządkowany, przewidywalny i gotowy do rozwoju.",
      badge: "PDF",
    },
    {
      title: "Mini-audyt organizacji sportowej",
      description:
        "Wstępna analiza obszarów, które mogą blokować skuteczne zarządzanie i przeciążać osoby odpowiedzialne za rozwój.",
      badge: "Usługa",
    },
    {
      title: "Konsultacja strategiczna 1:1",
      description:
        "Indywidualna rozmowa o wyzwaniach organizacyjnych, kierunku rozwoju i realnych możliwościach uporządkowania działania.",
      badge: "Spotkanie online",
    },
  ];

  const popularPosts = [
    "Czy w sporcie naprawdę umiemy delegować odpowiedzialność?",
    "Dlaczego zaangażowanie nie zawsze oznacza profesjonalne zarządzanie",
    "Jak rozpoznać, że organizacja działa reaktywnie zamiast strategicznie",
  ];

  return (
    <div className="min-h-screen bg-white text-slate-900">
      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          <a href="#start" className="text-base font-semibold uppercase tracking-[0.16em] text-slate-950">
            Mieszko Łabuz
          </a>

          <nav className="hidden items-center gap-8 lg:flex">
            {navigation.map((item) => (
              <a
                key={item.label}
                href={item.href}
                className="text-sm font-medium text-slate-600 transition hover:text-slate-950"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <a
            href="#contact"
            className="rounded-full bg-emerald-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
          >
            Umów konsultację
          </a>
        </div>
      </header>

      <main>
        <section id="start" className="relative overflow-hidden border-b border-slate-200 bg-slate-50">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.10),transparent_28%),radial-gradient(circle_at_bottom_right,rgba(15,23,42,0.06),transparent_30%)]" />
          <div className="relative mx-auto grid max-w-7xl gap-14 px-6 py-20 lg:grid-cols-[1.08fr_0.92fr] lg:px-8 lg:py-28">
            <div>
              <div className="inline-flex rounded-full border border-slate-200 bg-white px-4 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-slate-600 shadow-sm">
                Blog i konsulting o zarządzaniu w sporcie
              </div>
              <h1 className="mt-8 max-w-4xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl lg:text-6xl lg:leading-[1.05]">
                Zarządzanie w sporcie to nie tylko wynik. To również struktura, decyzje i odpowiedzialność.
              </h1>
              <p className="mt-8 max-w-2xl text-lg leading-8 text-slate-600">
                To miejsce, w którym dzielę się przemyśleniami, analizami i praktycznym spojrzeniem na zarządzanie w sporcie. Piszę o klubach, organizacjach, liderach, procesach i wyzwaniach, które decydują o jakości działania. Równolegle wspieram klientów w konsultingu, audycie i porządkowaniu struktur.
              </p>
              <div className="mt-10 flex flex-col gap-4 sm:flex-row">
                <a
                  href="#blog"
                  className="rounded-full bg-slate-950 px-7 py-4 text-center text-sm font-semibold text-white transition hover:bg-slate-800"
                >
                  Czytaj blog
                </a>
                <a
                  href="#work"
                  className="rounded-full border border-slate-300 px-7 py-4 text-center text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:text-slate-950"
                >
                  Zobacz możliwości współpracy
                </a>
              </div>
            </div>

            <div className="flex items-center">
              <div className="w-full rounded-[32px] border border-slate-200 bg-white p-8 shadow-[0_30px_80px_rgba(15,23,42,0.08)] lg:p-10">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">O czym jest ta strona</p>
                <h2 className="mt-5 text-2xl font-semibold tracking-tight text-slate-950 lg:text-3xl">
                  Miejsce dla tych, którzy chcą rozumieć sport również od strony zarządzania.
                </h2>
                <p className="mt-5 text-sm leading-7 text-slate-600">
                  Ta strona powstała z potrzeby mówienia o sporcie szerzej niż tylko przez wynik, emocje i wydarzenia. Interesuje mnie to, co dzieje się pod powierzchnią: sposób zarządzania, role, odpowiedzialność, kultura działania, struktury organizacyjne i decyzje, które wpływają na rozwój ludzi oraz instytucji sportowych.
                </p>
                <div className="mt-8 grid gap-4 sm:grid-cols-2">
                  <div className="rounded-2xl bg-slate-50 p-5">
                    <p className="text-sm font-medium text-slate-500">Rdzeń projektu</p>
                    <p className="mt-2 text-base font-semibold text-slate-900">Blog ekspercki</p>
                  </div>
                  <div className="rounded-2xl bg-emerald-50 p-5">
                    <p className="text-sm font-medium text-emerald-700">Cel biznesowy</p>
                    <p className="mt-2 text-base font-semibold text-slate-900">Konsulting i produkty</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="blog" className="mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
          <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div className="max-w-3xl">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Najnowsze artykuły</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Blog jest osią całego projektu i miejscem, w którym buduję perspektywę na zarządzanie w sporcie.
              </h2>
            </div>
            <a href="#blog-list" className="text-sm font-semibold text-slate-900 transition hover:text-emerald-700">
              Zobacz wszystkie artykuły
            </a>
          </div>

          <div className="mt-12 grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
            <div className="grid gap-6">
              {featuredPosts.map((post, index) => (
                <article
                  key={post.title}
                  className={`rounded-[30px] border border-slate-200 bg-white p-8 shadow-sm ${index === 0 ? "xl:p-10" : ""}`}
                >
                  <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">{post.category}</p>
                  <h3 className="mt-4 text-2xl font-semibold tracking-tight text-slate-950">
                    {post.title}
                  </h3>
                  <p className="mt-4 text-base leading-8 text-slate-600">{post.excerpt}</p>
                  <button className="mt-6 text-sm font-semibold text-slate-900 transition hover:text-emerald-700">
                    Czytaj dalej
                  </button>
                </article>
              ))}
            </div>

            <aside className="space-y-6">
              <div className="rounded-[30px] border border-slate-200 bg-slate-50 p-8">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Najczęściej czytane</p>
                <div className="mt-6 space-y-4">
                  {popularPosts.map((post, index) => (
                    <div key={post} className="rounded-2xl bg-white p-5 shadow-sm">
                      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">0{index + 1}</p>
                      <p className="mt-2 text-sm leading-7 text-slate-700">{post}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-[30px] border border-slate-200 bg-slate-950 p-8 text-white">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Współpraca</p>
                <h3 className="mt-4 text-2xl font-semibold tracking-tight">
                  Szukasz indywidualnego wsparcia?
                </h3>
                <p className="mt-4 text-sm leading-7 text-slate-300">
                  Jeśli widzisz podobne problemy w swojej organizacji, mogę pomóc Ci spojrzeć na nie szerzej w ramach konsultacji lub audytu.
                </p>
                <a
                  href="#contact"
                  className="mt-6 inline-flex rounded-full bg-emerald-500 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-emerald-400"
                >
                  Umów rozmowę
                </a>
              </div>
            </aside>
          </div>
        </section>

        <section className="border-y border-slate-200 bg-slate-50">
          <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
            <div className="max-w-3xl">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Obszary tematyczne</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Blog porządkuje temat zarządzania w sporcie w kilku kluczowych obszarach.
              </h2>
            </div>

            <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
              {categories.map((category) => (
                <div key={category.title} className="rounded-[28px] border border-slate-200 bg-white p-7 shadow-sm">
                  <h3 className="text-lg font-semibold tracking-tight text-slate-950">{category.title}</h3>
                  <p className="mt-4 text-sm leading-7 text-slate-600">{category.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="about" className="mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
          <div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-start">
            <div className="rounded-[32px] border border-slate-200 bg-white p-8 shadow-sm lg:p-10">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">O mnie</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Patrzę na sport przez pryzmat ludzi, decyzji i struktury.
              </h2>
              <p className="mt-6 text-base leading-8 text-slate-600">
                Interesuje mnie praktyczna strona zarządzania w sporcie. Analizuję nie tylko to, co widać na zewnątrz, ale też to, co naprawdę wpływa na jakość działania organizacji: odpowiedzialność, sposób komunikacji, model zarządzania i relację między strategią a codziennością.
              </p>
              <p className="mt-4 text-base leading-8 text-slate-600">
                W pracy stawiam na uważność, słuchanie i rozwiązania dopasowane do realnych potrzeb. Właśnie dlatego moje podejście łączy blog ekspercki z konsultingiem, audytem i tworzeniem praktycznych narzędzi dla ludzi działających w sporcie.
              </p>
              <a href="#contact" className="mt-8 inline-flex text-sm font-semibold text-slate-900 transition hover:text-emerald-700">
                Poznaj możliwości współpracy
              </a>
            </div>

            <div className="grid gap-5 sm:grid-cols-2">
              {[
                ["Uważność", "Zanim zaproponuję kierunek, chcę zrozumieć realny problem i logikę działania organizacji."],
                ["Zaangażowanie", "Pracuję w sposób, który daje klientowi poczucie, że temat jest naprawdę zaopiekowany."],
                ["Dopasowanie", "Nie narzucam gotowych schematów. Szukam rozwiązań trafnych dla konkretnego kontekstu."],
                ["Praktyka", "Interesuje mnie nie tylko diagnoza, ale to, czy rekomendacje zaczynają działać w codzienności."],
              ].map(([title, text]) => (
                <div key={title} className="rounded-[28px] border border-slate-200 bg-slate-50 p-7">
                  <h3 className="text-lg font-semibold tracking-tight text-slate-950">{title}</h3>
                  <p className="mt-4 text-sm leading-7 text-slate-600">{text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="work" className="bg-slate-950 text-white">
          <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
            <div className="max-w-3xl">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Współpraca</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
                Wspieram osoby i organizacje, które chcą uporządkować sposób działania.
              </h2>
              <p className="mt-5 text-lg leading-8 text-slate-300">
                Współpraca jest skierowana do tych, którzy chcą lepiej rozumieć własną organizację, odzyskać kontrolę nad procesami i podejmować trafniejsze decyzje rozwojowe.
              </p>
            </div>

            <div className="mt-12 grid gap-6 lg:grid-cols-3">
              {collaborationAreas.map((area) => (
                <div key={area.title} className="rounded-[30px] border border-white/10 bg-white/5 p-8">
                  <h3 className="text-xl font-semibold tracking-tight text-white">{area.title}</h3>
                  <p className="mt-4 text-sm leading-7 text-slate-300">{area.description}</p>
                </div>
              ))}
            </div>

            <div className="mt-14 grid gap-6 lg:grid-cols-4">
              {[
                ["01", "Rozmowa wstępna", "Pierwszy kontakt pozwala zobaczyć, jakiego typu wyzwanie stoi dziś przed organizacją lub osobą."],
                ["02", "Diagnoza problemu", "Oddzielenie objawów od przyczyn i nazwanie obszarów, które rzeczywiście wymagają pracy."],
                ["03", "Rekomendacje", "Przygotowanie kierunku działania, który odpowiada na konkretną sytuację klienta."],
                ["04", "Dalsze wsparcie", "W zależności od potrzeb możliwe jest przejście do procesu doradczego, audytu lub konsultacji cyklicznych."],
              ].map(([number, title, text]) => (
                <div key={number} className="rounded-[28px] bg-white/5 p-6">
                  <p className="text-sm font-semibold tracking-[0.2em] text-emerald-400">{number}</p>
                  <h3 className="mt-3 text-lg font-semibold text-white">{title}</h3>
                  <p className="mt-3 text-sm leading-7 text-slate-300">{text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="products" className="mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-24">
          <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
            <div className="max-w-3xl">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Produkty</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Dodatkowe materiały i narzędzia dla osób zarządzających sportem.
              </h2>
              <p className="mt-5 text-base leading-8 text-slate-600">
                Poza konsultingiem chcę rozwijać także produkty, które porządkują myślenie, ułatwiają diagnozę i pozwalają wejść w kontakt z moim podejściem w prostszej formule.
              </p>
            </div>
            <a href="#contact" className="text-sm font-semibold text-slate-900 transition hover:text-emerald-700">
              Zapytaj o ofertę produktów
            </a>
          </div>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {products.map((product) => (
              <div key={product.title} className="rounded-[30px] border border-slate-200 bg-white p-8 shadow-sm">
                <span className="inline-flex rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700">
                  {product.badge}
                </span>
                <h3 className="mt-5 text-2xl font-semibold tracking-tight text-slate-950">{product.title}</h3>
                <p className="mt-4 text-sm leading-7 text-slate-600">{product.description}</p>
                <button className="mt-6 text-sm font-semibold text-slate-900 transition hover:text-emerald-700">
                  Dowiedz się więcej
                </button>
              </div>
            ))}
          </div>
        </section>

        <section className="border-y border-slate-200 bg-slate-50">
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-[0.95fr_1.05fr] lg:px-8 lg:py-24">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Newsletter</p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Otrzymuj nowe teksty i analizy dotyczące zarządzania w sporcie.
              </h2>
              <p className="mt-5 text-base leading-8 text-slate-600">
                Zapisz się, jeśli chcesz otrzymywać informacje o nowych artykułach, analizach i materiałach publikowanych na stronie. To najprostszy sposób, aby być blisko nowych treści i rozwijanych produktów.
              </p>
            </div>

            <div className="rounded-[32px] border border-slate-200 bg-white p-8 shadow-sm">
              <form className="space-y-5">
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Imię</label>
                  <input
                    type="text"
                    placeholder="Twoje imię"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Adres e-mail</label>
                  <input
                    type="email"
                    placeholder="twoj@email.pl"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full rounded-full bg-slate-950 px-6 py-4 text-sm font-semibold text-white transition hover:bg-slate-800"
                >
                  Zapisz się
                </button>
              </form>
            </div>
          </div>
        </section>

        <section id="contact" className="bg-white">
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-20 lg:grid-cols-[1fr_0.95fr] lg:px-8 lg:py-24">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-700">Kontakt</p>
              <h2 className="mt-4 max-w-3xl text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Jeśli chcesz porozmawiać o swojej organizacji, wyzwaniach zarządczych lub kierunku rozwoju, zapraszam do kontaktu.
              </h2>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                Najczęściej pierwsza rozmowa pozwala już uporządkować problem i zobaczyć, gdzie naprawdę leży jego źródło. To dobry punkt wyjścia do dalszej współpracy, audytu lub konsultacji.
              </p>

              <div className="mt-8 space-y-3 text-sm leading-7 text-slate-600">
                <p>Email: kontakt@twojadomena.pl</p>
                <p>LinkedIn: linkedin.com/in/twojprofil</p>
                <p>Telefon: +48 000 000 000</p>
              </div>
            </div>

            <div className="rounded-[32px] border border-slate-200 bg-slate-50 p-8 shadow-sm">
              <h3 className="text-2xl font-semibold tracking-tight text-slate-950">Napisz wiadomość</h3>
              <form className="mt-8 space-y-5">
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Imię i nazwisko</label>
                  <input
                    type="text"
                    placeholder="Twoje imię i nazwisko"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Adres e-mail</label>
                  <input
                    type="email"
                    placeholder="twoj@email.pl"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Temat</label>
                  <input
                    type="text"
                    placeholder="Czego dotyczy wiadomość"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium text-slate-700">Wiadomość</label>
                  <textarea
                    rows={5}
                    placeholder="Opisz krótko, z czym się dziś mierzysz"
                    className="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-emerald-500 focus:outline-none"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full rounded-full bg-emerald-600 px-6 py-4 text-sm font-semibold text-white transition hover:bg-emerald-700"
                >
                  Wyślij wiadomość
                </button>
              </form>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-slate-200 bg-slate-950 text-white">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 py-12 lg:grid-cols-[1fr_0.8fr_0.8fr] lg:px-8">
          <div>
            <p className="text-base font-semibold uppercase tracking-[0.16em] text-white">Mieszko Łabuz</p>
            <p className="mt-4 max-w-md text-sm leading-7 text-slate-300">
              Blog i platforma ekspercka o zarządzaniu w sporcie, strukturach organizacyjnych i rozwoju osób oraz instytucji działających w tej branży.
            </p>
          </div>

          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Nawigacja</p>
            <div className="mt-4 space-y-3 text-sm text-slate-300">
              {navigation.map((item) => (
                <a key={item.label} href={item.href} className="block transition hover:text-white">
                  {item.label}
                </a>
              ))}
            </div>
          </div>

          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-400">Kontakt</p>
            <div className="mt-4 space-y-3 text-sm text-slate-300">
              <p>kontakt@twojadomena.pl</p>
              <p>linkedin.com/in/twojprofil</p>
              <p>Polityka prywatności</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}