`src/components/LoadingTicker.tsx`

105 lines
'use client'

import { useEffect, useState } from 'react'

const sarcasticRemarks = [
  "Consulting the magic 8-ball of business wisdom...",
  "Teaching AI to pretend it knows about your neighborhood...",
  "Scanning Yelp reviews with a very serious expression...",
  "Asking ChatGPT if it's ever actually been to your city...",
  "Generating buzzwords to make this sound professional...",
  "Pretending to analyze market trends we just made up...",
  "Consulting ancient business scrolls (Wikipedia)...",
  "Running complex algorithms (Googling stuff)...",
  "Channeling the spirit of every failed startup founder...",
  "Convincing the AI this is definitely a good idea...",
  "Throwing darts at a business plan dartboard...",
  "Asking the nearest successful business owner for tips...",
  "Calculating how many lattes you'll need to sell daily...",
  "Determining if your idea is 'disruptive' enough...",
  "Checking if there's already 5 of these on your street...",
  "Measuring the vibes... they're pretty good, actually...",
  "Consulting our crystal ball (it's cloudy today)...",
  "Running your idea through the 'will this work' algorithm...",
  "Asking AI to be optimistic for once...",
  "Generating competitor analysis from thin air...",
  "Calculating startup costs (spoiler: it's expensive)...",
  "Determining market saturation levels (very yes)...",
  "Researching historical context (thanks, Wikipedia)...",
  "Projecting income (with aggressive optimism)...",
  "Analyzing demographics (people who have money)...",
  "Estimating your runway (better start running)...",
  "Checking if this is 2008 all over again...",
  "Validating your business model (crossing fingers)...",
  "Generating SWOT analysis... emphasis on 'Threats'...",
  "Measuring local competition (it's fierce out there)...",
]

interface LoadingTickerProps {
  isComplete?: boolean
}

export function LoadingTicker({ isComplete = false }: LoadingTickerProps) {
  const [currentRemark, setCurrentRemark] = useState(0)
  const [fade, setFade] = useState(true)

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false)
      setTimeout(() => {
        setCurrentRemark((prev) => (prev + 1) % sarcasticRemarks.length)
        setFade(true)
      }, 300)
    }, 3000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg shadow-2xl p-8 max-w-md w-full mx-4">
        <div className="flex flex-col items-center space-y-6">
          {/* Status Emoticon - Red while loading, Green when complete */}
          <div className="relative flex items-center justify-center">
            {isComplete ? (
              <div className="text-6xl animate-bounce">✅</div>
            ) : (
              <div className="text-6xl animate-pulse">🔴</div>
            )}
          </div>

          {/* Title */}
          <h3 className="text-xl font-bold text-gray-900">
            {isComplete ? 'Analysis Complete!' : 'Analyzing Your Brilliant Idea...'}
          </h3>

          {/* Sarcastic ticker */}
          <div className="h-20 flex items-center justify-center">
            <p
              className={`text-sm text-gray-600 italic text-center transition-opacity duration-300 ${
                fade ? 'opacity-100' : 'opacity-0'
              }`}
            >
              {isComplete ? 'Done! Preparing your results...' : sarcasticRemarks[currentRemark]}
            </p>
          </div>

          {/* Progress indication */}
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className={`h-2 rounded-full transition-all duration-500 ${
                isComplete ? 'bg-green-600 w-full' : 'bg-red-600 animate-pulse'
              }`}
              style={{ width: isComplete ? '100%' : '70%' }}
            ></div>
          </div>

          <p className="text-xs text-gray-500">
            {isComplete ? 'Success!' : 'This usually takes 15-30 seconds...'}
          </p>
        </div>
      </div>
    </div>
  )
}