import React, { useState, useEffect } from 'react';
import { X, ChevronDown, ChevronUp } from 'lucide-react';

// This would normally go in your global CSS or head component
// In a real implementation, you'd want to properly import these fonts using Next.js or your framework of choice
// Add this to your HTML head or CSS file:
// @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Caveat:wght@400;500;600&display=swap');

const MnemosWebsite = () => {
  const [loading, setLoading] = useState(true);
  const [loadingPhase, setLoadingPhase] = useState(0);
  const [loggedIn, setLoggedIn] = useState(false);
  const [showFaq, setShowFaq] = useState(false);
  const [showDocs, setShowDocs] = useState(false);
  const [expandedFaqs, setExpandedFaqs] = useState({});

  // FAQ items
  const faqItems = [
    {
      question: "What is MNEMOS?",
      answer: "MNEMOS is a unique gaming experience on Solana where memories are preserved and reimagined in a digital landscape."
    },
    {
      question: "How do I participate?",
      answer: "Join our community through our social channels, connect your wallet, and become part of the collective memory bank."
    },
    {
      question: "When is the launch?",
      answer: "The official launch date will be announced soon. Stay tuned to our X account for the latest updates."
    },
    {
      question: "What makes MNEMOS unique?",
      answer: "Our distinctive approach to memory preservation and the integration with Solana blockchain creates an experience that's not generated, not forgotten, just remembered differently."
    }
  ];

  // Animated loading screen sequence
  useEffect(() => {
    if (loading) {
      const sequence = [
        setTimeout(() => setLoadingPhase(1), 1000),
        setTimeout(() => setLoadingPhase(2), 2000),
        setTimeout(() => setLoadingPhase(3), 3000),
        setTimeout(() => setLoadingPhase(4), 4000),
        setTimeout(() => setLoading(false), 5000)
      ];

      return () => sequence.forEach(timer => clearTimeout(timer));
    }
  }, [loading]);

  const handleLogin = () => {
    setLoggedIn(true);
  };

  const toggleFaq = () => {
    setShowFaq(!showFaq);
    setShowDocs(false);
  };

  const toggleDocs = () => {
    setShowDocs(!showDocs);
    setShowFaq(false);
  };

  const toggleFaqItem = (index) => {
    setExpandedFaqs(prev => ({
      ...prev,
      [index]: !prev[index]
    }));
  };

  // Pencil sketch style
  const pencilSketchStyle = {
    fontFamily: '"Permanent Marker", "Caveat", "Comic Sans MS", cursive, sans-serif',
    textRendering: 'geometricPrecision',
    WebkitFontSmoothing: 'antialiased',
    letterSpacing: '0.5px',
    fontWeight: '400',
  };

  // Enhanced hand-drawn border style
  const sketchyBorder = {
    border: '2px solid #333',
    borderRadius: '2px',
    boxShadow: '3px 3px 0 rgba(0,0,0,0.2)',
    position: 'relative',
    transform: 'rotate(-0.2deg)',
    borderTopWidth: '2.5px',
    borderLeftWidth: '1.8px',
    borderRightWidth: '2.2px',
    borderBottomWidth: '2.3px',
  };

  // Loading screen
  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center h-screen bg-amber-100 overflow-hidden"
           style={{backgroundImage: "url('bg.png')", backgroundSize: 'cover'}}>

        {/* Animated Brain Cube Character */}
        <div className={`relative mb-8 transition-all duration-1000 transform ${loadingPhase >= 1 ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}>
          <div className="w-32 h-32 bg-red-400 border-2 border-teal-500 relative animate-pulse">
            {loadingPhase >= 2 && (
              <div className="absolute top-6 left-6 w-20 h-20 bg-red-300 flex items-center justify-center animate-bounce">
                <svg viewBox="0 0 100 100" className="w-16 h-16 text-red-500">
                  <path d="M50,20 C70,20 80,40 80,50 C80,70 60,80 50,80 C30,80 20,70 20,50 C20,30 30,20 50,20 Z"
                    fill="currentColor" stroke="currentColor" strokeWidth="2">
                  </path>
                  <path d="M30,40 C40,30 60,30 70,40 M30,60 C40,70 60,70 70,60 M40,30 C40,20 60,20 60,30 M40,70 C40,80 60,80 60,70"
                    fill="none" stroke="darkred" strokeWidth="2">
                  </path>
                </svg>
              </div>
            )}
          </div>
        </div>

        {/* Animated Text Sequence */}
        <div className="text-center flex flex-col items-center space-y-4">
          {loadingPhase >= 3 && (
            <div className="text-5xl font-bold text-teal-600 animate-pulse title-text hand-drawn"
                 style={{...pencilSketchStyle, animation: "typewriter 1s steps(7) forwards"}}>
              MNEMOS
            </div>
          )}

          {loadingPhase >= 4 && (
            <div className="text-2xl font-bold text-teal-600 opacity-0 animate-fade-in title-text hand-drawn"
                 style={{...pencilSketchStyle, animation: "fadeIn 1s forwards 0.5s"}}>
              ON SOLANA
            </div>
          )}
        </div>

        {/* Loading Bar */}
        <div className="w-64 h-4 bg-amber-200 mt-12 overflow-hidden" style={sketchyBorder}>
          <div
            className="h-full bg-teal-600 transition-all duration-500 ease-in-out"
            style={{ width: `${loadingPhase * 25}%` }}
          ></div>
        </div>

        <style jsx>{`
          @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
          }
          @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
          }
        `}</style>
      </div>
    );
  }

  // Login screen
  if (!loggedIn) {
    return (
      <div className="flex flex-col items-center justify-center h-screen bg-amber-100"
           style={{backgroundImage: "url('bg.png')", backgroundSize: 'cover'}}>
        <div className="text-5xl font-bold text-teal-600 mb-4 title-text hand-drawn" style={pencilSketchStyle}>MNEMOS</div>
        <div className="text-2xl font-bold text-teal-600 mb-12 title-text hand-drawn" style={pencilSketchStyle}>ON SOLANA</div>
        <button
          onClick={handleLogin}
          className="px-10 py-4 bg-red-400 text-teal-600 font-bold text-2xl transition-all duration-300 hover:bg-red-300 hover:shadow-lg hover:scale-105 title-text hand-drawn"
          style={{...sketchyBorder, ...pencilSketchStyle}}
        >
          DISCOVER
        </button>
        <img src="character.png" alt="MNEMOS Character" className="absolute bottom-0 max-h-64 w-auto transition-transform duration-500 hover:scale-105" />
      </div>
    );
  }

  // Main page
  return (
    <div className="min-h-screen bg-amber-100 flex flex-col items-center pt-8 pb-16 relative"
         style={{backgroundImage: "url('bg.png')", backgroundSize: 'cover', backgroundPosition: 'center'}}>

      {/* Header with centered X and Docs buttons */}
      <div className="flex justify-center items-center space-x-8 mb-16 pt-8">
        <a href="https://x.com/mnemosfun" target="_blank" rel="noopener noreferrer"
           className="flex items-center justify-center px-6 py-2 bg-red-400 text-teal-600 transition-all duration-300 hover:bg-red-300 hover:shadow-lg hover:scale-105 title-text hand-drawn"
           style={{...sketchyBorder, ...pencilSketchStyle}}>
          <span className="font-bold">X</span>
        </a>

        <button
          onClick={toggleDocs}
          className="px-6 py-2 bg-red-400 text-teal-600 font-bold transition-all duration-300 hover:bg-red-300 hover:shadow-lg hover:scale-105 title-text hand-drawn"
          style={{...sketchyBorder, ...pencilSketchStyle}}
        >
          DOCS
        </button>
      </div>

      {/* Tagline */}
      <div className="text-xl font-bold text-teal-600 mb-6 text-center hand-drawn" style={pencilSketchStyle}>
        Not generated. Not forgotten. Just remembered differently.
      </div>

      {/* Center FAQ button */}
      <button
        onClick={toggleFaq}
        className="px-8 py-4 bg-red-400 text-teal-600 font-bold text-2xl mb-12 transition-all duration-300 hover:bg-red-300 hover:shadow-lg hover:scale-105 title-text hand-drawn"
        style={{...sketchyBorder, ...pencilSketchStyle}}
      >
        Who is MNEMOS?
      </button>

      {/* Collapsible FAQ Section */}
      <div className="w-full max-w-2xl px-6">
        {faqItems.map((item, index) => (
          <div
            key={index}
            className="mb-4 bg-red-400 text-teal-600 overflow-hidden"
            style={{...sketchyBorder, ...pencilSketchStyle}}
          >
            <button
              className="w-full px-6 py-3 text-left flex justify-between items-center transition-all duration-300 hover:bg-red-300"
              onClick={() => toggleFaqItem(index)}
            >
              <span className="font-bold hand-drawn title-text">{item.question}</span>
              {expandedFaqs[index] ? (
                <ChevronUp className="transition-transform duration-300" />
              ) : (
                <ChevronDown className="transition-transform duration-300" />
              )}
            </button>

            <div
              className={`transition-all duration-500 ease-in-out overflow-hidden ${
                expandedFaqs[index] ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'
              }`}
            >
              <div className="px-6 py-4 border-t border-teal-600 bg-red-300">
                <p>{item.answer}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Character image at bottom */}
      <img
        src="character.png"
        alt="MNEMOS Character"
        className="absolute bottom-0 max-h-64 w-auto transition-all duration-500 hover:scale-105"
      />

      {/* FAQ Modal */}
      {showFaq && (
        <div className="fixed inset-0 flex items-center justify-center z-10">
          <div
            className="absolute inset-0 bg-black bg-opacity-0 transition-opacity duration-300"
            style={{backgroundColor: 'rgba(0,0,0,0.5)'}}
            onClick={toggleFaq}
          ></div>
          <div
            className="bg-amber-100 p-8 max-w-lg w-full z-20 relative transition-all duration-500 transform"
            style={{...sketchyBorder, ...pencilSketchStyle, animation: 'modalPop 0.3s ease-out forwards'}}
          >
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-teal-600 title-text hand-drawn">Who is MNEMOS?</h2>
              <button
                onClick={toggleFaq}
                className="text-teal-600 hover:text-teal-800 transition-transform duration-300 hover:scale-110"
              >
                <X size={24} />
              </button>
            </div>
            <div className="text-teal-700">
              <p>MNEMOS is a unique character with a brain encased in a cube for a head. This character represents the fusion of intelligence and digital existence in the Solana blockchain ecosystem.</p>
              <p className="mt-4">The character symbolizes the preservation of thoughts, memories, and ideas in the digital space, much like the mythological Mnemosyne, the Greek goddess of memory.</p>
              <p className="mt-4">Join us on this journey as we explore the boundaries between consciousness and digital existence!</p>
            </div>
          </div>
        </div>
      )}

      {/* Docs Modal */}
      {showDocs && (
        <div className="fixed inset-0 flex items-center justify-center z-10">
          <div
            className="absolute inset-0 bg-black bg-opacity-0 transition-opacity duration-300"
            style={{backgroundColor: 'rgba(0,0,0,0.5)'}}
            onClick={toggleDocs}
          ></div>
          <div
            className="bg-amber-100 p-8 max-w-lg w-full z-20 relative transition-all duration-500 transform"
            style={{...sketchyBorder, ...pencilSketchStyle, animation: 'modalPop 0.3s ease-out forwards'}}
          >
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-teal-600 title-text hand-drawn">Documentation</h2>
              <button
                onClick={toggleDocs}
                className="text-teal-600 hover:text-teal-800 transition-transform duration-300 hover:scale-110"
              >
                <X size={24} />
              </button>
            </div>
            <div className="text-teal-700">
              {/* Content to be added later */}
              <p>Documentation content will be provided later.</p>
            </div>
          </div>
        </div>
      )}

      <style jsx>{`
        @keyframes modalPop {
          0% { opacity: 0; transform: scale(0.9); }
          70% { opacity: 1; transform: scale(1.02); }
          100% { opacity: 1; transform: scale(1); }
        }

        .hand-drawn {
          text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
          letter-spacing: 0.5px;
        }

        @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Caveat:wght@400;500;600&display=swap');

        body {
          font-family: 'Caveat', cursive;
        }

        h1, h2, h3, button, .title-text {
          font-family: 'Permanent Marker', cursive;
        }
      `}</style>
    </div>
  );
};

export default MnemosWebsite;