<?php
// index.php - Video Maker Studio Hub
require_once __DIR__ . '/config/db.php';
$pageTitle = 'Bảo BĐS - Video Maker Studio 4 Phiên Bản Chuyên Nghiệp';
$pageDescription = 'Trọn bộ 4 công cụ tạo video bất động sản, video cuộn ảnh, reels, tiktok và video typography motion đỉnh cao cho môi giới BĐS.';
$activeNav = 'home';
require_once __DIR__ . '/includes/public_header.php';
?>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
  <!-- Hero Section -->
  <div class="text-center max-w-3xl mx-auto mb-14">
    <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold mb-4">
      <i class="fa-solid fa-wand-magic-sparkles"></i> 4 Phiên Bản Tạo Video BĐS Tự Động
    </div>
    <h1 class="text-3xl sm:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4">
      Tạo Video Bất Động Sản <br class="hidden sm:inline">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">Đỉnh Cao Trong Vài Giây</span>
    </h1>
    <p class="text-slate-400 text-base sm:text-lg leading-relaxed">
      Lựa chọn phiên bản phù hợp để biến hình ảnh dự án, bài viết Facebook thành video ngắn chuẩn Reels, TikTok, YouTube Shorts kèm giọng đọc AI và phụ đề tự động.
    </p>
  </div>

  <!-- 4 Version Cards Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
    
    <!-- V4: Typography Motion -->
    <div class="relative group rounded-3xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/70 p-7 hover:border-pink-500/50 hover:shadow-2xl hover:shadow-pink-500/10 transition duration-300 flex flex-col justify-between overflow-hidden">
      <div class="absolute top-0 right-0 transform translate-x-4 -translate-y-4 w-36 h-36 bg-pink-500/10 rounded-full blur-2xl group-hover:bg-pink-500/20 transition"></div>
      <div>
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-pink-500 to-rose-500 flex items-center justify-center text-white text-xl shadow-lg shadow-pink-500/30">
            <i class="fa-solid fa-sparkles"></i>
          </div>
          <span class="px-3 py-1 rounded-full bg-pink-500/20 text-pink-300 border border-pink-500/30 text-xs font-bold uppercase tracking-wider">
            Mới Nhất • V4 Motion
          </span>
        </div>
        <h2 class="text-xl font-bold text-white mb-2 group-hover:text-pink-300 transition">Video V4 - Typography Motion</h2>
        <p class="text-slate-400 text-sm leading-relaxed mb-6">
          Dựng video nền chuyển động Kinetic Grid, phụ đề chữ nhảy từng từ (Word-by-word Highlights), đa kích thước 9:16, 1:1, 16:9 với hiệu ứng Visual siêu ấn tượng.
        </p>
        <ul class="space-y-2.5 mb-8 text-xs text-slate-300">
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-pink-400"></i> Nền chuyển động Motion Grid đen, hồng, xanh ngọc</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-pink-400"></i> Phụ đề Karaoke Typography phóng to từng chữ</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-pink-400"></i> Lồng tiếng AI Vbee, ElevenLabs siêu cảm xúc</li>
        </ul>
      </div>
      <a href="/tao-anh-cuon-v4/" class="w-full text-center py-3.5 px-6 rounded-2xl bg-gradient-to-r from-pink-600 to-rose-600 hover:from-pink-500 hover:to-rose-500 text-white font-bold text-sm shadow-lg shadow-pink-600/25 transition flex items-center justify-center gap-2">
        Mở Studio Video V4 <i class="fa-solid fa-arrow-right text-xs"></i>
      </a>
    </div>

    <!-- V3: Pro Reels & TikTok -->
    <div class="relative group rounded-3xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/70 p-7 hover:border-cyan-500/50 hover:shadow-2xl hover:shadow-cyan-500/10 transition duration-300 flex flex-col justify-between overflow-hidden">
      <div class="absolute top-0 right-0 transform translate-x-4 -translate-y-4 w-36 h-36 bg-cyan-500/10 rounded-full blur-2xl group-hover:bg-cyan-500/20 transition"></div>
      <div>
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center text-white text-xl shadow-lg shadow-cyan-500/30">
            <i class="fa-solid fa-clapperboard"></i>
          </div>
          <span class="px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 text-xs font-bold uppercase tracking-wider">
            Chuyên Nghiệp • V3 Pro
          </span>
        </div>
        <h2 class="text-xl font-bold text-white mb-2 group-hover:text-cyan-300 transition">Video V3 - Chuẩn Reels & TikTok</h2>
        <p class="text-slate-400 text-sm leading-relaxed mb-6">
          Dựng video dọc 9:16 chuyên cho TikTok, Reels, Shorts với bố cục thẻ thông tin BĐS, hiệu ứng zoom ảnh động, nhạc nền và waveform âm thanh.
        </p>
        <ul class="space-y-2.5 mb-8 text-xs text-slate-300">
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-cyan-400"></i> Bố cục 9:16 dọc tối ưu di động</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-cyan-400"></i> Khung avatar thông tin chuyên viên tư vấn</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-cyan-400"></i> Nhạc nền trending kèm thanh âm thanh Waveform</li>
        </ul>
      </div>
      <a href="/tao-anh-cuon-v3/" class="w-full text-center py-3.5 px-6 rounded-2xl bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white font-bold text-sm shadow-lg shadow-cyan-600/25 transition flex items-center justify-center gap-2">
        Mở Studio Video V3 <i class="fa-solid fa-arrow-right text-xs"></i>
      </a>
    </div>

    <!-- V2: Sync Fast -->
    <div class="relative group rounded-3xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/70 p-7 hover:border-amber-500/50 hover:shadow-2xl hover:shadow-amber-500/10 transition duration-300 flex flex-col justify-between overflow-hidden">
      <div class="absolute top-0 right-0 transform translate-x-4 -translate-y-4 w-36 h-36 bg-amber-500/10 rounded-full blur-2xl group-hover:bg-amber-500/20 transition"></div>
      <div>
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-500 flex items-center justify-center text-white text-xl shadow-lg shadow-amber-500/30">
            <i class="fa-solid fa-bolt"></i>
          </div>
          <span class="px-3 py-1 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30 text-xs font-bold uppercase tracking-wider">
            Siêu Tốc • V2 Sync
          </span>
        </div>
        <h2 class="text-xl font-bold text-white mb-2 group-hover:text-amber-300 transition">Video V2 - Render Đồng Bộ Nhanh</h2>
        <p class="text-slate-400 text-sm leading-relaxed mb-6">
          Bản tối ưu hóa bộ nhớ và tốc độ render, xem trước hiệu ứng cuộn ảnh tức thời 0ms, lưu trữ dự án vĩnh viễn và xuất video ổn định cao.
        </p>
        <ul class="space-y-2.5 mb-8 text-xs text-slate-300">
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-amber-400"></i> Render tức thời 0ms mượt mà</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-amber-400"></i> Tự động đồng bộ thời lượng ảnh theo lời thoại AI</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-amber-400"></i> Tải về video MP4 không bị mất định dạng</li>
        </ul>
      </div>
      <a href="/tao-anh-cuon-v2/" class="w-full text-center py-3.5 px-6 rounded-2xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 text-white font-bold text-sm shadow-lg shadow-amber-600/25 transition flex items-center justify-center gap-2">
        Mở Studio Video V2 <i class="fa-solid fa-arrow-right text-xs"></i>
      </a>
    </div>

    <!-- V1: Classic -->
    <div class="relative group rounded-3xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/70 p-7 hover:border-emerald-500/50 hover:shadow-2xl hover:shadow-emerald-500/10 transition duration-300 flex flex-col justify-between overflow-hidden">
      <div class="absolute top-0 right-0 transform translate-x-4 -translate-y-4 w-36 h-36 bg-emerald-500/10 rounded-full blur-2xl group-hover:bg-emerald-500/20 transition"></div>
      <div>
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-emerald-500 to-teal-600 flex items-center justify-center text-white text-xl shadow-lg shadow-emerald-500/30">
            <i class="fa-solid fa-photo-film"></i>
          </div>
          <span class="px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 text-xs font-bold uppercase tracking-wider">
            Tiêu Chuẩn • V1 Classic
          </span>
        </div>
        <h2 class="text-xl font-bold text-white mb-2 group-hover:text-emerald-300 transition">Video V1 - Tạo Video Từ Link & Ảnh</h2>
        <p class="text-slate-400 text-sm leading-relaxed mb-6">
          Bản tạo video ảnh cuộn truyền thống, hỗ trợ bóc tách hình ảnh tự động từ link bài viết, gắn logo thương hiệu và chèn nhạc nền bất động sản.
        </p>
        <ul class="space-y-2.5 mb-8 text-xs text-slate-300">
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400"></i> Import ảnh nhanh từ liên kết bài viết</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400"></i> Hiệu ứng trượt ngang Carousel cổ điển</li>
          <li class="flex items-center gap-2"><i class="fa-solid fa-check text-emerald-400"></i> Thư viện âm thanh và voice tiếng Việt phong phú</li>
        </ul>
      </div>
      <a href="/tao-anh-cuon/" class="w-full text-center py-3.5 px-6 rounded-2xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 text-white font-bold text-sm shadow-lg shadow-emerald-600/25 transition flex items-center justify-center gap-2">
        Mở Studio Video V1 <i class="fa-solid fa-arrow-right text-xs"></i>
      </a>
    </div>

  </div>
</div>

<?php require_once __DIR__ . '/includes/public_footer.php'; ?>
