import type {Metadata} from 'next';
import {DemoBrowser} from '@/components/DemoBrowser';
import {DemoSubnav} from '@/components/DemoSubnav';
import {SectionHeader} from '@/components/SectionHeader';
import {orderedDemos} from '@/config/content';

export const metadata: Metadata = {
  title: 'Dema konfiguratorów 3D | Ultifide',
  description: 'Lista interaktywnych dem konfiguratorów 3D Ultifide z podglądem biurka, wnętrz i drzwi.'
};

export default function DemosPage() {
  return (
    <main>
      <section className="sectionBand sectionBand--light demosPage">
        <div className="container demosContainer">
          <SectionHeader
            eyebrow="Dema konfiguratorów"
            title="Sprawdź konfiguratory 3D w jednym miejscu"
            description="Wybierz demo z listy, przetestuj je od razu w podglądzie, a potem przejdź do strony z opisem zastosowania i korzyści."
          />
          <DemoSubnav demos={orderedDemos} hrefType="browser" />
          <DemoBrowser demos={orderedDemos} />
        </div>
      </section>
    </main>
  );
}
