diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
index 8c9d3b95..5e7bf31f 100644
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -66,7 +66,8 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                 alt={featuredPost.frontmatter.title}
                 fill
                 className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
-                unoptimized
+                sizes="100vw"
+                priority
               />
               <div className="absolute inset-0 image-overlay-gradient" />
             </>
@@ -153,7 +154,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                           alt={post.frontmatter.title}
                           fill
                           className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
-                          unoptimized
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                         {post.frontmatter.category && (
diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx
index 0c14f441..5cb062f3 100644
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -243,6 +243,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                           alt={product.frontmatter.title}
                           fill
                           className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         {/* Subtle reflection/shadow effect */}
                         <div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx
index 6ee10753..d77ec214 100644
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -143,8 +143,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
-                        sizes="(max-width: 768px) 100vw, 50vw"
-                        unoptimized
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
 
diff --git a/app/[locale]/team/page.tsx b/app/[locale]/team/page.tsx
index 172e4e5b..d4dd5366 100644
--- a/app/[locale]/team/page.tsx
+++ b/app/[locale]/team/page.tsx
@@ -94,6 +94,7 @@ export default async function TeamPage({ params }: TeamPageProps) {
               alt="KLZ Team"
               fill
               className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
+              sizes="100vw"
               priority
             />
             <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 713beee4..ffdb5337 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,29 +12,33 @@ export default function Footer() {
   return (
     <footer className="bg-primary text-white py-24 relative overflow-hidden">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
-      
+
       <Container>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
           {/* Brand Column */}
           <div className="lg:col-span-4 space-y-8">
             <Link href={`/${locale}`} className="inline-block group">
-              <Image 
-                src="/logo-white.svg" 
-                alt={t('products')} 
-                width={150} 
-                height={40} 
+              <Image
+                src="/logo-white.svg"
+                alt={t('products')}
+                width={150}
+                height={40}
                 className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
-                unoptimized
               />
             </Link>
             <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
               {t('tagline')}
             </p>
             <div className="flex gap-4">
-              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
+              <a
+                href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10"
+              >
                 <span className="sr-only">LinkedIn</span>
                 <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
-                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                 </svg>
               </a>
             </div>
@@ -42,52 +46,113 @@ export default function Footer() {
 
           {/* Links Columns */}
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('legal')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('legalNotice')}</Link></li>
-              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('privacyPolicy')}</Link></li>
-              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('terms')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('legalNoticeSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('legalNotice')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('privacyPolicySlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('privacyPolicy')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('termsSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('terms')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('company')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('contact')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/team`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('team')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/products`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('products')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/blog`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('blog')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/contact`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('contact')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('recentPosts')}
+            </h4>
             <ul className="space-y-6 list-none m-0 p-0">
               {[
                 {
-                  title: locale === 'de'
-                    ? "Windparkbau im Fokus: drei typische Kabelherausforderungen"
-                    : "Focus on wind farm construction: three typical cable challenges",
-                  slug: locale === 'de'
-                    ? "windparkbau-im-fokus-drei-typische-kabelherausforderungen"
-                    : "focus-on-wind-farm-construction-three-typical-cable-challenges"
+                  title:
+                    locale === 'de'
+                      ? 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
+                      : 'Focus on wind farm construction: three typical cable challenges',
+                  slug:
+                    locale === 'de'
+                      ? 'windparkbau-im-fokus-drei-typische-kabelherausforderungen'
+                      : 'focus-on-wind-farm-construction-three-typical-cable-challenges',
                 },
                 {
-                  title: locale === 'de'
-                    ? "Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist"
-                    : "Why the N2XS(F)2Y is the ideal cable for your energy project",
-                  slug: locale === 'de'
-                    ? "n2xsf2y-mittelspannungskabel-energieprojekt"
-                    : "why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project"
-                }
+                  title:
+                    locale === 'de'
+                      ? 'Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist'
+                      : 'Why the N2XS(F)2Y is the ideal cable for your energy project',
+                  slug:
+                    locale === 'de'
+                      ? 'n2xsf2y-mittelspannungskabel-energieprojekt'
+                      : 'why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project',
+                },
               ].map((post, i) => (
                 <li key={i}>
                   <Link href={`/${locale}/blog/${post.slug}`} className="group block text-white/80">
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                       {post.title}
                     </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
+                    <span className="text-xs text-white/40 uppercase tracking-widest">
+                      {t('readArticle')} &rarr;
+                    </span>
                   </Link>
                 </li>
               ))}
@@ -98,8 +163,12 @@ export default function Footer() {
         <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
-            <Link href="/en" locale="en" className="hover:text-white transition-colors">English</Link>
-            <Link href="/de" locale="de" className="hover:text-white transition-colors">Deutsch</Link>
+            <Link href="/en" locale="en" className="hover:text-white transition-colors">
+              English
+            </Link>
+            <Link href="/de" locale="de" className="hover:text-white transition-colors">
+              Deutsch
+            </Link>
           </div>
         </div>
       </Container>
diff --git a/components/Header.tsx b/components/Header.tsx
index bd65965d..e7d463d4 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -87,7 +87,6 @@ export default function Header() {
                 height={120}
                 className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
                 priority
-                unoptimized
               />
             </Link>
           </motion.div>
diff --git a/components/home/Experience.tsx b/components/home/Experience.tsx
index 85a042d6..df6ef7ed 100644
--- a/components/home/Experience.tsx
+++ b/components/home/Experience.tsx
@@ -9,17 +9,17 @@ export default function Experience() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/1694273920124-copy-2.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/1694273920124-copy-2.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover object-center scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/80 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/40 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl">
           <Heading level={2} subtitle={t('subtitle')} className="text-white">
@@ -29,19 +29,25 @@ export default function Experience() {
             <p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
               {t('p1')}
             </p>
-            <p className="pl-9">
-              {t('p2')}
-            </p>
+            <p className="pl-9">{t('p2')}</p>
           </div>
-          
+
           <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="animate-fade-in">
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('certifiedQuality')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('vdeApproved')}
+              </div>
             </div>
             <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('fullSpectrum')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('solutionsRange')}
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/home/GallerySection.tsx b/components/home/GallerySection.tsx
index 844792dd..546bb66b 100644
--- a/components/home/GallerySection.tsx
+++ b/components/home/GallerySection.tsx
@@ -46,7 +46,7 @@ export default function GallerySection() {
                 alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-1000 group-hover:scale-110"
-                unoptimized
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
               <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
               <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index f91533fe..0b7a6fa7 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -4,7 +4,8 @@ import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
 import { useTranslations } from 'next-intl';
-import HeroIllustration from './HeroIllustration';
+import dynamic from 'next/dynamic';
+const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
@@ -19,7 +20,10 @@ export default function Hero() {
           variants={containerVariants}
         >
           <motion.div variants={headingVariants}>
-            <Heading level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]">
+            <Heading
+              level={1}
+              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
+            >
               {t.rich('title', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -36,7 +40,7 @@ export default function Hero() {
                       <Scribble variant="circle" />
                     </motion.div>
                   </span>
-                )
+                ),
               })}
             </Heading>
           </motion.div>
@@ -50,13 +54,23 @@ export default function Hero() {
             variants={buttonContainerVariants}
           >
             <motion.div variants={buttonVariants}>
-              <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
+              <Button
+                href="/contact"
+                variant="accent"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
+              >
                 {t('cta')}
                 <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
               </Button>
             </motion.div>
             <motion.div variants={buttonVariants}>
-              <Button href="/products" variant="white" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none">
+              <Button
+                href="/products"
+                variant="white"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
+              >
                 {t('exploreProducts')}
               </Button>
             </motion.div>
@@ -77,7 +91,7 @@ export default function Hero() {
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 1, ease: "easeOut", delay: 3 }}
+        transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
       >
         <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
           <motion.div
@@ -86,7 +100,7 @@ export default function Hero() {
             transition={{
               duration: 1.5,
               repeat: Infinity,
-              ease: "easeInOut"
+              ease: 'easeInOut',
             }}
           />
         </div>
@@ -101,9 +115,9 @@ const containerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.12,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const headingVariants = {
@@ -112,8 +126,8 @@ const headingVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const accentVariants = {
@@ -122,8 +136,8 @@ const accentVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const scribbleVariants = {
@@ -132,8 +146,8 @@ const scribbleVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 1, type: "spring", stiffness: 300, damping: 20 }
-  }
+    transition: { duration: 1, type: 'spring', stiffness: 300, damping: 20 },
+  },
 } as const;
 
 const subtitleVariants = {
@@ -142,8 +156,8 @@ const subtitleVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const buttonContainerVariants = {
@@ -152,9 +166,9 @@ const buttonContainerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const buttonVariants = {
@@ -163,6 +177,6 @@ const buttonVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", stiffness: 400, damping: 20 }
-  }
+    transition: { type: 'spring', stiffness: 400, damping: 20 },
+  },
 } as const;
diff --git a/components/home/HeroIllustration.tsx b/components/home/HeroIllustration.tsx
index 2a8abb4e..c145bffb 100644
--- a/components/home/HeroIllustration.tsx
+++ b/components/home/HeroIllustration.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 // Isometric grid configuration - true 2:1 isometric projection
 const CELL_WIDTH = 120;
 const CELL_HEIGHT = 60; // Half of width for 2:1 isometric
 
 // Convert grid coordinates to isometric screen coordinates
-// Using standard isometric projection where x goes right-down, y goes right-up
 function gridToScreen(col: number, row: number): { x: number; y: number } {
   return {
     x: (col - row) * (CELL_WIDTH / 2),
@@ -16,65 +15,53 @@ function gridToScreen(col: number, row: number): { x: number; y: number } {
 }
 
 // Grid layout (10 columns x 8 rows)
-// Energy flow: Solar/Wind (left) → Substations (center) → Transmission → City (right)
 const GRID = {
   cols: 10,
   rows: 8,
 };
 
-// Infrastructure positions - precisely on grid intersections
+// Infrastructure positions
 const INFRASTRUCTURE = {
-  // Solar panels (two groups)
   solar: [
-    // Group 1 - bottom-left
     { col: 0, row: 5 },
     { col: 1, row: 5 },
     { col: 0, row: 6 },
     { col: 1, row: 6 },
-    // Group 2 - middle-bottom
     { col: 2, row: 7 },
     { col: 3, row: 7 },
     { col: 2, row: 8 },
     { col: 3, row: 8 },
   ],
-  // Wind turbines (two groups)
   wind: [
-    // Group 1 - top-left
     { col: 0, row: 1 },
     { col: 1, row: 2 },
     { col: 2, row: 1 },
-    // Group 2 - top-center
     { col: 3, row: 0 },
     { col: 4, row: 1 },
     { col: 5, row: 0 },
   ],
-  // Substations
   substations: [
-    { col: 3, row: 3, type: 'collection' }, // Main collection substation
-    { col: 6, row: 4, type: 'distribution' }, // Distribution substation (right)
-    { col: 5, row: 7, type: 'distribution' }, // Distribution substation (bottom-left)
+    { col: 3, row: 3, type: 'collection' },
+    { col: 6, row: 4, type: 'distribution' },
+    { col: 5, row: 7, type: 'distribution' },
   ],
-  // Transmission towers (along the routes)
   towers: [
     { col: 4, row: 3 },
     { col: 5, row: 4 },
     { col: 4, row: 5 },
     { col: 5, row: 6 },
   ],
-  // City/Buildings (right side)
   city: [
     { col: 8, row: 3, type: 'tall' },
     { col: 9, row: 4, type: 'medium' },
     { col: 8, row: 5, type: 'small' },
     { col: 9, row: 5, type: 'medium' },
   ],
-  // City 2 (bottom-left area)
   city2: [
     { col: 6, row: 8, type: 'medium' },
     { col: 7, row: 7, type: 'tall' },
     { col: 7, row: 8, type: 'small' },
   ],
-  // Trees (decorative, scattered around)
   trees: [
     { col: 0, row: 3 },
     { col: 2, row: 6 },
@@ -84,77 +71,43 @@ const INFRASTRUCTURE = {
   ],
 };
 
-// Power line connections - grid-aligned paths only (no diagonals)
-// Each group meets at a collection point, then flows to main substation
 const POWER_LINES = [
-  // === WIND GROUP 1 (top-left) - meet at (1,1) then to substation ===
-  // Turbine at (0,1) → collection point (1,1)
   { from: { col: 0, row: 1 }, to: { col: 1, row: 1 } },
-  // Turbine at (1,2) → up to (1,1)
   { from: { col: 1, row: 2 }, to: { col: 1, row: 1 } },
-  // Turbine at (2,1) → left to (1,1)
   { from: { col: 2, row: 1 }, to: { col: 1, row: 1 } },
-  // Collection point (1,1) → down to (1,3) → right to substation (3,3)
   { from: { col: 1, row: 1 }, to: { col: 1, row: 3 } },
   { from: { col: 1, row: 3 }, to: { col: 3, row: 3 } },
-
-  // === WIND GROUP 2 (top-center) - meet at (4,1) then to substation ===
-  // Turbine at (3,0) → right to (4,0) → down to (4,1)
   { from: { col: 3, row: 0 }, to: { col: 4, row: 0 } },
   { from: { col: 4, row: 0 }, to: { col: 4, row: 1 } },
-  // Turbine at (4,1) is the collection point
-  // Turbine at (5,0) → down to (5,1) → left to (4,1)
   { from: { col: 5, row: 0 }, to: { col: 5, row: 1 } },
   { from: { col: 5, row: 1 }, to: { col: 4, row: 1 } },
-  // Collection point (4,1) → down to (4,3) → left to substation (3,3)
   { from: { col: 4, row: 1 }, to: { col: 4, row: 3 } },
   { from: { col: 4, row: 3 }, to: { col: 3, row: 3 } },
-
-  // === SOLAR GROUP 1 (bottom-left) - meet at (1,5) then to substation ===
-  // Panels at (0,5), (1,5), (0,6), (1,6) → collection at (1,5)
   { from: { col: 0, row: 5 }, to: { col: 1, row: 5 } },
   { from: { col: 0, row: 6 }, to: { col: 0, row: 5 } },
   { from: { col: 1, row: 6 }, to: { col: 1, row: 5 } },
-  // Collection point (1,5) → up to (1,3) → right to substation (3,3)
   { from: { col: 1, row: 5 }, to: { col: 1, row: 3 } },
-
-  // === SOLAR GROUP 2 (middle-bottom) - meet at (3,7) then to substation ===
-  // Panels at (2,7), (3,7), (2,8), (3,8) → collection at (3,7)
   { from: { col: 2, row: 7 }, to: { col: 3, row: 7 } },
   { from: { col: 2, row: 8 }, to: { col: 2, row: 7 } },
   { from: { col: 3, row: 8 }, to: { col: 3, row: 7 } },
-  // Collection point (3,7) → up to (3,3) substation
   { from: { col: 3, row: 7 }, to: { col: 3, row: 5 } },
   { from: { col: 3, row: 5 }, to: { col: 3, row: 3 } },
-
-  // === MAIN TRANSMISSION: Substation (3,3) → Towers → Distribution → City ===
-  // Substation to first tower
   { from: { col: 3, row: 3 }, to: { col: 4, row: 3 } },
-  // First tower to second tower (grid-aligned)
   { from: { col: 4, row: 3 }, to: { col: 5, row: 3 } },
   { from: { col: 5, row: 3 }, to: { col: 5, row: 4 } },
-  // Second tower to distribution substation (right)
   { from: { col: 5, row: 4 }, to: { col: 6, row: 4 } },
-  // Distribution to city 1 (grid-aligned)
   { from: { col: 6, row: 4 }, to: { col: 7, row: 4 } },
   { from: { col: 7, row: 4 }, to: { col: 8, row: 4 } },
-  // Branch to buildings (city 1)
   { from: { col: 8, row: 4 }, to: { col: 8, row: 3 } },
   { from: { col: 8, row: 4 }, to: { col: 8, row: 5 } },
   { from: { col: 8, row: 3 }, to: { col: 9, row: 3 } },
   { from: { col: 9, row: 3 }, to: { col: 9, row: 4 } },
   { from: { col: 8, row: 5 }, to: { col: 9, row: 5 } },
-
-  // === SECOND ROUTE: Substation (3,3) → Towers → Distribution (5,7) → City 2 ===
-  // Branch from main substation down
   { from: { col: 3, row: 3 }, to: { col: 3, row: 5 } },
   { from: { col: 3, row: 5 }, to: { col: 4, row: 5 } },
-  // Tower at (4,5) to tower at (5,6)
   { from: { col: 4, row: 5 }, to: { col: 5, row: 5 } },
   { from: { col: 5, row: 5 }, to: { col: 5, row: 6 } },
-  // Tower to distribution substation (bottom-left)
   { from: { col: 5, row: 6 }, to: { col: 5, row: 7 } },
-  // Distribution to city 2
   { from: { col: 5, row: 7 }, to: { col: 6, row: 7 } },
   { from: { col: 6, row: 7 }, to: { col: 6, row: 8 } },
   { from: { col: 6, row: 7 }, to: { col: 7, row: 7 } },
@@ -162,17 +115,30 @@ const POWER_LINES = [
 ];
 
 export default function HeroIllustration() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100';
+  const scale = isMobile ? 1.44 : 1;
+  const opacity = isMobile ? 0.6 : 0.85;
+
   return (
-    <div className="absolute md:inset-0 z-0 overflow-visible bg-primary w-full h-full">
+    <div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full">
       <svg
-        viewBox="400 0 1000 1100"
-        className="w-full h-full opacity-60 md:opacity-100 scale-[1.44] md:scale-100 translate-x-0 overflow-visible md:hidden"
+        viewBox={viewBox}
+        className="w-full h-full transition-all duration-700"
+        style={{ opacity, transform: `scale(${scale})` }}
         preserveAspectRatio="xMidYMid meet"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <defs>
-          {/* Electric energy flow gradient */}
           <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
             <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
@@ -180,8 +146,6 @@ export default function HeroIllustration() {
             <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
             <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
           </linearGradient>
-
-          {/* Wind flow gradient */}
           <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stopColor="white" stopOpacity="0" />
             <stop offset="30%" stopColor="white" stopOpacity="0.4" />
@@ -189,25 +153,13 @@ export default function HeroIllustration() {
             <stop offset="70%" stopColor="white" stopOpacity="0.4" />
             <stop offset="100%" stopColor="white" stopOpacity="0" />
           </linearGradient>
-
-          {/* Sun ray gradient */}
-          <linearGradient id="sun-ray" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#FFD700" stopOpacity="0.6" />
-            <stop offset="50%" stopColor="#FFD700" stopOpacity="0.3" />
-            <stop offset="100%" stopColor="#82ed20" stopOpacity="0.1" />
-          </linearGradient>
-
-          {/* Glow filter */}
           <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
             <feGaussianBlur stdDeviation="3" result="blur" />
             <feMerge>
-              <feMergeNode in="blur" />
               <feMergeNode in="blur" />
               <feMergeNode in="SourceGraphic" />
             </feMerge>
           </filter>
-
-          {/* Soft glow for nodes */}
           <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
             <feGaussianBlur stdDeviation="2" result="blur" />
             <feMerge>
@@ -215,23 +167,11 @@ export default function HeroIllustration() {
               <feMergeNode in="SourceGraphic" />
             </feMerge>
           </filter>
-
-          {/* Sun glow filter */}
-          <filter id="sun-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="4" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
         </defs>
 
-        {/* Main scene container - positioned to the right */}
         <g transform="translate(900, 100)">
-          
-          {/* === ISOMETRIC GRID === */}
-          <g opacity="0.15">
-            {/* Horizontal grid lines (going from top-left to bottom-right) */}
+          {/* ISOMETRIC GRID */}
+          <g opacity="0.1">
             {[...Array(GRID.rows + 1)].map((_, row) => {
               const start = gridToScreen(0, row);
               const end = gridToScreen(GRID.cols, row);
@@ -247,7 +187,6 @@ export default function HeroIllustration() {
                 />
               );
             })}
-            {/* Vertical grid lines (going from top-right to bottom-left) */}
             {[...Array(GRID.cols + 1)].map((_, col) => {
               const start = gridToScreen(col, 0);
               const end = gridToScreen(col, GRID.rows);
@@ -265,49 +204,23 @@ export default function HeroIllustration() {
             })}
           </g>
 
-          {/* Grid intersection nodes */}
-          <g opacity="0.2">
-            {[...Array(GRID.cols + 1)].map((_, col) =>
-              [...Array(GRID.rows + 1)].map((_, row) => {
-                const pos = gridToScreen(col, row);
-                return (
-                  <circle
-                    key={`node-${col}-${row}`}
-                    cx={pos.x}
-                    cy={pos.y}
-                    r="2"
-                    fill="white"
-                  />
-                );
-              })
-            )}
-          </g>
-
-          {/* === POWER LINES (Base cables) === */}
-          <g stroke="white" strokeWidth="2" strokeOpacity="0.25">
+          {/* POWER LINES */}
+          <g stroke="white" strokeWidth="2" strokeOpacity="0.2">
             {POWER_LINES.map((line, i) => {
               const from = gridToScreen(line.from.col, line.from.row);
               const to = gridToScreen(line.to.col, line.to.row);
-              return (
-                <line
-                  key={`cable-${i}`}
-                  x1={from.x}
-                  y1={from.y}
-                  x2={to.x}
-                  y2={to.y}
-                />
-              );
+              return <line key={`cable-${i}`} x1={from.x} y1={from.y} x2={to.x} y2={to.y} />;
             })}
           </g>
 
-          {/* === ANIMATED ENERGY FLOW === */}
+          {/* ANIMATED ENERGY FLOW */}
           <g filter="url(#glow)">
             {POWER_LINES.map((line, i) => {
+              // Only animate a subset of lines to reduce main-thread work
+              if (i % 2 !== 0) return null;
               const from = gridToScreen(line.from.col, line.from.row);
               const to = gridToScreen(line.to.col, line.to.row);
-              const length = Math.sqrt(
-                Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)
-              );
+              const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
               return (
                 <line
                   key={`flow-${i}`}
@@ -332,630 +245,53 @@ export default function HeroIllustration() {
             })}
           </g>
 
-          {/* === SOLAR PANELS === */}
+          {/* SOLAR PANELS */}
           {INFRASTRUCTURE.solar.map((panel, i) => {
             const pos = gridToScreen(panel.col, panel.row);
             return (
               <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Panel base */}
                 <path
                   d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
                   fill="white"
-                  fillOpacity="0.1"
+                  fillOpacity="0.05"
                   stroke="white"
                   strokeWidth="1"
-                  strokeOpacity="0.4"
+                  strokeOpacity="0.2"
                 />
-                {/* Panel surface (tilted) */}
                 <path
                   d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
                   fill="white"
-                  fillOpacity="0.15"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.5"
-                />
-                {/* Panel grid lines */}
-                <line x1="-7" y1="-10" x2="7" y2="0" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
-                <line x1="0" y1="-15" x2="0" y2="5" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === WIND TURBINES === */}
-          {INFRASTRUCTURE.wind.map((turbine, i) => {
-            const pos = gridToScreen(turbine.col, turbine.row);
-            return (
-              <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <ellipse cx="0" cy="0" rx="10" ry="5" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Tower */}
-                <line x1="0" y1="0" x2="0" y2="-60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
-                {/* Nacelle */}
-                <ellipse cx="0" cy="-60" rx="6" ry="3" fill="white" fillOpacity="0.3" stroke="white" strokeWidth="1" />
-                {/* Blades */}
-                <g transform="translate(0, -60)">
-                  {[0, 120, 240].map((angle, j) => (
-                    <line
-                      key={`blade-${i}-${j}`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="-30"
-                      stroke="white"
-                      strokeWidth="1.5"
-                      strokeOpacity="0.6"
-                      transform={`rotate(${angle})`}
-                    >
-                      <animateTransform
-                        attributeName="transform"
-                        type="rotate"
-                        from={`${angle} 0 0`}
-                        to={`${angle + 360} 0 0`}
-                        dur={`${3 + i}s`}
-                        repeatCount="indefinite"
-                      />
-                    </line>
-                  ))}
-                  <circle r="3" fill="white" fillOpacity="0.4" />
-                </g>
-                {/* Connection glow */}
-                <circle r="5" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2.5s" repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === SUBSTATIONS === */}
-          {INFRASTRUCTURE.substations.map((sub, i) => {
-            const pos = gridToScreen(sub.col, sub.row);
-            const isCollection = sub.type === 'collection';
-            return (
-              <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base platform */}
-                <path
-                  d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.4"
-                />
-                {/* Building */}
-                <path
-                  d={isCollection
-                    ? "M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0"
-                    : "M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0"
-                  }
-                  fill="white"
-                  fillOpacity="0.08"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.5"
-                />
-                {/* Equipment */}
-                <rect x="-10" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
-                <rect x="4" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
-                {/* Insulators */}
-                <line x1="-7" y1="-12" x2="-7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <line x1="7" y1="-12" x2="7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <circle cx="-7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
-                <circle cx="7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
-                {/* Connection glow */}
-                <circle r="8" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite" />
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === TRANSMISSION TOWERS === */}
-          {INFRASTRUCTURE.towers.map((tower, i) => {
-            const pos = gridToScreen(tower.col, tower.row);
-            return (
-              <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <ellipse cx="0" cy="0" rx="8" ry="4" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Tower legs */}
-                <path d="M -6 0 L -3 -45 M 6 0 L 3 -45" stroke="white" strokeWidth="1.5" strokeOpacity="0.5" />
-                {/* Cross braces */}
-                <path d="M -5 -10 L 5 -10 M -4 -20 L 4 -20 M -3 -30 L 3 -30 M -3 -45 L 3 -45" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Cross arms */}
-                <line x1="-12" y1="-40" x2="12" y2="-40" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <line x1="-10" y1="-32" x2="10" y2="-32" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                {/* Insulators */}
-                <circle cx="-10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
-                <circle cx="10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
-                {/* Connection glow */}
-                <circle r="5" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === CITY BUILDINGS === */}
-          {INFRASTRUCTURE.city.map((building, i) => {
-            const pos = gridToScreen(building.col, building.row);
-            const heights = { tall: 70, medium: 45, small: 30 };
-            const height = heights[building.type as keyof typeof heights];
-            return (
-              <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <path
-                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
-                  fill="white"
                   fillOpacity="0.1"
                   stroke="white"
                   strokeWidth="1"
                   strokeOpacity="0.3"
                 />
-                {/* Building front */}
-                <path
-                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.4"
-                />
-                {/* Building side */}
-                <path
-                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
-                  fill="white"
-                  fillOpacity="0.05"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Windows */}
-                {[...Array(Math.floor(height / 15))].map((_, w) => (
-                  <g key={`window-${i}-${w}`}>
-                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                  </g>
-                ))}
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === CITY 2 BUILDINGS (bottom-left) === */}
-          {INFRASTRUCTURE.city2.map((building, i) => {
-            const pos = gridToScreen(building.col, building.row);
-            const heights = { tall: 70, medium: 45, small: 30 };
-            const height = heights[building.type as keyof typeof heights];
-            return (
-              <g key={`building2-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <path
-                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Building front */}
-                <path
-                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.4"
-                />
-                {/* Building side */}
-                <path
-                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
-                  fill="white"
-                  fillOpacity="0.05"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Windows */}
-                {[...Array(Math.floor(height / 15))].map((_, w) => (
-                  <g key={`window2-${i}-${w}`}>
-                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                  </g>
-                ))}
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === TREES === */}
-          {INFRASTRUCTURE.trees.map((tree, i) => {
-            const pos = gridToScreen(tree.col, tree.row);
-            return (
-              <g key={`tree-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Trunk */}
-                <line x1="0" y1="0" x2="0" y2="-15" stroke="white" strokeWidth="2" strokeOpacity="0.3" />
-                {/* Foliage - layered circles for tree crown */}
-                <ellipse cx="0" cy="-22" rx="10" ry="8" fill="white" fillOpacity="0.12" stroke="white" strokeWidth="0.5" strokeOpacity="0.2" />
-                <ellipse cx="-5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
-                <ellipse cx="5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
-                <ellipse cx="0" cy="-30" rx="6" ry="5" fill="white" fillOpacity="0.08" stroke="white" strokeWidth="0.5" strokeOpacity="0.1" />
-              </g>
-            );
-          })}
-
-          {/* === ABSTRACT WIND EFFECTS === */}
-          {INFRASTRUCTURE.wind.map((turbine, i) => {
-            const pos = gridToScreen(turbine.col, turbine.row);
-            return (
-              <g key={`wind-effect-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Wind swoosh lines - curved paths flowing toward turbine */}
-                {[0, 1, 2].map((j) => (
-                  <path
-                    key={`wind-line-${i}-${j}`}
-                    d={`M ${-80 - j * 15} ${-70 - j * 8} Q ${-50 - j * 10} ${-65 - j * 5} ${-20} ${-60}`}
-                    stroke="url(#wind-flow)"
-                    strokeWidth="2"
-                    fill="none"
-                    strokeLinecap="round"
-                    opacity="0"
-                  >
-                    <animate
-                      attributeName="opacity"
-                      values="0;0.6;0"
-                      dur={`${2 + j * 0.5}s`}
-                      begin={`${j * 0.7 + i * 0.3}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="stroke-dashoffset"
-                      from="100"
-                      to="0"
-                      dur={`${2 + j * 0.5}s`}
-                      begin={`${j * 0.7 + i * 0.3}s`}
-                      repeatCount="indefinite"
-                    />
-                  </path>
-                ))}
-                {/* Additional wind particles */}
-                {[0, 1, 2, 3].map((j) => (
-                  <circle
-                    key={`wind-particle-${i}-${j}`}
-                    r="1.5"
-                    fill="white"
-                    opacity="0"
-                  >
-                    <animate
-                      attributeName="cx"
-                      values={`${-70 - j * 10};${-10}`}
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="cy"
-                      values={`${-75 - j * 5};${-60}`}
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="opacity"
-                      values="0;0.5;0"
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                  </circle>
-                ))}
-              </g>
-            );
-          })}
-
-          {/* === SCHEMATIC SUN RAYS === */}
-          {/* Simple downward rays above each solar panel */}
-          {INFRASTRUCTURE.solar.map((panel, i) => {
-            const pos = gridToScreen(panel.col, panel.row);
-            return (
-              <g key={`sun-ray-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Three short schematic rays coming down to panel */}
-                {[-8, 0, 8].map((offset, j) => (
-                  <line
-                    key={`ray-${i}-${j}`}
-                    x1={offset}
-                    y1={-45}
-                    x2={offset * 0.3}
-                    y2={-18}
-                    stroke="#FFD700"
-                    strokeWidth="1.5"
-                    strokeOpacity="0.4"
-                    strokeLinecap="round"
-                    strokeDasharray="4 6"
-                  >
-                    <animate
-                      attributeName="strokeOpacity"
-                      values="0.2;0.5;0.2"
-                      dur={`${2 + j * 0.3}s`}
-                      begin={`${i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="stroke-dashoffset"
-                      from="10"
-                      to="0"
-                      dur="1.5s"
-                      repeatCount="indefinite"
-                    />
-                  </line>
-                ))}
-              </g>
-            );
-          })}
-
-          {/* === ENERGY PARTICLES === */}
-          {POWER_LINES.map((line, i) => {
-            const from = gridToScreen(line.from.col, line.from.row);
-            const to = gridToScreen(line.to.col, line.to.row);
-            return (
-              <circle
-                key={`particle-${i}`}
-                r="3"
-                fill="#82ed20"
-                filter="url(#soft-glow)"
-              >
-                <animate
-                  attributeName="cx"
-                  values={`${from.x};${to.x}`}
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="cy"
-                  values={`${from.y};${to.y}`}
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="opacity"
-                  values="0;0.8;0"
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-              </circle>
-            );
-          })}
-
-        </g>
-      </svg>
-
-      {/* Desktop SVG - Original */}
-      <svg
-        viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-100 scale-100 translate-x-0 hidden md:block"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          {/* Electric energy flow gradient */}
-          <linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
-            <stop offset="30%" stopColor="#82ed20" stopOpacity="0.6" />
-            <stop offset="50%" stopColor="#9bf14d" stopOpacity="1" />
-            <stop offset="70%" stopColor="#82ed20" stopOpacity="0.6" />
-            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
-          </linearGradient>
-
-          {/* Wind flow gradient */}
-          <linearGradient id="wind-flow" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor="white" stopOpacity="0" />
-            <stop offset="30%" stopColor="white" stopOpacity="0.4" />
-            <stop offset="50%" stopColor="white" stopOpacity="0.6" />
-            <stop offset="70%" stopColor="white" stopOpacity="0.4" />
-            <stop offset="100%" stopColor="white" stopOpacity="0" />
-          </linearGradient>
-
-          {/* Sun ray gradient */}
-          <linearGradient id="sun-ray" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor="#FFD700" stopOpacity="0.6" />
-            <stop offset="50%" stopColor="#FFD700" stopOpacity="0.3" />
-            <stop offset="100%" stopColor="#82ed20" stopOpacity="0.1" />
-          </linearGradient>
-
-          {/* Glow filter */}
-          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="3" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-
-          {/* Soft glow for nodes */}
-          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
-            <feGaussianBlur stdDeviation="2" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-
-          {/* Sun glow filter */}
-          <filter id="sun-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="4" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-        </defs>
-
-        {/* Main scene container - positioned to the right */}
-        <g transform="translate(900, 100)">
-          
-          {/* === ISOMETRIC GRID === */}
-          <g opacity="0.15">
-            {/* Horizontal grid lines (going from top-left to bottom-right) */}
-            {[...Array(GRID.rows + 1)].map((_, row) => {
-              const start = gridToScreen(0, row);
-              const end = gridToScreen(GRID.cols, row);
-              return (
-                <line
-                  key={`h-${row}`}
-                  x1={start.x}
-                  y1={start.y}
-                  x2={end.x}
-                  y2={end.y}
-                  stroke="white"
-                  strokeWidth="1"
-                />
-              );
-            })}
-            {/* Vertical grid lines (going from top-right to bottom-left) */}
-            {[...Array(GRID.cols + 1)].map((_, col) => {
-              const start = gridToScreen(col, 0);
-              const end = gridToScreen(col, GRID.rows);
-              return (
-                <line
-                  key={`v-${col}`}
-                  x1={start.x}
-                  y1={start.y}
-                  x2={end.x}
-                  y2={end.y}
-                  stroke="white"
-                  strokeWidth="1"
-                />
-              );
-            })}
-          </g>
-
-          {/* Grid intersection nodes */}
-          <g opacity="0.2">
-            {[...Array(GRID.cols + 1)].map((_, col) =>
-              [...Array(GRID.rows + 1)].map((_, row) => {
-                const pos = gridToScreen(col, row);
-                return (
-                  <circle
-                    key={`node-${col}-${row}`}
-                    cx={pos.x}
-                    cy={pos.y}
-                    r="2"
-                    fill="white"
-                  />
-                );
-              })
-            )}
-          </g>
-
-          {/* === POWER LINES (Base cables) === */}
-          <g stroke="white" strokeWidth="2" strokeOpacity="0.25">
-            {POWER_LINES.map((line, i) => {
-              const from = gridToScreen(line.from.col, line.from.row);
-              const to = gridToScreen(line.to.col, line.to.row);
-              return (
-                <line
-                  key={`cable-${i}`}
-                  x1={from.x}
-                  y1={from.y}
-                  x2={to.x}
-                  y2={to.y}
-                />
-              );
-            })}
-          </g>
-
-          {/* === ANIMATED ENERGY FLOW === */}
-          <g filter="url(#glow)">
-            {POWER_LINES.map((line, i) => {
-              const from = gridToScreen(line.from.col, line.from.row);
-              const to = gridToScreen(line.to.col, line.to.row);
-              const length = Math.sqrt(
-                Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)
-              );
-              return (
-                <line
-                  key={`flow-${i}`}
-                  x1={from.x}
-                  y1={from.y}
-                  x2={to.x}
-                  y2={to.y}
-                  stroke="url(#energy-pulse)"
-                  strokeWidth="3"
-                  strokeLinecap="round"
-                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
-                >
+                <circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
                   <animate
-                    attributeName="stroke-dashoffset"
-                    from={length}
-                    to={0}
-                    dur={`${1.5 + (i % 3) * 0.5}s`}
+                    attributeName="fillOpacity"
+                    values="0.2;0.5;0.2"
+                    dur="2s"
                     repeatCount="indefinite"
                   />
-                </line>
-              );
-            })}
-          </g>
-
-          {/* === SOLAR PANELS === */}
-          {INFRASTRUCTURE.solar.map((panel, i) => {
-            const pos = gridToScreen(panel.col, panel.row);
-            return (
-              <g key={`solar-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Panel base */}
-                <path
-                  d="M -20 0 L 0 -10 L 20 0 L 0 10 Z"
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.4"
-                />
-                {/* Panel surface (tilted) */}
-                <path
-                  d="M -15 -5 L 0 -15 L 15 -5 L 0 5 Z"
-                  fill="white"
-                  fillOpacity="0.15"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.5"
-                />
-                {/* Panel grid lines */}
-                <line x1="-7" y1="-10" x2="7" y2="0" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
-                <line x1="0" y1="-15" x2="0" y2="5" stroke="white" strokeWidth="0.5" strokeOpacity="0.3" />
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2s" repeatCount="indefinite" />
                 </circle>
               </g>
             );
           })}
 
-          {/* === WIND TURBINES === */}
+          {/* WIND TURBINES */}
           {INFRASTRUCTURE.wind.map((turbine, i) => {
             const pos = gridToScreen(turbine.col, turbine.row);
             return (
               <g key={`wind-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <ellipse cx="0" cy="0" rx="10" ry="5" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Tower */}
-                <line x1="0" y1="0" x2="0" y2="-60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
-                {/* Nacelle */}
-                <ellipse cx="0" cy="-60" rx="6" ry="3" fill="white" fillOpacity="0.3" stroke="white" strokeWidth="1" />
-                {/* Blades */}
+                <line
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="-60"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeOpacity="0.3"
+                />
                 <g transform="translate(0, -60)">
                   {[0, 120, 240].map((angle, j) => (
                     <line
@@ -966,7 +302,7 @@ export default function HeroIllustration() {
                       y2="-30"
                       stroke="white"
                       strokeWidth="1.5"
-                      strokeOpacity="0.6"
+                      strokeOpacity="0.4"
                       transform={`rotate(${angle})`}
                     >
                       <animateTransform
@@ -979,347 +315,94 @@ export default function HeroIllustration() {
                       />
                     </line>
                   ))}
-                  <circle r="3" fill="white" fillOpacity="0.4" />
                 </g>
-                {/* Connection glow */}
-                <circle r="5" fill="#82ed20" fillOpacity="0.4" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.3;0.6;0.3" dur="2.5s" repeatCount="indefinite" />
-                </circle>
               </g>
             );
           })}
 
-          {/* === SUBSTATIONS === */}
+          {/* SUBSTATIONS */}
           {INFRASTRUCTURE.substations.map((sub, i) => {
             const pos = gridToScreen(sub.col, sub.row);
             const isCollection = sub.type === 'collection';
             return (
               <g key={`substation-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base platform */}
                 <path
                   d="M -25 0 L 0 -12 L 25 0 L 0 12 Z"
                   fill="white"
-                  fillOpacity="0.1"
+                  fillOpacity="0.05"
                   stroke="white"
                   strokeWidth="1"
-                  strokeOpacity="0.4"
+                  strokeOpacity="0.2"
                 />
-                {/* Building */}
                 <path
-                  d={isCollection 
-                    ? "M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0"
-                    : "M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0"
+                  d={
+                    isCollection
+                      ? 'M -18 0 L -18 -20 L 0 -32 L 18 -20 L 18 0'
+                      : 'M -22 0 L -22 -25 L 0 -37 L 22 -25 L 22 0'
                   }
                   fill="white"
                   fillOpacity="0.08"
                   stroke="white"
                   strokeWidth="1"
-                  strokeOpacity="0.5"
+                  strokeOpacity="0.3"
                 />
-                {/* Equipment */}
-                <rect x="-10" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
-                <rect x="4" y="-12" width="6" height="8" fill="white" fillOpacity="0.2" stroke="white" strokeWidth="0.5" />
-                {/* Insulators */}
-                <line x1="-7" y1="-12" x2="-7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <line x1="7" y1="-12" x2="7" y2="-22" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <circle cx="-7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
-                <circle cx="7" cy="-22" r="2" fill="white" fillOpacity="0.4" />
-                {/* Connection glow */}
-                <circle r="8" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite" />
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite" />
-                </circle>
               </g>
             );
           })}
 
-          {/* === TRANSMISSION TOWERS === */}
+          {/* TRANSMISSION TOWERS */}
           {INFRASTRUCTURE.towers.map((tower, i) => {
             const pos = gridToScreen(tower.col, tower.row);
             return (
               <g key={`tower-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <ellipse cx="0" cy="0" rx="8" ry="4" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Tower legs */}
-                <path d="M -6 0 L -3 -45 M 6 0 L 3 -45" stroke="white" strokeWidth="1.5" strokeOpacity="0.5" />
-                {/* Cross braces */}
-                <path d="M -5 -10 L 5 -10 M -4 -20 L 4 -20 M -3 -30 L 3 -30 M -3 -45 L 3 -45" stroke="white" strokeWidth="1" strokeOpacity="0.3" />
-                {/* Cross arms */}
-                <line x1="-12" y1="-40" x2="12" y2="-40" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                <line x1="-10" y1="-32" x2="10" y2="-32" stroke="white" strokeWidth="1" strokeOpacity="0.4" />
-                {/* Insulators */}
-                <circle cx="-10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
-                <circle cx="10" cy="-40" r="1.5" fill="white" fillOpacity="0.4" />
-                {/* Connection glow */}
-                <circle r="5" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
-                </circle>
+                <path
+                  d="M -6 0 L -3 -45 M 6 0 L 3 -45"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeOpacity="0.3"
+                />
+                <line
+                  x1="-12"
+                  y1="-40"
+                  x2="12"
+                  y2="-40"
+                  stroke="white"
+                  strokeWidth="1"
+                  strokeOpacity="0.2"
+                />
               </g>
             );
           })}
 
-          {/* === CITY BUILDINGS === */}
-          {INFRASTRUCTURE.city.map((building, i) => {
+          {/* CITY BUILDINGS */}
+          {[...INFRASTRUCTURE.city, ...INFRASTRUCTURE.city2].map((building, i) => {
             const pos = gridToScreen(building.col, building.row);
             const heights = { tall: 70, medium: 45, small: 30 };
-            const height = heights[building.type as keyof typeof heights];
+            const height = heights[building.type as keyof typeof heights] || 45;
             return (
               <g key={`building-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <path
-                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Building front */}
                 <path
                   d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
                   fill="white"
-                  fillOpacity="0.1"
+                  fillOpacity="0.08"
                   stroke="white"
                   strokeWidth="1"
-                  strokeOpacity="0.4"
+                  strokeOpacity="0.2"
                 />
-                {/* Building side */}
                 <path
                   d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
                   fill="white"
                   fillOpacity="0.05"
                   stroke="white"
                   strokeWidth="1"
-                  strokeOpacity="0.3"
+                  strokeOpacity="0.15"
                 />
-                {/* Windows */}
-                {[...Array(Math.floor(height / 15))].map((_, w) => (
-                  <g key={`window-${i}-${w}`}>
-                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                  </g>
-                ))}
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2 + i * 0.3}s`} repeatCount="indefinite" />
-                </circle>
               </g>
             );
           })}
-
-          {/* === CITY 2 BUILDINGS (bottom-left) === */}
-          {INFRASTRUCTURE.city2.map((building, i) => {
-            const pos = gridToScreen(building.col, building.row);
-            const heights = { tall: 70, medium: 45, small: 30 };
-            const height = heights[building.type as keyof typeof heights];
-            return (
-              <g key={`building2-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Base */}
-                <path
-                  d="M -12 0 L 0 -6 L 12 0 L 0 6 Z"
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Building front */}
-                <path
-                  d={`M -12 0 L -12 -${height} L 0 -${height + 6} L 0 -6 Z`}
-                  fill="white"
-                  fillOpacity="0.1"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.4"
-                />
-                {/* Building side */}
-                <path
-                  d={`M 0 -6 L 0 -${height + 6} L 12 -${height} L 12 0 Z`}
-                  fill="white"
-                  fillOpacity="0.05"
-                  stroke="white"
-                  strokeWidth="1"
-                  strokeOpacity="0.3"
-                />
-                {/* Windows */}
-                {[...Array(Math.floor(height / 15))].map((_, w) => (
-                  <g key={`window2-${i}-${w}`}>
-                    <rect x="-9" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="-4" y={-12 - w * 15} width="3" height="4" fill="white" fillOpacity="0.2" />
-                    <rect x="3" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                    <rect x="7" y={-15 - w * 15} width="3" height="4" fill="white" fillOpacity="0.15" />
-                  </g>
-                ))}
-                {/* Connection glow */}
-                <circle r="4" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
-                  <animate attributeName="fillOpacity" values="0.2;0.5;0.2" dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" />
-                </circle>
-              </g>
-            );
-          })}
-
-          {/* === TREES === */}
-          {INFRASTRUCTURE.trees.map((tree, i) => {
-            const pos = gridToScreen(tree.col, tree.row);
-            return (
-              <g key={`tree-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Trunk */}
-                <line x1="0" y1="0" x2="0" y2="-15" stroke="white" strokeWidth="2" strokeOpacity="0.3" />
-                {/* Foliage - layered circles for tree crown */}
-                <ellipse cx="0" cy="-22" rx="10" ry="8" fill="white" fillOpacity="0.12" stroke="white" strokeWidth="0.5" strokeOpacity="0.2" />
-                <ellipse cx="-5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
-                <ellipse cx="5" cy="-26" rx="7" ry="6" fill="white" fillOpacity="0.1" stroke="white" strokeWidth="0.5" strokeOpacity="0.15" />
-                <ellipse cx="0" cy="-30" rx="6" ry="5" fill="white" fillOpacity="0.08" stroke="white" strokeWidth="0.5" strokeOpacity="0.1" />
-              </g>
-            );
-          })}
-
-          {/* === ABSTRACT WIND EFFECTS === */}
-          {INFRASTRUCTURE.wind.map((turbine, i) => {
-            const pos = gridToScreen(turbine.col, turbine.row);
-            return (
-              <g key={`wind-effect-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Wind swoosh lines - curved paths flowing toward turbine */}
-                {[0, 1, 2].map((j) => (
-                  <path
-                    key={`wind-line-${i}-${j}`}
-                    d={`M ${-80 - j * 15} ${-70 - j * 8} Q ${-50 - j * 10} ${-65 - j * 5} ${-20} ${-60}`}
-                    stroke="url(#wind-flow)"
-                    strokeWidth="2"
-                    fill="none"
-                    strokeLinecap="round"
-                    opacity="0"
-                  >
-                    <animate
-                      attributeName="opacity"
-                      values="0;0.6;0"
-                      dur={`${2 + j * 0.5}s`}
-                      begin={`${j * 0.7 + i * 0.3}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="stroke-dashoffset"
-                      from="100"
-                      to="0"
-                      dur={`${2 + j * 0.5}s`}
-                      begin={`${j * 0.7 + i * 0.3}s`}
-                      repeatCount="indefinite"
-                    />
-                  </path>
-                ))}
-                {/* Additional wind particles */}
-                {[0, 1, 2, 3].map((j) => (
-                  <circle
-                    key={`wind-particle-${i}-${j}`}
-                    r="1.5"
-                    fill="white"
-                    opacity="0"
-                  >
-                    <animate
-                      attributeName="cx"
-                      values={`${-70 - j * 10};${-10}`}
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="cy"
-                      values={`${-75 - j * 5};${-60}`}
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="opacity"
-                      values="0;0.5;0"
-                      dur={`${1.5 + j * 0.3}s`}
-                      begin={`${j * 0.4 + i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                  </circle>
-                ))}
-              </g>
-            );
-          })}
-
-          {/* === SCHEMATIC SUN RAYS === */}
-          {/* Simple downward rays above each solar panel */}
-          {INFRASTRUCTURE.solar.map((panel, i) => {
-            const pos = gridToScreen(panel.col, panel.row);
-            return (
-              <g key={`sun-ray-${i}`} transform={`translate(${pos.x}, ${pos.y})`}>
-                {/* Three short schematic rays coming down to panel */}
-                {[-8, 0, 8].map((offset, j) => (
-                  <line
-                    key={`ray-${i}-${j}`}
-                    x1={offset}
-                    y1={-45}
-                    x2={offset * 0.3}
-                    y2={-18}
-                    stroke="#FFD700"
-                    strokeWidth="1.5"
-                    strokeOpacity="0.4"
-                    strokeLinecap="round"
-                    strokeDasharray="4 6"
-                  >
-                    <animate
-                      attributeName="strokeOpacity"
-                      values="0.2;0.5;0.2"
-                      dur={`${2 + j * 0.3}s`}
-                      begin={`${i * 0.2}s`}
-                      repeatCount="indefinite"
-                    />
-                    <animate
-                      attributeName="stroke-dashoffset"
-                      from="10"
-                      to="0"
-                      dur="1.5s"
-                      repeatCount="indefinite"
-                    />
-                  </line>
-                ))}
-              </g>
-            );
-          })}
-
-          {/* === ENERGY PARTICLES === */}
-          {POWER_LINES.map((line, i) => {
-            const from = gridToScreen(line.from.col, line.from.row);
-            const to = gridToScreen(line.to.col, line.to.row);
-            return (
-              <circle
-                key={`particle-${i}`}
-                r="3"
-                fill="#82ed20"
-                filter="url(#soft-glow)"
-              >
-                <animate
-                  attributeName="cx"
-                  values={`${from.x};${to.x}`}
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="cy"
-                  values={`${from.y};${to.y}`}
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="opacity"
-                  values="0;0.8;0"
-                  dur={`${1 + (i % 4) * 0.3}s`}
-                  repeatCount="indefinite"
-                />
-              </circle>
-            );
-          })}
-
         </g>
       </svg>
-      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90 pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/9 pointer-events-none" />
     </div>
   );
 }
diff --git a/components/home/MeetTheTeam.tsx b/components/home/MeetTheTeam.tsx
index 6682f84c..d1b8b8f3 100644
--- a/components/home/MeetTheTeam.tsx
+++ b/components/home/MeetTheTeam.tsx
@@ -11,43 +11,53 @@ export default function MeetTheTeam() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/DSC08036-Large.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/DSC08036-Large.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl text-white animate-slide-up">
           <Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
             <span className="text-white">{t('title')}</span>
           </Heading>
-          
+
           <div className="relative mb-12">
             <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
             <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
               "{t('description')}"
             </p>
           </div>
-          
+
           <div className="flex flex-wrap gap-8 items-center">
             <Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
               {t('cta')}
               <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
             </Button>
-            
+
             <div className="flex items-center gap-4">
               <div className="flex -space-x-4">
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07768-Large.webp"
+                    alt={teamT('michael.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07963-Large.webp"
+                    alt={teamT('klaus.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
               </div>
               <span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">
diff --git a/components/home/ProductCategories.tsx b/components/home/ProductCategories.tsx
index faac7ff1..e67e9f6b 100644
--- a/components/home/ProductCategories.tsx
+++ b/components/home/ProductCategories.tsx
@@ -9,62 +9,74 @@ export default function ProductCategories() {
   const locale = useLocale();
 
   const categories = [
-    { 
-      title: t('categories.lowVoltage.title'), 
+    {
+      title: t('categories.lowVoltage.title'),
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/low-voltage-cables`
+      href: `/${locale}/products/low-voltage-cables`,
     },
-    { 
-      title: t('categories.mediumVoltage.title'), 
+    {
+      title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/medium-voltage-cables`
+      href: `/${locale}/products/medium-voltage-cables`,
     },
-    { 
-      title: t('categories.highVoltage.title'), 
+    {
+      title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/high-voltage-cables`
+      href: `/${locale}/products/high-voltage-cables`,
     },
-    { 
-      title: t('categories.solar.title'), 
+    {
+      title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/solar-cables`
-    }
+      href: `/${locale}/products/solar-cables`,
+    },
   ];
 
   return (
     <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
-          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0">
-            <Image 
-              src={category.img} 
+          <Link
+            key={idx}
+            href={category.href}
+            className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0"
+          >
+            <Image
+              src={category.img}
               alt={category.title}
               fill
               className="object-cover transition-transform duration-1000 group-hover:scale-110"
               sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
-              unoptimized
             />
             <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
             <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
               <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
                 <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
-                  <Image src={category.icon} alt="" width={40} height={40} className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert" unoptimized />
+                  <Image
+                    src={category.icon}
+                    alt=""
+                    width={40}
+                    height={40}
+                    className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert"
+                  />
                 </div>
-                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
+                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">
+                  {category.title}
+                </h3>
                 <p className="text-white/80 text-sm md:text-base line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
                   {category.desc}
                 </p>
               </div>
               <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
-                {t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
+                {t('exploreCategory')}{' '}
+                <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
               </div>
             </div>
           </Link>
diff --git a/components/home/RecentPosts.tsx b/components/home/RecentPosts.tsx
index d7cdb886..95e25319 100644
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -43,7 +43,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                       alt={post.frontmatter.title}
                       fill
                       className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                      unoptimized
+                      sizes="(max-width: 768px) 100vw, 33vw"
                     />
                     <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     {post.frontmatter.category && (