// landing.jsx — sekcja landingowa „Jak to działa?" (pod kalkulatorem) const { useState: lUseState, useRef: lUseRef, useEffect: lUseEffect } = React; /* Minimalistyczne ikony kroków (styl Lucide, stroke 1.7) */ const StepIc = { calc: (p) => ( ), sliders: (p) => ( ), tag: (p) => ( ), cart: (p) => ( ), calendar: (p) => ( ), doc: (p) => ( ), }; const HOW_STEPS = [ { t: "Otwórz kalkulator", d: "Kliknij przycisk KALKULATOR lub SKONFIGURUJ SWOJĄ INSTALACJĘ a przekieruje Cię w odpowiednie miejsce.", ic: "calc" }, { t: "Odbierz instalację dla siebie", d: "Wybierz sprzęt oraz moc instalacji, którą potrzebujesz (panele fotowoltaiczne oraz magazyn energii), falownik dobierze się automatycznie.", ic: "sliders" }, { t: "Poznaj cenę bez marży handlowca", d: "Zapoznaj się z ceną i wyślij sobie ofertę na maila.", ic: "tag" }, { t: "Złóż zamówienie", d: "Jeśli potrzebujesz indywidualnej oferty, umów konsultację przez telefon w formularzu kontaktowym.", ic: "cart" }, { t: "Umów termin montażu", d: "Złóż zamówienie i wybierz opcję podpisania umowy: poprzez Autenti lub spotkanie z opiekunem.", ic: "calendar" }, { t: "Zleć nam pomoc w złożeniu wniosku o dofinansowanie", d: "Po montażu oraz ewentualnym zgłoszeniu instalacji do zakładu energetycznego, złożymy w Twoim imieniu wniosek o dofinansowanie.", ic: "doc" }, ]; /* Karuzela realizacji — nieskończona pętla (lista zdublowana + bezszwowy reset) */ function RealCarousel() { const trackRef = lUseRef(null); const settleRef = lUseRef(null); const N = REALIZACJE.length; // Długość jednej pełnej pętli = pozycja pierwszej karty zdublowanego zestawu. const loopLen = () => { const el = trackRef.current; if (!el) return 0; const items = el.querySelectorAll(".caro-item"); return items[N] ? items[N].offsetLeft : el.scrollWidth / 2; }; // Natychmiastowa (nieanimowana) korekta scrollLeft — w CSS jest scroll-behavior: smooth, // więc na czas resetu wyłączamy płynność, żeby pętla była bezszwowa. const jump = (el, delta) => { const prev = el.style.scrollBehavior; el.style.scrollBehavior = "auto"; el.scrollLeft += delta; el.style.scrollBehavior = prev; }; // Po ustaniu przewijania normalizujemy pozycję z powrotem do pierwszego zestawu // (drugi zestaw jest identyczny, więc skok jest niewidoczny → płynna pętla). const onScroll = () => { clearTimeout(settleRef.current); settleRef.current = setTimeout(() => { const el = trackRef.current; if (!el) return; const L = loopLen(); if (L <= 0) return; if (el.scrollLeft >= L) jump(el, -L); else if (el.scrollLeft < 0) jump(el, L); }, 130); }; lUseEffect(() => { const el = trackRef.current; if (!el) return; el.addEventListener("scroll", onScroll, { passive: true }); return () => { el.removeEventListener("scroll", onScroll); clearTimeout(settleRef.current); }; }, []); const step = (dir) => { const el = trackRef.current; if (!el) return; const item = el.querySelector(".caro-item"); const gap = parseFloat(getComputedStyle(el).gap) || 18; const amount = item ? item.getBoundingClientRect().width + gap : 318; const L = loopLen(); // Cofanie z początku → przeskocz na lustrzaną pozycję w drugim zestawie, by płynnie zawinąć. if (dir < 0 && L > 0 && el.scrollLeft < amount) jump(el, L); el.scrollBy({ left: dir * amount, behavior: "smooth" }); }; const loop = [...REALIZACJE, ...REALIZACJE]; return (
{loop.map((r, i) => (
= N ? "true" : undefined}>
{r.city
{r.kwp ? `${r.kwp} kWp` : "PV + magazyn"}
{r.city || "Instalacja OZE"}
))}
); } function Landing({ go }) { const goConfig = () => { go("kalkulator"); setTimeout(() => scrollToId("kalkulator-start"), 60); }; return (
{/* ── 1. HERO na zdjęciu z gradientem ─────────────────── */}

Skorzystaj z oferty wprost od instalatora
nie przepłacając za dodatkową usługę handlowca.

{/* ── 2. NASZE REALIZACJE (karuzela) ──────────────────── */}
Zaufały nam setki domów

Nasze realizacje
{/* ── 2b. DLACZEGO WARTO — Standard vs Premium ────────── */}
Nasz sprzęt

Maksimum wydajności i inteligencji

Stawiamy na najwydajniejsze panele Aiko i inteligentny system Sigenergy — sprzęt, który realnie zwiększa Twoje oszczędności i jest gotowy na przyszłość.

Panele

Dlaczego panele Aiko?

  • Więcej energii z tej samej powierzchni dachu
  • Mniejsze straty przy częściowym zacienieniu
  • Wolniejsza utrata wydajności paneli
 Polecane
System

Dlaczego system Sigenergy?

  • Obsługa taryf dynamicznych!
  • Integracja z Pstryk i obsługa cen ujemnych
  • System 5 w 1
    • falownik hybrydowy,
    • magazyn energii,
    • zasilanie awaryjne,
    • inteligentne zarządzanie energią,
    • opcjonalną ładowarkę samochodu elektrycznego.
  • Łatwa rozbudowa magazynu energii
  • Bardzo dobre wykorzystanie pojemności baterii do 100%
  • Inteligentne zarządzanie energią
  • Przygotowanie pod samochód elektryczny i V2H
  • Estetyka całego zestawu
{/* ── 2c. AUTORYZOWANY INSTALATOR SIGENERGY ───────────── */}
Sigenergy
Autoryzowany instalator

Jesteśmy autoryzowanym instalatorem Sigenergy

Montujemy i konfigurujemy systemy Sigenergy w oparciu o szkolenia i certyfikację producenta — masz pewność prawidłowego montażu oraz pełnej gwarancji.

{/* ── 3. JAK TO DZIAŁA (czyste tło, grid 3×2, znaki wodne) ── */}
Prosty proces

Jak to działa?

Od otwarcia kalkulatora po montaż i dofinansowanie — prowadzimy Cię za rękę na każdym kroku.

{HOW_STEPS.map((s, i) => { const Icon = StepIc[s.ic]; return (

{s.t}

{s.d}

 ); })}
{/* ── 4. CTA — pełnoekranowy banner z glow ────────────── */}
Gotowy na oszczędności?

Poznaj cenę swojej instalacji w mniej niż 2 minuty.

Bez rejestracji, bez zobowiązań, bez marży handlowca.
{/* ── 5. NIE WIESZ JAK + KONSULTACJA (split 50/50) ────── */}
Pomożemy dobrać instalację

Nie wiesz jak?

Jeśli nie wiesz jak skonfigurować swoją instalację OZE lub nie wiesz czego potrzebujesz, wypełnij formularz kontaktowy a skontaktujemy się z Tobą i dobierzemy instalację skrojoną pod Twoje zapotrzebowanie.

Dom jednorodzinny z instalacją fotowoltaiczną na dachu
); } Object.assign(window, { Landing, HOW_STEPS, StepIc });