{"id":1556,"date":"2025-08-27T15:22:42","date_gmt":"2025-08-27T15:22:42","guid":{"rendered":"https:\/\/palmetto.com\/local\/?page_id=1556"},"modified":"2025-08-27T23:39:12","modified_gmt":"2025-08-27T23:39:12","slug":"peak-sun-hours","status":"publish","type":"page","link":"https:\/\/palmetto.com\/local\/peak-sun-hours\/","title":{"rendered":"Peak Sun Hours"},"content":{"rendered":"\n    <style>\n        :root {\n            --color-brand-grey-50: var(--grey-50, #fbfbf7);\n            --color-brand-greengrey: var(--greengrey, #E0E8C7);\n            --color-brand-green: var(--green, #DAF3A7);\n            --color-brand-grey-100: var(--grey-100, #ecf0e4);\n            --color-brand-grey-200: var(--grey-200, #cbd5d0);\n            --color-brand-grey-300: var(--grey-300, #a7b1b0);\n            --color-brand-grey-400: var(--grey-400, #819087);\n            --color-brand-grey-500: var(--grey-500, #65776d);\n            --color-brand-grey-600: var(--grey-600, #4a5951);\n            --color-brand-grey-700: var(--grey-700, #313e37);\n            --color-brand-grey-800: var(--grey-800, #28332d);\n            --color-brand-grey-900: var(--grey-900, #1f2723);\n            --color-brand-grey-lighter: var(--grey-150, #dae3d8);\n            --color-brand-primary-400: var(--palmetto-400, #f77d67);\n            --color-brand-primary-500: var(--palmetto-500, #f9593b);\n            --color-brand-primary-600: var(--palmetto-600, #df3a1c);\n            --color-brand-primary-base: var(--palmetto-500, #f9593b);\n            --color-brand-primary-light: var(--palmetto-300, #ffb493);\n            --color-brand-primary-lighter: var(--palmetto-200, #ffccb5);\n            --color-brand-primary-dark: var(--palmetto-700, #952a18);\n            --color-brand-primary-darker: var(--palmetto-800, #611d11);\n            --color-brand-secondary-50: var(--volt-50, #f5f5fd);\n            --color-brand-secondary-200: var(--volt-200, #c5abfd);\n            --color-brand-secondary-400: var(--volt-400, #9469f2);\n            --color-brand-secondary-500: var(--volt-500, #815ed5);\n            --color-brand-secondary-light: var(--volt-300, #ad8bf5);\n            --color-brand-danger-600: var(--red-600, #a61515);\n            --color-brand-danger-700: var(--red-700, #881616);\n            --color-brand-danger-800: var(--red-800, #4f0104);\n            --color-brand-dark-500: var(--lumen-800, #323a25);\n            --color-brand-dark-base: var(--lumen-800, #323a25);\n            --color-brand-light-base: var(--grey-100, #ecf0e4);\n            --color-brand-black-500: var(--mono-black, #000);\n            --color-brand-white-500: var(--mono-white, #fff);\n            --color-brand-white-base:var(--mono-white, #fff);\n            --color-text-white:var(--mono-white, #fff);\n            --color-text-black:var(--almostblack, #1D2320);\n            --font-family-body: Saans, -apple-system, BlinkMacSystemFont, 'avenir next', 'avenir', 'helvetica neue', 'helvetica', 'Ubuntu', 'roboto', 'noto', 'segoe ui', arial, sans-serif;\n            --font-family-brand: ABC Solar Display, 'Helvetica', Arial, sans-serif;\n            --font-weight-regular: 400;\n            --font-weight-medium: 500;\n            --font-weight-bold: 700;\n            --size-border-radius-md: 8px;\n            --size-border-radius-lg: 16px;\n            --size-spacing-2xs: 0.25rem;\n            --size-spacing-xs: 0.5rem;\n            --size-spacing-sm: 0.75rem;\n            --size-spacing-md: 1rem;\n            --size-spacing-lg: 1.5rem;\n            --size-spacing-xl: 2rem;\n            --size-spacing-4xl: 4rem;\n            --size-font-sm: 0.875rem;\n            --size-font-md: 1rem;\n            --size-font-lg: 1.25rem;\n            --size-font-xl: 1.5rem;\n            --size-font-2xl: 2.25rem;\n            --size-font-3xl: 3.75rem;\n            --shadow-sm: 0 2px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0,0,0,0.1);\n            --shadow-lg: 0 10px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.06);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: var(--font-family-body);\n            background: var(--color-brand-grey-50);\n            color: var(--color-text-black);\n            line-height: 1.6;\n        }\n\n\n        .container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 60px 20px;\n        }\n\n        .controls-section {\n            background: white;\n            border-radius: 24px;\n            padding: 30px;\n            margin-bottom: 40px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n        }\n\n        .controls-header {\n            font-family: var(--font-family-brand);\n            font-size: 32px;\n            margin-bottom: 25px;\n            color: var(--color-text-black);\n        }\n\n        .city-selector {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin-bottom: 30px;\n        }\n\n        .city-chip {\n            padding: 12px 20px;\n            border-radius: 24px;\n            border: 2px solid var(--color-brand-grey-100);\n            background: white;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            font-weight: 500;\n        }\n\n        .city-chip:hover {\n            border-color: var(--color-brand-primary-500);\n            transform: translateY(-2px);\n        }\n\n        .city-chip.selected {\n            background: var(--color-brand-primary-500);\n            color: white;\n            border-color: var(--color-brand-primary-500);\n        }\n\n        .view-controls {\n            display: flex;\n            gap: 15px;\n            align-items: center;\n            flex-wrap: wrap;\n        }\n\n        .view-btn {\n            padding: 10px 24px;\n            border-radius: 12px;\n            border: none;\n            background: var(--color-brand-green);\n            cursor: pointer;\n            font-weight: 600;\n            transition: all 0.2s;\n            font-size: 24px;\n        }\n\n        .view-btn:hover {\n            background: var(--color-brand-greengrey);\n        }\n\n        .view-btn.active {\n            background: var(--color-text-black);\n            color: white;\n        }\n\n\n        \/* Comparison Grid View *\/\n        .comparison-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 25px;\n            margin-top: 40px;\n        }\n\n        .city-card {\n            background: white;\n            border-radius: 24px;\n            padding: 25px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n            transition: transform 0.3s ease;\n        }\n\n        .city-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 8px 20px rgba(0,0,0,0.12);\n        }\n\n        .city-name {\n            font-family: var(--font-family-brand);\n            font-size: 28px;\n            margin-bottom: 5px;\n        }\n\n        .state-name {\n            color: #666;\n            font-size: 14px;\n            margin-bottom: 20px;\n        }\n\n        .annual-total {\n            background: var(--color-brand-green);\n            border-radius: 16px;\n            padding: 20px;\n            text-align: center;\n            margin-bottom: 20px;\n        }\n\n        .annual-label {\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            opacity: 0.7;\n        }\n\n        .annual-value {\n            font-family: var(--font-family-brand);\n            font-size: 36px;\n            font-weight: bold;\n            color: var(--color-text-black);\n        }\n\n        .monthly-bars {\n            position: relative;\n            height: 150px;\n            margin: 20px 0;\n        }\n\n        .bars-container {\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-end;\n            height: 100%;\n            padding: 0 5px;\n            position: relative;\n        }\n\n        \/* Y-axis scale indicators *\/\n        .y-axis-scale {\n            position: absolute;\n            left: -15px;\n            top: 0;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            font-size: 10px;\n            color: #999;\n        }\n\n        .y-axis-label {\n            line-height: 1;\n        }\n\n        .bar {\n            flex: 1;\n            margin: 0 1px;\n            background: linear-gradient(to top, var(--color-brand-secondary-500), #a583e5);\n            border-radius: 4px 4px 0 0;\n            position: relative;\n            transition: all 0.3s ease;\n            cursor: pointer;\n        }\n\n        .bar:hover {\n            filter: brightness(1.1);\n            transform: scaleY(1.05);\n        }\n\n        .bar-tooltip {\n            display: none;\n            position: absolute;\n            bottom: 100%;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(0,0,0,0.9);\n            color: white;\n            padding: 5px 10px;\n            border-radius: 6px;\n            font-size: 12px;\n            white-space: nowrap;\n            z-index: 100;\n            margin-bottom: 5px;\n        }\n\n        .bar:hover .bar-tooltip {\n            display: block;\n        }\n\n        .month-labels {\n            display: flex;\n            justify-content: space-between;\n            padding: 0 5px;\n            margin-top: 10px;\n        }\n\n        .month-label {\n            font-size: 10px;\n            color: #999;\n            flex: 1;\n            text-align: center;\n        }\n\n        \/* Heat Map View *\/\n        .heatmap-container {\n            background: white;\n            border-radius: 24px;\n            padding: 30px;\n            margin-top: 40px;\n            overflow-x: auto;\n        }\n\n        .heatmap-table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        .heatmap-table th {\n            font-family: var(--font-family-brand);\n            background: var(--color-text-black);\n            color: white;\n            padding: 15px 10px;\n            text-align: center;\n            position: sticky;\n            top: 0;\n        }\n\n        .heatmap-table td {\n            padding: 10px;\n            text-align: center;\n            border: 1px solid #f0f0f0;\n            position: relative;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .heatmap-table tr:hover td {\n            background: rgba(249, 89, 59, 0.05) !important;\n        }\n\n        .city-label {\n            font-weight: 600;\n            background: var(--color-brand-grey-100);\n            text-align: left;\n            padding-left: 20px;\n        }\n\n        .heat-cell {\n            font-weight: 600;\n            color: white;\n        }\n\n        \/* Rankings Section - Always Visible *\/\n        .rankings-section {\n            margin-top: 60px;\n        }\n\n        .rankings-container {\n            background: white;\n            border-radius: 24px;\n            padding: 30px;\n        }\n\n        .rankings-header {\n            font-family: var(--font-family-brand);\n            font-size: 48px;\n            margin-bottom: 30px;\n            text-align: center;\n        }\n\n        .rankings-subtitle {\n            text-align: center;\n            color: #666;\n            margin-bottom: 30px;\n            font-size: 18px\n            ;\n        }\n\n        .intro-section {\n            background: white;\n            border-radius: 24px;\n            padding: 40px;\n            margin-bottom: 40px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n        }\n\n        .intro-header {\n            font-family: var(--font-family-brand);\n            font-size: 28px;\n            margin-bottom: 20px;\n            color: var(--color-text-black);\n        }\n\n        .intro-content {\n            font-size: 16px;\n            line-height: 1.7;\n            color: #555;\n            margin-bottom: 15px;\n        }\n\n        .intro-highlight {\n            background: var(--color-brand-green);\n            padding: 20px;\n            border-radius: 12px;\n            margin-top: 20px;\n            border-left: 4px solid var(--color-brand-primary-500);\n        }\n\n        .intro-highlight p {\n            margin: 0;\n            font-weight: 500;\n            color: var(--color-text-black);\n        }\n\n        .rankings-table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        .rankings-table th {\n            font-family: var(--font-family-brand);\n            background: var(--color-text-black);\n            color: white;\n            padding: 15px;\n            text-align: left;\n        }\n\n        .rankings-table td {\n            padding: 15px;\n            border-bottom: 1px solid #f0f0f0;\n        }\n\n        .rankings-table tr:hover {\n            background: rgba(249, 89, 59, 0.03);\n        }\n\n        .rank-cell {\n            font-size: 24px;\n            font-weight: bold;\n            text-align: center;\n        }\n\n        .city-link {\n            color: var(--color-brand-secondary-500);\n            text-decoration: none;\n            font-weight: bold;\n            transition: all 0.2s ease;\n        }\n\n        .city-link:hover {\n            text-decoration: underline;\n            color: var(--color-brand-primary-500);\n        }\n\n        \/* Stats Summary *\/\n        .stats-summary {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 20px;\n            margin-top: 40px;\n        }\n\n        .stat-card {\n            background: var(--color-brand-greengrey);\n            border-radius: 16px;\n            padding: 25px;\n            text-align: center;\n        }\n\n        .stat-value {\n            font-family: var(--font-family-brand);\n            font-size: 48px;\n            color: var(--color-text-black);\n            margin-bottom: 5px;\n        }\n\n        .stat-label {\n            font-size: 14px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            opacity: 0.7;\n        }\n\n        .stat-detail {\n            font-size: 16px;\n            margin-top: 10px;\n            font-weight: 500;\n        }\n\n        .data-source-section {\n            background: white;\n            border-radius: 24px;\n            padding: 40px;\n            margin-bottom: 40px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n        }\n\n        .data-source-header {\n            font-family: var(--font-family-brand);\n            font-size: 28px;\n            margin-bottom: 20px;\n            color: var(--color-text-black);\n        }\n\n        .data-source-content {\n            font-size: 16px;\n            line-height: 1.7;\n            color: #555;\n            margin-bottom: 15px;\n        }\n\n        .data-source-highlight {\n            background: var(--color-brand-green);\n            padding: 20px;\n            border-radius: 12px;\n            margin-top: 20px;\n            border-left: 4px solid var(--color-brand-primary-500);\n        }\n\n        .data-source-highlight p {\n            margin: 0;\n            font-weight: 500;\n            color: var(--color-text-black);\n        }\n\n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .hero-title {\n                font-size: 48px;\n            }\n            \n            .comparison-grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .heatmap-container,\n            .rankings-container {\n                overflow-x: scroll;\n            }\n            \n            .heatmap-table,\n            .rankings-table {\n                min-width: 800px;\n            }\n            \n            \/* Mobile styling for city selector and chips *\/\n            .controls-section {\n                padding: 20px;\n                margin-bottom: 30px;\n            }\n            \n            .controls-header {\n                font-size: 24px;\n                margin-bottom: 20px;\n                text-align: center;\n            }\n            \n            .city-selector {\n                gap: 10px;\n                margin-bottom: 25px;\n                justify-content: center;\n            }\n            \n            .city-chip {\n                padding: 10px 16px;\n                font-size: 14px;\n                border-radius: 20px;\n                min-width: fit-content;\n                text-align: center;\n                flex: 0 0 auto;\n            }\n            \n            .view-controls {\n                justify-content: center;\n                gap: 10px;\n            }\n            \n            .view-btn {\n                padding: 8px 16px;\n                font-size: 16px;\n                flex: 1;\n                max-width: 120px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .container {\n                padding: 20px 15px;\n            }\n            \n            .controls-section {\n                padding: 15px;\n                margin-bottom: 20px;\n            }\n            \n            .controls-header {\n                font-size: 20px;\n                margin-bottom: 15px;\n            }\n            \n            .city-selector {\n                gap: 8px;\n                margin-bottom: 20px;\n            }\n            \n            .city-chip {\n                padding: 8px 12px;\n                font-size: 13px;\n                border-radius: 16px;\n                white-space: nowrap;\n            }\n            \n            .view-controls {\n                flex-direction: column;\n                gap: 8px;\n            }\n            \n            .view-btn {\n                padding: 10px 16px;\n                font-size: 14px;\n                width: 100%;\n                max-width: none;\n            }\n        }\n    <\/style>\n\n<style>\n.palmetto-location-header * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n.palmetto-location-header {\n    position: relative;\n    max-width:1360px;\n    border-radius: 48px;\n    margin:0 auto;\n    overflow: hidden;\n    color: var(--color-text-body-primary);\n    line-height: 1.5;\n}\n\n.palmetto-location-container {\n    background-image: url(\"https:\/\/images.prismic.io\/palmettoblog\/Z_1BzuvxEdbNPBzo_red-state-solar-installations.jpg?auto=format,compress&rect=0,0,1200,800&w=1200&h=800\");\n    background-size: cover;\n    background-position: center;\n    margin: 0 auto;\n    padding: var(--size-spacing-xl);\n    display: flex;\n    flex-direction: column;\n}\n\n.palmetto-location-bottom-band {\n    background: #ECF0E4;\n    display:grid;\n    grid-template-columns: 375px 1fr;\n    padding:40px;\n}\n\n.palmetto-location-content-card {\n    display: grid;\n    grid-template-columns: 1fr 500px;\n    padding:0 85px;\n    width: 100%;\n    margin: 70px 0;\n    overflow: hidden;\n}\n\n.palmetto-location-left-panel {\n    display: flex;\n    flex-direction: column;\n    color: var(--color-text-white);\n}\n\n.palmetto-location-info {\n    background-color: var(--color-background-primary);\n    margin-bottom: var(--size-spacing-med);\n}\n\n.palmetto-location-branding {\n    color: var(--color-text-primary);\n    text-transform: uppercase;\n    font-size: var(--size-font-sm);\n    font-weight: var(--font-weight-bold);\n    letter-spacing: 1px;\n    margin-bottom: var(--size-spacing-xs);\n}\n\n.palmetto-location-title {\n    font-family: var(--font-family-brand);\n    font-size: 160px;\n    font-weight: var(--font-weight-bold);\n    color: var(--color-text-contrast);\n    margin-bottom: var(--size-spacing-sm);\n    line-height: 1;\n}\n\n.palmetto-location-subtitle {\n    font-family: var(--font-family-brand);\n    font-size: calc(var(--size-font-2xl) + 0.25rem);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-text-contrast);\n    margin-bottom: var(--size-spacing-md);\n    line-height: 1.2;\n}\n\n.palmetto-location-authors {\n    display: flex;\n    align-items: center; \n}\n\n.palmetto-author-avatars {\n    display: flex;\n    margin-right: var(--size-spacing-sm);\n}\n\n.palmetto-author-avatar {\n    width: 64px;\n    height: 64px;\n    border-radius: 16px;\n    overflow: hidden;\n    position: relative;\n}\n\n.palmetto-author-avatar:nth-child(2) {\n    margin-left: -12px;\n}\n\n.palmetto-author-avatar img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.palmetto-author-details {\n    font-size: var(--size-font-sm);\n    color: var(--color-text-body-secondary);\n    line-height: 1.4;\n}\n\n.palmetto-author-name {\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text-contrast);\n}\n\n.palmetto-trust-badge {\n    display: flex;\n    align-items: center;\n}\n\n.palmetto-trust-badge-icon {\n    width: 64px;\n    height: 64px;\n    margin-right: var(--size-spacing-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.palmetto-trust-badge-text {\n    flex: 1;\n}\n\n.palmetto-trust-badge-title {\n    font-size: var(--size-font-sm);\n    font-weight: var(--font-weight-bold);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--color-text-primary);\n    margin-bottom: var(--size-spacing-2xs);\n}\n\n.palmetto-trust-badge-description {\n    font-size: var(--size-font-sm);\n    color: var(--color-text-primary);\n    line-height: 1.3;\n}\n\n\n@media (max-width: 1200px) {\n    .palmetto-location-content-card { padding:0; }\n}\n\n@media (max-width: 992px) {\n    \n    .palmetto-location-title { \n        font-size:100px; \n    }\n\n    .palmetto-location-header {\n        background-size: auto;\n        background-position: center -80px;\n        background-repeat: no-repeat;\n        background-color: #5191D3;\n    }\n\n    .palmetto-location-content-card {\n        grid-template-columns: 1fr 1fr;\n        margin: 48px 0;\n        padding:0 48px;\n        max-width: 100%;\n    }\n\n    .palmetto-location-left-panel {\n        width: 100%;\n        min-width: unset;\n    }\n\n}\n\n@media (max-width: 768px) {\n    .palmetto-location-bottom-band {\n        grid-template-columns: 1fr 1fr;\n    }\n    \n    \n    .palmetto-location-container {\n        padding: 0;\n    }\n    \n    .palmetto-location-content-card {\n        grid-template-columns: 1fr;\n        border-radius: 0;\n    }\n    \n    .palmetto-location-title {\n        font-size: 64px;\n    }\n\n    .palmetto-location-subtitle {\n        font-size: var(--size-font-2xl);\n        margin-bottom: var(--size-spacing-md);\n    }\n    \n    .palmetto-trust-badge {\n        margin-top: var(--size-spacing-sm);\n        padding-top: var(--size-spacing-sm);\n    }\n}\n\n@media (max-width: 576px) {\n    \n    .palmetto-location-header {\n        background-image: none;\n        width:calc(100% - 32px);\n    }\n    \n    .palmetto-location-container {\n        margin-top: 0;\n    }\n\n    .palmetto-location-content-card {\n        margin-top: 1rem;\n        padding:32px 20px;\n    }\n    \n    .palmetto-location-bottom-band {\n        grid-template-columns: 1fr;\n        padding: 40px;\n    }\n\n}\n\n\n<\/style>\n<header class=\"palmetto-location-header\">\n    <div class=\"palmetto-location-container\">\n\n        <div class=\"palmetto-location-content-card\">\n\n        <div class=\"palmetto-location-left-panel\">\n            <div class=\"palmetto-location-info\">\n            <h1 class=\"palmetto-location-title\">Peak Sun Hours<\/h1>\n            <div class=\"palmetto-location-subtitle\">Solar Irradiance across the US<\/div>\n        <\/div>\n        <\/div>\n\n\n    <\/div>\n\n    <\/div>\n    <div class=\"palmetto-location-bottom-band\">\n\n    <div class=\"palmetto-location-authors\">\n    <div class=\"palmetto-author-avatars\">\n        <div class=\"palmetto-author-avatar\">\n        <img decoding=\"async\" src=\"https:\/\/palmettosolar.blob.core.windows.net\/editors\/nathan-healy.jpeg\" alt=\"Nathan Healy\">\n        <\/div>\n    <\/div>\n    <div class=\"palmetto-author-details\">\n        <div>Written by <span class=\"palmetto-author-name\">Nathan Healy<\/span><\/div>\n        <div>Updated: with PV Watts 2025 Data<\/div>\n    <\/div>\n    <\/div>\n\n    <div class=\"palmetto-trust-badge\">\n    <div class=\"palmetto-trust-badge-icon\">\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <g clip-path=\"url(#clip0_164_5)\">\n        <path d=\"M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z\" fill=\"#611D11\"\/>\n        <mask id=\"mask0_164_5\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"64\" height=\"64\">\n        <path d=\"M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z\" fill=\"white\"\/>\n        <\/mask>\n        <g mask=\"url(#mask0_164_5)\">\n        <path d=\"M66.2648 24.4403C66.2648 42.3604 48.4509 51.3733 29.0463 51.3733C24.8007 51.3733 21.1971 51.0809 17.9314 50.4547L17.5334 51.0551C11.8075 59.6442 8.30831 61.3405 4.49087 61.3405C-0.70495 61.3405 -5.47631 56.8871 1.73383 46.1775L11.9134 31.1204C19.548 19.8807 28.6671 16.9116 34.0747 16.9116C37.8922 16.9116 38.7405 19.0324 36.3014 22.7437L25.8583 38.497C26.5625 38.5286 27.2995 38.5429 28.0921 38.5429C39.6497 38.5429 49.7231 33.5592 49.7231 24.9704C49.7231 17.442 41.0284 12.8824 28.516 12.8824C11.0207 12.8824 -3.30448 22.3195 -3.30448 29.212C-3.30448 32.7109 0.239754 33.3471 0.239754 36.7404C0.239754 39.4974 -2.39321 43.1025 -8.26647 43.1025C-15.76 43.1025 -21.6333 38.0129 -21.6333 29.9541C-21.6333 12.4582 3.07671 -0.160095 28.516 -0.160095C51.2077 -0.160095 66.2648 9.38322 66.2648 24.4403Z\" fill=\"#F2492C\"\/>\n        <\/g>\n        <\/g>\n        <defs>\n        <clipPath id=\"clip0_164_5\">\n        <rect width=\"64\" height=\"64\" fill=\"white\"\/>\n        <\/clipPath>\n        <\/defs>\n        <\/svg>\n    <\/div>\n    <div class=\"palmetto-trust-badge-text\">\n        <div class=\"palmetto-trust-badge-title\">Quality Solar Solutions Since 2011<\/div>\n        <div class=\"palmetto-trust-badge-description\">Palmetto has served 20,000+ customers across 31 states with an approval rating over 85%.<\/div>\n    <\/div>\n    <\/div>\n\n    <\/div>\n<\/header>\n\n\n    <div class=\"container\">\n        <div class=\"intro-section\">\n            <h2 class=\"intro-header\">Understanding Peak Sun Hours<\/h2>\n\n            <p class=\"intro-content\">\n                I get asked all the time, <strong>&#8220;How much solar energy can I expect to produce in my area?&#8221;<\/strong> and <strong>&#8220;How sunny is my area?&#8221;<\/strong>\n            <\/p>\n\n            <p class=\"intro-content\">\n                We answer that question with Peak Sun Hours. <strong>Peak Sun Hours is the technical term we use to describe the amount of sunlight a location receives. It&#8217;s not just the number of hours between sunrise and sunset, but it takes into account cloud cover, weather patterns, and more.<\/strong>\n            <\/p>\n            \n            <p class=\"intro-content\">\n                The super technical definition is that it&#8217;s the number of hours of sunlight at 1,000 watts per square meter (1 kW\/m\u00b2) \u2013 the standard testing condition for rating solar panels.\n            <\/p>\n            \n            <p class=\"intro-content\">\n                Throughout the day, sunlight intensity varies dramatically. Early morning and late evening provide lower intensity (200-500 W\/m\u00b2), while midday can exceed 1,000 W\/m\u00b2 in ideal conditions. Peak sun hours aggregate all this varying sunlight into equivalent hours at peak intensity. For example, receiving 500 W\/m\u00b2 for 2 hours equals 1 peak sun hour (500 \u00d7 2 = 1,000).\n            <\/p>\n\n            <p class=\"intro-content\">\n                Of course, sunlight varies dramatically by time of year and location.  You&#8217;ll really enjoy using our interactive tool below to see how your region compares to others.  For example, Phoenix, Arizona produces 35% more solar energy than Chicago, Illinois.\n            <\/p>\n\n            <div class=\"intro-highlight\">\n                <p><strong>How to Read This Data:<\/strong> The grid below shows the total solar energy production per month for a 10kW system in each city. This monthly energy production directly correlates to the peak sun hours available in that location. Higher monthly energy values indicate more peak sun hours and better solar potential for your investment.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"controls-section\">\n            <h2 class=\"controls-header\">Select Cities to Compare<\/h2>\n            \n            <div class=\"city-selector\" id=\"citySelector\">\n            <\/div>\n\n            <div class=\"view-controls\">\n                <button class=\"view-btn active\" onclick=\"setView('grid')\">Grid View<\/button>\n                <button class=\"view-btn\" onclick=\"setView('heatmap')\">Heat Map<\/button>\n                \n            <\/div>\n        <\/div>\n\n        <div id=\"displayArea\">\n        <\/div>\n\n        <div class=\"rankings-section\">\n            <div class=\"rankings-container\">\n                <h2 class=\"rankings-header\">Solar Production Rankings<\/h2>\n                <p class=\"rankings-subtitle\">Annual production for 10kW systems across all service areas<\/p>\n                <div id=\"rankingsTable\">\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"data-source-section\" style=\"margin-top: 60px;\">\n            <h2 class=\"data-source-header\">Data Source: NREL&#8217;s PVWatts Database<\/h2>\n            \n            <p class=\"data-source-content\">\n                All solar irradiance and energy production data displayed in this tool comes from the <a href=\"https:\/\/pvwatts.nrel.gov\" target=\"_blank\" style=\"color: var(--color-brand-primary-500); text-decoration: none;\" rel=\"noopener\">National Renewable Energy Laboratory&#8217;s (NREL) PVWatts database<\/a>. This comprehensive database takes into account numerous climate factors that affect solar energy production, including local weather patterns, atmospheric conditions, temperature variations, and seasonal changes.\n            <\/p>\n            \n            <p class=\"data-source-content\">\n                The PVWatts system uses decades of meteorological data and sophisticated modeling to provide accurate estimates of solar potential across thousands of locations. This ensures that the peak sun hours and energy production figures you see reflect real-world conditions rather than theoretical maximums, giving you reliable data for making informed solar investment decisions.\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <script>\n        const cities = [\n            {city: 'Charlotte', state: 'NC', abbr: 'NC', slug: 'charlotte', stateslug: 'north-carolina'},\n            {city: 'Phoenix', state: 'AZ', abbr: 'AZ', slug: 'phoenix', stateslug: 'arizona'},\n            {city: 'Mesa', state: 'AZ', abbr: 'AZ', slug: 'mesa', stateslug: 'arizona'},\n            {city: 'Los Angeles', state: 'CA', abbr: 'CA', slug: 'los-angeles', stateslug: 'california'},\n            {city: 'San Diego', state: 'CA', abbr: 'CA', slug: 'san-diego', stateslug: 'california'},\n            {city: 'San Francisco', state: 'CA', abbr: 'CA', slug: 'san-francisco', stateslug: 'california'},\n            {city: 'San Jose', state: 'CA', abbr: 'CA', slug: 'san-jose', stateslug: 'california'},\n            {city: 'Sacramento', state: 'CA', abbr: 'CA', slug: 'sacramento', stateslug: 'california'},\n            {city: 'Miami', state: 'FL', abbr: 'FL', slug: 'miami', stateslug: 'florida'},\n            {city: 'Tampa', state: 'FL', abbr: 'FL', slug: 'tampa', stateslug: 'florida'},\n            {city: 'Orlando', state: 'FL', abbr: 'FL', slug: 'orlando', stateslug: 'florida'},\n            {city: 'Jacksonville', state: 'FL', abbr: 'FL', slug: 'jacksonville', stateslug: 'florida'},\n            {city: 'Denver', state: 'CO', abbr: 'CO', slug: 'denver', stateslug: 'colorado'},\n            {city: 'Atlanta', state: 'GA', abbr: 'GA', slug: 'atlanta', stateslug: 'georgia'},\n            {city: 'Boston', state: 'MA', abbr: 'MA', slug: 'boston', stateslug: 'massachusetts'},\n            {city: 'Austin', state: 'TX', abbr: 'TX', slug: 'austin', stateslug: 'texas'},\n            {city: 'Houston', state: 'TX', abbr: 'TX', slug: 'houston', stateslug: 'texas'},\n            {city: 'Dallas', state: 'TX', abbr: 'TX', slug: 'dallas', stateslug: 'texas'},\n            {city: 'San Antonio', state: 'TX', abbr: 'TX', slug: 'san-antonio', stateslug: 'texas'},\n            {city: 'Chicago', state: 'IL', abbr: 'IL', slug: 'chicago', stateslug: 'illinois'},\n            {city: 'New York', state: 'NY', abbr: 'NY', slug: 'new-york', stateslug: 'new-york'},\n            {city: 'Philadelphia', state: 'PA', abbr: 'PA', slug: 'philadelphia', stateslug: 'pennsylvania'},\n            {city: 'Pittsburgh', state: 'PA', abbr: 'PA', slug: 'pittsburgh', stateslug: 'pennsylvania'},\n            {city: 'Richmond', state: 'VA', abbr: 'VA', slug: 'richmond', stateslug: 'virginia'},\n            {city: 'Charleston', state: 'SC', abbr: 'SC', slug: 'charleston', stateslug: 'south-carolina'},\n            {city: 'Columbia', state: 'SC', abbr: 'SC', slug: 'columbia', stateslug: 'south-carolina'},\n            {city: 'Raleigh', state: 'NC', abbr: 'NC', slug: 'raleigh', stateslug: 'north-carolina'},\n            {city: 'Durham', state: 'NC', abbr: 'NC', slug: 'durham', stateslug: 'north-carolina'},\n            {city: 'Portland', state: 'ME', abbr: 'ME', slug: 'portland', stateslug: 'maine'},\n            {city: 'New Haven', state: 'CT', abbr: 'CT', slug: 'new-haven', stateslug: 'connecticut'},\n            {city: 'Providence', state: 'RI', abbr: 'RI', slug: 'providence', stateslug: 'rhode-island'},\n            {city: 'Newark', state: 'NJ', abbr: 'NJ', slug: 'newark', stateslug: 'new-jersey'},\n            {city: 'Baltimore', state: 'MD', abbr: 'MD', slug: 'baltimore', stateslug: 'maryland'},\n            {city: 'Columbus', state: 'OH', abbr: 'OH', slug: 'columbus', stateslug: 'ohio'},\n            {city: 'Cincinnati', state: 'OH', abbr: 'OH', slug: 'cincinnati', stateslug: 'ohio'},\n            {city: 'Cleveland', state: 'OH', abbr: 'OH', slug: 'cleveland', stateslug: 'ohio'},\n            {city: 'Detroit', state: 'MI', abbr: 'MI', slug: 'detroit', stateslug: 'michigan'}\n        ];\n\n        const sampleData = {\n            'Charlotte-NC': {'Jan': 31.5, 'Feb': 32.7, 'Mar': 40.4, 'Apr': 43.8, 'May': 46.0, 'Jun': 46.8, 'Jul': 45.3, 'Aug': 41.2, 'Sep': 41.2, 'Oct': 38.4, 'Nov': 33.1, 'Dec': 27.6, 'annual': 14276}, \n            'Phoenix-AZ': {'Jan': 38.3, 'Feb': 42.2, 'Mar': 50.0, 'Apr': 57.4, 'May': 58.3, 'Jun': 57.9, 'Jul': 50.8, 'Aug': 49.9, 'Sep': 49.6, 'Oct': 45.6, 'Nov': 41.2, 'Dec': 37.8, 'annual': 17662}, \n            'Mesa-AZ': {'Jan': 37.6, 'Feb': 42.3, 'Mar': 50.3, 'Apr': 56.4, 'May': 58.2, 'Jun': 57.1, 'Jul': 49.3, 'Aug': 50.3, 'Sep': 49.1, 'Oct': 45.7, 'Nov': 41.3, 'Dec': 37.9, 'annual': 17551}, \n            'Los Angeles-CA': {'Jan': 35.6, 'Feb': 38.0, 'Mar': 45.6, 'Apr': 52.0, 'May': 49.7, 'Jun': 54.6, 'Jul': 55.6, 'Aug': 56.2, 'Sep': 50.9, 'Oct': 43.5, 'Nov': 38.7, 'Dec': 32.4, 'annual': 16861}, \n            'San Diego-CA': {'Jan': 34.7, 'Feb': 37.1, 'Mar': 46.2, 'Apr': 49.6, 'May': 46.2, 'Jun': 49.3, 'Jul': 51.0, 'Aug': 51.7, 'Sep': 47.2, 'Oct': 41.9, 'Nov': 37.6, 'Dec': 33.4, 'annual': 16045}, \n            'San Francisco-CA': {'Jan': 27.2, 'Feb': 34.9, 'Mar': 44.1, 'Apr': 53.9, 'May': 54.9, 'Jun': 55.7, 'Jul': 53.4, 'Aug': 48.7, 'Sep': 47.2, 'Oct': 39.4, 'Nov': 29.5, 'Dec': 25.7, 'annual': 15693}, \n            'San Jose-CA': {'Jan': 26.2, 'Feb': 35.1, 'Mar': 43.9, 'Apr': 49.6, 'May': 54.8, 'Jun': 58.7, 'Jul': 60.5, 'Aug': 57.5, 'Sep': 51.0, 'Oct': 43.5, 'Nov': 32.3, 'Dec': 26.7, 'annual': 16473}, \n            'Sacramento-CA': {'Jan': 24.0, 'Feb': 34.4, 'Mar': 44.6, 'Apr': 51.6, 'May': 54.1, 'Jun': 59.5, 'Jul': 59.6, 'Aug': 56.6, 'Sep': 52.1, 'Oct': 43.4, 'Nov': 29.3, 'Dec': 23.9, 'annual': 16267}, \n            'Miami-FL': {'Jan': 37.8, 'Feb': 41.7, 'Mar': 49.2, 'Apr': 48.5, 'May': 45.8, 'Jun': 42.1, 'Jul': 44.3, 'Aug': 43.9, 'Sep': 41.6, 'Oct': 40.6, 'Nov': 38.8, 'Dec': 35.4, 'annual': 15539}, \n            'Tampa-FL': {'Jan': 39.4, 'Feb': 41.8, 'Mar': 47.6, 'Apr': 50.5, 'May': 49.5, 'Jun': 43.3, 'Jul': 40.8, 'Aug': 39.9, 'Sep': 42.1, 'Oct': 45.2, 'Nov': 41.6, 'Dec': 35.5, 'annual': 15772}, \n            'Orlando-FL': {'Jan': 37.8, 'Feb': 37.6, 'Mar': 47.2, 'Apr': 49.5, 'May': 49.4, 'Jun': 43.1, 'Jul': 42.7, 'Aug': 43.4, 'Sep': 41.6, 'Oct': 43.4, 'Nov': 37.6, 'Dec': 34.3, 'annual': 15485}, \n            'Jacksonville-FL': {'Jan': 34.7, 'Feb': 35.2, 'Mar': 44.2, 'Apr': 47.6, 'May': 47.5, 'Jun': 42.3, 'Jul': 43.1, 'Aug': 42.8, 'Sep': 39.5, 'Oct': 38.1, 'Nov': 36.0, 'Dec': 30.0, 'annual': 14671}, \n            'Denver-CO': {'Jan': 32.3, 'Feb': 38.6, 'Mar': 47.2, 'Apr': 49.5, 'May': 50.1, 'Jun': 53.4, 'Jul': 51.2, 'Aug': 48.3, 'Sep': 46.9, 'Oct': 39.8, 'Nov': 36.0, 'Dec': 31.0, 'annual': 15992}, \n            'Atlanta-GA': {'Jan': 29.7, 'Feb': 32.9, 'Mar': 38.1, 'Apr': 45.0, 'May': 46.7, 'Jun': 44.1, 'Jul': 43.6, 'Aug': 42.4, 'Sep': 40.4, 'Oct': 38.8, 'Nov': 32.2, 'Dec': 28.1, 'annual': 14093}, \n            'Boston-MA': {'Jan': 26.1, 'Feb': 31.2, 'Mar': 40.2, 'Apr': 41.8, 'May': 45.3, 'Jun': 43.0, 'Jul': 46.5, 'Aug': 42.6, 'Sep': 39.2, 'Oct': 30.9, 'Nov': 23.8, 'Dec': 19.0, 'annual': 13110}, \n            'Austin-TX': {'Jan': 32.8, 'Feb': 32.4, 'Mar': 38.4, 'Apr': 45.0, 'May': 44.7, 'Jun': 47.0, 'Jul': 48.7, 'Aug': 49.7, 'Sep': 43.8, 'Oct': 39.8, 'Nov': 32.5, 'Dec': 32.0, 'annual': 14860}, \n            'Houston-TX': {'Jan': 30.0, 'Feb': 30.3, 'Mar': 41.7, 'Apr': 42.3, 'May': 44.5, 'Jun': 45.0, 'Jul': 45.2, 'Aug': 43.5, 'Sep': 41.1, 'Oct': 39.4, 'Nov': 36.6, 'Dec': 27.8, 'annual': 14261}, \n            'Dallas-TX': {'Jan': 32.5, 'Feb': 34.0, 'Mar': 39.8, 'Apr': 44.5, 'May': 45.9, 'Jun': 50.5, 'Jul': 50.0, 'Aug': 48.7, 'Sep': 45.6, 'Oct': 38.3, 'Nov': 32.8, 'Dec': 31.9, 'annual': 15091}, \n            'San Antonio-TX': {'Jan': 33.3, 'Feb': 32.8, 'Mar': 39.6, 'Apr': 42.3, 'May': 45.6, 'Jun': 47.0, 'Jul': 49.0, 'Aug': 48.8, 'Sep': 43.9, 'Oct': 40.4, 'Nov': 37.6, 'Dec': 31.1, 'annual': 15000}, \n            'Chicago-IL': {'Jan': 21.1, 'Feb': 28.8, 'Mar': 35.1, 'Apr': 42.4, 'May': 44.9, 'Jun': 48.5, 'Jul': 51.2, 'Aug': 44.8, 'Sep': 40.2, 'Oct': 30.2, 'Nov': 23.2, 'Dec': 18.4, 'annual': 13080}, \n            'New York-NY': {'Jan': 25.4, 'Feb': 31.3, 'Mar': 35.8, 'Apr': 41.7, 'May': 44.0, 'Jun': 46.0, 'Jul': 45.7, 'Aug': 41.8, 'Sep': 38.4, 'Oct': 29.9, 'Nov': 23.1, 'Dec': 20.4, 'annual': 12917}, \n            'Philadelphia-PA': {'Jan': 26.0, 'Feb': 32.2, 'Mar': 41.0, 'Apr': 44.2, 'May': 43.9, 'Jun': 46.4, 'Jul': 47.0, 'Aug': 43.7, 'Sep': 38.0, 'Oct': 33.7, 'Nov': 26.1, 'Dec': 23.0, 'annual': 13588}, \n            'Pittsburgh-PA': {'Jan': 20.7, 'Feb': 25.4, 'Mar': 32.7, 'Apr': 38.4, 'May': 43.8, 'Jun': 43.6, 'Jul': 43.9, 'Aug': 39.9, 'Sep': 36.7, 'Oct': 28.7, 'Nov': 21.4, 'Dec': 17.8, 'annual': 11992}, \n            'Richmond-VA': {'Jan': 27.2, 'Feb': 32.3, 'Mar': 39.2, 'Apr': 44.6, 'May': 44.6, 'Jun': 47.2, 'Jul': 44.3, 'Aug': 42.0, 'Sep': 36.2, 'Oct': 35.0, 'Nov': 28.3, 'Dec': 25.2, 'annual': 13607}, \n            'Charleston-SC': {'Jan': 32.9, 'Feb': 37.2, 'Mar': 41.2, 'Apr': 45.2, 'May': 48.2, 'Jun': 46.1, 'Jul': 45.0, 'Aug': 41.8, 'Sep': 40.7, 'Oct': 38.6, 'Nov': 35.1, 'Dec': 27.7, 'annual': 14626}, \n            'Columbia-SC': {'Jan': 32.6, 'Feb': 32.9, 'Mar': 40.1, 'Apr': 46.7, 'May': 45.1, 'Jun': 47.6, 'Jul': 43.7, 'Aug': 45.3, 'Sep': 41.4, 'Oct': 37.4, 'Nov': 34.0, 'Dec': 29.7, 'annual': 14535}, \n            'Raleigh-NC': {'Jan': 31.6, 'Feb': 33.7, 'Mar': 39.9, 'Apr': 45.2, 'May': 44.0, 'Jun': 44.1, 'Jul': 44.4, 'Aug': 41.0, 'Sep': 39.7, 'Oct': 34.2, 'Nov': 33.1, 'Dec': 25.6, 'annual': 13923}, \n            'Durham-NC': {'Jan': 30.3, 'Feb': 32.9, 'Mar': 38.8, 'Apr': 44.3, 'May': 45.6, 'Jun': 46.2, 'Jul': 43.5, 'Aug': 40.5, 'Sep': 38.0, 'Oct': 33.3, 'Nov': 32.5, 'Dec': 28.1, 'annual': 13850}, \n            'Portland-ME': {'Jan': 25.8, 'Feb': 32.4, 'Mar': 40.0, 'Apr': 42.2, 'May': 45.6, 'Jun': 45.9, 'Jul': 45.8, 'Aug': 43.0, 'Sep': 40.3, 'Oct': 29.2, 'Nov': 22.6, 'Dec': 19.8, 'annual': 13193}, \n            'New Haven-CT': {'Jan': 24.1, 'Feb': 29.2, 'Mar': 37.1, 'Apr': 40.5, 'May': 43.0, 'Jun': 44.4, 'Jul': 46.1, 'Aug': 40.8, 'Sep': 38.1, 'Oct': 29.3, 'Nov': 24.6, 'Dec': 21.0, 'annual': 12757}, \n            'Providence-RI': {'Jan': 26.8, 'Feb': 30.1, 'Mar': 38.4, 'Apr': 43.0, 'May': 43.9, 'Jun': 43.3, 'Jul': 45.0, 'Aug': 41.8, 'Sep': 38.5, 'Oct': 31.0, 'Nov': 23.7, 'Dec': 21.4, 'annual': 13032}, \n            'Newark-NJ': {'Jan': 24.0, 'Feb': 31.6, 'Mar': 37.0, 'Apr': 39.0, 'May': 43.6, 'Jun': 46.6, 'Jul': 44.7, 'Aug': 43.7, 'Sep': 38.6, 'Oct': 33.1, 'Nov': 25.7, 'Dec': 21.9, 'annual': 13105}, \n            'Baltimore-MD': {'Jan': 28.9, 'Feb': 34.1, 'Mar': 39.6, 'Apr': 44.0, 'May': 45.6, 'Jun': 46.7, 'Jul': 48.1, 'Aug': 43.9, 'Sep': 38.8, 'Oct': 34.1, 'Nov': 28.2, 'Dec': 24.8, 'annual': 13930}, \n            'Columbus-OH': {'Jan': 23.2, 'Feb': 26.8, 'Mar': 33.5, 'Apr': 42.6, 'May': 45.8, 'Jun': 47.7, 'Jul': 46.6, 'Aug': 43.1, 'Sep': 41.5, 'Oct': 32.2, 'Nov': 26.5, 'Dec': 19.6, 'annual': 13093}, \n            'Cincinnati-OH': {'Jan': 25.2, 'Feb': 28.5, 'Mar': 32.9, 'Apr': 38.9, 'May': 41.2, 'Jun': 43.6, 'Jul': 43.0, 'Aug': 40.9, 'Sep': 40.0, 'Oct': 33.0, 'Nov': 24.1, 'Dec': 21.1, 'annual': 12581}, \n            'Cleveland-OH': {'Jan': 18.8, 'Feb': 26.0, 'Mar': 36.1, 'Apr': 40.8, 'May': 45.6, 'Jun': 49.0, 'Jul': 50.0, 'Aug': 45.6, 'Sep': 40.3, 'Oct': 30.7, 'Nov': 19.9, 'Dec': 14.6, 'annual': 12731}, \n            'Detroit-MI': {'Jan': 20.9, 'Feb': 28.8, 'Mar': 34.7, 'Apr': 42.5, 'May': 45.4, 'Jun': 48.1, 'Jul': 49.3, 'Aug': 45.0, 'Sep': 40.0, 'Oct': 29.7, 'Nov': 22.0, 'Dec': 16.3, 'annual': 12890}\n        };\n\n        let selectedCities = ['Phoenix-AZ', 'Chicago-IL'];\n        let currentView = 'grid';\n\n        function initializeCities() {\n            const selector = document.getElementById('citySelector');\n            cities.forEach(city => {\n                const chip = document.createElement('div');\n                chip.className = 'city-chip';\n                chip.textContent = `${city.city}, ${city.abbr}`;\n                chip.dataset.cityKey = `${city.city}-${city.abbr}`;\n                \n                if (selectedCities.includes(chip.dataset.cityKey)) {\n                    chip.classList.add('selected');\n                }\n                \n                chip.onclick = () => toggleCity(chip);\n                selector.appendChild(chip);\n            });\n        }\n\n        function toggleCity(chip) {\n            const cityKey = chip.dataset.cityKey;\n            if (chip.classList.contains('selected')) {\n                chip.classList.remove('selected');\n                selectedCities = selectedCities.filter(c => c !== cityKey);\n            } else {\n                chip.classList.add('selected');\n                selectedCities.push(cityKey);\n            }\n            updateDisplay();\n        }\n\n        function setView(view) {\n            currentView = view;\n            document.querySelectorAll('.view-btn').forEach(btn => {\n                btn.classList.remove('active');\n            });\n            event.target.classList.add('active');\n            updateDisplay();\n        }\n\n        function updateDisplay() {\n            const displayArea = document.getElementById('displayArea');\n            \n            if (selectedCities.length === 0) {\n                displayArea.innerHTML = '<p style=\"text-align:center; padding:40px;\">Please select at least one city to view data.<\/p>';\n            } else {\n                switch(currentView) {\n                    case 'grid':\n                        displayGridView(displayArea);\n                        break;\n                    case 'heatmap':\n                        displayHeatmap(displayArea);\n                        break;\n                }\n            }\n            \n            updateRankingsTable();\n        }\n\n        function displayGridView(container) {\n            let html = '<div class=\"comparison-grid\">';\n            \n            selectedCities.forEach(cityKey => {\n                const data = sampleData[cityKey];\n                const cityInfo = cities.find(c => `${c.city}-${c.abbr}` === cityKey);\n                \n                html += `\n                    <div class=\"city-card\">\n                        <h3 class=\"city-name\">${cityInfo.city}<\/h3>\n                        <div class=\"state-name\">${cityInfo.state}<\/div>\n                        \n                        <div class=\"annual-total\">\n                            <div class=\"annual-label\">Annual Production<\/div>\n                            <div class=\"annual-value\">${data.annual.toLocaleString()} kWh<\/div>\n                        <\/div>\n                        \n                        <div class=\"monthly-bars\">\n                            <div class=\"y-axis-scale\">\n                                <div class=\"y-axis-label\">100<\/div>\n                                <div class=\"y-axis-label\">75<\/div>\n                                <div class=\"y-axis-label\">50<\/div>\n                                <div class=\"y-axis-label\">25<\/div>\n                                <div class=\"y-axis-label\">0<\/div>\n                            <\/div>\n                            <div class=\"bars-container\">\n                                ${Object.entries(data).filter(([k,v]) => k !== 'annual').map(([month, value]) => `\n                                    <div class=\"bar\" style=\"height: ${value}%\">\n                                        <div class=\"bar-tooltip\">${month}: ${value} kWh\/day<\/div>\n                                    <\/div>\n                                `).join('')}\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"month-labels\">\n                            ${['J','F','M','A','M','J','J','A','S','O','N','D'].map(m => \n                                `<div class=\"month-label\">${m}<\/div>`\n                            ).join('')}\n                        <\/div>\n                    <\/div>\n                `;\n            });\n            \n            html += '<\/div>';\n            \n            const avgAnnual = selectedCities.reduce((sum, city) => \n                sum + sampleData[city].annual, 0) \/ selectedCities.length;\n            \n            const bestCity = selectedCities.reduce((best, city) => \n                sampleData[city].annual > sampleData[best].annual ? city : best\n            );\n            \n            const worstCity = selectedCities.reduce((worst, city) => \n                sampleData[city].annual < sampleData[worst].annual ? city : worst\n            );\n            \n            html += `\n                <div class=\"stats-summary\">\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\">${Math.round(avgAnnual).toLocaleString()}<\/div>\n                        <div class=\"stat-label\">Average Annual kWh<\/div>\n                        <div class=\"stat-detail\">Across selected cities<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\">${bestCity.split('-')[0]}<\/div>\n                        <div class=\"stat-label\">Best Performance<\/div>\n                        <div class=\"stat-detail\">${sampleData[bestCity].annual.toLocaleString()} kWh\/year<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\">${((sampleData[bestCity].annual \/ sampleData[worstCity].annual - 1) * 100).toFixed(0)}%<\/div>\n                        <div class=\"stat-label\">Production Range<\/div>\n                        <div class=\"stat-detail\">Best vs. lowest performer<\/div>\n                    <\/div>\n                <\/div>\n            `;\n            \n            container.innerHTML = html;\n        }\n\n        function displayHeatmap(container) {\n            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n            \n            let allValues = [];\n            selectedCities.forEach(cityKey => {\n                const data = sampleData[cityKey];\n                months.forEach(month => {\n                    allValues.push(data[month]);\n                });\n            });\n            const minVal = Math.min(...allValues);\n            const maxVal = Math.max(...allValues);\n            \n            let html = `\n                <div class=\"heatmap-container\">\n                    <table class=\"heatmap-table\">\n                        <thead>\n                            <tr>\n                                <th>City<\/th>\n                                ${months.map(m => `<th>${m}<\/th>`).join('')}\n                                <th>Annual<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n            `;\n            \n            selectedCities.forEach(cityKey => {\n                const data = sampleData[cityKey];\n                const cityInfo = cities.find(c => `${c.city}-${c.abbr}` === cityKey);\n                \n                html += `<tr><td class=\"city-label\">${cityInfo.city}, ${cityInfo.abbr}<\/td>`;\n                \n                months.forEach(month => {\n                    const value = data[month];\n                    const intensity = (value - minVal) \/ (maxVal - minVal);\n                    const color = getHeatmapColor(intensity);\n                    html += `<td class=\"heat-cell\" style=\"background-color: ${color}; color: ${intensity > 0.5 ? 'white' : 'black'}\">${value}<\/td>`;\n                });\n                \n                html += `<td style=\"background: var(--color-brand-green); font-weight: bold;\">${data.annual.toLocaleString()}<\/td><\/tr>`;\n            });\n            \n            html += `\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n            `;\n            \n            container.innerHTML = html;\n        }\n\n        function updateRankingsTable() {\n            const rankingsDiv = document.getElementById('rankingsTable');\n            \n            \/\/ Get all cities with data\n            const allCitiesData = Object.keys(sampleData).map(cityKey => {\n                const cityInfo = cities.find(c => `${c.city}-${c.abbr}` === cityKey);\n                return {\n                    key: cityKey,\n                    info: cityInfo,\n                    data: sampleData[cityKey]\n                };\n            });\n            \n            \/\/ Sort by annual production\n            allCitiesData.sort((a, b) => b.data.annual - a.data.annual);\n            \n            \/\/ Find best and worst months across all data\n            const monthlyData = {};\n            allCitiesData.forEach(city => {\n                Object.entries(city.data).forEach(([month, value]) => {\n                    if (month !== 'annual') {\n                        monthlyData[month] = monthlyData[month] || [];\n                        monthlyData[month].push(value);\n                    }\n                });\n            });\n            \n            let html = `\n                <table class=\"rankings-table\">\n                    <thead>\n                        <tr>\n                            <th style=\"width: 60px; text-align: center;\">Rank<\/th>\n                            <th>City<\/th>\n                            <th>Annual Production<\/th>\n                            <th>Daily Average<\/th>\n                            <th>Best Month<\/th>\n                            <th>Worst Month<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n            `;\n            \n            allCitiesData.forEach((city, index) => {\n                const monthlyVals = Object.entries(city.data).filter(([k]) => k !== 'annual');\n                const bestMonth = monthlyVals.reduce((a, b) => b[1] > a[1] ? b : a);\n                const worstMonth = monthlyVals.reduce((a, b) => b[1] < a[1] ? b : a);\n                \n                rankIcon = `${index + 1}`;\n                \n                const stateSlug = city.info.stateslug.toLowerCase();\n                const cityPageUrl = `https:\/\/palmetto.com\/local\/${stateSlug}\/${city.info.slug}\/`;\n                \n                html += `\n                    <tr>\n                        <td class=\"rank-cell\">${rankIcon}<\/td>\n                        <td>\n                            <a href=\"${cityPageUrl}\" class=\"city-link\" target=\"_blank\">\n                                ${city.info.city}, ${city.info.abbr}\n                            <\/a>\n                        <\/td>\n                        <td style=\"font-weight: bold;\">${city.data.annual.toLocaleString()} kWh<\/td>\n                        <td>${(city.data.annual \/ 365).toFixed(1)} kWh<\/td>\n                        <td>${bestMonth[0]}: ${bestMonth[1]} kWh\/day<\/td>\n                        <td>${worstMonth[0]}: ${worstMonth[1]} kWh\/day<\/td>\n                    <\/tr>\n                `;\n            });\n            \n            html += `\n                    <\/tbody>\n                <\/table>\n            `;\n            \n            rankingsDiv.innerHTML = html;\n        }\n\n        function getHeatmapColor(intensity) {\n            \/\/ Create gradient from blue (low) to yellow to red (high)\n            const r = Math.round(255 * Math.min(intensity * 2, 1));\n            const g = Math.round(255 * (1 - Math.abs(intensity - 0.5) * 2));\n            const b = Math.round(255 * (1 - intensity));\n            return `rgb(${r}, ${g}, ${b})`;\n        }\n\n        \/\/ Initialize on load\n        document.addEventListener('DOMContentLoaded', () => {\n            initializeCities();\n            updateDisplay();\n        });\n    <\/script>\n<\/body>\n","protected":false},"excerpt":{"rendered":"<p>Peak Sun Hours Solar Irradiance across the US Written by Nathan Healy Updated: with PV Watts 2025 Data Quality Solar Solutions Since 2011 Palmetto has served 20,000+ customers across 31 states with an approval rating over 85%. Understanding Peak Sun Hours I get asked all the time, &#8220;How much solar energy can I expect to [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":915,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1556","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/pages\/1556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/comments?post=1556"}],"version-history":[{"count":4,"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/pages\/1556\/revisions"}],"predecessor-version":[{"id":1560,"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/pages\/1556\/revisions\/1560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/media\/915"}],"wp:attachment":[{"href":"https:\/\/palmetto.com\/local\/wp-json\/wp\/v2\/media?parent=1556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}