<?php

$sectionData =
    $section
    ?? $currentSection
    ?? [];

$langIsArabic =
(
    (function_exists('ec_lang') ? ec_lang() : ($_SESSION['lang'] ?? 'ar'))
    === 'ar'
);

$settings =
json_decode(
    (string)($sectionData['settings_json'] ?? '{}'),
    true
);

$settings =
is_array($settings)
? $settings
: [];

$layout =
(string)($settings['layout_type'] ?? 'cards_grid');

$items =
$settings['items'] ?? [];

$items =
is_array($items)
? $items
: [];

$title =
$langIsArabic
? (
    $sectionData['title_ar']
    ?? $sectionData['section_title_ar']
    ?? ''
)
: (
    $sectionData['title_en']
    ?? $sectionData['section_title_en']
    ?? ''
);

$subtitle =
$langIsArabic
? (
    $sectionData['subtitle_ar']
    ?? ''
)
: (
    $sectionData['subtitle_en']
    ?? ''
);

$sectionClass =
'dyn-layout-' .
preg_replace(
    '/[^a-z0-9\-_]/i',
    '',
    $layout
);

?>

<section data-cms-section="terms" id="terms" class="dyn-layout-section <?= htmlspecialchars($sectionClass) ?>">

<div class="container">

<?php if ($title !== ''): ?>
<div class="dyn-layout-head">
    <h2><?= htmlspecialchars($title) ?></h2>
    <span></span>
    <?php if ($subtitle !== ''): ?>
        <p><?= htmlspecialchars($subtitle) ?></p>
    <?php endif; ?>
</div>
<?php endif; ?>

<?php if ($layout === 'timeline_cards'): ?>

<div class="dyn-timeline-grid">

<?php foreach ($items as $item): ?>

<?php
$itemTitle =
$langIsArabic
? ($item['title_ar'] ?? $item['title_en'] ?? '')
: ($item['title_en'] ?? $item['title_ar'] ?? '');

$itemBody =
$langIsArabic
? ($item['body_ar'] ?? $item['body_en'] ?? '')
: ($item['body_en'] ?? $item['body_ar'] ?? '');

$icon =
$item['icon'] ?? 'fa-calendar-days';
?>

<div class="dyn-timeline-card">
    <div class="dyn-dot"></div>
    <i class="fa <?= htmlspecialchars($icon) ?>"></i>
    <h3><?= htmlspecialchars($itemTitle) ?></h3>
    <div class="dyn-body"><?= nl2br(htmlspecialchars($itemBody)) ?></div>
</div>

<?php endforeach; ?>

</div>

<?php elseif ($layout === 'resource_links'): ?>

<div class="dyn-resource-grid">

<?php foreach ($items as $item): ?>

<?php
$itemTitle =
$langIsArabic
? ($item['title_ar'] ?? $item['title_en'] ?? '')
: ($item['title_en'] ?? $item['title_ar'] ?? '');

$url =
(string)($item['url'] ?? '#');

$button =
$langIsArabic
? ($item['button_ar'] ?? 'تحميل')
: ($item['button_en'] ?? 'Download');

$icon =
$item['icon'] ?? 'fa-file-word';
?>

<div class="dyn-resource-card">
    <i class="fa <?= htmlspecialchars($icon) ?>"></i>
    <h3><?= htmlspecialchars($itemTitle) ?></h3>
    <a href="<?= htmlspecialchars($url) ?>">
        <?= htmlspecialchars($button) ?>
    </a>
</div>

<?php endforeach; ?>

</div>


<?php elseif ($layout === 'contact_cards'): ?>

<div class="dyn-contact-grid">

<?php foreach ($items as $item): ?>

<?php
$itemTitle =
$langIsArabic
? ($item['title_ar'] ?? $item['title_en'] ?? '')
: ($item['title_en'] ?? $item['title_ar'] ?? '');

$itemBody =
$langIsArabic
? ($item['body_ar'] ?? $item['body_en'] ?? '')
: ($item['body_en'] ?? $item['body_ar'] ?? '');

$url =
(string)($item['url'] ?? '');

$icon =
$item['icon'] ?? 'fa-envelope';
?>

<div class="dyn-contact-card">

    <i class="fa <?= htmlspecialchars($icon) ?>"></i>

    <h3><?= htmlspecialchars($itemTitle) ?></h3>

    <?php if ($url !== ''): ?>

        <a href="<?= htmlspecialchars($url) ?>">
            <?= nl2br(htmlspecialchars($itemBody)) ?>
        </a>

    <?php else: ?>

        <p><?= nl2br(htmlspecialchars($itemBody)) ?></p>

    <?php endif; ?>

</div>

<?php endforeach; ?>

</div>


<?php elseif ($layout === 'quick_response_form'): ?>

<?php if (!empty($quickResponseStatus)): ?>


<div
style="
background:#198754;
color:#ffffff;
padding:20px;
margin:20px 0;
font-size:20px;
font-weight:700;
border-radius:12px;
border:3px solid #146c43;
box-shadow:0 10px 25px rgba(0,0,0,.15);
"
>
SUCCESS MESSAGE:
<?= htmlspecialchars($quickResponseStatus['message']) ?>
</div>

<?php endif; ?>
<?php

$formTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'تواصل معنا')
: ($settings['title_en'] ?? 'Quick Response Form');

$formSubtitle =
$langIsArabic
? ($settings['subtitle_ar'] ?? '')
: ($settings['subtitle_en'] ?? '');

?>

<section class="ec-quick-response-section">

<div class="ec-quick-response-wrap">

<div class="ec-map-head">

    <div class="ec-map-badge">
        <i class="fa fa-paper-plane"></i>
        <?= htmlspecialchars($formTitle) ?>
    </div>

    <h2><?= htmlspecialchars($formTitle) ?></h2>

    <div class="ec-map-line"></div>

    <?php if ($formSubtitle !== ''): ?>
        <p><?= htmlspecialchars($formSubtitle) ?></p>
    <?php endif; ?>

</div>

<form
method="post"
action="/easychair/conference/contact/send"
class="ec-contact-form"
>

<input
type="hidden"
name="conference_id"
value="<?= (int)($conference['id'] ?? 0) ?>"
>

<div class="row g-3">

<div class="col-md-6">
<input
class="form-control"
name="full_name"
required
placeholder="<?= $langIsArabic ? 'الاسم الكامل' : 'Full Name' ?>"
>
</div>

<div class="col-md-6">
<input
type="email"
class="form-control"
name="email"
required
placeholder="<?= $langIsArabic ? 'البريد الإلكتروني' : 'Email Address' ?>"
>
</div>

<div class="col-12">
<input
class="form-control"
name="subject"
placeholder="<?= $langIsArabic ? 'الموضوع' : 'Subject' ?>"
>
</div>

<div class="col-12">
<textarea
class="form-control"
name="message"
rows="6"
required
placeholder="<?= $langIsArabic ? 'رسالتك' : 'Your Message' ?>"
></textarea>
</div>

<div class="col-12">

<button
type="submit"
class="btn btn-primary btn-lg"
>

<i class="fa fa-paper-plane"></i>

<?= $langIsArabic
? 'إرسال الرسالة'
: 'Send Message'
?>

</button>

</div>

</div>

</form>

</div>

</section>


<?php elseif ($layout === 'location_map'): ?>

<?php

$mapTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'موقع المؤتمر')
: ($settings['title_en'] ?? 'Conference Location');

$mapSubtitle =
$langIsArabic
? ($settings['subtitle_ar'] ?? '')
: ($settings['subtitle_en'] ?? '');

$venue =
$langIsArabic
? ($settings['venue_ar'] ?? '')
: ($settings['venue_en'] ?? '');

$address =
$langIsArabic
? ($settings['address_ar'] ?? '')
: ($settings['address_en'] ?? '');

$mapEmbed =
trim((string)($settings['map_embed'] ?? ''));


$mapUrl =
trim((string)($settings['map_url'] ?? ''));

?>

<section class="ec-map-section">

<div class="ec-map-wrap">

    <div class="ec-map-head">
        <div class="ec-map-badge">
            <i class="fa fa-location-dot"></i>
            <?= htmlspecialchars($mapTitle) ?>
        </div>

        <h2><?= htmlspecialchars($mapTitle) ?></h2>

        <div class="ec-map-line"></div>

        <?php if ($mapSubtitle !== ''): ?>
            <p><?= htmlspecialchars($mapSubtitle) ?></p>
        <?php endif; ?>
    </div>

    <div class="ec-map-grid">

        <div class="ec-map-info">

            <div class="ec-map-icon">
                <i class="fa fa-map-location-dot"></i>
            </div>

            <?php if ($venue !== ''): ?>
                <h3><?= htmlspecialchars($venue) ?></h3>
            <?php endif; ?>

            <?php if ($address !== ''): ?>
                <p><?= nl2br(htmlspecialchars($address)) ?></p>
            <?php endif; ?>

            <?php if ($mapUrl !== ''): ?>
                <a href="<?= htmlspecialchars($mapUrl) ?>" target="_blank" class="ec-map-btn">
                    <i class="fa fa-up-right-from-square"></i>
                    <?= $langIsArabic ? 'فتح الخريطة' : 'Open Map' ?>
                </a>
            <?php endif; ?>

        </div>

        <div class="ec-map-box">

            <?php if ($mapEmbed !== ''): ?>

                <div class="ec-map-frame">
                    <?= $mapEmbed ?>
                </div>

            <?php else: ?>

                <div class="ec-map-empty">
                    <i class="fa fa-map"></i>
                    <strong>
                        <?= $langIsArabic
                            ? 'لم يتم إضافة كود الخريطة بعد'
                            : 'Map embed has not been added yet'
                        ?>
                    </strong>
                </div>

            <?php endif; ?>

        </div>

    </div>

</div>

</section>

<style>
.ec-map-section{
padding:70px 0;
direction:rtl;
}

.ec-map-wrap{
max-width:1250px;
margin:auto;
padding:0 22px;
}

.ec-map-head{
text-align:center;
margin-bottom:42px;
}

.ec-map-badge{
display:inline-flex;
align-items:center;
gap:10px;
background:#2457d6;
color:#fff;
padding:12px 24px;
border-radius:999px;
font-weight:900;
box-shadow:0 12px 30px rgba(36,87,214,.25);
margin-bottom:18px;
}

.ec-map-head h2{
font-size:42px;
font-weight:900;
margin:0;
color:rgba(255,255,255,.65);
}

.ec-map-line{
width:100px;
height:5px;
background:#8a4300;
border-radius:999px;
margin:18px auto;
}

.ec-map-head p{
font-size:19px;
color:#6c788c;
margin:0;
}

.ec-map-grid{
display:grid;
grid-template-columns:360px 1fr;
gap:28px;
align-items:stretch;
}

.ec-map-info,
.ec-map-box{
background:#fff;
border-radius:28px;
box-shadow:0 16px 45px rgba(0,0,0,.09);
overflow:hidden;
}

.ec-map-info{
padding:38px;
text-align:center;
border-top:6px solid #8a4300;
}

.ec-map-icon{
width:92px;
height:92px;
border-radius:26px;
background:#8a4300;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
margin:0 auto 24px;
}

.ec-map-info h3{
font-size:26px;
font-weight:900;
color:#06275d;
margin-bottom:16px;
}

.ec-map-info p{
font-size:17px;
line-height:1.9;
color:#637085;
}

.ec-map-btn{
display:inline-flex;
align-items:center;
gap:9px;
background:#2457d6;
color:#fff;
padding:13px 28px;
border-radius:999px;
font-weight:900;
text-decoration:none;
margin-top:14px;
}

.ec-map-frame,
.ec-map-frame iframe{
width:100%!important;
height:500px!important;
min-height:500px!important;
border:0!important;
display:block!important;
}

.ec-map-empty{
height:500px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:15px;
color:#7b8797;
}

.ec-map-empty i{
font-size:58px;
color:#8a4300;
}

@media(max-width:992px){
.ec-map-grid{
grid-template-columns:1fr;
}
.ec-map-head h2{
font-size:32px;
}
}
</style>



<?php elseif ($layout === 'pricing_plans'): ?>

<?php

$pricingTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'رسوم المشاركة')
: ($settings['title_en'] ?? 'Event Price List');

$pricingSubtitle =
$langIsArabic
? ($settings['subtitle_ar'] ?? 'خيارات رسوم المشاركة في المؤتمر')
: ($settings['subtitle_en'] ?? 'Perfect price for event');

$currency =
(string)($settings['currency'] ?? '$');

$plans =
$settings['plans'] ?? [];

$plans =
is_array($plans)
? $plans
: [];

?>

<section class="ec-pricing-section">

<div class="ec-pricing-wrap">

    <div class="ec-pricing-head">

        <!-- div class="ec-pricing-headline">
            <span class="ec-pricing-head-icon">
                <i class="fa fa-user"></i>
            </span>

            <div>
                <strong><?= htmlspecialchars($pricingTitle) ?></strong>
                <em>/ <?= htmlspecialchars($pricingSubtitle) ?></em>
            </div>
        </div>

    </div -->

    <div class="ec-pricing-grid">

        <?php foreach ($plans as $plan): ?>

            <?php

            $planTitle =
            $langIsArabic
            ? ($plan['title_ar'] ?? $plan['title_en'] ?? '')
            : ($plan['title_en'] ?? $plan['title_ar'] ?? '');

            $price =
            (string)($plan['price'] ?? '');

            $buttonText =
            $langIsArabic
            ? ($plan['button_ar'] ?? 'التسجيل')
            : ($plan['button_en'] ?? 'Register');

            $buttonUrl =
            (string)($plan['button_url'] ?? '/easychair/register');

            $isBest =
            !empty($plan['is_best']);

            $features =
            $langIsArabic
            ? ($plan['features_ar'] ?? [])
            : ($plan['features_en'] ?? []);

            if (!is_array($features)) {
                $features = [];
            }

            ?>

            <div class="ec-price-card <?= $isBest ? 'is-best' : '' ?>">

                <?php if ($isBest): ?>
                    <div class="ec-price-ribbon">
                        <?= $langIsArabic ? 'الموصى به' : 'BEST' ?>
                    </div>
                <?php endif; ?>

                <div class="ec-price-plan-title">
                    <?= htmlspecialchars($planTitle) ?>
                </div>

                <div class="ec-price-amount">
                    <span><?= htmlspecialchars($currency) ?></span>
                    <strong><?= htmlspecialchars($price) ?></strong>
                </div>

                <div class="ec-price-features">

                    <?php foreach ($features as $feature): ?>

                        <div class="ec-price-feature">
                            <i class="fa fa-circle-check"></i>
                            <span><?= htmlspecialchars((string)$feature) ?></span>
                        </div>

                    <?php endforeach; ?>

                </div>

                <!-- a
                    href="<?= htmlspecialchars($buttonUrl) ?>"
                    class="ec-price-btn"
                >
                    <?= htmlspecialchars($buttonText) ?>
                </a -->

            </div>

        <?php endforeach; ?>

    </div>

</div>

</section>

<style>
.ec-pricing-section{
padding:80px 0;
background:#f7f7f7;
direction:inherit;
}

.ec-pricing-wrap{
max-width:1280px;
margin:auto;
padding:0 24px;
}

.ec-pricing-head{
margin-bottom:55px;
}

.ec-pricing-headline{
display:flex;
align-items:center;
gap:20px;
color:#10213a;
font-size:30px;
}

.ec-pricing-headline strong{
font-weight:900;
letter-spacing:.5px;
}

.ec-pricing-headline em{
font-style:normal;
font-weight:300;
color:#555;
}

.ec-pricing-head-icon{
width:62px;
height:62px;
border-radius:12px;
background:#1f3f75;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}

.ec-pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px;
}

.ec-price-card{
background:#fbfbfb;
border:1.5px solid #173464;
border-radius:10px;
padding:10px 10px 36px;
position:relative;
overflow:hidden;
text-align:center;
min-height:560px;
box-shadow:0 10px 28px rgba(0,0,0,.04);
}

.ec-price-card.is-best{
border-color:#1f3f75;
box-shadow:0 16px 38px rgba(31,63,117,.16);
}

.ec-price-ribbon{
position:absolute;
top:0;
right:0;
width:120px;
height:120px;
background:#1f3f75;
color:#fff;
font-weight:900;
font-size:14px;
display:flex;
align-items:flex-start;
justify-content:center;
padding-top:18px;
transform:translate(42px,-42px) rotate(45deg);
z-index:2;
}

.ec-price-plan-title{
background:#f0f0f0;
border-radius:9px;
padding:28px 10px;
font-size:1.2rem;
font-weight:900;
color:#4a5157;
text-transform:uppercase;
letter-spacing:1px;
}

.ec-price-amount{
padding:52px 0 44px;
color:#1f3f75;
display:flex;
align-items:flex-start;
justify-content:center;
gap:8px;
}

.ec-price-amount span{
font-size:44px;
font-weight:300;
line-height:1;
}

.ec-price-amount strong{
font-size:76px;
font-weight:900;
line-height:.9;
}

.ec-price-features{
border-top:1px solid #ccc;
margin:0 0 30px;
}

.ec-price-feature{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:20px 10px;
border-bottom:1px solid #ccc;
color:#71808c;
font-size:18px;
}

.ec-price-feature i{
color:#71808c;
font-size:18px;
}

.ec-price-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:170px;
padding:18px 28px;
border-radius:10px;
background:#1f3f75;
color:#fff;
text-decoration:none;
font-weight:900;
text-transform:uppercase;
}

.ec-price-btn:hover{
color:#fff;
filter:brightness(1.08);
}

html[dir="rtl"] .ec-pricing-headline{
flex-direction:row-reverse;
text-align:right;
}

html[dir="rtl"] .ec-price-ribbon{
right:auto;
left:0;
transform:translate(-42px,-42px) rotate(-45deg);
}

@media(max-width:992px){
.ec-pricing-grid{
grid-template-columns:1fr;
}
.ec-pricing-headline{
font-size:24px;
}
.ec-price-card{
min-height:auto;
}
}
</style>




<?php elseif ($layout === 'animated_marquee'): ?>

<?php

$marqueeRows =
$settings['rows'] ?? [];

$marqueeRows =
is_array($marqueeRows)
? $marqueeRows
: [];

$speed =
(int)($settings['speed_seconds'] ?? 28);

if ($speed < 8) {
    $speed = 8;
}

$background =
(string)($settings['background'] ?? '#101735');

$stripOne =
(string)($settings['strip_one_color'] ?? '#7b4df2');

$stripTwo =
(string)($settings['strip_two_color'] ?? '#48258f');

$textColor =
(string)($settings['text_color'] ?? '#ffffff');

?>

<section class="ec-marquee-section">

<div class="ec-marquee-stage">

<?php foreach ($marqueeRows as $index => $row): ?>

<?php

$items =
$langIsArabic
? ($row['items_ar'] ?? $row['items_en'] ?? [])
: ($row['items_en'] ?? $row['items_ar'] ?? []);

$items =
is_array($items)
? $items
: [];

$direction =
(string)(
    $row['direction']
    ?? (
        $index % 2 === 0
        ? 'left'
        : 'right'
    )
);

$rowColor =
(string)(
    $row['color']
    ?? (
        $index % 2 === 0
        ? $stripOne
        : $stripTwo
    )
);

$rotation =
(string)(
    $row['rotation']
    ?? (
        $index % 2 === 0
        ? '-2deg'
        : '2deg'
    )
);

$animationClass =
$direction === 'right'
? 'ec-marquee-to-right'
: 'ec-marquee-to-left';

?>

<div
class="ec-marquee-strip <?= htmlspecialchars($animationClass) ?>"
style="
--ec-marquee-speed: <?= (int)$speed ?>s;
--ec-marquee-bg: <?= htmlspecialchars($rowColor) ?>;
--ec-marquee-text: <?= htmlspecialchars($textColor) ?>;
"
>

    <div class="ec-marquee-track">

        <?php for ($repeat = 0; $repeat < 2; $repeat++): ?>

            <?php foreach ($items as $item): ?>

                <span class="ec-marquee-item">
                    <?= htmlspecialchars((string)$item) ?>
                </span>

                <span class="ec-marquee-separator">/</span>

            <?php endforeach; ?>

        <?php endfor; ?>

    </div>

</div>

<?php endforeach; ?>

</div>

</section>

<style>

.ec-marquee-section{
background:<?= htmlspecialchars($background) ?>;
padding:0;
margin:0;
overflow:visible;
position:relative;
}

.ec-marquee-stage{
position:relative;
width:100%;
height:280px;
overflow:visible;
}

/* ribbon 1 */

.ec-marquee-strip:nth-of-type(1){

position:absolute;

top:40px;

left:-5%;

width:110%;

height:86px;

background:var(--ec-marquee-bg);

color:var(--ec-marquee-text);

display:flex;

align-items:center;

overflow:hidden;

transform:rotate(-2deg);

z-index:20;

box-shadow:
0 18px 40px rgba(0,0,0,.22);
}

/* ribbon 2 */

.ec-marquee-strip:nth-of-type(2){

position:absolute;

top:165px;

left:-5%;

width:110%;

height:86px;

background:var(--ec-marquee-bg);

color:var(--ec-marquee-text);

display:flex;

align-items:center;

overflow:hidden;

transform:rotate(2deg);

z-index:10;

box-shadow:
0 18px 40px rgba(0,0,0,.22);
}

.ec-marquee-track{
display:flex;
align-items:center;
white-space:nowrap;
will-change:transform;
}

.ec-marquee-item{
font-size:52px;
font-weight:500;
padding:0 34px;
line-height:1;
}

.ec-marquee-separator{
font-size:52px;
opacity:.25;
padding:0 22px;
line-height:1;
}

.ec-marquee-to-left .ec-marquee-track{
animation:ecMarqueeLeft var(--ec-marquee-speed) linear infinite;
}

.ec-marquee-to-right .ec-marquee-track{
animation:ecMarqueeRight var(--ec-marquee-speed) linear infinite;
}

@keyframes ecMarqueeLeft{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-50%);
}
}

@keyframes ecMarqueeRight{
0%{
transform:translateX(-50%);
}
100%{
transform:translateX(0);
}
}

@media(max-width:992px){

.ec-marquee-stage{
height:200px;
}

.ec-marquee-strip:nth-of-type(1){
top:20px;
height:60px;
}

.ec-marquee-strip:nth-of-type(2){
top:100px;
height:60px;
}

.ec-marquee-item,
.ec-marquee-separator{
font-size:30px;
}

}

@media(max-width:576px){

.ec-marquee-stage{
height:160px;
}

.ec-marquee-strip:nth-of-type(1){
top:15px;
height:50px;
}

.ec-marquee-strip:nth-of-type(2){
top:80px;
height:50px;
}

.ec-marquee-item,
.ec-marquee-separator{
font-size:22px;
}

}

</style>


<?php elseif ($layout === 'faq_accordion'): ?>

<?php

$faqEyebrow =
$langIsArabic
? ($settings['eyebrow_ar'] ?? 'كل ما تحتاج معرفته')
: ($settings['eyebrow_en'] ?? 'Everything You Need To Know');

$faqTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'الأسئلة الشائعة')
: ($settings['title_en'] ?? 'Frequently Asked Questions');

$faqItems =
$settings['items'] ?? [];

$faqItems =
is_array($faqItems)
? $faqItems
: [];

$faqUid =
'faq_' . md5((string)($sectionData['id'] ?? uniqid('', true)));

?>

<section class="ec-faq-section <?= $langIsArabic ? 'is-rtl' : 'is-ltr' ?>">

<div class="container">
    <div class="ec-faq-list"  style="margin:100px;">

        <?php foreach ($faqItems as $i => $item): ?>

            <?php

            $q =
            $langIsArabic
            ? ($item['question_ar'] ?? $item['question_en'] ?? '')
            : ($item['question_en'] ?? $item['question_ar'] ?? '');

            $a =
            $langIsArabic
            ? ($item['answer_ar'] ?? $item['answer_en'] ?? '')
            : ($item['answer_en'] ?? $item['answer_ar'] ?? '');

            $open =
            !empty($item['open']);

            $itemId =
            $faqUid . '_' . $i;

            ?>

            <div class="ec-faq-item <?= $open ? 'is-open' : '' ?>">

                <button
                    type="button"
                    class="ec-faq-question"
                    data-target="<?= htmlspecialchars($itemId) ?>"
                    aria-expanded="<?= $open ? 'true' : 'false' ?>"
                >
                    <span><?= htmlspecialchars($q) ?></span>
                    <i class="fa fa-chevron-down"></i>
                </button>

                <div
                    id="<?= htmlspecialchars($itemId) ?>"
                    class="ec-faq-answer"
                    style="<?= $open ? 'display:block;' : 'display:none;' ?>;"
                >
                    <?= nl2br(htmlspecialchars($a)) ?>
                </div>

            </div>

        <?php endforeach; ?>

    </div>

</div>

</section>

<script>
document.addEventListener('click', function(e) {

    const btn = e.target.closest('.ec-faq-question');

    if (!btn) {
        return;
    }

    const targetId = btn.getAttribute('data-target');
    const answer = document.getElementById(targetId);

    if (!answer) {
        return;
    }

    const item = btn.closest('.ec-faq-item');
    const isOpen = item.classList.contains('is-open');

    item.classList.toggle('is-open', !isOpen);
    btn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
    answer.style.display = isOpen ? 'none' : 'block';

});
</script>

<style>
.ec-faq-section{
background:#10142f;
color:#fff;
padding:95px 0;
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
overflow:hidden;
}

.ec-faq-wrap{
width:100%;
max-width:1500px;
margin:0 auto;
padding:0 70px;
display:grid;
grid-template-columns:40% 60%;
gap:80px;
align-items:start;
box-sizing:border-box;
}

.ec-faq-section.is-rtl{
direction:rtl;
}

.ec-faq-section.is-ltr{
direction:ltr;
}

.ec-faq-section.is-rtl .ec-faq-wrap{
text-align:right;
}

.ec-faq-section.is-ltr .ec-faq-wrap{
text-align:left;
}

.ec-faq-eyebrow{
color:#c9ccdb;
font-size:22px;
font-weight:800;
margin-bottom:28px;
}

.ec-faq-intro h2{
font-size:68px;
line-height:1.08;
font-weight:950;
letter-spacing:-1px;
margin:0;
color:#fff;
}

.ec-faq-list{
width:100%;
min-width:0;
}

.ec-faq-item{
border-bottom:1px solid rgba(255,255,255,.28);
}

.ec-faq-question{
width:100%;
border:0;
background:transparent;
color:#fff;
padding:28px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
font-size:24px;
font-weight:900;
cursor:pointer;
text-align:inherit;
}

.ec-faq-question span{
display:block;
line-height:1.45;
flex:1;
min-width:0;
}

.ec-faq-section.is-rtl .ec-faq-question{
direction:rtl;
text-align:right;
}

.ec-faq-section.is-rtl .ec-faq-question span{
text-align:right;
}

.ec-faq-section.is-ltr .ec-faq-question{
direction:ltr;
text-align:left;
}

.ec-faq-section.is-ltr .ec-faq-question span{
text-align:left;
}

.ec-faq-question i{
font-size:20px;
flex:0 0 auto;
transition:transform .25s ease;
}

.ec-faq-item.is-open .ec-faq-question i{
transform:rotate(180deg);
}

.ec-faq-answer{
color:#c7cad8;
font-size:23px;
line-height:1.3;
padding:0 0 34px;
max-width:90%;
}

.ec-faq-section.is-rtl .ec-faq-answer{
direction:rtl;
text-align:right;
}

.ec-faq-section.is-ltr .ec-faq-answer{
direction:ltr;
text-align:left;
}

@media(max-width:1100px){
.ec-faq-wrap{
grid-template-columns:1fr;
gap:45px;
padding:0 36px;
}

.ec-faq-intro h2{
font-size:48px;
}
}

@media(max-width:576px){
.ec-faq-section{
padding:60px 0;
}

.ec-faq-wrap{
padding:0 22px;
}

.ec-faq-intro h2{
font-size:36px;
}

.ec-faq-question{
font-size:18px;
}

.ec-faq-answer{
font-size:18px;
}
}
</style>



<?php elseif ($layout === 'conference_brochure'): ?>

<?php

$brochureTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'كتيب المؤتمر')
: ($settings['title_en'] ?? 'Conference Brochure');

$brochureSubtitle =
$langIsArabic
? ($settings['subtitle_ar'] ?? '')
: ($settings['subtitle_en'] ?? '');

$brochureFile =
trim((string)($settings['brochure_file'] ?? ''));

$isExternalBrochure =
preg_match('/^https?:\/\//i', $brochureFile) === 1;

$brochureUrl =
'';

if ($brochureFile !== '') {

    $brochureUrl =
        $isExternalBrochure
        ? $brochureFile
        : '/easychair/uploads/conference_brochures/' . rawurlencode($brochureFile);
}

$embedBrochure =
!empty($settings['embed']);

?>

<section class="ec-brochure-section <?= $langIsArabic ? 'is-rtl' : 'is-ltr' ?>">

<div class="ec-brochure-wrap">

    <div class="ec-brochure-card">

        <div class="ec-brochure-icon">
            <i class="fa fa-file-pdf"></i>
        </div>

        <div class="ec-brochure-content">

            <div class="ec-brochure-badge">
                <?= $langIsArabic ? 'ملف PDF' : 'PDF Document' ?>
            </div>

            <h2><?= htmlspecialchars($brochureTitle) ?></h2>

            <?php if ($brochureSubtitle !== ''): ?>
                <p><?= htmlspecialchars($brochureSubtitle) ?></p>
            <?php endif; ?>

            <?php if ($brochureUrl !== ''): ?>

                <div class="ec-brochure-actions">

                    <a
                        href="<?= htmlspecialchars($brochureUrl) ?>"
                        target="_blank"
                        class="ec-brochure-btn primary"
                    >
                        <i class="fa fa-eye"></i>
                        <?= $langIsArabic ? 'عرض الكتيب' : 'View Brochure' ?>
                    </a>

                    <a
                        href="<?= htmlspecialchars($brochureUrl) ?>"
                        target="_blank"
                        class="ec-brochure-btn secondary"
                    >
                        <i class="fa fa-download"></i>
                        <?= $langIsArabic ? 'تحميل PDF' : 'Download PDF' ?>
                    </a>

                </div>

            <?php else: ?>

                <div class="ec-brochure-empty">
                    <?= $langIsArabic
                        ? 'لم يتم إضافة رابط كتيب المؤتمر بعد.'
                        : 'Conference brochure link has not been added yet.'
                    ?>
                </div>

            <?php endif; ?>

        </div>

    </div>

    <?php if ($brochureUrl !== '' && $embedBrochure): ?>

        <div class="ec-brochure-preview">

            <iframe
                src="<?= htmlspecialchars($brochureUrl) ?>"
                loading="lazy"
                title="<?= htmlspecialchars($brochureTitle) ?>"
            ></iframe>

        </div>

    <?php endif; ?>

</div>

</section>

<style>
.ec-brochure-section{
padding:90px 0;
background:
radial-gradient(circle at 20% 20%, rgba(30,80,220,.18), transparent 35%),
radial-gradient(circle at 80% 70%, rgba(0,120,255,.12), transparent 40%),
linear-gradient(135deg,#020817 0%,#03163f 35%,#07286e 70%,#0b3c9d 100%);
color:#fff;
}

.ec-brochure-section.is-rtl{
direction:rtl;
text-align:right;
}

.ec-brochure-section.is-ltr{
direction:ltr;
text-align:left;
}

.ec-brochure-wrap{
max-width:1280px;
margin:0 auto;
padding:0 24px;
}

.ec-brochure-card{
display:flex;
align-items:center;
gap:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:30px;
padding:38px;
box-shadow:0 22px 60px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}

.ec-brochure-section.is-rtl .ec-brochure-card{
flex-direction:row-reverse;
}

.ec-brochure-icon{
width:110px;
height:110px;
border-radius:28px;
background:rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:center;
font-size:58px;
color:#ff6b6b;
flex:0 0 auto;
}

.ec-brochure-content{
flex:1;
}

.ec-brochure-badge{
display:inline-flex;
align-items:center;
padding:8px 18px;
border-radius:999px;
background:rgba(255,255,255,.12);
color:#dbe7ff;
font-weight:800;
font-size:14px;
margin-bottom:16px;
}

.ec-brochure-content h2{
font-size:44px;
font-weight:950;
margin:0 0 14px;
color:#fff;
}

.ec-brochure-content p{
font-size:20px;
line-height:1.8;
color:rgba(255,255,255,.78);
margin:0 0 24px;
}

.ec-brochure-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
}

.ec-brochure-section.is-rtl .ec-brochure-actions{
justify-content:flex-start;
}

.ec-brochure-btn{
display:inline-flex;
align-items:center;
gap:10px;
border-radius:999px;
padding:14px 26px;
font-weight:900;
text-decoration:none;
color:#fff;
transition:.25s;
}

.ec-brochure-btn.primary{
background:#3568c8;
}

.ec-brochure-btn.secondary{
background:#0b8f62;
}

.ec-brochure-btn:hover{
transform:translateY(-2px);
color:#fff;
filter:brightness(1.08);
}

.ec-brochure-empty{
display:inline-flex;
padding:15px 22px;
background:rgba(255,193,7,.15);
border:1px solid rgba(255,193,7,.25);
border-radius:16px;
color:#ffe9a6;
font-weight:800;
}

.ec-brochure-preview{
margin-top:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:30px;
padding:18px;
box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.ec-brochure-preview iframe{
width:100%;
height:850px;
border:0;
border-radius:20px;
background:#fff;
display:block;
}

@media(max-width:992px){
.ec-brochure-card{
flex-direction:column !important;
align-items:flex-start;
}

.ec-brochure-section.is-rtl .ec-brochure-card{
align-items:flex-end;
}

.ec-brochure-content h2{
font-size:34px;
}

.ec-brochure-preview iframe{
height:620px;
}
}

@media(max-width:576px){
.ec-brochure-section{
padding:60px 0;
}

.ec-brochure-card{
padding:26px;
}

.ec-brochure-icon{
width:86px;
height:86px;
font-size:42px;
}

.ec-brochure-content h2{
font-size:28px;
}

.ec-brochure-preview iframe{
height:480px;
}
}
</style>



<?php elseif ($layout === 'testimonials_slider'): ?>

<?php

$testEyebrow =
$langIsArabic
? ($settings['eyebrow_ar'] ?? 'آراء المشاركين')
: ($settings['eyebrow_en'] ?? 'What People Say');

$testTitle =
$langIsArabic
? ($settings['title_ar'] ?? 'ماذا يقول المشاركون عن المؤتمر')
: ($settings['title_en'] ?? 'What People Say About ICHS-26');

$testItems =
$settings['items'] ?? [];

$testItems =
is_array($testItems)
? $testItems
: [];

$sliderId =
'testimonials_' . md5((string)($sectionData['id'] ?? uniqid('', true)));

?>

<section class="ec-testimonials-section <?= $langIsArabic ? 'is-rtl' : 'is-ltr' ?>" id="<?= htmlspecialchars($sliderId) ?>">

<div class="ec-testimonials-head">

    <div class="ec-testimonials-eyebrow">
        <?= htmlspecialchars($testEyebrow) ?>
    </div>

    <h2>
        <?= htmlspecialchars($testTitle) ?>
    </h2>

</div>

<div class="ec-testimonials-viewport">

    <div class="ec-testimonials-track">

        <?php foreach ($testItems as $i => $item): ?>

            <?php

            $name =
            $langIsArabic
            ? ($item['name_ar'] ?? $item['name_en'] ?? '')
            : ($item['name_en'] ?? $item['name_ar'] ?? '');

            $role =
            $langIsArabic
            ? ($item['role_ar'] ?? $item['role_en'] ?? '')
            : ($item['role_en'] ?? $item['role_ar'] ?? '');

            $quote =
            $langIsArabic
            ? ($item['quote_ar'] ?? $item['quote_en'] ?? '')
            : ($item['quote_en'] ?? $item['quote_ar'] ?? '');

            $image =
            (string)($item['image_url'] ?? '');

            $color =
            (string)($item['color'] ?? '#8FF0B0');

            ?>

            <article class="ec-testimonial-card" style="--testimonial-color: <?= htmlspecialchars($color) ?>;">

                <div class="ec-testimonial-photo">

                    <?php if ($image !== ''): ?>
                        <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($name) ?>">
                    <?php else: ?>
                        <div class="ec-testimonial-avatar">
                            <?= htmlspecialchars(mb_substr($name, 0, 1, 'UTF-8')) ?>
                        </div>
                    <?php endif; ?>

                </div>

                <div class="ec-testimonial-content">

                    <div class="ec-testimonial-quote-mark">
                        “
                    </div>

                    <p>
                        <?= nl2br(htmlspecialchars($quote)) ?>
                    </p>

                    <div class="ec-testimonial-person">
                        <strong><?= htmlspecialchars($name) ?></strong>
                        <span><?= htmlspecialchars($role) ?></span>
                    </div>

                </div>

            </article>

        <?php endforeach; ?>

    </div>

</div>

<div class="ec-testimonials-dots">
    <?php foreach ($testItems as $i => $item): ?>
        <button type="button" data-index="<?= (int)$i ?>" class="<?= $i === 0 ? 'active' : '' ?>"></button>
    <?php endforeach; ?>
</div>

</section>

<script>
(function(){

    const root =
        document.getElementById('<?= htmlspecialchars($sliderId) ?>');

    if (!root) {
        return;
    }

    const track =
        root.querySelector('.ec-testimonials-track');

    const dots =
        root.querySelectorAll('.ec-testimonials-dots button');

    if (!track || !dots.length) {
        return;
    }

    const rtl =
        document.documentElement.dir === 'rtl';

    let index = 0;

    function go(i){

        index =
            Math.max(
                0,
                Math.min(i, dots.length - 1)
            );

        const move =
            rtl
            ? (index * 100)
            : (-index * 100);

       track.style.transform =
'translateX(' + (-index * 100) + '%)';

        dots.forEach(function(dot,n){
            dot.classList.toggle(
                'active',
                n === index
            );
        });
    }

    dots.forEach(function(dot){

        dot.addEventListener(
            'click',
            function(){

                go(
                    parseInt(
                        dot.dataset.index || '0',
                        10
                    )
                );

            }
        );

    });

    setInterval(function(){

        go(
            (index + 1)
            %
            dots.length
        );

    },6000);

})();
</script>

<style>
.ec-testimonials-section{
padding:95px 0;
background:#ffffff;
color:#1d1d1d;
overflow:hidden;
}

.ec-testimonials-section.is-rtl{
direction:rtl;
text-align:right;
}

.ec-testimonials-section.is-ltr{
direction:ltr;
text-align:left;
}

.ec-testimonials-head{
text-align:center;
max-width:880px;
margin:0 auto 70px;
padding:0 24px;
}

.ec-testimonials-eyebrow{
font-size:18px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:#666;
margin-bottom:18px;
}

.ec-testimonials-head h2{
font-size:58px;
line-height:1.08;
font-weight:950;
color:#1f1b17;
text-transform:uppercase;
margin:0;
}

.ec-testimonials-viewport{
width:100%;
overflow:hidden;
}

.ec-testimonials-track{
display:flex;
transition:transform .55s ease;
will-change:transform;
}

.ec-testimonial-card{
min-width:100%;
display:grid;
grid-template-columns:420px minmax(0, 640px);
gap:0;
align-items:center;
justify-content:center;
padding:25px 24px 45px;
}

.ec-testimonials-section.is-rtl .ec-testimonial-card{
grid-template-columns:minmax(0, 640px) 420px;
}

.ec-testimonial-photo{
width:360px;
height:360px;
position:relative;
justify-self:end;
background:
linear-gradient(90deg, var(--testimonial-color) 0 50%, transparent 50%),
linear-gradient(0deg, var(--testimonial-color) 0 50%, transparent 50%);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.ec-testimonials-section.is-rtl .ec-testimonial-photo{
justify-self:start;
}

.ec-testimonial-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.ec-testimonials-section.is-rtl .ec-testimonials-track{
    flex-direction:row-reverse;
}

.ec-testimonial-avatar{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-size:110px;
font-weight:950;
background:var(--testimonial-color);
color:#111;
}

.ec-testimonial-content{
min-height:260px;
border:1px solid rgba(0,0,0,.35);
border-radius:10px;
padding:70px 52px 45px;
position:relative;
background:#fff;
box-shadow:0 15px 40px rgba(0,0,0,.04);
}

.ec-testimonial-quote-mark{
position:absolute;
top:-48px;
width:96px;
height:96px;
border-radius:50%;
background:var(--testimonial-color);
display:flex;
align-items:center;
justify-content:center;
font-size:76px;
line-height:1;
color:#111;
font-weight:700;
}

.ec-testimonials-section.is-ltr .ec-testimonial-quote-mark{
left:48px;
}

.ec-testimonials-section.is-rtl .ec-testimonial-quote-mark{
right:48px;
}

.ec-testimonial-content p{
font-size:22px;
line-height:1.75;
color:#5f6675;
margin:0 0 32px;
}

.ec-testimonial-person{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.ec-testimonial-person strong{
font-size:22px;
font-weight:950;
color:#1f1b17;
}

.ec-testimonial-person span{
font-size:18px;
color:#6a7280;
}

.ec-testimonials-dots{
display:flex;
align-items:center;
justify-content:center;
gap:13px;
margin-top:10px;
}

.ec-testimonials-dots button{
width:22px;
height:22px;
border-radius:50%;
border:1px solid #777;
background:#fff;
cursor:pointer;
transition:.2s;
}

.ec-testimonials-dots button.active{
background:#70aaff;
border-color:#70aaff;
box-shadow:0 0 0 4px rgba(112,170,255,.25);
}

@media(max-width:992px){
.ec-testimonials-head h2{
font-size:40px;
}

.ec-testimonial-card,
.ec-testimonials-section.is-rtl .ec-testimonial-card{
grid-template-columns:1fr;
gap:30px;
}

.ec-testimonial-photo,
.ec-testimonials-section.is-rtl .ec-testimonial-photo{
justify-self:center;
width:280px;
height:280px;
}

.ec-testimonial-content{
padding:62px 28px 36px;
}
}

@media(max-width:576px){
.ec-testimonials-section{
padding:65px 0;
}

.ec-testimonials-head h2{
font-size:32px;
}

.ec-testimonial-photo{
width:230px;
height:230px;
}

.ec-testimonial-content p{
font-size:18px;
}

.ec-testimonial-quote-mark{
width:76px;
height:76px;
font-size:58px;
}
}

.ec-testimonials-section.is-rtl .ec-testimonials-track{
    flex-direction:row-reverse;
}
</style>


<?php elseif ($layout === 'conference_about'): ?>
<?php

$about =
$settings['about'] ?? [];

$vision =
$settings['vision'] ?? [];

$sectionTitle =
$langIsArabic
? ($settings['section_title_ar'] ?? '')
: ($settings['section_title_en'] ?? '');

$sectionSubtitle =
$langIsArabic
? ($settings['section_subtitle_ar'] ?? '')
: ($settings['section_subtitle_en'] ?? '');

?>

<section class="ec-about-vision-section">

<div class="container">

<?php if ($sectionTitle !== ''): ?>
<div class="dyn-layout-head">
    <h2><?= htmlspecialchars($sectionTitle) ?></h2>
    <span></span>

    <?php if ($sectionSubtitle !== ''): ?>
        <p style="color:"#000"><?= htmlspecialchars($sectionSubtitle) ?></p>
    <?php endif; ?>
</div>
<?php endif; ?>

<div class="row g-5">

<div class="col-lg-6">

<div class="ec-about-card">

<div class="ec-about-header">
    <h3>
        <?= htmlspecialchars(
            $langIsArabic
            ? ($vision['title_ar'] ?? '')
            : ($vision['title_en'] ?? '')
        ) ?>
    </h3>

    <i class="fa <?= htmlspecialchars($vision['icon'] ?? 'fa-eye') ?>"></i>
</div>

<div class="ec-about-quote">

<?= htmlspecialchars(
    $langIsArabic
    ? ($vision['quote_ar'] ?? '')
    : ($vision['quote_en'] ?? '')
) ?>

</div>

<div class="ec-about-body">

<?= nl2br(htmlspecialchars(
    $langIsArabic
    ? ($vision['body_ar'] ?? '')
    : ($vision['body_en'] ?? '')
)) ?>

</div>

<?php if (!empty($vision['cta_ar']) || !empty($vision['cta_en'])): ?>

<div class="ec-about-cta">

<?= htmlspecialchars(
    $langIsArabic
    ? ($vision['cta_ar'] ?? '')
    : ($vision['cta_en'] ?? '')
) ?>

</div>

<?php endif; ?>

</div>

</div>

<div class="col-lg-6">

<div class="ec-about-card">

<div class="ec-about-header">
    <h3>
        <?= htmlspecialchars(
            $langIsArabic
            ? ($about['title_ar'] ?? '')
            : ($about['title_en'] ?? '')
        ) ?>
    </h3>

    <i class="fa <?= htmlspecialchars($about['icon'] ?? 'fa-building-columns') ?>"></i>
</div>

<div class="ec-about-body">

<?= nl2br(htmlspecialchars(
    $langIsArabic
    ? ($about['body_ar'] ?? '')
    : ($about['body_en'] ?? '')
)) ?>

</div>

<?php foreach (($about['highlights'] ?? []) as $h): ?>

<div class="ec-highlight">

<i class="fa <?= htmlspecialchars($h['icon'] ?? 'fa-star') ?>"></i>

<?= htmlspecialchars(
    $langIsArabic
    ? ($h['text_ar'] ?? '')
    : ($h['text_en'] ?? '')
) ?>

</div>

<?php endforeach; ?>

</div>

</div>

</div>

</div>

</section>

<style>

.ec-about-card{
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);
height:100%;
}

.ec-about-header{
background:#062c72;
color:#fff;
padding:30px;
display:flex;
justify-content:space-between;
align-items:center;
}

.ec-about-header h3{
margin:0;
font-size:2rem;
font-weight:800;
}

.ec-about-header i{
font-size:2rem;
}

.ec-about-body{
padding:35px;
font-size:1.15rem;
line-height:2;
}

.ec-about-quote{
margin:30px;
padding:30px;
background:#f6efe8;
border-radius:20px;
font-size:1.5rem;
font-weight:800;
color:#062c72;
text-align:center;
}

.ec-about-cta{
margin:0 30px 30px;
background:#062c72;
color:#fff;
padding:18px 25px;
border-radius:999px;
text-align:center;
font-weight:700;
}

.ec-highlight{
margin:15px 35px;
padding:18px;
background:#f8f8f8;
border-radius:16px;
}

.ec-highlight i{
margin-left:10px;
color:#8a4300;
}

</style>

<?php else: ?>

<div class="dyn-cards-grid">

<?php foreach ($items as $item): ?>

<?php
$itemTitle =
$langIsArabic
? ($item['title_ar'] ?? $item['title_en'] ?? '')
: ($item['title_en'] ?? $item['title_ar'] ?? '');

$itemBody =
$langIsArabic
? ($item['body_ar'] ?? $item['body_en'] ?? '')
: ($item['body_en'] ?? $item['body_ar'] ?? '');

$icon =
$item['icon'] ?? 'fa-circle-info';
?>

<div class="dyn-info-card">
    <div>
        <i class="fa <?= htmlspecialchars($icon) ?>"></i>
        <h3><?= htmlspecialchars($itemTitle) ?></h3>
    </div>
    <p><?= nl2br(htmlspecialchars($itemBody)) ?></p>
</div>

<?php endforeach; ?>

</div>

<?php endif; ?>

</div>

</section>


<style>

/* =========================================================
   EASYCONF UNIFIED DESIGN SYSTEM
   ========================================================= */

:root{
--ec-primary:#ffffff;
--ec-secondary:#8cb7ff;
--ec-accent:#4f8cff;

--ec-bg:
radial-gradient(
circle at 20% 20%,
rgba(30,80,220,.18),
transparent 35%
),
radial-gradient(
circle at 80% 70%,
rgba(0,120,255,.12),
transparent 40%
),
linear-gradient(
135deg,
#020817 0%,
#03163f 35%,
#07286e 70%,
#0b3c9d 100%
);

--ec-card:rgba(255,255,255,.08);

--ec-text:#ffffff;

--ec-muted:
rgba(255,255,255,.75);
--ec-radius:24px;
--ec-shadow:0 14px 40px rgba(0,0,0,.08);
--ec-shadow-hover:0 20px 50px rgba(0,0,0,.12);
}

/* =========================================================
   MAIN SECTION
   ========================================================= */

.dyn-layout-section{
padding:90px 0;
background:var(--ec-bg);
position:relative;
overflow:hidden;
}

.dyn-layout-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at 70% 50%,
rgba(70,120,255,.20),
transparent 35%
);
pointer-events:none;
}

html[dir="rtl"] .dyn-layout-section{
direction:rtl;
text-align:right;
}

html[dir="ltr"] .dyn-layout-section{
direction:ltr;
text-align:left;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.dyn-layout-head{
text-align:center;
margin-bottom:60px;
}

.dyn-layout-head h2{
font-size:48px;
font-weight:900;
color:var(--ec-primary);
margin-bottom:12px;
letter-spacing:-.5px;
}

.dyn-layout-head span{
display:block;
width:120px;
height:6px;
background:var(--ec-accent);
border-radius:999px;
margin:auto;
}

.dyn-layout-head p{
margin-top:18px;
font-size:20px;
color:var(--ec-muted);
max-width:900px;
margin-left:auto;
margin-right:auto;
line-height:1.8;
}

/* =========================================================
   GRIDS
   ========================================================= */

.dyn-cards-grid,
.dyn-resource-grid,
.dyn-contact-grid,
.dyn-timeline-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:34px;
}

/* =========================================================
   CARDS
   ========================================================= */

.dyn-info-card,
.dyn-resource-card,
.dyn-contact-card,
.dyn-timeline-card{

background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.10);

border-radius:var(--ec-radius);

padding:36px;

box-shadow:var(--ec-shadow);

transition:.30s ease;

border:none;

position:relative;

overflow:hidden;

height:100%;
}

.dyn-info-card:hover,
.dyn-resource-card:hover,
.dyn-contact-card:hover,
.dyn-timeline-card:hover{

transform:translateY(-8px);

box-shadow:var(--ec-shadow-hover);
}

.dyn-info-card::before,
.dyn-contact-card::before,
.dyn-resource-card::before,
.dyn-timeline-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:linear-gradient(
90deg,
var(--ec-primary),
var(--ec-secondary),
var(--ec-accent)
);
}

/* =========================================================
   ICONS
   ========================================================= */

.dyn-info-card i,
.dyn-contact-card i,
.dyn-resource-card i,
.dyn-timeline-card i{

width:82px;
height:82px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(255,255,255,.92);

color:#6ea1ff;

border-radius:22px;

font-size:34px;

margin:0 auto 28px auto;

position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;

float:none !important;
}

/* =========================================================
   TITLES
   ========================================================= */

.dyn-info-card h3,
.dyn-contact-card h3,
.dyn-resource-card h3,
.dyn-timeline-card h3{

font-size:26px;
font-weight:900;

color:var(--ec-primary);

margin-bottom:18px;
}

/* =========================================================
   TEXT
   ========================================================= */

.dyn-info-card p,
.dyn-contact-card p,
.dyn-timeline-card .dyn-body{

font-size:18px;
line-height:1.9;

color:var(--ec-muted);

margin:0;
}

/* =========================================================
   RESOURCE AREA
   ========================================================= */

.dyn-resource-grid{

background:linear-gradient(
135deg,
#06275d,
#24498d
);

padding:45px;

border-radius:32px;
}

.dyn-resource-card{

background:#ffffff;
text-align:center;
}

.dyn-resource-card i{
margin-left:auto;
margin-right:auto;
}

.dyn-resource-card a{

display:inline-flex;

align-items:center;
justify-content:center;

padding:14px 34px;

background:var(--ec-accent);

color:#fff;

font-weight:800;

border-radius:999px;

text-decoration:none;

transition:.25s;
}

.dyn-resource-card a:hover{

transform:translateY(-2px);

color:#fff;
}

/* =========================================================
   CONTACT
   ========================================================= */

.dyn-contact-card{
text-align:center;
}

.dyn-contact-card i{
margin-left:auto;
margin-right:auto;
}

.dyn-contact-card a{
color:var(--ec-secondary);
font-weight:800;
text-decoration:none;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.dyn-timeline-card{
text-align:center;
padding-top:55px;
}

.dyn-dot{

width:26px;
height:26px;

border-radius:50%;

background:var(--ec-accent);

position:absolute;

top:16px;
left:50%;

transform:translateX(-50%);
}

/* =========================================================
   RTL/LTR
   ========================================================= */

html[dir="rtl"] .dyn-info-card div{
justify-content:flex-start;
flex-direction:row-reverse;
}

html[dir="ltr"] .dyn-info-card div{
justify-content:flex-start;
flex-direction:row;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:992px){

.dyn-layout-section{
padding:65px 0;
}

.dyn-layout-head h2{
font-size:34px;
}

.dyn-cards-grid,
.dyn-resource-grid,
.dyn-contact-grid,
.dyn-timeline-grid{
grid-template-columns:1fr;
}

.dyn-resource-grid{
padding:25px;
}

}

</style>


<style>

.ec-pricing-headline{
display:flex;
align-items:center;
gap:20px;
color:#10213a;
font-size:30px;
margin-bottom:35px;
}

html[dir="rtl"] .ec-pricing-headline{
flex-direction:row-reverse;
justify-content:flex-start;
text-align:right;
}


html[dir="ltr"] .ec-pricing-headline{
flex-direction:row;
justify-content:flex-start;
text-align:left;
}

html[dir="ltr"] .ec-pricing-headline > div{
text-align:left;
}

.ec-pricing-headline i{
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
background:#24498d;
color:#fff;
border-radius:18px;
font-size:30px;
box-shadow:0 12px 25px rgba(36,73,141,.20);
}

.ec-pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
margin-top:40px;
}

.ec-price-card{
position:relative;
background:#fff;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(36,73,141,.18);
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.30s;
}

.ec-price-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.ec-price-header{
background:#f6f7f9;
padding:28px;
text-align:center;
font-size:22px;
font-weight:800;
color:#4c5665;
}

.ec-price-amount{
text-align:center;
padding:40px 20px;
font-size:72px;
font-weight:900;
color:#24498d;
line-height:1;
}

.ec-price-currency{
font-size:34px;
font-weight:400;
vertical-align:top;
}

.ec-price-features{
list-style:none;
padding:0;
margin:0;
}

.ec-price-features li{
padding:18px 30px;
border-top:1px solid #eceff4;
display:flex;
align-items:center;
justify-content:space-between;
color:#6c7a89;
font-size:18px;
}

.ec-price-features li i{
color:#7b8794;
}

.ec-price-footer{
padding:32px;
text-align:center;
}

.ec-price-btn{
display:inline-block;
background:#24498d;
color:#fff;
padding:14px 42px;
border-radius:12px;
text-decoration:none;
font-weight:800;
font-size:18px;
transition:.25s;
}

.ec-price-btn:hover{
background:#19396f;
color:#fff;
}

.ec-price-featured{
transform:scale(1.03);
border:2px solid #24498d;
}

.ec-price-featured:hover{
transform:translateY(-8px) scale(1.03);
}

.ec-price-ribbon{
position:absolute;
top:18px;
right:-34px;
width:150px;
padding:10px 0;
background:linear-gradient(
135deg,
#1f3f75,
#3568c8
);
color:#fff;
font-size:13px;
font-weight:900;
text-align:center;
letter-spacing:.5px;
transform:rotate(45deg);
box-shadow:0 10px 20px rgba(0,0,0,.18);
z-index:10;
text-transform:uppercase;
}

html[dir="rtl"] .ec-price-ribbon{
left:-34px;
right:auto;
transform:rotate(-45deg);
}

@media (max-width:1200px){

.ec-pricing-grid{
grid-template-columns:1fr;
}

.ec-price-featured{
transform:none;
}

.ec-price-featured:hover{
transform:translateY(-6px);
}

}

</style>


<style>

/* =====================================================
   FINAL PRICING FIX OVERRIDE
   ===================================================== */

.ec-pricing-headline{
display:flex !important;
align-items:center !important;
gap:20px !important;
margin-bottom:40px !important;
}

/* ENGLISH */
html[dir="ltr"] .ec-pricing-headline{
flex-direction:row !important;
justify-content:flex-start !important;
text-align:left !important;
}

/* ARABIC */
html[dir="rtl"] .ec-pricing-headline{
flex-direction:row-reverse !important;
justify-content:flex-start !important;
text-align:right !important;
}

html[dir="ltr"] .ec-pricing-headline > div{
text-align:center !important;
}

html[dir="rtl"] .ec-pricing-headline > div{
text-align:center !important;
}

/* =====================================================
   RIBBON FIX
   ===================================================== */

.ec-price-card{
position:relative !important;
overflow:hidden !important;
}

.ec-price-ribbon{

position:absolute !important;

top:22px !important;
right:-42px !important;

width:160px !important;
height:auto !important;

padding:10px 0 !important;

background:#24498d !important;

color:#fff !important;

font-size:12px !important;
font-weight:800 !important;

text-align:center !important;

transform:rotate(45deg) !important;

box-shadow:0 10px 25px rgba(0,0,0,.20) !important;

z-index:999 !important;

line-height:1.2 !important;
}

html[dir="rtl"] .ec-price-ribbon{

left:-42px !important;
right:auto !important;

transform:rotate(-45deg) !important;

}

/* remove giant old ribbon shape */

.ec-price-ribbon:before,
.ec-price-ribbon:after{
display:none !important;
content:none !important;
}

</style>


<style>

/* =====================================================
   FINAL MARQUEE RIBBON OVERRIDE
   ===================================================== */

.ec-marquee-section{
background:transparent !important;
padding:0 !important;
margin:0 !important;
overflow:visible !important;
position:relative !important;
}

.ec-marquee-container,
.ec-marquee-wrap,
.ec-marquee-stage{

background:transparent !important;

padding:0 !important;
margin:0 !important;

min-height:auto !important;

overflow:visible !important;

display:flex !important;
flex-direction:column !important;

gap:0 !important;
}

/* first ribbon */

.ec-marquee-strip:first-child{

margin-top:0 !important;
margin-bottom:-18px !important;

z-index:10;

}

/* second ribbon */

.ec-marquee-strip:last-child{

margin-top:-18px !important;

z-index:9;

}

/* ribbon itself */

.ec-marquee-strip{

width:120% !important;

margin-left:-10% !important;

height:72px !important;

display:flex !important;
align-items:center !important;

overflow:hidden !important;

box-shadow:none !important;

border:none !important;
}

/* text */

.ec-marquee-item{

font-size:48px !important;

font-weight:500 !important;

line-height:1 !important;

color:#fff !important;

}

.ec-marquee-separator{

font-size:48px !important;

opacity:.20 !important;

padding:0 20px !important;

}

/* remove dark wrappers */

.ec-marquee-stage::before,
.ec-marquee-stage::after,
.ec-marquee-section::before,
.ec-marquee-section::after{

display:none !important;

content:none !important;

}

/* mobile */

@media(max-width:992px){

.ec-marquee-strip{
height:60px !important;
}

.ec-marquee-item,
.ec-marquee-separator{
font-size:30px !important;
}

}

@media(max-width:576px){

.ec-marquee-strip{
height:52px !important;
}

.ec-marquee-item,
.ec-marquee-separator{
font-size:22px !important;
}

}

</style>


<style>

.dyn-info-card i,
.dyn-contact-card i,
.dyn-resource-card i,
.dyn-timeline-card i,
.dyn-card i{

position:relative !important;

top:auto !important;
right:auto !important;
left:auto !important;
bottom:auto !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

margin:0 auto 28px auto !important;

float:none !important;
}

.dyn-info-card,
.dyn-contact-card,
.dyn-resource-card,
.dyn-timeline-card{

text-align:center !important;
}

</style>

