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: [
      "7-day trial with 4 strategic symbols (US30, S&P500, XAUUSD, BTCUSD)",
      "Access to MRZ zones (MRZ1 – MRZ5)",
      "Basic LUMIR-RT alerts",
      "Daily market snapshot reports",
      "Workspace access: drawing tools, personal notes, trade journal",
      "Access to standard performance reports and trade management tools"
    ],
    color: "border-blue-400",
  },
  {
    name: "Pro",
    price: "$249/mo",
    features: [
      "All features from Standard plan",
      "Real-time advanced alerts from LUMIR-RT",
      "Behavioral DNA Mapping (trader behavior analysis)",
      "Elite Trader 3-phase learning path",
      "Behavior logbook with personalized trading insights",
      "Access to enhanced workspace analytics tools"
    ],
    color: "border-purple-500",
  },
  {
    name: "Premium",
    price: "$499/mo",
    features: [
      "All features from Pro plan",
      "Sector/Market-group level analysis and alerts",
      "Multi-timeframe strategic interface",
      "1-on-1 coaching and live support",
      "Custom symbol zone request priority",
      "Full workspace + team collaboration integration"
    ],
    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 Platform</h1>
        <p className="text-lg text-gray-300">
          Designed for traders who demand precision. LUMIR reveals high-probability zones and behaviors – empowering data-backed decisions over risky predictions.
        </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">Start Free Trial</Button>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="max-w-4xl mx-auto mt-20 text-center">
        <h3 className="text-2xl font-semibold mb-4">LUMIR Intelligence Core Tools</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">
              The Multi-Zone Reaction system (MRZ1–MRZ5) defines strategic price areas with high probability of reversal or breakout. Avoid randomness – trade in zones that matter.
            </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">
              Real-time alerts based on market reactions near zones. Detect behaviors – not guess directions. React when edge aligns, stay out when it doesn’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">
              Every trader has behavioral fingerprints. DNA Map helps decode your strengths, blind spots, and decisions – so you can grow with clarity.
            </p>
          </div>
        </div>
      </div>

      <div className="mt-16 text-center text-sm text-gray-500">
        © 2025 BeQ Holdings. All rights reserved. Contact: [email protected]
      </div>
    </div>
  );
}