import React, { useState } from 'react'; import { Check, Star, Zap, Crown, Layout, List, Grid, Monitor, Award, TrendingUp, Sparkles, X, MessageCircle, Send, Loader2 } from 'lucide-react'; const pricingData = [ { id: 1, name: "GÓI 1", title: "TOP BANNER TRANG CHỦ", subtitle: "(Lớn Nhất)", price: "5.000.000 Đ", position: 1, features: [ "Đăng 100 web chuyên BĐS + 200 hội nhóm Zalo, FB...", "Hỗ trợ chạy ads tiếp cận >10k KH tiềm năng", "Lượng khách phản hồi 25-40 người / ngày" ], highlight: true }, { id: 2, name: "GÓI 2", title: "TOP BANNER ĐẦU TRANG", subtitle: "", price: "3.500.000 Đ", position: 2, features: [ "Đăng 80 web chuyên BĐS + 150 hội nhóm Zalo, FB...", "Hỗ trợ chạy ads tiếp cận >7k KH tiềm năng", "Lượng khách phản hồi 20-30 người / ngày" ], highlight: true }, { id: 3, name: "GÓI 3", title: "TOP BANNER TRANG CHI TIẾT", subtitle: "", price: "2.500.000 Đ", position: 3, features: [ "Đăng 70 web chuyên BĐS + 120 hội nhóm Zalo, FB...", "Hỗ trợ chạy ads tiếp cận >5k KH tiềm năng", "Lượng khách phản hồi 15-25 người / ngày" ], highlight: true }, { id: 4, name: "GÓI 4", title: "BANNER CỘT PHẢI", subtitle: "", price: "2.000.000 Đ", position: 4, features: [ "Đăng 60 web chuyên BĐS + 100 hội nhóm Zalo, FB...", "Đẩy tin 5 lần / ngày", "Hỗ trợ tư vấn khách miễn phí" ], highlight: false }, { id: 5, name: "GÓI 5", title: "TIN NỔI BẬT", subtitle: "(Ưu tiên)", price: "1.600.000 Đ", position: 5, features: [ "Đăng 60 web chuyên BĐS + 80 hội nhóm Zalo, FB...", "Đẩy tin 5 lần / ngày", "Hỗ trợ tư vấn khách miễn phí" ], highlight: false }, { id: 6, name: "GÓI 6", title: "TOP BANNER GIỮA TRANG", subtitle: "", price: "1.300.000 Đ", position: 6, features: [ "Đăng 50 web chuyên BĐS + 50-100 hội nhóm Zalo, FB...", "Hỗ trợ chạy ads tiếp cận >2k KH tiềm năng", "Lượng khách phản hồi 5-15 người / ngày" ], highlight: false }, { id: 7, name: "GÓI 7", title: "TOP BANNER CHÂN TRANG", subtitle: "", price: "1.000.000 Đ", position: 7, features: [ "Đăng 50 web chuyên BĐS + 50-100 hội nhóm Zalo, FB...", "Hỗ trợ chạy ads tiếp cận >1k KH tiềm năng", "Lượng khách phản hồi 5-10 người / ngày" ], highlight: false }, { id: 8, name: "GÓI 8", title: "TOP BANNER BÊN TRÁI", subtitle: "", price: "700.000 Đ", position: 8, features: [ "Đăng 40 web chuyên BĐS + 50 hội nhóm Zalo, FB...", "Đẩy tin 3 lần / ngày", "Hỗ trợ tư vấn khách miễn phí" ], highlight: false }, { id: 9, name: "GÓI 9", title: "TIN VIP ĐẶC BIỆT", subtitle: "", price: "500.000 Đ", position: 9, features: [ "Đăng 40 web chuyên BĐS + 40 hội nhóm Zalo, FB...", "Đẩy tin 3 lần / ngày", "Hỗ trợ tư vấn khách miễn phí" ], highlight: false }, { id: 10, name: "GÓI 10", title: "TIN VIP", subtitle: "", price: "300.000 Đ", position: 10, features: [ "Đăng 40 web chuyên BĐS + 30 hội nhóm Zalo, FB...", "Đẩy tin 3 lần / ngày", "Hỗ trợ tư vấn khách miễn phí" ], highlight: false } ]; // --- AI COMPONENT: Gemini Consultant --- const AIConsultant = ({ isOpen, onClose }) => { const [query, setQuery] = useState(''); const [response, setResponse] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleConsult = async () => { if (!query.trim()) return; setLoading(true); setError(null); setResponse(null); const apiKey = ""; // Provided by environment const systemPrompt = ` Bạn là một chuyên gia tư vấn bán hàng cho dịch vụ quảng cáo bất động sản. Dưới đây là danh sách các gói dịch vụ (định dạng JSON): ${JSON.stringify(pricingData)} Nhiệm vụ của bạn là dựa trên nhu cầu của khách hàng (ngân sách, mục tiêu, loại sản phẩm cần bán), hãy đề xuất 1 hoặc 2 gói phù hợp nhất. Hãy phân tích ngắn gọn tại sao họ nên chọn gói đó. Tính toán sơ bộ hiệu quả (ví dụ: số khách tiềm năng) nếu có thể. Giọng điệu: Chuyên nghiệp, nhiệt tình, thuyết phục, ngắn gọn (dưới 150 từ). Dùng emoji để thân thiện hơn. Nếu khách hàng hỏi điều gì không liên quan đến chọn gói, hãy lịch sự lái họ về việc chọn dịch vụ. `; try { const result = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ contents: [{ parts: [{ text: `Khách hàng hỏi: "${query}"` }] }], systemInstruction: { parts: [{ text: systemPrompt }] } }) }); if (!result.ok) throw new Error('Failed to fetch from Gemini'); const data = await result.json(); const text = data.candidates?.[0]?.content?.parts?.[0]?.text || "Xin lỗi, tôi chưa thể phân tích lúc này. Vui lòng thử lại sau."; setResponse(text); } catch (err) { setError("Có lỗi kết nối. Vui lòng thử lại."); } finally { setLoading(false); } }; if (!isOpen) return null; return (

); }; // --- MẪU 1: Modern Minimalist --- const ModernClean = ({ data }) => (

); // --- MẪU 2: Luxury Gold --- const LuxuryGold = ({ data }) => (

); // --- MẪU 3: Tech Dark --- const TechDark = ({ data }) => (

); // --- MẪU 4: Colorful Grid --- const ColorfulGrid = ({ data }) => { const colors = [ { bg: 'bg-red-50', border: 'border-red-200', text: 'text-red-700', btn: 'bg-red-600' }, { bg: 'bg-orange-50', border: 'border-orange-200', text: 'text-orange-700', btn: 'bg-orange-600' }, { bg: 'bg-amber-50', border: 'border-amber-200', text: 'text-amber-700', btn: 'bg-amber-600' }, { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-700', btn: 'bg-green-600' }, { bg: 'bg-emerald-50', border: 'border-emerald-200', text: 'text-emerald-700', btn: 'bg-emerald-600' }, { bg: 'bg-teal-50', border: 'border-teal-200', text: 'text-teal-700', btn: 'bg-teal-600' }, { bg: 'bg-cyan-50', border: 'border-cyan-200', text: 'text-cyan-700', btn: 'bg-cyan-600' }, { bg: 'bg-sky-50', border: 'border-sky-200', text: 'text-sky-700', btn: 'bg-sky-600' }, { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-700', btn: 'bg-blue-600' }, { bg: 'bg-indigo-50', border: 'border-indigo-200', text: 'text-indigo-700', btn: 'bg-indigo-600' }, ]; return (

); }; // --- MẪU 5: Classic Enhanced Table --- const ClassicTable = ({ data }) => (

); export default function PricingDesigns() { const [activeTab, setActiveTab] = useState('modern'); const [isAIConsultantOpen, setIsAIConsultantOpen] = useState(false); const tabs = [ { id: 'modern', label: 'Hiện đại', icon: Layout, color: 'bg-blue-600' }, { id: 'luxury', label: 'Sang trọng', icon: Crown, color: 'bg-amber-600' }, { id: 'tech', label: 'Công nghệ', icon: Monitor, color: 'bg-cyan-600' }, { id: 'colorful', label: 'Màu sắc', icon: Grid, color: 'bg-pink-600' }, { id: 'table', label: 'Bảng chi tiết', icon: List, color: 'bg-gray-700' }, ]; return (

); }