/* global React */

function HeartIcon({ filled }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={filled ? "var(--burgundy)" : "none"} stroke={filled ? "var(--burgundy)" : "var(--charcoal)"} strokeWidth="1.8">
      <path d="M12 21s-7.5-4.9-10-9.2C.3 8.6 1.7 5 5 5c2 0 3.2 1.1 4 2.3C9.8 6.1 11 5 13 5c3.3 0 4.7 3.6 3 6.8C19.5 16.1 12 21 12 21z" />
    </svg>
  );
}

function Spec({ value, label }) {
  return (
    <span className="flex items-baseline gap-1">
      <span style={{ fontWeight: 600, color: "var(--charcoal)", fontSize: "0.92rem" }}>{value}</span>
      <span style={{ color: "#8a8378", fontSize: "0.72rem", letterSpacing: "0.04em" }}>{label}</span>
    </span>
  );
}

function PropertyCard({ p, t, lang, faved, onToggle, delay }) {
  const [pop, setPop] = React.useState(false);
  const title = p.typeKey[lang] || p.typeKey.es;
  const tag = p.tag ? (p.tag[lang] || p.tag.es) : null;

  const toggle = () => { onToggle(p.id); setPop(true); setTimeout(() => setPop(false), 420); };

  return (
    <article className="prop-card reveal" data-delay={delay} style={{ background: "#fff", borderRadius: 4, overflow: "hidden", boxShadow: "0 20px 50px -34px rgba(42,42,42,0.4)" }}>
      <div className="relative" style={{ overflow: "hidden" }}>
        <image-slot
          id={"slot-" + p.id}
          class="slot-zoom"
          shape="rect"
          placeholder={"Foto · " + p.zone}
          style={{ width: "100%", height: "260px", display: "block" }}
        ></image-slot>

        {/* zone tag */}
        <span className="absolute" style={{ top: 16, left: 16, background: "rgba(248,244,237,0.92)", color: "var(--burgundy)", padding: "5px 12px", borderRadius: 999, fontSize: "0.62rem", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 }}>
          {p.zone}
        </span>

        {/* featured/exclusive ribbon */}
        {tag && (
          <span className="absolute" style={{ top: 16, right: 60, background: "var(--gold)", color: "#3a2a10", padding: "5px 11px", borderRadius: 999, fontSize: "0.6rem", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 700 }}>
            {tag}
          </span>
        )}

        {/* favorite */}
        <button
          onClick={toggle}
          aria-label={faved ? t.faved : t.fav}
          className={pop ? "heart-pop" : ""}
          style={{ position: "absolute", top: 12, right: 12, width: 38, height: 38, borderRadius: 999, background: "rgba(255,255,255,0.92)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 4px 14px -4px rgba(0,0,0,0.3)", cursor: "pointer", border: "none" }}
        >
          <HeartIcon filled={faved} />
        </button>
      </div>

      <div style={{ padding: "22px 24px 26px" }}>
        <h3 className="font-serif" style={{ fontSize: "1.32rem", fontWeight: 500, color: "var(--charcoal)", lineHeight: 1.2 }}>{title}</h3>
        <div className="flex items-center gap-4 mt-3" style={{ color: "#8a8378" }}>
          <Spec value={p.beds} label={t.beds} />
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--line)" }} />
          <Spec value={p.baths} label={t.baths} />
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "var(--line)" }} />
          <Spec value={p.area} label={t.area} />
        </div>
        <div className="flex items-center justify-between mt-5" style={{ paddingTop: 16, borderTop: "1px solid var(--line)" }}>
          <span className="font-serif" style={{ fontSize: "1.45rem", color: "var(--burgundy)", fontWeight: 600 }}>{p.price}</span>
          <span className="nav-link" style={{ fontSize: "0.68rem", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600, color: "var(--charcoal)", cursor: "pointer" }}>
            {lang === "fr" ? "Détails" : lang === "en" ? "Details" : "Ver detalle"}
          </span>
        </div>
      </div>
    </article>
  );
}

function Featured({ t, lang, props, favs, onToggle }) {
  return (
    <section style={{ background: "var(--cream)", padding: "120px 0 110px" }}>
      <div className="mx-auto px-6 lg:px-12" style={{ maxWidth: 1340 }}>
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16 reveal">
          <div style={{ maxWidth: 620 }}>
            <span className="eyebrow" style={{ color: "var(--terracotta)" }}>{t.featEyebrow}</span>
            <h2 className="font-serif mt-4" style={{ fontSize: "clamp(2rem, 3.6vw, 3.1rem)", fontWeight: 500, lineHeight: 1.08, color: "var(--charcoal)" }}>{t.featTitle}</h2>
            <p className="mt-5" style={{ color: "#5d574d", fontSize: "1.02rem", lineHeight: 1.65, maxWidth: 540 }}>{t.featLead}</p>
          </div>
          <a href="#" onClick={(e) => e.preventDefault()} className="nav-link" style={{ whiteSpace: "nowrap", fontSize: "0.74rem", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600, color: "var(--burgundy)" }}>
            {t.featCta} →
          </a>
        </div>

        <div className="grid gap-7" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))" }}>
          {props.map((p, i) => (
            <PropertyCard key={p.id} p={p} t={t} lang={lang} faved={favs.includes(p.id)} onToggle={onToggle} delay={(i % 3) + 1} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Featured, PropertyCard });