<?php
/**
 * Front page — Iliya Fakhr Asia (steel & heavy construction).
 *
 * "Engineered Editorial" — a luxury steel monograph. Asymmetric blueprint
 * layout, warm paper + green-black, gold used only as a precision hairline,
 * outlined Persian numerals, film grain, a fixed measurement spine, and one
 * choreographed hero reveal.
 *
 * Motion: vanilla Motion (motion.dev) modules in assets/js/main.js. No React.
 *
 * @package Iliya
 */

get_header();

$img = get_template_directory_uri() . '/assets/images/';

/* Services — from the `iliya_service` CPT, ordered by menu_order.
   Falls back to the original hard-coded set if none exist yet. */
$services = [];
$svc_q = new WP_Query([
    'post_type'      => 'iliya_service',
    'posts_per_page' => -1,
    'orderby'        => 'menu_order',
    'order'          => 'ASC',
    'no_found_rows'  => true,
]);
foreach ($svc_q->posts as $p) {
    $thumb = get_the_post_thumbnail_url($p->ID, 'large');
    $services[] = [
        'icon'   => get_post_meta($p->ID, '_iliya_icon', true) ?: 'structure',
        'imgurl' => $thumb ?: ($img . 'weld-bead.webp'),
        'title'  => get_the_title($p),
        'desc'   => wp_trim_words(wp_strip_all_tags($p->post_content), 28, ' …'),
        'url'    => get_permalink($p),
    ];
}
if (empty($services)) {
    $services = [
        ['icon' => 'recycle',   'imgurl' => $img . 'yard-rebar.webp',     'title' => __('خرید و فروش ضایعات و فلزات', 'iliya'),   'desc' => __('ضایعات آهن، آلومینیوم، برنز، استیل، فولاد و ضایعات غیرفلزی با بهترین قیمت روز.', 'iliya')],
        ['icon' => 'crane',     'imgurl' => $img . 'infra-tunnel.webp',   'title' => __('پیمانکاری عمرانی و راه‌سازی', 'iliya'),  'desc' => __('طراحی، محاسبه و اجرای راه، باند، سد، تونل، راه‌آهن، مترو و ابنیه سبک و سنگین.', 'iliya')],
        ['icon' => 'bolt',      'imgurl' => $img . 'weld-torch.webp',     'title' => __('تأسیسات برقی و مکانیکی', 'iliya'),       'desc' => __('تأسیسات ساختمان و کارخانجات، گازرسانی، آب و فاضلاب، پست‌های توزیع و نیروگاه.', 'iliya')],
        ['icon' => 'structure', 'imgurl' => $img . 'weld-bead.webp',      'title' => __('سازه‌های فلزی و جوشکاری', 'iliya'),      'desc' => __('ساخت انواع سازه فلزی، سندبلاست، جوشکاری تخصصی و مرمت و بازسازی ابنیه.', 'iliya')],
        ['icon' => 'leaf',      'imgurl' => $img . 'infra-overpass.webp', 'title' => __('خدمات شهری و فضای سبز', 'iliya'),        'desc' => __('محوطه‌سازی، فضای سبز، مبلمان شهری، نظافت معابر و اجرای طرح‌های بازیافت.', 'iliya')],
        ['icon' => 'globe',     'imgurl' => $img . 'yard-aerial.webp',    'title' => __('بازرگانی، صادرات و واردات', 'iliya'),    'desc' => __('صادرات و واردات کالاهای مجاز، ترخیص از گمرک و شرکت در مناقصات و مزایدات.', 'iliya')],
    ];
}

/* Projects — from the `iliya_project` CPT, ordered by menu_order.
   Falls back to the original hard-coded set if none exist yet. */
$projects = [];
$prj_q = new WP_Query([
    'post_type'      => 'iliya_project',
    'posts_per_page' => -1,
    'orderby'        => 'menu_order',
    'order'          => 'ASC',
    'no_found_rows'  => true,
]);
foreach ($prj_q->posts as $p) {
    $thumb = get_the_post_thumbnail_url($p->ID, 'large');
    $projects[] = [
        'imgurl' => $thumb ?: ($img . 'hero-skyline.webp'),
        'tag'    => get_post_meta($p->ID, '_iliya_tag', true),
        'title'  => get_the_title($p),
        'meta'   => get_post_meta($p->ID, '_iliya_meta', true),
        'url'    => get_permalink($p),
    ];
}
if (empty($projects)) {
    $projects = [
        ['imgurl' => $img . 'infra-tunnel.webp',   'tag' => __('زیرساخت', 'iliya'),    'title' => __('تونل و راه‌سازی', 'iliya'),       'meta' => __('عمران سنگین', 'iliya')],
        ['imgurl' => $img . 'infra-bridge.webp',   'tag' => __('سازه کلان', 'iliya'),  'title' => __('پل و سازه‌های بزرگ', 'iliya'),    'meta' => __('بتنی / فلزی', 'iliya')],
        ['imgurl' => $img . 'infra-overpass.webp', 'tag' => __('ابنیه', 'iliya'),      'title' => __('بزرگراه و ابنیه', 'iliya'),       'meta' => __('راه و باند', 'iliya')],
        ['imgurl' => $img . 'yard-rebar.webp',     'tag' => __('بازرگانی', 'iliya'),   'title' => __('تأمین فولاد و ضایعات', 'iliya'),  'meta' => __('فلزات', 'iliya')],
        ['imgurl' => $img . 'weld-bead.webp',      'tag' => __('ساخت', 'iliya'),       'title' => __('سازه فلزی و جوشکاری', 'iliya'),   'meta' => __('کارگاهی', 'iliya')],
        ['imgurl' => $img . 'hero-skyline.webp',   'tag' => __('صنعتی', 'iliya'),      'title' => __('پروژه‌های صنعتی', 'iliya'),       'meta' => __('کارخانه', 'iliya')],
    ];
}

$stats = [
    ['num' => 20,  'suffix' => '+', 'label' => __('سال تجربه', 'iliya')],
    ['num' => 500, 'suffix' => '+', 'label' => __('پروژه اجرا شده', 'iliya')],
    ['num' => 120, 'suffix' => '+', 'label' => __('کارفرمای فعال', 'iliya')],
    ['num' => 6,   'suffix' => '',  'label' => __('حوزه تخصصی', 'iliya')],
];

$capabilities = [
    'راه و باند', 'سدسازی', 'تونل', 'راه‌آهن و مترو', 'سازه فلزی', 'جوشکاری',
    'سندبلاست', 'تأسیسات برق', 'آب و فاضلاب', 'گازرسانی', 'نیروگاه', 'محوطه‌سازی',
    'بازیافت', 'صادرات و واردات', 'ترخیص گمرک',
];

$metals = ['آهن', 'فولاد', 'آلومینیوم', 'مس', 'برنز', 'استیل', 'چدن', 'ضایعات غیرفلزی'];

$features = [
    ['icon' => 'medal',  'title' => __('کیفیت و تجربه', 'iliya'),    'desc' => __('بیش از دو دهه سابقه اجرای پروژه‌های صنعتی و عمرانی.', 'iliya')],
    ['icon' => 'shield', 'title' => __('ایمنی و استاندارد', 'iliya'), 'desc' => __('پایبندی کامل به اصول HSE و استانداردهای ملی و بین‌المللی.', 'iliya')],
    ['icon' => 'clock',  'title' => __('تحویل به‌موقع', 'iliya'),     'desc' => __('مدیریت دقیق زمان‌بندی و تحویل پروژه‌ها طبق برنامه.', 'iliya')],
    ['icon' => 'users',  'title' => __('تیم متخصص', 'iliya'),         'desc' => __('کادر فنی و مهندسی مجرب در تمام حوزه‌های فعالیت.', 'iliya')],
];

$chapters = [
    ['id' => '01', 'fa' => '۰۱', 'label' => __('خانه', 'iliya')],
    ['id' => '02', 'fa' => '۰۲', 'label' => __('درباره', 'iliya')],
    ['id' => '03', 'fa' => '۰۳', 'label' => __('خدمات', 'iliya')],
    ['id' => '04', 'fa' => '۰۴', 'label' => __('پروژه‌ها', 'iliya')],
    ['id' => '05', 'fa' => '۰۵', 'label' => __('بازرگانی', 'iliya')],
    ['id' => '06', 'fa' => '۰۶', 'label' => __('تماس', 'iliya')],
];
?>

<!-- Measurement spine (blueprint margin, tracks chapter) -->
<div class="spine" data-spine aria-hidden="true">
    <div class="spine__inner">
        <?php foreach ($chapters as $ch) : ?>
            <div class="spine__item" data-spine-item="<?php echo esc_attr($ch['id']); ?>">
                <span class="spine__bar"></span>
                <span class="spine__num"><?php echo esc_html($ch['fa']); ?></span>
                <span class="spine__label"><?php echo esc_html($ch['label']); ?></span>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- ═══════════ 01 · HERO (cinematic, choreographed) ═══════════ -->
<section id="hero" data-hero data-chapter="01" class="hero-flag text-white">
    <div data-hero-bg class="hero-flag__bg">
        <img class="kenburns duo" src="<?php echo esc_url($img . 'hero-steel.webp'); ?>" alt="" aria-hidden="true" fetchpriority="high" decoding="async">
    </div>
    <div class="hero-flag__overlay" aria-hidden="true"></div>
    <div class="bg-grid pointer-events-none absolute inset-0 z-[1] opacity-30" aria-hidden="true"></div>

    <div data-hero-inner class="hero-flag__inner">
        <div class="container mx-auto max-w-[1310px] pt-32 pb-40 md:pt-40 md:pb-44">
            <div class="max-w-4xl">
                <span class="eyebrow mb-7 text-gold-light" data-hero-tail><?php esc_html_e('ایلیا فخر آسیا · از ۱۳۸۴', 'iliya'); ?></span>

                <h1 class="display-hero text-white">
                    <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('فولاد، صنعت', 'iliya'); ?></span></span>
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('و', 'iliya'); ?> <span class="text-gold-light"><?php esc_html_e('عمرانِ', 'iliya'); ?></span> <?php esc_html_e('ماندگار', 'iliya'); ?></span></span>
                </h1>

                <p class="mt-8 max-w-xl text-lg leading-9 text-steel-200" data-hero-tail>
                    <?php esc_html_e('از خرید و فروش ضایعات فلزی و فولاد تا اجرای پروژه‌های بزرگ عمرانی، تأسیساتی و سازه‌های فلزی — همراه مطمئن صنعت و ساخت‌وساز کشور.', 'iliya'); ?>
                </p>

                <div class="mt-10 flex flex-wrap items-center gap-4" data-hero-tail>
                    <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="btn-gold lnk-arrow" data-magnetic="0.25">
                        <?php esc_html_e('درخواست مشاوره رایگان', 'iliya'); ?>
                        <?php echo iliya_icon('arrow-start', 18); ?>
                    </a>
                    <a href="<?php echo esc_url(home_url('/#services')); ?>" class="btn-line btn-line--light"><?php esc_html_e('خدمات ما', 'iliya'); ?></a>
                </div>
            </div>
        </div>
    </div>

    <!-- Hero footer annotation row -->
    <div class="absolute inset-x-0 bottom-0 z-[3] border-t border-white/12" data-hero-tail>
        <div class="container mx-auto flex max-w-[1310px] items-center justify-between py-5">
            <div class="flex items-center gap-3 text-xs tracking-widest text-steel-300">
                <span class="font-dana text-base font-extrabold text-gold-light">۲۰+</span>
                <span><?php esc_html_e('سال تجربه در صنعت و ساخت', 'iliya'); ?></span>
            </div>
            <div class="flex items-center gap-3 text-[0.7rem] tracking-[0.22em] text-steel-400">
                <span><?php esc_html_e('اسکرول', 'iliya'); ?></span>
                <span class="scroll-cue"><span></span></span>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ CAPABILITIES MARQUEE ═══════════ -->
<section class="border-b border-white/10 bg-darker py-4 text-white">
    <div class="marquee">
        <div class="marquee__track">
            <?php for ($i = 0; $i < 2; $i++) : ?>
                <?php foreach ($capabilities as $cap) : ?>
                    <span class="inline-flex items-center gap-3 text-[0.82rem] font-medium tracking-wide text-steel-300">
                        <span class="h-1 w-1 bg-gold"></span>
                        <?php echo esc_html($cap); ?>
                    </span>
                <?php endforeach; ?>
            <?php endfor; ?>
        </div>
    </div>
</section>

<!-- ═══════════ SCROLL-TILT SHOWCASE (monograph plate) ═══════════ -->
<section data-tilt class="bg-paper blueprint relative overflow-hidden py-20 md:py-28">
    <div class="container relative mx-auto max-w-[1310px]">
        <div data-tilt-title class="mb-12 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
            <div data-reveal>
                <span class="eyebrow eyebrow--ink mb-5"><?php esc_html_e('توان اجرایی', 'iliya'); ?></span>
                <h2 class="display-xl text-heading">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('از ایده', 'iliya'); ?> <span style="font-weight:300"><?php esc_html_e('تا ساخت', 'iliya'); ?></span></span></span>
                </h2>
            </div>
            <p class="max-w-sm leading-8 text-body md:text-end"><?php esc_html_e('تجربه‌ای از مقیاس، دقت و کیفیت در بزرگ‌ترین پروژه‌های صنعتی و عمرانی کشور.', 'iliya'); ?></p>
        </div>

        <div class="tilt-stage mx-auto max-w-5xl">
            <div data-tilt-card class="tilt-card aspect-[16/9]">
                <img class="duo" src="<?php echo esc_url($img . 'hero-skyline.webp'); ?>" alt="<?php esc_attr_e('پروژه ساخت سازه فلزی', 'iliya'); ?>" loading="lazy" decoding="async">
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ 02 · ABOUT ═══════════ -->
<section id="about" data-chapter="02" class="section bg-paper relative overflow-hidden">
    <span class="index-ghost index-ghost--ink absolute -top-6 start-[-1rem] hidden text-[12rem] leading-none md:block lg:text-[16rem]" aria-hidden="true">۰۲</span>
    <div class="container relative mx-auto max-w-[1310px]">
        <div class="grid gap-14 lg:grid-cols-12 lg:items-center">
            <div class="lg:col-span-7" data-reveal>
                <span class="eyebrow eyebrow--ink mb-5"><?php esc_html_e('درباره ایلیا فخر آسیا', 'iliya'); ?></span>
                <h2 class="display-xl mb-6 text-heading">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('پیمانکار جامع', 'iliya'); ?></span></span>
                    <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('صنعت و عمران', 'iliya'); ?></span></span>
                </h2>
                <div class="mb-7 h-px w-24 bg-gold" data-line aria-hidden="true"></div>
                <p class="mb-4 max-w-xl leading-9 text-body">
                    <?php esc_html_e('شرکت ایلیا فخر آسیا با گستره‌ای از فعالیت‌ها در حوزه خرید و فروش ضایعات و فلزات، پیمانکاری پروژه‌های عمرانی و صنعتی، تأسیسات برقی و مکانیکی و ساخت سازه‌های فلزی فعالیت می‌کند.', 'iliya'); ?>
                </p>
                <p class="max-w-xl leading-9 text-body">
                    <?php esc_html_e('ما با اتکا به دانش فنی، تجهیزات مدرن و تیمی متخصص، کل چرخه پروژه را از طراحی و محاسبه تا نظارت و اجرا بر عهده می‌گیریم.', 'iliya'); ?>
                </p>

                <ul class="mt-9 grid max-w-xl gap-x-8 gap-y-4 sm:grid-cols-2" data-motion-group>
                    <?php
                    $points = [
                        __('طراحی، محاسبه و نظارت فنی', 'iliya'),
                        __('اجرای پروژه‌های فلزی و بتنی', 'iliya'),
                        __('سندبلاست و جوشکاری تخصصی', 'iliya'),
                        __('صادرات، واردات و ترخیص', 'iliya'),
                    ];
                    foreach ($points as $n => $p) :
                        ?>
                        <li class="flex items-center gap-3 border-b border-border/70 pb-3 text-sm font-medium text-steel-700">
                            <span class="font-dana text-xs font-bold text-gold-dark">۰<?php echo esc_html($n + 1); ?></span>
                            <?php echo esc_html($p); ?>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>

            <div class="relative lg:col-span-5" data-motion="fade-up" data-motion-delay="0.1">
                <div class="plate relative aspect-[4/5] w-full overflow-hidden bg-dark">
                    <img class="duo h-full w-full object-cover" src="<?php echo esc_url($img . 'about-beams.webp'); ?>" alt="<?php esc_attr_e('انبار تیرآهن و مقاطع فولادی', 'iliya'); ?>" loading="lazy" decoding="async">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark/80 via-transparent to-transparent"></div>
                </div>
                <!-- stat card overlapping the plate edge -->
                <div class="absolute -bottom-6 -start-6 hidden bg-dark px-7 py-5 md:block">
                    <div class="stat-num text-5xl text-white"><span data-count="20">۰</span><span class="text-gold-light">+</span></div>
                    <div class="mt-1 text-xs tracking-widest text-steel-400"><?php esc_html_e('سال تجربه', 'iliya'); ?></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ 03 · SERVICES (pinned scroll chapters) ═══════════ -->
<section id="services" data-svc data-chapter="03" class="section bg-bg-alt">
    <div class="container mx-auto max-w-[1310px]">
        <div class="mb-14 flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
            <div>
                <span class="eyebrow eyebrow--ink mb-5"><?php esc_html_e('حوزه‌های فعالیت', 'iliya'); ?></span>
                <h2 class="display-xl text-heading">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('خدمات تخصصی ما', 'iliya'); ?></span></span>
                </h2>
            </div>
            <span class="font-dana text-sm tracking-widest text-muted"><?php esc_html_e('شش حوزه اصلی', 'iliya'); ?> · ۰۶</span>
        </div>

        <div class="lg:grid lg:grid-cols-12 lg:gap-16">
            <!-- Sticky visual (desktop) -->
            <div class="hidden lg:col-span-5 lg:block">
                <div class="svc-sticky">
                    <div class="relative h-[72vh] overflow-hidden bg-dark">
                        <?php foreach ($services as $i => $sv) : ?>
                            <div data-svc-panel class="svc-panel absolute inset-0" style="opacity: <?php echo $i === 0 ? '1' : '0'; ?>">
                                <img class="duo h-full w-full object-cover" src="<?php echo esc_url($sv['imgurl']); ?>" alt="" aria-hidden="true" loading="lazy" decoding="async">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/45 to-dark/10"></div>
                                <div class="absolute inset-0 flex flex-col justify-end p-8">
                                    <div>
                                        <span class="index-ghost block text-[7rem] leading-none">۰<?php echo esc_html($i + 1); ?></span>
                                        <h3 class="mt-2 text-2xl font-bold text-white"><?php echo esc_html($sv['title']); ?></h3>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                        <div class="absolute end-5 top-1/2 z-10 flex -translate-y-1/2 flex-col gap-2">
                            <?php foreach ($services as $i => $sv) : ?>
                                <span data-svc-dot class="svc-dot h-7 w-1 bg-white/30 <?php echo $i === 0 ? 'is-active' : ''; ?>"></span>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service blocks -->
            <div class="lg:col-span-7">
                <?php foreach ($services as $i => $sv) : ?>
                    <article data-svc-block class="svc-block border-b border-border-medium py-8 lg:py-11 <?php echo $i === 0 ? 'border-t' : ''; ?>">
                        <div class="flex items-start gap-6">
                            <span class="mt-1 font-dana text-2xl font-extrabold text-gold-dark">۰<?php echo esc_html($i + 1); ?></span>
                            <div class="flex-1">
                                <h3 class="mb-2 text-xl font-bold text-heading md:text-2xl">
                                    <a href="<?php echo esc_url($sv['url'] ?? home_url('/#services')); ?>" class="transition-colors hover:text-accent"><?php echo esc_html($sv['title']); ?></a>
                                </h3>
                                <p class="max-w-lg leading-8 text-body"><?php echo esc_html($sv['desc']); ?></p>
                                <a href="<?php echo esc_url($sv['url'] ?? home_url('/#contact')); ?>" class="lnk-arrow mt-4 inline-flex items-center gap-2 text-sm font-semibold text-accent transition-colors hover:text-accent-dark">
                                    <?php esc_html_e('مشاهده جزئیات', 'iliya'); ?>
                                    <?php echo iliya_icon('arrow-start', 16); ?>
                                </a>
                            </div>
                            <span class="hidden text-steel-400 transition-colors group-hover:text-accent sm:block"><?php echo iliya_icon($sv['icon'], 26); ?></span>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ 04 · PROJECTS (horizontal slider — drag / arrows / scroll) ═══════════ -->
<section id="projects" data-hproj data-chapter="04" class="section relative overflow-hidden bg-dark text-white">
    <div class="container mx-auto max-w-[1310px]">
        <div class="mb-10 flex items-end justify-between gap-6" data-reveal>
            <div>
                <span class="eyebrow mb-4"><?php esc_html_e('نمونه کارها', 'iliya'); ?></span>
                <h2 class="display-xl text-white">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('پروژه‌های شاخص', 'iliya'); ?></span></span>
                </h2>
            </div>
            <div class="hidden shrink-0 items-center gap-3 sm:flex">
                <button type="button" data-hproj-prev aria-label="<?php esc_attr_e('قبلی', 'iliya'); ?>" class="flex h-11 w-11 cursor-pointer items-center justify-center border border-white/20 text-white transition-colors hover:border-gold hover:text-gold">
                    <?php echo iliya_icon('chevron-start', 20); ?>
                </button>
                <button type="button" data-hproj-next aria-label="<?php esc_attr_e('بعدی', 'iliya'); ?>" class="flex h-11 w-11 cursor-pointer items-center justify-center border border-white/20 text-white transition-colors hover:border-gold hover:text-gold">
                    <?php echo iliya_icon('chevron-end', 20); ?>
                </button>
            </div>
        </div>
    </div>

    <div data-hproj-viewport dir="rtl" data-lenis-prevent class="hproj-viewport mt-2 flex gap-6 px-5 lg:px-[max(2.5rem,calc((100vw-1310px)/2))]">
        <?php foreach ($projects as $i => $pr) : ?>
            <article dir="rtl" class="hproj-card h-[420px] w-[80vw] shrink-0 xs:w-[60vw] sm:h-[500px] md:w-[42vw] lg:h-[560px] lg:w-[30vw]">
                <img class="duo" src="<?php echo esc_url($pr['imgurl']); ?>" alt="<?php echo esc_attr($pr['title']); ?>" loading="lazy" decoding="async" draggable="false">
                <div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
                <span class="plate-cap absolute start-6 top-6"><?php echo esc_html('نمونه ۰' . ($i + 1)); ?></span>
                <div class="absolute inset-x-0 bottom-0 p-7">
                    <div class="mb-2 flex items-center gap-3 text-[0.7rem] tracking-widest text-gold-light">
                        <span><?php echo esc_html($pr['tag']); ?></span><span class="h-1 w-1 bg-gold-light"></span><span class="text-steel-300"><?php echo esc_html($pr['meta']); ?></span>
                    </div>
                    <h3 class="text-2xl font-bold text-white">
                        <a href="<?php echo esc_url($pr['url'] ?? home_url('/#projects')); ?>" class="transition-colors hover:text-gold-light"><?php echo esc_html($pr['title']); ?></a>
                    </h3>
                </div>
            </article>
        <?php endforeach; ?>
    </div>

    <div class="container mx-auto mt-8 max-w-[1310px]">
        <div class="h-px w-full bg-white/15">
            <div data-hproj-fill class="hproj-fill h-px bg-gold"></div>
        </div>
    </div>
</section>

<!-- ═══════════ 05 · TRADING / SCRAP ═══════════ -->
<section data-chapter="05" class="section bg-paper relative overflow-hidden">
    <div class="container relative mx-auto max-w-[1310px]">
        <div class="grid gap-14 lg:grid-cols-2 lg:items-center">
            <div class="relative order-2 lg:order-1" data-motion="fade-up">
                <div class="plate relative aspect-[5/4] w-full overflow-hidden bg-dark">
                    <img class="duo h-full w-full object-cover" src="<?php echo esc_url($img . 'yard-rebar.webp'); ?>" alt="<?php esc_attr_e('دپوی فولاد و میلگرد', 'iliya'); ?>" loading="lazy" decoding="async">
                    <span class="plate-cap absolute bottom-5 start-5"><?php esc_html_e('قاب ۰۵ — دپوی فولاد', 'iliya'); ?></span>
                </div>
            </div>

            <div class="order-1 lg:order-2" data-reveal>
                <span class="eyebrow eyebrow--ink mb-5"><?php esc_html_e('بازرگانی فولاد و فلزات', 'iliya'); ?></span>
                <h2 class="display-xl mb-6 text-heading">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('خرید و فروش', 'iliya'); ?></span></span>
                    <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('ضایعات و فلزات', 'iliya'); ?></span></span>
                </h2>
                <div class="mb-7 h-px w-24 bg-gold" data-line aria-hidden="true"></div>
                <p class="mb-8 max-w-md leading-9 text-body"><?php esc_html_e('با شبکه‌ای گسترده از تأمین‌کنندگان و کارفرمایان، انواع ضایعات فلزی و غیرفلزی را با بهترین قیمت روز خرید و فروش می‌کنیم.', 'iliya'); ?></p>
                <div class="flex flex-wrap gap-2.5" data-motion-group>
                    <?php foreach ($metals as $m) : ?>
                        <span class="chip"><?php echo esc_html($m); ?></span>
                    <?php endforeach; ?>
                </div>
                <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="btn-primary lnk-arrow mt-9" data-magnetic="0.2">
                    <?php esc_html_e('استعلام قیمت روز', 'iliya'); ?>
                    <?php echo iliya_icon('arrow-start', 18); ?>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════ WHY US (dark + stats) ═══════════ -->
<section id="why" class="img-section section relative overflow-hidden text-white">
    <div class="img-section__bg" aria-hidden="true">
        <img src="<?php echo esc_url($img . 'tex-steel-dark.webp'); ?>" alt="" loading="lazy" decoding="async">
        <div class="absolute inset-0 bg-dark/90"></div>
        <div class="bg-grid absolute inset-0 opacity-40"></div>
    </div>
    <span class="index-ghost absolute -top-10 end-[-1rem] hidden text-[14rem] leading-none md:block" aria-hidden="true">۰۶</span>
    <div class="container relative mx-auto max-w-[1310px]">
        <div class="mb-14 max-w-2xl" data-reveal>
            <span class="eyebrow mb-5"><?php esc_html_e('چرا ایلیا فخر آسیا؟', 'iliya'); ?></span>
            <h2 class="display-xl text-white">
                <span class="r-mask"><span class="r-line"><?php esc_html_e('مزیت‌هایی که', 'iliya'); ?></span></span>
                <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('ما را متمایز می‌کند', 'iliya'); ?></span></span>
            </h2>
        </div>

        <div class="grid gap-px bg-white/10 sm:grid-cols-2 lg:grid-cols-4" data-motion-group>
            <?php foreach ($features as $n => $f) : ?>
                <div class="group relative bg-dark/60 p-8 backdrop-blur-sm transition-colors hover:bg-steel-800/70">
                    <span class="absolute end-6 top-6 font-dana text-sm font-bold text-white/20">۰<?php echo esc_html($n + 1); ?></span>
                    <span class="mb-5 flex h-12 w-12 items-center justify-center text-gold transition-colors group-hover:text-gold-light">
                        <?php echo iliya_icon($f['icon'], 30); ?>
                    </span>
                    <h3 class="mb-2 text-base font-bold text-white"><?php echo esc_html($f['title']); ?></h3>
                    <p class="text-sm leading-7 text-steel-300"><?php echo esc_html($f['desc']); ?></p>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Stats: ruled editorial row -->
        <div class="mt-16 grid grid-cols-2 border-t border-white/15 lg:grid-cols-4" data-motion-group>
            <?php foreach ($stats as $idx => $st) : ?>
                <div class="border-b border-white/15 px-2 py-9 text-center <?php echo $idx % 2 === 0 ? 'border-s' : ''; ?> <?php echo $idx < 2 ? '' : ''; ?> lg:border-s lg:border-white/15">
                    <div class="stat-num text-5xl text-white md:text-6xl">
                        <span data-count="<?php echo esc_attr($st['num']); ?>">۰</span><span class="text-gold-light"><?php echo esc_html($st['suffix']); ?></span>
                    </div>
                    <div class="mt-2 text-xs tracking-widest text-steel-400"><?php echo esc_html($st['label']); ?></div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ═══════════ CTA BAND (welding embers) ═══════════ -->
<section class="img-section relative overflow-hidden py-24 text-white md:py-28">
    <div class="img-section__bg" aria-hidden="true">
        <img class="duo" src="<?php echo esc_url($img . 'weld-bead.webp'); ?>" alt="" loading="lazy" decoding="async">
        <div class="absolute inset-0 bg-dark/82"></div>
    </div>
    <canvas data-particles class="pointer-events-none absolute inset-0 z-0 h-full w-full" aria-hidden="true"></canvas>
    <div class="container relative z-10 mx-auto max-w-[1310px]">
        <div class="max-w-2xl" data-reveal>
            <span class="eyebrow mb-5"><?php esc_html_e('مشاوره رایگان', 'iliya'); ?></span>
            <h2 class="display-xl text-white">
                <span class="r-mask"><span class="r-line"><?php esc_html_e('پروژه‌ای در ذهن', 'iliya'); ?></span></span>
                <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('دارید؟', 'iliya'); ?></span></span>
            </h2>
            <p class="mt-5 max-w-md leading-8 text-steel-300"><?php esc_html_e('همین حالا با کارشناسان ما تماس بگیرید و مشاوره تخصصی دریافت کنید.', 'iliya'); ?></p>
            <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="btn-gold lnk-arrow mt-8" data-magnetic="0.3">
                <?php esc_html_e('تماس با ما', 'iliya'); ?>
                <?php echo iliya_icon('arrow-start', 18); ?>
            </a>
        </div>
    </div>
</section>

<!-- ═══════════ 06 · CONTACT ═══════════ -->
<section id="contact" data-chapter="06" class="section bg-paper">
    <div class="container mx-auto max-w-[1310px]">
        <div class="grid gap-14 lg:grid-cols-12">
            <div class="lg:col-span-5" data-reveal>
                <span class="eyebrow eyebrow--ink mb-5"><?php esc_html_e('در تماس باشید', 'iliya'); ?></span>
                <h2 class="display-xl mb-6 text-heading">
                    <span class="r-mask"><span class="r-line"><?php esc_html_e('آماده همکاری', 'iliya'); ?></span></span>
                    <span class="r-mask"><span class="r-line" style="font-weight:300"><?php esc_html_e('با شما هستیم', 'iliya'); ?></span></span>
                </h2>
                <div class="mb-8 h-px w-24 bg-gold" data-line aria-hidden="true"></div>
                <p class="mb-8 max-w-md leading-8 text-body"><?php esc_html_e('برای دریافت مشاوره، استعلام قیمت ضایعات یا ثبت درخواست پیمانکاری، از راه‌های زیر با ما در ارتباط باشید.', 'iliya'); ?></p>

                <div class="divide-y divide-border" data-motion-group>
                    <?php $c_landline = iliya_opt('phone_landline'); ?>
                    <?php if ($c_landline) : ?>
                    <a href="tel:<?php echo esc_attr(iliya_tel_href($c_landline)); ?>" class="flex items-center gap-4 py-4 transition-colors hover:text-accent">
                        <span class="text-gold-dark"><?php echo iliya_icon('phone', 22); ?></span>
                        <span>
                            <span class="block text-[0.7rem] tracking-widest text-muted"><?php esc_html_e('تلفن تماس', 'iliya'); ?></span>
                            <span class="block font-bold text-heading" dir="ltr"><?php echo esc_html(iliya_fa_num($c_landline)); ?></span>
                        </span>
                    </a>
                    <?php endif; ?>
                    <?php $c_mobile = iliya_opt('phone_mobile'); ?>
                    <?php if ($c_mobile) : ?>
                    <a href="tel:<?php echo esc_attr(iliya_tel_href($c_mobile)); ?>" class="flex items-center gap-4 py-4 transition-colors hover:text-accent">
                        <span class="text-gold-dark"><?php echo iliya_icon('phone', 22); ?></span>
                        <span>
                            <span class="block text-[0.7rem] tracking-widest text-muted"><?php esc_html_e('تلفن همراه', 'iliya'); ?></span>
                            <span class="block font-bold text-heading" dir="ltr"><?php echo esc_html(iliya_fa_num($c_mobile)); ?></span>
                        </span>
                    </a>
                    <?php endif; ?>
                    <?php $c_email = iliya_opt('email'); ?>
                    <?php if ($c_email) : ?>
                    <a href="mailto:<?php echo esc_attr($c_email); ?>" class="flex items-center gap-4 py-4 transition-colors hover:text-accent">
                        <span class="text-gold-dark"><?php echo iliya_icon('mail', 22); ?></span>
                        <span>
                            <span class="block text-[0.7rem] tracking-widest text-muted"><?php esc_html_e('ایمیل', 'iliya'); ?></span>
                            <span class="block font-bold text-heading" dir="ltr"><?php echo esc_html($c_email); ?></span>
                        </span>
                    </a>
                    <?php endif; ?>
                    <?php $c_hours = iliya_opt('hours'); ?>
                    <?php if ($c_hours) : ?>
                    <div class="flex items-center gap-4 py-4">
                        <span class="text-gold-dark"><?php echo iliya_icon('clock', 22); ?></span>
                        <span>
                            <span class="block text-[0.7rem] tracking-widest text-muted"><?php esc_html_e('ساعات کاری', 'iliya'); ?></span>
                            <span class="block font-bold text-heading"><?php echo esc_html($c_hours); ?></span>
                        </span>
                    </div>
                    <?php endif; ?>
                    <?php $c_address = iliya_opt('address'); ?>
                    <?php if ($c_address) : ?>
                    <div class="flex items-start gap-4 py-4">
                        <span class="mt-0.5 text-gold-dark"><?php echo iliya_icon('location', 22); ?></span>
                        <span>
                            <span class="block text-[0.7rem] tracking-widest text-muted"><?php esc_html_e('آدرس', 'iliya'); ?></span>
                            <span class="block font-bold leading-7 text-heading"><?php echo esc_html($c_address); ?></span>
                        </span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Contact form -->
            <div class="lg:col-span-7" data-motion="fade-up" data-motion-delay="0.1">
                <div class="border border-border-medium bg-white p-8 md:p-12">
                    <h3 class="mb-8 text-lg font-bold text-heading"><?php esc_html_e('ارسال درخواست', 'iliya'); ?></h3>
                    <form class="grid gap-6" data-contact-form method="post" novalidate>
                        <p class="absolute h-px w-px overflow-hidden" aria-hidden="true">
                            <label>اگر انسان هستید این فیلد را خالی بگذارید
                                <input type="text" name="website" tabindex="-1" autocomplete="off">
                            </label>
                        </p>
                        <div class="grid gap-6 sm:grid-cols-2">
                            <div class="relative">
                                <input id="cf-name" name="name" type="text" required placeholder=" " class="peer w-full border-b border-border bg-transparent py-2.5 text-sm outline-none transition-colors focus:border-accent">
                                <label class="pointer-events-none absolute start-0 top-2.5 text-sm text-muted transition-all peer-focus:-top-3.5 peer-focus:text-xs peer-focus:text-accent peer-[:not(:placeholder-shown)]:-top-3.5 peer-[:not(:placeholder-shown)]:text-xs" for="cf-name"><?php esc_html_e('نام و نام خانوادگی', 'iliya'); ?></label>
                            </div>
                            <div class="relative">
                                <input id="cf-phone" name="phone" type="tel" required placeholder=" " class="peer w-full border-b border-border bg-transparent py-2.5 text-sm outline-none transition-colors focus:border-accent">
                                <label class="pointer-events-none absolute start-0 top-2.5 text-sm text-muted transition-all peer-focus:-top-3.5 peer-focus:text-xs peer-focus:text-accent peer-[:not(:placeholder-shown)]:-top-3.5 peer-[:not(:placeholder-shown)]:text-xs" for="cf-phone"><?php esc_html_e('شماره تماس', 'iliya'); ?></label>
                            </div>
                        </div>
                        <div class="relative">
                            <input id="cf-subject" name="subject" type="text" placeholder=" " class="peer w-full border-b border-border bg-transparent py-2.5 text-sm outline-none transition-colors focus:border-accent">
                            <label class="pointer-events-none absolute start-0 top-2.5 text-sm text-muted transition-all peer-focus:-top-3.5 peer-focus:text-xs peer-focus:text-accent peer-[:not(:placeholder-shown)]:-top-3.5 peer-[:not(:placeholder-shown)]:text-xs" for="cf-subject"><?php esc_html_e('موضوع', 'iliya'); ?></label>
                        </div>
                        <div class="relative">
                            <textarea id="cf-msg" name="message" rows="4" placeholder=" " class="peer w-full resize-y border-b border-border bg-transparent py-2.5 text-sm outline-none transition-colors focus:border-accent"></textarea>
                            <label class="pointer-events-none absolute start-0 top-2.5 text-sm text-muted transition-all peer-focus:-top-3.5 peer-focus:text-xs peer-focus:text-accent peer-[:not(:placeholder-shown)]:-top-3.5 peer-[:not(:placeholder-shown)]:text-xs" for="cf-msg"><?php esc_html_e('پیام شما', 'iliya'); ?></label>
                        </div>
                        <button type="submit" class="btn-primary lnk-arrow w-full sm:w-auto sm:justify-self-start">
                            <span data-cf-label><?php esc_html_e('ارسال درخواست', 'iliya'); ?></span>
                            <?php echo iliya_icon('arrow-start', 18); ?>
                        </button>
                        <p data-cf-status role="status" aria-live="polite" class="cf-status"></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?php
get_footer();