<?php
/**
 * Single Post Template — Blog Articles
 */
get_header();
$lang = stb_lang();
$fa = $lang === 'fa';
$B = '/NewSite';

$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>
.sp-article{max-width:780px;margin:0 auto;padding:0 40px}
@media(max-width:768px){.sp-article{padding:0 20px}}
.sp-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.4);text-decoration:none;transition:color .15s;margin-bottom:24px}
.sp-back:hover{color:#C8102E}
.sp-back svg{width:14px;height:14px;stroke:currentColor;fill:none}
body.rtl .sp-back svg{transform:scaleX(-1)}
.sp-cat{display:inline-block;padding:4px 12px;border-radius:6px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:rgba(200,16,46,.1);
  border:1px solid rgba(200,16,46,.2);color:#C8102E;margin-bottom:16px}
.sp-title{font-size:clamp(24px,4vw,38px);font-weight:800;color:#fff;line-height:1.2;
  margin-bottom:16px;letter-spacing:-.02em}
.sp-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.3);
  margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.07)}
.sp-thumb{width:100%;border-radius:16px;overflow:hidden;margin-bottom:32px;
  border:1px solid rgba(255,255,255,.07)}
.sp-thumb img{width:100%;height:auto;display:block}
/* Article content */
.sp-content{font-size:16px;color:rgba(255,255,255,.6);line-height:1.85;margin-bottom:48px}
.sp-content h2{font-size:24px;font-weight:700;color:#fff;margin:40px 0 16px}
.sp-content h3{font-size:20px;font-weight:700;color:#fff;margin:32px 0 12px}
.sp-content p{margin-bottom:20px}
.sp-content a{color:#C8102E;text-decoration:underline;transition:color .15s}
.sp-content a:hover{color:#14e0a3}
.sp-content ul,.sp-content ol{margin-bottom:20px;padding-left:24px}
body.rtl .sp-content ul,body.rtl .sp-content ol{padding-left:0;padding-right:24px}
.sp-content li{margin-bottom:8px}
.sp-content blockquote{margin:24px 0;padding:20px 24px;border-left:3px solid #C8102E;
  background:rgba(200,16,46,.04);border-radius:0 12px 12px 0;font-style:italic;
  color:rgba(255,255,255,.5)}
body.rtl .sp-content blockquote{border-left:none;border-right:3px solid #C8102E;border-radius:12px 0 0 12px}
.sp-content img{max-width:100%;height:auto;border-radius:12px;margin:24px 0}
.sp-content code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;font-size:14px}
.sp-content pre{background:#0a0c10;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:20px;overflow-x:auto;margin-bottom:20px}
/* Share / navigation */
.sp-footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.07);margin-bottom:48px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.sp-tags{display:flex;gap:6px;flex-wrap:wrap}
.sp-tag{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.35);text-decoration:none;transition:all .15s}
.sp-tag:hover{border-color:rgba(200,16,46,.25);color:rgba(255,255,255,.7)}
.sp-nav{display:flex;gap:12px}
.sp-nav a{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.45);text-decoration:none;transition:all .15s}
.sp-nav a:hover{border-color:rgba(200,16,46,.3);color:#fff}
</style>

<article class="ip-page">
<div class="ip-hero" style="padding-bottom:40px">
  <div class="ip-hero-glow"></div>
  <div class="sp-article" style="position:relative;z-index:1">
    <a href="<?php echo stb_url($B.'/blog/'); ?>" class="sp-back">
      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round"/></svg>
      <?php echo $fa?'بازگشت به مقالات':'Back to Articles'; ?>
    </a>
    <?php
    $cats = get_the_category();
    if (!empty($cats)):
    ?><div class="sp-cat"><?php echo esc_html($cats[0]->name); ?></div><?php endif; ?>
    <h1 class="sp-title"><?php the_title(); ?></h1>
    <div class="sp-meta">
      <span><?php echo get_the_date($fa ? 'Y/m/d' : 'F j, Y'); ?></span>
      <span><?php echo $fa ? 'نویسنده: ' : 'By '; ?><?php the_author(); ?></span>
      <span><?php echo max(1, round(str_word_count(strip_tags(get_the_content())) / 200)); ?> <?php echo $fa?'دقیقه مطالعه':'min read'; ?></span>
    </div>
  </div>
</div>

<section class="ip-section" style="padding-top:0">
  <div class="sp-article">
    <?php if (has_post_thumbnail()): ?>
    <div class="sp-thumb"><?php the_post_thumbnail('large'); ?></div>
    <?php endif; ?>

    <div class="sp-content"><?php the_content(); ?></div>

    <div class="sp-footer">
      <div class="sp-tags">
        <?php $tags = get_the_tags();
        if ($tags): foreach($tags as $tag): ?>
        <a href="<?php echo get_tag_link($tag->term_id); ?>" class="sp-tag">#<?php echo esc_html($tag->name); ?></a>
        <?php endforeach; endif; ?>
      </div>
      <div class="sp-nav">
        <?php $prev = get_previous_post(); $next = get_next_post();
        if ($prev): ?><a href="<?php echo stb_url(get_permalink($prev)); ?>">← <?php echo $fa?'قبلی':'Previous'; ?></a><?php endif;
        if ($next): ?><a href="<?php echo stb_url(get_permalink($next)); ?>"><?php echo $fa?'بعدی':'Next'; ?> →</a><?php endif; ?>
      </div>
    </div>

    <div class="ip-cta-strip">
      <div class="ip-cta-strip-text">
        <h3><?php echo $fa?'آماده شروع معامله هستید؟':'Ready to start trading?'; ?></h3>
        <p><?php echo $fa?'آنچه آموختید را در عمل پیاده کنید.':'Put what you\'ve learned into practice.'; ?></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.'/blog/'); ?>" class="ip-btn-ghost"><?php echo $fa?'مقالات بیشتر':'More Articles'; ?></a>
      </div>
    </div>
  </div>
</section>
</article>
<?php get_footer(); ?>
