Untitled

/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import { useFeatureFlagVariantKey, usePostHog } from 'posthog-js/react';
import Button, { ButtonType } from './Button';
import dailyEmailImage from '../assets/daily-email.svg';
import robotSearchImage from '../assets/robot-search.svg';
import jobSearchIcon from '../assets/job-search-icon.svg';
import SenjaEmbed from './SenjaEmbed';

type SubscribeToJobBoardUpSellProps = {
  hideHeading: boolean,
  // eslint-disable-next-line react/require-default-props
}
function SubscribeToJobBoardUpSell({ hideHeading = false }: SubscribeToJobBoardUpSellProps) {
  const formRef = useRef<HTMLFormElement>(null);
  const [emailInput, setEmailInput] = useState('');
  const posthog = usePostHog();

  const experimentVariantKey = useFeatureFlagVariantKey('show-testimonials-with-youtube');
  const [showTestimonials, setShowTestimonials] = useState(false);
  useEffect(() => {
    setShowTestimonials(experimentVariantKey === 'test');
  }, [experimentVariantKey]);

  useEffect(() => {
    const handleBlur = () => {
      setTimeout(() => {
        if (document.activeElement?.tagName === 'IFRAME') {
          posthog?.capture('click_youtube_vide_why_did_I_create_rr');
        }
      });
    };

    window.addEventListener('blur', handleBlur, { once: true });

    // Clean up the event listener on component unmount
    return () => {
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  const valueProps: {
    title: string,
    subtitle: string,
    image: any,

  }[] = [
    {
      title: 'Jobs from All Over the Internet',
      subtitle: 'Our powerful technology searches for and collects job openings from across the web.',
      image: robotSearchImage,
    },
    {
      title: 'Discover Hidden Jobs',
      subtitle: 'We find job openings not posted on LinkedIn or other job boards.',
      image: jobSearchIcon,
    },
    {
      title: 'Be the First To Know',
      subtitle: 'Daily emails with new job openings as soon as they\'re available.',
      image: dailyEmailImage,
    },
  ];

  return (
    <div className="flex flex-col w-full">
      <form
        action="/api/subscribe_checkout"
        method="POST"
        ref={formRef}
        className="bg-secondary mx-4 mt-12 mb-12 sm:py-6 sm:px-6 border border-opacity-25 border-slate-200 rounded-lg  flex flex-col outline-none focus:outline-none"
      >
        <input
          required
          readOnly
          type="text"
          name="price"
          className="hidden "
          placeholder="price"
          value={`${experimentVariantKey}`}
        />

        {/* header */}
        {!hideHeading && (
          <h3 className="text-3xl px-6 py-6 font-semibold text-primary">
            Subscribe Now
          </h3>
        )}

        {valueProps.map((v) => (
          <div key={v.title} className="flex flex-row items-center px-4 sm:px-6 py-8 space-x-4">
            <div className="shrink-0 p-2 sm:p-3 h-12 w-12 sm:h-16 sm:w-16 flex flex-row items-center justify-center rounded-xl overflow-hidden bg-button-secondary-highlighted border border-gray-800">
              <Image
                src={v.image}
                alt=""
                style={{ maxWidth: '100%', height: 'auto' }}
              />
            </div>
            <div className="flex flex-col ">
              <h4 className="font-semibold text-primary text-lg">{v.title}</h4>
              <p className=" text-secondary">{v.subtitle}</p>
            </div>
          </div>
        ))}
        {/* body */}
        <div className="relative p-6 flex-auto">

          <h3 className="mt-4 my-2 text-primary text-md">
            Your Email
          </h3>
          <input
            required
            type="email"
            name="email"
            className="bg-button-secondary-highlighted text-primary border border-white rounded-lg text-lg p-2
                    focus:border-button-primary focus:outline-none w-full sm:w-96"
            placeholder="Email"
            value={emailInput}
            onChange={(e) => setEmailInput(e.target.value)}
          />

          <div className="flex flex-col items-start space-y-4 pt-12">

            <div className="flex flex-row space-x-4 items-end">
              <p className="text-primary font-semibold text-2xl">$10 / month</p>
              <p className=" text-secondary">Cancel anytime</p>
            </div>
            <div className="flex flex-row space-x-4 items-center">

              <Button
                icon={null}
                isFormButton
                isRoleLink
                text="🔒 Subscribe Now"
                type={ButtonType.Primary}
                // eslint-disable-next-line @typescript-eslint/no-empty-function
                onClick={() => {}}
              />

            </div>
          </div>
        </div>
      </form>

      {showTestimonials
      && (
        <div className="flex flex-col mx-4">
          <h3
            className="mb-12 font-semibold text-center text-transparent text-5xl bg-clip-text bg-gradient-to-r from-purple-300 to-pink-300"
          >
            Wall of Love
          </h3>
          <SenjaEmbed />
          <h4
            className="mt-12 mb-6 font-semibold text-center text-primary text-4xl"
          >
            Why I created Remote Rocketship
          </h4>
          <div
            className="aspect-w-16 aspect-h-9 mx-4"
          >
            <iframe
              src="https://www.youtube.com/embed/Hq6g28eNbkY"
              title="YouTube video player"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen

            />
          </div>

          <div className="flex flex-col items-center space-y-4 pt-12">

            <div className="flex flex-row space-x-4 items-end">
              <p className="text-primary font-semibold text-2xl">$10 / month</p>
              <p className=" text-secondary">Cancel anytime</p>
            </div>
            <div className="flex flex-row space-x-4 items-center">

              <form
                action="/api/subscribe_checkout"
                method="POST"
                ref={formRef}
                className=""
              >
                <input
                  required
                  readOnly
                  type="text"
                  name="price"
                  className="hidden "
                  placeholder="price"
                  value={`${experimentVariantKey}`}
                />
                <Button
                  icon={null}
                  isFormButton
                  isRoleLink
                  text="🔒 Subscribe Now"
                  type={ButtonType.Primary}
                  // eslint-disable-next-line @typescript-eslint/no-empty-function
                  onClick={async () => { }}
                />
              </form>

            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default SubscribeToJobBoardUpSell;