/**
 * Unterkunft — sage section: photo + accommodation advice + a tidy list of
 * (dummy) lodging links. Closing divider layout is Tweakable via `divider`.
 */
function Unterkunft({ title, body, links = [], divider = "below-text" }) {
  return (
    <section
      id="unterkunft"
      className="section section-sage unterkunft"
      data-screen-label="06 Unterkunft">

      <div className="inner">
        <div className="photo-frame photo-frame--wide reveal">
          <image-slot id="unterkunft-photo" placeholder="Foto · Eisenstadt" shape="rect"></image-slot>
        </div>
        <div className="copy reveal">
          <h2>{title}</h2>
          <p>{body}</p>

          {links.length > 0 &&
          <ul className="loc-links">
              {links.map((l) =>
            <li key={l.name}>
                  <a className="loc-link" href={l.url}>
                    <span className="loc-name">{l.name}</span>
                    <span className="loc-place">{l.place}</span>
                    <span className="loc-arrow" aria-hidden="true">→</span>
                  </a>
                </li>
            )}
            </ul>
          }
        </div>
      </div>

      <SectionDivider variant={divider} />
    </section>);
}

if (typeof window !== "undefined") window.Unterkunft = Unterkunft;