<?php
$processJourneys = [
  'brand' => [
    'label' => 'Brand Journey',
    [
      'num' => '01',
      'title' => 'Book Writing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
    [
      'num' => '02',
      'title' => 'Formatting',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'bottom',
    ],
    [
      'num' => '03',
      'title' => 'Publishing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
    [
      'num' => '04',
      'title' => 'Author Website',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'bottom',
    ],
    [
      'num' => '05',
      'title' => 'SEO',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
  ],
  'author' => [
    'label' => 'Author Journey',
    [
      'num' => '01',
      'title' => 'Book Writing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
    [
      'num' => '02',
      'title' => 'Editing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'bottom',
    ],
    [
      'num' => '03',
      'title' => 'Publishing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
    [
      'num' => '04',
      'title' => 'Author Website',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'bottom',
    ],
    [
      'num' => '05',
      'title' => 'Marketing',
      'desc' => 'From blank page to complete manuscript — structured milestones keep you moving.',
      'position' => 'top',
    ],
  ],
];
?>

<section class="process-timeline process-timeline--home">
  <img
    src="assets/images/process-top-right.svg"
    alt=""
    class="process-timeline-deco process-timeline-deco--top"
    aria-hidden="true"
  >
  <img
    src="assets/images/process-bottom-left.svg"
    alt=""
    class="process-timeline-deco process-timeline-deco--bottom"
    aria-hidden="true"
  >

  <div class="container-fluid">
    <div class="process-timeline-header text-center">
      <span class="process-timeline-kicker">HOW WE WORK WITH YOU</span>
      <h2 class="process-timeline-title">Your Journey from idea to lasting impact</h2>

      <div class="process-timeline-toggle" role="tablist" aria-label="Journey type">
        <?php foreach ($processJourneys as $journeyKey => $journey): ?>
          <button
            type="button"
            class="process-timeline-toggle-btn<?= $journeyKey === 'brand' ? ' is-active' : '' ?>"
            role="tab"
            data-journey="<?= htmlspecialchars($journeyKey) ?>"
            aria-selected="<?= $journeyKey === 'brand' ? 'true' : 'false' ?>"
          >
            <?= htmlspecialchars($journey['label']) ?>
          </button>
        <?php endforeach; ?>
      </div>
    </div>

    <?php foreach ($processJourneys as $journeyKey => $journey): ?>
      <?php
      $steps = array_values(array_filter($journey, 'is_array'));
      $isActive = $journeyKey === 'brand';
      ?>
      <div
        class="process-timeline-panel<?= $isActive ? ' is-active' : '' ?>"
        data-journey-panel="<?= htmlspecialchars($journeyKey) ?>"
        role="tabpanel"
        <?= $isActive ? '' : 'hidden' ?>
      >
        <div class="process-timeline-stage">
          <div class="process-timeline-rail" aria-hidden="true">
            <span class="process-timeline-rail-line"></span>
          </div>

          <div class="process-timeline-cols">
            <?php foreach ($steps as $step): ?>
              <?php $isTop = $step['position'] === 'top'; ?>
              <div class="process-timeline-col process-timeline-col--<?= $isTop ? 'top' : 'bottom' ?>">
                <div class="process-step-wrap process-step-wrap--<?= $isTop ? 'top' : 'bottom' ?>">
                  <div class="process-step-node">
                    <?php if ($isTop): ?>
                      <span class="process-step-dot process-step-dot--end"></span>
                      <span class="process-step-stem"></span>
                      <span class="process-step-dot process-step-dot--rail"></span>
                    <?php else: ?>
                      <span class="process-step-dot process-step-dot--rail"></span>
                      <span class="process-step-stem"></span>
                      <span class="process-step-dot process-step-dot--end"></span>
                    <?php endif; ?>
                  </div>
                  <article class="process-step process-step--<?= $isTop ? 'top' : 'bottom' ?>">
                    <span class="process-step-num"><?= htmlspecialchars($step['num']) ?></span>
                    <h3 class="process-step-title"><?= htmlspecialchars($step['title']) ?></h3>
                    <p class="process-step-desc"><?= htmlspecialchars($step['desc']) ?></p>
                  </article>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</section>
