/* Drawer — service detail */
const Drawer = ({ service, onClose, onBook, lang }) => {
  lang = lang || (window.CIM_GET_LANG ? window.CIM_GET_LANG() : 'en');
  const supportMeta = service ? (lang === 'es' ? window.CIM_SUPPORT_ES : window.CIM_SUPPORT)[service.support] : null;
  const funnelMap = lang === 'es' ? window.CIM_FUNNEL_ES : window.CIM_FUNNEL;
  const L = (key, fallback) => (window.t ? window.t(key) : fallback);
  const flagshipLabel = lang === 'es' ? '★ FLAGSHIP · ' : '★ FLAGSHIP · ';
  const signatureLabel = lang === 'es' ? 'INSIGNIA · ' : 'SIGNATURE · ';
  const open = !!service;
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [open, onClose]);

  return (
    <React.Fragment>
      <div className={`drawer-backdrop ${open ? 'is-open' : ''}`} onClick={onClose}></div>
      <aside className={`drawer ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        {service &&
        <React.Fragment>
            <div className="drawer-head">
              <div className="drawer-icon" style={service.flagship ? { background: 'var(--cim-yellow-soft)' } : {}}>
                <Icon name={service.icon} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="drawer-eyebrow">
                  {service.flagship ? flagshipLabel : service.signature ? signatureLabel : ''}
                  {supportMeta.label}
                </div>
                <h2 className="drawer-name">{service.name}</h2>
                <div className="drawer-tag" style={{ fontSize: "14px" }}>{service.tagline}</div>
              </div>
              <button className="drawer-close" onClick={onClose} aria-label="Close">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="m4 4 8 8M12 4l-8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
              </button>
            </div>

            <div className="drawer-body">
              <div className="price-card">
                <div className="label">{L('drawer.priceUS','Monthly investment · US')}</div>
                <div className="figure">{service.monthlyUS}</div>
                <div className="term">{service.term} · CA: {service.monthlyCA}</div>
                <div className="row">
                  <span>{L('drawer.setup','One-time setup')} · US</span>
                  <span>{service.setupUS}</span>
                </div>
                {service.setupCA && service.setupCA !== service.setupUS &&
              <div className="row">
                    <span>{L('drawer.setup','One-time setup')} · CA</span>
                    <span>{service.setupCA}</span>
                  </div>
              }
                {service.extraNote &&
              <div className="row" style={{ color: 'var(--cim-mute)', fontStyle: 'italic' }}>
                    <span>{lang === 'es' ? 'Nota' : 'Note'}</span>
                    <span style={{ textAlign: 'right', maxWidth: '60%' }}>{service.extraNote}</span>
                  </div>
              }
                <div className="row">
                  <span>{lang === 'es' ? 'Etapa del embudo' : 'Funnel stage'}</span>
                  <span>{service.funnel.map((f) => funnelMap[f].label).join(' · ')}</span>
                </div>
              </div>

              <div className="drawer-row">
                <h4>{lang === 'es' ? 'Qué es' : 'What it is'}</h4>
                <p className="drawer-summary">{service.summary}</p>
              </div>

              <div className="drawer-row">
                <h4>{L('drawer.scope',"What's included")}</h4>
                <ul className="scope-list">
                  {service.scope.map((s, i) =>
                <li key={i}><span className="check">✓</span><span>{s}</span></li>
                )}
                </ul>
              </div>

              {service.expect &&
            <div className="drawer-row">
                  <h4>{L('drawer.expect','What to expect')}</h4>
                  <ul className="scope-list">
                    {service.expect.map((s, i) =>
                <li key={i}><span className="check" style={{ background: 'var(--cim-yellow)', color: 'var(--cim-black)' }}>★</span><span>{s}</span></li>
                )}
                  </ul>
                </div>
            }

              <div className="bestfit-card">
                <div style={{ fontSize: 10.5, letterSpacing: '0.18em', color: 'var(--cim-blue)', fontWeight: 700, textTransform: 'uppercase' }}>★ {L('drawer.bestfit','Best fit')}</div>
                <p>{service.bestFit}</p>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <div style={{ background: 'var(--cim-bg)', padding: 14, borderRadius: 10 }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--cim-mute)', fontWeight: 700, textTransform: 'uppercase' }}>{L('drawer.dept','Department')}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{service.dept}</div>
                </div>
                <div style={{ background: 'var(--cim-bg)', padding: 14, borderRadius: 10 }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--cim-mute)', fontWeight: 700, textTransform: 'uppercase' }}>{L('drawer.term','Contract term')}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{service.term}</div>
                </div>
              </div>
            </div>

            <div className="drawer-foot">
              <button className="btn btn-ghost" onClick={onClose}>{lang === 'es' ? 'Seguir viendo' : 'Keep browsing'}</button>
              <button className="btn btn-yellow" onClick={() => onBook(service)}>{L('drawer.book','Book a call about this →')}</button>
            </div>
          </React.Fragment>
        }
      </aside>
    </React.Fragment>);

};

window.Drawer = Drawer;