import Head from "next/head";
import dynamic from 'next/dynamic';
import RootLayout from "@/components/common/layout/RootLayout";
import { webpageSchema } from '../data/schemas';

// Critical above-the-fold components (static imports)
import DigitalAgencyHero from "@/components/hero/DigitalAgencyHero";
import DigitalAgencyRoll from "@/components/roll/DigitalAgencyRoll";

// Dynamic imports for below-the-fold components
const CreativeAgencyBrand = dynamic(() => import("@/components/brand/CreativeAgencyBrand"));
const PortfolioElementV5 = dynamic(() => import("@/components/portfolio/PortfolioElementV5"));
const DigitalAgencyService = dynamic(() => import("@/components/service/DigitalAgencyService"));
const ServiceElementV5 = dynamic(() => import("@/components/service/ServiceElementV5"));
const DigitalAgencyWorkflow = dynamic(() => import("@/components/workflow/DigitalAgencyWorkflow"));
const DigitalMarketingTestimonial = dynamic(() => import("@/components/testimonial/DigitalMarketingTestimonial"));
const DigitalAgencyBrand = dynamic(() => import("@/components/brand/DigitalAgencyBrand"));
const DigitalAgencyCTA = dynamic(() => import("@/components/cta/DigitalAgencyCTA"));
const DigitalAgencyBlog = dynamic(() => import("@/components/blog/DigitalAgencyBlog"));

const DigitalAgency = () => {
  return (
    <div>
      <Head>
        <title>SyncROI</title>
        <meta name="title" content="SyncROI" />
        <meta name="description" content="Here to build awesome websites, smooth systems, and mobile apps that stand out. We'll make sure your brand shines too." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://syncroi.net/" />
        <meta property="og:title" content="SyncROI" />
        <meta property="og:description" content="Here to build awesome websites, smooth systems, and mobile apps that stand out. We'll make sure your brand shines too." />
        <meta property="og:image" content="https://syncroi.net/assets/imgs/thumbnail.jpg" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://syncroi.net/" />
        <meta property="twitter:title" content="SyncROI" />
        <meta property="twitter:description" content="Here to build awesome websites, smooth systems, and mobile apps that stand out. We'll make sure your brand shines too." />
        <meta property="twitter:image" content="https://syncroi.net/assets/imgs/thumbnail.jpg" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(webpageSchema) }}
        />
      </Head>
      <main>
        <RootLayout header="header2" footer="footer5">
          {/* Critical path components */}
          <DigitalAgencyHero />
          <DigitalAgencyRoll />

          {/* Dynamically loaded components */}
          <CreativeAgencyBrand />
          <PortfolioElementV5 />
          <DigitalAgencyService />
          <ServiceElementV5 />
          <DigitalAgencyWorkflow />
          <DigitalMarketingTestimonial />
          <DigitalAgencyBrand />
          <DigitalAgencyCTA />
          <DigitalAgencyBlog />
        </RootLayout>
      </main>
    </div>
  );
};

export default DigitalAgency;