From 811190abd8c0c8b0162ca2e547912f53e6e2ef14 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Mar 2026 12:07:01 -0800
Subject: [PATCH] fix: replace react-pageflip with simple single-slide viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the flipbook library — it couldn't reliably force single-page
mode. Replace with a CSS translateX carousel that shows exactly one
slide at a time with smooth transitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/sponsorship-flipbook.tsx | 92 ++++++++---------------------
 1 file changed, 26 insertions(+), 66 deletions(-)

diff --git a/components/sponsorship-flipbook.tsx b/components/sponsorship-flipbook.tsx
index d579036..c8aeaa0 100644
--- a/components/sponsorship-flipbook.tsx
+++ b/components/sponsorship-flipbook.tsx
@@ -1,99 +1,59 @@
 "use client"
 
-import React, { useRef, useState, useCallback } from "react"
-import dynamic from "next/dynamic"
+import { useState } from "react"
 import Image from "next/image"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
 
-const HTMLFlipBook = dynamic(() => import("react-pageflip"), { ssr: false })
-
 const TOTAL_SLIDES = 12
 
-const Page = React.forwardRef<HTMLDivElement, { number: number }>(
-  function Page({ number }, ref) {
-    return (
-      <div ref={ref} className="bg-white">
-        <Image
-          src={`/slides/slide-${String(number).padStart(2, "0")}.jpg`}
-          alt={`Sponsorship deck slide ${number}`}
-          width={1200}
-          height={675}
-          className="w-full h-full object-contain"
-          priority={number <= 2}
-        />
-      </div>
-    )
-  }
-)
-
 export default function SponsorshipFlipbook() {
-  const bookRef = useRef<any>(null)
-  const [currentPage, setCurrentPage] = useState(0)
+  const [currentSlide, setCurrentSlide] = useState(0)
 
-  const onFlip = useCallback((e: any) => {
-    setCurrentPage(e.data)
-  }, [])
-
-  const prevPage = () => bookRef.current?.pageFlip()?.flipPrev()
-  const nextPage = () => bookRef.current?.pageFlip()?.flipNext()
+  const prevSlide = () => setCurrentSlide((s) => Math.max(0, s - 1))
+  const nextSlide = () => setCurrentSlide((s) => Math.min(TOTAL_SLIDES - 1, s + 1))
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <div className="w-full" style={{ aspectRatio: "16/9" }}>
-        {/* @ts-expect-error react-pageflip types are incomplete */}
-        <HTMLFlipBook
-          ref={bookRef}
-          width={3000}
-          height={1688}
-          size="stretch"
-          minWidth={300}
-          maxWidth={1200}
-          minHeight={169}
-          maxHeight={675}
-          showCover={false}
-          mobileScrollSupport={true}
-          onFlip={onFlip}
-          className="mx-auto"
-          style={{}}
-          maxShadowOpacity={0.3}
-          drawShadow={true}
-          usePortrait={true}
-          flippingTime={600}
-          startPage={0}
-          autoSize={true}
-          startZIndex={0}
-          clickEventForward={true}
-          useMouseEvents={true}
-          swipeDistance={30}
-          showPageCorners={true}
-          disableFlipByClick={false}
+      <div className="relative w-full overflow-hidden rounded-xl border border-border shadow-lg bg-black">
+        <div
+          className="flex transition-transform duration-500 ease-in-out"
+          style={{ transform: `translateX(-${currentSlide * 100}%)` }}
         >
           {Array.from({ length: TOTAL_SLIDES }, (_, i) => (
-            <Page key={i + 1} number={i + 1} />
+            <div key={i} className="w-full flex-shrink-0">
+              <Image
+                src={`/slides/slide-${String(i + 1).padStart(2, "0")}.jpg`}
+                alt={`Sponsorship deck slide ${i + 1}`}
+                width={1200}
+                height={675}
+                className="w-full h-auto"
+                priority={i <= 1}
+              />
+            </div>
           ))}
-        </HTMLFlipBook>
+        </div>
       </div>
 
       <div className="flex items-center gap-4">
         <Button
           variant="outline"
           size="icon"
-          onClick={prevPage}
-          disabled={currentPage === 0}
-          aria-label="Previous page"
+          onClick={prevSlide}
+          disabled={currentSlide === 0}
+          aria-label="Previous slide"
         >
           <ChevronLeft className="w-4 h-4" />
         </Button>
         <span className="text-sm text-muted-foreground min-w-[4rem] text-center">
-          {currentPage + 1} / {TOTAL_SLIDES}
+          {currentSlide + 1} / {TOTAL_SLIDES}
         </span>
         <Button
           variant="outline"
           size="icon"
-          onClick={nextPage}
-          disabled={currentPage >= TOTAL_SLIDES - 1}
-          aria-label="Next page"
+          onClick={nextSlide}
+          disabled={currentSlide >= TOTAL_SLIDES - 1}
+          aria-label="Next slide"
         >
           <ChevronRight className="w-4 h-4" />
         </Button>