'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 OpremaPage() {
  const category = getCategoryBySlug('oprema')!;

  return (
    <div className="min-h-screen" style={{ background: 'var(--surface-primary)' }}>
      <SiteHeader currentCategory="oprema" />
      <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: 'Oprema i Dodaci' },
          ]} />
          <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 Oprema i Dodaci
            </h1>
          </div>
          <CatalogPage
            category={category}
            seoContent={
              <p className="text-sm leading-relaxed max-w-3xl" style={{ color: 'var(--text-secondary)' }}>
                Bambu Lab oprema i dodaci za 3D stampace. AMS (Automatic Material System), spool holderi, alati za odrzavanje, filament drajeri i druga dodatna oprema. Sve sto vam treba za optimalan rad vaseg Bambu Lab 3D stampaca.
              </p>
            }
          />
        </article>
      </main>
      <SiteFooter />
    </div>
  );
}