---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import Hero from "../../components/hero/Hero.astro";
import SectionRenderer from "../../components/sections/SectionRenderer.astro";
import Markdown from "../../islands/Markdown.jsx";

import yaml from "js-yaml";
import fs from "fs";

const seo = yaml.load(
  fs.readFileSync("./src/content/internet-swiatlowodowy/seo.yaml", "utf8"),
);
const hero = yaml.load(
  fs.readFileSync("./src/content/internet-swiatlowodowy/hero.yaml", "utf8"),
);
const page = yaml.load(
  fs.readFileSync("./src/content/internet-swiatlowodowy/page.yaml", "utf8"),
);

const first = page.paragraphs[0];
---

<DefaultLayout seo={seo}>
  <Hero {...hero} />

  <section class="fuz-section text-center">
    <div class="fuz-section-grid md:grid-cols-1">
      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}

      {first.title && <h3>{first.title}</h3>}
      <Markdown text={first.content} />
    </div>
  </section>

  {
    page.paragraphs.slice(1).map((p: { title: string; content: string }) => (
      <section class="fuz-section text-center">
        <div class="fuz-section-grid md:grid-cols-1">
          {p.title && <h3 class="fuz-section-title">{p.title}</h3>}

          {p.content
            .trim()
            .split(/\n\n+/)
            .map((par: string) => (
              <Markdown text={par} />
            ))}
        </div>
      </section>
    ))
  }

  <SectionRenderer src="./src/content/internet-swiatlowodowy/section.yaml" />
  <!-- <section class="fuz-section">
    <div class="fuz-container">
      <h1 class="fuz-hero-title">Internet – FUZ</h1>
      <p class="mt-4 text-gray-600 dark:text-gray-300">
        Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
      </p>
    </div>
  </section> -->
</DefaultLayout>