import React, { useEffect, useState } from 'react';

const ArchitecturalShowcase: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [heroVisible, setHeroVisible] = useState(false);
  const [imageVisible, setImageVisible] = useState(false);
  const [purposeVisible, setPurposeVisible] = useState(false);

  useEffect(() => {
    document.body.style.margin = '0';
    document.body.style.padding = '0';
    document.body.style.overflow = 'hidden';
    
    const timer1 = setTimeout(() => setIsLoaded(true), 200);
    const timer2 = setTimeout(() => setHeroVisible(true), 600);
    const timer3 = setTimeout(() => setImageVisible(true), 1200);
    const timer4 = setTimeout(() => setPurposeVisible(true), 1800);
    const timer5 = setTimeout(() => {
      document.body.style.overflow = 'auto';
    }, 2000);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
      clearTimeout(timer3);
      clearTimeout(timer4);
      clearTimeout(timer5);
    };
  }, []);

  const globalStyles = `
    body, html, #root {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      

    }
  `;

  const styles = {
    showcase: {
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      minHeight: '100vh',
      backgroundColor: '#fafafa',
      margin: 0,
      padding: 0,
      border: 'none',
      outline: 'none',
      opacity: isLoaded ? 1 : 0,
      transform: isLoaded ? 'translateY(0) scale(1)' : 'translateY(50px) scale(0.95)',
      transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    },
    
    header: {
      position: 'fixed' as const,
      top: 0,
      left: 0,
      right: 0,
      zIndex: 1000,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      backdropFilter: 'blur(20px)',
      borderBottom: '1px solid rgba(0, 0, 0, 0.08)',
      transform: isLoaded ? 'translateY(0)' : 'translateY(-100px)',
      transition: 'all 0.8s cubic-bezier(0.34, 1.26, 0.64, 1)',
      transitionDelay: '0.3s',
    },
    
    nav: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '1rem 2rem',
      maxWidth: '1400px',
      margin: '0 auto',
    },
    
    logo: {
      display: 'flex',
      alignItems: 'center',
      gap: '0.5rem',
      fontSize: '1.5rem',
      fontWeight: 600,
      color: '#1a1a1a',
      opacity: isLoaded ? 1 : 0,
      transform: isLoaded ? 'translateX(0) rotate(0deg)' : 'translateX(-30px) rotate(-10deg)',
      transition: 'all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      transitionDelay: '0.5s',
    },
    
    logoIcon: {
      fontSize: '1.2rem',
      animation: isLoaded ? 'pulse 2s infinite' : 'none',
    },
    
    navLinks: {
      display: 'flex',
      listStyle: 'none',
      margin: 0,
      padding: 0,
      gap: '2rem',
    },
    
    navLink: {
      color: '#4a4a4a',
      textDecoration: 'none',
      fontSize: '0.95rem',
      fontWeight: 400,
      transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      cursor: 'pointer',
      opacity: isLoaded ? 1 : 0,
      transform: isLoaded ? 'translateY(0)' : 'translateY(-20px)',
      transitionDelay: '0.7s',
    },
    
    contactBtn: {
      backgroundColor: '#1a1a1a',
      color: 'white',
      border: 'none',
      padding: '0.75rem 1.5rem',
      borderRadius: '50px',
      fontSize: '0.9rem',
      fontWeight: 500,
      cursor: 'pointer',
      transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      fontFamily: 'inherit',
      opacity: isLoaded ? 1 : 0,
      transform: isLoaded ? 'translateX(0) scale(1)' : 'translateX(30px) scale(0.8)',
      transitionDelay: '0.8s',
    },
    
    hero: {
      display: 'flex',
      flexDirection: 'column' as const,
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '100vh',
      textAlign: 'center' as const,
      padding: '0 2rem',
      paddingTop: '80px',
    },
    
    heroContent: {
      maxWidth: '800px',
      margin: '0 auto',
    },
    
    heroTitle: {
      fontSize: 'clamp(2.5rem, 5vw, 4rem)',
      fontWeight: 300,
      lineHeight: 1.2,
      color: '#1a1a1a',
      margin: '0 0 1.5rem 0',
      letterSpacing: '-0.02em',
    },
    
    heroSubtitle: {
      fontSize: 'clamp(1.1rem, 2vw, 1.3rem)',
      color: '#6a6a6a',
      lineHeight: 1.6,
      margin: '0 0 2.5rem 0',
      fontWeight: 400,
      maxWidth: '600px',
    },
    
    ctaBtn: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.75rem',
      backgroundColor: '#1a1a1a',
      color: 'white',
      border: 'none',
      padding: '1rem 2rem',
      borderRadius: '50px',
      fontSize: '1rem',
      fontWeight: 500,
      cursor: 'pointer',
      transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
      fontFamily: 'inherit',
      boxShadow: '0 4px 20px rgba(26, 26, 26, 0.15)',
    },
    
    ctaArrow: {
      fontSize: '1.2rem',
      transition: 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    },
    
    imageSection: {
      padding: '4rem 2rem',
      backgroundColor: '#ffffff',
      opacity: imageVisible ? 1 : 0,
      transform: imageVisible ? 'translateY(0)' : 'translateY(80px)',
      transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    },
    
    imageContainer: {
      maxWidth: '1200px',
      margin: '0 auto',
      borderRadius: '20px',
      overflow: 'hidden',
      boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1)',
      transform: imageVisible ? 'scale(1) rotateX(0deg)' : 'scale(0.9) rotateX(10deg)',
      transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      transitionDelay: '0.2s',
    },
    
    heroImage: {
      width: '100%',
      height: 'auto',
      display: 'block',
      transition: 'transform 0.6s ease',
    },
    
    purpose: {
      padding: '6rem 2rem',
      backgroundColor: '#fafafa',
      opacity: purposeVisible ? 1 : 0,
      transform: purposeVisible ? 'translateY(0)' : 'translateY(60px)',
      transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      textAlign: 'center' as const,
    },
    
    purposeContent: {
      maxWidth: '1200px',
      margin: '0 auto',
    },
    
    purposeTitle: {
      fontSize: 'clamp(2rem, 4vw, 2.5rem)',
      fontWeight: 300,
      color: '#1a1a1a',
      margin: '0 0 1.5rem 0',
      letterSpacing: '-0.01em',
    },
    
    purposeDescription: {
      fontSize: '1.1rem',
      color: '#6a6a6a',
      lineHeight: 1.6,
      margin: '0',
      maxWidth: '800px',
    },

    servicesSection: {
      padding: '8rem 2rem',
      backgroundColor: '#fffff',
      position: 'relative' as const,
    },

    servicesContainer: {
      maxWidth: '1400px',
      margin: '0 auto',
      position: 'relative' as const,
    },

    servicesHeader: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
      marginBottom: '4rem',
      position: 'relative' as const,
    },


    servicesTitle: {
      fontSize: 'clamp(2.5rem, 5vw, 4rem)',
      fontWeight: 400,
      color: '#666',
      lineHeight: 1.2,
      margin: 0,
      textAlign: 'center' as const,
      flex: 1,
      letterSpacing: '-0.01em',
    },

    viewAllBtn: {
      backgroundColor: 'transparent',
      border: 'none',
      fontSize: '0.9rem',
      color: '#666',
      fontWeight: 500,
      cursor: 'pointer',
      textDecoration: 'underline',
      fontFamily: 'inherit',
      position: 'absolute' as const,
      top: 0,
      right: 0,
    },

    servicesGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: '2rem',
      marginTop: '2rem',
    },

    serviceCard: {
      backgroundColor: 'transparent',
      padding: 60,
      position: 'relative' as const,
    },

    serviceTitle: {
      fontSize: 'clamp(1.8rem, 3vw, 2.5rem)',
      fontWeight: 400,
      color: '#666',
      lineHeight: 1.2,
      margin: 0,
      letterSpacing: '-0.01em',
      minHeight: '120px',
    },


    serviceDescription: {
      fontSize: '1rem',
      color: '#666',
      lineHeight: 1.6,
      margin: '0 0 2rem 0',
      flex: 1,
    },

  };

  const handleNavLinkHover = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.currentTarget.style.color = '#1a1a1a';
  };

  const handleNavLinkLeave = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.currentTarget.style.color = '#4a4a4a';
  };

  const handleContactBtnHover = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.currentTarget.style.backgroundColor = '#333333';
    e.currentTarget.style.transform = 'translateY(-2px)';
    e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 26, 26, 0.25)';
  };

  const handleContactBtnLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.currentTarget.style.backgroundColor = '#1a1a1a';
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = 'none';
  };

  const handleCtaBtnHover = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.currentTarget.style.backgroundColor = '#333333';
    e.currentTarget.style.transform = 'translateY(-3px)';
    e.currentTarget.style.boxShadow = '0 8px 30px rgba(26, 26, 26, 0.25)';
    const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement;
    if (arrow) arrow.style.transform = 'translateX(5px)';
  };

  const handleCtaBtnLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.currentTarget.style.backgroundColor = '#1a1a1a';
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = '0 4px 20px rgba(26, 26, 26, 0.15)';
    const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement;
    if (arrow) arrow.style.transform = 'translateX(0)';
  };

  const handleImageHover = (e: React.MouseEvent<HTMLImageElement>) => {
    e.currentTarget.style.transform = 'scale(1.05)';
  };

  const handleImageLeave = (e: React.MouseEvent<HTMLImageElement>) => {
    e.currentTarget.style.transform = 'scale(1)';
  };

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
      
      <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
        rel="stylesheet"
      />
      
      <style dangerouslySetInnerHTML={{
        __html: `
          @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
          }
          @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
          }
          @keyframes slideInLeft {
            from { transform: translateX(-100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
          }
          @keyframes slideInRight {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
          }
          @keyframes fadeInUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
          }
          @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
          }
          @keyframes rotateIn {
            from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
            to { transform: rotate(0deg) scale(1); opacity: 1; }
          }
        `
      }} />
      
      <div style={styles.showcase}>
        <header style={styles.header}>
          <nav style={styles.nav}>
            <div style={styles.logo}>
              <span style={styles.logoIcon}>⬛</span>
              Alius
            </div>
            <ul style={styles.navLinks}>
              <li>
                <a 
                  href="#home" 
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Home
                </a>
              </li>
              <li>
                <a 
                  href="#projects" 
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Projects
                </a>
              </li>
              <li>
                <a 
                  href="#services" 
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Services
                </a>
              </li>
              <li>
                <a 
                  href="#about" 
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  About Us
                </a>
              </li>
              <li>
                <a 
                  href="#faq" 
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  FAQ
                </a>
              </li>
            </ul>
            <button 
              style={styles.contactBtn}
              onMouseEnter={handleContactBtnHover}
              onMouseLeave={handleContactBtnLeave}
              aria-label="Contact us"
            >
              Contact us
            </button>
          </nav>
        </header>

        <section style={styles.hero} aria-label="Main content">
          <div style={styles.heroContent}>
            <h1 style={styles.heroTitle}>
              Mapping properties<br />
               empowering decisions
            </h1>
            <p style={styles.heroSubtitle}>
              A modern GIS platform visualizing sewer lines, water mains, parcels, and 14+ urban infrastructure layers — built for precision, clarity, and actionable insights.
            </p>
            <button 
              style={styles.ctaBtn}
              onMouseEnter={handleCtaBtnHover}
              onMouseLeave={handleCtaBtnLeave}
            >
              <span>Get Started</span>
              <div className="cta-arrow" style={styles.ctaArrow}>→</div>
            </button>
          </div>
        </section>

        <section style={styles.imageSection} aria-label="Featured architecture">
          <div style={styles.imageContainer}>
            <img 
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2387CEEB'/%3E%3Cstop offset='100%25' stop-color='%23E0F6FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='500' fill='url(%23sky)'/%3E%3C!-- Modern House --%3E%3Crect x='100' y='200' width='300' height='150' fill='%23F5F5F5'/%3E%3Crect x='400' y='150' width='250' height='200' fill='%23E8E8E8'/%3E%3Crect x='420' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='480' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='540' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='600' y='170' width='30' height='80' fill='%23333' opacity='0.8'/%3E%3C!-- Landscaping --%3E%3Cellipse cx='680' cy='350' rx='40' ry='60' fill='%2366BB6A'/%3E%3Cellipse cx='50' cy='380' rx='30' ry='40' fill='%2366BB6A'/%3E%3Cellipse cx='750' cy='320' rx='25' ry='35' fill='%2366BB6A'/%3E%3C/svg%3E"
              alt="Modern architectural home with large glass windows, clean lines, and landscaped surroundings"
              style={styles.heroImage}
              onMouseEnter={handleImageHover}
              onMouseLeave={handleImageLeave}
            />
          </div>
        </section>

        <section style={styles.purpose} aria-labelledby="replacement-heading">
          <div style={styles.purposeContent}>
            <h2 id="replacement-heading" style={styles.purposeTitle}>Your Text Here</h2>
            <p style={styles.purposeDescription}>
              At MapLayer SD, we are committed to visualizing San Diego's infrastructure through precision mapping—bringing transparency to parcels, sewer lines, water mains, and more.
            </p>
          </div>
        </section>

        <section style={styles.servicesSection}>
          <div style={styles.servicesContainer}>
            <div style={styles.servicesHeader}>
              <h2 style={styles.servicesTitle}>
                Crafting Sustainable<br />
                Solutions for Every Space
              </h2>
            </div>

            <div style={styles.servicesGrid}>
              <div style={styles.serviceCard}>
                  <h3 style={styles.serviceTitle}>
                    Sustainable<br />
                    Architecture<br />
                    Design
                  </h3>
                  <p style={styles.serviceDescription}>
                    We design innovative and eco-friendly spaces that balance beauty, functionality, and environmental responsibility.
                  </p>
              </div>
              
              <div style={styles.serviceCard}>
                  <h3 style={styles.serviceTitle}>
                    Green<br />
                    Building<br />
                    Consultation
                  </h3>
                  <p style={styles.serviceDescription}>
                    Our experts guide you through the process of creating environmentally friendly structures that align with your goals.
                  </p>
              </div>
              
              <div style={styles.serviceCard}>
                  <h3 style={styles.serviceTitle}>
                    Project<br />
                    Planning<br />
                    & Development
                  </h3>
                  <p style={styles.serviceDescription}>
                    From concept to completion, we provide comprehensive planning services tailored to sustainable living and building principles.
                  </p>
                </div>
              </div>
            </div>
        </section>
      </div>
    </>
  );
};

export default ArchitecturalShowcase;