Montech_Landing/apps/landing/components/home/HeroPhoneMockup.vue

<template>
  <div
    id="hero-mobile"
    class="mockup-iphone-wrap absolute -bottom-10 -right-2 sm:-right-4 lg:right-2 w-[225px] sm:w-[250px] h-[465px] sm:h-[515px] select-none cursor-pointer z-20"
    :style="transformStyle"
    @click="goldBarCount = goldBarCount === baseCount ? baseCount + 1 : baseCount"
  >
    <div class="iphone-titanium-bezel rounded-[46px] p-2.5 w-full h-full relative">
      <div class="mockup-glass-sheen rounded-[38px]" />

      <div class="bg-white dark:bg-slate-950 rounded-[38px] overflow-hidden text-right p-3.5 pt-2 text-slate-800 dark:text-slate-100 text-[10px] w-full h-full flex flex-col justify-between relative border border-slate-100 dark:border-slate-800 shadow-xl">
        <div>
          <div class="flex items-center justify-between px-2 text-[9px] text-slate-800 dark:text-slate-200 font-bold mb-1">
            <span>۰۹:۴۱</span>
            <div class="flex items-center gap-1 text-[8px]">
              <span>5G</span>
              <svg class="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 18.25c-.2.2-.2.51 0 .71.2.2.51.2.71 0l.64-.64C7.26 19.46 9.49 20.1 12 20.1c4.97 0 9-4.03 9-9s-4.03-9-9-9z" /></svg>
              <span class="w-4 h-2 border border-slate-800 dark:border-slate-300 rounded-sm p-0.5 flex items-center"><span class="w-full h-full bg-slate-800 dark:bg-slate-300 rounded-xs" /></span>
            </div>
          </div>

          <div class="w-24 h-4.5 bg-black mx-auto rounded-full mb-2.5 flex items-center justify-between px-2.5 shadow-sm">
            <span class="w-1.5 h-1.5 rounded-full bg-slate-900 border border-slate-800" />
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
          </div>

          <div class="flex items-center justify-between px-1 mb-2.5">
            <div class="flex items-center gap-1.5">
              <span class="w-5 h-5 rounded-lg bg-amber-500 text-white flex items-center justify-center text-[10px] font-bold">M</span>
              <span class="font-black text-slate-900 dark:text-white text-xs">طلا و جواهر</span>
            </div>
            <span class="text-[9px] bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 font-bold px-2 py-0.5 rounded-full">انبار آنلاین</span>
          </div>

          <div class="bg-gradient-to-l from-amber-50 to-amber-100/70 dark:from-amber-950/30 dark:to-amber-900/20 border border-amber-200/90 dark:border-amber-800/50 rounded-2xl p-2.5 flex items-center gap-2.5 shadow-sm hover:shadow-md transition-shadow mb-2.5">
            <div class="gold-bar-realistic w-12 h-12 rounded-xl flex flex-col items-center justify-center text-amber-950 font-black text-[10px] tracking-tight relative overflow-hidden flex-shrink-0">
              <div class="absolute inset-0 bg-gradient-to-t from-black/25 via-transparent to-white/40 pointer-events-none" />
              <span class="relative z-10 text-[9px] font-extrabold tracking-wider">AU 999</span>
              <span class="relative z-10 text-[7px] opacity-90 font-mono">100g</span>
            </div>
            <div class="text-[9px] leading-tight flex-1">
              <div class="font-extrabold text-slate-900 dark:text-white text-[10px]">شمش ۱۰۰ گرمی ۲۴ عیار</div>
              <div class="text-amber-800 dark:text-amber-300 font-semibold mt-1">موجودی صندوق: {{ goldBarCount }} قطعه</div>
              <div class="text-[8px] text-slate-400 dark:text-slate-500 mt-0.5">شناسه استاندارد زرین‌بانک</div>
            </div>
          </div>

          <div class="bg-slate-50 dark:bg-slate-900 rounded-xl p-2 border border-slate-200/80 dark:border-slate-800 space-y-1.5 mb-2.5">
            <div class="flex items-center justify-between text-[9px]">
              <span class="text-slate-500 dark:text-slate-400 font-medium">مظنه ۱۷ اتحادیه:</span>
              <span class="font-black text-slate-900 dark:text-white">۱۸,۷۵۰,۰۰۰ <span class="text-[8px] font-normal text-slate-400">تومان</span></span>
            </div>
            <div class="flex items-center justify-between text-[9px]">
              <span class="text-slate-500 dark:text-slate-400 font-medium">تسویه آنی شتاب:</span>
              <span class="font-black text-emerald-600 dark:text-emerald-400">۴۵۰,۳۰۰,۰۰۰ <span class="text-[8px] font-normal text-slate-400">تومان</span></span>
            </div>
          </div>

          <div class="space-y-1.5">
            <div class="text-[9px] font-bold text-slate-400 dark:text-slate-500 px-1">آخرین فاکتورهای سیستمی:</div>
            <div class="bg-white dark:bg-slate-900 rounded-lg p-1.5 border border-slate-100 dark:border-slate-800 flex items-center justify-between text-[9px] shadow-2xs">
              <span class="text-slate-700 dark:text-slate-300 font-medium">فاکتور ۱۸۴۲ (زرگری شمس)</span>
              <span class="text-emerald-600 dark:text-emerald-400 font-bold">تایید شد ✓</span>
            </div>
            <div class="bg-white dark:bg-slate-900 rounded-lg p-1.5 border border-slate-100 dark:border-slate-800 flex items-center justify-between text-[9px] shadow-2xs">
              <span class="text-slate-700 dark:text-slate-300 font-medium">حواله سکه بهار آزادی</span>
              <span class="text-brand-600 dark:text-brand-400 font-bold">در انتظار</span>
            </div>
          </div>
        </div>

        <div class="pt-2 border-t border-slate-100 dark:border-slate-800 flex flex-col items-center gap-1.5">
          <div class="w-full flex justify-around items-center text-slate-400 dark:text-slate-500 text-xs">
            <span class="text-brand-600 font-black">●</span>
            <span>■</span>
            <span>▲</span>
            <span>⚙</span>
          </div>
          <div class="w-24 h-1 bg-slate-800 dark:bg-slate-400 rounded-full mt-0.5" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ baseCount: number; transformStyle: string }>();
const goldBarCount = ref(props.baseCount);
</script>