<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import { reveal } from '$lib/actions/reveal';
  import BookingSection from '$lib/components/BookingSection.svelte';
  import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { ServicePageContent, SiteSharedContent } from '$lib/types';

  export let content: SiteSharedContent;
  export let pageContent: ServicePageContent;
  export let currentPath = '';

  function numericPrice(price: string) {
    const value = Number(price.replace(/[^0-9.]/g, ''));
    return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY;
  }

  function decoratePlans<T extends { price: string }>(plans: T[]) {
    const sorted = [...plans]
      .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) }))
      .sort((a, b) => a.value - b.value || a.index - b.index);

    const cheapestIndex = sorted[0]?.index ?? -1;
    const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order]));

    return plans.map((plan, index) => ({
      ...plan,
      isPopular: index === cheapestIndex,
      mobileOrder: mobileOrder.get(index) ?? index
    }));
  }

  $: heroEnhanced = getEnhancedImage(pageContent.hero.imageUrl);
  $: highlightEnhanced = pageContent.highlight ? getEnhancedImage(pageContent.highlight.imageUrl) : null;
  $: highlightCollageImages =
    pageContent.highlight?.collageImages?.map((image) => ({
      ...image,
      enhanced: getEnhancedImage(image.imageUrl)
    })) ?? [];
  $: relatedServices = content.services.filter((s) => s.href && s.href !== currentPath);
  $: pricingPlans = decoratePlans(pageContent.pricing.plans);

  $: relatedCards = [
    ...relatedServices.map((s) => ({
      icon: s.icon,
      title: s.title,
      body: s.body,
      href: s.href as string,
      priceFrom: s.priceFrom,
      pill: undefined as string | undefined
    })),
    {
      icon: 'fas fa-tags',
      title: 'Our Pricing',
      body: 'Compare every service and add-on in one place.',
      href: '/our-pricing',
      priceFrom: undefined,
      pill: 'All services'
    }
  ];
</script>

<main class="service-page">
  <section class="service-hero">
    <div class="service-inner service-hero-grid">
      <div class="service-hero-copy">
        <p class="eyebrow">{pageContent.hero.eyebrow}</p>
        <h1>{pageContent.hero.title}</h1>

        {#each pageContent.hero.paragraphs as paragraph}
          <p>{paragraph}</p>
        {/each}
      </div>

      <div class="service-hero-media">
        {#if heroEnhanced}
          <enhanced:img
            src={heroEnhanced}
            alt={pageContent.hero.imageAlt}
            loading="eager"
            fetchpriority="high"
            decoding="async"
          />
        {:else}
          <img
            src={pageContent.hero.imageUrl}
            alt={pageContent.hero.imageAlt}
            loading="eager"
            fetchpriority="high"
            decoding="async"
          />
        {/if}
      </div>
    </div>
  </section>

  {#if pageContent.highlight}
    <section use:reveal class="service-highlight reveal-block">
      <div class="service-inner service-highlight-copy">
        <p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
        <h2>{pageContent.highlight.title}</h2>
      </div>

      <div class="service-inner">
        {#if highlightCollageImages.length}
          <div class="service-highlight-collage" aria-label={pageContent.highlight.title}>
            {#each highlightCollageImages as image, index}
              <figure class={`service-collage-card service-collage-card-${index + 1}`}>
                {#if image.enhanced}
                  <enhanced:img src={image.enhanced} alt={image.imageAlt} loading="lazy" decoding="async" />
                {:else}
                  <img src={image.imageUrl} alt={image.imageAlt} loading="lazy" decoding="async" />
                {/if}
              </figure>
            {/each}
          </div>
        {:else}
          <div class="service-highlight-image">
            {#if highlightEnhanced}
              <enhanced:img
                src={highlightEnhanced}
                alt={pageContent.highlight.imageAlt}
                loading="lazy"
                decoding="async"
              />
            {:else}
              <img
                src={pageContent.highlight.imageUrl}
                alt={pageContent.highlight.imageAlt}
                loading="lazy"
                decoding="async"
              />
            {/if}
          </div>
        {/if}
      </div>
    </section>
  {/if}

  <section use:reveal class="service-pricing reveal-block">
    <div class="service-inner">
      <div class="service-section-heading">
        <h2>{pageContent.pricing.title}</h2>
        {#if pageContent.pricing.intro}
          <p>{pageContent.pricing.intro}</p>
        {/if}
      </div>

      <div class:service-plan-grid-three={pageContent.pricing.plans.length === 3} class="service-plan-grid">
        {#each pricingPlans as plan}
          <article
            class:service-plan-popular={plan.isPopular}
            class="service-plan-card"
            style={`--mobile-order:${plan.mobileOrder};`}
          >
            {#if plan.isPopular}
              <span class="service-plan-ribbon">Popular</span>
            {/if}

            <h3>{plan.title}</h3>
            <div class="service-plan-price">{plan.price}</div>
            <p class="service-plan-period">{plan.period}</p>

            <ul class="service-plan-features">
              {#each plan.features as feature}
                <li>{feature}</li>
              {/each}
            </ul>

            <a class="btn btn-yellow service-plan-cta" href="#newlead">Book a Meet &amp; Greet</a>
          </article>
        {/each}
      </div>

      {#if pageContent.pricing.scarcityNote}
        <p class="service-plan-scarcity">
          <Icon name="fas fa-clock" />
          {pageContent.pricing.scarcityNote}
        </p>
      {/if}

      <p class="service-plan-reassurance">
        <Icon name="fas fa-shield-heart" />
        Every booking starts with a free, no-obligation Meet &amp; Greet.
      </p>

      <a class="btn btn-yellow btn-mobile-center service-plan-mobile-cta" href="#newlead">Book a Meet &amp; Greet</a>

      {#if pageContent.pricing.extras?.length}
        <div class="service-extras">
          <div class="service-extras-heading">Extras</div>
          {#each pageContent.pricing.extras as extra}
            <div class="service-extra-row">
              <span class="service-extra-label">
                {extra.label}
                {#if extra.note}
                  <span class="service-extra-pill">{extra.note}</span>
                {/if}
              </span>
              <span class="service-extra-price">{extra.price}</span>
            </div>
          {/each}
        </div>
      {/if}
    </div>
  </section>

  <section use:reveal class="service-benefits reveal-block">
    <div class="service-inner">
      <div class="service-section-heading">
        <h2>{pageContent.benefits.title}</h2>
      </div>

      <div class="service-benefit-grid">
        {#each pageContent.benefits.items as benefit}
          <article class="service-benefit-card">
            <div class="service-benefit-icon" aria-hidden="true">
              <Icon name="fas fa-paw" />
            </div>
            <h3>{benefit.title}</h3>
            <p>{benefit.body}</p>
          </article>
        {/each}
      </div>
    </div>
  </section>

  {#if relatedServices.length}
    <section use:reveal class="service-related reveal-block" aria-label="Other services">
      <div class="service-inner">
        <div class="service-section-heading">
          <h2>Explore our other services</h2>
        </div>

        <div class="service-related-grid">
          {#each relatedCards as card, i}
            <a class="service-related-card service-related-tint-{i % 4}" href={card.href}>
              <div class="service-related-icon" aria-hidden="true">
                <Icon name={card.icon} />
              </div>
              <h3>{card.title}</h3>
              {#if card.body}
                <p>{card.body}</p>
              {/if}
              <div class="service-related-meta">
                {#if card.priceFrom}
                  <span class="service-related-price">{card.priceFrom}</span>
                {/if}
                {#if card.pill}
                  <span class="service-related-pill">{card.pill}</span>
                {/if}
              </div>
              <span class="service-related-link" aria-hidden="true">Learn more →</span>
            </a>
          {/each}
        </div>
      </div>
    </section>
  {/if}

  <TestimonialsSection
    heading={pageContent.testimonialsHeading}
    testimonials={content.testimonials}
    seedKey={currentPath}
  />
  <BookingSection booking={pageContent.booking} />
</main>

<style>
  .service-page {
    background: var(--off-white);
  }

  .service-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 50px;
  }

  .service-hero {
    padding: 72px 0 96px;
  }

  .service-related {
    padding: 0 0 96px;
  }

  .service-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 34px 28px 30px;
    border-radius: 28px;
    background: var(--off-white);
    box-shadow: 0 10px 28px rgba(17, 20, 24, 0.05);
    color: #000;
    text-decoration: none;
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease;
  }

  @media (hover: hover) {
    .service-related-card:hover {
      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 18px 38px rgba(17, 20, 24, 0.1);
    }
  }

  .service-related-card:active {
    transform: translateY(-1px) scale(0.992);
  }

  .service-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe173 0%, #ffd54a 100%);
    color: var(--gw-green);
    font-size: 28px;
    margin-bottom: 22px;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.05),
      0 10px 24px rgba(17, 20, 24, 0.08);
  }

  .service-related-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.2;
  }

  .service-related-card p {
    margin: 0;
    color: #34363a;
    font-size: 15px;
    line-height: 1.65;
  }

  .service-related-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .service-related-price {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gw-green);
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .service-related-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .service-related-link {
    margin-top: 18px;
    color: var(--gw-green);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
  }

  .service-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 52px;
    align-items: center;
  }

  .service-hero-copy h1,
  .service-section-heading h2,
  .service-highlight-copy h2 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(34px, 4vw, 56px);
    color: #000;
  }

  .service-hero-copy h1 {
    line-height: 1.05;
    letter-spacing: -0.04em;
  }

  .service-section-heading h2,
  .service-highlight-copy h2 {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .service-hero-copy p,
  .service-section-heading p,
  .service-benefit-card p {
    margin: 20px 0 0;
    max-width: 680px;
    color: #34363a;
    font-size: 17px;
    line-height: 1.7;
  }

  .service-hero-media,
  .service-highlight-image {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #f4efe7;
    box-shadow: 0 16px 40px rgba(17, 20, 24, 0.08);
  }

  .service-hero-media {
    aspect-ratio: 4 / 3;
  }

  .service-highlight-image {
    aspect-ratio: 4 / 3;
    max-width: 900px;
    margin: 0 auto;
  }

  .service-highlight-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
    align-items: stretch;
  }

  .service-collage-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #f4efe7;
    box-shadow:
      inset 0 0 0 1px rgba(17, 20, 24, 0.05),
      0 16px 40px rgba(17, 20, 24, 0.08);
  }

  .service-collage-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-collage-card-1 {
    min-height: 250px;
  }

  .service-collage-card-2 {
    min-height: 250px;
  }

  .service-collage-card-3 {
    min-height: 250px;
  }

  .service-hero-media img,
  .service-highlight-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-highlight {
    padding: 0 0 96px;
  }

  .service-highlight-copy {
    text-align: center;
    margin-bottom: 34px;
  }

  /*
   * Decorative dingbat eyebrow on the highlight section. Inherits sizing /
   * colour from the shared .eyebrow utility; this rule only adjusts the
   * downward spacing relative to the H2 underneath.
   */
  .service-highlight-eyebrow {
    margin: 0 0 16px;
  }

  .service-pricing,
  .service-benefits {
    padding: 0 0 96px;
  }

  .service-section-heading {
    text-align: center;
    margin-bottom: 38px;
  }

  .service-section-heading p {
    margin-left: auto;
    margin-right: auto;
  }

  .service-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .service-plan-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-plan-card,
  .service-benefit-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 30px 26px;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s ease,
      border-color 0.22s ease;
  }

  .service-plan-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
  }

  .service-plan-popular {
    border: 2px solid var(--yellow);
  }

  .service-plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media (hover: hover) {
    .service-plan-card:hover,
    .service-benefit-card:hover {
      transform: translateY(-6px) scale(1.012);
      box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
    }
  }

  .service-plan-card:active,
  .service-benefit-card:active {
    transform: translateY(-2px) scale(0.992);
  }

  :global(.reveal-ready.reveal-block) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 24px), 0);
    transition:
      opacity 0.55s ease,
      transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  :global(.reveal-visible.reveal-block) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .service-plan-card h3,
  .service-benefit-card h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.2;
    color: #000;
  }

  .service-plan-price {
    margin-top: 20px;
    font-family: var(--font-head);
    font-size: 44px;
    line-height: 1;
    color: var(--gw-green);
  }

  .service-plan-period {
    margin: 8px 0 0;
    color: #5d6166;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .service-plan-features {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
  }

  .service-plan-features li {
    position: relative;
    padding-left: 24px;
    color: #34363a;
    font-size: 15px;
    line-height: 1.5;
  }

  .service-plan-features li + li {
    margin-top: 12px;
  }

  .service-plan-features li::before {
    content: '•';
    position: absolute;
    left: 6px;
    top: 0;
    color: var(--yellow);
    font-size: 20px;
    line-height: 1;
  }

  .service-plan-cta {
    display: flex;
    width: fit-content;
    margin: 28px auto 0;
    font-family: var(--font-head);
  }

  .service-plan-mobile-cta {
    display: none;
  }

  .service-plan-reassurance,
  .service-plan-scarcity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 24px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.06);
    color: var(--gw-green);
    font-size: 14px;
    font-weight: 600;
  }

  .service-plan-scarcity {
    background: rgba(255, 209, 0, 0.18);
    color: #5a4500;
  }

  .service-plan-reassurance + .service-plan-reassurance,
  .service-plan-scarcity + .service-plan-reassurance {
    margin-top: 12px;
  }

  :global(.service-plan-reassurance .icon) {
    color: var(--yellow);
    font-size: 14px;
  }

  :global(.service-plan-scarcity .icon) {
    color: #b88800;
    font-size: 14px;
  }

  .service-extras {
    margin-top: 30px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
    overflow: hidden;
  }

  .service-extras-heading {
    padding: 18px 28px 14px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #ece9e3;
  }

  .service-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 28px;
    color: #34363a;
    font-size: 16px;
    line-height: 1.4;
  }

  .service-extra-row + .service-extra-row {
    border-top: 1px solid #ece9e3;
  }

  .service-extra-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .service-extra-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
  }

  .service-extra-price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--gw-green);
    white-space: nowrap;
  }

  .service-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .service-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #efe4d1;
    color: var(--gw-green);
    font-size: 18px;
    margin-bottom: 18px;
  }

  .service-benefit-card p {
    margin-top: 14px;
    font-size: 16px;
  }

  @media (max-width: 1024px) {
    .service-hero-grid,
    .service-plan-grid,
    .service-plan-grid-three,
    .service-benefit-grid,
    .service-related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-hero-grid {
      align-items: start;
    }

    .service-highlight-collage {
      max-width: 720px;
    }

    .service-collage-card-2,
    .service-collage-card-3,
    .service-collage-card-1 {
      min-height: 220px;
    }
  }

  @media (max-width: 768px) {
    .service-inner {
      padding: 0 24px;
    }

    .service-hero {
      padding: 48px 0 72px;
    }

    .service-hero-grid,
    .service-plan-grid,
    .service-plan-grid-three,
    .service-benefit-grid,
    .service-related-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .service-plan-card {
      order: var(--mobile-order, 0);
    }

    .service-highlight,
    .service-pricing,
    .service-benefits,
    .service-related {
      padding-bottom: 72px;
    }

    .service-extra-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .service-plan-cta {
      display: none;
    }

    .service-plan-mobile-cta {
      display: flex;
      width: fit-content;
      margin: 18px auto 0;
      font-family: var(--font-head);
    }

    .service-highlight-collage {
      grid-template-columns: 1fr;
      gap: 12px;
      max-width: 420px;
    }

    .service-collage-card-1,
    .service-collage-card-2,
    .service-collage-card-3 {
      min-height: 220px;
      transform: none;
    }
  }
</style>
