/* common.jsx — Pequeños componentes compartidos */

// WhatsApp del negocio (número real del POS Loggro). Helper para
// links con mensaje pre-llenado: reservas, encargos, pedidos, etc.
window.WA_NUMBER = '573153232280';
window.waLink = function (msg) {
  return 'https://wa.me/' + window.WA_NUMBER +
    '?text=' + encodeURIComponent(msg || 'Hola, quisiera más información de Alexandra Castro Pastelería.');
};

// ── Image placeholder slot (elegante, con marco fino dorado) ─────────
const HERO_FALLBACK = 'images/hero.jpg'; // foto real local garantizada

const ImgSlot = ({ tone = 'cream', label, sub, className = '', icon = true }) => {
  // Regla: SIEMPRE mostrar una foto real. Si "tone" es una imagen usable
  // se muestra; si falla o no hay → cae a hero.jpg (real, local). Nunca
  // una caja vacía. (El ornamento sólo si hasta hero.jpg fallara.)
  const looksImg = typeof tone === 'string' && (
    /^(https?:)?\/\//.test(tone) ||
    /\.(jpe?g|png|webp|avif|gif|svg)(\?|#|$)/i.test(tone) ||
    tone.indexOf('images/') === 0
  );
  const [stage, setStage] = React.useState(0); // 0=primaria 1=hero 2=ornamento

  React.useEffect(() => { setStage(0); }, [tone]);

  const src = (stage === 0 && looksImg) ? tone : (stage <= 1 ? HERO_FALLBACK : null);

  if (src) {
    return (
      <div className={`img-slot img-slot--photo ${className}`}>
        <img
          src={src}
          alt={label || ''}
          loading="lazy"
          onError={() => setStage((s) => s + 1)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
    );
  }

  // Último recurso (sólo si hasta hero.jpg fallara): ornamento elegante.
  return (
    <div className={`img-slot img-slot--cream img-slot--empty ${className}`}>
      <div className="img-slot__inner">
        <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
             stroke="var(--gold)" strokeWidth="0.7" aria-hidden="true">
          <circle cx="15" cy="15" r="11" opacity="0.5" />
          <path d="M15 8 C17 11 17 13 15 15 C13 17 13 19 15 22 M15 8 C13 11 13 13 15 15 C17 17 17 19 15 22" />
          <circle cx="15" cy="15" r="1.4" fill="var(--gold)" stroke="none" />
        </svg>
      </div>
    </div>
  );
};

// ── Sello tipográfico (small all-caps gold label) ───────────────────
const Sello = ({ children, solo = false }) => (
  <span className={`sello ${solo ? 'sello--solo' : ''}`}>{children}</span>
);

// ── Ornamento (divisor con marca central) ───────────────────────────
const OrnamentRule = ({ mark = '✦' }) => (
  <div className="ornament-rule">
    <span className="ornament-rule__mark">{mark}</span>
  </div>
);

// ── Etiquetas de producto (veg/gf/agotado) ──────────────────────────
const ProductTags = ({ tags = [], out = false }) => {
  if (!tags.length && !out) return null;
  return (
    <div className="product-card__tags">
      {tags.includes('veg') && <span className="product-card__tag product-card__tag--veg">Vegetariano</span>}
      {tags.includes('gf')  && <span className="product-card__tag product-card__tag--gf">Sin gluten</span>}
      {out                  && <span className="product-card__tag product-card__tag--out">Agotado</span>}
    </div>
  );
};

// ── Cursor-style ornament: small fleur de lis style mark for headers ─
const Fleuron = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 18 18" fill="none" stroke={color} strokeWidth="0.6">
    <path d="M9 1 v6 M9 11 v6 M1 9 h6 M11 9 h6" />
    <circle cx="9" cy="9" r="1.2" fill={color} stroke="none" />
  </svg>
);

window.ImgSlot = ImgSlot;
window.Sello = Sello;
window.OrnamentRule = OrnamentRule;
window.ProductTags = ProductTags;
window.Fleuron = Fleuron;