<script lang="ts">
  import { accordion } from '$lib/actions/accordion';
  import Icon from '$lib/components/Icon.svelte';
  import { locationPages } from '$lib/content/locations';
  import type { InfoContent } from '$lib/types';

  export let info: InfoContent;

  const slugBySuburb = new Map(locationPages.map((loc) => [loc.suburb, loc.slug]));

  $: suburbChips = info.suburbs
    .split(',')
    .map((suburb) => suburb.trim().replace(/\.$/, ''))
    .filter(Boolean)
    .map((suburb) => ({ name: suburb, slug: slugBySuburb.get(suburb) ?? null }));
</script>

<section id="info">
  <div class="info-inner">
    <div class="info-block">
      <h2><Icon name="fas fa-location-dot" /> {info.title}</h2>
      <p class="info-lead">{info.intro}</p>
      <p class="info-support">Regular walks across the inner-west and nearby suburbs.</p>

      <div class="info-suburb-chips" aria-label="Suburbs we cover">
        {#each suburbChips as { name, slug }}
          {#if slug}
            <a class="info-suburb-chip" href="/locations/{slug}">{name}</a>
          {:else}
            <span class="info-suburb-chip">{name}</span>
          {/if}
        {/each}
      </div>

      <div class="info-nearby-card">
        <div class="info-nearby-copy">
          <span class="info-nearby-kicker">Nearby but not listed?</span>
          <p>{info.nearbyText} There's a good chance we can still help.</p>
        </div>
        <a class="info-nearby-cta" href={info.nearbyCta.href}>{info.nearbyCta.label}</a>
      </div>

      <div class="info-hours-card">
        <h3>{info.hoursLabel}</h3>
        <p>{info.hours}</p>
      </div>
    </div>

    <div class="info-block">
      <h2><Icon name="fas fa-circle-question" /> {info.faqTitle}</h2>
      <div use:accordion class="faq">
        {#each info.faqs as faq}
          <details>
            <summary>{faq.question}</summary>
            <p>{faq.answer}</p>
          </details>
        {/each}
      </div>
    </div>
  </div>
</section>

<style>
  .info-lead {
    margin-bottom: 8px;
  }

  .info-support {
    margin: 0 0 22px;
    color: #5f6369;
  }

  .info-suburb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
  }

  .info-suburb-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.06),
      0 10px 24px rgba(17, 20, 24, 0.04);
    color: var(--gw-green);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  a.info-suburb-chip:hover {
    box-shadow:
      inset 0 0 0 1px rgba(33, 48, 33, 0.25),
      0 10px 24px rgba(17, 20, 24, 0.08);
  }

  .info-nearby-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 22px 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffaf0 0%, #f8f1e3 100%);
    box-shadow: 0 14px 30px rgba(17, 20, 24, 0.05);
  }

  .info-nearby-copy p {
    margin: 6px 0 0;
    color: #4c5056;
  }

  .info-nearby-kicker {
    display: inline-block;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .info-nearby-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--gw-green);
    color: #fff;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .info-hours-card {
    padding-top: 18px;
    border-top: 1px dashed rgba(33, 48, 33, 0.18);
  }

  .info-hours-card h3 {
    margin-top: 0;
  }

  .info-hours-card p {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .info-suburb-chips {
      gap: 8px;
      margin-bottom: 22px;
    }

    .info-suburb-chip {
      min-height: 36px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .info-nearby-card {
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 18px;
    }

    .info-nearby-cta {
      width: 100%;
    }
  }
</style>
