'use client';

import { SiteHeader } from '@/src/components/layout/SiteHeader';
import { SiteFooter } from '@/src/components/layout/SiteFooter';
import { Breadcrumb } from '@/src/components/layout/Breadcrumb';
import { CatalogPage } from '@/src/components/catalog/CatalogPage';
import { getCategoryBySlug } from '@/src/config/categories';

export default function FilamentiPage() {
  const category = getCategoryBySlug('filamenti')!;

  return (
    <div className="min-h-screen" style={{ background: 'var(--surface-primary)' }}>
      <SiteHeader currentCategory="filamenti" />
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <article>
          <Breadcrumb items={[
            { label: 'Pocetna', href: '/' },
            { label: 'Filamenti' },
          ]} />
          <div className="flex items-center gap-3 mt-3 mb-6">
            <div className="w-1.5 h-8 rounded-full" style={{ backgroundColor: category.colorHex }} />
            <h1
              className="text-2xl sm:text-3xl font-black tracking-tight"
              style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
            >
              Bambu Lab Filamenti
            </h1>
          </div>
          <CatalogPage
            category={category}
            seoContent={
              <p className="text-sm leading-relaxed max-w-3xl" style={{ color: 'var(--text-secondary)' }}>
                Originalni Bambu Lab filamenti za 3D stampac. U ponudi imamo PLA, PETG, ABS, TPU i mnoge druge materijale u razlicitim finishima - Basic, Matte, Silk, Sparkle, Translucent, Metal i drugi. Svi filamenti su originalni Bambu Lab proizvodi, neotvoreni i u fabrickom pakovanju. Dostupni kao refill pakovanje ili na spulni.
              </p>
            }
          />
        </article>
      </main>
      <SiteFooter />
    </div>
  );
}