{{ define "main" }}
<div class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-4xl font-extrabold text-gray-100 tracking-tight sm:text-5xl">Work With Me</h1>
        <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
            Professional guidance to fast-track your success.
        </p>
    </div>

    <div class="mt-16 grid gap-8 lg:grid-cols-3">
        {{ range .Pages }}
        <div class="relative bg-gray-800 border border-gray-700 rounded-2xl shadow-sm flex flex-col p-8 hover:shadow-lg transition-shadow">
            <div class="flex-1">
                <h3 class="text-xl font-semibold text-gray-100">{{ .Title }}</h3>
                <p class="mt-4 flex items-baseline text-gray-100">
                    <span class="text-4xl font-extrabold tracking-tight">{{ .Params.price }}</span>
                    {{ if .Params.price_period }}<span class="ml-1 text-xl font-semibold text-gray-400">{{ .Params.price_period }}</span>{{ end }}
                </p>
                <div class="mt-6 text-gray-300 space-y-4 prose prose-emerald">
                    {{ .Content }}
                </div>
            </div>
            <div class="mt-8">
                <a href="{{ .Params.foxy_link | default "#" }}" 
                   class="w-full bg-primary border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-emerald-700 md:text-lg transition-colors">
                   {{ .Params.cta | default "Book Session" }}
                </a>
                <p class="mt-4 text-xs text-gray-400 text-center">Secured by Stripe</p>
            </div>
        </div>
        {{ end }}
    </div>
</div>
{{ end }}