<! This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation: https://dev.to/challenges/frontend-2024-07-24 -->
<header>
  <h1>Welcome to the New York Recreational Cricket League</h1>
  <p>Join us to experience the thrill of cricket right in the heart of New York City!</p>
</header>
<section>
  <h2>About the League</h2>
  <p>The New York Recreational Cricket League (NYRCL) is dedicated to promoting the sport of cricket among New Yorkers of all ages. We offer a friendly but competitive environment where players can improve their skills and enjoy the game.</p>
</section>
<section>
  <h2>How to Join</h2>
  <p>Interested in playing? We welcome players of all skill levels! To join, simply fill out our online registration form on our website, or contact us at join@nyrcl.com for more details.</p>
</section>
<section>
  <h2>League Fees</h2>
  <p>The registration fee for the league is $150 per player, which covers the entire season. This fee includes uniforms, equipment rental, and insurance.</p>
</section>
<section>
  <h2>Location of Games</h2>
  <p>All games are held at the iconic Central Park Cricket Fields, located near the north end of Central Park, easily accessible via public transportation.</p>
</section>
<section>
  <h2>Season Schedule</h2>
  <p>The NYRCL season runs from April through September, with games typically held on weekends. Here is the schedule for the upcoming season:</p>
  <ul>
    <li>Opening Day: April 15th</li>
    <li>Mid-Season Tournament: July 8th-9th</li>
    <li>Season Finals: September 20th</li>
    <li>Closing Ceremony: September 30th</li>
  </ul>
</section>
<footer>
  <p>Contact Us: </p>
  <p>Email: info@nyrcl.com | Phone: (555) 123-4567</p>
  <p>Follow us on our social media pages for updates and more information.</p>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Martian+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");

* {
  box-sizing: border-box;
  font-family: Arial;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0 auto;
  max-width: 1024px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  width: 100vw;
  
  &::after {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 5px;
    color: #fff;
    content: '< swipe >';
    display: inline-block;
    font-family: Bungee;
    font-size: 18px;
    opacity: .7;
    padding: 2px 6px;
    position: fixed;
    right: -70px;
    text-shadow: 2px 2px 2px #000;
    top: 50%;
    transform: rotate(-90deg);
    transform-origin: left top;
  }
}

footer,
header,
section {
  align-items: center;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: 100vh;
  justify-content: start;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  scroll-snap-align: center;
  transition: background-image 3s ease-in-out;
  
  &:first-child {
    background-image: url("https://assets.codepen.io/829639/cricket1.webp?v=1");
  }

  &:nth-child(2) {
    background-image: url("https://assets.codepen.io/829639/cricket2b.webp?v=1");
  }

  &:nth-child(3) {
    background-image: url("https://assets.codepen.io/829639/cricket5.webp?v=1");
  }

  &:nth-child(4) {
    background-image: url("https://assets.codepen.io/829639/cricket4.webp?v=2");
  }

  &:nth-child(5) {
    background-image: url("https://assets.codepen.io/829639/cricket-location.webp?v=2");
  }

  &:nth-child(6) {
    background-image: url("https://assets.codepen.io/829639/cricket6.webp?v=2");
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      list-style-type: none;
      margin: 20px auto;
      padding: 0;
      row-gap: 40px;
      align-content: stretch;

      li {
        align-items: bottom;
        aspect-ratio: 1/1;
        background-color: rgba(230, 173, 216, 0.9);
        background-position: center 70%;
        background-repeat: no-repeat;
        background-size: 40%;
        border: 2px solid #fff;
        border-radius: 8px;
        color: darkred;
        cursor: pointer;
        font-family: Bungee;
        font-size: 16px;
        margin-top: -20px;
        max-width: 172px;
        padding: 8px 12px;
        position: relative;
        text-shadow: 1px 1px 1px #fff;

        &:hover {
          background-color: rgba(235, 178, 221, 1);
          border-color: gold;
        }

        &:nth-child(1) {
          background-image: url("https://assets.codepen.io/829639/icon1.png?v=3");
        }

        &:nth-child(2) {
          background-image: url("https://assets.codepen.io/829639/icon2.png?v=7");
        }

        &:nth-child(3) {
          background-image: url("https://assets.codepen.io/829639/icon3.png?v=6");
        }

        &:nth-child(4) {
          background-image: url("https://assets.codepen.io/829639/icon4.png?v=5");
          background-position: center bottom;
          background-size: 60%;
        }
        
        .open-icon {
          background-color: rgba(255, 255, 255, .6);
          border-radius: 3px;
          bottom: 8px;
          left: 8px;
          padding: 4px;
          position: absolute;
        }
      }
    }
  }
}

p {
  background: rgba(173, 216, 230, 0.9);
  border-radius: 10px;
  color: #000;
  font-family: "Martian Mono";
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  margin: 18px 50px 60px 50px;
  padding: 10px 20px;
  text-shadow: 1px 1px 2px #fff;

  a:link,
  a:visited {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 4px;
    padding: 2px 6px;
  }
}

p,
ul {
  align-self: end;
}

h1 {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  color: orange;
  font-family: Bungee;
  font-size: 38px;
  hyphens: manual;
  justify-self: start;
  line-height: 38px;
  margin: 20px;
  overflow-wrap: break-word;
  padding: 10px 15px;
  text-align: center;
  text-shadow: 2px 2px 1px #000;
  width: 55%;
}

h2, footer p:first-child {
  background: linear-gradient(to right, rgba(0,0,0, 0.8), transparent);
  border-radius: unset;
  color: orange;
  font-family: Bungee;
  font-size: 50px;
  justify-self: start;
  left: 0;
  line-height: 36px;
  margin: 0;
  opacity: 1;
  padding: 40px 20px 0 20px;
  position: -webkit-sticky;
  position: sticky;
  text-shadow: 2px 0px 1px #333;
  top: 0;
  transition: opacity 3s ease-in-out;
  width: 100%;
}

footer {
  background-image: url("https://assets.codepen.io/829639/cricket7.webp?v=3");
  background-position: top center;
  color: #fff;
}

.snapped {
  font-size: 30px;
}

.info:link,
.info:visited {
  background-color: #bbb;
  border: 1px outset #000;
  border-radius: 0 0 5px 5px;
  color: #00;
  font-size: 10px;
  padding: 2px 8px;
  position: absolute;
  right: 20px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #fff;
  top: 0;
  z-index: 1;
}

@media (min-width: 628px) {
  h1 {
    font-size: 38px;
    line-height: 38px;
  }
}


@media (min-width: 768px) {
  footer,
  header,
  section {
    ul li {
      width: calc(25% - 16px);
    }
  }

  h1 {
    font-size: 48px;
    line-height: 48px;
  }
}

/* Some hacky hacks just for Codepen embeds */
@media (max-height: 600px) {
  main > section > ul {
    li {
      background-position: 90% 90% !important;
      background-size: 20% !important;
      width: 140px;
      
      &:last-child {
        background-size: 30% !important;
      }
    }
  }

  h1 {
    font-size: 38px;
    line-height: 38px;
  }
}

function patchDomWithMain() {
  const children = document.body.children;
  const main = document.createElement("main");
  Array.from(children).forEach((child) => main.appendChild(child));
  document.body.appendChild(main);
}

function modParagraphContent() {
  const paragraphs = document.querySelectorAll("p");

  paragraphs.forEach((p) => {
    let content = p.innerHTML;

    const emailPattern = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/g;
    const phonePattern = /(\(\d{3}\)\s?\d{3}[-.]\d{4}|\b\d{3}[-.]\d{3}[-.]\d{4}\b)/g;
    content = content.replace(emailPattern, '<a href="mailto:$1">$1</a>');
    content = content.replace(phonePattern, '<a href="tel:$1">$1</a>');
    content = content.replace(
      /(Central Park Cricket Fields)/,
      '<a href="https://www.nycgovparks.org/facilities/cricket">$1</a>'
    );

    p.innerHTML = content;
  });
}

function addListItemClickHandler() {
  const listItems = document.querySelectorAll("li");
  const openIcon = document.createElement("img");

  openIcon.src =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==";
  openIcon.alt = "open icon";
  openIcon.className = "open-icon";

  listItems.forEach((item) => {
    let url = "https://www.google.com/calendar/render?action=TEMPLATE&";
    const content = item.innerText;

    if (/Opening Day: April 15th/.test(content)) {
      url +=
        "text=NYRCL%20Opening%20Day&details=Save%20the%20Date%3A%20The%20NYRCL%20Opening%20Day&location=Central%20Park%20Cricket%20Fields&dates=20240415/20240415";
    } else if (/Mid-Season Tournament: July 8th-9th/.test(content)) {
      url +=
        "text=NYRCL%20Mid-Season%20Tournament&details=Save%20the%20Date%3A%20The%20NYRCL%20Mid-Season%20Tournament&location=Central%20Park%20Cricket%20Fields&dates=20240708/20240710";
    } else if (/Season Finals: September 20th/.test(content)) {
      url +=
        "text=NYRCL%20Season%20Finals&details=Save%20the%20Date%3A%20The%20NYRCL%20Season%20Finals&location=Central%20Park%20Cricket%20Fields&dates=20240920/20240920";
    } else if (/Closing Ceremony: September 30th/.test(content)) {
      url +=
        "text=NYRCL%20Closing%20Ceremony&details=Save%20the%20Date%3A%20The%20NYRCL%20Closing%20Ceremony&location=Central%20Park%20Cricket%20Fields&dates=20240930/20240930";
    }

    if (url) {
      item.addEventListener("click", () => window.open(url));
      item.appendChild(openIcon.cloneNode());
    }
  });
}

function addMoreInfo() {
  const parent = document.querySelector('header')
  const a = document.createElement("a");
  a.className = 'info'
  a.href = 'https://dev.to/horaceshmorace/fighting-friggin-crickets-for-fun-and-profit-1pn7'
  a.target = '_blank'
  a.innerText = 'WTF is this?'
  parent.append(a)
}

patchDomWithMain();
modParagraphContent();
addListItemClickHandler();
addMoreInfo();