/* RINAU HEX — Cart Modal + Floating Quote Button */

const { useState: useStateC } = React;
const IC = window.RHX_ICONS;

function CartModal({ open, onClose }) {
  const { lang, cart, removeItem, clearCart } = window.useApp();
  const t = window.RHX.ui[lang].cart;
  const [step, setStep] = useStateC(1);
  const services = window.RHX.services;
  const selected = services.filter(s => cart.includes(s.id));

  if (!open) return null;

  const handleNext = () => setStep(s => Math.min(s+1, 3));
  const handleBack = () => setStep(s => Math.max(s-1, 1));
  const handleSend = () => { clearCart(); setStep(1); onClose(); };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div onClick={onClose} className="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div className="relative bg-white dark:bg-[#0A0F1A] border border-gray-200 dark:border-white/10 w-full max-w-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">

        {/* Header */}
        <div className="p-6 border-b border-gray-100 dark:border-white/10 bg-gray-50 dark:bg-[#0B132B] flex items-start justify-between">
          <div>
            <div className="font-mono text-[10px] text-[#14B8A6] tracking-widest uppercase mb-2">// {t.title}</div>
            <h2 className="font-display font-medium text-xl text-gray-900 dark:text-white tracking-tight">{t.steps[step-1]}</h2>
            <div className="flex gap-1.5 mt-3">
              {[1,2,3].map(s=>(
                <div key={s} className={`h-1 w-12 transition-colors ${step>=s?'bg-[#14B8A6]':'bg-gray-200 dark:bg-white/10'}`}></div>
              ))}
              <span className="ml-3 font-mono text-[10px] text-gray-500 tracking-widest">{t.step} {step}/3</span>
            </div>
          </div>
          <button onClick={onClose} className="p-2 text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
            <IC.X size={20}/>
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto p-7">
          {step===1 && (
            selected.length===0 ? (
              <div className="text-center py-16 text-gray-500 dark:text-gray-500 text-sm">{t.empty}</div>
            ) : (
              <div className="space-y-3">
                {selected.map(s=>{
                  const Icon = IC[s.icon] || IC.Layers;
                  return (
                    <div key={s.id} className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-[#0B132B] border border-gray-100 dark:border-white/10">
                      <div className="w-10 h-10 border border-[#14B8A6]/30 text-[#14B8A6] flex items-center justify-center shrink-0">
                        <Icon size={16}/>
                      </div>
                      <div className="flex-1 min-w-0">
                        <h4 className="font-display font-medium text-sm text-gray-900 dark:text-white">{s.title[lang]}</h4>
                        <p className="text-[11px] text-gray-500 dark:text-gray-500 line-clamp-1 mt-0.5">{s.description[lang]}</p>
                      </div>
                      <button onClick={()=>removeItem(s.id)} className="p-2 text-[#EF4444] hover:bg-[#EF4444]/10 transition-colors">
                        <IC.Trash size={16}/>
                      </button>
                    </div>
                  );
                })}
              </div>
            )
          )}

          {step===2 && (
            <div className="grid md:grid-cols-2 gap-5">
              <CartField label={t.labels.name}/>
              <CartField label={t.labels.email} type="email"/>
              <CartField label={t.labels.phone} full type="tel"/>
            </div>
          )}

          {step===3 && (
            <div className="space-y-5">
              <CartField label={t.labels.org} full/>
              <div className="space-y-2">
                <label className="font-mono text-[10px] text-gray-500 uppercase tracking-widest">{t.labels.msg}</label>
                <textarea rows={5} className="w-full p-4 bg-gray-50 dark:bg-[#0B132B] border border-gray-200 dark:border-white/10 text-sm text-gray-900 dark:text-white focus:border-[#14B8A6] outline-none resize-none transition-colors"></textarea>
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-6 border-t border-gray-100 dark:border-white/10 bg-gray-50 dark:bg-[#0B132B] flex items-center justify-between gap-4">
          <button onClick={step===1?onClose:handleBack} className="inline-flex items-center gap-2 font-mono text-[11px] tracking-widest uppercase text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
            <IC.ArrowLeft size={14}/> {step===1 ? t.close : t.back}
          </button>
          <button
            disabled={step===1 && selected.length===0}
            onClick={step===3?handleSend:handleNext}
            className="inline-flex items-center gap-2.5 px-6 py-3.5 bg-[#14B8A6] hover:bg-[#0D9488] disabled:opacity-40 disabled:cursor-not-allowed text-white font-medium text-[11px] uppercase tracking-[0.18em] transition-colors">
            {step===3 ? t.send : t.next}
            {step===3 ? <IC.Send size={14}/> : <IC.ArrowRight size={14}/>}
          </button>
        </div>
      </div>
    </div>
  );
}
function CartField({label, type='text', full}){
  return (
    <div className={`space-y-2 ${full?'md:col-span-2':''}`}>
      <label className="font-mono text-[10px] text-gray-500 uppercase tracking-widest">{label}</label>
      <input type={type} className="w-full p-3.5 bg-gray-50 dark:bg-[#0B132B] border border-gray-200 dark:border-white/10 text-sm text-gray-900 dark:text-white focus:border-[#14B8A6] outline-none transition-colors"/>
    </div>
  );
}

/* ============== FLOATING QUOTE BUTTON ============== */
function FloatingQuote({ onClick, count }) {
  return (
    <button onClick={onClick} className="fixed bottom-6 right-6 z-40 group flex items-center gap-3 bg-[#14B8A6] hover:bg-[#0D9488] text-white px-5 py-4 shadow-2xl shadow-[#14B8A6]/30 transition-all hover:scale-105">
      <div className="relative">
        <IC.ShoppingCart size={18}/>
        {count > 0 && (
          <span className="absolute -top-2 -right-2 bg-[#EF4444] text-white text-[10px] font-bold w-5 h-5 rounded-full flex items-center justify-center font-mono">{count}</span>
        )}
      </div>
      <span className="hidden sm:inline font-medium text-[11px] uppercase tracking-[0.18em]">
        {count > 0 ? `${count} ${count===1?'servicio':'servicios'}` : 'Cotizar'}
      </span>
    </button>
  );
}

Object.assign(window, { CartModal, CartField, FloatingQuote });