{{ define "main" }}
<div class="bg-[url('/images/devon_starfield.png')] bg-cover bg-fixed min-h-screen flex flex-col items-center justify-center p-4">
  <div class="text-center max-w-4xl mx-auto">
    <!-- Logo/Banner Image -->
    <figure class="flex justify-center items-center mb-8">
      {{ $eventBanner := "/images/hmb/boston-light-mode.svg" }}
      {{ if .Params.Image }}
        {{ $eventBanner = .Params.Image }}
      {{ end }}
      {{ partial "image" (dict "Src" $eventBanner "Alt" .Title "Class" "w-1/2 md:w-2/5 mb-6" ) }}
    </figure>

    <!-- Title and Subtitle -->
    <h1 class="text-3xl md:text-5xl font-bold text-white mb-4 boston-color">{{ .Title | default "Handmade Boston" }}</h1>
    <p class="text-lg text-white text-center mb-12 max-w-2xl mx-auto">{{ .Params.subtitle | default "A conference for low-level programmers" }}</p>

    <!-- Event Details Card -->
    <div class="bg-black bg-opacity-50 backdrop-blur-sm p-8 rounded-xl shadow-lg mb-12 max-w-3xl mx-auto">
      <!-- Date and Location Section -->
      <div class="grid md:grid-cols-2 gap-8 mb-10">
        <!-- Dates -->
        <div class="text-center">
          <div class="inline-block bg-[#1a1a1a] p-4 rounded-lg mb-4">
            <i class="fa fa-calendar text-2xl text-[#e63946]"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-semibold text-white mb-2">Conference Dates</h2>
          <p class="text-lg text-gray-200">{{ .Params.event_dates | default "June 10-11, 2025" }}</p>
          {{ if .Params.registration_date }}
          <p class="text-sm text-gray-400 mt-2">Submission deadline: {{ .Params.registration_date }}</p>
          {{ end }}
        </div>

        <!-- Location -->
        <div class="text-center">
          <div class="inline-block bg-[#1a1a1a] p-4 rounded-lg mb-4">
            <i class="fa fa-map-marker text-2xl text-[#e63946]"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-semibold text-white mb-2">Location</h2>
          <p class="text-lg text-gray-200">{{ .Params.venue_name | default "MIT Stata Center" }}</p>
          <p class="text-gray-300">{{ .Params.venue_address | default "32 Vassar St, Cambridge, MA 02139" }}</p>
        </div>
      </div>

      <!-- Coming Soon Banner -->
      <div class="bg-[#1a1a1a] p-6 rounded-lg text-center mb-8">
        <h3 class="text-xl font-semibold text-white mb-2">{{ .Params.coming_soon_text | default "Schedule Coming Soon" }}</h3>
        <p class="text-gray-300">{{ .Params.coming_soon_description | default "We're finalizing an amazing lineup of speakers and workshops." }}</p>
      </div>

      <!-- Initial Speakers Section (if available) -->
      {{ if .Params.initial_speakers }}
      <div class="mt-6">
        <h3 class="text-xl font-semibold text-white mb-4 text-left">Speaker Lineup</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          {{ range .Params.initial_speakers }}
          <div class="bg-[#1a1a1a] p-4 rounded-lg flex items-center">
            {{ if .image }}
            <img src="{{ .image }}" alt="{{ .name }}" class="w-16 h-16 rounded-full object-cover mr-4">
            {{ else }}
            <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mr-4">
              <i class="fa fa-user text-gray-400 text-xl"></i>
            </div>
            {{ end }}
            <div class="text-left">
              <h4 class="text-white font-medium">{{ .name }}</h4>
              <p class="text-gray-300 text-sm">{{ .topic }}</p>
              {{ if .affiliation }}
              <p class="text-gray-400 text-xs">{{ .affiliation }}</p>
              {{ end }}
            </div>
          </div>
          {{ end }}
        </div>
      </div>
      {{ end }}
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-wrap justify-center gap-4 mb-12">
      {{ if .Params.enable_newsletter }}
      <a href="{{ .Params.newsletter_link | default "#" }}" class="px-6 py-3 bg-[#e63946] hover:bg-[#d62b39] text-white font-medium rounded-md transition-colors">
        <i class="fa fa-envelope mr-2"></i> Join Our Newsletter
      </a>
      {{ end }}

      {{ if .Params.enable_discord }}
      <a href="{{ .Params.discord_link | default "https://chat.handmadecities.com" }}" class="px-6 py-3 bg-[#5865F2] hover:bg-[#4752c4] text-white font-medium rounded-md transition-colors">
        <i class="fa-brands fa-discord mr-2"></i> Join Our Discord
      </a>
      {{ end }}

      {{ if .Params.enable_cfp }}
      <a href="{{ .Params.cfp_link | default "#" }}" class="px-6 py-3 bg-[#2a9d8f] hover:bg-[#238b7e] text-white font-medium rounded-md transition-colors">
        <i class="fa fa-microphone mr-2"></i> Submit a Talk
      </a>
      {{ end }}
    </div>

    <!-- Event Description -->
    {{ if .Params.show_description }}
    <div class="bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg max-w-3xl mx-auto mb-12">
      <h3 class="text-xl font-semibold text-white mb-4">About this Handmade Conference</h3>
      <div class="text-gray-200 text-left prose prose-invert max-w-none">
        {{ .Content }}
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}