// ServiceCard.jsx
const ServiceCard = ({ num, title, desc, price, priceMo, features, includes, ideal, featured, variant, href = "#", link = "Ver detalles" }) => {
  const classes = ['svc-card'];
  if (featured) classes.push('featured');
  if (variant) classes.push(variant); // e.g. "social", "web"
  return (
    <div className={classes.join(' ')}>
      <span className="bracket-tl"></span>
      <span className="bracket-br"></span>
      <span className="svc-num">{num}</span>
      <h3 className="svc-title">{title}</h3>
      <p className="svc-desc">{desc}</p>
      {features && (
        <ul className="svc-features">
          {features.map((f, i) => (
            <li key={i}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="m5 12 5 5L20 7"/></svg>
              {f}
            </li>
          ))}
        </ul>
      )}
      {ideal && (
        <div className="svc-ideal">
          <span className="svc-ideal-lab">// IDEAL PARA</span>
          <span className="svc-ideal-v">{ideal}</span>
        </div>
      )}
      <div className="svc-foot">
        <div className="svc-price-block">
          <span className="svc-price">
            {price}<span className="usd">USD</span>
            {priceMo && <span className="mo">{priceMo}</span>}
          </span>
          {includes && (
            <div className="svc-includes">
              {includes.map((b, i) => (
                <span key={i} className="svc-inc-badge">+ {b}</span>
              ))}
            </div>
          )}
        </div>
        <a href={href} className="svc-link">{link} <span className="ar">→</span></a>
      </div>
      <span className="underline"></span>
    </div>
  );
};

window.ServiceCard = ServiceCard;