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

{{ define "main" }}
    {{ $pageContext := . }}


    <section id="overview" class="max-w-5xl mx-auto text-center mt-28 mb-16 px-6">
        {{ with .Params.overview }}
            <h2>{{ .titleTop }}<br />{{ .titleBottom }}</h2>
            <p>{{ .description | markdownify }}</p>
        {{ end }}
        <div class="flex flex-wrap justify-content items-stretch text-left mt-16">
            {{ range $item := .Params.overview.items }}
                <div class="w-full lg:w-1/2 p-3">
                    <div class="benefits-item-auto-h card bg-white p-12">
                        <div class="icon-section my-">
                            {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.icon_color) }}
                        </div>
                        <div class="mt-8">
                            <h5>{{ $item.title }}</h5>
                        </div>
                        <div>
                            <p>{{ $item.description | markdownify }}</p>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <section id="announcement" class="max-w-full mx-auto text-center my-8 px-6">
        <div class="flex justify-center rounded-md bg-violet-100">
            <p class="text-center">
                ✨ <span class="font-bold">Signup for private previews:</span> <a href="/product/private-previews/#preview-assist"> AI Assist for Resource Search</a> and
                <a href="/product/private-previews/#preview-import">Pulumi Cloud Resource Import</a> ✨
            </p>
        </div>
    </section>

    <div class="bg-gray-100">
        <section id="ai" class="container mt-16 mb-28 mx-auto text-center px-6">
            {{ with .Params.ai }}
                <div class="p-6 lg:p-28">
                    <h2 class="m-0 p-0">{{ .title }}</h2>
                    <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
                    <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
                    <img class="mx-auto my-8 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights AI" />
                    <div class="w-full flex justify-center items-center">
                        <div class="z-0">
                            <a class="btn-primary" href="/ai">Try it Now</a>
                        </div>
                    </div>
                </div>
            {{ end }}
        </section>
    </div>

    <section id="search " class="my-28 mx-auto text-center px-6">
        {{ with .Params.search }}
            <div class="container mx-auto">
                <div>
                    <h2 class="m-0 p-0">{{ .title }}</h2>
                    <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
                    <p align="center">
                        <iframe
                            width="560"
                            height="315"
                            src="https://www.youtube.com/embed/pMEIX7LmXYo"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen
                        ></iframe>
                    </p>
                    <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
                    <img class="mx-auto my-8 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights Search" />
                </div>
            </div>
        {{ end }}
    </section>

    <section id="quotes" class="w-full my-16">
        <div class="w-full">
            <div class="lg:flex lg:items-stretch justify-center">
                {{ range $item := .Params.quotes.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 justify-between 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="my-4 h-16">
                                    {{ partial "customer-logo.html" (dict "logo" $item.company) }}
                                </div>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="analytics" class="container my-28 mx-auto text-center px-6">
        {{ with .Params.analytics }}
            <div class="card p-6 lg:p-28 bg-white">
                <h2 class="m-0 p-0">{{ .title }}</h2>
                <h4 class="p-0 m-0 text-gray-800">{{ .subtitle }}</h4>
                <div class="max-w-4xl mx-auto my-8">{{ .description | markdownify }}</div>
                <img class="mx-auto my-8 rounded shadow-lg" src="{{ .image }}" alt="Pulumi Insights Analytics" />
            </div>
        {{ end }}
    </section>

    <section id="pricing" class="container mx-auto text-center mt-28 px-6">
        {{ with .Params.pricing }}
            <h2>{{ .title }}</h2>
            <p class="max-w-2xl mx-auto">{{ .description | markdownify }}</p>
            <div class="mt-12">
                <a href="{{ relref $pageContext " /pricing" }}" class="btn-secondary">View Pricing</a>
            </div>
        {{ end }}
    </section>

    <section id="get-started" class="container px-6 lg:px-0 mx-auto my-28 px-6">
        <div class="w-full bg-violet-600 card p-6 lg:p-16 lg:pt-24 text-center">
            <div class="max-w-xl mx-auto">
                <h2 class="text-white hidden lg:block px-0 lg:px-16">{{ .Params.get_started.title }}</h2>
                <h4 class="text-white mt-0 lg:hidden">{{ .Params.get_started.title }}</h4>
                <p class="text-white">{{ .Params.get_started.description }}</p>
                <div class="mt-16">
                    <a class="btn-secondary" href="https://app.pulumi.com/">Sign In</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}