use leptos::*;
use leptos_meta::*;
use crate::components::BookADemo;
use crate::components::Footer;

/// Renders the home page of your application.
#[component]
pub fn ShortLandingPage() -> impl IntoView {
    provide_meta_context();

    view! {
        <Meta property="og:image" content="https://sreez.nationtech.io/assets/sreez_og_banner.png"/>
        <Meta property="og:image:width" content="1200"/>
        <Meta property="og:image:height" content="630"/>

        <div class="margin-x-auto lg-margin-x-3">
            <img src="assets/sreez_logo_shaded_v2.png" aria-label="SREEZ mascot of a cherry because SREEZ sounds like 'cerise' in French which means Cherry" class="max-width-150 margin-top-5"/>
        </div>
        <div class="max-width-900 margin-x-auto">
            <div class="margin-x-1 lg-margin-x-3 text-left">
                <h1 class="margin-y-4">"Accelerate your software delivery with SREEZ."</h1>
                <p class="margin-y-2">"Focus on what really matters."</p>
                <p class="margin-y-2">"Stop being overwhelmed by platform and deployment chores."</p>
                <p class="margin-y-2">"Get our platform deployed and your projects migrated faster than you thought possible."</p>
                <div class="margin-y-4 text-center lg-text-left">
                    <BookADemo text="Book a demo →".to_string() />
                </div>
            </div>
            <div class="card max-width-600 margin-x-auto margin-y-4">
            <span class="material-symbols-outlined card-icon">"key"</span>
            <ul class="text-left list-pad-1">
                <li>"A single dashboard for your infrastructure"</li>
                <li>"Pre-built platform combining the best tools available"</li>
                <li>"Expert platform engineers with decades of DevOps and SRE experience"</li>
                <li>"An all-in-one software delivery platform with services you didn't think you could afford"</li>
            </ul>
            </div>
            <h2 class="margin-top-8">"Deploy in MINUTES, instead of WEEKS : join the Elite with our unique early adopter offer!"</h2>
            <div class="card max-width-600 margin-x-auto margin-top-5">
                <span class="material-symbols-outlined card-icon">"editor_choice"</span>
                <h3 class="pad-y-1">"Get a pioneer seat to be a key part of the SREEZ project's foundation."</h3>
                <p><strong>"What you'll get"</strong></p>
                <ul class="text-left list-pad-1">
                    <li>"20 to 100 hours of expert consulting from our team every month"</li>
                    <li>"Free hosting up to 500 CPUs, 2 000 GB RAM, 150 TB Storage, 128 GB GPU VRAM for AI models"</li>
                    <li>"Full SREEZ platform based on best-in-class open-source tools "</li>
                    <li>"Your features prioritized on the platform"</li>
                    <li>"DevOps and SRE best practices coaching and resources"</li>
                </ul>
            </div>
            <div class="margin-top-5">
                <BookADemo text="Book a demo →".to_string() />
            </div>
            <h2 class="margin-y-8">"Struggling to keep your DevOps tools up to par ?"</h2>
            <div class="lg-lr-sections">
                <div class="card max-width-600 margin-x-auto margin-y-8">
                    <span class="material-symbols-outlined card-icon">"price_change"</span>
                    <p>"With an ever-growing DevOps toolchain,  most teams cannot afford to invest the time and money required to build the pipeline they know they need."</p>
                </div>
                <div class="card max-width-600 margin-x-auto margin-y-8">
                    <span class="material-symbols-outlined card-icon">"stacks"</span>
                    <p>"We fix that by building a unified platform for small and medium teams."</p>
                </div>
                <div class="card max-width-600 margin-x-auto margin-y-8">
                    <span class="material-symbols-outlined card-icon">"waving_hand"</span>
                    <div>
                    <p>"Our platform engineering experts work with you to select the best fitting open-source tools such as"</p>
                    <ul class="text-left list-pad-1">
                        <li>"Kubernetes"</li>
                        <li>"RedHat Developer Hub"</li>
                        <li>"ArgoCD"</li>
                        <li>"Grafana"</li>
                        <li>"HyperDX"</li>
                    </ul>
                    <img src="assets/sreez_stack_logos_flat.png" alt="SREEZ stack logos" class="width-600 max-width-100pct margin-top-2" />
                    </div>
                </div>
                <div class="card max-width-600 margin-x-auto margin-y-8">
                    <span class="material-symbols-outlined card-icon">"engineering"</span>
                    <div>
                    <h3>"Wo do all this for you"</h3>
                    <ul class="text-left list-pad-1">
                        <li>"Migrate your existing applications to the platform"</li>
                        <li>"Coach your team on best practices"</li>
                        <li>"Be the 24/7 first respondants to incidents, only waking you up when it really matters"</li>
                        <li>"Continuously improve your delivery speed, quality and reliability"</li>
                    </ul>
                    </div>
                </div>
            </div>
            <h2 class="margin-y-8">"Get in touch to build the perfect package"</h2>
            <div class="card max-width-600 margin-x-auto margin-top-5">
                <span class="material-symbols-outlined card-icon">"redeem"</span>
                <div>
                <p>"Mix and match our services to create the ideal combination"</p>
                <ul class="text-left list-pad-1">
                    <li>"Sustainable hosting"</li>
                    <li>"Internal Development Platform"</li>
                    <li>"CI/CD Automation"</li>
                    <li>"Hardware planning, ordering and installation"</li>
                    <li>"Process audits and coaching following DevOps principles"</li>
                </ul>
                </div>
            </div>

            <div class="margin-top-5">
                <BookADemo text="Discuss the perfect package".to_string() />
            </div>
        </div>
        <Footer/>
    }
}
