Luxury Serif Editorial Pricing

1'use client';
2
3import React, { useState } from 'react';
4import { Award, Check } from 'lucide-react';
5
6export default function LuxuryEditorialPricing() {
7  const [curr, setCurr] = useState<'USD' | 'INR'>('USD');
8  const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly');
9
10  const sym = curr === 'USD' ? '$' : '₹';
11  const scale = curr === 'USD' ? 1 : 80;
12  const disc = billing === 'yearly' ? 0.85 : 1;
13
14  const tiers = [
15    { title: 'Essential', price: Math.round(29 * scale * disc), desc: 'Curated toolkit for aesthetic web projects.', features: ['Access to core UI catalog', 'Single commercial license', 'Standard documentation'] },
16    { title: 'Professional', price: Math.round(59 * scale * disc), desc: 'Complete library for modern app developers.', features: ['Full component source code', 'Multi-project license', 'Figma design tokens', 'Community Discord'] },
17    { title: 'Executive', price: Math.round(99 * scale * disc), highlight: true, desc: 'Complete design engine for modern teams.', features: ['Unlimited commercial use', 'Direct engineering support', 'Priority component requests', '24/7 dedicated assistance'] },
18    { title: 'Bespoke Enterprise', price: Math.round(249 * scale * disc), desc: 'Tailored components & custom integrations.', features: ['Custom component builds', 'Unlimited team seats', 'Dedicated UI consultant', 'Custom SLA contract'] }
19  ];
20
21  return (
22    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 select-none">
23      {/* Section Header */}
24      <div className="flex flex-col items-center text-center mb-8">
25        <span className="rounded-full bg-amber-50 dark:bg-amber-950/60 border border-amber-200 dark:border-amber-800 px-3.5 py-1 text-[11px] font-bold text-amber-600 dark:text-amber-400 uppercase tracking-widest">
26          EDITORIAL PRICING
27        </span>
28        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-3 tracking-tight font-serif italic">
29          An Investment in Product Excellence
30        </h2>
31      </div>
32
33      <div className="flex flex-col items-center gap-4 mb-8">
34        <div className="flex items-center gap-3 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-2 shadow-lg">
35          <div className="flex items-center gap-1">
36            <button
37              onClick={() => setCurr('USD')}
38              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-xl transition ${curr === 'USD' ? 'bg-amber-500 text-white shadow-xs' : 'text-slate-500'}`}
39            >
40              {curr === 'USD' && <Check className="h-3 w-3" />}
41              <span>USD ($)</span>
42            </button>
43            <button
44              onClick={() => setCurr('INR')}
45              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-xl transition ${curr === 'INR' ? 'bg-amber-500 text-white shadow-xs' : 'text-slate-500'}`}
46            >
47              {curr === 'INR' && <Check className="h-3 w-3" />}
48              <span>INR (₹)</span>
49            </button>
50          </div>
51
52          <div className="h-4 w-px bg-slate-200 dark:border-slate-800" />
53
54          <div className="flex items-center gap-1">
55            <button
56              onClick={() => setBilling('monthly')}
57              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-xl transition ${billing === 'monthly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'text-slate-500'}`}
58            >
59              {billing === 'monthly' && <Check className="h-3 w-3" />}
60              <span>Monthly</span>
61            </button>
62            <button
63              onClick={() => setBilling('yearly')}
64              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-xl transition ${billing === 'yearly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'text-slate-500'}`}
65            >
66              {billing === 'yearly' && <Check className="h-3 w-3" />}
67              <span>Yearly (-15%)</span>
68            </button>
69          </div>
70        </div>
71      </div>
72
73      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
74        {tiers.map((t, idx) => (
75          <div
76            key={idx}
77            className={`rounded-3xl border p-6 min-h-[460px] flex flex-col justify-between shadow-xl transition-all ${
78              t.highlight
79                ? 'border-amber-500/80 bg-slate-900 text-white shadow-amber-500/10 scale-[1.02]'
80                : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100'
81            }`}
82          >
83            <div>
84              <div className="flex items-center justify-between">
85                <h3 className="text-base font-extrabold tracking-tight">{t.title}</h3>
86                {t.highlight && (
87                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-amber-500/20 text-amber-400">
88                    <Award className="h-4 w-4" />
89                  </span>
90                )}
91              </div>
92              <p className={`text-xs mt-1 min-h-[32px] ${t.highlight ? 'text-slate-400' : 'text-slate-500 dark:text-slate-400'}`}>{t.desc}</p>
93              <div className="mt-5 flex items-baseline gap-1">
94                <span className="text-3xl font-black">{sym}{t.price.toLocaleString()}</span>
95                <span className={`text-xs ${t.highlight ? 'text-slate-400' : 'text-slate-400'}`}>/{billing === 'monthly' ? 'mo' : 'yr'}</span>
96              </div>
97              <div className={`mt-6 space-y-2.5 border-t pt-4 text-xs ${t.highlight ? 'border-slate-800 text-slate-300' : 'border-slate-100 dark:border-slate-800 text-slate-700 dark:text-slate-300'}`}>
98                {t.features.map((f, i) => (
99                  <div key={i} className="flex items-center gap-2">
100                    <Check className={`h-3.5 w-3.5 shrink-0 ${t.highlight ? 'text-amber-400' : 'text-amber-500'}`} />
101                    <span>{f}</span>
102                  </div>
103                ))}
104              </div>
105            </div>
106            <button
107              className={`mt-8 w-full rounded-2xl py-3 text-xs font-extrabold transition shadow-md ${
108                t.highlight
109                  ? 'bg-amber-500 hover:bg-amber-600 text-slate-950'
110                  : 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-200'
111              }`}
112            >
113              Select {t.title}
114            </button>
115          </div>
116        ))}
117      </div>
118    </div>
119  );
120}