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);
  const [servicesVisible, setServicesVisible] = 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(() => setServicesVisible(true), 2400);
    const timer6 = setTimeout(() => {
      document.body.style.overflow = 'auto';
    }, 2600);

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

  const globalStyles = `
    html, body, #root {
      margin: 0;
      padding: 0;
      max-width: 100vw;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      overflow-x: hidden;
    }
    
    * {
      box-sizing: border-box;
    }

    /* Responsive CSS */

    @media (max-width: 768px) {
      /* Services grid single column */
      .services-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }

      /* Hide nav links (you can replace with hamburger menu) */
      .nav-links {
        display: none !important;
      }
      
      /* Hero Section Padding */
      .hero-content {
        padding: 0 1rem;
      }

      /* Hero Title */
      .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
      }

      /* Hero Subtitle */
      .hero-subtitle {
        font-size: 1rem !important;
      }

      /* CTA Button full width and centered content */
      .cta-btn {
        width: 100% !important;
        justify-content: center !important;
      }

      /* Image container adjustments */
      .image-container {
        padding: 0 1rem !important;
        max-width: 100% !important;
      }
    }
  `;

  const styles = {
    showcase: {
      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      height: '100vh',
      backgroundColor: '#fafafa',
      margin: 0,
      padding: 0,
      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',
    },
    hero: {
      display: 'flex',
      flexDirection: 'column' as const,
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '100vh',
      textAlign: 'center' as const,
      padding: '0 2rem',
      paddingTop: '80px',
      opacity: heroVisible ? 1 : 0,
      transform: heroVisible ? 'translateY(0)' : 'translateY(60px)',
      transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    },
    heroContent: {
      maxWidth: '900px',
      margin: '0 auto',
    },
    heroTitle: {
      fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
      fontWeight: 300,
      lineHeight: 1.2,
      color: '#1a1a1a',
      margin: '0 0 1.5rem 0',
      letterSpacing: '-0.02em',
    },
    heroSubtitle: {
      fontSize: 'clamp(1.1rem, 2vw, 1.4rem)',
      color: '#6a6a6a',
      lineHeight: 1.6,
      margin: '0 0 3rem 0',
      fontWeight: 400,
      maxWidth: '700px',
    },
    ctaBtn: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.75rem',
      backgroundColor: '#1a1a1a',
      color: 'white',
      border: 'none',
      padding: '1.2rem 2.5rem',
      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: '5rem 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: '1000px',
      margin: '0 auto',
    },
    purposeTitle: {
      fontSize: 'clamp(2rem, 4vw, 3rem)',
      fontWeight: 300,
      color: '#1a1a1a',
      margin: '0 0 2rem 0',
      letterSpacing: '-0.01em',
    },
    purposeDescription: {
      fontSize: '1.2rem',
      color: '#6a6a6a',
      lineHeight: 1.7,
      margin: '0',
      maxWidth: '800px',
    },
    servicesSection: {
      padding: '8rem 2rem',
      backgroundColor: '#ffffff',
      position: 'relative' as const,
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      opacity: servicesVisible ? 1 : 0,
      transform: servicesVisible ? 'translateY(0)' : 'translateY(80px)',
      transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    },
    servicesContainer: {
      maxWidth: '1400px',
      margin: '0 auto',
      width: '100%',
    },
    servicesHeader: {
      textAlign: 'center' as const,
      marginBottom: '5rem',
      position: 'relative' as const,
    },
    servicesTitle: {
      fontSize: 'clamp(2.5rem, 5vw, 4rem)',
      fontWeight: 300,
      color: '#1a1a1a',
      lineHeight: 1.2,
      margin: '0 0 1.5rem 0',
      letterSpacing: '-0.02em',
    },
    servicesSubtitle: {
      fontSize: '1.2rem',
      color: '#6a6a6a',
      lineHeight: 1.6,
      maxWidth: '600px',
      margin: '0 auto',
    },
    servicesGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
      gap: '3rem',
      marginTop: '3rem',
    },
    serviceCard: {
      backgroundColor: 'transparent',
      padding: '2.5rem 2rem',
      borderRadius: '20px',
      position: 'relative' as const,
      transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
      border: '1px solid rgba(0, 0, 0, 0.08)',
      height: '100%',
      display: 'flex',
      flexDirection: 'column' as const,
    },
    serviceIcon: {
      fontSize: '3rem',
      marginBottom: '1.5rem',
      color: '#1a1a1a',
    },
    serviceTitle: {
      fontSize: 'clamp(1.5rem, 2.5vw, 1.8rem)',
      fontWeight: 500,
      color: '#1a1a1a',
      lineHeight: 1.3,
      margin: '0 0 1.5rem 0',
      letterSpacing: '-0.01em',
    },
    serviceDescription: {
      fontSize: '1rem',
      color: '#6a6a6a',
      lineHeight: 1.6,
      margin: '0',
      flex: 1,
    },
    footer: {
      padding: '4rem 2rem 2rem',
      backgroundColor: '#1a1a1a',
      color: '#ffffff',
      textAlign: 'center' as const,
    },
    footerContent: {
      maxWidth: '1200px',
      margin: '0 auto',
    },
    footerText: {
      fontSize: '0.9rem',
      color: '#9a9a9a',
      margin: 0,
    },
  };

  // Event Handlers for hovers omitted for brevity — keep them from your original code

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

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

  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)';
  };

  const handleServiceCardHover = (e: React.MouseEvent<HTMLDivElement>) => {
    e.currentTarget.style.transform = 'translateY(-8px)';
    e.currentTarget.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)';
    e.currentTarget.style.backgroundColor = '#fafafa';
  };

  const handleServiceCardLeave = (e: React.MouseEvent<HTMLDivElement>) => {
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = 'none';
    e.currentTarget.style.backgroundColor = 'transparent';
  };

  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 */}
        <header style={styles.header}>
          <nav style={styles.nav}>
            <div style={styles.logo}>
              <span style={styles.logoIcon}>🗺️</span>
              MapLayer SD
            </div>
            <ul style={styles.navLinks} className="nav-links">
              <li>
                <a
                  href="#home"
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Home
                </a>
              </li>
              <li>
                <a
                  href="#features"
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Features
                </a>
              </li>
              <li>
                <a
                  href="#community"
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  Community
                </a>
              </li>
              <li>
                <a
                  href="#about"
                  style={styles.navLink}
                  onMouseEnter={handleNavLinkHover}
                  onMouseLeave={handleNavLinkLeave}
                >
                  About
                </a>
              </li>
            </ul>
          </nav>
        </header>

        {/* Hero Section */}
        <section style={styles.hero} aria-label="Main content">
          <div style={styles.heroContent} className="hero-content">
            <h1 style={styles.heroTitle} className="hero-title">
              San Diego Infrastructure
              <br />
              Mapping & Community Hub
            </h1>
            <p style={styles.heroSubtitle} className="hero-subtitle">
              Explore real-time infrastructure data, connect with your community, and make informed decisions about property development. From sewer mains to water lines—visualize San Diego's urban backbone and collaborate with builders, planners, and citizens.
            </p>
            <button
              style={styles.ctaBtn}
              className="cta-btn"
              onMouseEnter={handleCtaBtnHover}
              onMouseLeave={handleCtaBtnLeave}
              onClick={() => (window.location.href = '/open')}
            >
              <span>Explore the Map</span>
              <div className="cta-arrow" style={styles.ctaArrow}>
                →
              </div>
            </button>
          </div>
        </section>
        {/* Image Section */}
        <section style={styles.imageSection} aria-label="Featured infrastructure map">
          <div style={styles.imageContainer}>
            <img
              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cdefs%3E%3ClinearGradient id='mapBg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23E8F4FD'/%3E%3Cstop offset='100%25' stop-color='%23F0F8FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='600' fill='url(%23mapBg)'/%3E%3C!-- Map Grid --%3E%3Cg stroke='%23DDD' stroke-width='1' opacity='0.5'%3E%3Cline x1='0' y1='100' x2='1200' y2='100'/%3E%3Cline x1='0' y1='200' x2='1200' y2='200'/%3E%3Cline x1='0' y1='300' x2='1200' y2='300'/%3E%3Cline x1='0' y1='400' x2='1200' y2='400'/%3E%3Cline x1='0' y1='500' x2='1200' y2='500'/%3E%3Cline x1='200' y1='0' x2='200' y2='600'/%3E%3Cline x1='400' y1='0' x2='400' y2='600'/%3E%3Cline x1='600' y1='0' x2='600' y2='600'/%3E%3Cline x1='800' y1='0' x2='800' y2='600'/%3E%3Cline x1='1000' y1='0' x2='1000' y2='600'/%3E%3C/g%3E%3C!-- Water Mains (Blue) --%3E%3Cg stroke='%232196F3' stroke-width='4' fill='none'%3E%3Cpath d='M50 150 Q200 120 350 140 T650 160 Q800 150 950 170'/%3E%3Cpath d='M100 250 L300 240 Q450 230 600 250 L900 260'/%3E%3Cpath d='M150 350 Q400 340 650 360 L1000 370'/%3E%3Cpath d='M80 450 L280 440 Q500 450 750 460 Q900 455 1100 470'/%3E%3C/g%3E%3C!-- Sewer Mains (Brown) --%3E%3Cg stroke='%23795548' stroke-width='3' fill='none'%3E%3Cpath d='M70 180 Q250 170 400 185 T700 200 Q850 195 1050 210'/%3E%3Cpath d='M120 280 L320 270 Q480 275 630 285 L880 290'/%3E%3Cpath d='M180 380 Q420 375 680 385 L980 390'/%3E%3Cpath d='M110 480 L310 475 Q530 485 780 490 Q920 485 1120 500'/%3E%3C/g%3E%3C!-- Property Parcels (Green outlines) --%3E%3Cg stroke='%234CAF50' stroke-width='2' fill='%234CAF50' fill-opacity='0.1'%3E%3Crect x='220' y='120' width='80' height='60'/%3E%3Crect x='320' y='110' width='100' height='80'/%3E%3Crect x='450' y='130' width='90' height='70'/%3E%3Crect x='580' y='115' width='85' height='65'/%3E%3Crect x='720' y='125' width='95' height='75'/%3E%3Crect x='250' y='220' width='70' height='55'/%3E%3Crect x='370' y='210' width='110' height='85'/%3E%3Crect x='520' y='230' width='80' height='60'/%3E%3Crect x='650' y='215' width='90' height='70'/%3E%3Crect x='200' y='320' width='85' height='65'/%3E%3Crect x='340' y='310' width='95' height='75'/%3E%3Crect x='480' y='330' width='100' height='80'/%3E%3Crect x='620' y='315' width='75' height='55'/%3E%3C/g%3E%3C!-- Map Markers --%3E%3Cg%3E%3Ccircle cx='260' cy='150' r='8' fill='%23FF5722'/%3E%3Ccircle cx='410' cy='270' r='8' fill='%23FF5722'/%3E%3Ccircle cx='580' cy='350' r='8' fill='%23FF5722'/%3E%3Ccircle cx='750' cy='180' r='8' fill='%23FF5722'/%3E%3C/g%3E%3C!-- Legend --%3E%3Cg transform='translate(50, 50)'%3E%3Crect x='0' y='0' width='200' height='100' fill='white' stroke='%23DDD' rx='5'/%3E%3Ctext x='10' y='20' font-family='Arial' font-size='14' font-weight='bold' fill='%23333'%3EInfrastructure Layers%3C/text%3E%3Cline x1='10' y1='35' x2='30' y2='35' stroke='%232196F3' stroke-width='4'/%3E%3Ctext x='35' y='40' font-family='Arial' font-size='12' fill='%23666'%3EWater Mains%3C/text%3E%3Cline x1='10' y1='55' x2='30' y2='55' stroke='%23795548' stroke-width='3'/%3E%3Ctext x='35' y='60' font-family='Arial' font-size='12' fill='%23666'%3ESewer Lines%3C/text%3E%3Crect x='10' y='70' width='20' height='15' fill='%234CAF50' fill-opacity='0.3' stroke='%234CAF50'/%3E%3Ctext x='35' y='82' font-family='Arial' font-size='12' fill='%23666'%3EProperty Parcels%3C/text%3E%3C/g%3E%3C/svg%3E"
              alt="Interactive map showing San Diego's infrastructure including water mains, sewer lines, and property parcels with community markers"
              style={styles.heroImage}
              onMouseEnter={handleImageHover}
              onMouseLeave={handleImageLeave}
            />
          </div>
        </section>

        {/* Purpose Section */}
        <section style={styles.purpose} aria-labelledby="purpose-heading">
          <div style={styles.purposeContent}>
            <h2 id="purpose-heading" style={styles.purposeTitle}>
              Empowering San Diego's Development Community
            </h2>
            <p style={styles.purposeDescription}>
              Our platform bridges the gap between raw infrastructure data and actionable community insights. By combining real-time GeoJSON data from San Diego's open APIs with community-driven collaboration tools, we create a comprehensive resource for property
              buyers, builders, city planners, and engaged citizens to make informed decisions about our city's future.
            </p>
          </div>
        </section>

        {/* Services Section */}
        <section style={styles.servicesSection} id="services">
          <div style={styles.servicesContainer}>
            <div style={styles.servicesHeader}>
              <h2 style={styles.servicesTitle}>Comprehensive Infrastructure Solutions</h2>
              <p style={styles.servicesSubtitle}>
                From real-time data visualization to community collaboration—everything you need to understand San Diego's infrastructure landscape.
              </p>
            </div>

            <div style={styles.servicesGrid} className="services-grid">
              {/* Service Cards (keep all 6 as you had) */}
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>🗺️</div>
                <h3 style={styles.serviceTitle}>Interactive Infrastructure Mapping</h3>
                <p style={styles.serviceDescription}>
                  Visualize San Diego's complete infrastructure network including sewer mains, water lines, pipelines, and zoning areas. Toggle layers, zoom into specific neighborhoods, and access real-time GeoJSON data from official city APIs.
                </p>
              </div>
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>👥</div>
                <h3 style={styles.serviceTitle}>Community Collaboration Hub</h3>
                <p style={styles.serviceDescription}>
                  Connect with builders, property buyers, city planners, and fellow citizens. Participate in location-based discussions, share insights about infrastructure challenges, and collaborate on development projects in your area.
                </p>
              </div>
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>📈</div>
                <h3 style={styles.serviceTitle}>Analytics & Decision Support</h3>
                <p style={styles.serviceDescription}>
                  Access comprehensive analytics to evaluate infrastructure density, property development feasibility, and resource availability. Make data-driven decisions with heatmaps, trend analysis, and infrastructure capacity assessments.
                </p>
              </div>
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>🏘️</div>
                <h3 style={styles.serviceTitle}>Property Development Tools</h3>
                <p style={styles.serviceDescription}>
                  Essential tools for real estate developers and builders. Check infrastructure availability before starting projects, view ongoing public works, assess development feasibility, and access zoning information for informed decision-making.
                </p>
              </div>
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>📊</div>
                <h3 style={styles.serviceTitle}>Issue Reporting & Crowdsourcing</h3>
                <p style={styles.serviceDescription}>
                  Report infrastructure issues directly from the map interface. Crowdsource problem identification, track repair status, and contribute to maintaining accurate, community-verified infrastructure data across San Diego.
                </p>
              </div>
              <div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
                <div style={styles.serviceIcon}>🚀</div>
                <h3 style={styles.serviceTitle}>Future City Expansion</h3>
                <p style={styles.serviceDescription}>
                  Built for scalability beyond San Diego. Our platform architecture supports expansion to other cities, additional datasets including environmental and transportation data, and integration with multiple municipal data sources.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section style={{ ...styles.purpose, backgroundColor: '#ffffff' }} aria-labelledby="features-heading">
          <div style={styles.purposeContent}>
            <h2 id="features-heading" style={styles.purposeTitle}>
              Why Choose MapLayer SD?
            </h2>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
                gap: '3rem',
                marginTop: '3rem',
                textAlign: 'left' as const,
              }}
            >
              <div>
                <h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>📍 Hyper-Local Focus</h3>
                <p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
                  Unlike generic mapping solutions, we specialize exclusively in San Diego's infrastructure, providing unmatched detail and accuracy for local development needs.
                </p>
              </div>
              <div>
                <h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>🔄 Real-Time Data</h3>
                <p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
                  Direct integration with San Diego's open data APIs ensures you always have the most current infrastructure information available.
                </p>
              </div>
              <div>
                <h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>🤝 Community-Driven</h3>
                <p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
                  Beyond visualization—we foster collaboration between builders, buyers, planners, and citizens for better urban development outcomes.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer style={styles.footer}>
          <div style={styles.footerContent}>
            <p style={styles.footerText}>
              © 2024 MapLayer SD - San Diego Infrastructure & Community Mapping Platform. Empowering informed urban development through data transparency and community collaboration.
            </p>
          </div>
        </footer>
      </div>
    </>
  );
};

export default ArchitecturalShowcase;