'use client';

import React from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';

export default function MembershipPage() {
  const { t } = useLanguage();

  const tiers = [
    { nameKey: 'membership.silver', icon: '🥈', badge: null, color: 'from-grey to-grey-dark', requirementsKey: 'membership.free', benefits: ['Poin 1x per Rp 10.000', 'Birthday discount 10%', 'Member discount 5%', 'Free konsultasi dokter 1x/tahun'], ctaKey: 'membership.register' },
    { nameKey: 'membership.gold', icon: '🥇', badge: '⭐ BEST SELLER', color: 'from-gold to-gold-soft', requirementsKey: 'membership.gold.req', benefits: ['Poin 1.5x per Rp 10.000', 'Birthday discount 20%', 'Member discount 10%', 'Priority booking', 'Free 1x Basic Facial/tahun'], ctaKey: 'membership.register' },
    { nameKey: 'membership.platinum', icon: '💎', badge: null, color: 'from-gold to-espresso', requirementsKey: 'membership.platinum.req', benefits: ['Poin 2x per Rp 10.000', 'Birthday discount 30% + free treatment', 'Member discount 15%', 'VIP treatment room', 'Personal beauty consultant'], ctaKey: 'membership.register' },
  ];

  const pointRedemption = [
    { points: '100 poin', value: 'Voucher Rp 10.000' }, { points: '500 poin', value: '1x Basic Facial' }, { points: '1.000 poin', value: '1x Glow Facial' }, { points: '2.000 poin', value: '1x Brightening Laser' }, { points: '5.000 poin', value: '1x Anti-Aging Package' }, { points: '10.000 poin', value: 'Carla Beauty Hampers' },
  ];

  const memberTestimonials = [
    { text: '"Sejak jadi member Platinum, saya selalu merasa diperhatikan. Personal consultant saya selalu mengingatkan jadwal treatment dan memberikan rekomendasi yang tepat."', author: 'Kartika W.', tier: 'Member Platinum sejak 2023' },
    { text: '"Saya suka program referralnya! Saya sudah ajak 5 teman dan dapat free treatment. Benefitnya benar-benar worth it!"', author: 'Dewi S.', tier: 'Member Gold sejak 2024' },
  ];

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase">👑 {t('membership.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('membership.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase">
            <Link href="/" className="hover:text-gold transition">{t('breadcrumb.home')}</Link><span className="mx-2">/</span><span className="text-ivory/60">{t('breadcrumb.membership')}</span>
          </nav>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso text-center mb-12">{t('membership.choose')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {tiers.map((tier) => (
              <div key={tier.nameKey} className="card bg-white overflow-hidden hover:shadow-lg transition relative">
                {tier.badge && <div className="absolute top-4 right-4 bg-gold text-white text-xs font-bold px-3 py-1 rounded-full">{tier.badge}</div>}
                <div className={`bg-gradient-to-r ${tier.color} p-6 text-center text-white`}><div className="text-5xl mb-2">{tier.icon}</div><h3 className="font-cormorant text-3xl font-bold">{t(tier.nameKey)}</h3></div>
                <div className="p-6">
                  <p className="text-xs text-grey mb-4">{t(tier.requirementsKey)}</p>
                  <ul className="space-y-2 mb-6">{tier.benefits.map((b, idx) => (<li key={idx} className="flex items-start gap-2 text-sm text-espresso"><span className="text-gold mt-0.5">✅</span>{b}</li>))}</ul>
                  <Link href="/contact" className="btn-primary w-full text-center block">{t(tier.ctaKey)}</Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso text-center mb-12">💰 {t('membership.cara-kerja')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            {[{num:'1️⃣', key:'membership.poin-earn'},{num:'2️⃣', key:'membership.poin-save'},{num:'3️⃣', key:'membership.poin-redeem'}].map((item,i) => (
              <div key={i} className="text-center p-6"><div className="text-4xl mb-3">{item.num}</div><p className="text-sm text-espresso">{t(item.key)}</p></div>
            ))}
          </div>
          <div className="max-w-lg mx-auto">
            <h3 className="font-semibold text-lg text-espresso text-center mb-4">Penukaran Poin</h3>
            <div className="space-y-2">{pointRedemption.map((item, idx) => (<div key={idx} className="flex justify-between items-center p-3 bg-ivory rounded-lg"><span className="font-semibold text-gold">{item.points}</span><span className="text-sm text-espresso">{item.value}</span></div>))}</div>
            <p className="text-xs text-grey text-center mt-4">💡 {t('membership.poin.info')}</p>
          </div>
        </div>
      </section>

      <section className="bg-blush py-16">
        <div className="container-custom text-center">
          <h2 className="font-cormorant text-3xl font-bold text-espresso mb-8">📝 {t('membership.how')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            {[1,2,3,4].map((n) => (
              <div key={n} className="text-center p-6 bg-white rounded-lg"><p className="text-4xl mb-3">{['①','②','③','④'][n-1]}</p><p className="text-sm text-espresso">{t(`membership.how.${n}`)}</p></div>
            ))}
          </div>
          <div className="flex gap-4 justify-center"><Link href="/contact" className="btn-primary">📲 {t('membership.register')}</Link><Link href="/locations" className="btn-secondary">📍 {t('membership.find')}</Link></div>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-3xl font-bold text-espresso text-center mb-8">💬 {t('membership.testi.title')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {memberTestimonials.map((testimonial, idx) => (
              <div key={idx} className="card bg-white p-8 hover:shadow-lg transition">
                <p className="text-grey-dark italic mb-4">{testimonial.text}</p>
                <div className="flex items-center gap-3"><div className="w-10 h-10 bg-gold rounded-full flex items-center justify-center text-white font-bold">{testimonial.author[0]}</div>
                  <div><p className="font-semibold text-espresso text-sm">{testimonial.author}</p><p className="text-xs text-grey">{testimonial.tier}</p></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </main>
  );
}
