<?php $lang=stb_lang(); $B='/NewSite'; $fa=$lang==='fa';

$login_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa':'https://crm.stbbrokers.com/';
$register_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa/register':'https://crm.stbbrokers.com/register/';
?>
<style>
/* ══════════════════════════════════════════════════════════════
   BLOG / MARKET ARTICLES — Futuristic Animated
══════════════════════════════════════════════════════════════ */
.bl-rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.bl-rev.vis{opacity:1;transform:none}
.bl-rev.d1{transition-delay:.12s}.bl-rev.d2{transition-delay:.24s}

.bl-hero-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(200,16,46,.12),transparent),
  repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(200,16,46,.015) 60px),
  repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(200,16,46,.015) 60px)}

/* Category filters */
.bl-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:32px}
.bl-filter{padding:7px 16px;border-radius:9px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}
.bl-filter:hover{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.15)}
.bl-filter.active{background:rgba(200,16,46,.1);border-color:rgba(200,16,46,.3);color:#fff}

/* Article grid */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
@media(max-width:900px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bl-grid{grid-template-columns:1fr}}

/* Article card */
.bl-card{background:#0a0c10;border:1px solid rgba(255,255,255,.06);border-radius:16px;
  overflow:hidden;transition:all .3s;position:relative;display:flex;flex-direction:column}
.bl-card:hover{border-color:rgba(200,16,46,.2);transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.5)}
.bl-card-img{height:180px;background:linear-gradient(135deg,#0f1118,#12141c);position:relative;overflow:hidden}
.bl-card-img::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%,rgba(200,16,46,.08),transparent 60%),
  radial-gradient(circle at 70% 60%,rgba(20,224,163,.06),transparent 60%)}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Category tag overlay */
.bl-card-cat{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(200,16,46,.85);color:#fff;backdrop-filter:blur(8px)}
body.rtl .bl-card-cat{left:auto;right:14px}
/* Accent line */
.bl-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:#C8102E;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
body.rtl .bl-card::after{transform-origin:right}
.bl-card:hover::after{transform:scaleX(1)}

.bl-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.bl-card-meta{font-size:11px;color:rgba(255,255,255,.25);margin-bottom:10px;display:flex;gap:12px;flex-wrap:wrap}
.bl-card-meta span{display:flex;align-items:center;gap:4px}
.bl-card-title{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.35;
  transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card:hover .bl-card-title{color:rgba(200,16,46,.9)}
.bl-card-excerpt{font-size:13px;color:rgba(255,255,255,.35);line-height:1.6;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-link{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;
  font-weight:700;color:#C8102E;text-decoration:none;transition:gap .2s}
.bl-card-link:hover{gap:10px;color:#C8102E}
.bl-card-link svg{width:14px;height:14px;stroke:currentColor;fill:none}

/* Pagination */
.bl-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:48px}
.bl-pager a,.bl-pager span{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;font-size:13px;font-weight:700;
  color:rgba(255,255,255,.35);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  text-decoration:none;transition:all .2s}
.bl-pager a:hover{color:#fff;border-color:rgba(200,16,46,.3);background:rgba(200,16,46,.08)}
.bl-pager .current{background:rgba(200,16,46,.12);border-color:rgba(200,16,46,.3);color:#fff;
  box-shadow:0 0 12px rgba(200,16,46,.15)}

/* Empty state */
.bl-empty{text-align:center;padding:80px 20px;margin-bottom:48px}
.bl-empty-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 24px;
  background:rgba(200,16,46,.06);border:2px solid rgba(200,16,46,.15);
  display:flex;align-items:center;justify-content:center;
  animation:bl-pulse 3s ease-in-out infinite}
@keyframes bl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.15)}50%{box-shadow:0 0 30px rgba(200,16,46,.1)}}
.bl-empty-icon svg{stroke:#C8102E;fill:none;width:36px;height:36px}
.bl-empty-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.bl-empty-desc{font-size:14px;color:rgba(255,255,255,.35);margin-bottom:24px;line-height:1.6;max-width:400px;margin-left:auto;margin-right:auto}
.bl-empty-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:10px;
  background:#C8102E;color:#fff;font-size:13px;font-weight:700;text-decoration:none;
  box-shadow:0 4px 16px rgba(200,16,46,.25);transition:all .2s}
.bl-empty-cta:hover{filter:brightness(1.1);transform:translateY(-2px);color:#fff}

/* Featured card (first article) */
.bl-featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:#0a0c10;border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;
  transition:all .3s;position:relative}
@media(max-width:700px){.bl-featured{grid-template-columns:1fr}}
.bl-featured:hover{border-color:rgba(200,16,46,.2);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.bl-featured::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#C8102E,#14e0a3);opacity:.5}
.bl-featured .bl-card-img{height:100%;min-height:240px}
.bl-featured .bl-card-body{padding:32px}
.bl-featured .bl-card-title{font-size:22px;-webkit-line-clamp:3}
.bl-featured .bl-card-excerpt{-webkit-line-clamp:4}
</style>

<article class="ip-page">
<div class="ip-hero" style="position:relative;overflow:hidden">
  <div class="bl-hero-bg"></div>
  <div class="ip-hero-glow"></div>
  <div class="ip-container" style="position:relative;z-index:1">
    <nav class="ip-breadcrumb">
      <a href="<?php echo stb_url($B.'/'); ?>"><?php echo $fa?'خانه':'Home';?></a>
      <span class="ip-breadcrumb-sep">›</span>
      <span><?php echo $fa?'مقالات بازار':'Market Articles';?></span>
    </nav>
    <div class="ip-kicker"><span class="ip-kicker-dot"></span><?php echo $fa?'آکادمی · محتوا':'ACADEMY · CONTENT';?></div>
    <h1 class="ip-h1"><?php echo $fa?'تحلیل و <em>استراتژی</em>':'Analysis & <em>Strategy</em>';?></h1>
    <p class="ip-hero-desc"><?php echo $fa?'تحلیل هفتگی بازار، استراتژی‌های معاملاتی و مقالات آموزشی نوشته شده توسط تیم تحلیلگران و معامله‌گران باتجربه ما.':'Weekly market analysis, trading strategies, and educational articles written by our team of experienced traders and analysts.';?></p>
    <div class="ip-hero-ctas">
      <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-red"><?php echo $fa?'شروع معامله':'Start Trading';?> <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round"/></svg></a>
      <a href="<?php echo stb_url($B.'/academy/'); ?>" class="ip-btn-ghost"><?php echo $fa?'آکادمی STB':'STB Academy';?></a>
    </div>
  </div>
</div>

<section class="ip-section">
  <div class="ip-container">
    <?php
    // Category filter
    $cat_filter = isset($_GET['cat']) ? sanitize_text_field($_GET['cat']) : '';
    $paged = max(1, get_query_var('paged', 1));
    $per_page = 12;

    $cats_to_show = [
      '' => $fa ? 'همه' : 'All',
      'forex' => $fa ? 'فارکس' : 'Forex',
      'technical' => $fa ? 'تحلیل تکنیکال' : 'Technical',
      'fundamental-analysis' => $fa ? 'تحلیل بنیادی' : 'Fundamental',
      'risk' => $fa ? 'مدیریت ریسک' : 'Risk',
      'psychology' => $fa ? 'روانشناسی' : 'Psychology',
      'crypto' => $fa ? 'کریپتو' : 'Crypto',
      'economics' => $fa ? 'اقتصاد' : 'Economics',
    ];
    ?>
    <!-- Category Filters -->
    <div class="bl-filters bl-rev">
      <?php foreach($cats_to_show as $slug=>$label): ?>
      <a href="<?php echo stb_url($B.'/blog/'.($slug ? '?cat='.$slug : '')); ?>"
         class="bl-filter<?php echo $cat_filter===$slug?' active':''; ?>"><?php echo $label; ?></a>
      <?php endforeach; ?>
    </div>

    <?php
    // Query posts
    $args = [
      'post_type' => 'post',
      'post_status' => 'publish',
      'posts_per_page' => $per_page,
      'paged' => $paged,
      'orderby' => 'date',
      'order' => 'DESC',
    ];
    // Filter by language
    if ($fa) {
      $args['meta_query'] = [
        [
          'key' => '_stb_lang',
          'value' => 'fa',
          'compare' => '=',
        ]
      ];
    } else {
      $args['meta_query'] = [
        'relation' => 'OR',
        [
          'key' => '_stb_lang',
          'value' => 'en',
          'compare' => '=',
        ],
        [
          'key' => '_stb_lang',
          'compare' => 'NOT EXISTS',
        ]
      ];
    }
    if ($cat_filter) {
      $args['tax_query'] = [[
        'taxonomy' => 'category',
        'field' => 'slug',
        'terms' => $cat_filter,
      ]];
    }
    $q = new WP_Query($args);
    ?>

    <?php if ($q->have_posts()): ?>
    <div class="bl-grid bl-rev d1">
      <?php $count = 0; while ($q->have_posts()): $q->the_post(); $count++;
        $cats = get_the_category();
        $cat_name = !empty($cats) ? $cats[0]->name : '';
        $excerpt = get_the_excerpt();
        $thumb = get_the_post_thumbnail_url(get_the_ID(), 'medium_large');
        $read_time = max(1, round(str_word_count(strip_tags(get_the_content())) / 200));
      ?>
      <<?php echo ($count === 1 && $paged === 1) ? 'div class="bl-featured"' : 'div class="bl-card"'; ?>>
        <div class="bl-card-img">
          <?php if ($thumb): ?><img src="<?php echo esc_url($thumb); ?>" alt="<?php the_title_attribute(); ?>" loading="lazy"><?php endif; ?>
          <?php if ($cat_name): ?><div class="bl-card-cat"><?php echo esc_html($cat_name); ?></div><?php endif; ?>
        </div>
        <div class="bl-card-body">
          <div class="bl-card-meta">
            <span><?php echo get_the_date($fa ? 'Y/m/d' : 'M d, Y'); ?></span>
            <span><?php echo $fa ? $read_time.' دقیقه مطالعه' : $read_time.' min read'; ?></span>
          </div>
          <div class="bl-card-title"><?php the_title(); ?></div>
          <div class="bl-card-excerpt"><?php echo esc_html($excerpt); ?></div>
          <a href="<?php echo stb_url(get_permalink()); ?>" class="bl-card-link">
            <?php echo $fa?'ادامه مطلب':'Read More'; ?>
            <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round"/></svg>
          </a>
        </div>
      </div>
      <?php endwhile; ?>
    </div>

    <!-- Pagination -->
    <?php if ($q->max_num_pages > 1): ?>
    <div class="bl-pager bl-rev">
      <?php
      $big = 999999999;
      echo paginate_links([
        'base'    => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format'  => '?paged=%#%',
        'current' => $paged,
        'total'   => $q->max_num_pages,
        'prev_text' => '‹',
        'next_text' => '›',
        'type'    => 'plain',
      ]);
      ?>
    </div>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

    <?php else: ?>
    <!-- Empty state — No articles yet -->
    <div class="bl-empty bl-rev">
      <div class="bl-empty-icon">
        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke-width="1.5"/><polyline points="14 2 14 8 20 8" stroke-width="1.5"/><line x1="16" y1="13" x2="8" y2="13" stroke-width="1.5"/><line x1="16" y1="17" x2="8" y2="17" stroke-width="1.5"/></svg>
      </div>
      <div class="bl-empty-title"><?php echo $fa?'مقالات به زودی منتشر می‌شوند':'Articles Coming Soon';?></div>
      <div class="bl-empty-desc"><?php echo $fa?'تیم تحلیل ما در حال آماده‌سازی محتوای آموزشی و تحلیلی برای شماست. ثبت‌نام کنید تا مطلع شوید.':'Our analysis team is preparing educational and analytical content for you. Register to get notified.';?></div>
      <a href="<?php echo esc_html($register_label_url);?>" class="bl-empty-cta"><?php echo $fa?'ثبت‌نام':'Register Now';?></a>
    </div>
    <?php endif; ?>

    <div class="ip-cta-strip bl-rev">
      <div class="ip-cta-strip-text">
        <h3><?php echo $fa?'آماده شروع معامله هستید؟':'Ready to start trading?';?></h3>
        <p><?php echo $fa?'حساب خود را باز کنید و از تمام امکانات STB بهره ببرید.':'Open your account and access all STB features.';?></p>
      </div>
      <div class="ip-cta-strip-btns">
        <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-red"><?php echo $fa?'افتتاح حساب':'Open Account';?></a>
        <a href="<?php echo stb_url($B.'/faq/'); ?>" class="ip-btn-ghost"><?php echo $fa?'سوالات متداول':'FAQ';?></a>
      </div>
    </div>
  </div>
</section>
</article>

<script>
(function(){
  var obs=new IntersectionObserver(function(e){e.forEach(function(en){if(en.isIntersecting){en.target.classList.add('vis');obs.unobserve(en.target)}})},{threshold:.1});
  document.querySelectorAll('.bl-rev').forEach(function(el){obs.observe(el)});
})();
</script>
