<?php
$industriesServeItems = [
  [
    'id' => 'personal-brands',
    'label' => 'Personal Brands',
    'desc' => 'We provide end-to-end infrastructure solutions tailored for high-performance data centers—ranging from site development and power systems to cooling, remote monitoring, and physical security. With a focus on uptime, scalability, and energy efficiency, our services support hyperscale, enterprise, and edge data center environments.',
  ],
  [
    'id' => 'consultants',
    'label' => 'Consultants',
    'desc' => 'We help consultants translate expertise into published authority — from thought-leadership books and articles to branded content systems that attract premium clients and speaking opportunities.',
  ],
  [
    'id' => 'author',
    'label' => 'Author',
    'desc' => 'From blank page to published bestseller, we support authors with ghostwriting, editing, design, publishing, and marketing — giving every manuscript a clear path to readers.',
  ],
  [
    'id' => 'ecommerce',
    'label' => 'E-commerce',
    'desc' => 'We build content and brand systems for e-commerce businesses — product storytelling, email campaigns, SEO content, and conversion-focused copy that turns browsers into buyers.',
  ],
  [
    'id' => 'healthcare',
    'label' => 'Healthcare',
    'desc' => 'We create compliant, credible content for healthcare professionals and organizations — patient education materials, provider branding, and authoritative publications that build trust.',
  ],
];
?>

<section class="industries-serve industries-serve--home">
  <div class="container">
    <div class="industries-serve-header">
      <span class="industries-serve-kicker">INDUSTRIES WE SERVE</span>
      <h2 class="industries-serve-title">
        Precision-Driven<br>
        Solutions for Every Industry
      </h2>
      <div class="industries-serve-intro">
        <p>We Understand the unique needs of every industry. Our solutions are crafted to drive real, measurable results.</p>
      </div>
    </div>

    <div class="industries-serve-body">
      <div class="industries-serve-nav">
        <div class="industries-serve-nav-track">
          <img
            src="assets/images/mouse-scroll.svg"
            alt=""
            class="industries-serve-nav-icon"
            aria-hidden="true"
          >
          <span class="industries-serve-nav-line" aria-hidden="true"></span>
          <ul class="industries-serve-list" role="tablist" aria-label="Industries">
            <?php foreach ($industriesServeItems as $index => $item): ?>
              <li>
                <button
                  type="button"
                  class="industries-serve-tab<?= $index === 0 ? ' is-active' : '' ?>"
                  role="tab"
                  data-industry="<?= htmlspecialchars($item['id']) ?>"
                  aria-selected="<?= $index === 0 ? 'true' : 'false' ?>"
                >
                  <?= htmlspecialchars($item['label']) ?>
                </button>
              </li>
            <?php endforeach; ?>
          </ul>
        </div>
      </div>

      <div class="industries-serve-panels">
        <?php foreach ($industriesServeItems as $index => $item): ?>
          <article
            class="industries-serve-panel<?= $index === 0 ? ' is-active' : '' ?>"
            data-industry-panel="<?= htmlspecialchars($item['id']) ?>"
            role="tabpanel"
            <?= $index === 0 ? '' : 'hidden' ?>
          >
            <img
              src="assets/images/industry-serve-img.webp"
              alt="<?= htmlspecialchars($item['label']) ?>"
              class="industries-serve-img"
              loading="lazy"
            >
            <h3 class="industries-serve-panel-title"><?= htmlspecialchars($item['label']) ?></h3>
            <p class="industries-serve-panel-desc"><?= htmlspecialchars($item['desc']) ?></p>
          </article>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>
