<?php
$defaults = [
  'sections' => [
    [
      'title' => 'Shipping & Delivery',
      'slug' => 'shipping',
      'questions' => [
        [
          'question' => 'How long does shipping take?',
          'answer' => 'Shipping typically takes 5-7 business days for domestic orders. International delivery times may vary.',
        ],
        [
          'question' => 'Do you ship internationally?',
          'answer' => 'Yes. We ship to most countries—international transit times depend on the destination.',
        ],
      ],
    ],
    [
      'title' => 'Returns & Exchanges',
      'slug' => 'returns',
      'questions' => [
        [
          'question' => 'What is your return policy?',
          'answer' => 'You can return items in their original condition within 30 days of delivery for a refund or exchange.',
        ],
        [
          'question' => 'How do I initiate a return or exchange?',
          'answer' => 'Use the return portal linked in your order confirmation to start a request.',
        ],
      ],
    ],
    [
      'title' => 'Orders & Payments',
      'slug' => 'orders',
      'questions' => [
        [
          'question' => 'What payment methods do you accept?',
          'answer' => 'We accept major credit cards, PayPal, and other secure payment options at checkout.',
        ],
        [
          'question' => 'How can I track my order?',
          'answer' => 'After shipment you receive a tracking number via email.',
        ],
      ],
    ],
  ],
  'backgroundColor' => '#f6f6f6',
  'textColor' => '#0e1011',
];

$values = array_merge($defaults, (array) $attributes);
$sections = $values['sections'];
$bg_color = $values['backgroundColor'];
$text_color = $values['textColor'];
?>
<?php $capsule_bg = isset($values['capsuleColor']) ? $values['capsuleColor'] : '#ffffff'; ?>
<div class="fjord-faq-bars" style="--faq-bars-bg:<?php echo esc_attr($bg_color); ?>;--faq-bars-text:<?php echo esc_attr($text_color); ?>;--faq-capsule-bg:<?php echo esc_attr($capsule_bg); ?>;">
  <?php foreach ($sections as $section) : ?>
    <?php
    $enabled = array_key_exists('enabled', $section) ? (bool) $section['enabled'] : true;
    $required = array_key_exists('required', $section) ? (bool) $section['required'] : false;
    if (!$enabled && !$required) {
      continue;
    }
    $questions = isset($section['questions']) && is_array($section['questions']) ? $section['questions'] : [];
    $description = isset($section['description']) ? $section['description'] : '';
    ?>
    <?php $capsule_color = isset($section['capsuleColor']) ? $section['capsuleColor'] : '#ffffff'; ?>
    <article class="fjord-faq-bar" data-faq="<?php echo esc_attr($section['slug'] ?? ''); ?>">
      <header class="fjord-faq-bar__header">
        <span><?php echo esc_html($section['title'] ?? ''); ?></span>
      </header>
      <?php if ($description) : ?>
        <p class="fjord-faq-bar__intro"><?php echo esc_html($description); ?></p>
      <?php endif; ?>
      <?php if (!empty($questions)) : ?>
        <div class="fjord-faq-questions">
          <?php foreach ($questions as $question) : ?>
            <details class="fjord-faq-question">
              <summary><?php echo esc_html($question['question'] ?? ''); ?></summary>
              <div class="fjord-faq-answer">
                <p><?php echo esc_html($question['answer'] ?? ''); ?></p>
              </div>
            </details>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </article>
  <?php endforeach; ?>
</div>
