// home.jsx — 首頁
function HomePage() {
  const hot = PROPERTIES.filter((p) => p.is_hot && !p.sold).slice(0, 2);
  const recent = [...PROPERTIES].filter((p) => !p.sold)
    .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
    .slice(0, 6);
  const [filters, setFilters] = useState({ city: "台中市", district: "不限", kind: "不限", minPrice: "", maxPrice: "", q: "" });
  const [heroIdx, setHeroIdx] = useState(0);
  const heroProps = (hot.length ? hot : PROPERTIES).slice(0, 3);

  useEffect(() => {
    const t = setInterval(() => setHeroIdx((i) => (i + 1) % Math.max(heroProps.length, 1)), 5000);
    return () => clearInterval(t);
  }, []);

  const doSearch = () => go("list", {
    city: filters.city, district: filters.district === "不限" ? "" : filters.district,
    kind: filters.kind === "不限" ? "" : filters.kind,
    min: filters.minPrice, max: filters.maxPrice, q: filters.q
  });

  return (
    <div>
      <TopNav active="home" />

      {/* HERO 輪播 */}
      <section style={{ position: "relative", height: 560, overflow: "hidden" }}>
        {heroProps.map((p, i) =>
          <div key={i} style={{
            position: "absolute", inset: 0,
            opacity: heroIdx === i ? 1 : 0,
            transition: "opacity 1s"
          }}>
            <PropPhoto p={p} label={`${p.title}`} height={560} hue={i * 2} />
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(42,31,20,.15) 0%, rgba(42,31,20,.55) 100%)"
            }} />
          </div>
        )}
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "0 36px 90px",
          display: "flex", flexDirection: "column", gap: 18,
          color: "white", maxWidth: 1200, margin: "0 auto"
        }}>
          <span style={{
            fontSize: 12, letterSpacing: ".2em", textTransform: "uppercase",
            color: "rgba(255,255,255,.85)",
            display: "flex", alignItems: "center", gap: 10
          }}>
            <span style={{ width: 24, height: 1, background: "var(--gold)" }} />
            台中 · 在地超過 {AGENT.yrs} 年
          </span>
          <h1 className="serif hero-h1" style={{
            margin: 0, fontSize: 64, fontWeight: 500, lineHeight: 1.1,
            color: "white", letterSpacing: "-.02em", maxWidth: 720
          }}>
            在台中，<br />找一個家。
          </h1>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,.85)", maxWidth: 520, margin: 0, lineHeight: 1.7 }}>
            {AGENT.slogan}。{AGENT.fullName} · {AGENT.title}。專營北區水湳經貿、G7 中清捷運商圈、北屯重劃區。
          </p>
        </div>
        <div style={{ position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 8 }}>
          {heroProps.map((_, i) =>
            <button key={i} onClick={() => setHeroIdx(i)} style={{
              width: heroIdx === i ? 28 : 8, height: 8, borderRadius: 999, border: 0,
              background: heroIdx === i ? "var(--gold)" : "rgba(255,255,255,.5)",
              cursor: "pointer", transition: "all .3s"
            }} />
          )}
        </div>
      </section>

      {/* 搜尋列（浮在 hero 上） */}
      <section style={{ position: "relative", maxWidth: 1180, margin: "-44px auto 0", padding: "0 36px", zIndex: 5 }}>
        <SearchBar filters={filters} setFilters={setFilters} onSearch={doSearch} />
      </section>

      {/* 種類快速入口 */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "48px 36px 0", display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
        {KINDS.map((k) => {
          const n = PROPERTIES.filter((p) => p.kind === k && !p.sold).length;
          return (
            <a key={k} href={urlFor("list", { kind: k })} style={{
              ...chipBtn,
              background: n ? "var(--surface)" : "transparent",
              opacity: n ? 1 : 0.45
            }}>
              {k} <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{n}</span>
            </a>);
        })}
      </section>

      {/* 本週主推 */}
      {hot.length > 0 &&
        <section style={{ maxWidth: 1280, margin: "0 auto", padding: "56px 36px 40px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
            <div>
              <span style={{ fontSize: 12, color: "var(--gold-deep)", letterSpacing: ".2em" }}>— HOT</span>
              <h2 className="serif" style={{ margin: "8px 0 4px", fontSize: 36, fontWeight: 500, letterSpacing: "-.01em" }}>
                本週主推
              </h2>
              <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14 }}>由輝哥親自挑選、屋況最佳的物件</p>
            </div>
            <a href={urlFor("list", { hot: 1 })} style={ghostBtn}>
              更多 <Icon name="arrow" size={14} />
            </a>
          </div>
          <div className="cards-grid-2">
            {hot.map((p, i) =>
              <PropertyCard key={p.id} p={p} index={i} />
            )}
          </div>
        </section>}

      {/* 最新上架 */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 36px 80px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
          <h2 className="serif" style={{ margin: 0, fontSize: 28, fontWeight: 500 }}>最新上架</h2>
          <a href={urlFor("list")} style={ghostBtn}>
            看全部物件 <Icon name="arrow" size={14} />
          </a>
        </div>
        <div className="cards-grid">
          {recent.map((p, i) =>
            <PropertyCard key={p.id} p={p} index={i + 2} />
          )}
        </div>
      </section>

      {/* 關於輝哥 */}
      <section style={{ background: "var(--bg-2)", padding: "80px 36px" }}>
        <div className="two-col" style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <img src={photoUrl(AGENT.photo)} alt={AGENT.fullName} style={{ width: 280, height: 360, objectFit: "cover", borderRadius: 12, border: "1px solid var(--border)", display: "block" }} />
          </div>
          <div>
            <span style={{ fontSize: 12, color: "var(--gold-deep)", letterSpacing: ".2em" }}>— ABOUT</span>
            <h2 className="serif" style={{ margin: "8px 0 24px", fontSize: 40, fontWeight: 500, letterSpacing: "-.01em" }}>
              我是輝哥，<br />專業比熱情長久。
            </h2>
            <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.9, margin: "0 0 16px", maxWidth: 480 }}>
              超過 {AGENT.yrs} 年來，我只專注台中北區、北屯、水湳三個區域。
              不是因為其他地方不好，而是我相信「在地深耕」才能真正理解每一條街的脈動。
            </p>
            <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.9, margin: "0 0 32px", maxWidth: 480 }}>
              我承諾每一件物件都實地看過、每一位屋主都當面談過、每一張照片都不修圖。
            </p>
            <a href={urlFor("about")} style={{ ...primaryBtn, background: "var(--ink)", color: "var(--bg)" }}>
              認識輝哥 <Icon name="arrow" size={14} />
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>);
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <div className="page-transition"><HomePage /></div>
);