'use client';
import { useState } from 'react';
import { Icon } from '@/lib/icons';
import { useGo } from '@/lib/router';

const PLANS = [
  {
    key: 'free',
    name: 'Découverte',
    m: 0,
    y: 0,
    tag: 'Pour démarrer',
    desc: 'Référencez votre commerce gratuitement.',
    feats: ['Fiche commerce publique', 'Jusqu’à 5 photos', 'Coordonnées & horaires', 'Avis clients', 'Statistiques de base'],
    cta: 'Commencer gratuitement',
    accent: false,
  },
  {
    key: 'pro',
    name: 'Pro',
    m: 2900,
    y: 2400,
    tag: 'Le plus choisi',
    desc: 'Recevez des réservations en ligne 24/7.',
    feats: [
      'Tout Découverte, plus :',
      'Réservations en ligne illimitées',
      'Photos illimitées + menu',
      'Badge « Vérifié »',
      'Statistiques avancées',
      'Réponse aux avis',
    ],
    cta: 'Choisir Pro',
    accent: true,
  },
  {
    key: 'prem',
    name: 'Premium',
    m: 6900,
    y: 5900,
    tag: 'Croissance',
    desc: 'Maximisez votre visibilité et vos ventes.',
    feats: [
      'Tout Pro, plus :',
      'Mise en avant dans les résultats',
      'Campagnes promotionnelles',
      'Multi-établissements',
      'Gestionnaire de compte dédié',
      'Export & API',
    ],
    cta: 'Choisir Premium',
    accent: false,
  },
];

const FAQ: [string, string][] = [
  ['Puis-je changer d’offre à tout moment ?', 'Oui, vous pouvez passer à une offre supérieure ou inférieure quand vous le souhaitez, sans frais. Le prorata est calculé automatiquement.'],
  ['Y a-t-il un engagement ?', 'Aucun engagement sur l’offre mensuelle. L’offre annuelle vous fait économiser jusqu’à 17 % en échange d’un paiement annuel.'],
  ['Comment sont facturées les réservations ?', 'Les réservations via Darsouk sont incluses dans votre abonnement — aucune commission par couvert sur les offres Pro et Premium.'],
  ['Quels moyens de paiement acceptez-vous ?', 'Carte CIB / Edahabia, virement bancaire, et bientôt paiement mobile. La facturation est en dinar algérien (DA).'],
];

export default function PricingPage() {
  const { go } = useGo();
  const [annual, setAnnual] = useState(true);
  const [open, setOpen] = useState(0);
  return (
    <div className="wrap section">
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
        <div className="eyebrow">Darsouk Pro</div>
        <h1 className="h1" style={{ marginTop: 10 }}>
          Développez votre commerce<br />avec Darsouk.
        </h1>
        <p className="lead" style={{ marginTop: 14 }}>
          Des milliers de clients cherchent une adresse comme la vôtre chaque jour à Alger. Choisissez l’offre qui vous correspond — sans commission cachée.
        </p>
        <div className="seg" style={{ marginTop: 22 }}>
          <button className={!annual ? 'on' : ''} onClick={() => setAnnual(false)}>Mensuel</button>
          <button className={annual ? 'on' : ''} onClick={() => setAnnual(true)}>
            Annuel <span style={{ color: 'var(--teal)', fontWeight: 700 }}>−17%</span>
          </button>
        </div>
      </div>

      <div className="plans" style={{ marginTop: 36 }}>
        {PLANS.map((p) => (
          <div key={p.key} className={'plan ' + (p.accent ? 'feat' : '')}>
            {p.accent && (
              <div
                style={{
                  position: 'absolute',
                  top: -13,
                  left: '50%',
                  transform: 'translateX(-50%)',
                  background: 'var(--red)',
                  color: '#fff',
                  fontWeight: 700,
                  fontSize: 12,
                  padding: '5px 14px',
                  borderRadius: 999,
                }}
              >
                {p.tag}
              </div>
            )}
            {!p.accent && <div className="small" style={{ fontWeight: 600 }}>{p.tag}</div>}
            <div className="h3" style={{ marginTop: p.accent ? 6 : 2 }}>{p.name}</div>
            <div className="row" style={{ alignItems: 'flex-end', gap: 6, marginTop: 6 }}>
              <span className="price">{(annual ? p.y : p.m).toLocaleString('fr-FR')}</span>
              <span className="small" style={{ marginBottom: 8 }}>{p.m === 0 ? 'DA' : 'DA / mois'}</span>
            </div>
            <div className="tiny" style={{ minHeight: 16 }}>
              {p.m !== 0 && annual ? 'facturé annuellement' : p.m !== 0 ? 'sans engagement' : 'pour toujours'}
            </div>
            <p className="body" style={{ marginTop: 6 }}>{p.desc}</p>
            <button
              className={'btn btn-block ' + (p.accent ? 'btn-red' : 'btn-ghost')}
              style={{ marginTop: 14 }}
              onClick={() => go(p.key === 'free' ? 'auth' : 'pro')}
            >
              {p.cta}
            </button>
            <div style={{ height: 1, background: 'var(--line2)', margin: '18px 0' }}></div>
            <div className="grid" style={{ gap: 11 }}>
              {p.feats.map((ft, i) => (
                <div key={i} className="plan-feat">
                  {i === 0 && p.key !== 'free' ? (
                    <Icon name="sparkles" size={17} className="pi" style={{ color: 'var(--red)' }} />
                  ) : (
                    <Icon name="check" size={17} stroke={2.5} className="pi" />
                  )}
                  <span
                    style={{
                      fontWeight: i === 0 && p.key !== 'free' ? 700 : 500,
                      color: i === 0 && p.key !== 'free' ? 'var(--ink)' : 'var(--sub)',
                    }}
                  >
                    {ft}
                  </span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="tiny" style={{ textAlign: 'center', marginTop: 18 }}>
        Tous les prix sont en dinar algérien (DA), hors taxes. Paiement CIB / Edahabia.
      </div>

      <div style={{ maxWidth: 720, margin: '52px auto 0' }}>
        <h2 className="h2" style={{ textAlign: 'center', marginBottom: 18 }}>Questions fréquentes</h2>
        {FAQ.map((q, i) => (
          <div key={i} className="faq-item" onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="between">
              <span className="h4">{q[0]}</span>
              <Icon name={open === i ? 'minus' : 'plus'} size={18} stroke={2} style={{ color: 'var(--muted)', flexShrink: 0 }} />
            </div>
            {open === i && <p className="body" style={{ marginTop: 12 }}>{q[1]}</p>}
          </div>
        ))}
      </div>

      <div className="pro-band" style={{ marginTop: 44, justifyContent: 'center', textAlign: 'center', flexDirection: 'column' }}>
        <h2 className="h2" style={{ color: '#fff' }}>Prêt à attirer plus de clients ?</h2>
        <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 15, maxWidth: 460 }}>
          Créez votre fiche en 5 minutes. Essayez Pro gratuitement pendant 30 jours.
        </p>
        <button className="btn btn-red btn-lg" onClick={() => go('auth', { mode: 'signup' })}>
          Référencer mon commerce
        </button>
      </div>
    </div>
  );
}