{/* Marquee text */}
          <div className="py-3 overflow-hidden" style={{ 
            border: "4px ridge #888",
            background: `url(${blueTextureCard})`,
            backgroundSize: "cover"
          }}>
            <div className="animate-marquee whitespace-nowrap">
              <span className="text-2xl font-bubble text-black mx-8">
                WELCOME TO THE DEPTHS JOIN THE SHRIMPSALAD REVOLUTION 
                FRESH FROM THE OCEAN ONE OF US ONE OF US
              </span>
            </div>
          </div>

          <p className="text-3xl font-bubble text-black">
            THE MOST TUBULAR UNDERWATER CULT
          </p>
        </div>

        {/* GIF Gallery Section */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
          <img src={purpleFish} alt="purple fish" className="w-full h-auto border-4" style={{ border: "4px ridge #888" }} />
          <img src={swimmer} alt="swimmer" className="w-full h-auto border-4" style={{ border: "4px ridge #888" }} />
          <img src={dino} alt="dino" className="w-full h-auto border-4" style={{ border: "4px ridge #888" }} />
          <img src={fishbowl} alt="fishbowl" className="w-full h-auto border-4" style={{ border: "4px ridge #888" }} />
        </div>

        {/* Mission Statement Section */}
        <Card className="mb-12 p-8 transform hover:scale-105 transition-transform" style={{ 
          border: "8px ridge #888",
          background: `url(${blueTextureCard})`,
          backgroundSize: "cover"
        }}>
          <div className="text-center mb-6">
            <h2 className="text-5xl font-bubble text-black mb-2">
              THE SACRED LORE
            </h2>
          </div>

          <div className="space-y-4 text-black text-lg leading-relaxed font-bubble">
            <p className="pl-4" style={{ borderLeft: "4px ridge #888" }}>
              <strong className="text-black text-2xl">In the beginning,</strong> there was only the vast ocean, 
              empty and yearning. The ancient Shrimp Gods looked upon the waters and decided something was missing...
            </p>
            
            <p className="pl-4" style={{ borderLeft: "4px ridge #888" }}>
              <strong className="text-black text-2xl">The Great Toss of 98:</strong> During the legendary Y2K preparation, 
              a cosmic salad bowl collided with a meteor shower of celestial shrimp. This divine collision created 
              the first Shrimpsalad - a perfect harmony of crisp lettuce and succulent shrimp that would change the 
              underwater world forever.
            </p>
            
            <p className="pl-4" style={{ borderLeft: "4px ridge #888" }}>
              <strong className="text-black text-2xl">Our Sacred Mission:</strong> We believe that every being 
              deserves the perfect blend of crustacean wisdom and leafy enlightenment. By joining the Shrimpsalad Cult, 
              you pledge to spread the good vibes of the ocean, honor the sacred combo, and always remember: 
              <span className="text-black font-black text-xl"> STAY FRESH, STAY CRUNCHY, STAY SHRIMPY!</span>
            </p>

            <div className="p-6 mt-6" style={{ 
              border: "4px ridge #888",
              background: `url(${blueTextureCard})`,
              backgroundSize: "cover"
            }}>
              <p className="text-center text-2xl font-bubble text-black mb-2">
                THE THREE PILLARS OF SHRIMPSALAD
              </p>
              <ul className="space-y-2 text-xl text-black">
                <li><strong className="text-black">Crustacean Compassion:</strong> Respect all sea life</li>
                <li><strong className="text-black">Salad Solidarity:</strong> Share the greens</li>
                <li><strong className="text-black">Oceanic Optimism:</strong> Ride the waves of positivity</li>
              </ul>
            </div>
          </div>
        </Card>

        {/* Ocean Scene GIF */}
        <div className="mb-12 flex justify-center">
          <img src={oceanScene} alt="ocean scene" className="w-full max-w-2xl border-4" style={{ border: "8px ridge #888" }} />
        </div>

        {/* Merch Section */}
        <Card className="p-8" style={{ 
          border: "8px ridge #888",
          background: `url(${blueTextureCard})`,
          backgroundSize: "cover"
        }}>
          <div className="text-center mb-8">
            <h2 className="text-5xl font-bubble text-black mb-4">
              JOIN THE CULT!
            </h2>
            <p className="text-2xl text-black font-bubble animate-pulse">
              Get Your Official Shrimpsalad Cult T-Shirt!
            </p>
          </div>

          <div className="max-w-md mx-auto">
            <div className="p-6 transform hover:rotate-2 transition-transform" style={{ 
              border: "8px ridge #888",
              background: `url(${blueTextureCard})`,
              backgroundSize: "cover"
            }}>
              <img 
                src={shrimpShirt} 
                alt="Shrimpsalad Cult Shirt" 
                className="w-full h-auto mb-4"
                style={{ border: "4px ridge #888" }}
              />
              
              <div className="space-y-4">
                <p className="text-center text-3xl font-bubble text-black">
                  OFFICIAL CULT T-SHIRT
                </p>
                <p className="text-center text-black text-lg font-bubble">
                  100% Cotton, 100% Shrimp Approved<br />
                  Features the Sacred Shrimpsalad Symbol
                </p>
                
                <div className="bg-primary/20 p-4" style={{ border: "4px ridge #888" }}>
                  <p className="text-center text-4xl font-bubble text-black mb-2">
                    $19.98
                  </p>
                  <p className="text-center text-sm text-black font-bubble">
                    (A very 90s price!)
                  </p>
                </div>

                <Button 
                  onClick={handleJoinCult}
                  className="w-full text-2xl py-8 font-bubble bg-accent hover:bg-accent/80 text-black transform hover:scale-110 transition-all"
                  style={{
                    border: "4px ridge #888",
                    boxShadow: "0 8px 0 #888"
                  }}
                >
                  BUY NOW & JOIN!
                </Button>

                <p className="text-center text-sm text-black italic font-bubble">
                  * Purchase includes lifetime membership to the Shrimpsalad Cult
                </p>
              </div>
            </div>
          </div>
        </Card>

        {/* Footer */}
        <div className="mt-12 text-center space-y-4">
          <div className="inline-block px-6 py-3" style={{ 
            border: "4px ridge #888",
            background: `url(${blueTextureCard})`,
            backgroundSize: "cover"
          }}>
            <p className="text-black font-bubble text-lg">
              UNDER CONSTRUCTION
            </p>
            <p className="text-black text-sm font-bubble">
              Best viewed in Netscape Navigator 4.0
            </p>
          </div>
          
          <p className="text-black text-sm font-bubble">
            1998-2025 Shrimpsalad Cult | All Rights Reserved in the Ocean
          </p>
        </div>
      </div>

      <style>{`
        @keyframes marquee {
          0% { transform: translateX(100%); }
          100% { transform: translateX(-100%); }
        }
        .animate-marquee {
          animation: marquee 20s linear infinite;
        }
      `}</style>
    </div>
  );
};

export default Index;