// components.jsx — 共用 UI 元件（導覽、卡片、搜尋、頁尾）
const { useState, useEffect, useMemo, useRef } = React;

// 車位類型：永慶 parkingMode（坡道/平面…）→ 顯示文字
const PARKING_MAP = {
  "坡道/平面": "坡道平面", "坡道/機械": "坡道機械",
  "昇降/平面": "機械平面", "昇降/機械": "純機械",
};
function parkingLabel(p) {
  const m = p.source && p.source.extra && p.source.extra.parkingMode;
  if (m) return PARKING_MAP[m] || m.replace(/\//g, "");
  return p.parking || "—";
}

// 永慶相簿第一張常是滿是文字的「外觀封面圖」，把它移到最後，
// 讓主圖／首圖改用較乾淨的室內實拍。
function displayImages(p) {
  const im = p.images || [];
  if (im.length > 1 && p.coverLast) {
    return im.slice(1).concat(im[0]);
  }
  return im;
}
// 縮圖：把永慶雲端圖的尺寸參數改小，列表卡片用小圖（大幅減輕載入）
function thumbUrl(u) {
  if (!u || !/^https?:/.test(u)) return u;
  return u.replace(/width=\d+/, "width=640").replace(/height=\d+/, "height=480");
}
window.parkingLabel = parkingLabel;
window.displayImages = displayImages;
window.thumbUrl = thumbUrl;

// ── Icons ───────────────────────────────────────────────────
const Icon = ({ name, size = 18, color = "currentColor", style = {} }) => {
  const s = { width: size, height: size, stroke: color, fill: "none", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", ...style };
  const paths = {
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    bed: <><rect x="3" y="3" width="18" height="18" rx="1.5" /><path d="M3 12h18M12 3v9M16 12v9" /></>,
    ruler: <><path d="M3 3h6M3 3v6M15 3h6M21 3v6M3 15v6M3 21h6M15 21h6M21 15v6" /><path d="M12 8v8M8 12h8" /></>,
    floor: <><path d="M5 21V7l7-4 7 4v14H5z" /><path d="M5 11h14M5 16h14M10 21v-4h4v4" /></>,
    car: <><rect x="4" y="4" width="16" height="16" rx="2.5" /><path d="M9.5 17V7h4a2.8 2.8 0 0 1 0 5.6H9.5" /></>,
    phone: <path d="M3 5a2 2 0 0 1 2-2h2l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v2a2 2 0 0 1-2 2A15 15 0 0 1 3 5Z" />,
    fire: <path d="M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4-1 2 1 4 3 2-2-3 0-6 0-8Z" />,
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowL: <path d="M19 12H5M11 6l-6 6 6 6" />,
    star: <path d="m12 3 2.6 5.4 5.9.8-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.4 9.2l5.9-.8L12 3Z" />,
    check: <path d="m5 12 5 5 9-11" />,
    x: <path d="M6 6 18 18M6 18 18 6" />,
    chev: <path d="m9 6 6 6-6 6" />,
    heart: <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z" />,
    filter: <path d="M4 5h16M7 12h10M10 19h4" />,
    home: <><path d="m3 11 9-7 9 7v9a1 1 0 0 1-1 1h-5v-7H10v7H5a1 1 0 0 1-1-1Z" /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 7 9-7" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    pin: <><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12Z" /><circle cx="12" cy="10" r="2.5" /></>,
    land: <><path d="M3 21h18" /><path d="M5 21V10l5-3v14M10 21V7l9 4v10" /></>,
    trend: <path d="m3 17 6-6 4 4 8-9M14 6h7v7" />
  };
  return <svg viewBox="0 0 24 24" style={s}>{paths[name]}</svg>;
};

// ── Brand mark ──────────────────────────────────────────────
const BrandMark = ({ size = 28, color }) =>
  <div style={{
    display: "flex", alignItems: "center", gap: 10,
    fontFamily: "var(--font-display)", fontWeight: 600,
    fontSize: size * 0.62, color: color || "var(--ink)",
    letterSpacing: ".02em"
  }}>
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: "var(--gold)", display: "flex",
      alignItems: "center", justifyContent: "center",
      boxShadow: "inset 0 0 0 2px rgba(0,0,0,.08)", flexShrink: 0
    }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="none">
        <path d="M3 11 L12 4 L21 11 L21 20 L15 20 L15 14 L9 14 L9 20 L3 20 Z" stroke="var(--ink)" strokeWidth="1.6" strokeLinejoin="round" />
      </svg>
    </div>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15, whiteSpace: "nowrap" }}>
      <span>{AGENT.brandPrimary}</span>
      <span style={{ fontSize: size * 0.32, color: "var(--ink-3)", fontWeight: 400, fontFamily: "var(--font-body)", marginTop: 3, letterSpacing: ".02em" }}>
        {AGENT.slogan}
      </span>
    </div>
  </div>;

// ── LINE logo ───────────────────────────────────────────────
const LineLogo = ({ size = 20, style = {} }) =>
  <img
    src={(window.SITE_ROOT || "") + "assets/img/line-icon.png"}
    alt="LINE" width={size} height={size}
    style={{ display: "block", flexShrink: 0, ...style }} />;

// ── Top nav（真實頁面連結） ─────────────────────────────────
function TopNav({ active }) {
  const items = [
    { id: "home", label: "首頁" },
    { id: "list", label: "物件" },
    { id: "about", label: "關於輝哥" },
    { id: "contact", label: "聯絡" }];

  return (
    <header className="topnav" style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in oklab, var(--bg), transparent 8%)",
      backdropFilter: "blur(20px) saturate(160%)",
      WebkitBackdropFilter: "blur(20px) saturate(160%)",
      borderBottom: "1px solid var(--border)",
      padding: "14px 36px", display: "flex", alignItems: "center", justifyContent: "space-between"
    }}>
      <a href={urlFor("home")} style={{ textDecoration: "none" }}>
        <BrandMark size={30} />
      </a>
      <nav style={{ display: "flex", gap: 4 }}>
        {items.map((it) =>
          <a key={it.id} href={urlFor(it.id)} style={{
            fontSize: 15, whiteSpace: "nowrap", textDecoration: "none",
            padding: "8px 16px", borderRadius: 999,
            color: active === it.id ? "var(--ink)" : "var(--ink-2)",
            fontWeight: active === it.id ? 500 : 400,
            background: active === it.id ? "var(--gold-tint)" : "transparent",
            transition: "all .15s"
          }}>{it.label}</a>
        )}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <a href={"tel:" + AGENT.phone.replace(/-/g, "")} className="mono nav-phone" style={{
          display: "flex", flexDirection: "column", gap: 1, padding: "6px 12px",
          fontSize: 13, color: "var(--ink-2)", textDecoration: "none",
          whiteSpace: "nowrap", textAlign: "right", lineHeight: 1.25
        }}>
          <span style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6 }}>
            <Icon name="phone" size={13} /> {AGENT.phone}
          </span>
          <span style={{ fontSize: 11, color: "var(--ink-3)" }}>
            {AGENT.storePhone} <span style={{ color: "var(--gold-deep)" }}>(找輝哥)</span>
          </span>
        </a>
        <a href={AGENT.lineUrl} target="_blank" rel="noopener" style={{
          background: "var(--gold)", color: "var(--ink)", textDecoration: "none",
          padding: "10px 18px", borderRadius: 999,
          fontSize: 14, fontWeight: 600,
          display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap",
          boxShadow: "0 1px 0 rgba(255,255,255,.4) inset, var(--shadow-1)"
        }}>
          <LineLogo size={18} /> 加 LINE
        </a>
      </div>
    </header>);
}

// ── 物件照片（有照片用照片，沒有就顯示佔位圖） ──────────────
function PropPhoto({ p, idx = 0, label, height = 220, hue = 0, thumb = false }) {
  const imgs = p ? displayImages(p) : [];
  const raw = imgs[idx];
  const src = raw ? photoUrl(thumb ? thumbUrl(raw) : raw) : null;
  if (src) {
    return (
      <div style={{ width: "100%", height, borderRadius: "inherit", overflow: "hidden" }}>
        <img className="prop-photo" src={src} alt={label || (p && p.title) || ""} loading="lazy" />
      </div>);
  }
  return (
    <div className="placeholder" data-label={label || "照片整理中"} style={{
      width: "100%", height,
      borderRadius: "inherit",
      background: `repeating-linear-gradient(${45 + hue * 30}deg,
        var(--bg-2) 0px, var(--bg-2) 14px,
        var(--border-2) 14px, var(--border-2) 15px)`
    }} />);
}

// ── 價格（含降價樣式） ──────────────────────────────────────
function PriceDisplay({ price, original, compact = false }) {
  const hasDrop = original && original > price;
  if (!hasDrop) {
    return (
      <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
        <span className="mono" style={{ fontSize: compact ? 22 : 28, fontWeight: 600, color: "var(--ink)", letterSpacing: "-.01em" }}>
          {fmtPrice(price)}
        </span>
      </div>);
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)", textDecoration: "line-through" }}>
        {fmtPrice(original)}
      </span>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
        <span className="mono" style={{ fontSize: compact ? 22 : 28, fontWeight: 600, color: "var(--drop)" }}>
          {fmtPrice(price)}
        </span>
        <span style={{ fontSize: 11, color: "var(--drop)", fontWeight: 600 }}>↓ 降 {original - price} 萬</span>
      </div>
    </div>);
}

// ── 物件卡片（房屋 / 土地 通用） ────────────────────────────
function PropertyCard({ p, compact = false, index = 0 }) {
  const land = isLand(p);
  const imgH = compact ? 160 : 220;

  const specs = land ? [
    { i: "land", v: p.land_info && p.land_info.category || "土地" },
    { i: "ruler", v: (p.land_ping || "—") + " 坪", mono: true },
    { i: "pin", v: p.land_info && p.land_info.road_width || null }
  ] : [
    { i: "bed", v: p.layout },
    { i: "ruler", v: (p.size_ping || "—") + " 坪", mono: true },
    { i: "floor", v: p.floor },
    { i: "car", v: parkingLabel(p) }
  ];

  return (
    <a href={urlFor("detail", p.id)} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
      <article style={{
        background: "var(--surface)",
        borderRadius: "var(--radius-lg)",
        border: "1px solid var(--border)",
        overflow: "hidden",
        cursor: "pointer",
        transition: "all .2s",
        boxShadow: "var(--shadow-1)",
        display: "flex", flexDirection: "column", height: "100%"
      }}
        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-2)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-1)"; e.currentTarget.style.transform = "translateY(0)"; }}>

        <div style={{ position: "relative" }}>
          <PropPhoto p={p} label={`${p.kind}`} height={imgH} hue={index} thumb />
          <div style={{
            position: "absolute", top: 12, right: 12,
            padding: "4px 10px", borderRadius: 999,
            background: "rgba(42,31,20,.78)", color: "#F5EBDB",
            fontSize: 11, fontWeight: 600, letterSpacing: ".04em"
          }}>{p.kind}</div>
          {p.is_hot &&
            <div style={{
              position: "absolute", top: 12, left: 12,
              display: "flex", alignItems: "center", gap: 4,
              padding: "5px 10px", borderRadius: 999,
              background: "var(--gold)", color: "var(--ink)",
              fontSize: 11, fontWeight: 600, letterSpacing: ".02em",
              boxShadow: "0 2px 6px rgba(0,0,0,.1)"
            }}>
              <Icon name="fire" size={12} /> 熱門主推
            </div>}
          {p.sold &&
            <div style={{
              position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
              background: "rgba(42,31,20,.45)", color: "white",
              fontSize: 22, fontWeight: 700, letterSpacing: ".3em"
            }}>已成交</div>}
        </div>
        <div style={{ padding: compact ? "14px 16px 16px" : "18px 20px 20px", display: "flex", flexDirection: "column", gap: compact ? 8 : 10, flex: 1 }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: ".05em", marginBottom: 4 }} className="mono">
              {p.city} {p.district}
            </div>
            <h3 className="serif" style={{ margin: 0, fontSize: compact ? 16 : 18, fontWeight: 500, lineHeight: 1.3, color: "var(--ink)" }}>
              {p.title}
            </h3>
          </div>

          <div style={{ display: "flex", gap: 14, fontSize: 13, color: "var(--ink-2)", flexWrap: "wrap", paddingTop: 4 }}>
            {specs.filter(s => s.v).map((s, i) =>
              <span key={i} style={{ display: "flex", alignItems: "center", gap: 4 }} className={s.mono ? "mono" : ""}>
                <Icon name={s.i} size={14} /> {s.v}
              </span>
            )}
          </div>

          <div style={{ marginTop: "auto", paddingTop: compact ? 4 : 8, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <PriceDisplay price={p.price} original={p.original_price} compact={compact} />
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>
              {timeAgo(p.updated_at)}
            </span>
          </div>
        </div>
      </article>
    </a>);
}

// ── 搜尋列 ──────────────────────────────────────────────────
function SearchBar({ filters, setFilters, onSearch }) {
  const districts = CITY_DISTRICTS[filters.city] || CITY_DISTRICTS["台中市"];
  const types = ["不限"].concat(KINDS);
  const onCityChange = (city) => setFilters({ ...filters, city, district: "不限" });
  const onKey = (e) => { if (e.key === "Enter") onSearch(); };

  return (
    <div className="searchbar" style={{
      background: "var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xl)",
      padding: 8,
      boxShadow: "var(--shadow-2)",
      display: "flex", alignItems: "stretch", gap: 0
    }}>
      <div style={{ flex: "0.85", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 2, borderRight: "1px solid var(--border-2)" }}>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".08em" }}>縣市</div>
        <select value={filters.city || "台中市"} onChange={(e) => onCityChange(e.target.value)} style={selectStyle}>
          {CITIES.map((c) => <option key={c}>{c}</option>)}
        </select>
      </div>
      <div style={{ flex: "1", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 2, borderRight: "1px solid var(--border-2)" }}>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".08em" }}>區域</div>
        <select value={filters.district} onChange={(e) => setFilters({ ...filters, district: e.target.value })} style={selectStyle}>
          {districts.map((d) => <option key={d}>{d}</option>)}
        </select>
      </div>
      <div style={{ flex: "0.95", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 2, borderRight: "1px solid var(--border-2)" }}>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".08em" }}>種類</div>
        <select value={filters.kind} onChange={(e) => setFilters({ ...filters, kind: e.target.value })} style={selectStyle}>
          {types.map((t) => <option key={t}>{t}</option>)}
        </select>
      </div>
      <div style={{ flex: "1.3", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 2, borderRight: "1px solid var(--border-2)" }}>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".08em" }}>總價 (萬)</div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14 }} className="mono">
          <input type="number" placeholder="不限" value={filters.minPrice} onKeyDown={onKey} onChange={(e) => setFilters({ ...filters, minPrice: e.target.value })} style={inputStyle} />
          <span style={{ color: "var(--ink-3)" }}>—</span>
          <input type="number" placeholder="不限" value={filters.maxPrice} onKeyDown={onKey} onChange={(e) => setFilters({ ...filters, maxPrice: e.target.value })} style={inputStyle} />
        </div>
      </div>
      <div style={{ flex: "1.1", padding: "10px 18px", display: "flex", flexDirection: "column", gap: 2 }}>
        <div style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".08em" }}>關鍵字</div>
        <input placeholder="如「水湳」「捷運」「學區」" value={filters.q} onKeyDown={onKey} onChange={(e) => setFilters({ ...filters, q: e.target.value })} style={{ ...inputStyle, fontFamily: "inherit" }} />
      </div>
      <button onClick={onSearch} style={{
        appearance: "none", border: 0, cursor: "pointer",
        background: "var(--gold)", color: "var(--ink)",
        borderRadius: "calc(var(--radius-xl) - 6px)",
        padding: "0 26px", fontSize: 15, fontWeight: 600,
        display: "flex", alignItems: "center", gap: 8,
        boxShadow: "0 1px 0 rgba(255,255,255,.4) inset",
        fontFamily: "inherit", whiteSpace: "nowrap"
      }}>
        <Icon name="search" size={18} /> 搜尋
      </button>
    </div>);
}

const selectStyle = {
  appearance: "none", border: 0, background: "transparent",
  fontFamily: "inherit", fontSize: 14, color: "var(--ink)",
  padding: 0, outline: "none", cursor: "pointer",
  fontWeight: 500
};
const inputStyle = {
  appearance: "none", border: 0, background: "transparent",
  fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--ink)",
  padding: 0, outline: "none", minWidth: 0, width: "100%"
};

// ── 實價登錄走勢圖 ──────────────────────────────────────────
function PriceHistory({ data }) {
  const max = Math.max(...data.map((d) => d.p));
  const min = Math.min(...data.map((d) => d.p));
  const range = Math.max(max - min, 1);
  const W = 560, H = 160, P = 24;
  const points = data.map((d, i) => ({
    x: P + i * ((W - P * 2) / (data.length - 1)),
    y: P + (1 - (d.p - min) / range) * (H - P * 2),
    p: d.p, m: d.m
  }));
  const path = points.map((pt, i) => `${i ? "L" : "M"}${pt.x},${pt.y}`).join(" ");
  const area = `${path} L${W - P},${H - P} L${P},${H - P} Z`;

  return (
    <div style={{ width: "100%", overflow: "visible" }}>
      <svg viewBox={`0 0 ${W} ${H + 24}`} style={{ width: "100%", height: "auto" }}>
        <defs>
          <linearGradient id="ar" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--gold)" stopOpacity=".25" />
            <stop offset="100%" stopColor="var(--gold)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[0, 0.25, 0.5, 0.75, 1].map((t) =>
          <line key={t} x1={P} x2={W - P} y1={P + t * (H - P * 2)} y2={P + t * (H - P * 2)} stroke="var(--border-2)" strokeDasharray="2 4" />
        )}
        <path d={area} fill="url(#ar)" />
        <path d={path} fill="none" stroke="var(--gold)" strokeWidth="2" />
        {points.map((pt, i) =>
          <g key={i}>
            <circle cx={pt.x} cy={pt.y} r="4" fill="var(--surface)" stroke="var(--gold)" strokeWidth="2" />
            <text x={pt.x} y={pt.y - 10} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="var(--ink-2)">{pt.p}</text>
            <text x={pt.x} y={H + 10} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-3)">{pt.m}</text>
          </g>
        )}
      </svg>
    </div>);
}

// ── 頁尾 ────────────────────────────────────────────────────
function Footer() {
  const kindLinks = ["電梯大樓", "公寓", "別墅", "土地"];
  return (
    <footer className="footer-grid" style={{
      borderTop: "1px solid var(--border)",
      padding: "40px 36px 32px",
      background: "var(--bg-2)",
      display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 40
    }}>
      <div>
        <BrandMark size={26} />
        <p style={{ marginTop: 16, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.7, maxWidth: 280 }}>
          專營台中北區、北屯、水湳、G7 中清捷運商圈不動產買賣與包租代管，超過 {AGENT.yrs} 年在地經驗。
        </p>
        <p style={{ marginTop: 8, fontSize: 11, color: "var(--ink-3)" }} className="mono">
          {AGENT.cert}
        </p>
      </div>
      <div>
        <h4 style={{ fontSize: 12, color: "var(--ink-3)", margin: "0 0 12px", letterSpacing: ".1em", fontWeight: 600 }}>物件種類</h4>
        {kindLinks.map((x) =>
          <a key={x} href={urlFor("list", { kind: x })} style={footerLink}>{x}</a>
        )}
        <a href={urlFor("list")} style={footerLink}>全部物件</a>
      </div>
      <div>
        <h4 style={{ fontSize: 12, color: "var(--ink-3)", margin: "0 0 12px", letterSpacing: ".1em", fontWeight: 600 }}>服務區域</h4>
        {[
          { l: "G7 中清捷運", q: "中清" },
          { l: "北區 / 水湳", q: "水湳" },
          { l: "北屯區", d: "北屯區" },
          { l: "西屯 / 科博", q: "科博" }].map((x) =>
            <a key={x.l} href={urlFor("list", x.d ? { district: x.d } : { q: x.q })} style={footerLink}>{x.l}</a>
          )}
      </div>
      <div>
        <h4 style={{ fontSize: 12, color: "var(--ink-3)", margin: "0 0 12px", letterSpacing: ".1em", fontWeight: 600 }}>聯絡</h4>
        <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.9, fontFamily: "var(--font-mono)" }}>
          <div>{AGENT.phone}</div>
          <div>{AGENT.storePhone} <span style={{ color: "var(--gold-deep)" }}>(找輝哥)</span></div>
          <div><a href={AGENT.lineUrl} target="_blank" rel="noopener" style={{ color: "var(--gold-deep)", textDecoration: "none" }}>加 LINE 好友 →</a></div>
          <div>週一至週日 9:00–21:00</div>
        </div>
      </div>
      <div style={{ gridColumn: "1 / -1", borderTop: "1px solid var(--border)", paddingTop: 20, marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11, color: "var(--ink-3)", flexWrap: "wrap", gap: 10 }} className="mono">
        <span>© 2026 {AGENT.brandPrimary} · 找輝哥 · 永慶不動產 中清捷運加盟店</span>
        <a href={urlFor("admin-login")} style={{ color: "var(--ink-3)", textDecoration: "none", padding: "4px 10px", border: "1px solid var(--border)", borderRadius: 999 }}>
          管理員登入
        </a>
      </div>
    </footer>);
}
const footerLink = {
  display: "block", fontSize: 13, color: "var(--ink-2)",
  textDecoration: "none", lineHeight: 2
};

// ── 共用按鈕樣式 ────────────────────────────────────────────
const primaryBtn = {
  appearance: "none", border: 0, cursor: "pointer",
  background: "var(--gold)", color: "var(--ink)",
  padding: "14px 22px", borderRadius: 999,
  fontFamily: "inherit", fontSize: 14, fontWeight: 600,
  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
  boxShadow: "0 1px 0 rgba(255,255,255,.4) inset, var(--shadow-1)",
  textDecoration: "none",
  transition: "transform .1s"
};
const secondaryBtn = {
  appearance: "none", cursor: "pointer",
  background: "var(--surface)", color: "var(--ink)",
  border: "1px solid var(--border)",
  padding: "12px 22px", borderRadius: 999,
  fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 500,
  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
  textDecoration: "none"
};
const ghostBtn = {
  appearance: "none", border: 0, cursor: "pointer",
  background: "transparent", color: "var(--ink-2)",
  padding: "8px 14px", borderRadius: 999,
  fontFamily: "inherit", fontSize: 14, fontWeight: 500,
  display: "inline-flex", alignItems: "center", gap: 6,
  textDecoration: "none"
};
const chipBtn = {
  appearance: "none", cursor: "pointer",
  background: "transparent", color: "var(--ink-2)",
  border: "1px solid var(--border)",
  padding: "8px 14px", borderRadius: 999,
  fontFamily: "inherit", fontSize: 13, fontWeight: 500,
  textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6
};
const formInput = {
  appearance: "none",
  background: "var(--bg)", border: "1px solid var(--border)",
  padding: "12px 14px", borderRadius: 8,
  fontSize: 14, color: "var(--ink)", fontFamily: "var(--font-mono)",
  outline: "none"
};

// 掛到 window，讓各頁 jsx 取用（babel 個別編譯，scope 不互通）
Object.assign(window, {
  Icon, BrandMark, LineLogo, TopNav, PropPhoto, PriceDisplay,
  PropertyCard, SearchBar, PriceHistory, Footer,
  primaryBtn, secondaryBtn, ghostBtn, chipBtn, formInput
});