import type { Metadata } from "next";
import dynamic from "next/dynamic";

const ZeroTrustScenarioViewer = dynamic(
  () =>
    import("@/components/demos/zero-trust/ZeroTrustScenarioViewer").then(
      (m) => m.ZeroTrustScenarioViewer,
    ),
  { ssr: false },
);

export const metadata: Metadata = {
  title: "Simulateur Zero Trust | Der-topogo",
  description:
    "Visualisez des scénarios de sécurité Zero Trust : flux de données, décisions de politique, micro-segmentation et bonnes pratiques.",
};

export default function ZeroTrustDemoPage() {
  return (
    <>
      <section className="bg-cosmos-900 py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <h1 className="text-3xl font-bold tracking-tight text-nieve sm:text-5xl">
              Simulateur Zero Trust
            </h1>
            <p className="mt-6 text-lg text-cosmos-300">
              Comparez un modèle périmétrique et des approches Zero Trust avec
              des flux visuels entre identités, appareils, passerelles,
              applications et données.
            </p>
          </div>
        </div>
      </section>

      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <ZeroTrustScenarioViewer />
        </div>
      </section>
    </>
  );
}