<script lang="ts">
  import { reveal } from '$lib/actions/reveal';
  import Icon from '$lib/components/Icon.svelte';
  import type { HowItWorksContent } from '$lib/types';

  export let content: HowItWorksContent;
</script>

<section id="how-it-works" use:reveal={{ delay: 30 }} class="reveal-block">
  <div class="hiw-inner">

    <div class="hiw-header">
      <span class="hiw-eyebrow">Getting started</span>
      <h2 class="section-heading">{content.title}</h2>
      {#if content.intro}
        <p class="hiw-intro">{content.intro}</p>
      {/if}
    </div>

    <div class="hiw-steps">
      {#each content.steps as step, index}
        <div class="hiw-step">
          <div class="hiw-step-meta">
            <span class="hiw-phase">{step.phase}</span>
            <span class="hiw-num">0{index + 1}</span>
          </div>
          <div class="hiw-icon-wrap">
            <Icon name={step.icon} className="hiw-step-icon" />
          </div>
          <h3 class="hiw-title">{step.title}</h3>
          <p class="hiw-body">{step.body}</p>
          {#if step.benefit}
            <span class="hiw-benefit">
              <Icon name="fas fa-check" className="hiw-check-icon" />
              {step.benefit}
            </span>
          {/if}
        </div>
      {/each}
    </div>

    <div class="hiw-cta">
      <a href="#newlead" class="btn btn-green btn-mobile-center">Book your free Meet &amp; Greet</a>
      <p class="hiw-cta-note">Free, no-obligation. We reply within 24 hours.</p>
    </div>

  </div>
</section>

<style>
  #how-it-works {
    background: var(--off-white);
    padding: 80px 0;
  }

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

  /* ── Header ── */
  .hiw-header {
    text-align: center;
    margin-bottom: 56px;
  }

  .hiw-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.08);
    color: var(--gw-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
  }

  .hiw-intro {
    max-width: 580px;
    margin: 16px auto 0;
    color: #4c5056;
    font-size: 16px;
    line-height: 1.65;
  }

  /* ── Steps grid ── */
  .hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
  }

  .hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 40px 36px;
    background: #fff;
    border: 1px solid rgba(17, 20, 24, 0.06);
    box-shadow: 0 4px 16px rgba(17, 20, 24, 0.04);
    transition: box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hiw-step:first-child {
    border-radius: 28px 0 0 28px;
  }

  .hiw-step:last-child {
    border-radius: 0 28px 28px 0;
  }

  .hiw-step + .hiw-step {
    border-left: none;
  }

  @media (hover: hover) {
    .hiw-step:hover {
      box-shadow: 0 16px 40px rgba(17, 20, 24, 0.09);
      transform: translateY(-4px);
      z-index: 1;
    }
  }

  /* ── Step meta (phase + number) ── */
  .hiw-step-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
  }

  .hiw-phase {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--yellow);
    color: #000;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .hiw-num {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: rgba(33, 48, 33, 0.28);
    letter-spacing: 0.04em;
  }

  /* ── Icon ── */
  .hiw-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: var(--gw-green);
    box-shadow: 0 10px 28px rgba(33, 48, 33, 0.2);
  }

  .hiw-icon-wrap :global(.hiw-step-icon) {
    font-size: 26px;
    color: #fff;
  }

  /* ── Content ── */
  .hiw-title {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #0d1a0d;
  }

  .hiw-body {
    margin: 0 0 20px;
    color: #4c5056;
    font-size: 15px;
    line-height: 1.65;
    flex: 1;
  }

  .hiw-benefit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.07);
    color: var(--gw-green);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }

  .hiw-benefit :global(.hiw-check-icon) {
    font-size: 10px;
    flex-shrink: 0;
  }

  /* ── CTA ── */
  .hiw-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 52px;
  }

  .hiw-cta-note {
    margin: 0;
    color: #888;
    font-size: 13px;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    #how-it-works {
      padding: 64px 0;
    }

    .hiw-inner {
      padding: 0 24px;
    }

    .hiw-header {
      margin-bottom: 32px;
    }

    .hiw-intro {
      font-size: 15px;
      line-height: 1.55;
    }

    .hiw-steps {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .hiw-step {
      align-items: flex-start;
      text-align: left;
      padding: 28px 24px;
      border-radius: 24px !important;
      border: 1px solid rgba(17, 20, 24, 0.06);
    }

    .hiw-step + .hiw-step {
      border-left: 1px solid rgba(17, 20, 24, 0.06);
    }

    .hiw-step-meta {
      justify-content: flex-start;
      margin-bottom: 20px;
    }

    .hiw-icon-wrap {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      margin-bottom: 18px;
    }

    .hiw-icon-wrap :global(.hiw-step-icon) {
      font-size: 22px;
    }

    .hiw-title {
      font-size: 18px;
    }

    .hiw-body {
      font-size: 14px;
      line-height: 1.6;
    }

    .hiw-cta {
      margin-top: 36px;
    }
  }

  /* ── Reveal ── */
  :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);
  }
</style>
