Untitled

import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, ShieldCheck, TrendingUp } from "lucide-react";

const plans = [
  {
    name: "Standard",
    price: "$99/mo",
    features: [
      "Dùng thử 7 ngày với 4 symbol chiến lược (US30, S&P500, XAUUSD, BTCUSD)",
      "Truy cập vùng MRZ cơ bản (MRZ1 – MRZ5)",
      "Cảnh báo LUMIR-RT và MRZ theo thời gian thực",
      "Báo cáo thị trường hàng ngày",
      "Công cụ vẽ vùng, ghi chú và quản lý kế hoạch giao dịch"
    ],
    color: "border-blue-400",
  },
  {
    name: "Pro",
    price: "$249/mo",
    features: [
      "Toàn bộ tính năng của gói Standard",
      "Cảnh báo nâng cao theo DNA giao dịch cá nhân",
      "Hệ thống bản đồ hành vi (DNA Map)",
      "Huấn luyện 3 giai đoạn trở thành Trader Elite",
      "Cảnh báo AI hành vi phản ứng thị trường",
      "Phân tích hành vi để tăng xác suất giao dịch hiệu quả từng ngày",
      "Ưu tiên phản hồi & khuyến nghị chiến lược theo cá nhân hóa"
    ],
    color: "border-purple-500",
  },
  {
    name: "Premium",
    price: "$499/mo",
    features: [
      "Toàn bộ tính năng của gói Pro",
      "Phân tích nâng cao theo ngành và nhóm thị trường",
      "Giao diện phân tích đa khung thời gian và vùng chiến lược",
      "Tư vấn trực tiếp & coaching cá nhân hóa",
      "Ưu tiên cập nhật symbol mới theo yêu cầu",
      "Tham gia workshop chiến lược chuyên sâu hàng tháng"
    ],
    color: "border-yellow-500",
  },
];

export default function LumirLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-950 to-gray-900 text-white px-6 py-10">
      <div className="max-w-5xl mx-auto text-center mb-12">
        <h1 className="text-4xl font-bold mb-4">LUMIR Trading Intelligence</h1>
        <p className="text-lg text-gray-300">
          Công cụ phân tích hành vi và cảnh báo vùng giá theo thời gian thực – giúp trader ra quyết định dựa trên xác suất, không cảm tính.
        </p>
      </div>

      <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        {plans.map((plan, index) => (
          <Card key={index} className={`bg-gray-800 text-white border-2 hover:shadow-xl transition ${plan.color}`}>
            <CardContent className="p-6">
              <h2 className="text-2xl font-semibold mb-2">{plan.name}</h2>
              <p className="text-3xl font-bold mb-4">{plan.price}</p>
              <ul className="space-y-2 text-left text-sm">
                {plan.features.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <CheckCircle className="w-4 h-4 text-green-400 mt-1" /> {feature}
                  </li>
                ))}
              </ul>
              <Button className="mt-6 w-full bg-white text-black hover:bg-gray-200">Dùng thử ngay</Button>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="max-w-4xl mx-auto mt-20 text-center">
        <h3 className="text-2xl font-semibold mb-4">Công cụ nổi bật</h3>
        <div className="grid md:grid-cols-3 gap-6 text-left">
          <div>
            <ShieldCheck className="w-6 h-6 text-teal-400 mb-2" />
            <h4 className="font-bold mb-1">LUMIR-MRZ</h4>
            <p className="text-sm text-gray-400">
              Cảnh báo vùng giá phản ứng (MRZ1–MRZ5), xác suất đảo chiều và vùng rủi ro – giúp bạn hành động chính xác tại những vùng đáng giá.
            </p>
          </div>
          <div>
            <TrendingUp className="w-6 h-6 text-orange-400 mb-2" />
            <h4 className="font-bold mb-1">LUMIR-RT</h4>
            <p className="text-sm text-gray-400">
              Hệ thống theo dõi phản ứng tại vùng chiến lược. Không dự đoán – chỉ hành động khi xác suất đủ lớn được xác nhận bởi dữ liệu thực tế.
            </p>
          </div>
          <div>
            <ShieldCheck className="w-6 h-6 text-pink-400 mb-2" />
            <h4 className="font-bold mb-1">DNA MAP</h4>
            <p className="text-sm text-gray-400">
              Phân tích hành vi giao dịch, cảnh báo cá nhân hóa theo phong cách và sai lầm lặp lại của từng trader – như một "gương phản chiếu" chính xác.
            </p>
          </div>
        </div>
      </div>

      <div className="mt-16 text-center text-sm text-gray-500">
        © 2025 BeQ Holdings. Đã đăng ký bản quyền. Liên hệ: [email protected]
      </div>
    </div>
  );
}