/* ServiceHero.jsx — Internal-page hero with photo + brand geometry.
 * Asymmetric grid: copy left (40% breathing room), photo-stack right.
 * Photo is SHARP (not blurred). Variant: "legal" | "tecnico".
 */
function ServiceHero({ variant, eyebrow, title, titleAccent, lede, onPrimary, primaryLabel, onSecondary, secondaryLabel, breadcrumb, photoAlt }) {
  const DEFAULT_BREADCRUMB = {
    legal:    "Servicios Legales",
    tecnico:  "Servicios Técnicos",
    nosotros: "Sobre Nosotros",
  };
  const DEFAULT_PHOTO_ALT = {
    legal:    "Asesoría legal con cliente",
    tecnico:  "Capacitación con pizarra",
    nosotros: "Familias hondureñas que servimos",
  };
  const crumb = breadcrumb || DEFAULT_BREADCRUMB[variant] || "";
  const alt   = photoAlt || DEFAULT_PHOTO_ALT[variant] || "";

  return (
    <section className={"int-hero " + variant}>
      <div className="int-container">
        <nav className="int-breadcrumb" aria-label="Breadcrumb">
          <a href="index.html">Inicio</a>
          <span className="sep">/</span>
          <span className="current">{crumb}</span>
        </nav>
        <div className="grid" style={{ marginTop: 24 }}>
          <div>
            {eyebrow && <span className="eyebrow"><span className="dot" />{eyebrow}</span>}
            <h1>{title} <span className="accent">{titleAccent}</span></h1>
            <p className="lede">{lede}</p>
            <div className="actions">
              <button className="btn-primary" onClick={onPrimary}>
                {primaryLabel}
                <i data-lucide="arrow-right"></i>
              </button>
              {onSecondary && (
                <button className="btn-secondary" onClick={onSecondary}>
                  {secondaryLabel}
                </button>
              )}
            </div>
          </div>
          <div className="photo-stack">
            <span className="shape shape-3" aria-hidden="true"></span>
            <span className="shape shape-1" aria-hidden="true"></span>
            <div className="photo" role="img" aria-label={alt}></div>
            <span className="shape shape-2" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServiceHero });