@extends('layouts.'.env('THEME'))

@section('style')

<style>

#page-heading {
	background-image: url({{URL::asset('uploads/brand/hands-tablet.png')}});
	background-size: cover;
	background-position: center right;
}

#page-heading-content img {
	width: 70%;
	max-width: 150px;
}

@media (max-width: 768px) {
	#page-heading {
		background-size: cover;
		background-position: center left;
	}
  	#page-heading-content h1 {
		font-size: 1.2rem;
	}
  	#page-heading-content p {
		font-size: 0.7rem;
	}
}
@media (min-width: 576px) {
	#page-heading {
		background-size: cover;
		background-position: center left;
	}
	#page-heading-content {
		margin-left: -40px;
	}
  	#page-heading-content h1 {
		font-size: 1.8rem;
	}
  	#page-heading-content p {
		font-size: 0.8rem;
	}
}
@media (min-width: 768px) {
	#page-heading-content {

	}
}

.roundoff {
	background-image: url({{URL::asset('uploads/brand/roundoff.png')}});
	background-size: cover;
	background-position: center bottom;
	width: 100%;
	height: 60px;
}

.text-theme-light {
	color: #38b6ff;
}

.newsletter {
    padding: 80px 0;
    background: #3d316f;
    color: #fff;
}


.newsletter .content {
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 2;
}

.content-tuned{
	font-size: 0.8rem;
    margin-bottom: 34px !important;
    color: #fff;
}
.form-control {
    height: 50px;
    border-color: #ffffff;
    border-radius: 2px 0px 0px 2px;
}

.form-control:focus {
	box-shadow: none !important;
	border: 2px solid #243c4f;
	border-color: none;
}

.btn {
	min-height: 50px;
	border-radius:0;
	background: #38b6ff;
	color: #fff;
	font-weight:300;
}

.btn:hover {
	background: #1383c4;
	color: #fff
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0rem rgba(0,123,255,.25) !important;
}

.unsubscribe-link{
	text-decoration: none !important;
	font-size: 13px;
	color: #fff;
}

.unsubscribe-link:hover{
	text-decoration: none !important;
	color: #fff;
}

    <x-lead_form.lead_form_style />
    <x-vidanimation_style />
</style>

@endsection

@section('content')

<!-- Header-->
<header id="page-heading" class="pt-5">
    <div class="container px-5">
        <div class="row gx-5 justify-content-left">
            <div id="page-heading-content" class="col-6">
                <div class="text-center my-5" id="phc-container">
                    <img src="{{URL::asset('uploads/brand/logo-transparent.png')}}" alt="logo" class="mb-2">
                    <h1 class="display-5 fw-bolder mb-2 lineDown" style="color: #38b6ff;">Gig-ability</h1>
                    <p class="lead text-50 mb-4 lineUp" style="color: #38b6ff; letter-spacing: 5px;">STAY CONNECTED</p>
                </div>
            </div>
        </div>
    </div>
    <div class="roundoff mt-5"></div>
</header>

<div class="container my-5 px-0" style="overflow: hidden;">
    <div class="row my-5">
        <div class="col-lg-6 col-12 text-left">
            <h1 style="color: var(--dark-color); display: inline-block;">High speed internet service</h1>
            <div class="row text-left">
                <div class="col-10">
                    <h2 style="font-size: 1.5rem; font-weight: normal; color: var(--dark-color);">
                        Delivering to the communities that need it most.
                    </h2>
                    <p><strong>Pricing</strong> from as low as &pound;15 per month. Typically even our entry level service delivers faster speeds than our competitors premium packages because we build brand new full fibre connections to your property.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-12 text-center" style="margin-top: 10px;">
            <div class="row mb-3 mx-5 border-box align-items-center">
                <div class="col-12 text-center">
                    <span class="primary" style="font-size: 2rem; font-weight: bold; text-shadow: 2px 2px #738dab;">from</span>
                    <span class="primary my-auto" style="font-size: 3rem; font-weight: bold; text-shadow: 5px 5px #738dab;">&pound;15pm</span>
                    <div class="w-100 my-3 d-block d-md-none"></div>
                </div>
            </div>
            <div class="row mb-3 mx-5 align-items-center">
                <div class="col-12 text-left">
                    <p>To see specific services available to you please enter your postcode.</p>
                    {!! Form::open([
                        'url' => 'pricing',
                        'method' => 'get',
                        'id' => 'postcode_submit']) !!}
                    {!! Form::hidden('referrer', $lead_form_referrer) !!}

                    <div class="input-group">
                        <input type="text" class="form-control hinput" name="postcode"
                            style="text-transform: lowercase; border: 2px solid #3d316f;"
                            id="postcode_check" placeholder="Enter your postcode..." maxlength="12">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" style="border-radius: 5px; padding: 0 25px;">
	<div class="row" style="margin-top: -80px;">
        <x-lead_form.lead_form :referrer="$lead_form_referrer" />
	</div>
</div>

@include('pages.corp.full_fibre_service')

<!-- Features section-->
<section class="py-5 dark-section" id="features">
    <div class="container px-5 my-5">
        <div class="row gx-5">
            <div class="col-lg-4 mb-5 mb-lg-0">
                <div style="display: inline-block; border-radius: 15px;" class="bg-primary bg-gradient text-white rounded-3 py-2 px-3 mb-3"><i class="bi bi-globe" style="font-size: 2rem;"></i></div>
                <h2 class="h4 fw-bolder">Internet service provider</h2>
                <p>{{env('APP_NAME')}} is a new ISP specialising in providing high speed, reliable, full fibre internet connections to homes and businesses.</p>
            </div>
            <div class="col-lg-4 mb-5 mb-lg-0">
                <div style="display: inline-block; border-radius: 15px;" class="feature bg-primary bg-gradient text-white py-2 px-3 rounded-3 mb-3"><i class="bi bi-map" style="font-size: 2rem;"></i></div>
                <h2 class="h4 fw-bolder">Target areas</h2>
                <p>We are currently focused in central England. Keep an eye on our news page and <a href="/signup?referrer=ta-link">register your interest</a> to be the first to hear new areas as they are announced.
                </p>
            </div>
            <div class="col-lg-4">
                <img src="{{URL::asset('uploads/brand/target-area.png')}}" alt="target map" style="width: 100%;" />
            </div>
        </div>
    </div>
</section>

@if(!empty($latest_article))
<div class="container-fluid news-section m-0 p-0" style="overflow: hidden;">
    <div class="container" style="border-radius: 5px; padding: 0 25px;">

        <div class="row mt-4 mb-3 align-items-center">
            <div class="col-lg-6 col-12 text-center">
                <a href="/news" style="color: #fff;">
                    <div class="section-title">Latest news</div>
                    view all &gt;
                </a>
            </div>
            <div class="col-lg-6 col-12">
                <div class="pt-4 d-block d-lg-none"></div>

                @if(!empty($latest_article))
                <div class="card">
                    <div class="card-img" style="background-image: url('/uploads/articles/{!!$latest_article->getImage()!!}');"></div>
                    <div class="card-body">
                        <h5 class="card-title" style="color: #000;">{!! \Illuminate\Support\Str::limit($latest_article->title, 68, $end='&hellip;')
                        !!}</h5>
                        <a href="/articles/{{urlencode($latest_article->title)}}">
                            Read &gt;
                        </a>
                    </div>
                </div>
                @endif

            </div>
        </div>
    </div>
</div>
@endif


<div class="container" style="background: #fff; border-radius: 5px; padding: 0 25px;">

    <x-section_heading title="We'd love to hear from you" subtitle="Send us a message." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection

@section('script')
<x-lead_form.lead_form_script :share_link_q="$share_link_q" />

<script>
$(document).ready(function() {
    $('.vidContain').css('background', 'none');
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="{{ asset('js/pixi-init.js') }}" defer></script>
<script src="{{ asset('js/pixi-animations.js') }}" defer></script>
<script src="{{ asset('js/pixi-homeanimation.js') }}" defer></script>
<script src="{{ asset('js/easing_functions.js') }}" defer></script>

@endsection