'use client';

import { useEffect, useRef, useState } from 'react';
import { motion, MotionValue, useScroll, useTransform } from 'motion/react';
import Image from 'next/image';

import { cn } from '@/utils/cn';

const features = [
  {
    title: 'Boost visibility in Google',
    description:
      'Reddit answers now rank high in Google search. Quality comments can drive traffic from both Reddit and search engines.',
    imageUrl: 'https://alignui.com/images/blocks/features-02.png',
    className: 'bg-orange-50 dark:border-orange-300 dark:bg-neutral-900',
  },
  {
    title: 'Tap into Reddit as search',
    description:
      'More people treat Reddit like a search engine. Strong comments put your brand in front of users actively looking for solutions.',
    imageUrl: 'https://alignui.com/images/blocks/features-02-mobile.png',
    className: 'bg-pink-50 dark:border-pink-300 dark:bg-neutral-900',
  },
  {
    title: 'Long-lasting traffic',
    description:
      "Great Reddit comments don't fade. They get rediscovered, shared, and keep sending qualified readers to your profile over time.",
    imageUrl: 'https://alignui.com/images/blocks/features-02.png',
    className: 'bg-purple-50 dark:border-purple-300 dark:bg-neutral-900',
  },
];

const stickyTop = 96;
const stackOffset = 56;

function useScrollAnimation<T extends HTMLElement>() {
  const [inView, setInView] = useState(false);
  const ref = useRef<T>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        setInView(entry.isIntersecting);
      },
      {
        root: null,
        rootMargin: '0px',
        threshold: 0.1,
      },
    );

    observer.observe(element);

    return () => observer.disconnect();
  }, []);

  return [ref, inView] as const;
}

function AnimatedHeader() {
  const [eyebrowRef, eyebrowInView] = useScrollAnimation<HTMLHeadingElement>();
  const [titleRef, titleInView] = useScrollAnimation<HTMLHeadingElement>();
  const [descriptionRef, descriptionInView] =
    useScrollAnimation<HTMLParagraphElement>();

  return (
    <div className='mx-auto mb-16 max-w-3xl text-center'>
      <h2
        ref={eyebrowRef}
        className={cn(
          'text-label-lg text-primary-base mb-2 text-center tracking-wider uppercase transition-all duration-500 ease-out',
          eyebrowInView
            ? 'translate-y-0 opacity-100'
            : 'translate-y-6 opacity-0',
        )}
        style={{ transformStyle: 'preserve-3d' }}
      >
        Reddit Marketing
      </h2>
      <h2
        ref={titleRef}
        className={cn(
          'text-title-h3 md:text-title-h2 text-text-strong-950 dark:text-static-white mb-4 text-center font-serif transition-all duration-700 ease-out',
          titleInView
            ? 'translate-y-0 opacity-100'
            : 'translate-y-10 opacity-0',
        )}
        style={{ transformStyle: 'preserve-3d' }}
      >
        Why Good Reddit Comments Matter
      </h2>
      <p
        ref={descriptionRef}
        className={cn(
          'text-paragraph-lg text-text-sub-600 mt-4 transition-all delay-200 duration-700 ease-out dark:text-neutral-300',
          descriptionInView
            ? 'translate-y-0 opacity-100'
            : 'translate-y-10 opacity-0',
        )}
        style={{ transformStyle: 'preserve-3d' }}
      >
        Generate long-lasting, qualified traffic with evergreen Reddit comments
        that continue to attract readers over time.
      </p>
    </div>
  );
}

function StickyFeatureCard({
  feature,
  index,
  progress,
}: {
  feature: (typeof features)[number];
  index: number;
  progress: MotionValue<number>;
}) {
  const targetScale = Math.max(0.78, 1 - (features.length - index - 1) * 0.08);
  const scale = useTransform(progress, [index * 0.24, 1], [1, targetScale]);

  return (
    <motion.article
      style={{
        scale,
        top: stickyTop + index * stackOffset,
        zIndex: index + 1,
      }}
      className={cn(
        'shadow-regular-xs sticky mb-10 grid origin-top grid-cols-1 items-center gap-4 overflow-hidden rounded-3xl border border-transparent p-8 md:mb-16 md:grid-cols-2 md:gap-8 md:p-12 dark:border-4',
        feature.className,
      )}
    >
      <div className='flex flex-col justify-center gap-4'>
        <div className='text-label-lg text-text-soft-400'>
          {String(index + 1).padStart(2, '0')}
        </div>
        <h3 className='text-title-h4 text-text-strong-950 font-bold'>
          {feature.title}
        </h3>
        <p className='text-paragraph-md text-text-sub-600 max-w-lg'>
          {feature.description}
        </p>
      </div>
      <div className='bg-bg-white-0/70 dark:bg-white-alpha/10 mt-8 overflow-hidden rounded-lg md:mt-0'>
        <Image
          src={feature.imageUrl}
          alt={feature.title}
          width={640}
          height={426}
          loading='lazy'
          className='aspect-video h-auto w-full object-cover shadow-lg'
        />
      </div>
    </motion.article>
  );
}

export default function StickyFeatureCards() {
  const containerRef = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start start', 'end end'],
  });

  return (
    <section ref={containerRef} className='bg-bg-white-0 w-full py-24 md:py-48'>
      <div className='mx-auto flex w-full max-w-7xl flex-col px-6 md:px-7'>
        <AnimatedHeader />

        <div
          className='w-full'
          style={{
            paddingBottom: `calc(100vh - ${stickyTop + (features.length - 1) * stackOffset}px)`,
          }}
        >
          {features.map((feature, index) => (
            <StickyFeatureCard
              key={feature.title}
              feature={feature}
              index={index}
              progress={scrollYProgress}
            />
          ))}
        </div>
      </div>
    </section>
  );
}