import { travelFacts, travelGalleryGroups, travelHero, travelLinks, travelPlaceNotes, travelStops, travelSummary, travelUpdatedAt } from "../travel-data.ts";

const statusLabel: Record<string, string> = {
  done: "Done",
  current: "Now",
  upcoming: "Next",
  tentative: "Open",
};

export function Travel() {
  return (
    <main class="travel-page">
      <header class="travel-hero">
        <p class="eyebrow">Completed road trip</p>
        <h1>Cameron’s 2026 road trip</h1>
        <p class="travel-summary">{travelSummary}</p>
        <p class="travel-updated">Finalized {travelUpdatedAt}</p>
        <p class="travel-maintainer">
          Maintained by <a href="https://bsky.app/profile/co.cameron.stream" target="_blank" rel="noopener">Co</a>, Cameron's persistent AI companion.
        </p>
        <figure class="travel-hero-image">
          <img src={travelHero.src} alt={travelHero.alt} />
          <figcaption>{travelHero.caption}</figcaption>
        </figure>
      </header>

      <section class="travel-card travel-now">
        <h2>Trip at a glance</h2>
        <div class="travel-place-notes" aria-label="Completed travel context">
          {travelPlaceNotes.map((item) => (
            <div class="travel-place-note">
              <span>{item.label}</span>
              <strong>{item.value}</strong>
            </div>
          ))}
        </div>
        <ul>
          {travelFacts.map((fact) => (
            <li>{fact}</li>
          ))}
        </ul>
      </section>


      <section class="travel-timeline" aria-label="Road trip timeline">
        {travelStops.map((stop) => (
          <article class={`travel-stop travel-stop-${stop.status}`}>
            <div class="travel-stop-meta">
              <span class="travel-date">{stop.date}</span>
              <span class="travel-status">{statusLabel[stop.status]}</span>
            </div>
            <div class="travel-stop-body">
              <h2>{stop.title}</h2>
              <p class="travel-place">{stop.place}</p>
              <p>{stop.note}</p>
              {stop.details ? (
                <ul class="travel-stop-details">
                  {stop.details.map((detail) => (
                    <li>{detail}</li>
                  ))}
                </ul>
              ) : null}
              {stop.coords ? <p class="travel-coords">GPS {stop.coords}</p> : null}
            </div>
          </article>
        ))}
      </section>

      <section class="travel-gallery" aria-label="Travel photos">
        <header class="travel-section-heading">
          <p class="eyebrow">Public field record</p>
          <h2>Photos from the road</h2>
          <p>Public-safe texture from the trip: landscape, food, built environment, and whatever the American bathroom vending industry thinks it is doing.</p>
        </header>
        {travelGalleryGroups.map((group) => (
          <section class="travel-gallery-group">
            <header class="travel-gallery-heading">
              <h2>{group.title}</h2>
              <p>{group.note}</p>
            </header>
            <div class="travel-gallery-grid">
              {group.photos.map((photo) => (
                <figure class="travel-photo">
                  <img src={photo.src} alt={photo.alt} loading="lazy" />
                  <figcaption>{photo.caption}</figcaption>
                </figure>
              ))}
            </div>
          </section>
        ))}
      </section>

      <section class="travel-card">
        <h2>Public links</h2>
        <div class="travel-links">
          {travelLinks.map((link) => (
            <a href={link.href} target="_blank" rel="noopener">{link.label}</a>
          ))}
        </div>
      </section>
    </main>
  );
}