{{ define "hero" }}
    <header class="home-page-hero">
        <div class="dot-background-container pointer-events-none">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>
        <div class="home-page-hero-content p-20">
            <div class="w-full flex flex-col items-center justify-center">
                <h1 class="relative">
                    <span class="rainbow-text" data-text="{{ .Params.heading }}">{{ .Params.heading }}</span>
                </h1>
            </div>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <section id="overview" class="sm:mt-24 mb-16 relative">
        <div class="shape-background product-overview-section">
            <div class="shape-container">
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto text-center">
            <div class="w-full p-4">
                <h2>{{ .Params.overview.title | markdownify }}</h2>
            </div>
        </div>
        <div class="container mx-auto">
            <p class="mx-auto text-center text-gray-600 w-6/12">
                {{ .Params.overview.description | markdownify }}
            </p>
        </div>
        <div class="container mx-auto text-center pt-16 w-9/12">
            <a href="/get-started/" class="btn-primary">Get Started</a>
        </div>
    </section>

    <section id="info-graphic" class="relative p-4 mb-16">
        <div class="container mx-auto rounded-xl bg-white">
            <img class="block z-10" src="/images/product/pulumi_marketecture.png" alt="Pulumi Cloud Engineering Platform" />
        </div>
    </section>

    <section id="key-features-above">
        {{ range $index, $feature := .Params.key_features_above.items }}
            <div class="mb-16 pt-8 relative">
                {{ if eq $index 0 }}
                    <div class="shape-background home-background-yellow-left pt-24">
                        <div class="shape-container flex">
                            <div class="circle-left"></div>
                            <div class="circle-right"></div>
                        </div>
                    </div>

                    <div class="container mx-auto mt-16 text-center w-11/12 sm:w-9/12">
                        <h3>{{ $feature.title }}</h3>
                        <div class="flex flex-col lg:flex-row">
                            <div class="w-full my-auto lg:w-1/2 lg:mr-32 z-10 p-8 text-left">
                                <h4>{{ $feature.sub_title}}</h4>
                                <p class="text-lg">{{ $feature.description | markdownify }}</p>
                            </div>
                            <div class="w-full lg:w-1/2 block lg:flex lg:justify-center lg:align-center">
                                <img src="/images/product/pulumi-iac-code.png" alt="Pulumi infrastructure as code example" />
                            </div>
                        </div>
                    </div>
                {{ else }}
                    <div class="shape-background home-background-salmon-right pt-24">
                        <div class="shape-container">
                            <div class="circle-left"></div>
                            <div class="circle-right"></div>
                        </div>
                    </div>

                    <div class="container mx-auto mt-16 text-center w-11/12 sm:w-9/12">
                        <h3>{{ $feature.title }}</h3>
                        <div class="flex flex-col lg:flex-row">
                            <div class="w-full lg:w-1/2 block lg:flex lg:justify-center p-6 md:pl-24 xl:pl-0">
                                <img src="/images/product/pulumi-iac-code.png" alt="Pulumi infrastructure as code example" />
                            </div>
                            <div class="w-full my-auto lg:w-1/2 lg:ml-32 z-10 p-8 text-left">
                                <h4>{{ $feature.sub_title}}</h4>
                                <p class="text-lg">{{ $feature.description | markdownify }}</p>
                            </div>
                        </div>
                    </div>
                {{ end}}

                <div class="max-w-7xl mx-auto flex flex-wrap justify-content items-stretch text-left my-4">
                    {{ range $item := $feature.features }}
                        <div class="w-full lg:w-1/3 p-3">
                            <div class="h-full card bg-white p-8">
                                <div class="icon-section mb-8">
                                    {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.color) }}
                                </div>
                                <div>
                                    <h5>{{ $item.title }}</h5>
                                </div>
                                <div class="mt-6">
                                    <p>{{ $item.description | markdownify }}</p>
                                </div>
                            </div>
                        </div>
                    {{ end }}
                </div>
                <div class="pt-8 text-center">
                    <a href="{{ $feature.button.link }}" class="btn-secondary block sm:inline">{{ $feature.button.text }}</a>
                </div>
            </div>
        {{ end }}
    </section>

    <section id="key-features">
        <div class="shape-background product-features-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        {{ range $item := .Params.key_features.items }}
            <div class="container mx-auto text-center pt-20 w-11/12 sm:w-9/12">
                <h3>{{ $item.title }}</h3>
                <h4>{{ $item.sub_title }}</h4>
                <p class="mx-auto w-9/12 xl:w-7/12 my-12 text-center text-gray-600">
                    {{ $item.description | markdownify }}
                </p>
                <!-- <img class="w-full hidden lg:block z-10" src="{{ $item.image }}" alt="Pulumi Cloud Engineering Platform" /> -->
                {{ if not (eq $item.image nil) }}
                    <div class="max-w-4xl container flex flex-col items-center mx-auto">
                        <img src="{{ $item.image }}" alt="Pulumi infrastructure as code example" />
                    </div>
                {{ end }}
                {{ if not (eq $item.ide nil) }}
                    <div class="max-w-4xl container text-left card bg-white p-6 mx-auto">
                        <pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
                            {{ range $lang := $item.ide }}
                                <pulumi-choosable type="language" class="highlight" value="{{ $lang.language }}">
                                    {{ partial "code" (dict "lang" $lang.language "code" $lang.code "mode" "light") }}
                                </pulumi-choosable>
                            {{ end }}
                        </pulumi-chooser>
                    </div>
                {{ end }}
                <div class="mb-8 my-24">
                    <div class="flex flex-wrap lg:flex-row">
                        {{ range $feature := $item.features }}
                            <div class="w-full lg:w-1/3 px-8 lg:mb-4">
                                <h5>{{ $feature.title }}</h5>
                                <p class="key-feature-description">{{ $feature.description | markdownify }}</p>
                            </div>
                        {{ end }}
                    </div>
                </div>
                <div class="pt-8">
                    <a href="{{ $item.button.link }}" class="btn-secondary block sm:inline">{{ $item.button.text }}</a>
                </div>
            </div>
        {{ end }}
    </section>

    <section id="get-started" class="my-32 relative">
        <div class="shape-background product-get-started-section">
            <div class="shape-container">
                <div class="circle-center"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto">
            <h2 class="mb-8 text-center">{{ .Params.get_started.title }}</h2>

            <div class="lg:flex items-stretch">
                <div class="w-full lg:w-1/2 px-4 py-2 lg:p-8 lg:px-4">
                    <div class="lg:shadow-2xl bg-violet-600 p-8 lg:px-24 lg:pt-4 g:pb-12 rounded-xl">
                        <h4 class="text-white">{{ .Params.get_started.get_started.title }}</h4>
                        <p class="mb-24 text-white">{{ .Params.get_started.get_started.description }}</p>
                        <a href="{{ relref . "/docs/get-started" }}" class="btn-secondary">{{ .Params.get_started.get_started.cta_text }}</a>
                    </div>
                </div>

                <div class="w-full lg:w-1/2 px-4 py-2 lg:p-8 lg:px-4">
                    <div class="border lg:border-none lg:shadow-2xl p-8 lg:px-24 lg:pt-4 g:pb-12 rounded-xl bg-white">
                        <h4>{{ .Params.get_started.migrate.title }}</h4>
                        <p class="mb-16 pb-1">{{ .Params.get_started.migrate.description }}</p>
                        <a href="{{ relref . "/docs/using-pulumi/adopting-pulumi/converters" }}" class="btn-secondary">{{ .Params.get_started.migrate.cta_text }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{{ end }}