<?php get_header(); ?>
<?php
$gallery = [
    '/wp-content/uploads/2023/10/202-4c7gxxl.jpg',
    '/wp-content/uploads/2023/10/199-f27gxxl.jpg',
    '/wp-content/uploads/2023/10/20170608_142315-1024x576.jpg',
    '/wp-content/uploads/2023/10/IMG_0535-1-1024x768.jpg',
    '/wp-content/uploads/2023/10/IMG_3754-1-1-1024x768.jpg',
    '/wp-content/uploads/2023/10/Frame-36-1-1024x728.jpg',
];

$gallery_2 = [
    '/wp-content/uploads/2021/06/8-2.jpg',
    '/wp-content/uploads/2021/06/domek-2-2.jpg',
    '/wp-content/uploads/2021/06/domek-3-2.jpg',
    '/wp-content/uploads/2021/06/domek-5-2.jpg',
    '/wp-content/uploads/2021/06/7-2.jpg',
    '/wp-content/uploads/2021/06/6-2.jpg',
    '/wp-content/uploads/2021/06/51-1.jpg',
    '/wp-content/uploads/2021/06/domek-4-2.jpg',
    '/wp-content/uploads/2021/06/42-1.jpg',
    '/wp-content/uploads/2021/06/32-1.jpg',
    '/wp-content/uploads/2021/06/22-2.jpg',
    '/wp-content/uploads/2021/06/12-1.jpg',
];
$benefits  = [
    [
        'title' => '',
        'text' => 'dodatkową powierzchnię użytkową przez cały rok.',
    ],
    [
        'title' => '',
        'text' => 'ochronę przed deszczem, wiatrem, niską temperaturą oraz przed palącym słońcem.',
    ],
    [
        'title' => '',
        'text' => 'estetyczne i trwałe rozwiązanie klasy premium.',
    ],
    [
        'title' => '',
        'text' => 'przewidywalny harmonogram i jasne warunki współpracy.',
    ]
];

$collaboration = [
    "Analiza potrzeb i funkcji przestrzeni",
    "Koncepcja i dobór rozwiązań technicznych",
    "Oferta i harmonogram realizacji",
    "Umowa i zaliczka rezerwująca termin",
    "Produkcja i montaż"
];

$why_its = [
    [
        'text' => 'zapewnić rezerwację terminów montażu w sezonie',
    ],
    [
        'text' => 'spokojnie opracować projekt dopasowany do obiektu',
    ],
    [
        'text' => 'zagwarantować określony budżet bez nagłych podwyżek',
    ]
]
?>
<section id="hero_box" class="hero-with-form">
        <div class="hero-wrapper wrapper--inner" style="background: url('/wp-content/uploads/2023/10/ogrody-zimowe.jpg');">
            <span class="bg-filter"></span>
            <div class="hero-content">
                <h1 class="hero-heading heading--xl text-white">
                    Ogrody zimowe dla firm - całoroczne przestrzenie użytkowe
                </h1>
                <p class="hero-text text-white">
                    Projektujemy i realizujemy całoroczne ogrody zimowe dla obiektów komercyjnych: restauracji, hoteli, biur, showroomów oraz inwestycji prywatnych.
                </p>
                <p class="hero-text text-white">Nasze konstrukcje pozwalają wydłużyć sezon użytkowania przestrzeni, zabezpieczyć ją przed warunkami atmosferycznymi i zwiększyć komfort klientów oraz pracowników — bez kosztów stałej rozbudowy budynku.</p>
            </div>
            <div class="hero-form">
                <?php echo do_shortcode('[contact-form-7 id="26e16e5" title="Formularz kontaktowy dla firm"]'); ?>
            </div>
        </div>
</section>

<section id="korzysci" class="section-boxes-repeater ">
    <div class="wrapper wrapper--inner">
        <h2 class="section-heading heading--md">Co zyskuje firma?</h2>
        <!-- <p class="section-description">Dlaczego firmy wybierają całoroczne ogrody zimowe?</p> -->
        <div class="boxes simple-cards">
            <?php foreach ($benefits as $item) : ?>
                <div class="box-single ">
                    <span class="box-counter"></span>
                    <div class="box-image">
                        <img src="https://ostal.pl/wp-content/uploads/2023/10/Vector.png" alt="" class="img-auto">
                    </div>
                    <div class="box-content">
                        <!-- <h3 class="box-content__heading heading--sm"><?= $item['title'] ?></h3> -->
                        <p class="box-content__text text-bold"><?= $item['text'] ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="two-cols bg-light">
    <div class="wrapper wrapper--inner  imageLeft">
        <div class="col col-text">
            <h2 class="section-heading heading heading--md textRight">
                Sprawdzone systemy aluminiowe</h2>
            <div class="col-text-content">
                <p>Pracujemy na <strong>izolowanych systemach aluminiowych</strong>, z szybami o bardzo dobrych parametrach cieplnych (Ug = 1,1 lub 0,5), z możliwością zastosowania:</p>
                <ul style="list-style: none; padding: 0;">
                    <li>– dachów jednospadowych i wielospadowych</li>
                    <li>– zintegrowanych markiz zewnętrznych, żaluzji fasadowych i osłon typu ZIIIP</li>
                    <li>– przeszkleń stałych, przesuwnych i składanych.</li>
                </ul>
                <p>To rozwiązania stosowane również w nowoczesnych elewacjach i obiektach komercyjnych.</p>
            </div>
        </div>
        <div class="col col-image">
            <div class="image-wrapper">
                <img src="https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg" alt="" class="img-auto section-image">
            </div>
        </div>
    </div>
</section>

<section class="two-cols bg-light">
    <div class="wrapper wrapper--inner  imageLeft">
        <div class="col col-image">
            <div class="image-wrapper">
                <img src="https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg" alt="" class="img-auto section-image">
            </div>
        </div>
        <div class="col col-text">
            <h2 class="section-heading heading heading--md textRight">Doświadczenie w realizacjach dla firm</h2>
            <div class="col-text-content">
                <p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe, stolarkę</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p>
                <p>Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym.</p>
                <p>Ogrody zimowe, które oferujemy, bazują na sprawdzonych systemach aluminiowych o wysokich parametrach cieplnych. To rozwiązanie klasy premium, które zapewnia komfort użytkowania przez cały rok, a jego trwałość jest potwierdzona w realizacjach komercyjnych na obiektach użytkowych.</p>
            </div>
        </div>
    </div>
</section>

<section id="dlaczego_warto" class="section-boxes-repeater ">
    <div class="wrapper wrapper--inner">
        <h2 class="section-heading heading--md">Dlaczego warto teraz</h2>
        <p class="section-description">Decyzja o planowaniu ogrodu zimowego z wyprzedzeniem pozwala firmie:</p>
        <div class="boxes simple-cards">
            <?php foreach ($why_its as $item) : ?>
                <div class="box-single ">
                    <span class="box-counter"></span>
                    <div class="box-image">
                        <img src="https://ostal.pl/wp-content/uploads/2023/10/Vector.png" alt="" class="img-auto">
                    </div>
                    <div class="box-content">
                        <p class="box-content__text text-bold"><?= $item['text'] ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section id="collaboration" class="section-boxes-repeater">
    <div class="wrapper wrapper--inner">
        <h2 class="section-heading heading--md">Jak wygląda współpraca?</h2>
        <div class="collaboration-steps" style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
            <?php foreach ($collaboration as $index => $item) : ?>
                <div class="collaboration-step" style="display: flex; align-items: flex-start; gap: 20px; margin-bottom: <?= ($index < count($collaboration) - 1) ? '40px' : '0' ?>; position: relative;">
                    <!-- Numer kroku -->
                    <div class="step-number" style="flex-shrink: 0; width: 60px; height: 60px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 4px 8px rgba(136, 177, 75, 0.3); position: relative; z-index: 2;">
                        <?= $index + 1 ?>
                    </div>

                    <!-- Linia łącząca (dla wszystkich oprócz ostatniego) -->
                    <?php if ($index < count($collaboration) - 1) : ?>
                        <div class="step-connector" style="position: absolute; left: 30px; top: 60px; width: 2px; height: 40px; background: linear-gradient(to bottom, #88b14b, #e0e0e0); z-index: 1;"></div>
                    <?php endif; ?>

                    <!-- Treść kroku -->
                    <div class="step-content" style="flex: 1; background-color: #f8f9fa; padding: 20px 25px; border-radius: 8px; border-left: 4px solid #88b14b; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease;">
                        <h3 class="step-title" style="margin: 0; font-size: 18px; font-weight: 600; color: #333; line-height: 1.4;">
                            <?= $item; ?>
                        </h3>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<style>
.collaboration-step:hover .step-content {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(136, 177, 75, 0.15);
}

.collaboration-step:hover .step-number {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .collaboration-step {
        gap: 15px !important;
    }

    .step-number {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    .step-connector {
        left: 25px !important;
        top: 50px !important;
    }

    .step-content {
        padding: 15px 20px !important;
    }

    .step-title {
        font-size: 16px !important;
    }
}
</style>

<!-- <section id="galeria" class="section-gallery ">
    <div class="wrapper wrapper--inner  ">
        <h2 class="section-heading heading--md text-center">
            Nasze realizacje ogrodów zimowych </h2>
        <ul id="gallery-lightbox" class="gallery">
            <?php foreach ($gallery as $i) : ?>
                <li class="gallery-image">
                    <img src="<?= $i ?>" alt="">
                </li>
            <?php endforeach; ?>
        </ul>
        <div id="lightbox" class="lightbox"></div>
    </div>
</section> -->

<!-- <section class="one-col-cta-images wrapper--inner  align-left">
    <div class="wrapper bg-gray">
        <h2 class="heading">Cena ogrodów zimowych</h2>

        <p class="text">
            Cena ogrodów zimowych jest uzależniona od&nbsp;różnorodnych czynników, które wpływają na&nbsp;projekt, budowę oraz&nbsp;utrzymanie takiej przestrzeni. Kluczowym elementem jest rozmiar ogrodu, wybór materiałów konstrukcyjnych oraz&nbsp;stopień zaawansowania technologicznego, jeśli chodzi o&nbsp;systemy ogrzewania czy&nbsp;izolacji. Dodatkowo, cena dodatkowego pokoju zimowego na&nbsp;tarasie może być determinowana przez&nbsp;rodzaj używanych okien i&nbsp;drzwi, a&nbsp;także wybór roślinności, która&nbsp;ma&nbsp;być przechowywana w&nbsp;ogrodzie zimowym. Koszty związane z&nbsp;instalacją systemów grzewczych i&nbsp;oświetleniowych, a&nbsp;także ewentualnymi dodatkami, takimi jak meble, rośliny czy&nbsp;dekoracje, również wpływają na&nbsp;ogólny wydatek. W&nbsp;zależności od&nbsp;indywidualnych potrzeb i&nbsp;preferencji klienta, cena ogrodów zimowych może być zróżnicowana, od&nbsp;bardziej oszczędnych rozwiązań po&nbsp;luksusowe projekty dostosowane do&nbsp;najwyższych standardów.
            Dodatkowe pomieszczenie wypoczynkowe z&nbsp;kanapą i&nbsp;fotelami? A&nbsp;może klimatyczna jadalnia, który&nbsp;pomieści przy wspólnym stole całą rodzinę? Typ konstrukcji ogrodu zimowego na&nbsp;tarasie wybierzemy wspólnie w&nbsp;zależności od&nbsp;przeznaczenia ogrodu zimowego, dostępnej przestrzeni, względów estetycznych i&nbsp;dopasowania do&nbsp;bryły domu. Do&nbsp;wyboru mamy kilkadziesiąt szablonów, które sprawdzisz poniżej.
        </p>

        <ul class="gallery">
            <?php foreach ($gallery_2 as $i) : ?>
                <li class="gallery-image">
                    <img src="<?= $i ?>" alt="" class="img-auto">
                </li>
            <?php endforeach; ?>
        </ul>

    </div>
</section> -->

<section id="garden-page-seo" class="two-cols-with-bg bg-dark" style="background-image: url('https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg');">
    <span class="bg-filter"></span>
    <div class="wrapper wrapper--inner">
        <h2>👉 Realizacje całorocznych ogrodów zimowych rozpoczynają się od ok. 100 000 zł netto.</h2>
        <a href="#hero_box" class="btn btn-primary">Umów rozmowę / Zapytaj o rozwiązanie dla swojej firmy</a>
    </div>
</section>
<?php get_footer(); ?>