/**
* SKAILAN HOMEPAGE ROZCESTNÍK v1.2 - AUTO-INJECT
* Sám si vytvoří kontejner a vloží ho na začátek obsahu Homepage.
*/
document.addEventListener('DOMContentLoaded', function() {
// 1. Zkontrolujeme, zda jsme na Homepage
const isHomepage = document.body.classList.contains('type-index') || window.location.pathname === '/';
if (!isHomepage) return;
// 2. AUTO-INJECT: Najdeme hlavní kontejner na HP a vytvoříme si náš div sami!
const mainContent = document.querySelector('.category-perex') || document.querySelector('#content');
if (!mainContent) {
console.warn("Skailan Rozcestník: Nenalezen hlavní #content.");
return;
}
let targetContainer = document.getElementById('skailan-homepage-wizard');
if (!targetContainer) {
targetContainer = document.createElement('div');
targetContainer.id = 'skailan-homepage-wizard';
// Vložíme ho jako úplně první prvek do hlavního obsahu
mainContent.insertBefore(targetContainer, mainContent.firstChild);
}
// 3. Data rozcestníku
const VIP_CARDS = [
{ title: "Plastová okna na míru", url: "/plastova-okna-na-miru/", icon: `
` },
{ title: "Balkonové dveře na míru", url: "/balkonove-dvere-na-miru/", icon: `
` }
];
const STD_LINKS = [
{ title: "Vchodové dveře", url: "/plastove-vchodove-dvere/" },
{ title: "Garážová vrata", url: "/sekcni-garazova-vrata/" },
{ title: "Příslušenství", url: "/prislusenstvi-k-plastovym-oknum-a-dverim/" },
{ title: "Bazar a Výprodej", url: "/bazar-plastovych-oken-a-dveri/" }
];
targetContainer.className = 'cb-fade-in sk-hub-wrapper';
// 4. Vykreslení HTML
targetContainer.innerHTML = `
${VIP_CARDS.map(c => `
${c.icon}
${c.title}
Rádce výběrem
`).join('')}
Otevírám Rádce...
Nezavírejte prosím okno, připravujeme pro vás možnosti.
`;
// 5. Interakce a Visual Bridge
targetContainer.querySelectorAll('.sk-hub-vip-card').forEach(card => {
card.addEventListener('click', function() {
const url = this.getAttribute('data-url');
const title = this.getAttribute('data-title');
sessionStorage.setItem('skailan_incoming_from_hp', 'true');
const loader = document.getElementById('sk-hub-loader');
document.getElementById('sk-loader-text').textContent = `Otevírám Rádce pro ${title}...`;
loader.style.display = 'flex';
document.body.style.overflow = 'hidden';
setTimeout(() => { window.location.href = url; }, 600);
});
});
// 6. CSS Styly
const style = document.createElement('style');
style.innerHTML = `
.sk-hub-wrapper { max-width: 900px; margin: 30px auto 50px auto; font-family: sans-serif; background: #fff; border-radius: 12px; border: 1px solid #eaeaea; box-shadow: 0 8px 25px rgba(0,0,0,0.03); padding: 30px 20px; position: relative; z-index: 10;}
.cb-fade-in { animation: cbFadeIn 0.4s ease-in-out; }
@keyframes cbFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.sk-hub-header { text-align: center; margin-bottom: 30px; }
.sk-hub-header h2 { margin: 0; font-size: 26px; font-weight: 800; color: #222; }
.sk-hub-header p { color: #666; font-size: 16px; margin: 10px 0 0 0; }
.sk-hub-vip-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.sk-hub-vip-card { position: relative; background: #fafcff; border: 2px solid #eaf6fc; border-radius: 10px; width: 220px; padding: 35px 20px; cursor: pointer; transition: all 0.2s ease; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sk-hub-vip-card:hover { border-color: #009FE3; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 159, 227, 0.15); background: #fff;}
.sk-vip-icon { margin-bottom: 15px; height: 50px; display: flex; align-items: center; justify-content: center;}
.sk-vip-title { font-weight: 800; color: #333; font-size: 16px; line-height: 1.3;}
.sk-vip-badge { position: absolute; top: -12px; background: #009FE3; color: white; font-size: 11px; font-weight: bold; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px;}
.sk-hub-std-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; border-top: 1px solid #eee; padding-top: 30px; }
.sk-hub-std-link { background: #f8f9fa; border: 1px solid #e1e5e8; border-radius: 8px; padding: 15px; color: #444; font-weight: 700; text-align: center; text-decoration: none; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px;}
.sk-hub-std-link:hover { background: #fff; border-color: #009FE3; color: #009FE3; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.sk-arrow { transition: transform 0.2s; }
.sk-hub-std-link:hover .sk-arrow { transform: translateX(5px); }
#sk-hub-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 2147483647; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.sk-loader-content { text-align: center; max-width: 400px; padding: 20px; }
.sk-loader-content h3 { font-size: 24px; color: #009FE3; font-weight: 800; margin: 0 0 10px 0; }
.sk-loader-content p { color: #555; font-size: 15px; margin: 0 0 30px 0; }
.sk-spinner { margin: 0 auto; border: 4px solid #f3f3f3; border-top: 4px solid #009FE3; border-radius: 50%; width: 50px; height: 50px; animation: skSpin 1s linear infinite; }
@keyframes skSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (max-width: 600px) { .sk-hub-vip-card { width: 100%; } }
`;
document.head.appendChild(style);
});
-->
