import React from "react"; import { motion } from "framer-motion"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Crown, Sparkles, ShieldCheck, Gem, Stars, MessageSquare, Clock3, MapPin, Phone, Send, Check, Gift, HandHeart, } from "lucide-react"; // UNUS 標準色：深綠 #0A2F1F、金色 #C6A664、象牙白 #FAFAF7 // 將深綠搭配金色邊框與柔白背景，營造低調奢華 export default function UnusVipPage() { return (

{/* 頂部 Hero 區域 */}

UNUS VIP Privilege

專屬於少數的尊榮體驗

包包不是配件，是你的日常盔甲與記憶容器。UNUS 以護理級細膩，為 VIP 打造私密、安心、可被信任的全程照護。

{/* 右上角裝飾亮粉 */}

{/* 三大價值主張 */}

} title="成就人" desc="以同理與專業成就每一次選擇，讓你在自己的角色裡發光。" /> } title="重啟物" desc="透過護理式工序喚回光澤與故事，讓物件延續情感價值。" /> } title="構築可被信任的未來" desc="以透明流程、可追蹤紀錄與穩定品質，建立長久的信賴。" />

{/* VIP 專屬權益 */}

VIP 專屬權益

{[ { title: "一對一私密諮詢", desc: "專屬顧問深度了解材質、色澤與使用情境，客製化建議。", }, { title: "優先工時與保固", desc: "插隊處理時程、完善保固與售後追蹤，安心無憂。", }, { title: "收藏級前後對比檔案", desc: "全程拍照存檔，成為你的精品護理履歷。", }, { title: "到府收送（台中核心區）", desc: "節省你的時間成本，尊榮從門口開始。", }, { title: "年度健檢與保養提醒", desc: "主動提醒保養週期，維持最佳狀態。", }, { title: "聯名與私宴優先邀請", desc: "與同好相聚，分享美與故事。", }, ].map((i, idx) => ( {i.title}

{i.desc}

))}

{/* 方案卡（洗護／修復／奢護鍍膜／二手寄賣 Concierge） */}

VIP 服務方案

{/* 情感說服區（品牌語氣＋社會證明） */}

Care Your Memories

包包不是配件，是日常的盔甲。

我們理解你捨不得的理由，因為看見物件背後的生命力。UNUS 以護理的細緻與透明流程，讓每一次交付都安心、放心，也充滿被尊重的儀式感。

透明工序 / 收藏級前後對比 / 售後追蹤

{/* 右側示意圖區：以金框卡片呈現三張縮圖 */}

{[1, 2, 3].map((n) => (

圖片佔位 {n}

))}

{/* VIP Concierge 表單區（轉換） */}

專屬顧問聯繫

您的稱呼

聯絡電話 / LINE ID

想處理的服務

補充說明（選填）

</div>
            </div>
            <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-3 text-sm text-[#0A2F1F]/70">
                <Clock3 className="h-4 w-4" /> 回覆時間：營業時段內 1 小時內
                <MapPin className="ml-3 h-4 w-4" /> 台中｜太平・南屯
                <Phone className="ml-3 h-4 w-4" /> 04-xxxx-xxxx
              </div>
              <Button className="rounded-2xl border border-[#C6A664] bg-[#C6A664] text-[#0A2F1F] hover:bg-[#b59657]">
                <Send className="mr-2 h-4 w-4" /> 提交諮詢
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>

{/* FAQ 區域（解除疑慮） */}
      <section className="mx-auto max-w-6xl px-6 pb-24">
        <div className="mb-10 flex items-center gap-2">
          <ShieldCheck className="h-6 w-6 text-[#C6A664]" />
          <h2 className="text-2xl font-semibold md:text-3xl">常見問題</h2>
        </div>
        <div className="grid gap-4 md:grid-cols-2">
          <FaqItem q="VIP 需要綁定年費嗎？" a="UNUS VIP 免綁定年費，以實際服務與體驗為核心；若有特別活動再另行公告。" />
          <FaqItem q="前後對比與進度會如何提供？" a="每件委託皆建立專屬紀錄，從進件、施工到完工，以影像與文字雙軌回報。" />
          <FaqItem q="若需到府收送，範圍與費用？" a="台中核心區提供 VIP 免費到府；其他區域將提供加價方案與第三方物流選擇。" />
          <FaqItem q="若遇到無法處理的材質或氧化呢？" a="我們會先行專業評估並誠實告知風險，提供替代性照護方案，確保物件安全。" />
        </div>
      </section>

{/* 頁尾 CTA */}
      <footer className="border-t border-[#0A2F1F]/10 bg-white/70">
        <div className="mx-auto flex max-w-6xl flex-col items-center gap-3 px-6 py-10 text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-[#C6A664]/40 bg-white/80 px-3 py-1 text-xs text-[#0A2F1F]/80">
            <Gift className="h-4 w-4 text-[#C6A664]" /> VIP 首次預約享專屬保養禮
          </div>
          <p className="text-sm text-[#0A2F1F]/70">
            UNUS 愛護仕｜Care Your Memories
          </p>
          <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
            <Button className="rounded-2xl border border-[#C6A664] bg-[#C6A664] text-[#0A2F1F] hover:bg-[#b59657]">
              加入 LINE 專屬顧問
            </Button>
            <Button variant="outline" className="rounded-2xl">
              預約到府收送
            </Button>
          </div>
          <p className="mt-3 text-xs text-[#0A2F1F]/50">© {new Date().getFullYear()} UNUS Boutique. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

function FaqItem({ q, a }: { q: string; a: string }) {
  return (
    <div className="rounded-2xl border border-[#C6A664]/30 bg-white/90 p-5 shadow-sm">
      <div className="text-base font-medium">{q}</div>
      <div className="mt-2 text-sm text-[#0A2F1F]/80">{a}</div>
    </div>
  );
}

專屬於少數的尊榮體驗

VIP 專屬權益

VIP 服務方案

包包不是配件，是日常的盔甲。

專屬顧問聯繫

進階設定