New Personal Narrative - Gary Sheng

This is the React component code for Gary's personal narrative story playback feature.

'use client'

import { useState, useRef, useEffect, useCallback } from 'react'
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Play, Pause, SkipBack, SkipForward, ExternalLink } from "lucide-react"
import ReactMarkdown from 'react-markdown'
import Image from 'next/image'
import { GradientText } from '@/components/ui/gradient-text'
import { BlurFade } from '@/components/ui/blur-fade'
import { motion, AnimatePresence } from 'framer-motion'
import { GlowEffect } from '@/components/ui/glow-effect'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface StorySection {
  id: string
  title: string
  content: string
  audioUrl: string
  imageUrl?: string
  imageCaption?: string
  videoUrl?: string
  callToAction?: {
    text: string
    url: string
  }
}

const STORY_SECTIONS: StorySection[] = [
  {
    id: 'tldr',
    title: 'TL;DR',
    content: `Hey, I'm Gary. As a strategist and company builder in Austin, I operate **Hyperagent Labs** to build world-changing ventures alongside once-in-a-generation scientists and faith institutions.\n\nMy mission is to **Unlock the Golden Age** by bridging technology and human flourishing. With a background spanning Google, web3, and AI, my work is grounded in deep faith and a commitment to creating a more miraculous future.`,
    audioUrl: '/story/tldr.mp3',
    imageUrl: '/images/gary.webp',
    imageCaption: 'Me after hosting a 3,000 person tech event in 2024',
  },
  {
    id: 'origins',
    title: 'Origins',
    content: `My story begins *way* before I was born, with my great-grandfather serving as a **pastor** in southern China during the 1930s and 40s, before Christianity was banned. His dedication to faith and community laid the foundation for our family's values.

A big part of my story is also the story of my grandfather, driven by ambition and faith in possibilities, who left his village to become a **rocket engineer** in a major Chinese city. Then came the Communist revolution.

For the simple fact that his family owned land, he was torn from his five-year-old son — my father — and imprisoned in a labor camp for six years. Despite the futility, my grandfather became known for his **iron will**, protesting his unjust imprisonment every chance he got — a testament to unwavering faith in truth and justice.`,
    audioUrl: '/story/origins.mp3',
    imageUrl: '/images/china.webp',
    imageCaption: 'The treatment my grandfather received'
  },
  {
    id: 'parents-journey',
    title: 'Parents\' Journey',
    content: `My parents' **determination** to provide a better life for themselves and their future children led them to **top universities** in China and eventually to the United States as graduate students.

My brother was born shortly before the **Tiananmen Square massacre**, a pivotal moment that transformed our family's status from student visa holders to permanent residents, thanks to the **Chinese Student Protection Act** supported by Nancy Pelosi and President George H.W. Bush.

I was born in the United States soon after.`,
    audioUrl: '/story/parents-journey.mp3',
    imageUrl: '/images/dancing.webp',
    imageCaption: 'Two students dancing during the Tiananmen Square protests in 1989'
  },
  {
    id: 'early-education',
    title: 'Early Education',
    content: `Growing up in suburban America, I had the privilege of attending the Illinois Mathematics and Science Academy **IMSA**, founded by a **Nobel laureate**.

Beyond academics, I discovered my talent for **organizing communities** — from coordinating DOTA tournaments across dorm rooms to negotiating sanctioned dance parties with administrators.

As **tennis team captain** and **event organizer**, I learned early on how to bring people together around shared interests.`,
    audioUrl: '/story/early-education.mp3',
    imageUrl: '/images/imsa.webp',
    imageCaption: 'The IMSA campus'
  },
  {
    id: 'university',
    title: 'University Years',
    content: `At **Duke University**, early mentors introduced me to **coding** in my sophomore year, opening up a new world of possibilities.

The experience was transformative, tied only with the diversity of people I met and my role in the **leading dance team**. Organizing large dance shows further developed my skills in bringing people together and creating memorable experiences.`,
    audioUrl: '/story/university.mp3',
    imageUrl: '/images/duke.webp',
    imageCaption: 'Duke University'
  },
  {
    id: 'professional',
    title: 'Professional Journey',
    content: `I began my career at **Google**, leading a small team on **Google Cloud's frontend**. This experience instilled in me the importance of structured thinking, comprehensive design documents, and cross-team coordination.

During this time, I also co-founded **Dancing Pineapple**, producing **24 concerts and parties** across NYC and LA over two years. Through this platform, we helped launch electronic music artists who later performed at major festivals like **Coachella** and **EDC Vegas**, while creating transformative experiences that brought diverse communities together.

Amid the social upheaval of 2016-2019, I left Google to co-found **Civics Unplugged**, a nonprofit focused on **civic education** and **innovation**. Our work empowered thousands of young people across **70+ countries** to engage meaningfully with democracy and public service.

We gained support from notable partners including **Dwayne "The Rock" Johnson**, **Andrew Yang**, **Coinbase**, and the **Ethereum Foundation**. This work earned me recognition in the **Forbes 30 Under 30 2021** list and was featured in **PBS's "Roadtrip Nation"** documentary on Changemakers.`,
    audioUrl: '/story/professional.mp3',
    imageUrl: '/images/google.webp',
    imageCaption: 'The NYC Google office',
  },
  {
    id: 'web3',
    title: 'Web3 & Community Building',
    content: `My journey then led me into the **web3 space**, where I was captivated by the potential of **permissionless systems**.

I contributed to multiple projects through **product design**, **community building**, **event production**, and **product marketing**, working with various companies in consulting roles.

A highlight was contributing to the early days of Vitalik Buterin's **Zuzalu**, a pioneering **pop-up city community** first launched in Montenegro that demonstrated new models of innovation and community living.

Being immersed in the web3 space inspired me to explore all sorts of what I call **foundational technologies**—solutions that enable **hyperlocal resilience**, **self-sustainability**, **dynamism**, and **ecological regeneration**. This exploration laid the groundwork for my current mission.`,
    audioUrl: '/story/web3.mp3',
    imageUrl: '/images/zuzalu.webp',
    imageCaption: 'Me with my friend at Zuzalu in Montenegro',
  },
  {
    id: 'gauntlet',
    title: 'The Gauntlet & The Great Transition',
    content: `The AI revolution marked a turning point in my career, revealing opportunities for high-impact collaboration that led me beyond pure engineering.\n\nMy deep, first-hand experience—over 1,000 hours of building with and reflecting on these new AI paradigms, including completing the elite **Gauntlet AI** bootcamp—has given me unique insight. I've transitioned from building tools to **building companies and movements**, where my technical foundation serves the higher purpose of providing **global strategy** to faith institutions and once-in-a-generation scientists.\n\nI focus on helping **commercialize world-changing inventions** and guiding **Christ-driven decision-making** as they build increasingly powerful technologies for humanity's benefit.\n\nMy **faith** continues to be the guiding force, helping me discern which partnerships align with divine purpose and human flourishing.`,
    audioUrl: '/story/gauntlet.mp3',
    imageUrl: '/images/gauntlet.webp',
    imageCaption: 'Speaking at the Gauntlet AI graduation in March 2025'
  },
  {
    id: 'christofuture',
    title: 'The Christofuture: Refounding America',
    content: `My work is dedicated to **refounding America**. Through my agency **Hyperagent Labs**, based in **Austin, Texas**, I partner with a select few once-in-a-generation scientists and faith institutions to build world-changing, Christ-centered ventures.\n\nOur focus is on deep, dedicated partnerships where we navigate the complexities of bringing breakthrough technologies to the world in a way that serves humanity's highest good.\n\nMy role is to bring strategic clarity, a builder's mindset, and a faith-centered perspective to the table as we make wise, Christ-driven decisions to shape the future.\n\nThis is a long-term mission, and **Hyperagent Labs** is not currently seeking new clients. To follow the journey of refounding America, you can [read my Substack](https://substack.garysheng.com/p/refounding) or [connect with me on X](https://x.com/garysheng).`,
    audioUrl: '/story/austin.mp3',
    imageUrl: '/images/austin.webp',
    imageCaption: 'Building the future from Austin, Texas'
  },
  {
    id: 'builders-vow',
    title: 'A Builder\'s Vow',
    content: `I believe building is an act of worship. To build for God is not to wear the cross as a brand, but to bear it as a calling—to accept the weight and wonder of co-creation.\n\nTherefore, I build with **Truth** as my foundation, **Beauty** as my standard, and **Goodness** as my measure of impact.\n\nTo build with **Truth** is to reject illusion and anchor my work in the eternal. To build with **Beauty** is to create technology that feels more like nature than machine, making us more human, not less. To build with **Goodness** is to ensure every venture serves human flourishing and strengthens our connection to each other and to God.\n\nThis is not merely work. It is my part in refounding a world where technology serves the sacred, and every creation is an altar to the glory of God.`,
    audioUrl: '/story/principles.mp3',
    imageUrl: '/images/principles.webp',
    imageCaption: 'My guiding principles'
  }
]

enum PlaybackState {
  LOADING = 'LOADING',
  PLAYING = 'PLAYING',
  PAUSED = 'PAUSED',
  CONTINUE = 'CONTINUE'
}

function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => setMatches(media.matches)
    media.addEventListener('change', listener)
    return () => media.removeEventListener('change', listener)
  }, [matches, query])

  return matches
}

export interface StoryPlaybackProps {
  sections?: StorySection[];
}

export function StoryPlayback({ sections = STORY_SECTIONS }: StoryPlaybackProps) {
  const isHoverDevice = useMediaQuery('(hover: hover)')
  const [playbackState, setPlaybackState] = useState<PlaybackState>(PlaybackState.LOADING)
  const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
  const [progress, setProgress] = useState(0)
  const [isReady, setIsReady] = useState(false)
  const [isEnded, setIsEnded] = useState(false)
  const [displaySpeed, setDisplaySpeed] = useState(1)
  const playbackSpeedRef = useRef(1)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const cardRefs = useRef<(HTMLDivElement | null)[]>([])
  const shouldAutoplayRef = useRef(false)
  const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null)
  const [hoveredCardIndex, setHoveredCardIndex] = useState<number | null>(null)

  const scrollToSection = useCallback((index: number) => {
    setTimeout(() => {
      const currentCard = cardRefs.current[index]
      if (currentCard) {
        const cardTop = currentCard.offsetTop
        const scrollTarget = cardTop - 50
        window.scrollTo({
          top: scrollTarget,
          behavior: 'smooth'
        })
      }
    }, 0)
  }, [])

  const togglePlayPause = useCallback(async () => {
    const audio = audioRef.current
    if (!audio || !isReady) return

    try {
      if (playbackState === PlaybackState.PLAYING) {
        audio.pause()
        setPlaybackState(PlaybackState.PAUSED)
      } else {
        if (isEnded) {
          window.scrollTo({ top: 0, behavior: 'smooth' })
          setTimeout(() => {
          shouldAutoplayRef.current = true
          setCurrentSectionIndex(0)
          setIsEnded(false)
          }, 1000)
          return
        }

        if (currentSectionIndex === 0 && playbackState === PlaybackState.PAUSED && !audio.currentTime) {
          scrollToSection(0)
        }

        if (audio.ended) {
          audio.currentTime = 0
        }

        const playPromise = audio.play()
        if (playPromise !== undefined) {
          setPlaybackState(PlaybackState.PLAYING)
          await playPromise
          audio.playbackRate = playbackSpeedRef.current
        } else {
          setPlaybackState(PlaybackState.PLAYING)
        }
      }
    } catch (error) {
      console.error('Playback failed:', error)
      setPlaybackState(PlaybackState.PAUSED)
    }
  }, [playbackState, isReady, isEnded, currentSectionIndex, scrollToSection])

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.code === 'Space' &&
          event.target instanceof HTMLElement &&
          !['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
        event.preventDefault()
        if (isReady && playbackState !== PlaybackState.LOADING) {
          togglePlayPause()
        }
      }
    }

    window.addEventListener('keydown', handleKeyPress)
    return () => {
      window.removeEventListener('keydown', handleKeyPress)
    }
  }, [isReady, playbackState, togglePlayPause])

  const handleSectionEnd = useCallback(() => {
    if (currentSectionIndex < sections.length - 1) {
      shouldAutoplayRef.current = true
      setCurrentSectionIndex(prev => prev + 1)
    } else {
      setPlaybackState(PlaybackState.PAUSED)
      setIsEnded(true)
    }
  }, [currentSectionIndex, sections.length])

  useEffect(() => {
    setIsReady(false)
    setPlaybackState(PlaybackState.LOADING)
    setProgress(0)
    setIsEnded(false)

    const audio = new Audio()

    const handleCanPlay = async () => {
      setIsReady(true)
      audio.playbackRate = playbackSpeedRef.current

      if (shouldAutoplayRef.current) {
        shouldAutoplayRef.current = false
        try {
          const playPromise = audio.play()
          if (playPromise !== undefined) {
            setPlaybackState(PlaybackState.PLAYING)
            await playPromise
          } else {
            setPlaybackState(PlaybackState.PLAYING)
          }
        } catch (error) {
          console.error('Auto-play failed:', error)
          setPlaybackState(PlaybackState.PAUSED)
        }
      } else {
        setPlaybackState(PlaybackState.PAUSED)
      }
    }

    const handleTimeUpdate = () => {
      if (audio.duration && !isNaN(audio.duration)) {
        setProgress(audio.currentTime / audio.duration)
      }
    }

    const handleError = (e: ErrorEvent) => {
      console.error('Audio error:', e)
      setPlaybackState(PlaybackState.PAUSED)
      setIsReady(false)
    }

    audio.src = sections[currentSectionIndex].audioUrl
    audio.preload = 'auto'
    audio.currentTime = 0

    audio.addEventListener('canplaythrough', handleCanPlay)
    audio.addEventListener('ended', handleSectionEnd)
    audio.addEventListener('timeupdate', handleTimeUpdate)
    audio.addEventListener('error', handleError)

    audioRef.current = audio
    audio.playbackRate = playbackSpeedRef.current

    audio.load()

    return () => {
      audio.removeEventListener('canplaythrough', handleCanPlay)
      audio.removeEventListener('ended', handleSectionEnd)
      audio.removeEventListener('timeupdate', handleTimeUpdate)
      audio.removeEventListener('error', handleError)
      audio.pause()
      audio.src = ''
      audioRef.current = null
      setIsReady(false)
    }
  }, [currentSectionIndex, handleSectionEnd, sections])

  const toggleSpeed = useCallback(() => {
    const speeds = [1, 1.5, 2.0, 2.5]
    const currentIndex = speeds.indexOf(playbackSpeedRef.current)
    const nextSpeed = speeds[(currentIndex + 1) % speeds.length]

    const audio = audioRef.current
    if (audio) {
      audio.playbackRate = nextSpeed
    }
    playbackSpeedRef.current = nextSpeed
    setDisplaySpeed(nextSpeed)
  }, [])

  const jumpToSection = useCallback((index: number) => {
    const audio = audioRef.current
    if (audio) {
      if (index === currentSectionIndex && playbackState === PlaybackState.PAUSED) {
        togglePlayPause()
        return
      }

      audio.pause()
      shouldAutoplayRef.current = true
      setProgress(0)
      setCurrentSectionIndex(index)
      setPlaybackState(PlaybackState.PAUSED)
      scrollToSection(index)
    }
  }, [currentSectionIndex, playbackState, togglePlayPause, scrollToSection])

  useEffect(() => {
    if (isReady && currentSectionIndex > 0) {
      scrollToSection(currentSectionIndex)
    }
  }, [currentSectionIndex, scrollToSection, isReady])

  const calculateTilt = useCallback((e: React.MouseEvent<HTMLDivElement>, cardElement: HTMLDivElement) => {
    const rect = cardElement.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    const xPercent = (x / rect.width) * 100
    const yPercent = (y / rect.height) * 100

    const tiltX = ((yPercent - 50) / 50) * -2
    const tiltY = ((xPercent - 50) / 50) * 2

    return { tiltX, tiltY }
  }, [])

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>, index: number) => {
    const card = cardRefs.current[index]
    if (!card) return

    const { tiltX, tiltY } = calculateTilt(e, card)
    setMousePosition({ x: tiltX, y: tiltY })
    setHoveredCardIndex(index)
  }, [calculateTilt])

  const handleMouseLeave = useCallback(() => {
    setMousePosition(null)
    setHoveredCardIndex(null)
  }, [])

  return (
    <div className="space-y-8">
      {/* Component JSX continues... */}
    </div>
  )
}