@extends($activeTemplate . 'layouts.frontend')

@section('content')
<style>
    
.why-choose-us {
    padding: 80px 20px;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.section-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 60px;
    color: #000;
}

.section-title span {
    color: #1f4fff;
}

.features {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

.feature-box {
    width: 300px;
    text-align: center;
}

.feature-box img {
    width: 160px;
    margin-bottom: 25px;
}

.feature-box h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #000;
}

.feature-box p {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
}
.performance-section {
    padding: 80px 20px;
}

.performance-container {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.content-left {
    flex: 1;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 50px;
}

.icon {
    width: 48px;
    height: 48px;
    background: #eaf1ff;
    color: #1f4fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.text h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111;
}

.text p {
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
    max-width: 520px;
}

.content-right {
    flex: 1;
    text-align: center;
}

.content-right img {
    max-width: 100%;
    height: auto;
}
.blue-features {
    padding: 80px 20px;
    background: #ffffff;
}

.blue-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.blue-card {
    background: #1f66e0;
    border-radius: 4px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.blue-icon img {
    width: 120px;
    flex-shrink: 0;
}

.blue-content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.blue-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #e6efff;
    max-width: 420px;
}

/* Responsive */
@media (max-width: 992px) {
    .blue-container {
        grid-template-columns: 1fr;
    }

    .blue-card {
        flex-direction: column;
        text-align: center;
    }

    .blue-content p {
        max-width: 100%;
    }
}
/* Hide by default (mobile first) */
.performance-section {
    display: none;
}

/* Show only on desktop */
@media (min-width: 992px) {
    .performance-section {
        display: block;
    }
}
.hosting-hero {
    min-height: 100vh;
    padding: 80px 20px;
    background: #0e0f16;
    background-image: url("../images/pattern-bg.png"); /* optional */
    background-size: cover;
    background-position: center;
    color: #fff;
}

.hero-container {
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: white;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: #d1d5db;
    max-width: 520px;
    margin-bottom: 30px;
}

.hero-features {
    list-style: none;
    padding: 0;
}

.hero-features li {
    font-size: 15px;
    color: #e5e7eb;
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.hero-features li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    color: #22c55e;
    font-weight: bold;
}

.hero-image {
    flex: 1;
    text-align: right;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        text-align: center;
    }

    .hero-content h1 {
        font-size: 40px;
    }

    .hero-features li {
        text-align: left;
    }
}

</style>
<section class="hosting-hero">
    <div class="hero-container">

        <!-- LEFT CONTENT -->
        <div class="hero-content">
            <h1>
Turn one day  <br>into day one</h1>

            <p class="hero-subtitle">
                Enjoy enhanced performance and speed at an affordable price,
                Power your online presence and business with CloudyGit services
            </p>

            <ul class="hero-features">
                <li>Premium Hosting with Affordable Price in Pakistan</li>
                <li>Redundant DNS with no reboot infrastructure</li>
                <li>99.99% Uptime with 24/7 Support (Phone & Live Chat)</li>
                <li>Free Site Builder with Backup Service</li>
                <li>Free CloudLinux based c-Panel with ImunifyAV+</li>
                <li>Free Domain Name (.com, .net, .org and much more)</li>
                <li>Free SSL for all domains and sub domains</li>
            </ul>
        </div>

        <!-- RIGHT IMAGE -->
        <div class="hero-image">
            <img src="{{ asset('assets/images/banner_image_1.png') }}" alt="Shared Hosting Servers">
        </div>

    </div>
</section>

<section class="why-choose-us">
    <div class="container">
        <h2 class="section-title">
            WHY <span>CHOOSE US</span>
        </h2>

        <div class="features">
            <div class="feature-box">
                <img src="Fast Website.webp" alt="Fastest">
                <h3>FASTEST</h3>
                <p>
                    Our State-of-Art network delivers you
                    fastest solutions in Pakistan for your
                    Website Hosting needs!
                </p>
            </div>

            <div class="feature-box">
                <img src="choose-us-2.webp" alt="Secure">
                <h3>SECURE</h3>
                <p>
                    We provide free SSL and DDoS
                    protection in Pakistan that assure your
                    website is always safe and secure
                </p>
            </div>

            <div class="feature-box">
                <img src="choose-us-7.webp" alt="Affordable">
                <h3>AFFORDABLE</h3>
                <p>
                    We offer unbeatable affordable pricing
                    hosting in Pakistan to meet your all
                    personal and business need
                </p>
            </div>
        </div>
    </div>
</section>

    @if ($sections->secs != null)
        @foreach (json_decode($sections->secs) as $sec)
            @include($activeTemplate . 'sections.' . $sec)
        @endforeach
        
    @endif
    
    <section class="performance-section">
    <div class="performance-container">
        <div class="content-left">

            <div class="feature">
                <div class="icon">
                    🛡️
                </div>
                <div class="text">
                    <h3>HIGH PERFORMANCE</h3>
                    <p>
                        At CloudyGit you can enjoy hosting on speed optimized
                        servers with Solid-state drives, Modern infrastructure and
                        Updated software and apps that deliver up to 20X faster Server
                        speed with scalability and stability.
                    </p>
                </div>
            </div>

            <div class="feature">
                <div class="icon">
                    ☁️
                </div>
                <div class="text">
                    <h3>FRIENDLY SUPPORT</h3>
                    <p>
                        To address your query and better customer experience our
                        Friendly technical support staffs are available round a clock
                        to resolve your hosting issues, You can contact us via Live Chat
                        or filling support ticket.
                    </p>
                </div>
            </div>

        </div>

        <div class="content-right">
            <img src="info-img-2.webp" alt="Server Illustration">
        </div>
    </div>
</section>
<section class="blue-features">
    <div class="blue-container">

        <div class="blue-card">
            <div class="blue-icon">
                <img src="{{ asset('assets/images/choose-us-1.webp') }}" alt="Performance">
            </div>
            <div class="blue-content">
                <h3>Ultimate performance</h3>
                <p>
                    Our servers provide maximum speed, greater reliability
                    for better website performance.
                </p>
            </div>
        </div>

        <div class="blue-card">
            <div class="blue-icon">
                <img src="{{ asset('assets/images/choose-us-2.webp') }}" alt="Uptime">
            </div>
            <div class="blue-content">
                <h3>99% Uptime</h3>
                <p>
                    We ensure your website availability with our global
                    data center that enable us to deliver best possible uptime.
                </p>
            </div>
        </div>

    </div>
</section>

@endsection