// SECTION: WHATSNEW

import { createClient } from '@sanity/client'
import axios from 'axios'
import { projectId } from 'lib/sanity.api'
import Image from 'next/image'
import Link from 'next/link'
import React, { Children, useEffect, useState } from 'react'
import Tippy from '@tippyjs/react'
import Container from 'components/BlogContainer'

// import { Carousel, Typography, Button } from '@material-tailwind/react'
import { Fade, Slide } from 'react-awesome-reveal'

//import { getImageLink } from '../../lib/wordpress.image'

import WhatsNewMediaCorner from 'components/Sections/WhatsNewMediaCorner'
import WhatsNewMonthlyUpdate from 'components/Sections/WhatsNewMonthlyUpdate'
import WhatsNewMonthlyUpdate2 from 'components/Sections/WhatsNewMonthlyUpdate2'
import WhatsNewBanner from 'components/Sections/WhatsnewSectionBanner'

const client = projectId
  ? createClient({
      projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
      dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
      apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION,
      useCdn: true,
      token: process.env.SANITY_API_READ_TOKEN,
    })
  : null

const WhatsNewSection = () => {
  return (
    <Container>
      <div className="">
        <div className="mb-2 grid grid-cols-3 gap-0 pt-5">
          <div className="col-span-3 sm:col-span-2">
            <Fade
              direction={'up'}
              duration={1200}
              fraction={1}
              delay={300}
              triggerOnce
            >
              <h2 className="mb-0 text-center font-serif text-3xl font-semibold leading-none text-yellow-500 sm:text-left sm:text-3xl">
                What&rsquo;s New in GWK
              </h2>
            </Fade>
            <Fade duration={3000} fraction={0} delay={1200} triggerOnce>
              <p className="text-stone-700 text-center text-4xl font-bold tracking-tight sm:text-left sm:text-6xl">
                This Month
              </p>
            </Fade>
          </div>
        </div>

        {/* col 1 */}
        <div className="grid grid-cols-1 gap-0 sm:grid-cols-3">
          <div className="bg-stone-500 col-auto sm:col-span-2">
            <Fade duration={2400} fraction={0} delay={300} triggerOnce>
              <WhatsNewMediaCorner />
            </Fade>
          </div>

          {/* col 2 // Banner */}
          <Fade duration={2400} fraction={0} delay={300} triggerOnce>
            <div
              className="bg-slate-0 aspect-square h-48 w-full align-top sm:aspect-auto sm:h-full"
              style={{
                backgroundImage:
                  "url('/images/2d0255c0d035d62a70edb7f7275256bc9db9b73f-1920x1080.jpg')",
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}
            ></div>
          </Fade>
        </div>
      </div>

      <div className="grid gap-0 p-0 sm:grid-cols-3">
        <div className="w-full bg-stone-50 p-5 duration-300 sm:p-10">
          <Fade duration={1200} fraction={0} delay={0} triggerOnce cascade>
            <WhatsNewMonthlyUpdate />
          </Fade>
        </div>

        <div className="bg-slate-100 w-full">
          <WhatsNewBanner />
        </div>

        <div className="w-full bg-stone-100 p-5 duration-300 ease-in-out hover:bg-white sm:p-10">
          <Fade duration={1200} fraction={0} delay={0} triggerOnce cascade>
            <WhatsNewMonthlyUpdate2 />
          </Fade>
        </div>
      </div>
    </Container>
  )
  // }
}
export default WhatsNewSection