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

<template>
  <div id="hero-laptop" class="mockup-macbook-wrap relative w-full max-w-[580px] select-none cursor-pointer z-10" :style="transformStyle">
    <div class="macbook-screen-chassis rounded-[22px] p-2.5 sm:p-3 relative">
      <div class="mockup-glass-sheen rounded-[16px]" />

      <div class="bg-[#0b0f19] rounded-[16px] overflow-hidden border border-slate-800 relative shadow-2xl">
        <div class="bg-[#111827] px-3.5 py-2 flex items-center justify-between border-b border-slate-800 text-[10px] text-slate-400">
          <div class="flex items-center gap-1.5">
            <span class="w-2.5 h-2.5 rounded-full bg-[#ff5f56] inline-block shadow-sm" />
            <span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e] inline-block shadow-sm" />
            <span class="w-2.5 h-2.5 rounded-full bg-[#27c93f] inline-block shadow-sm" />
          </div>

          <div class="w-24 h-3 bg-black rounded-b-md -mt-2 mx-auto flex items-center justify-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-slate-900 border border-slate-700" />
            <span class="w-1 h-1 rounded-full bg-emerald-500/80" />
          </div>

          <div class="flex items-center gap-1.5 text-slate-300 font-bold">
            <div class="w-3.5 h-3.5 rounded bg-brand-600 flex items-center justify-center text-[8px] text-white">M</div>
            <span class="text-[9px] bg-brand-500/20 text-brand-300 px-2 py-0.5 rounded-full font-mono">{{ mockup.domain }}</span>
          </div>
        </div>

        <div class="p-3 sm:p-4 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-[320px] flex gap-3 text-right">
          <div class="w-28 hidden sm:flex flex-col justify-between py-1 px-1 border-l border-slate-200 dark:border-slate-800 text-[11px] text-slate-600 dark:text-slate-400 font-medium">
            <div class="space-y-1.5">
              <button
                v-for="tab in TABS"
                :key="tab.id"
                type="button"
                :aria-pressed="heroTab === tab.id"
                :class="heroTab === tab.id ? tab.activeClass : 'hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-600 dark:text-slate-400'"
                class="w-full text-right px-2.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-all duration-200"
                @click.stop="heroTab = tab.id"
              >
                <span class="w-1.5 h-1.5 rounded-full transition-transform duration-200" :class="heroTab === tab.id ? tab.dotClass : 'bg-slate-400'" />
                {{ tab.label }}
              </button>
            </div>
            <div class="px-2 py-1 text-[9px] text-slate-400 dark:text-slate-500 flex items-center justify-between">
              <span>{{ mockup.version }}</span>
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500" />
            </div>
          </div>

          <div class="flex-1 space-y-2.5">
            <div v-if="heroTab === 'dashboard'" class="space-y-2.5">
              <div class="grid grid-cols-2 gap-2">
                <div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm hover:border-brand-300 dark:hover:border-brand-500/50 transition-colors">
                  <div class="text-[10px] text-slate-400 dark:text-slate-500 font-medium">فروش کل دوره‌ای</div>
                  <div class="text-xs sm:text-sm md:text-base font-extrabold text-slate-800 dark:text-white mt-0.5">
                    {{ mockup.salesValue }} <span class="text-[9px] font-normal text-slate-500 dark:text-slate-400">تومان</span>
                  </div>
                  <div class="text-[9px] text-emerald-600 dark:text-emerald-400 mt-0.5 font-semibold flex items-center gap-1">
                    {{ mockup.salesGrowth }}
                  </div>
                </div>

                <div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm hover:border-brand-300 dark:hover:border-brand-500/50 transition-colors">
                  <div class="text-[10px] text-slate-400 dark:text-slate-500 font-medium">مشتریان وفادار فعال</div>
                  <div class="text-xs sm:text-sm md:text-base font-extrabold text-slate-800 dark:text-white mt-0.5">
                    {{ mockup.customersValue }} <span class="text-[9px] font-normal text-slate-500 dark:text-slate-400">نفر</span>
                  </div>
                  <div class="text-[9px] text-brand-600 dark:text-brand-400 mt-0.5 font-semibold flex items-center gap-1">
                    {{ mockup.satisfaction }}
                  </div>
                </div>
              </div>

              <div class="bg-white dark:bg-slate-900 p-2.5 rounded-xl border border-slate-200/80 dark:border-slate-800 shadow-sm relative group/chart">
                <div class="flex items-center justify-between text-[10px] mb-1.5">
                  <span class="font-bold text-slate-700 dark:text-slate-300">روند عملکرد فروش و تحلیل هوش مصنوعی</span>
                  <span class="text-brand-600 dark:text-brand-400 font-bold text-[9px] flex items-center gap-1 bg-brand-50 dark:bg-brand-950 px-2 py-0.5 rounded-full">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping" />
                    زنده
                  </span>
                </div>

                <div class="relative">
                  <svg class="w-full h-20 overflow-visible" viewBox="0 0 300 90" fill="none" aria-hidden="true">
                    <defs>
                      <linearGradient id="heroChartGrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#0062f5" stop-opacity="0.32" />
                        <stop offset="100%" stop-color="#0062f5" stop-opacity="0.0" />
                      </linearGradient>
                    </defs>
                    <path d="M0,70 Q40,55 80,35 T160,45 T240,15 T300,25 L300,90 L0,90 Z" fill="url(#heroChartGrad)" />
                    <path d="M0,70 Q40,55 80,35 T160,45 T240,15 T300,25" stroke="#0062f5" stroke-width="2.8" stroke-linecap="round" />

                    <circle cx="80" cy="35" r="4" fill="#0062f5" class="cursor-pointer" @mouseenter="chartTooltip = mockup.chartTooltips[0]" />
                    <circle cx="160" cy="45" r="4" fill="#0062f5" class="cursor-pointer" @mouseenter="chartTooltip = mockup.chartTooltips[1]" />
                    <circle cx="240" cy="15" r="5" fill="#0062f5" stroke="#ffffff" stroke-width="2" class="cursor-pointer" @mouseenter="chartTooltip = mockup.chartTooltips[2]" />
                  </svg>

                  <div class="absolute top-1 left-2 bg-slate-900/90 text-white text-[9px] px-2 py-0.5 rounded font-mono shadow pointer-events-none">
                    {{ chartTooltip }}
                  </div>
                </div>
              </div>
            </div>

            <div v-else-if="heroTab === 'gold'" class="space-y-2.5">
              <div class="bg-amber-50/80 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-xl p-3 text-right">
                <div class="flex items-center justify-between text-[11px] mb-2">
                  <span class="font-extrabold text-amber-950 dark:text-amber-200">محاسبه‌گر نرخ لحظه‌ای و مظنه طلا</span>
                  <span class="text-[9px] bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100 px-2 py-0.5 rounded-full font-bold">اتصال مستقیم به اتحادیه</span>
                </div>
                <div class="grid grid-cols-2 gap-2 text-[10px]">
                  <div class="bg-white dark:bg-slate-900 p-2 rounded-lg border border-amber-100 dark:border-amber-900/40">
                    <span class="text-slate-400 dark:text-slate-500 block">مظنه ۱۷ عیار:</span>
                    <span class="font-black text-slate-800 dark:text-slate-200 text-xs">۱۸,۷۵۰,۰۰۰ تومان</span>
                  </div>
                  <div class="bg-white dark:bg-slate-900 p-2 rounded-lg border border-amber-100 dark:border-amber-900/40">
                    <span class="text-slate-400 dark:text-slate-500 block">گرم ۱۸ عیار:</span>
                    <span class="font-black text-slate-800 dark:text-slate-200 text-xs">۴,۳۲۰,۰۰۰ تومان</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-else-if="heroTab === 'crm'" class="space-y-2.5">
              <div class="bg-indigo-50/70 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800/60 rounded-xl p-3 text-right">
                <div class="flex items-center justify-between text-[11px] mb-2">
                  <span class="font-extrabold text-indigo-950 dark:text-indigo-200">قیف فروش و وضعیت سرنخ‌ها</span>
                  <span class="text-[9px] bg-indigo-200 dark:bg-indigo-800 text-indigo-900 dark:text-indigo-100 px-2 py-0.5 rounded-full font-bold">اتوماسیون فعال</span>
                </div>
                <div class="space-y-1.5 text-[10px]">
                  <div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-indigo-100 dark:border-indigo-900/40">
                    <span class="font-semibold text-slate-700 dark:text-slate-300">تماس‌های موفق امروز</span>
                    <span class="font-bold text-indigo-600 dark:text-indigo-400">۱۴۲ مورد (+۱۸٪)</span>
                  </div>
                  <div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-indigo-100 dark:border-indigo-900/40">
                    <span class="font-semibold text-slate-700 dark:text-slate-300">پیش‌فاکتورهای در انتظار تایید</span>
                    <span class="font-bold text-amber-600 dark:text-amber-400">۲۹ قرارداد</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-else-if="heroTab === 'financial'" class="space-y-2.5">
              <div class="bg-cyan-50/70 dark:bg-cyan-950/40 border border-cyan-200 dark:border-cyan-800/60 rounded-xl p-3 text-right">
                <div class="flex items-center justify-between text-[11px] mb-2">
                  <span class="font-extrabold text-cyan-950 dark:text-cyan-200">تراز مالی و سامانه مودیان</span>
                  <span class="text-[9px] bg-emerald-100 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-300 px-2 py-0.5 rounded-full font-bold">همگام‌سازی برخط</span>
                </div>
                <div class="space-y-1.5 text-[10px]">
                  <div class="flex items-center justify-between bg-white dark:bg-slate-900 px-2 py-1.5 rounded-lg border border-cyan-100 dark:border-cyan-900/40">
                    <span class="text-slate-600 dark:text-slate-400">تسویه تجمیعی کارتخوان‌ها:</span>
                    <span class="font-bold text-slate-900 dark:text-white">۱,۲۸۰,۰۰۰,۰۰۰ تومان</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="flex items-center justify-between bg-white dark:bg-slate-900 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-800 text-[10px] text-slate-600 dark:text-slate-400">
              <div class="flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping" />
                <span>آخرین تسویه حسابداری متصل به شتاب</span>
              </div>
              <span class="font-bold text-slate-800 dark:text-slate-200">موفق (۱ دقیقه پیش)</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="macbook-deck-base h-4 rounded-b-[18px] mx-auto -mt-0.5 flex justify-center items-center relative">
      <div class="w-24 h-1.5 bg-slate-400/80 rounded-full shadow-inner" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HeroMockupContent } from "@montech/shared";

type HeroTab = "dashboard" | "gold" | "crm" | "financial";

const props = defineProps<{ mockup: HeroMockupContent; transformStyle: string }>();

const TABS: Array<{ id: HeroTab; label: string; activeClass: string; dotClass: string }> = [
  {
    id: "dashboard",
    label: "داشبورد",
    activeClass: "bg-brand-50 dark:bg-brand-950 text-brand-600 dark:text-brand-400 font-bold shadow-sm",
    dotClass: "bg-brand-600 dark:bg-brand-400 scale-125",
  },
  {
    id: "gold",
    label: "انبارداری طلا",
    activeClass: "bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-400 font-bold shadow-sm",
    dotClass: "bg-amber-600 dark:bg-amber-400 scale-125",
  },
  {
    id: "crm",
    label: "مشتریان (CRM)",
    activeClass: "bg-indigo-50 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-400 font-bold shadow-sm",
    dotClass: "bg-indigo-600 dark:bg-indigo-400 scale-125",
  },
  {
    id: "financial",
    label: "گزارش مالی",
    activeClass: "bg-cyan-50 dark:bg-cyan-950/60 text-cyan-700 dark:text-cyan-400 font-bold shadow-sm",
    dotClass: "bg-cyan-600 dark:bg-cyan-400 scale-125",
  },
];

const heroTab = ref<HeroTab>("dashboard");
const chartTooltip = ref(props.mockup.chartDefaultTooltip);
</script>