Cyberpunk HUD Telemetry Pricing Matrix

1'use client';
2
3import React, { useState } from 'react';
4import { Terminal, ShieldCheck, Check, Cpu } from 'lucide-react';
5
6export default function CyberTelemetryPricing() {
7  const [currency, setCurrency] = useState<'USD' | 'INR'>('USD');
8  const [term, setTerm] = useState<'monthly' | 'yearly'>('monthly');
9
10  const symbol = currency === 'USD' ? '$' : '₹';
11  const rate = currency === 'USD' ? 1 : 80;
12  const discount = term === 'yearly' ? 0.75 : 1;
13
14  const nodes = [
15    { code: 'NODE-01', title: 'Single Core', price: Math.round(19 * rate * discount), specs: ['1 vCPU / 2GB RAM', '25GB NVMe Storage', '1TB Egress', 'Basic Firewall'] },
16    { code: 'NODE-02', title: 'Dual Edge', price: Math.round(49 * rate * discount), specs: ['2 vCPU / 8GB RAM', '100GB NVMe Storage', '5TB Egress', 'DDoS Mitigation'] },
17    { code: 'NODE-03', title: 'Quad Cluster', price: Math.round(99 * rate * discount), active: true, specs: ['4 vCPU / 16GB RAM', '250GB NVMe Storage', '15TB Egress', 'Global Edge WAF'] },
18    { code: 'NODE-04', title: 'Titan Matrix', price: Math.round(249 * rate * discount), specs: ['16 vCPU / 64GB RAM', '1TB NVMe Storage', 'Unlimited Egress', 'Dedicated VPC Tunnel'] }
19  ];
20
21  return (
22    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 font-mono select-none">
23      {/* Section Header */}
24      <div className="flex flex-col items-center text-center mb-8">
25        <div className="flex items-center gap-2 rounded-xl border border-cyan-500/30 bg-slate-950 px-3 py-1 text-xs text-cyan-400">
26          <Cpu className="h-4 w-4 text-cyan-400" />
27          <span>SYS // TELEMETRY PRICING MATRIX</span>
28        </div>
29        <h2 className="text-xl sm:text-2xl font-bold text-cyan-300 mt-2">
30          COMPUTE & NODE INFRASTRUCTURE TIER
31        </h2>
32      </div>
33
34      <div className="flex flex-col items-center gap-4 mb-8">
35        <div className="flex flex-wrap items-center justify-center gap-3 rounded-2xl border border-cyan-500/30 bg-slate-950 p-3 shadow-[0_0_20px_rgba(6,182,212,0.15)]">
36          <div className="flex items-center gap-1.5 text-xs text-cyan-400">
37            <Terminal className="h-4 w-4" />
38            <span>METRICS //</span>
39          </div>
40          <div className="flex gap-1 text-xs">
41            <button
42              onClick={() => setCurrency('USD')}
43              className={`flex items-center gap-1 px-3 py-1 rounded-lg border transition ${currency === 'USD' ? 'border-cyan-400 bg-cyan-500/20 text-cyan-300 font-bold' : 'border-cyan-500/20 text-slate-400'}`}
44            >
45              {currency === 'USD' && <Check className="h-3 w-3" />}
46              <span>USD ($)</span>
47            </button>
48            <button
49              onClick={() => setCurrency('INR')}
50              className={`flex items-center gap-1 px-3 py-1 rounded-lg border transition ${currency === 'INR' ? 'border-cyan-400 bg-cyan-500/20 text-cyan-300 font-bold' : 'border-cyan-500/20 text-slate-400'}`}
51            >
52              {currency === 'INR' && <Check className="h-3 w-3" />}
53              <span>INR (₹)</span>
54            </button>
55          </div>
56          <div className="h-4 w-px bg-cyan-500/30 mx-1" />
57          <div className="flex gap-1 text-xs">
58            <button
59              onClick={() => setTerm('monthly')}
60              className={`flex items-center gap-1 px-3 py-1 rounded-lg border transition ${term === 'monthly' ? 'border-cyan-400 bg-cyan-500/20 text-cyan-300 font-bold' : 'border-cyan-500/20 text-slate-400'}`}
61            >
62              {term === 'monthly' && <Check className="h-3 w-3" />}
63              <span>MONTHLY</span>
64            </button>
65            <button
66              onClick={() => setTerm('yearly')}
67              className={`flex items-center gap-1 px-3 py-1 rounded-lg border transition ${term === 'yearly' ? 'border-cyan-400 bg-cyan-500/20 text-cyan-300 font-bold' : 'border-cyan-500/20 text-slate-400'}`}
68            >
69              {term === 'yearly' && <Check className="h-3 w-3" />}
70              <span>YEARLY [-25%]</span>
71            </button>
72          </div>
73        </div>
74      </div>
75
76      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
77        {nodes.map((n, i) => (
78          <div
79            key={i}
80            className={`rounded-2xl border bg-slate-950 p-6 min-h-[460px] flex flex-col justify-between shadow-[0_0_20px_rgba(6,182,212,0.1)] ${
81              n.active ? 'border-cyan-400 shadow-[0_0_30px_rgba(6,182,212,0.25)] scale-[1.02]' : 'border-cyan-500/30'
82            }`}
83          >
84            <div>
85              <div className="flex items-center justify-between text-xs text-cyan-500">
86                <span>{n.code}</span>
87                {n.active && <span className="text-[10px] bg-cyan-500/20 border border-cyan-400 text-cyan-300 px-2 py-0.5 rounded font-bold">RECOMMENDED</span>}
88              </div>
89              <h3 className="text-lg font-bold text-slate-100 mt-2">{n.title}</h3>
90              <div className="mt-4 flex items-baseline gap-1">
91                <span className="text-3xl font-bold text-cyan-300">{symbol}{n.price.toLocaleString()}</span>
92                <span className="text-xs text-slate-500">/{term === 'monthly' ? 'mo' : 'yr'}</span>
93              </div>
94              <div className="mt-6 space-y-2 border-t border-cyan-500/20 pt-4 text-xs text-slate-300">
95                {n.specs.map((s, idx) => (
96                  <div key={idx} className="flex items-center gap-2">
97                    <ShieldCheck className="h-3.5 w-3.5 text-cyan-400 shrink-0" />
98                    <span>{s}</span>
99                  </div>
100                ))}
101              </div>
102            </div>
103            <button className="mt-8 w-full rounded-xl border border-cyan-500/40 bg-cyan-950/40 hover:bg-cyan-500/20 py-3 text-xs font-bold text-cyan-300 transition">
104              DEPLOY {n.code}
105            </button>
106          </div>
107        ))}
108      </div>
109    </div>
110  );
111}