// 39 Uchi — Home: hero one-liner, the two rooms inside the apartment, quiet about strip
const HomeNS = window.Ds39UchiDesignSystem_266f47;

function Hero({ onNav }) {
  const { Button, Eyebrow } = HomeNS;
  const vw = useViewport();
  const m = vw < 760, t = vw < 1024;
  const px = m ? 20 : t ? 32 : 48;
  return (
    <section style={{ padding: `${m ? 44 : 88}px ${px}px ${m ? 40 : 72}px`, display: "grid", gridTemplateColumns: m ? "1fr" : "1.05fr 0.95fr", gap: m ? 32 : 56, alignItems: "center" }}>
      <div>
        <Eyebrow>Stay · Đà Lạt</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: m ? 40 : t ? 56 : 72, lineHeight: 1.02, letterSpacing: "-0.03em", margin: "22px 0 0" }}>
          Trốn giữa phố.
        </h1>
        <p style={{ fontFamily: "var(--font-text)", fontSize: m ? 16 : 18, lineHeight: 1.6, color: "var(--text-muted)", maxWidth: "46ch", margin: "24px 0 0" }}>
          Một căn hộ 2 tầng tối giản, cho thuê nguyên căn ngay trung tâm. Tối đa 4 khách. Riêng tư, ánh sáng tự nhiên, chăm sóc thầm lặng.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 36 }}>
          <Button variant="primary" size="lg" onClick={() => onNav("detail")}>Đặt phòng</Button>
          <Button variant="secondary" size="lg" onClick={() => onNav("detail")}>Xem căn hộ</Button>
        </div>
        <p style={{ fontFamily: "var(--font-text)", fontSize: 13.5, color: "var(--text-faint)", margin: "22px 0 0" }}>
          Nguyên căn · tối đa 4 khách · 1 phòng tắm
        </p>
      </div>
      <Photo label="căn hộ 2 tầng" slotId="home-hero" ratio={m ? "4 / 3" : "4 / 5"} />
    </section>
  );
}

function RoomsSection({ onNav }) {
  const { Eyebrow } = HomeNS;
  const vw = useViewport();
  const m = vw < 760, t = vw < 1024;
  const px = m ? 20 : t ? 32 : 48;
  const rooms = [
    { kanji: "光", roman: "Hikari", level: "Tầng trên", desc: "Cửa sổ lớn, nhiều sáng. Phòng ngủ đón nắng sớm." },
    { kanji: "影", roman: "Kage", level: "Tầng dưới", desc: "Kín hơn, yên hơn. Dành cho giấc ngủ sâu." },
  ];
  return (
    <section style={{ padding: `8px ${px}px ${m ? 48 : 64}px` }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 10, marginBottom: 26 }}>
        <div>
          <Eyebrow>Bên trong</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: m ? 26 : 32, letterSpacing: "-0.02em", margin: "10px 0 0" }}>Hai phòng ngủ, hai tâm trạng</h2>
        </div>
        {!m && <span style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "var(--text-muted)" }}>Trong cùng một căn hộ</span>}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(2, 1fr)", gap: 22 }}>
        {rooms.map((r) => (
          <div key={r.roman} onClick={() => onNav("detail")} style={{ cursor: "pointer" }}>
            <Photo label={r.level.toLowerCase()} slotId={"room-" + r.roman.toLowerCase()} ratio="3 / 2" />
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 16 }}>
              <span style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 30, color: "var(--accent)", lineHeight: 1 }}>{r.kanji}</span>
              <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.01em", margin: 0 }}>{r.roman}</h3>
              <span style={{ fontFamily: "var(--font-text)", fontSize: 13, color: "var(--text-faint)" }}>{r.level}</span>
            </div>
            <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.6, color: "var(--text-muted)", margin: "8px 0 0", maxWidth: "38ch" }}>{r.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AboutStrip() {
  const { Eyebrow } = HomeNS;
  const vw = useViewport();
  const m = vw < 760, t = vw < 1024;
  const px = m ? 20 : t ? 32 : 48;
  const items = [
    ["Riêng tư", "Nhận phòng tự động. Không sảnh, không chờ."],
    ["Đâu vào đó", "Nước nóng nhanh. Wifi ổn định. Bếp đủ nấu."],
    ["Bước ra là phố", "Chợ đêm, quán ăn, cà phê, cửa hàng tiện lợi chỉ cần vài phút đi bộ."],
  ];
  return (
    <section style={{ padding: `${m ? 48 : 72}px ${px}px`, borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <Eyebrow>Vì sao 39</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(3, 1fr)", gap: m ? 26 : 40, marginTop: 28 }}>
        {items.map(([t2, d]) => (
          <div key={t2}>
            <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.01em", margin: 0 }}>{t2}</h3>
            <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.6, color: "var(--text-muted)", margin: "10px 0 0", maxWidth: "34ch" }}>{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function NearbyRow({ vi, en, dist }) {
  const [hover, setHover] = React.useState(false);
  const href = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(en + " Da Lat");
  return (
    <a href={href} target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
        padding: "12px 2px", borderTop: "1px solid var(--border)", cursor: "pointer" }}>
      <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 15, color: hover ? "var(--accent)" : "var(--text)", transition: "color var(--dur-2) var(--ease-std)" }}>{vi}</span>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12, color: "var(--text-faint)" }}>{en}</span>
      </span>
      <span style={{ fontFamily: "var(--font-text)", fontVariantNumeric: "tabular-nums", fontSize: 14, color: "var(--text-muted)", whiteSpace: "nowrap" }}>{dist}</span>
    </a>
  );
}

function MapSection() {
  const { Eyebrow } = HomeNS;
  const vw = useViewport();
  const m = vw < 760, t = vw < 1024;
  const px = m ? 20 : t ? 32 : 48;
  const nearby = [
    ["Khu Hòa Bình", "Hoa Binh Square", "250 m"],
    ["Chợ đêm Đà Lạt", "Da Lat Night Market", "600 m"],
    ["Hồ Xuân Hương", "Xuan Huong Lake", "1 km"],
    ["Quảng trường Lâm Viên", "Lam Vien Square", "1,6 km"],
    ["Vườn hoa thành phố", "Da Lat Flower Garden", "2,6 km"],
  ];
  return (
    <section style={{ padding: `${m ? 48 : 72}px ${px}px`, borderBottom: "1px solid var(--border)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 8, marginBottom: 26 }}>
        <div>
          <Eyebrow>Bản đồ</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: m ? 26 : 32, letterSpacing: "-0.02em", margin: "10px 0 0" }}>Ngay giữa trung tâm</h2>
        </div>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "var(--text-muted)" }}>39 Nguyễn Văn Trỗi · Đà Lạt</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: t ? "1fr" : "1.5fr 0.85fr", gap: t ? 24 : 36, alignItems: "start" }}>
        <div style={{ border: "1px solid var(--border)", borderRadius: "var(--r-md)", overflow: "hidden", lineHeight: 0 }}>
          <iframe
            title="39 Uchi trên bản đồ"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3903.4193128386078!2d108.435603!3d11.945443899999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31711365db35ce1f%3A0x77432836c062c129!2s39%20Uchi!5e0!3m2!1sen!2s!4v1781435833585!5m2!1sen!2s"
            width="100%" height={m ? 320 : t ? 400 : 480} loading="lazy" allowFullScreen
            referrerPolicy="no-referrer-when-downgrade"
            style={{ border: 0, display: "block", width: "100%", filter: "grayscale(0.2) contrast(1.03)" }}
          ></iframe>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-faint)", marginBottom: 6 }}>Quanh đây</div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {nearby.map(([vi, en, dist]) => <NearbyRow key={en} vi={vi} en={en} dist={dist} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ onNav }) {
  return (
    <div>
      <Hero onNav={onNav} />
      <RoomsSection onNav={onNav} />
      <AboutStrip />
      <MapSection />
    </div>
  );
}

Object.assign(window, { Home });