const ROOMS = [
  { name: "Peace Room", desc: "Double Room", price: "R1,549", tag: "Guest favorite" },
  { name: "Joy Room", desc: "Double Room", price: "R1,399", tag: "Best value" },
  { name: "Grace Room", desc: "Double Room", price: "R1,399", tag: "Popular" },
];

const EXPERIENCES = ["Private chef & catering", "Zonke's Spa (on-call treatments)", "Function hosting for small gatherings"];

function HomeScreen({ Button, Card, Badge, Input, Select, onViewRoom, onNavigate }) {
  const PhotoPlaceholder = window.PhotoPlaceholder;
  const ReviewsScreen = window.ReviewsScreen;
  return (
    <div style={{ fontFamily: "var(--font-sans-body)" }}>
      <div style={{ position: "relative" }}>
        <PhotoPlaceholder height={520} radius="0" label="Golden-hour hero photograph" />
        <div style={{
          position: "absolute", inset: 0, display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", textAlign: "center", padding: 24,
          background: "linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55))",
        }}>
          <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-100)", marginBottom: 14 }}>
            Hidden in plain sight
          </span>
          <h1 style={{ font: "var(--text-display-xl)", color: "#fff", margin: "0 0 16px" }}>A space to simply be</h1>
          <p style={{ font: "var(--text-body-lg)", color: "rgba(255,255,255,0.88)", maxWidth: 560, marginBottom: 32 }}>
            Located in the heart of Nongoma, The Hide is your quiet retreat — rest, attend to your plans, or just escape it all. No pressure, just presence.
          </p>
        </div>
      </div>

      <div style={{
        maxWidth: 980, margin: "-36px auto 0", position: "relative", background: "var(--color-bg-raised)",
        borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", padding: 24,
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: 16, alignItems: "end",
      }}>
        <Input label="Check-in" type="date" />
        <Input label="Check-out" type="date" />
        <Select label="Guests" placeholder="2 adults" options={[{ value: "2", label: "2 adults" }, { value: "4", label: "2 adults, 2 children" }]} />
        <Button variant="primary" icon="search" onClick={() => onNavigate("rooms")}>Check availability</Button>
      </div>

      <section style={{ maxWidth: 1160, margin: "88px auto 0", padding: "0 24px" }}>
        <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-700)" }}>Rooms & Suites</span>
        <h2 style={{ font: "var(--text-display-lg)", margin: "10px 0 36px", color: "var(--color-text-primary)" }}>Where to stay</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {ROOMS.map((r) => (
            <Card key={r.name} padding="0" elevated style={{ overflow: "hidden", cursor: "pointer" }} >
              <div onClick={() => onViewRoom(r)}>
                <PhotoPlaceholder height={200} radius="0" label={r.name} />
                <div style={{ padding: 20 }}>
                  <div style={{ marginBottom: 10 }}><Badge tone="gold" icon="star">{r.tag}</Badge></div>
                  <div style={{ font: "var(--text-display-sm)", marginBottom: 6, color: "var(--color-text-primary)" }}>{r.name}</div>
                  <div style={{ font: "var(--text-body-sm)", color: "var(--color-text-secondary)", marginBottom: 14 }}>{r.desc}</div>
                  <div style={{ font: "var(--text-label-lg)", color: "var(--color-text-primary)" }}>{r.price} <span style={{ color: "var(--color-text-muted)", fontWeight: 400 }}>/ night</span></div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 1160, margin: "88px auto 0", padding: "0 24px" }}>
        <span style={{ font: "var(--text-label-sm)", letterSpacing: "var(--tracking-eyebrow)", textTransform: "uppercase", color: "var(--gold-700)" }}>Services</span>
        <h2 style={{ font: "var(--text-display-lg)", margin: "10px 0 12px", color: "var(--color-text-primary)" }}>Beyond the room</h2>
        <p style={{ font: "var(--text-body-md)", color: "var(--color-text-secondary)", maxWidth: 640, margin: "0 0 36px" }}>
          Board games available on request (small charge applies). High chair and baby cot available for family stays.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {EXPERIENCES.map((e) => (
            <div key={e}>
              <PhotoPlaceholder height={160} label={e} />
              <div style={{ font: "var(--text-body-md)", marginTop: 14, color: "var(--color-text-primary)" }}>{e}</div>
            </div>
          ))}
        </div>
      </section>

      {ReviewsScreen && <ReviewsScreen />}

      <section style={{ background: "var(--color-bg-sunken)", margin: "96px 0 0", padding: "80px 24px", textAlign: "center" }}>
        <blockquote style={{ font: "italic 500 1.75rem/1.5 var(--font-serif-display)", maxWidth: 720, margin: "0 auto 20px", color: "var(--color-text-primary)" }}>
          “Whether you're passing through or staying in, The Hide invites you to slow down and stay a while.”
        </blockquote>
        <div style={{ font: "var(--text-label-md)", color: "var(--color-text-muted)" }}>— The Hide (at Nongoma)</div>
      </section>
    </div>
  );
}
window.HomeScreen = HomeScreen;