antoncoding/monarch

// eslint-disable jsx-a11y/click-events-have-key-events
// eslint-disable jsx-a11y/no-static-element-interactions
'use client';

import { useState, useEffect, useRef } from 'react';
import { Button } from '@nextui-org/react';
import Image from 'next/image';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import Header from '@/components/layout/header/Header';
import { sections } from './sectionData';

function InfoPage() {
  const [currentSection, setCurrentSection] = useState(0);
  const [isClient, setIsClient] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const changeSection = (direction: 'next' | 'prev') => {
    if (isTransitioning) return;
    setIsTransitioning(true);
    setCurrentSection((prev) => {
      if (direction === 'next') {
        return (prev + 1) % sections.length;
      } else {
        return (prev - 1 + sections.length) % sections.length;
      }
    });
    setTimeout(() => setIsTransitioning(false), 500);
  };

  const nextSection = () => changeSection('next');
  const prevSection = () => changeSection('prev');

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let lastWheelTime = 0;
    const wheelThreshold = 50; // Minimum time between wheel events in ms

    const handleWheel = (e: WheelEvent) => {
      const now = Date.now();
      if (now - lastWheelTime < wheelThreshold) return;

      if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 5) {
        e.preventDefault();
        if (e.deltaX > 0) {
          nextSection();
        } else {
          prevSection();
        }
        lastWheelTime = now;
      }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight') {
        nextSection();
      } else if (e.key === 'ArrowLeft') {
        prevSection();
      }
    };

    container.addEventListener('wheel', handleWheel, { passive: false });
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      container.removeEventListener('wheel', handleWheel);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [nextSection, prevSection]);

  const renderImage = (section: (typeof sections)[0], index: number) => (
    <div
      className={`flex items-center justify-center overflow-hidden rounded-lg ${
        index === sections.length - 1
          ? 'h-32 w-32 p-2 sm:h-48 sm:w-48 sm:p-4'
          : 'h-48 w-full sm:h-64'
      }`}
    >
      <Image
        src={section.image}
        alt={section.mainTitle}
        width={index === sections.length - 1 ? 128 : 800}
        height={index === sections.length - 1 ? 128 : 256}
        objectFit="contain"
        className="rounded-lg"
      />
    </div>
  );

  if (!isClient) {
    return null; // or a loading spinner
  }

  return (
    <div className="min-h-screen bg-primary font-zen" ref={containerRef}>
      <Header />
      <main className="container relative mx-auto px-4 py-8">
        <div className="relative overflow-hidden">
          <div
            className="flex transition-transform duration-500 ease-in-out"
            style={{ transform: `translateX(-${currentSection * 100}%)` }}
          >
            {sections.map((section, index) => (
              <div key={`section-${index}`} className="w-full flex-shrink-0 px-4 md:px-8 lg:px-16">
                <div className="mx-auto max-w-3xl rounded-lg bg-secondary px-4 py-6 shadow-lg sm:px-8 sm:py-8 md:px-12">
                  <h1 className="mb-2 text-center text-3xl font-bold sm:text-4xl">
                    {section.mainTitle}
                  </h1>
                  <h2 className="mb-4 text-center text-lg text-secondary sm:mb-6 sm:text-xl">
                    {section.subTitle}
                  </h2>
                  <div className="flex flex-col items-center gap-4 sm:gap-8">
                    {renderImage(section, index)}
                    <div className="prose prose-sm sm:prose-base lg:prose-lg dark:prose-invert w-full">
                      {section.content}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="pointer-events-none fixed inset-0 flex items-center justify-between px-4 sm:px-12 md:px-24 lg:px-32">
          <Button
            isIconOnly
            color="primary"
            variant="flat"
            onPress={prevSection}
            className="pointer-events-auto"
            aria-label="Previous section"
          >
            <FaChevronLeft />
          </Button>
          <Button
            isIconOnly
            color="primary"
            variant="flat"
            onPress={nextSection}
            className="pointer-events-auto"
            aria-label="Next section"
          >
            <FaChevronRight />
          </Button>
        </div>
        <nav className="pointer-events-none fixed inset-x-0 bottom-8 flex justify-center space-x-2">
          {sections.map((_, index) => (
            <button
              type="button"
              key={index}
              onClick={() => setCurrentSection(index)}
              className={`pointer-events-auto h-3 w-3 rounded-full transition-colors duration-200 ease-in-out ${
                index === currentSection ? 'bg-monarch-orange' : 'bg-gray-300 hover:bg-gray-400'
              }`}
              aria-label={`Go to section ${index + 1}`}
            />
          ))}
        </nav>
      </main>
    </div>
  );
}

export default InfoPage;