@@ -1748,6 +1748,29 @@ export default function Simulator() {
17481748 { simulationResult && Array . isArray ( simulationResult ) && simulationResult . length > 0 && (
17491749 < >
17501750
1751+ { /* Information banner */ }
1752+ < div className = "mx-6 mb-4 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800" >
1753+ < div className = "flex items-start gap-3" >
1754+ < div className = "flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center" >
1755+ < span className = "text-xl" > 💡</ span >
1756+ </ div >
1757+ < div className = "flex-1 text-sm text-blue-800 dark:text-blue-200" >
1758+ < p className = "font-semibold mb-1" > À propos de cette simulation</ p >
1759+ < p className = "text-blue-700 dark:text-blue-300 leading-relaxed" >
1760+ Cette simulation est basée sur < strong > votre consommation réelle de l'année écoulée</ strong > (J-1 à J-365).
1761+ Certaines offres comme < strong > Tempo</ strong > ou < strong > Zen Flex</ strong > appliquent des tarifs majorés sur quelques jours spécifiques
1762+ (22 jours rouges pour Tempo, 20 jours de sobriété pour Zen Flex).
1763+ </ p >
1764+ < p className = "text-blue-600 dark:text-blue-400 mt-2 font-medium" >
1765+ 🎯 En réduisant simplement votre consommation ces quelques jours dans l'année, vous pouvez significativement diminuer votre facture avec ces offres.
1766+ </ p >
1767+ < p className = "text-blue-600 dark:text-blue-400 mt-2" >
1768+ 💬 Votre fournisseur n'est pas listé ? < a href = "/contribute" className = "font-semibold underline hover:text-blue-800 dark:hover:text-blue-200" > Contribuez au simulateur</ a > en demandant son ajout !
1769+ </ p >
1770+ </ div >
1771+ </ div >
1772+ </ div >
1773+
17511774 { /* Filters */ }
17521775 < div className = "px-6 pb-4 border-b border-gray-200 dark:border-gray-700" >
17531776 < div className = "flex flex-wrap gap-3 p-3 bg-gray-50 dark:bg-gray-900/30 rounded-lg border border-gray-200 dark:border-gray-700" >
@@ -2214,6 +2237,15 @@ export default function Simulator() {
22142237 </ div >
22152238 </ div >
22162239 </ div >
2240+ { /* Info about Tempo optimization */ }
2241+ < div className = "p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400" >
2242+ < div className = "flex items-start gap-2 text-xs text-blue-700 dark:text-blue-300" >
2243+ < span className = "flex-shrink-0 text-base" > 💡</ span >
2244+ < div >
2245+ < strong > Simulation basée sur votre consommation actuelle.</ strong > En réduisant votre consommation les 22 jours rouges (HP à { formatPrice ( result . offer . tempo_red_hp , 4 ) } €/kWh), vous pouvez significativement diminuer votre facture avec cette offre.
2246+ </ div >
2247+ </ div >
2248+ </ div >
22172249 < div className = "flex justify-between pt-3 border-t border-gray-200 dark:border-gray-600" >
22182250 < span className = "text-sm font-bold text-gray-700 dark:text-gray-300" > Total énergie</ span >
22192251 < span className = "text-lg font-bold text-violet-600 dark:text-violet-400" > { result . energyCost . toFixed ( 2 ) } €</ span >
@@ -2397,6 +2429,54 @@ export default function Simulator() {
23972429 </ div >
23982430 ) }
23992431
2432+ { /* TEMPO prices */ }
2433+ { result . offerType === 'TEMPO' && result . offer . tempo_blue_hc && (
2434+ < div className = "space-y-2" >
2435+ { /* Jours Bleus */ }
2436+ < div className = "text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide flex items-center gap-1" >
2437+ < span className = "w-2 h-2 rounded-full bg-blue-500" > </ span > Jours Bleus (300j)
2438+ </ div >
2439+ < div className = "grid grid-cols-2 gap-2" >
2440+ < div className = "p-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-center" >
2441+ < div className = "text-xs text-blue-600 dark:text-blue-400" > HC</ div >
2442+ < div className = "text-sm font-bold text-blue-800 dark:text-blue-200" > { formatPrice ( result . offer . tempo_blue_hc , 5 ) } €</ div >
2443+ </ div >
2444+ < div className = "p-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-center" >
2445+ < div className = "text-xs text-blue-600 dark:text-blue-400" > HP</ div >
2446+ < div className = "text-sm font-bold text-blue-800 dark:text-blue-200" > { formatPrice ( result . offer . tempo_blue_hp , 5 ) } €</ div >
2447+ </ div >
2448+ </ div >
2449+ { /* Jours Blancs */ }
2450+ < div className = "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide flex items-center gap-1" >
2451+ < span className = "w-2 h-2 rounded-full bg-gray-400" > </ span > Jours Blancs (43j)
2452+ </ div >
2453+ < div className = "grid grid-cols-2 gap-2" >
2454+ < div className = "p-2 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 text-center" >
2455+ < div className = "text-xs text-gray-500 dark:text-gray-400" > HC</ div >
2456+ < div className = "text-sm font-bold text-gray-700 dark:text-gray-200" > { formatPrice ( result . offer . tempo_white_hc , 5 ) } €</ div >
2457+ </ div >
2458+ < div className = "p-2 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-300 dark:border-gray-600 text-center" >
2459+ < div className = "text-xs text-gray-500 dark:text-gray-400" > HP</ div >
2460+ < div className = "text-sm font-bold text-gray-700 dark:text-gray-200" > { formatPrice ( result . offer . tempo_white_hp , 5 ) } €</ div >
2461+ </ div >
2462+ </ div >
2463+ { /* Jours Rouges */ }
2464+ < div className = "text-xs font-semibold text-red-600 dark:text-red-400 uppercase tracking-wide flex items-center gap-1" >
2465+ < span className = "w-2 h-2 rounded-full bg-red-500" > </ span > Jours Rouges (22j)
2466+ </ div >
2467+ < div className = "grid grid-cols-2 gap-2" >
2468+ < div className = "p-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-center" >
2469+ < div className = "text-xs text-red-600 dark:text-red-400" > HC</ div >
2470+ < div className = "text-sm font-bold text-red-800 dark:text-red-200" > { formatPrice ( result . offer . tempo_red_hc , 5 ) } €</ div >
2471+ </ div >
2472+ < div className = "p-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-center" >
2473+ < div className = "text-xs text-red-600 dark:text-red-400" > HP</ div >
2474+ < div className = "text-sm font-bold text-red-800 dark:text-red-200" > { formatPrice ( result . offer . tempo_red_hp , 5 ) } €</ div >
2475+ </ div >
2476+ </ div >
2477+ </ div >
2478+ ) }
2479+
24002480 { /* Link to offer */ }
24012481 { result . offer . offer_url && (
24022482 < a
0 commit comments