import { Metadata } from 'next';
import { HeroSection } from '@/components/sections/HeroSection';
import { FeaturedPost } from '@/components/sections/FeaturedPost';
import { PostsGrid } from '@/components/sections/PostsGrid';
import { CtaBanner } from '@/components/sections/CtaBanner';
import { getPosts, getFeaturedPost } from '@/content/posts';

export const metadata: Metadata = {
  title: 'Blog i Porady | ThermCool',
  description: 'Baza wiedzy na temat klimatyzacji i pomp ciepła na Dolnym Śląsku. Poradniki, porównania urządzeń i aktualności branżowe.',
  alternates: {
    canonical: '/blog',
  }
};

export default function BlogPage() {
  const allPosts = getPosts();
  const featuredPost = getFeaturedPost();
  
  // Usuwamy z głównej siatki artykuł wyróżniony, żeby się nie powielał (chyba że chcemy, ale zazwyczaj się usuwa)
  const remainingPosts = allPosts.filter(post => post.slug !== featuredPost.slug);

  return (
    <main>
      <HeroSection
        eyebrow="Baza Wiedzy"
        title="Blog i poradniki"
        subtitle="Dzielimy się naszą wiedzą i doświadczeniem. Zobacz, jak dbać o domowe instalacje, na co uważać podczas remontu i jak uzyskać dofinansowanie."
        ctaText="Skontaktuj się z nami"
        ctaLink="/kontakt"
        secondaryCtaText="Nasze usługi"
        secondaryCtaLink="/uslugi-domowe"
        backgroundImage="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1600&q=80"
      />

      <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-16">
          <h2 className="text-2xl font-bold text-primary font-heading mb-8">Artykuł wyróżniony</h2>
          <FeaturedPost post={featuredPost} />
        </div>

        <PostsGrid posts={remainingPosts} />
      </section>

      <CtaBanner 
        title="Potrzebujesz indywidualnej porady?"
        subtitle="Zadaj nam pytanie, a z przyjemnością udzielimy darmowej konsultacji i doradzimy najlepsze rozwiązanie."
        ctaText="Zadaj pytanie"
        ctaLink="/kontakt"
      />
    </main>
  );
}