// Componentes compartilhados: Ornamento (separador) e ícones SVG simples
// Sem dependências externas para ornamentos

window.Ornament = function Ornament({ width = 160, color = "#711312", className = "" }) {
  const half = width / 2;
  return (
    <div className={`ornament ${className}`}>
      <svg width={width} height="10" viewBox={`0 0 ${width} 10`} fill="none" aria-hidden="true">
        <line x1="0" y1="5" x2={half - 8} y2="5" stroke={color} strokeWidth="0.8" />
        <circle cx={half} cy="5" r="2" fill={color} />
        <line x1={half + 8} y1="5" x2={width} y2="5" stroke={color} strokeWidth="0.8" />
      </svg>
    </div>
  );
};

// Monograma do casal (brasão simplificado) — SVG original, sem reproduzir logos
window.Crest = function Crest({ size = 110, monogram = "L&D" }) {
  return (
    <svg width={size} height={size * 1.15} viewBox="0 0 110 126" aria-hidden="true">
      <defs>
        <linearGradient id="crestFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#711312"/>
          <stop offset="1" stopColor="#711312"/>
        </linearGradient>
      </defs>
      {/* moldura externa */}
      <path d="M55 6 L100 18 L100 70 Q100 92 55 110 Q10 92 10 70 L10 18 Z"
            fill="url(#crestFill)" stroke="#ADADAD" strokeWidth="0.8"/>
      {/* borda interna fina */}
      <path d="M55 12 L94 22 L94 70 Q94 88 55 103 Q16 88 16 70 L16 22 Z"
            fill="none" stroke="#ADADAD" strokeWidth="0.5" opacity="0.7"/>
      {/* monograma */}
      <text x="55" y="68" textAnchor="middle"
            fontFamily="Great Vibes, cursive" fontSize="40" fill="#FAF3E8" letterSpacing="-1">
        {monogram}
      </text>
      {/* faixa "OMNIA VINCIT AMOR" */}
      <path d="M8 100 Q55 118 102 100 L98 108 Q55 124 12 108 Z"
            fill="#FAF3E8" stroke="#ADADAD" strokeWidth="0.5"/>
      <text x="55" y="113" textAnchor="middle"
            fontFamily="'Cormorant Garamond', serif" fontWeight="600"
            fontSize="7" fill="#711312" letterSpacing="2">
        OMNIA · VINCIT · AMOR
      </text>
    </svg>
  );
};

// Ícone via Font Awesome 6 — fallback para SVG manual se não houver mapeamento FA
window.Icon = function Icon({ name, size = 20, color = "currentColor" }) {
  const faMap = {
    calendar:        "fa-calendar-days",
    "map-pin":       "fa-location-dot",
    hanger:          "fa-shirt",
    car:             "fa-car-side",
    check:           "fa-check",
    phone:           "fa-phone",
    "external-link": "fa-arrow-up-right-from-square",
    gift:            "fa-gift",
    x:               "fa-xmark",
    "chevron-left":  "fa-chevron-left",
    "chevron-right": "fa-chevron-right",
    "chevron-down":  "fa-chevron-down",
    "zoom-in":       "fa-magnifying-glass-plus",
    menu:            "fa-bars",
    copy:            "fa-copy",
    heart:           "fa-heart",
    wine:            "fa-wine-glass",
    quote:           "fa-quote-left",
    whatsapp:        "fa-whatsapp",
    plane:           "fa-plane",
    bed:             "fa-bed",
    utensils:        "fa-utensils",
    anchor:          "fa-anchor",
    sparkles:        "fa-wand-magic-sparkles",
    star:            "fa-star",
    compass:         "fa-compass",
    map:             "fa-map",
  };

  const faClass = faMap[name];
  const prefix  = name === "whatsapp" ? "fa-brands" : "fa-solid";

  return (
    <i
      className={`${prefix} ${faClass || ("fa-" + name)}`}
      aria-hidden="true"
      style={{ fontSize: size, color, lineHeight: 1, display: "inline-block", width: size, textAlign: "center" }}
    />
  );
};