import { Metadata } from "next";

import ClientNavbar from "@/components/pages/client/common/client-navbar";
import Footer from "@/components/common/footer";

export const metadata: Metadata = {
  title: {
    template: "%s | User Viewing by People for Research",
    default:
      "Bristol's premier UX testing lab & market research facility | User Viewing",
  },
  description:
    "Discover User Viewing, Bristol's only fully integrated UX testing lab and market research viewing facility. Unlock real-time consumer insights through usability testing, focus groups, and one-on-one interviews. Enhance your digital products and user journeys with our cutting-edge observation services, tailored for websites, apps, and product testing.",
  openGraph: {
    title:
      "Bristol's premier UX testing lab & market research facility | User Viewing",
    description:
      "Explore User Viewing, Bristol's only integrated UX and market research facility. Get actionable insights through usability testing, focus groups, and interviews to optimise your user experience.",
    url: "https://peopleforresearch.co.uk/user-viewing",
    type: "website",
    locale: "en_GB",
    siteName: "User Viewing | People for Research",
    images: [
      {
        url: "/global-assets/user-viewing-logo.svg",
        alt: "User Viewing logo featuring an eye, symbolizing user-focused research and insights.",
        width: 1024,
        height: 512,
      },
    ],
  },
  twitter: {
    title:
      "Bristol's premier UX testing lab & market research facility | User Viewing",
    card: "summary_large_image",
    images: "/global-assets/user-viewing-logo.svg",
  },
};

export default function UserViewingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col min-h-screen bg-others-mistyGray dark:bg-jet">
      <ClientNavbar />
      <main className="flex-grow" id="main-content">
        {children}
      </main>
      <Footer source="client" />
    </div>
  );
}