/* Service Card */
const ServiceCard = ({ service, onClick }) => {
  const supportLabel = service.support;
  const flagClass = service.flagship ? 'is-flagship' : service.signature ? 'is-signature' : '';
  return (
    <button className={`svc-card ${flagClass}`} onClick={() => onClick(service)}>
      <div className="svc-head">
        <div className="svc-icon">
          <Icon name={service.icon} />
        </div>
        <div style={{ flex: 1, paddingRight: service.flagship || service.signature ? 70 : 0 }}>
          <div className="svc-name">{service.name}</div>
          <div className="svc-tagline">{service.tagline}</div>
        </div>
      </div>

      <div className="svc-chips">
        <span className={`svc-chip support-${supportLabel}`}>{supportLabel}</span>
        <span className="svc-chip dept">{service.dept}</span>
      </div>

      <div className="svc-foot">
        <div className="svc-price">
          {service.monthlyUS.split(' / ')[0].split(' or ')[0]}
          <span className="term">{service.monthlyUS.includes('/mo') && service.monthlyUS.includes('+') ? '+ extras · ' : ''}{service.term}</span>
        </div>
        <div className="svc-arrow">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
      </div>
    </button>
  );
};

/* Funnel section */
const FunnelRow = ({ stage, services, supportFilter, onPick, lang }) => {
  const filtered = services
    .filter(s => s.funnel.includes(stage))
    .filter(s => supportFilter === 'ALL' || s.support === supportFilter);

  if (filtered.length === 0) return null;

  const meta = (lang === 'es' ? window.CIM_FUNNEL_ES : window.CIM_FUNNEL)[stage];
  const servicesLabel = lang === 'es' ? 'servicios' : 'services';
  const fromLabel = lang === 'es' ? 'Desde' : 'From';

  // Sort flagship first
  filtered.sort((a, b) => (b.flagship ? 1 : 0) - (a.flagship ? 1 : 0));

  return (
    <div className="funnel-row">
      <div className="funnel-rail">
        <div className="funnel-stamp"><span className="stage">{stage}</span> {meta.label}</div>
        <h3>{meta.verb}</h3>
        <p>{meta.desc}</p>
        <div className="funnel-meta">
          <span><span className="pip"></span>{filtered.length} {servicesLabel}</span>
          <span><span className="pip"></span>{fromLabel} {priceLow(filtered)}/mo</span>
        </div>
      </div>
      <div className="svc-grid">
        {filtered.map(s => <ServiceCard key={s.id} service={s} onClick={onPick} lang={lang} />)}
      </div>
    </div>
  );
};

/* Support-first row */
const SupportRow = ({ support, services, onPick, lang }) => {
  const filtered = services.filter(s => s.support === support);
  if (filtered.length === 0) return null;
  const meta = (lang === 'es' ? window.CIM_SUPPORT_ES : window.CIM_SUPPORT)[support];
  filtered.sort((a, b) => (b.flagship ? 1 : 0) - (a.flagship ? 1 : 0));
  const headlines = lang === 'es'
    ? { DIY: 'Tú lo ejecutas', DWY: 'Lo construimos juntos', DFY: 'Nosotros lo ejecutamos' }
    : { DIY: 'You run it', DWY: 'We build it together', DFY: 'We run it' };
  const servicesLabel = lang === 'es' ? 'servicios' : 'services';
  const fromLabel = lang === 'es' ? 'Desde' : 'From';
  return (
    <div className="funnel-row">
      <div className="funnel-rail">
        <div className="funnel-stamp"><span className="stage">{support}</span> {meta.label}</div>
        <h3>{headlines[support]}</h3>
        <p>{meta.desc}</p>
        <div className="funnel-meta">
          <span><span className="pip"></span>{filtered.length} {servicesLabel}</span>
          <span><span className="pip"></span>{fromLabel} {priceLow(filtered)}/mo</span>
        </div>
      </div>
      <div className="svc-grid">
        {filtered.map(s => <ServiceCard key={s.id} service={s} onClick={onPick} lang={lang} />)}
      </div>
    </div>
  );
};

function priceLow(list) {
  const nums = list.map(s => {
    const m = s.monthlyUS.match(/\$([\d,]+)/);
    return m ? parseInt(m[1].replace(/,/g,''), 10) : Infinity;
  });
  const min = Math.min(...nums);
  return min === Infinity ? '—' : `$${min.toLocaleString()}`;
}

window.ServiceCard = ServiceCard;
window.FunnelRow = FunnelRow;
window.SupportRow = SupportRow;