import React, { useState, useEffect, useRef } from 'react';
import { Save, Instagram, Linkedin, Mail, Twitter, MousePointer, Pencil, Eraser, X, Wind, Star } from 'lucide-react';

const App = () => {
  const [is90sMode, setIs90sMode] = useState(false);
  
  // Paint State
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [tool, setTool] = useState('cursor'); // cursor, pencil, eraser, spray
  const [color, setColor] = useState('#000000');
  const [brushSize, setBrushSize] = useState(2);

  // Toggle the retro mode
  const toggleRetroMode = () => {
    setIs90sMode(!is90sMode);
    if (!is90sMode) {
      setTool('pencil');
    } else {
      setTool('cursor');
    }
  };

  // Canvas Logic
  useEffect(() => {
    if (is90sMode && canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      const handleResize = () => {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = canvas.width;
        tempCanvas.height = canvas.height;
        tempCanvas.getContext('2d').drawImage(canvas, 0, 0);
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        ctx.drawImage(tempCanvas, 0, 0);
      };
      
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }
  }, [is90sMode]);

  const startDrawing = (e) => {
    if (tool === 'cursor') return;
    const { offsetX, offsetY } = e.nativeEvent;
    const ctx = canvasRef.current.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(offsetX, offsetY);
    setIsDrawing(true);
    draw(e);
  };

  const draw = (e) => {
    if (!isDrawing || tool === 'cursor') return;
    const { offsetX, offsetY } = e.nativeEvent;
    const ctx = canvasRef.current.getContext('2d');
    
    if (tool === 'spray') {
      ctx.fillStyle = color;
      const sprayRadius = 20;
      const dotsPerFrame = 10;
      
      for (let i = 0; i < dotsPerFrame; i++) {
        const angle = Math.random() * Math.PI * 2;
        const radius = Math.random() * sprayRadius;
        const x = offsetX + Math.cos(angle) * radius;
        const y = offsetY + Math.sin(angle) * radius;
        ctx.fillRect(x, y, 1, 1);
      }
    } else {
      ctx.lineTo(offsetX, offsetY);
      ctx.strokeStyle = tool === 'eraser' ? (is90sMode ? '#c0c0c0' : '#ffffff') : color; 
      
      ctx.globalCompositeOperation = tool === 'eraser' ? 'destination-out' : 'source-over';
      ctx.lineWidth = tool === 'eraser' ? 20 : brushSize;
      ctx.lineCap = 'round';
      ctx.stroke();
      
      ctx.globalCompositeOperation = 'source-over';
    }
  };

  const stopDrawing = () => {
    if (isDrawing) {
      const ctx = canvasRef.current.getContext('2d');
      ctx.closePath();
      setIsDrawing(false);
    }
  };

  // Dog Cursor Logic
  useEffect(() => {
    const cursorStyleId = 'dog-cursor-styles';
    let styleElement = document.getElementById(cursorStyleId);

    if (is90sMode) {
      // Create the 8-bit dog cursor as a base64 encoded SVG for maximum compatibility
      // This represents a merle dog with floppy ears and a pink collar
      const dogSvg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
          <rect x="10" y="8" width="12" height="14" fill="#A8A8A8" /> <!-- Head base -->
          <rect x="10" y="8" width="4" height="4" fill="#555" /> <!-- Spot -->
          <rect x="18" y="16" width="4" height="4" fill="#777" /> <!-- Spot -->
          <rect x="6" y="10" width="4" height="10" fill="#555" /> <!-- Left Ear -->
          <rect x="22" y="10" width="4" height="10" fill="#444" /> <!-- Right Ear -->
          <rect x="12" y="14" width="2" height="2" fill="#000" /> <!-- Eye -->
          <rect x="18" y="14" width="2" height="2" fill="#000" /> <!-- Eye -->
          <rect x="14" y="19" width="4" height="3" fill="#000" /> <!-- Nose/Muzzle -->
          <rect x="10" y="22" width="12" height="2" fill="#FF69B4" /> <!-- Pink Collar -->
          <rect x="15" y="24" width="2" height="2" fill="#FFD700" /> <!-- Tag -->
        </svg>
      `;
      const encodedSvg = btoa(dogSvg);
      const cursorUrl = `url('data:image/svg+xml;base64,${encodedSvg}') 16 16, auto`;

      if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.id = cursorStyleId;
        document.head.appendChild(styleElement);
      }

      // If tool is 'cursor', force the dog cursor everywhere
      if (tool === 'cursor') {
        styleElement.innerHTML = `
          * { cursor: ${cursorUrl} !important; }
          a, button, [role="button"] { cursor: ${cursorUrl} !important; }
        `;
      } else {
        // If using drawing tools, use crosshair
        styleElement.innerHTML = `
          * { cursor: crosshair !important; }
        `;
      }
    } else {
      if (styleElement) {
        styleElement.remove();
      }
    }

    return () => {
      if (styleElement) styleElement.remove();
    };
  }, [is90sMode, tool]);

  return (
    <div className={`min-h-screen transition-all duration-500 relative overflow-hidden ${is90sMode ? 'retro-90s font-serif' : 'font-sans bg-white'}`}>
      
      {is90sMode && (
        <>
          <canvas
            ref={canvasRef}
            onMouseDown={startDrawing}
            onMouseMove={draw}
            onMouseUp={stopDrawing}
            onMouseLeave={stopDrawing}
            className={`fixed inset-0 z-40 ${tool === 'cursor' ? 'pointer-events-none' : 'cursor-crosshair'}`}
          />
          
          <div className="fixed top-24 left-4 z-50 w-24 bg-[#C0C0C0] border-t-2 border-l-2 border-white border-b-2 border-r-2 border-gray-800 shadow-[4px_4px_10px_rgba(0,0,0,0.5)] flex flex-col p-1 select-none">
            <div className="bg-[#000080] text-white text-[10px] font-bold px-1 mb-1 font-sans flex justify-between items-center">
              <span>Tool Box</span>
              <X size={10} className="cursor-pointer bg-[#C0C0C0] text-black border border-gray-500 shadow-sm" />
            </div>
            
            <div className="grid grid-cols-2 gap-1 mb-2">
              <button 
                onClick={() => setTool('cursor')}
                className={`w-8 h-8 flex items-center justify-center border-t border-l border-white border-b border-r border-gray-800 ${tool === 'cursor' ? 'bg-white border-none shadow-inner' : 'bg-[#C0C0C0]'}`}
                title="Dog Select"
              >
                <MousePointer size={16} className="text-black" />
              </button>
              <button 
                onClick={() => setTool('eraser')}
                className={`w-8 h-8 flex items-center justify-center border-t border-l border-white border-b border-r border-gray-800 ${tool === 'eraser' ? 'bg-white border-none shadow-inner' : 'bg-[#C0C0C0]'}`}
                title="Eraser"
              >
                <Eraser size={16} className="text-black" />
              </button>
              <button 
                onClick={() => setTool('pencil')}
                className={`w-8 h-8 flex items-center justify-center border-t border-l border-white border-b border-r border-gray-800 ${tool === 'pencil' ? 'bg-white border-none shadow-inner' : 'bg-[#C0C0C0]'}`}
                title="Pencil"
              >
                <Pencil size={16} className="text-black" />
              </button>
              <button 
                onClick={() => setTool('spray')}
                className={`w-8 h-8 flex items-center justify-center border-t border-l border-white border-b border-r border-gray-800 ${tool === 'spray' ? 'bg-white border-none shadow-inner' : 'bg-[#C0C0C0]'}`}
                title="Spray Paint"
              >
                <Wind size={16} className="text-black" />
              </button>
            </div>

            <div className="border border-gray-600 bg-white p-[1px]">
              <div className="flex flex-wrap gap-[1px]">
                {['#000000', '#808080', '#800000', '#808000', '#008000', '#008080', '#000080', '#800080', '#ffffff', '#c0c0c0', '#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff'].map((c) => (
                  <button
                    key={c}
                    onClick={() => { setColor(c); setTool(tool === 'eraser' || tool === 'cursor' ? 'pencil' : tool); }}
                    className="w-4 h-4 border border-gray-400 active:border-black"
                    style={{ backgroundColor: c }}
                  />
                ))}
              </div>
            </div>
            
            <div className="mt-2 text-[10px] text-black font-sans text-center leading-tight bg-white border border-gray-400 p-1">
              {tool.toUpperCase()}
            </div>
          </div>
        </>
      )}

      {is90sMode && (
        <div className="bg-[#000080] text-white p-1 font-mono text-center border-b-4 border-[#C0C0C0] sticky top-0 z-30 shadow-md">
          <marquee scrollamount="12" className="text-yellow-300 font-bold">
            *** WELCOME TO ANNEKE'S CYBERSPACE *** BEST VIEWED IN NETSCAPE NAVIGATOR *** SIGN THE GUESTBOOK *** UNDER CONSTRUCTION ***
          </marquee>
        </div>
      )}

      <div className={`transition-all duration-500 mx-auto w-full h-full min-h-screen flex flex-col relative z-10 ${is90sMode ? 'max-w-4xl border-x-4 border-[#C0C0C0] bg-[url("https://www.transparenttextures.com/patterns/clouds.png")] bg-[#00ffff]' : 'max-w-7xl px-4 md:px-8 pt-8 pb-12'}`}>
        
        <nav className={`w-full py-6 flex justify-between items-center ${is90sMode ? 'px-8 bg-[#C0C0C0] border-b-4 border-white border-r-4 border-gray-600 mb-8' : 'mb-16'}`}>
          <div className="z-10">
            <h1 className={`font-bold tracking-tight ${is90sMode ? 'text-blue-800 font-comic text-3xl shadow-[2px_2px_0px_#fff]' : 'text-4xl md:text-5xl font-black text-black tracking-tighter'}`}>
              {is90sMode ? 'Anneke\'s Page' : 'ANNEKE VAN DEN HOF.'}
            </h1>
          </div>
          
          <div className={`hidden md:flex gap-6 ${is90sMode ? 'font-serif text-blue-900 underline text-lg' : 'font-bold text-sm tracking-widest'}`}>
            <a href="#about" className={`${is90sMode ? 'hover:text-red-600' : 'bg-black text-white px-6 py-2 rounded-full hover:bg-[#FF6B6B] hover:-translate-y-1 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]'}`}>ABOUT</a>
            <a href="#work" className={`${is90sMode ? 'hover:text-red-600' : 'bg-black text-white px-6 py-2 rounded-full hover:bg-[#4ECDC4] hover:-translate-y-1 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]'}`}>WORK</a>
            <a href="#contact" className={`${is90sMode ? 'hover:text-red-600' : 'bg-black text-white px-6 py-2 rounded-full hover:bg-[#FFE66D] hover:text-black hover:-translate-y-1 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]'}`}>CONTACT</a>
          </div>
        </nav>

        <main className={`flex-grow flex items-center justify-center ${is90sMode ? 'flex-col px-4' : ''}`}>
          
          <div className={`w-full ${is90sMode ? 'space-y-8 text-center' : 'grid md:grid-cols-2 gap-12 lg:gap-24 items-center'}`}>
            
            <div className={`${is90sMode ? 'bg-white border-2 border-blue-800 p-6 shadow-[8px_8px_0px_rgba(0,0,128,0.5)]' : 'order-2 md:order-1 space-y-8'}`}>

              <h2 className={`${is90sMode ? 'text-4xl font-comic text-[#ff00ff] font-bold mb-4' : 'text-6xl lg:text-8xl font-black leading-[0.9] text-black'}`}>
                {is90sMode ? (
                  <span className="blink">Welcome to my Web Zone!</span>
                ) : (
                  <>
                    MARKETING <br/>
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FF6B6B] to-[#FFE66D] drop-shadow-[4px_4px_0px_black]">AND</span> <br/>
                    BRAND STRATEGY.
                  </>
                )}
              </h2>
              
              <p className={`${is90sMode ? 'text-xl font-serif text-blue-900' : 'text-xl md:text-2xl font-medium text-gray-800 leading-relaxed border-l-4 border-[#4ECDC4] pl-6'}`}>
                {is90sMode ? (
                  <>
                    I am a marketer living in Halifax. I like surfing the web and hanging with <a href="https://www.google.com/search?q=tater+tot+cat" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline font-bold hover:bg-yellow-300">Tater Tot</a>.
                  </>
                ) : (
                  "My career has been focused on marketing, advertising account service, creative strategy, and creative operations. My goal has been to understand what’s working on any team, and where we can find more effective, creative, and inclusive ways to work."
                )}
              </p>
              
              {is90sMode && (
                 <div className="pt-4 flex flex-col gap-6 items-center">
                    <div className="relative group p-4">
                      <div className="sparkle-wrapper absolute inset-0 pointer-events-none">
                        {[...Array(12)].map((_, i) => (
                          <div key={i} className={`sparkle sparkle-${i + 1}`}>★</div>
                        ))}
                      </div>
                      <a href="#" className="guestbook-link relative z-10 bg-yellow-300 px-6 py-3 border-4 border-double border-red-600 text-red-600 font-bold text-2xl hover:bg-white flex items-center gap-2 shadow-[4px_4px_0px_#800000]">
                        <img src="https://web.archive.org/web/20090830041213im_/http://geocities.com/Heartland/Acres/2213/new.gif" alt="New!" className="h-8" />
                        SIGN MY GUESTBOOK
                      </a>
                    </div>

                    <img src="https://web.archive.org/web/20090829103723im_/http://geocities.com/clipart/pbi/c.gif" alt="Construction" />
                    
                    <a href="mailto:annekevandenhof@gmail.com" className="text-blue-700 underline text-lg font-bold hover:text-red-500">
                      [ E-MAIL ME ]
                    </a>
                 </div>
              )}
            </div>
            
            <div className={`order-1 md:order-2 flex justify-center relative ${is90sMode ? 'mb-8' : ''}`}>
              {!is90sMode && (
                <>
                  <div className="absolute top-0 right-10 w-32 h-32 bg-[#4ECDC4] rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div>
                  <div className="absolute bottom-10 left-10 w-40 h-40 bg-[#FFE66D] rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse delay-700"></div>
                </>
              )}

              <div className={`relative w-full aspect-[3/4] max-w-sm ${is90sMode ? 'border-[10px] border-ridge border-[#C0C0C0] bg-gray-200' : 'bg-white p-2 border-4 border-black shadow-[12px_12px_0px_0px_#FF6B6B]'}`}>
                <div className={`w-full h-full relative overflow-hidden flex flex-col ${is90sMode ? 'bg-black' : 'bg-gray-100'}`}>
                   <img 
                    src="/api/placeholder/600/800" 
                    alt="Anneke" 
                    className={`w-full h-full object-cover transition-all duration-500 ${is90sMode ? 'opacity-80 contrast-150 grayscale sepia' : 'grayscale hover:grayscale-0 contrast-110'}`}
                   />
                   <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                     <span className={`px-4 py-2 text-sm font-bold uppercase tracking-widest ${is90sMode ? 'text-yellow-300 bg-blue-800 border border-white blink' : 'text-black bg-white border-2 border-black shadow-[4px_4px_0px_black]'}`}>
                       Insert Photo
                     </span>
                   </div>
                </div>

                {!is90sMode && (
                   <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-[#4ECDC4] rounded-full border-4 border-black flex items-center justify-center shadow-[4px_4px_0px_black] rotate-12 z-20">
                      <span className="text-center font-black text-xs leading-tight">BASED IN<br/>HALIFAX</span>
                   </div>
                )}
              </div>
            </div>
          </div>
        </main>

        <footer className={`mt-16 py-8 px-6 flex justify-between items-center ${is90sMode ? 'bg-[#C0C0C0] border-t-2 border-white' : 'border-t-4 border-black'}`}>
           <div className={`flex gap-4 items-center ${is90sMode ? 'text-blue-800' : 'text-black'}`}>
             <a href="#" className={`flex items-center justify-center transition-all ${!is90sMode ? 'bg-[#4ECDC4] p-2 border-2 border-black shadow-[2px_2px_0px_black] hover:translate-y-1 hover:shadow-[1px_1px_0px_0px_black]' : 'hover:scale-110'}`}>
               <Linkedin size={20}/>
             </a>
             {!is90sMode && (
                <>
                  <a href="mailto:annekevandenhof@gmail.com" className="bg-[#FF6B6B] text-black font-black text-sm px-4 py-2 border-2 border-black shadow-[2px_2px_0px_0px_black] hover:translate-y-1 hover:shadow-[1px_1px_0px_0px_black] transition-all uppercase no-underline">
                     Let's Talk
                  </a>
                  <a href="#" className="bg-white text-black font-black text-sm px-4 py-2 border-2 border-black shadow-[2px_2px_0px_0px_black] hover:translate-y-1 hover:shadow-[1px_1px_0px_0px_black] transition-all uppercase no-underline">
                     About Me
                  </a>
                </>
             )}
           </div>

           <div className="flex items-center gap-4">
              {is90sMode && <span className="text-xs font-mono">Last updated: 1999</span>}
              <button 
                onClick={toggleRetroMode}
                className={`p-3 transition-colors group relative ${!is90sMode && 'hover:rotate-180 transition-transform duration-500'}`}
                title={is90sMode ? "Back to Modern" : "Legacy Mode"}
              >
                <Save size={24} className={is90sMode ? "text-blue-600" : "text-black"} />
                {!is90sMode && <span className="absolute right-full mr-2 top-1/2 -translate-y-1/2 bg-black text-white text-xs px-2 py-1 whitespace-nowrap opacity-0 group-hover:opacity-100 font-bold">Try me!</span>}
              </button>
           </div>
        </footer>
      </div>

      {is90sMode && (
        <style>{`
          .retro-90s {
            background-color: #00ffff;
          }
          .font-comic {
            font-family: "Comic Sans MS", "Comic Sans", cursive;
          }
          .blink {
            animation: blinker 1s step-end infinite;
          }
          @keyframes blinker {
            50% { opacity: 0; }
          }
          
          .sparkle-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
          }
          .sparkle {
            position: absolute;
            font-size: 24px;
            animation: sparkle-anim 1.5s linear infinite;
            opacity: 0;
            text-shadow: 0 0 5px white;
            pointer-events: none;
          }
          @keyframes sparkle-anim {
            0% { transform: scale(0) translateY(0); opacity: 0; }
            50% { opacity: 1; transform: scale(1.2) translateY(-10px); }
            100% { transform: scale(0) translateY(-20px); opacity: 0; }
          }
          
          .sparkle-1 { top: -20%; left: 5%; color: #ff0000; animation-delay: 0s; }
          .sparkle-2 { top: -10%; right: 10%; color: #00ff00; animation-delay: 0.2s; }
          .sparkle-3 { bottom: -15%; left: 15%; color: #0000ff; animation-delay: 0.4s; }
          .sparkle-4 { bottom: -5%; right: 20%; color: #ffff00; animation-delay: 0.6s; }
          .sparkle-5 { top: 30%; left: -15%; color: #ff00ff; animation-delay: 0.8s; }
          .sparkle-6 { top: 40%; right: -15%; color: #00ffff; animation-delay: 1.0s; }
          .sparkle-7 { top: -5%; left: 40%; color: #ffffff; animation-delay: 0.1s; }
          .sparkle-8 { bottom: -10%; left: 50%; color: #ffa500; animation-delay: 0.3s; }
          .sparkle-9 { top: 10%; right: 30%; color: #ffc0cb; animation-delay: 0.5s; }
          .sparkle-10 { bottom: 20%; left: -10%; color: #7fff00; animation-delay: 0.7s; }
          .sparkle-11 { top: 60%; right: -10%; color: #ff0000; animation-delay: 0.9s; }
          .sparkle-12 { bottom: 30%; right: 40%; color: #ffff00; animation-delay: 1.1s; }

          .guestbook-link:hover {
            text-decoration: none;
            transform: scale(1.05);
            transition: transform 0.1s;
          }

          ::-webkit-scrollbar {
            width: 16px;
          }
          ::-webkit-scrollbar-track {
            background: #dfdfdf;
            border-left: 1px solid white;
          }
          ::-webkit-scrollbar-thumb {
            background: #c0c0c0;
            border: 2px outset #ffffff;
          }
        `}</style>
      )}
    </div>
  );
};

export default App;