import Image from 'next/image'
import { m } from 'framer-motion'
import cx from 'classnames'

import { DEFAULT_SPRING_TRANSITION } from '@/lib/constants'

import Container from '@/components/shared/Container'
import FullWidthPhoto from '@/components/sections/FullWidthPhoto'

type Props = {
  image: any
  logo: {
    imageUrl: string
    alt: string
  }
  content: string
  url: string
}

export default function FeaturedCaseStudy({ image, logo, content, url }: Props) {
  return (
    <section className="bg-black text-white">
      <FullWidthPhoto image={image} aspect="16/9" />

      <Container className="flex flex-col sm:flex-row gap-8 sm:gap-16 py-12">
        <div className="sm:w-1/3">
          <h2 className="pb-2 text-h6">Featured Case Study</h2>
          <m.div
            className="h-px w-full mb-8 bg-white origin-left"
            initial={{ opacity: 0, scaleX: 0 }}
            whileInView={{ opacity: 1, scaleX: 1 }}
            viewport={{
              once: true,
              margin: `0px 0px -10% 0px`,
            }}
            transition={DEFAULT_SPRING_TRANSITION}
            aria-hidden
          />
          <Image src={logo.imageUrl} alt={logo.alt} width={225} height={45} />
        </div>

        <div className="sm:w-2/3">
          <div className="pb-2" aria-hidden>
            <span className="hidden sm:block text-h6 invisible">&nbsp;</span>
          </div>

          <m.div
            className="h-px w-full mb-8 bg-white origin-left"
            initial={{ opacity: 0, scaleX: 0 }}
            whileInView={{ opacity: 1, scaleX: 1 }}
            viewport={{
              once: true,
              margin: `0px 0px -10% 0px`,
            }}
            transition={DEFAULT_SPRING_TRANSITION}
            aria-hidden
          />

          <p className="text-body-lg">
            {content}{' '}
            {url && (
              <a href={url} className="font-semibold flex sm:inline-flex items-center group">
                <span>Read the Story</span>
                <span
                  aria-hidden
                  className={cx(
                    "flex items-center w-0 h-full ml-[10px] relative transition transition-all before:w-0 before:h-px before:opacity-0 after:border-l-[10px] after:border-y-[10px] after:border-y-transparent after:border-solid after:opacity-0 group-hover:w-[40px] group-hover:before:w-full group-hover:before:opacity-100 group-hover:after:translate-x-0 group-hover:after:-translate-y-2/4 group-hover:after:left-auto group-hover:after:right-0 group-hover:after:opacity-100 before:content-[''] before:absolute before:origin-center before:-translate-y-2/4 before:transition-all before:duration-[0.2s] before:ease-[ease-in-out] before:top-2/4 after:content-[''] after:absolute after:origin-center after:translate-x-2/4 after:-translate-y-2/4 after:transition-all after:duration-[0.2s] after:ease-[ease-in-out] after:right-2/4 after:top-2/4 after:border-white before:bg-white"
                  )}
                />
              </a>
            )}
          </p>
        </div>
      </Container>
    </section>
  )
}