import React from "react";
import Navbar from "../components/layouts/navbar.jsx";
import SubSection from "../components/layouts/sub-section.jsx"
import dynamic from "next/dynamic";
import SectionTwo from "@/components/layouts/SectionTwo.jsx";

const Section = dynamic(() => import("../components/layouts/section.jsx"));
const ContactFormSection = dynamic(() =>
  import("../components/layouts/ContactFormSection.jsx")
);


export default function Home() {
  return (
    <>
      <Navbar />
      <Section
        key="getInvolved0"
        videoUrl="/higher_ground_optimized.mp4"
        text="get involved"
        buttonLink="#contact"
        buttonTwoText="say hello"
        buttonOneText="watch" videoId="j16NyCutsOo"
      />
      <SectionTwo 
      text ="githaven"
      buttonText="Explore"
      buttonLink="https://githaven.org"
      >
      </SectionTwo>
      <SectionTwo 
      text ="remnant.chat"
      buttonText="Explore"
      buttonLink="https://remnant.chat"
      ></SectionTwo>
      <SectionTwo 
      text ="agilegrace"
      buttonText="Explore"
      buttonLink="https://agilegrace.org"
      ></SectionTwo>
      
<ContactFormSection
text="say hello"
buttonText="contact us"
/>
      </>
  );
}