{{ define "hero" }}
    {{ partial "hero" (dict "title" .Params.title ) }}
{{ end }}

{{ define "main" }}
    <section id="overview" class="my-16 relative">
        <div class="shape-background home-build-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-center"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto p-6">
            <h2 class="text-center">{{ .Params.overview.title }}</h2>
            <div class="max-w-3xl mx-auto">
                <div class="card bg-white p-6 my-8">
                    <p>{{ .Params.overview.description }}</p>
                </div>
            </div>
        </div>
    </section>

    <section id="providers" class="my-16 lg:my-32 relative">
        <div class="shape-background home-deploy-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto p-6">
            <h2 class="text-center mb-12">{{ .Params.details.title }}</h2>
            <h3 class="text-center">{{ .Params.details.providers.title }}</h3>
            <div>
                <div class="max-w-3xl mx-auto my-6">
                    <div class="text-center">
                        <p>{{ .Params.details.providers.description }}</p>
                    </div>
                </div>
                <div class="card bg-white p-6">
                    <pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
                        {{ range $item := .Params.details.providers.ide }}
                            <pulumi-choosable type="language" class="highlight" value="{{ $item.language }}">
                                {{ partial "code" (dict "lang" $item.language "code" $item.code "mode" "light") }}
                            </pulumi-choosable>
                        {{ end }}
                    </pulumi-chooser>
                </div>
            </div>
        </div>
    </section>

    <section id="components" class="relative my-16 lg:my-32">
        <div class="container mx-auto p-6">
            <h3 class="text-center">{{ .Params.details.components.title }}</h3>

            <div>
                <div class="max-w-3xl mx-auto my-6">
                    <div class="text-center">
                        <p>{{ .Params.details.components.description }}</p>
                    </div>
                </div>
                <div class="card bg-white p-6">
                    <pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
                        {{ range $item := .Params.details.components.ide }}
                            <pulumi-choosable type="language" class="highlight" value="{{ $item.language }}">
                                {{ partial "code" (dict "lang" $item.language "code" $item.code "mode" "light") }}
                            </pulumi-choosable>
                        {{ end }}
                    </pulumi-chooser>
                </div>
            </div>
        </div>
    </section>

    <section id="benefits" class="container mx-auto my-16 lg:my-24 relative">
        <h2 class="text-center">{{ .Params.benefits.title }}</h2>
        <div class="benefits-section relative">
            <div class="shape-background home-benefits-section">
                <div class="shape-container">
                    <div class="circle-left"></div>
                    <div class="circle-right"></div>
                </div>
            </div>
            <div class="flex flex-wrap">
                {{ range $item := .Params.benefits.items }}
                    <div class="w-full lg:w-1/2 p-6">
                        <div class="card z-10 bg-white p-6">
                            <div class="icon-section">
                                {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.icon_color) }}
                            </div>
                            <div>
                                <h5>{{ $item.title }}</h5>
                            </div>
                            <div class="description">
                                <p>{{ $item.description }}</p>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="case-studies" class="w-full my-16">
        <div class="w-full">
            <h2 class="text-center mb-16">{{ .Params.case_studies.title }}</h2>
            <div class="lg:flex lg:items-stretch">
                {{ range $item := .Params.case_studies.items }}
                    <div class="lg:w-1/3 px-4 mb-12 lg:mb-0">
                        <div class="flex flex-col h-full card p-6 bg-white relative">
                            <p class="text-left mt-0 italic font-semibold text-black">{{ $item.quote }}</p>
                            <div class="flex flex-grow items-end pb-4">
                                <div class="w-2/3 text-left">
                                    <p class="text-black mb-0 text-sm">{{ $item.name }}</p>
                                    <p class="mt-0 text-sm">{{ $item.name_title }}</p>
                                </div>
                                <div class="w-1/3 my-4">
                                    {{ partial "customer-logo.html" (dict "logo" $item.company) }}
                                </div>
                            </div>

                            <div class="card-cta-btn text-center">
                                <a class="btn-primary" href="{{ $item.link }}">Read the case study</a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="get-started" class="my-32 relative">
        <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-12 lg:pt-4 g:pb-12 rounded-xl h-full">
                        <h4 class="text-white">{{ .Params.get_started.browse.title }}</h4>
                        <p class="mb-12 text-white">{{ .Params.get_started.browse.description }}</p>
                        <a href="/registry/" class="btn-secondary">{{ .Params.get_started.browse.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-12 lg:pt-4 g:pb-12 rounded-xl bg-white h-full">
                        <h4>{{ .Params.get_started.publish.title }}</h4>
                        <p class="mb-12">{{ .Params.get_started.publish.description }}</p>
                        <a href="{{ relref . "/docs/using-pulumi/pulumi-packages/#process-of-authoring-a-pulumi-package" }}" class="btn-secondary"
                            >{{ .Params.get_started.publish.cta_text }}</a
                        >
                    </div>
                </div>
            </div>
        </div>
    </section>
{{ end }}