---
import type { Event, EventPageEntry } from "../data/events";
import {
  barcampParticipants,
  barcampParticipantsSheetUrl,
  barcampProposalDocUrl,
  barcampRegistrationUrl,
  barcampTracks,
  barcampWhatsappCommunityUrl,
  getBarcampTrackScheduleGroups,
} from "../data/barcamp";
import { getEventBasePath } from "../data/events";
import { getEventNavItems } from "../data/eventNav";
import SiteLayout from "../layouts/SiteLayout.astro";

type Props = {
  event: Event;
  pageEntry?: EventPageEntry;
};

const { event } = Astro.props;
const basePath = getEventBasePath(event);
const pageEntry = Astro.props.pageEntry ?? {
  id: "overview",
  label: "Overview",
  href: basePath,
  type: "overview",
};
const eventTitle = event.shortTitle ?? event.title;
const isOverview = pageEntry.type === "overview";
const pageTitle = isOverview ? eventTitle : `${pageEntry.label} - ${eventTitle}`;
const navItems = getEventNavItems(event);
const trackScheduleGroups = {
  "track-a": getBarcampTrackScheduleGroups("track-a"),
  "track-b": getBarcampTrackScheduleGroups("track-b"),
};
---

<SiteLayout
  title={pageTitle}
  description={event.summary}
  theme="barcamp"
  brandHref={basePath}
  brandTitle={eventTitle}
  brandSubtitle=""
  navItems={navItems}
>
  {isOverview ? (
    <section class="barcamp-hero">
      <div class="barcamp-hero__copy">
        <p class="eyebrow">Unconference / July 18, 2026</p>
        <h1>Barcamp 2026</h1>
        <p class="barcamp-hero__intro">
          Barcamp is an un-conference that anybody can attend and where anybody can speak
          about anything. There are no attendees. Only participants. If you are not
          talking, you are helping out one way or another.
        </p>
        <div class="hero-actions">
          <a
            class="button button--barcamp"
            href={barcampRegistrationUrl}
            target="_blank"
            rel="noreferrer"
          >
            Register Now
          </a>
          <a
            class="button button--secondary"
            href={barcampWhatsappCommunityUrl}
            target="_blank"
            rel="noreferrer"
          >
            Join the WhatsApp Community
          </a>
          <a
            class="button button--secondary"
            href={barcampProposalDocUrl}
            target="_blank"
            rel="noreferrer"
          >
            Propose A Session
          </a>
        </div>
      </div>
      <div
        class="barcamp-board"
        aria-hidden="true"
      >
        <span class="barcamp-board__rail"></span>
        <span class="barcamp-board__card barcamp-board__card--one">Track A</span>
        <span class="barcamp-board__card barcamp-board__card--two">Track B</span>
        <span class="barcamp-board__card barcamp-board__card--three">Demos</span>
        <span class="barcamp-board__card barcamp-board__card--four">BoF</span>
        <span class="barcamp-board__pin barcamp-board__pin--one"></span>
        <span class="barcamp-board__pin barcamp-board__pin--two"></span>
      </div>
    </section>
  ) : (
    <section class="event-page-heading event-page-heading--barcamp">
      <nav class="event-breadcrumb" aria-label="Event breadcrumb">
        <a class="event-breadcrumb__event" href={basePath}>{eventTitle}</a>
        <span aria-hidden="true">/</span>
        <span>{pageEntry.label}</span>
      </nav>
      <h1>{pageEntry.label}</h1>
    </section>
  )}

  {isOverview && (
    <div class="barcamp-page">
      <section class="barcamp-facts" aria-label="Event facts">
        <dl>
          <div>
            <dt>Date</dt>
            <dd>July 18, 2026</dd>
          </div>
          <div>
            <dt>Time</dt>
            <dd>9:30 AM - 6:00 PM</dd>
          </div>
          <div>
            <dt>Venue</dt>
            <dd>IIT Gandhinagar, AB 7/101-104</dd>
          </div>
          <div>
            <dt>Participation</dt>
            <dd>Sheet open until July 14</dd>
          </div>
        </dl>
      </section>

      <section class="barcamp-card-grid" aria-label="Barcamp format">
        <article>
          <span aria-hidden="true">01</span>
          <h3>Propose a session</h3>
          <p>
            Add your name to the{" "}
            <a href={barcampParticipantsSheetUrl} target="_blank" rel="noreferrer">
              participation list
            </a>,
            then add your topic and a brief description to the{" "}
            <a href={barcampProposalDocUrl} target="_blank" rel="noreferrer">
              talk list
            </a>.
          </p>
        </article>
        <article>
          <span aria-hidden="true">02</span>
          <h3>Claim slots on the day</h3>
          <p>
            The session wiki opens at the venue. Speakers show up and add their names
            to an available room and slot.
          </p>
        </article>
        <article>
          <span aria-hidden="true">03</span>
          <h3>Move freely</h3>
          <p>
            This is not a captive audience. Everybody is free to move out of any talk
            at any time.
          </p>
        </article>
      </section>

      <section class="barcamp-faq" aria-labelledby="barcamp-faq-heading">
        <div class="barcamp-faq__head">
          <div>
            <p class="eyebrow">Barcamp basics</p>
            <h2 id="barcamp-faq-heading">Questions people usually ask.</h2>
          </div>
        </div>

        <div class="barcamp-qa-grid">
          <article class="barcamp-qa">
            <h3>Can I really talk about anything?</h3>
            <p>
              For all practical purposes, yes. If we think you are trying to start a riot,
              or if we think your talk would lead to any crowd control issues, we will not
              be able to host your session.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>But what should I talk about?</h3>
            <p>
              Preferably something that other people find interesting. This is not a captive
              audience; everybody is free to move out of any talk at any time.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>Nice, I would like to talk. How do I sign up?</h3>
            <p>
              First, add your name to the{" "}
              <a href={barcampParticipantsSheetUrl} target="_blank" rel="noreferrer">
                participation list
              </a>.
              Then add your topic and a brief description to the{" "}
              <a href={barcampProposalDocUrl} target="_blank" rel="noreferrer">
                talk list
              </a>.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>I would just like to attend. How do I sign up?</h3>
            <p>
              You do not. There are no attendees. Only participants. If you are not
              talking, you are helping out one way or another.{" "}
              <a href={barcampRegistrationUrl} target="_blank" rel="noreferrer">
                Register Now
              </a>.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>What do I pay to participate?</h3>
            <p>
              Nothing. But we will not begrudge you bringing in some swag. We are suckers
              for freebies.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>Can I do my sales pitch here?</h3>
            <p>
              Sure, but you are going to be talking to a bunch of people who are likely to
              get annoyed and leave once they figure out this is a sales pitch. So you have
              no incentive to do this.
            </p>
          </article>
        </div>
      </section>

      <section class="barcamp-section barcamp-section--schedule">
        <div>
          <p class="eyebrow">Schedule</p>
          <h2>The session wiki decides the day.</h2>
        </div>
        <div class="barcamp-section__copy">
          <p>
            There will be three rooms at the venue. Each room is a track. We set up a
            whiteboard with time slots for each track; this is called the session wiki.
            Speakers show up and add their names to a room and slot of their choice that
            is available.
          </p>
          <p>
            Each time slot is 20 minutes long, with 10 minutes after the slot for
            switch-over. Time slots are strictly enforced; there are no exceptions.
          </p>
          <p>
            There are also informal areas: staircases, verandahs, hallways, and other
            nearby spaces. These are BoF sessions. Speakers can note these on the session
            wiki as well. There are no time limits for these, but please do not be a
            crowd-control headache. We will nudge you out, or ask you to find another
            place to talk.
          </p>
          <p>
            Want to host a talk for longer than 20 minutes? Keep it short. Seriously. If
            somehow you are able to convince people to listen beyond 20 minutes, go host a
            BoF session.
          </p>
        </div>
      </section>

      <section class="barcamp-faq barcamp-faq--practical" aria-labelledby="barcamp-practical-heading">
        <div class="barcamp-faq__head">
          <div>
            <p class="eyebrow">Practicalities</p>
            <h2 id="barcamp-practical-heading">Food, stay, sponsorship, and what next.</h2>
          </div>
        </div>

        <div class="barcamp-qa-grid">
          <article class="barcamp-qa barcamp-qa--wide">
            <h3>This is cool. Whom do I discuss with for sponsorship slots?</h3>
            <p>
              Due to the very open and liberal nature of this event, we do not do classical
              sponsorships. Sponsorships come with expectations around sponsored talks,
              stalls, and audience lists, all of which participants tend to avoid.
            </p>
            <p>
              Regardless, if you would like to put in some money with no strings attached,
              or perhaps pay for travel or stay for some participants or buy some food
              during the event, please email{" "}
              <a href="mailto:neeldhara.misra@gmail.com">neeldhara.misra@gmail.com</a>.
            </p>
          </article>
          <article class="barcamp-qa barcamp-qa--wide">
            <h3>I am coming in from outside the city. Where do I stay?</h3>
            <p>
              There are some hotels nearby: Fortune Haveli Inn, GIFT City Club, Grand
              Mercure, and The Fern.
            </p>
            <p>
              If you would like to be hosted at the campus guest house, please indicate as
              much when you add yourself to the sheet. A limited number of slots will be
              available and they will be prioritized for speakers and organizers. Names
              added to the waitlist on a given day will be batched and sent for reservations
              the next day, so confirmations should come quickly.
            </p>
            <p>
              If you stay near the venue and are happy to host a Barcamper or two, please
              email{" "}
              <a href="mailto:neeldhara.misra@gmail.com">neeldhara.misra@gmail.com</a>.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>Where do I get food?</h3>
            <p>
              There are canteens close to the venue, there is a student mess where you can
              walk in, and you can Zomato or Swiggy some grub as well.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>How many people are going to show up?</h3>
            <p>
              This is not a classical corporate or academic event with a ton of planning.
              We are generally happy for a few dozen people to show up. Due to venue
              capacity limits, the participation sheet will close at 200 participants.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>I have something interesting to talk about, but I have stage fright.</h3>
            <p>
              Do not worry; talk to an organizer. We are mostly a bunch of introverted
              nerds. We will try to pair you up with someone you can go tandem with or set
              you up on a fireside chat.
            </p>
          </article>
          <article class="barcamp-qa">
            <h3>What next?</h3>
            <p>
              Join the{" "}
              <a href={barcampWhatsappCommunityUrl} target="_blank" rel="noreferrer">
                WhatsApp community
              </a>,
              invite interesting people to attend, and share a link to this page with
              them.
            </p>
          </article>
        </div>
      </section>

      <section class="barcamp-cta">
        <div>
          <p class="eyebrow">Participation</p>
          <h2>Register, join the community, and show up early.</h2>
          <p>
            The participant sheet helps us plan room capacity, campus entry, and updates.
            Session slots are claimed on the day, so arrive early if you really want to talk.
          </p>
        </div>
        <div class="barcamp-cta__actions">
          <a
            class="button button--barcamp"
            href={barcampRegistrationUrl}
            target="_blank"
            rel="noreferrer"
          >
            Register Now
          </a>
          <a
            class="button button--secondary"
            href={barcampWhatsappCommunityUrl}
            target="_blank"
            rel="noreferrer"
          >
            Join the WhatsApp Community
          </a>
          <a
            class="button button--secondary"
            href={barcampProposalDocUrl}
            target="_blank"
            rel="noreferrer"
          >
            Propose A Session
          </a>
        </div>
      </section>
    </div>
  )}

  {pageEntry.id === "participants" && (
    <div class="event-shell event-shell--single barcamp-shell">
      <section class="barcamp-participants" aria-label="Participants">
        <div class="barcamp-participant-grid">
          {barcampParticipants.map((person) => (
            <article class="barcamp-participant">
              <h3>{person.name}</h3>
            </article>
          ))}
        </div>
      </section>
    </div>
  )}

  {pageEntry.id === "schedule" && (
    <div class="event-shell event-shell--single barcamp-shell">
      <section
        class="barcamp-schedule"
        data-barcamp-schedule
      >
        <div class="barcamp-schedule__head">
          <div>
            <p class="eyebrow">Schedule</p>
            <h2>Propose now. Pick slots on the day.</h2>
          </div>
          <p>
            Add session ideas to the talk list before the event.
            Time slots are assigned in person on the room whiteboard, first come
            first served.
          </p>
        </div>

        <div class="barcamp-proposal-callout">
          <div>
            <h3>Have something you might want to run?</h3>
            <p>
              Put the topic and a short high-level description in the talk list
              so other participants can read it before they arrive. This is not a
              time-slot booking; the schedule stays intentionally fluid until the day.
            </p>
          </div>
          <a
            class="button button--barcamp"
            href={barcampProposalDocUrl}
            target="_blank"
            rel="noreferrer"
            aria-label="Open the Barcamp 2026 session proposal sheet"
          >
            Propose A Session
          </a>
        </div>

        <div class="barcamp-tablist" role="tablist" aria-label="Schedule tracks">
          {barcampTracks.map((track, index) => (
            <button
              type="button"
              role="tab"
              id={`tab-${track.id}`}
              aria-controls={`panel-${track.id}`}
              aria-selected={index === 0 ? "true" : "false"}
              tabindex={index === 0 ? "0" : "-1"}
              data-track-tab={track.id}
              aria-label={`${track.label}, room ${track.room}`}
            >
              <span class="barcamp-tab-title">{track.label}</span>
              <span class="barcamp-tab-room">Room {track.room}</span>
            </button>
          ))}
        </div>

        {barcampTracks.map((track, index) => (
          <section
            class="barcamp-track-panel"
            id={`panel-${track.id}`}
            role="tabpanel"
            tabindex="0"
            aria-labelledby={`tab-${track.id}`}
            data-track-panel={track.id}
            hidden={index !== 0}
          >
            <div class="barcamp-track-panel__intro">
              <div class="barcamp-track-panel__title">
                <h3>{track.label} <span>Room {track.room}</span></h3>
              </div>
              <p>{track.description}</p>
            </div>

            {track.id === "workshops" ? (
              <div class="barcamp-workshops">
                <h3>Coming soon</h3>
                <p>
                  Workshop and birds-of-a-feather sessions will be listed here once
                  the workshop board opens. Watercooler space is in 7/104.
                </p>
              </div>
            ) : (
              <div class="barcamp-slot-groups">
                {trackScheduleGroups[track.id].map((group) => (
                  <section class="barcamp-slot-group" aria-labelledby={`${track.id}-${group.id}-heading`}>
                    <div class="barcamp-slot-group__head">
                      <h4 id={`${track.id}-${group.id}-heading`}>{group.label}</h4>
                      {group.note && <p>{group.note}</p>}
                    </div>
                    <ol class="barcamp-slot-list">
                      {group.items.map((item) => (
                        <li
                          class:list={["barcamp-slot", item.kind === "fixed" && "barcamp-slot--fixed"]}
                        >
                          <time>{item.time}</time>
                          <div class="barcamp-slot__body">
                            <h5>{item.title}</h5>
                            {item.kind === "fixed" && "note" in item && item.note && <p>{item.note}</p>}
                          </div>
                        </li>
                      ))}
                    </ol>
                  </section>
                ))}
              </div>
            )}
          </section>
        ))}
      </section>
    </div>
  )}

  {pageEntry.id === "schedule" && (
    <script is:inline>
      const scheduleRoot = document.querySelector("[data-barcamp-schedule]");

      if (scheduleRoot) {
        const tabs = Array.from(scheduleRoot.querySelectorAll("[data-track-tab]"));
        const panels = Array.from(scheduleRoot.querySelectorAll("[data-track-panel]"));

        const activateTrack = (trackId) => {
          tabs.forEach((tab) => {
            const isActive = tab.getAttribute("data-track-tab") === trackId;
            tab.setAttribute("aria-selected", isActive ? "true" : "false");
            tab.setAttribute("tabindex", isActive ? "0" : "-1");
          });

          panels.forEach((panel) => {
            panel.hidden = panel.getAttribute("data-track-panel") !== trackId;
          });
        };

        tabs.forEach((tab, index) => {
          tab.addEventListener("click", () => {
            activateTrack(tab.getAttribute("data-track-tab"));
          });

          tab.addEventListener("keydown", (event) => {
            const keyMap = {
              ArrowRight: 1,
              ArrowLeft: -1,
            };

            if (event.key === "Home" || event.key === "End" || event.key in keyMap) {
              event.preventDefault();
              const nextIndex =
                event.key === "Home"
                  ? 0
                  : event.key === "End"
                    ? tabs.length - 1
                    : (index + keyMap[event.key] + tabs.length) % tabs.length;
              const nextTab = tabs[nextIndex];
              nextTab.focus();
              activateTrack(nextTab.getAttribute("data-track-tab"));
            }
          });
        });
      }
    </script>
  )}
</SiteLayout>
