/* Shared primitives for the Carina kit: Photo placeholder + Icon (Ionicons). */

const CARINA_PHOTO_TONES = [
  "linear-gradient(150deg,#2b2418,#161109 70%)",
  "linear-gradient(150deg,#2a2620,#14110b 72%)",
  "linear-gradient(150deg,#26221a,#100d08 70%)",
  "linear-gradient(150deg,#2e2519,#17110a 74%)",
  "linear-gradient(150deg,#242318,#11100a 70%)",
  "linear-gradient(150deg,#2c2519,#141009 72%)"
];

/* Warm architectural placeholder — or real listing photo when `src` is set. */
function Photo({ tone = 0, src, alt = "", children, rounded = false, watermark = true, corner = true, style = {} }) {
  const hasPhoto = Boolean(src);
  return (
    <div style={{
      position: "relative", width: "100%", height: "100%", overflow: "hidden",
      background: CARINA_PHOTO_TONES[tone % CARINA_PHOTO_TONES.length],
      borderRadius: rounded ? "var(--r-md)" : 0, ...style
    }}>
      {hasPhoto && (
        <img src={src} alt={alt} loading="lazy" decoding="async" style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center", display: "block"
        }} />
      )}
      {watermark && !hasPhoto && (
        <img src="assets/icon-gold.png" alt="" style={{
          position: "absolute", left: "50%", top: "46%", transform: "translate(-50%,-50%)",
          width: "38%", maxWidth: 220, opacity: 0.12, pointerEvents: "none"
        }} />
      )}
      <div style={{
        position: "absolute", inset: 0,
        background: hasPhoto
          ? "linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.08) 38%, transparent 68%)"
          : "linear-gradient(to top, rgba(0,0,0,0.62) 2%, rgba(0,0,0,0.12) 42%, transparent 70%)"
      }} />
      {corner && !hasPhoto && (
        <div style={{
          position: "absolute", right: 12, top: 12,
          fontFamily: "var(--font-sans)", fontSize: 9, letterSpacing: "0.2em",
          textTransform: "uppercase", color: "var(--ink-400)", opacity: 0.7
        }}>Foto do imóvel</div>
      )}
      {children}
    </div>
  );
}

const CARINA_ICON_MAP = {
  "arrow-down": "arrow-down-outline",
  "arrow-left": "arrow-back-outline",
  "at-sign": "logo-instagram",
  "badge-check": "shield-checkmark-outline",
  "bath": "water-outline",
  "bed-double": "bed-outline",
  "building-2": "business-outline",
  "calendar-check": "calendar-clear-outline",
  "car": "car-outline",
  "check": "checkmark-outline",
  "chevron-down": "chevron-down-outline",
  "chevron-left": "chevron-back-outline",
  "chevron-right": "chevron-forward-outline",
  "compass": "compass-outline",
  "file-warning": "warning-outline",
  "folder-check": "folder-open-outline",
  "heart-handshake": "heart-circle-outline",
  "home": "home-outline",
  "landscape": "leaf-outline",
  "map-pin": "location-outline",
  "map-pinned": "map-outline",
  "menu": "menu-outline",
  "message-circle": "chatbubble-ellipses-outline",
  "move": "scan-outline",
  "phone": "call-outline",
  "piggy-bank": "wallet-outline",
  "property-assessment": "analytics-outline",
  "ruler": "resize-outline",
  "shield-check": "shield-checkmark-outline",
  "sliders-horizontal": "options-outline",
  "sparkles": "sparkles-outline",
  "storefront": "storefront-outline",
  "subscription": "document-text-outline",
  "trending-up": "trending-up-outline",
  "youtube": "logo-youtube",
  "x": "close-outline"
};

/* Brand SVG shapes — source files live in assets/icons/. */
const CARINA_SVG_ALIASES = {
  "message-circle": "whatsapp",
  "at-sign": "instagram",
  "map-pin": "marker",
  "map-pinned": "marker"
};

const CARINA_SVG_ICONS = {
  whatsapp: [{
    tag: "path",
    d: "M20.463,3.488C18.217,1.24,15.231,0.001,12.05,0C5.495,0,0.16,5.334,0.157,11.892c-0.001,2.096,0.547,4.142,1.588,5.946L0.057,24l6.304-1.654c1.737,0.948,3.693,1.447,5.683,1.448h0.005c6.554,0,11.89-5.335,11.893-11.893C23.944,8.724,22.708,5.735,20.463,3.488zM12.05,21.785h-0.004c-1.774,0-3.513-0.477-5.031-1.378l-0.361-0.214l-3.741,0.981l0.999-3.648l-0.235-0.374c-0.99-1.574-1.512-3.393-1.511-5.26c0.002-5.45,4.437-9.884,9.889-9.884c2.64,0,5.122,1.03,6.988,2.898c1.866,1.869,2.893,4.352,2.892,6.993C21.932,17.351,17.498,21.785,12.05,21.785zM17.472,14.382c-0.297-0.149-1.758-0.868-2.031-0.967c-0.272-0.099-0.47-0.149-0.669,0.148s-0.767,0.967-0.941,1.166c-0.173,0.198-0.347,0.223-0.644,0.074c-0.297-0.149-1.255-0.462-2.39-1.475c-0.883-0.788-1.48-1.761-1.653-2.059s-0.018-0.458,0.13-0.606c0.134-0.133,0.297-0.347,0.446-0.521C9.87,9.97,9.919,9.846,10.019,9.647c0.099-0.198,0.05-0.372-0.025-0.521C9.919,8.978,9.325,7.515,9.078,6.92c-0.241-0.58-0.486-0.501-0.669-0.51C8.236,6.401,8.038,6.4,7.839,6.4c-0.198,0-0.52,0.074-0.792,0.372c-0.272,0.298-1.04,1.017-1.04,2.479c0,1.463,1.065,2.876,1.213,3.074c0.148,0.198,2.095,3.2,5.076,4.487c0.709,0.306,1.263,0.489,1.694,0.626c0.712,0.226,1.36,0.194,1.872,0.118c0.571-0.085,1.758-0.719,2.006-1.413c0.248-0.694,0.248-1.29,0.173-1.413C17.967,14.605,17.769,14.531,17.472,14.382z",
    fillRule: "evenodd",
    clipRule: "evenodd"
  }],
  instagram: [
    { tag: "path", d: "M12,2.162c3.204,0,3.584,0.012,4.849,0.07c1.308,0.06,2.655,0.358,3.608,1.311c0.962,0.962,1.251,2.296,1.311,3.608c0.058,1.265,0.07,1.645,0.07,4.849c0,3.204-0.012,3.584-0.07,4.849c-0.059,1.301-0.364,2.661-1.311,3.608c-0.962,0.962-2.295,1.251-3.608,1.311c-1.265,0.058-1.645,0.07-4.849,0.07s-3.584-0.012-4.849-0.07c-1.291-0.059-2.669-0.371-3.608-1.311c-0.957-0.957-1.251-2.304-1.311-3.608c-0.058-1.265-0.07-1.645-0.07-4.849c0-3.204,0.012-3.584,0.07-4.849c0.059-1.296,0.367-2.664,1.311-3.608c0.96-0.96,2.299-1.251,3.608-1.311C8.416,2.174,8.796,2.162,12,2.162M12,0C8.741,0,8.332,0.014,7.052,0.072C5.197,0.157,3.355,0.673,2.014,2.014C0.668,3.36,0.157,5.198,0.072,7.052C0.014,8.332,0,8.741,0,12c0,3.259,0.014,3.668,0.072,4.948c0.085,1.853,0.603,3.7,1.942,5.038c1.345,1.345,3.186,1.857,5.038,1.942C8.332,23.986,8.741,24,12,24c3.259,0,3.668-0.014,4.948-0.072c1.854-0.085,3.698-0.602,5.038-1.942c1.347-1.347,1.857-3.184,1.942-5.038C23.986,15.668,24,15.259,24,12c0-3.259-0.014-3.668-0.072-4.948c-0.085-1.855-0.602-3.698-1.942-5.038c-1.343-1.343-3.189-1.858-5.038-1.942C15.668,0.014,15.259,0,12,0z" },
    { tag: "path", d: "M12,5.838c-3.403,0-6.162,2.759-6.162,6.162c0,3.403,2.759,6.162,6.162,6.162s6.162-2.759,6.162-6.162C18.162,8.597,15.403,5.838,12,5.838zM12,16c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S14.209,16,12,16z" },
    { tag: "circle", cx: 18.406, cy: 5.594, r: 1.44 }
  ],
  marker: [
    { tag: "path", d: "M12,6a4,4,0,1,0,4,4A4,4,0,0,0,12,6Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,12Z" },
    { tag: "path", d: "M12,24a5.271,5.271,0,0,1-4.311-2.2c-3.811-5.257-5.744-9.209-5.744-11.747a10.055,10.055,0,0,1,20.11,0c0,2.538-1.933,6.49-5.744,11.747A5.271,5.271,0,0,1,12,24ZM12,2.181a7.883,7.883,0,0,0-7.874,7.874c0,2.01,1.893,5.727,5.329,10.466a3.145,3.145,0,0,0,5.09,0c3.436-4.739,5.329-8.456,5.329-10.466A7.883,7.883,0,0,0,12,2.181Z" }
  ]
};

function renderSvgShape(shape, index) {
  if (shape.tag === "circle") {
    return <circle key={index} cx={shape.cx} cy={shape.cy} r={shape.r} fill="currentColor" />;
  }
  return (
    <path key={index} d={shape.d} fill="currentColor"
      fillRule={shape.fillRule} clipRule={shape.clipRule} />
  );
}

/* Thin-line icon via Ionicons, with brand SVG fallbacks. */
function Icon({ name, size = 18, color = "currentColor", strokeWidth = 1.5, style = {} }) {
  const svgName = CARINA_SVG_ALIASES[name] || name;
  const shapes = CARINA_SVG_ICONS[svgName];
  if (shapes) {
    const items = Array.isArray(shapes) ? shapes : [{ tag: "path", d: shapes }];
    return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size}
        style={{ display: "inline-flex", flex: "none", verticalAlign: "-0.15em", color, fill: "currentColor", ...style }}
        aria-hidden="true">
        {items.map(renderSvgShape)}
      </svg>
    );
  }
  const ionName = CARINA_ICON_MAP[name] || name;
  return <ion-icon name={ionName} style={{
    width: size, height: size, fontSize: size, display: "inline-flex",
    color, "--ionicon-stroke-width": `${Math.max(16, strokeWidth * 20)}px`, ...style
  }} aria-hidden="true"></ion-icon>;
}

function CarinaRefreshIcons() {}

Object.assign(window, { Photo, Icon, CarinaRefreshIcons });