File: /mnt/data/dreamssalon-wp/wp-content/plugins/dreamsalon-widgets/widgets/class-home1-faq-section.php
<?php
/**
* DS Home1 FAQ Section Widget
*/
namespace dreamsalonelementor\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
if (!defined('ABSPATH')) { exit; }
class DSHome1FAQSection extends Widget_Base {
public function get_name() { return 'dreamsalon-home1-faq-section'; }
public function get_title() { return __('Home1 FAQ Section', 'dreamsalon_elementor'); }
public function get_icon() { return 'eicon-help-o'; }
public function get_categories() { return ['dreamsalonelemetortheme']; }
protected function _register_controls() {
// Content: Header & Image
$this->start_controls_section('header_content', [ 'label' => __('Header & Image', 'dreamsalon_elementor') ]);
$this->add_control('sec_title', [
'label' => __('Section Title', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('Frequently Asked Questions', 'dreamsalon_elementor'),
]);
$this->add_control('sec_subtitle', [
'label' => __('Section Sub Title', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('Everything You Need to Know Before You Glow', 'dreamsalon_elementor'),
]);
// Avatar Users (like banner widget)
$user_options = [];
if (function_exists('get_users')) {
foreach (get_users(['fields' => ['ID','display_name']]) as $u) {
$user_options[$u->ID] = $u->display_name . ' (#' . $u->ID . ')';
}
}
$this->add_control('avatar_users', [
'label' => __('Avatar Users', 'dreamsalon_elementor'),
'type' => Controls_Manager::SELECT2,
'multiple' => true,
'options' => $user_options,
'description' => __('Select up to 4 users to show their avatars. If empty, defaults will be used.', 'dreamsalon_elementor'),
]);
$this->add_control('avatars', [
'label' => __('Avatar Images (4)', 'dreamsalon_elementor'),
'type' => Controls_Manager::GALLERY,
'default' => [],
'description' => __('First 4 images will be used if no users selected.', 'dreamsalon_elementor')
]);
// Left Side Image
$this->add_control('left_side_image', [
'label' => __('Left Side Image', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => ['url' => ''],
]);
$this->add_control('customer_profile_title', [
'label' => __('Customer Profile Title', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('Our Happy Customers', 'dreamsalon_elementor'),
]);
// Counter Section
$this->add_control('counter_number', [
'label' => __('Counter Number', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('200+', 'dreamsalon_elementor'),
]);
$this->add_control('counter_title', [
'label' => __('Counter Title', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('Booking Completed', 'dreamsalon_elementor'),
]);
// Right Side Below Image
$this->add_control('right_side_below_image', [
'label' => __('Right Side Below Image', 'dreamsalon_elementor'),
'type' => Controls_Manager::MEDIA,
'default' => ['url' => ''],
]);
$this->add_control('layout_style', [
'label' => __('Layout Style', 'dreamsalon_elementor'),
'type' => Controls_Manager::SELECT,
'default' => 'style1',
'options' => [
'style1' => __('Style 1 (Default)', 'dreamsalon_elementor'),
'style2' => __('Style 2 (Center Accordion)', 'dreamsalon_elementor'),
],
]);
$this->end_controls_section();
// Content: FAQ Items
$this->start_controls_section('faq_items', [ 'label' => __('FAQ Items', 'dreamsalon_elementor') ]);
$rep = new \Elementor\Repeater();
$rep->add_control('question', [
'label' => __('Question', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => __('How do I book a service?', 'dreamsalon_elementor'),
]);
$rep->add_control('answer', [
'label' => __('Answer', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXTAREA,
'default' => __('To book a service, browse through the available salons or services, select your preferred option, choose a date and time, and follow the checkout process to confirm your booking.', 'dreamsalon_elementor'),
]);
$rep->add_control('open', [
'label' => __('Open by default', 'dreamsalon_elementor'),
'type' => Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'dreamsalon_elementor'),
'label_off' => __('No', 'dreamsalon_elementor'),
'return_value' => 'yes',
'default' => '',
]);
$rep->add_control('wow_delay', [
'label' => __('WOW Delay (e.g., 0.2s)', 'dreamsalon_elementor'),
'type' => Controls_Manager::TEXT,
'default' => '',
]);
$this->add_control('items', [
'label' => __('Items', 'dreamsalon_elementor'),
'type' => Controls_Manager::REPEATER,
'fields' => $rep->get_controls(),
'default' => [
[ 'question' => __('How do I book a service?','dreamsalon_elementor') ],
[ 'question' => __('What services do you offer?','dreamsalon_elementor') ],
[ 'question' => __('Do I need to make an appointment?','dreamsalon_elementor') ],
[ 'question' => __('Do you offer home services?','dreamsalon_elementor') ],
],
'title_field' => '{{{ question }}}',
]);
$this->end_controls_section();
// Style: Section
$this->start_controls_section('section_style', [ 'label' => __('Section', 'dreamsalon_elementor'), 'tab' => Controls_Manager::TAB_STYLE ]);
$this->add_responsive_control('section_padding', [
'label' => __('Padding', 'dreamsalon_elementor'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px','%','em','rem'],
'selectors' => [ '{{WRAPPER}} .faq-section.section, {{WRAPPER}} .faq-section-two.section' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
]);
$this->end_controls_section();
// Style: Header
$this->start_controls_section('header_style', [ 'label' => __('Header', 'dreamsalon_elementor'), 'tab' => Controls_Manager::TAB_STYLE ]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'title_typo',
'label' => __('Title Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .section-header .title',
]);
$this->add_control('title_color', [
'label' => __('Title Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .section-header .title' => 'color: {{VALUE}};' ],
]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'subtitle_typo',
'label' => __('Subtitle Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .section-header p',
]);
$this->add_control('subtitle_color', [
'label' => __('Subtitle Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .section-header p' => 'color: {{VALUE}};' ],
]);
$this->end_controls_section();
// Style: Left Side Container
$this->start_controls_section('left_side_style', [
'label' => __('Left Side Container', 'dreamsalon_elementor'),
'tab' => Controls_Manager::TAB_STYLE
]);
$this->add_control('tall_image_height', [
'label' => __('Tall Image Height', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 100,
'max' => 1000,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 600,
],
'selectors' => [
'{{WRAPPER}} .tall-image-section img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover;',
],
]);
$this->add_control('tall_image_width', [
'label' => __('Tall Image Column Width', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['%'],
'range' => [
'%' => [
'min' => 10,
'max' => 90,
'step' => 1,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} .left-side-col-1' => 'width: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .left-side-col-2' => 'width: calc(100% - {{SIZE}}{{UNIT}});',
],
]);
$this->add_control('profile_section_height', [
'label' => __('Profile Section Height', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 50,
'max' => 500,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 200,
],
'selectors' => [
'{{WRAPPER}} .customer-profile-card' => 'height: {{SIZE}}{{UNIT}};',
],
]);
$this->add_control('profile_section_bg_color', [
'label' => __('Profile Section Background', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .customer-profile-card' => 'background-color: {{VALUE}};' ],
'default' => '#ffffff',
]);
$this->add_control('bottom_image_height', [
'label' => __('Bottom Image Height', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 100,
'max' => 1000,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 385,
],
'selectors' => [
'{{WRAPPER}} .bottom-image-section img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover;',
],
]);
$this->add_control('left_side_gap', [
'label' => __('Gap Between Columns', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 20,
],
'selectors' => [
'{{WRAPPER}} .left-side-col-1' => 'padding-right: calc({{SIZE}}{{UNIT}}/2);',
'{{WRAPPER}} .left-side-col-2' => 'padding-left: calc({{SIZE}}{{UNIT}}/2);',
],
]);
$this->add_control('row_gap', [
'label' => __('Gap Between Rows', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 20,
],
'selectors' => [
'{{WRAPPER}} .customer-profile-card' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]);
$this->end_controls_section();
// Style: Customer Profile Card
$this->start_controls_section('customer_profile_style', [
'label' => __('Customer Profile Card', 'dreamsalon_elementor'),
'tab' => Controls_Manager::TAB_STYLE
]);
$this->add_control('card_padding', [
'label' => __('Padding', 'dreamsalon_elementor'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%', 'em'],
'selectors' => [ '{{WRAPPER}} .customer-profile-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
'default' => [
'top' => '20',
'right' => '20',
'bottom' => '20',
'left' => '20',
'unit' => 'px',
'isLinked' => false,
],
]);
$this->add_control('card_radius', [
'label' => __('Border Radius', 'dreamsalon_elementor'),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [ '{{WRAPPER}} .customer-profile-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
]);
$this->add_group_control(\Elementor\Group_Control_Box_Shadow::get_type(), [
'name' => 'card_shadow',
'label' => __('Box Shadow', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .customer-profile-card',
]);
$this->add_control('profile_title_color', [
'label' => __('Profile Title Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .customer-profile-title' => 'color: {{VALUE}};' ],
]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'profile_title_typo',
'label' => __('Profile Title Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .customer-profile-title',
]);
$this->end_controls_section();
// Style: Avatar Section (new)
$this->start_controls_section('avatar_style', [
'label' => __('Avatar Section', 'dreamsalon_elementor'),
'tab' => Controls_Manager::TAB_STYLE
]);
$this->add_responsive_control(
'avatar_size',
[
'label' => __( 'Avatar Size', 'dreamsalon_elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [ 'px' => [ 'min' => 16, 'max' => 120 ] ],
'selectors' => [
'{{WRAPPER}} .customer-profile-card .avatar img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; object-fit: cover;',
],
'default' => [
'unit' => 'px',
'size' => 40,
],
]
);
$this->add_responsive_control(
'avatar_gap',
[
'label' => __( 'Avatar Gap', 'dreamsalon_elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [ 'px' => [ 'min' => -20, 'max' => 30 ] ],
'selectors' => [
'{{WRAPPER}} .customer-profile-card .avatar-list-stacked .avatar' => 'margin-right: {{SIZE}}{{UNIT}};',
],
'default' => [
'unit' => 'px',
'size' => -10,
],
]
);
$this->add_control(
'avatar_border_color',
[
'label' => __( 'Avatar Border Color', 'dreamsalon_elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .customer-profile-card .avatar' => 'border-color: {{VALUE}};' ],
'default' => '#ffffff',
]
);
$this->add_responsive_control(
'avatar_border_width',
[
'label' => __( 'Avatar Border Width', 'dreamsalon_elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [ 'px' => [ 'min' => 0, 'max' => 10 ] ],
'selectors' => [
'{{WRAPPER}} .customer-profile-card .avatar' => 'border-width: {{SIZE}}{{UNIT}};',
],
'default' => [
'unit' => 'px',
'size' => 2,
],
]
);
$this->end_controls_section();
// Style: Counter Section
$this->start_controls_section('counter_style', [
'label' => __('Counter Section', 'dreamsalon_elementor'),
'tab' => Controls_Manager::TAB_STYLE
]);
$this->add_control('counter_number_color', [
'label' => __('Counter Number Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .counter-number' => 'color: {{VALUE}};' ],
'default' => '#333333',
]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'counter_number_typo',
'label' => __('Counter Number Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .counter-number',
]);
$this->add_control('counter_title_color', [
'label' => __('Counter Title Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .counter-title' => 'color: {{VALUE}};' ],
'default' => '#666666',
]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'counter_title_typo',
'label' => __('Counter Title Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .counter-title',
]);
$this->add_control('counter_margin', [
'label' => __('Counter Margin Top', 'dreamsalon_elementor'),
'type' => Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 0,
'max' => 100,
'step' => 1,
],
],
'selectors' => [
'{{WRAPPER}} .counter-section' => 'margin-top: {{SIZE}}{{UNIT}};',
],
]);
$this->end_controls_section();
// Style: Accordion
$this->start_controls_section('accordion_style', [ 'label' => __('Accordion', 'dreamsalon_elementor'), 'tab' => Controls_Manager::TAB_STYLE ]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'acc_title_typo',
'label' => __('Question Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .faq-accordion .accordion-button, {{WRAPPER}} .faq-accordion-two .accordion-button',
]);
$this->add_control('acc_title_color', [
'label' => __('Question Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .faq-accordion .accordion-button, {{WRAPPER}} .faq-accordion-two .accordion-button' => 'color: {{VALUE}};' ],
]);
$this->add_group_control(Group_Control_Typography::get_type(), [
'name' => 'acc_body_typo',
'label' => __('Answer Typography', 'dreamsalon_elementor'),
'selector' => '{{WRAPPER}} .faq-accordion .accordion-body, {{WRAPPER}} .faq-accordion-two .accordion-body',
]);
$this->add_control('acc_body_color', [
'label' => __('Answer Color', 'dreamsalon_elementor'),
'type' => Controls_Manager::COLOR,
'selectors' => [ '{{WRAPPER}} .faq-accordion .accordion-body, {{WRAPPER}} .faq-accordion-two .accordion-body' => 'color: {{VALUE}};' ],
]);
$this->end_controls_section();
}
protected function render() {
$s = $this->get_settings_for_display();
$title = !empty($s['sec_title']) ? $s['sec_title'] : '';
$subtitle = !empty($s['sec_subtitle']) ? $s['sec_subtitle'] : '';
// Build avatar URLs like banner widget
$avatar_urls = [];
$sel_users = isset($s['avatar_users']) ? (array) $s['avatar_users'] : [];
if (!empty($sel_users)) {
$count = 0;
foreach ($sel_users as $uid) {
$uid = intval($uid);
if ($uid <= 0) continue;
$url = get_avatar_url($uid, ['size' => 64]);
if ($url) { $avatar_urls[] = $url; $count++; if ($count >= 4) break; }
}
}
if (empty($avatar_urls)) {
$avatars = isset($s['avatars']) && is_array($s['avatars']) ? array_slice($s['avatars'], 0, 4) : [];
foreach ($avatars as $a) { if (!empty($a['url'])) { $avatar_urls[] = $a['url']; } }
}
if (empty($avatar_urls) && function_exists('get_users')) {
$users = get_users([ 'number' => 4, 'fields' => ['ID'] ]);
foreach ($users as $u) { $avatar_urls[] = get_avatar_url($u->ID, ['size' => 64]); }
}
$left_side_img = !empty($s['left_side_image']['url']) ? $s['left_side_image']['url'] : '';
$customer_profile_title = !empty($s['customer_profile_title']) ? $s['customer_profile_title'] : '';
$counter_number = !empty($s['counter_number']) ? $s['counter_number'] : '';
$counter_title = !empty($s['counter_title']) ? $s['counter_title'] : '';
$right_side_below_img = !empty($s['right_side_below_image']['url']) ? $s['right_side_below_image']['url'] : '';
$items = !empty($s['items']) ? $s['items'] : [];
$layout_style = !empty($s['layout_style']) ? $s['layout_style'] : 'style1';
$acc_id = 'accordionFaq-' . $this->get_id();
?>
<?php if ($layout_style === 'style2') : ?>
<section class="faq-section-two section">
<div class="container">
<div class="section-header title-two text-center wow fadeInUp" data-wow-duration="3s">
<?php if ($title): ?><h2 class="title"><?php echo wp_kses_post($title); ?></h2><?php endif; ?>
<?php if ($subtitle): ?><p><?php echo wp_kses_post($subtitle); ?></p><?php endif; ?>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="accordion faq-accordion-two" id="<?php echo esc_attr($acc_id); ?>">
<?php foreach ($items as $index => $item):
$is_open = isset($item['open']) && $item['open'] === 'yes';
$collapse_id = 'faq-collapse-two-' . $this->get_id() . '-' . $index;
$delay = !empty($item['wow_delay']) ? $item['wow_delay'] : '';
?>
<div class="accordion-item mb-3 wow fadeInUp<?php echo $is_open ? ' show' : ''; ?>" data-wow-duration="3s"<?php echo $delay ? ' data-wow-delay="' . esc_attr($delay) . '"' : ''; ?>>
<h2 class="accordion-header">
<button class="accordion-button<?php echo $is_open ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?php echo esc_attr($collapse_id); ?>" aria-expanded="<?php echo $is_open ? 'true' : 'false'; ?>" aria-controls="<?php echo esc_attr($collapse_id); ?>">
<?php echo esc_html($item['question']); ?>
</button>
</h2>
<div id="<?php echo esc_attr($collapse_id); ?>" class="accordion-collapse collapse<?php echo $is_open ? ' show' : ''; ?>" data-bs-parent="#<?php echo esc_attr($acc_id); ?>">
<div class="accordion-body">
<p class="mb-0"><?php echo esc_html($item['answer']); ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<?php else : ?>
<section class="faq-section section">
<div class="container">
<div class="row">
<!-- Left Side with Two Columns Layout -->
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="d-flex">
<!-- Column 1: Tall Image (50% width) -->
<div class="left-side-col-1">
<?php if ($left_side_img): ?>
<div class="tall-image-section h-100">
<img src="<?php echo esc_url($left_side_img); ?>" alt="Left Side" class="img-fluid rounded w-100">
</div>
<?php endif; ?>
</div>
<!-- Column 2: Two Rows (50% width) -->
<div class="left-side-col-2 d-flex flex-column">
<!-- Row 1: Customer Profile Section (200px height) -->
<div class="customer-profile-card rounded d-flex flex-column justify-content-center mb-3 p-4">
<?php if ($customer_profile_title): ?>
<h4 class="customer-profile-title mb-3 text-center"><?php echo esc_html($customer_profile_title); ?></h4>
<?php endif; ?>
<!-- Customer Profile Images using avatar system -->
<?php if (!empty($avatar_urls)): ?>
<div class="customer-profile-images d-flex justify-content-center mb-3">
<div class="avatar-list-stacked">
<?php foreach ($avatar_urls as $u): if (!$u) continue; ?>
<span class="avatar rounded-circle border border-2">
<img src="<?php echo esc_url($u); ?>" class="img-fluid rounded-circle" alt="avatar">
</span>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- Counter Section -->
<div class="counter-section text-center">
<?php if ($counter_number): ?>
<h5 class="counter-number mb-1"><?php echo esc_html($counter_number); ?></h5>
<?php endif; ?>
<?php if ($counter_title): ?>
<p class="counter-title mb-0"><?php echo esc_html($counter_title); ?></p>
<?php endif; ?>
</div>
</div>
<!-- Row 2: Bottom Image (439px height) -->
<?php if ($right_side_below_img): ?>
<div class="bottom-image-section flex-grow-1">
<img src="<?php echo esc_url($right_side_below_img); ?>" alt="Bottom Image" class="img-fluid rounded w-100">
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Right Column with FAQ Section (Unchanged) -->
<div class="col-lg-6 ps-3 ps-lg-5">
<div class="section-header text-left wow fadeInUp">
<?php if ($subtitle): ?>
<div class="sub-ttitle py-2 px-3 rounded-pill">
<span class="clircle me-2"></span><?php echo wp_kses_post($subtitle); ?>
</div>
<?php endif; ?>
<?php if ($title): ?>
<h2 class="title mt-2 title_style1"><?php echo wp_kses_post($title); ?></h2>
<?php endif; ?>
</div>
<!-- FAQ Accordion Section -->
<div class="accordion faq-accordion" id="<?php echo esc_attr($acc_id); ?>">
<?php foreach ($items as $index => $item):
$is_open = isset($item['open']) && $item['open'] === 'yes';
$collapse_id = 'faq-collapse-' . $this->get_id() . '-' . $index;
$delay = !empty($item['wow_delay']) ? $item['wow_delay'] : '';
?>
<div class="accordion-item mb-3 wow fadeInUp<?php echo $is_open ? ' show' : ''; ?>" data-wow-duration="3s"<?php echo $delay ? ' data-wow-delay="' . esc_attr($delay) . '"' : ''; ?>>
<h2 class="accordion-header">
<button class="accordion-button<?php echo $is_open ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?php echo esc_attr($collapse_id); ?>" aria-expanded="<?php echo $is_open ? 'true' : 'false'; ?>" aria-controls="<?php echo esc_attr($collapse_id); ?>">
<?php echo esc_html($item['question']); ?>
</button>
</h2>
<div id="<?php echo esc_attr($collapse_id); ?>" class="accordion-collapse collapse<?php echo $is_open ? ' show' : ''; ?>" data-bs-parent="#<?php echo esc_attr($acc_id); ?>">
<div class="accordion-body">
<p class="mb-0"><?php echo esc_html($item['answer']); ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<?php endif; ?>
<?php
}
}