import InfoCard from '../components/InfoCard';
import Tagline from "../components/Tagline";
import InlineLink from "../components/InlineLink";
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';

import { getClient } from "@/lib/graphqlClient";
import { gql } from "@apollo/client";

const HOME_GET_DATA_QUERY = gql`
  query {
    homePage {
      headline
      section1Header
      section1Body
      section1Cta
      section2Header
      section2Body
      section2Cta
      section3Header
      section3Body
      section3Cta
      section4Header
      section4Body
      section4Cta
    }
  }
`;

export default async function Home() {
  const { data } = await getClient().query({
    query: HOME_GET_DATA_QUERY,
  });

  return (
    <>
        <Navbar collapseHeight={730} />
        <Tagline 
          bgColor="bg-bluemana"
          textColor="text-deepcove"
          textTop="Healthcare that's"
          textBottom="truly affordable"
        />
        <div className="pt-4">
          <InfoCard
            title={data.homePage.section1Header}
            learnMoreUrl={data.homePage.section1Cta}
            imageUrl="/images/members-stock.jpg"
          >
            {data.homePage.section1Body}
          </InfoCard>
        </div>
        <div className='bg-atmosphere rounded-3xl'>
          <InfoCard
            title={data.homePage.section2Header}
            learnMoreUrl={data.homePage.section2Cta}
            imageUrl='/images/employers-stock.jpg'
            invert
          >
            {data.homePage.section2Body}
          </InfoCard>
        </div>
        <InfoCard
          title={data.homePage.section3Header}
          learnMoreUrl={data.homePage.section3Cta}
          imageUrl="/images/providers-stock.jpg"
        >
          {data.homePage.section3Body}
        </InfoCard>
        <div className='bg-platinum rounded-3xl'>
          <InfoCard
            title={data.homePage.section4Header}
            learnMoreUrl={data.homePage.section4Cta}
            imageUrl="/images/brokers-stock.jpg"
            invert
          >
            {data.homePage.section4Body}
          </InfoCard>
        </div>
        <Footer />
    </>
  );
}