/* === Page views ====================================================== */

/* Room data is now i18n-keyed; resolved per render */
const ROOM_DEFS = [
  {
    id: 'standard',
    nameKey: 'room_standard_name',
    blurbKey: 'room_standard_blurb',
    tagKey: 'best_value',
    price: 500,
    size: '18 m²',
    beds: '2 single beds',
    photo: 'assets/standard%20twins%201.jpeg',
    photoAlt: 'Standard twin room',
    photos: [
      { src: 'assets/standard twins 1.jpeg', alt: 'Standard twin room' },
      { src: 'assets/standard twins 2.jpeg', alt: 'Standard twin room' },
      { src: 'assets/standard twins 3.jpeg', alt: 'Standard twin room' },
      { src: 'assets/room-03.jpg', alt: 'Standard twin room' },
    ],
    amenityKeys: ['amen_wifi', 'amen_hotwater', 'amen_reception', 'amen_parking'],
  },
  {
    id: 'family',
    nameKey: 'room_family_name',
    blurbKey: 'room_family_blurb',
    tagKey: 'family_favourite',
    price: 1000,
    size: '24 m²',
    beds: '1 double + 1 single',
    photo: 'assets/room-01.jpg',
    photoAlt: 'Family room with red curtains',
    photos: [
      { src: 'assets/room-01.jpg',    alt: 'Family room' },
      { src: 'assets/room-02.jpg',    alt: 'Family room' },
      { src: 'assets/twins 1.jpeg', alt: 'Family room' },
      { src: 'assets/twins 2.jpeg', alt: 'Family room' },
    ],
    amenityKeys: ['amen_wifi', 'amen_hotwater', 'amen_kitchen', 'amen_reception'],
  },
  {
    id: 'deluxe',
    nameKey: 'room_deluxe_name',
    blurbKey: 'room_deluxe_blurb',
    tagKey: 'most_popular',
    price: 1500,
    size: '26 m²',
    beds: '2 single beds',
    photo: 'assets/dlx%20ac%201.jpeg',
    photoAlt: 'Deluxe AC room',
    photos: [
      { src: 'assets/dlx ac 1.jpeg', alt: 'Deluxe AC room' },
      { src: 'assets/dlx ac 2.jpeg', alt: 'Deluxe AC room' },
      { src: 'assets/dlx ac 3.jpeg', alt: 'Deluxe AC room' },
      { src: 'assets/room-04.jpg',       alt: 'Deluxe AC room' },
    ],
    amenityKeys: ['amen_ac', 'amen_wifi', 'amen_hotwater', 'amen_reception'],
  },
];

function getRooms(t) {
  return ROOM_DEFS.map(r => ({
    ...r,
    name: t(r.nameKey),
    blurb: t(r.blurbKey),
    tag: t(r.tagKey),
    priceLabel: `NPR ${r.price.toLocaleString()}`,
  }));
}

const EXPERIENCE_DEFS = [
  { id: 'temple', icon: 'Temple',   key: 'exp_temple' },
  { id: 'market', icon: 'Basket',   key: 'exp_market' },
  { id: 'trail',  icon: 'Mountain', key: 'exp_trail' },
  { id: 'food',   icon: 'Fork',     key: 'exp_food' },
];

const MENU_DEFS = [
  { id: 'dal_bhat', nameKey: 'menu_dal_bhat', descKey: 'menu_dal_bhat_d', price: 380 },
  { id: 'momo',     nameKey: 'menu_momo',     descKey: 'menu_momo_d',     price: 220 },
  { id: 'thakali',  nameKey: 'menu_thakali',  descKey: 'menu_thakali_d',  price: 520 },
  { id: 'chow',     nameKey: 'menu_chow',     descKey: 'menu_chow_d',     price: 280 },
  { id: 'chiya',    nameKey: 'menu_chiya',    descKey: 'menu_chiya_d',    price: 60 },
];

/* ====================================================================
   HOME
==================================================================== */

function Hero({ onBook, onNav, tweaks }) {
  const t = useT();
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const onS = () => setScroll(window.scrollY);
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);
  const py = Math.min(scroll, 600);

  const heroStyle = tweaks.heroStyle || 'video';

  return (
    <section style={{ position: 'relative', minHeight: '92vh', overflow: 'hidden' }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, transform: `translateY(${py * 0.3}px) scale(${1 + py * 0.0003})`, transition: 'transform 50ms linear' }}>
        {heroStyle === 'video' ? (
          <video
            src="assets/property.mp4"
            autoPlay muted loop playsInline
            style={{ position: 'absolute', inset: 0, width: '100%', height: '110vh', objectFit: 'cover' }}
          />
        ) : heroStyle === 'photo' ? (
          <img
            src="assets/room-01.jpg"
            alt=""
            style={{ position: 'absolute', inset: 0, width: '100%', height: '110vh', objectFit: 'cover' }}
          />
        ) : (
          <div style={{ position: 'absolute', inset: 0, width: '100%', height: '110vh', background: 'var(--metal-grad)' }}/>
        )}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)' }}/>
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%)', pointerEvents: 'none' }}/>

      <div className="container" style={{ position: 'relative', zIndex: 2, minHeight: '92vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 80, paddingTop: 120 }}>
        <Reveal delay={100}>
          <div className="eyebrow hero-eyebrow" style={{ marginBottom: 28, color: 'rgba(255,255,255,0.85)' }}>{t('hero_eyebrow')}</div>
        </Reveal>
        <Reveal delay={200}>
          <h1 className="display" style={{ maxWidth: 920, color: '#FFF' }}>
            {t('hero_title_a')} <em className="gold-text">{t('hero_title_em')}</em> {t('hero_title_b')}
          </h1>
        </Reveal>
        <Reveal delay={400}>
          <p style={{ maxWidth: 560, marginTop: 28, fontSize: 18, lineHeight: 1.7, color: 'rgba(255,255,255,0.8)', fontWeight: 300 }}>
            {t('hero_lead')}
          </p>
        </Reveal>
        <Reveal delay={600}>
          <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={onBook}>{t('reserve_stay')} <Icon.Arrow /></button>
            <button className="btn btn-ghost" onClick={() => onNav('rooms')} style={{ color: '#FFF', borderColor: 'rgba(255,255,255,0.4)' }}>{t('explore_rooms')}</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BookingStrip({ onBook }) {
  const t = useT();
  return (
    <div className="container booking-strip-wrap" style={{ marginTop: -56, marginBottom: 56 }}>
      <div className="booking-strip" style={{
        background: 'var(--surface)',
        border: '1px solid var(--line-2)',
        borderTop: '2px solid var(--accent)',
        padding: '28px 32px',
        display: 'grid',
        gridTemplateColumns: '1.2fr 1fr 1fr 1fr auto',
        gap: 32,
        alignItems: 'end',
        boxShadow: 'var(--shadow-2)',
      }}>
        <div className="field">
          <label className="field-label"><Icon.Cal style={{verticalAlign:'-3px', marginRight: 6}}/> {t('check_in')}</label>
          <input className="field-input" defaultValue="22 May 2026" />
        </div>
        <div className="field">
          <label className="field-label"><Icon.Cal style={{verticalAlign:'-3px', marginRight: 6}}/> {t('check_out')}</label>
          <input className="field-input" defaultValue="25 May 2026" />
        </div>
        <div className="field">
          <label className="field-label"><Icon.User style={{verticalAlign:'-3px', marginRight: 6}}/> {t('guests')}</label>
          <select className="field-select" defaultValue="2">
            <option>1 {t('adults')}</option>
            <option>2 {t('adults')}</option>
            <option>2 {t('adults')} · 1 {t('children')}</option>
            <option>3 {t('adults')}</option>
          </select>
        </div>
        <div className="field">
          <label className="field-label"><Icon.Bed style={{verticalAlign:'-3px', marginRight: 6}}/> {t('room_type')}</label>
          <select className="field-select">
            <option>{t('any_available')}</option>
            <option>{t('room_standard_name')}</option>
            <option>{t('room_family_name')}</option>
            <option>{t('room_deluxe_name')}</option>
          </select>
        </div>
        <button className="btn btn-primary" onClick={onBook} style={{ height: 56 }}>{t('check_availability')}</button>
      </div>
    </div>
  );
}

function HomeIntro() {
  const t = useT();
  return (
    <section className="section" style={{ paddingTop:0 }}>
      <div className="container">
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 96, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{t('home_intro_eyebrow')}</div>
            <h2 className="h-section" style={{ marginBottom: 28 }}>
              {t('home_intro_title_a')}<br/>
              <span className="gold-text serif" style={{ fontStyle: 'italic' }}>{t('home_intro_title_em')}</span>
            </h2>
            <p style={{ color: 'var(--fg-soft)', fontSize: 17, lineHeight: 1.75, marginBottom: 20, fontWeight: 300 }}>
              {t('home_intro_p1')}
            </p>
            <p style={{ color: 'var(--fg-soft)', fontSize: 17, lineHeight: 1.75, marginBottom: 36, fontWeight: 300 }}>
              {t('home_intro_p2')}
            </p>
            <button className="btn-link">{t('our_story')} <Icon.Arrow className="arrow"/></button>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ position: 'relative' }}>
              <Photo src="assets/dining-01.jpg" alt="Dining hall" aspect="3/4" />
              <div style={{ position: 'absolute', bottom: -28, right: -28, width: '55%' }}>
                <Photo src="assets/room-02.jpg" alt="Deluxe room" aspect="1/1" style={{ border: '6px solid var(--bg)' }}/>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HomeRooms({ onNav, onBook }) {
  const t = useT();
  const rooms = useMemo(() => getRooms(t), [t]);
  return (
    <section className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="rooms-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{t('rooms_eyebrow')}</div>
            <h2 className="h-section">{t('rooms_title_a')} <em className="gold-text serif" style={{fontStyle:'italic'}}>{t('rooms_title_em')}</em></h2>
          </Reveal>
          <Reveal delay={100}>
            <button className="btn-link" onClick={() => onNav('rooms')}>{t('view_all_rooms')} <Icon.Arrow className="arrow"/></button>
          </Reveal>
        </div>

        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {rooms.map((r, i) => (
            <Reveal key={r.id} delay={i * 120}>
              <RoomCard room={r} onSelect={onBook} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function RoomLightbox({ photo, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return ReactDOM.createPortal(
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(0,0,0,0.93)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      <button
        onClick={onClose}
        aria-label="Close lightbox"
        style={{
          position: 'absolute', top: 20, right: 20,
          background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
          color: '#fff', width: 44, height: 44, borderRadius: '50%',
          fontSize: 22, cursor: 'pointer', zIndex: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          lineHeight: 1,
        }}
      >✕</button>
      <img
        src={photo.src}
        alt={photo.alt}
        onClick={(e) => e.stopPropagation()}
        style={{ maxWidth: '92vw', maxHeight: '90vh', objectFit: 'contain', display: 'block' }}
      />
    </div>,
    document.body
  );
}

function RoomImageCarousel({ photos, tag, autoPlay = true, onImageClick }) {
  const [idx, setIdx] = useState(0);
  const [hovered, setHovered] = useState(false);
  const n = photos.length;

  useEffect(() => {
    if (!autoPlay || hovered || n <= 1) return;
    const timer = setInterval(() => setIdx(i => (i + 1) % n), 3500);
    return () => clearInterval(timer);
  }, [autoPlay, hovered, n]);

  return (
    <div
      style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', background: 'var(--bg-2)', cursor: onImageClick ? 'zoom-in' : 'default' }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <img
        src={photos[idx].src}
        alt={photos[idx].alt}
        onClick={() => onImageClick && onImageClick(photos[idx])}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />

      {/* Tag badge */}
      {tag && (
        <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 2, padding: '6px 12px', background: 'var(--surface)', color: 'var(--accent)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 500, border: '1px solid var(--accent)' }}>
          {tag}
        </div>
      )}

      {/* Prev / Next arrows + dots */}
      {n > 1 && (
        <>
          <button
            onClick={(e) => { e.stopPropagation(); setIdx(i => (i - 1 + n) % n); }}
            aria-label="Previous image"
            style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', zIndex: 3,
              width: 36, height: 36, borderRadius: '50%', border: 'none',
              background: 'rgba(0,0,0,0.52)', color: '#fff',
              fontSize: 24, lineHeight: '36px', textAlign: 'center', padding: 0, cursor: 'pointer' }}
          >&#8249;</button>

          <button
            onClick={(e) => { e.stopPropagation(); setIdx(i => (i + 1) % n); }}
            aria-label="Next image"
            style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', zIndex: 3,
              width: 36, height: 36, borderRadius: '50%', border: 'none',
              background: 'rgba(0,0,0,0.52)', color: '#fff',
              fontSize: 24, lineHeight: '36px', textAlign: 'center', padding: 0, cursor: 'pointer' }}
          >&#8250;</button>

          <div style={{ position: 'absolute', bottom: 10, left: 0, right: 0, zIndex: 3, display: 'flex', justifyContent: 'center', gap: 6 }}>
            {photos.map((_, i) => (
              <button key={i} onClick={(e) => { e.stopPropagation(); setIdx(i); }}
                aria-label={`Image ${i + 1}`}
                style={{ width: 7, height: 7, borderRadius: '50%', padding: 0, border: 'none', cursor: 'pointer',
                  background: i === idx ? '#fff' : 'rgba(255,255,255,0.45)', transition: 'background 0.2s' }} />
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function RoomCard({ room, onSelect }) {
  const t = useT();
  return (
    <article className="card-hover" style={{ background: 'var(--surface)', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
      <RoomImageCarousel photos={room.photos} tag={room.tag} />
      <div style={{ padding: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', gap: 12, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 14, flexWrap: 'wrap' }}>
          <span>{room.size}</span><span>·</span><span>{room.beds}</span>
        </div>
        <h3 className="h-card serif" style={{ marginBottom: 14 }}>{room.name}</h3>
        <p style={{ color: 'var(--fg-soft)', fontSize: 15, lineHeight: 1.65, fontWeight: 300, marginBottom: 24, flex: 1 }}>{room.blurb}</p>
        <hr className="gold-rule" style={{ margin: '0 0 20px' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>{t('from')}</div>
            <div className="serif" style={{ fontSize: 26, fontWeight: 500, color: 'var(--fg)' }}>{room.priceLabel}<span style={{ fontSize: 13, color: 'var(--fg-soft)', fontFamily: 'var(--font-body)', letterSpacing: 0 }}> {t('per_night')}</span></div>
          </div>
          <button className="btn-link" onClick={onSelect}>{t('reserve')} <Icon.Arrow className="arrow"/></button>
        </div>
      </div>
    </article>
  );
}

function HomeAmenities() {
  const t = useT();
  const items = [
    { iconK: 'Wifi',       titleK: 'amen_wifi',       bodyK: 'amen_wifi_body' },
    { iconK: 'Snow',       titleK: 'amen_ac',         bodyK: 'amen_ac_body' },
    { iconK: 'Fork',       titleK: 'amen_kitchen',    bodyK: 'amen_kitchen_body' },
    { iconK: 'Drop',       titleK: 'amen_hotwater',   bodyK: 'amen_hotwater_body' },
    { iconK: 'Car',        titleK: 'amen_parking',    bodyK: 'amen_parking_body' },
    { iconK: 'Bell',       titleK: 'amen_reception',  bodyK: 'amen_reception_body' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <Reveal><div className="eyebrow">{t('amen_eyebrow')}</div></Reveal>
          <Reveal delay={100}><h2 className="h-section">{t('amen_title_a')} <em className="gold-text serif" style={{fontStyle:'italic'}}>{t('amen_title_em')}</em></h2></Reveal>
          <Reveal delay={200}><p className="lead">{t('amen_lead')}</p></Reveal>
        </div>

        <div className="three-col-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
          {items.map((it, i) => {
            const IconC = Icon[it.iconK];
            return (
              <Reveal
                key={it.titleK}
                delay={i * 70}
                className="card-hover amenity-cell"
                style={{
                  padding: 36,
                  borderRight: i % 3 !== 2 ? '1px solid var(--line)' : '',
                  borderBottom: i < 3 ? '1px solid var(--line)' : '',
                  background: 'var(--surface)',
                  transition: 'background 300ms',
                }}
              >
                <div style={{ width: 48, height: 48, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)', color: 'var(--accent)', border: '1px solid var(--accent)', marginBottom: 22 }}>
                  <IconC />
                </div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, marginBottom: 10 }}>{t(it.titleK)}</h3>
                <p style={{ color: 'var(--fg-soft)', fontSize: 15, lineHeight: 1.65, fontWeight: 300 }}>{t(it.bodyK)}</p>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HomeExperiences() {
  const t = useT();
  return (
    <section className="section" style={{ background: 'var(--char)', color: 'var(--cream)' }}>
      <div className="container">
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ color: 'var(--gold-soft)' }}>{t('exp_eyebrow')}</div>
              <h2 className="h-section" style={{ margin: '20px 0 24px', color: 'var(--cream)' }}>
                {t('exp_title_a')} <em className="gold-text serif" style={{fontStyle:'italic'}}>{t('exp_title_em')}</em>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.75, color: 'rgba(245,239,230,0.75)', fontWeight: 300, marginBottom: 36 }}>
                {t('exp_lead')}
              </p>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(245,239,230,0.1)' }}>
              {EXPERIENCE_DEFS.map((e) => {
                const IconC = Icon[e.icon];
                return (
                  <div key={e.id} className="exp-tile" style={{ background: 'var(--char)', padding: 32, transition: 'background 300ms' }}>
                    <div style={{ color: 'var(--gold)', marginBottom: 18 }}><IconC /></div>
                    <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, color: 'var(--cream)', marginBottom: 8 }}>{t(e.key)}</h3>
                    <p style={{ fontSize: 14, lineHeight: 1.65, color: 'rgba(245,239,230,0.65)', fontWeight: 300 }}>{t(e.key + '_body')}</p>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HomeTestimonial() {
  const t = useT();
  return (
    <section className="section">
      <div className="container" style={{ maxWidth: 920, textAlign: 'center' }}>
        <Reveal>
          <div className="divider" style={{ marginBottom: 40 }}><span className="dot"/> {t('testimonial_label')} <span className="dot"/></div>
        </Reveal>
        <Reveal delay={150}>
          <blockquote style={{ margin: 0 }}>
            <p className="serif" style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.25, fontStyle: 'italic', fontWeight: 300, color: 'var(--fg)' }}>
              “{t('testimonial')}”
            </p>
            <footer style={{ marginTop: 36, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 2, color: 'var(--gold)' }}>
                {[1,2,3,4,5].map(i => <Icon.Star key={i} />)}
              </div>
              <span style={{ fontSize: 13, color: 'var(--fg-soft)', letterSpacing: '0.08em' }}>{t('testimonial_attr')}</span>
            </footer>
          </blockquote>
        </Reveal>
      </div>
    </section>
  );
}

function HomeCTA({ onBook }) {
  const t = useT();
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{
            background: 'var(--metal-grad)',
            color: '#1A1816',
            padding: 'clamp(48px, 6vw, 88px)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 280, height: 280, border: '1px solid rgba(26,24,22,0.18)', borderRadius: '50%' }}/>
            <div style={{ position: 'absolute', top: 40, right: 40, width: 200, height: 200, border: '1px solid rgba(26,24,22,0.12)', borderRadius: '50%' }}/>
            <div style={{ position: 'relative', maxWidth: 640 }}>
              <div className="eyebrow" style={{ color: 'rgba(26,24,22,0.7)' }}>{t('cta_eyebrow')}</div>
              <h2 className="h-section" style={{ margin: '20px 0 24px', color: '#1A1816' }}>
                {t('cta_title')}
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.65, color: 'rgba(26,24,22,0.78)', marginBottom: 36, fontWeight: 300 }}>
                {t('cta_body')}
              </p>
              <button className="btn" onClick={onBook} style={{ background: '#1A1816', color: 'var(--cream)' }}>
                {t('reserve_stay')} <Icon.Arrow />
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeView({ onBook, onNav, tweaks }) {
  return (
    <div className="page-fade">
      <Hero onBook={onBook} onNav={onNav} tweaks={tweaks} />
      <Reveal>
        <BookingStrip onBook={onBook} />
      </Reveal>
      <HomeIntro />
      <HomeRooms onNav={onNav} onBook={onBook} />
      <HomeAmenities />
      <HomeExperiences />
      <HomeTestimonial />
      <HomeCTA onBook={onBook} />
    </div>
  );
}

/* ====================================================================
   ROOMS
==================================================================== */

function RoomsView({ onBook }) {
  const t = useT();
  const rooms = useMemo(() => getRooms(t), [t]);
  const [lightbox, setLightbox] = useState(null);
  return (
    <div className="page-fade">
      <section className="section-tight" style={{ paddingTop: 80 }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{marginBottom:20}}>{t('rooms_page_eyebrow')}</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', maxWidth: 900 }}>
              {t('rooms_page_title_a')}<br/><em className="gold-text" style={{fontStyle:'italic'}}>{t('rooms_page_title_em')}</em>
            </h1>
          </Reveal>
        </div>
      </section>

      {rooms.map((r, i) => (
        <section key={r.id} className="section-tight" style={{ background: i % 2 === 0 ? 'var(--bg)' : 'var(--bg-2)' }}>
          <div className="container">
            <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center', direction: i % 2 === 1 ? 'rtl' : 'ltr' }}>
              <Reveal style={{ direction: 'ltr' }}>
                <RoomImageCarousel photos={r.photos} tag={r.tag} autoPlay={true} onImageClick={setLightbox} />
              </Reveal>
              <Reveal delay={120} style={{ direction: 'ltr' }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{r.tag}</div>
                <h2 className="h-section" style={{ marginBottom: 20 }}>{r.name}</h2>
                <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-soft)', fontWeight: 300, marginBottom: 28 }}>{r.blurb}</p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 32, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                  {r.amenityKeys.map(k => (
                    <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--fg-2)' }}>
                      <span style={{ color: 'var(--accent)' }}><Icon.Check /></span>
                      {t(k)}
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>{t('from')}</div>
                    <div className="serif" style={{ fontSize: 36, fontWeight: 500 }}>{r.priceLabel}<span style={{ fontSize: 14, color: 'var(--fg-soft)', fontFamily: 'var(--font-body)' }}> {t('per_night')}</span></div>
                  </div>
                  <button className="btn btn-primary" onClick={onBook}>{t('reserve')} <Icon.Arrow /></button>
                </div>
              </Reveal>
            </div>
          </div>
        </section>
      ))}
      {lightbox && <RoomLightbox photo={lightbox} onClose={() => setLightbox(null)} />}
    </div>
  );
}

/* ====================================================================
   DINING
==================================================================== */

function DiningView() {
  const t = useT();
  return (
    <div className="page-fade">
      <section className="section-tight" style={{ paddingTop: 80 }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{marginBottom:20}}>{t('dining_eyebrow')}</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', maxWidth: 900 }}>
              {t('dining_title_a')}<br/><em className="gold-text" style={{fontStyle:'italic'}}>{t('dining_title_em')}</em>
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 18, color: 'var(--fg-soft)', maxWidth: 620, marginTop: 28, lineHeight: 1.7, fontWeight: 300 }}>
              {t('dining_lead')}
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Reveal><Photo src="assets/dining-02.jpg" alt="Dining hall booth seating" aspect="4/3" kenBurns/></Reveal>
            <Reveal delay={120} style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 16 }}>
              <Photo src="assets/dining-03.jpg" alt="Dining hall fridge & chai" aspect="4/3" kenBurns/>
              <Photo src="assets/dining-01.jpg" alt="Dining hall wide" aspect="4/3" kenBurns/>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
            <Reveal>
              <div>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{t('dining_hours')}</div>
                <h2 className="h-section" style={{ marginBottom: 24 }}>{t('dining_menu_title')}</h2>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-soft)', fontWeight: 300 }}>
                  {t('dining_lead')}
                </p>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {MENU_DEFS.map(m => (
                  <div key={m.id} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 32, padding: '24px 0', borderBottom: '1px solid var(--line)' }}>
                    <div style={{ flex: 1 }}>
                      <h4 className="serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 4 }}>{t(m.nameKey)}</h4>
                      <p style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.55, fontWeight: 300 }}>{t(m.descKey)}</p>
                    </div>
                    <div className="serif gold-text" style={{ fontSize: 22, fontWeight: 500, whiteSpace: 'nowrap' }}>NPR {m.price}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ====================================================================
   EXPERIENCES
==================================================================== */

function ExperiencesView() {
  const t = useT();
  return (
    <div className="page-fade">
      <section className="section-tight" style={{ paddingTop: 80 }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{marginBottom:20}}>{t('exp_eyebrow')}</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', maxWidth: 900 }}>
              {t('exp_title_a')} <em className="gold-text" style={{fontStyle:'italic'}}>{t('exp_title_em')}</em>
            </h1>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            {EXPERIENCE_DEFS.map((e, i) => {
              const IconC = Icon[e.icon];
              return (
                <Reveal key={e.id} delay={i * 100}>
                  <div className="card-hover exp-card" style={{ background: 'var(--surface)', border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                    <Photo src={['assets/dining-02.jpg','assets/dining-01.jpg','assets/room-02.jpg','assets/dining-03.jpg'][i]} alt={t(e.key)} aspect="1/1" kenBurns/>
                    <div style={{ padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                      <div style={{ color: 'var(--accent)', marginBottom: 14 }}><IconC /></div>
                      <h3 className="serif" style={{ fontSize: 26, fontWeight: 500, marginBottom: 12 }}>{t(e.key)}</h3>
                      <p style={{ color: 'var(--fg-soft)', fontSize: 15, lineHeight: 1.65, fontWeight: 300 }}>{t(e.key + '_body')}</p>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ====================================================================
   GALLERY
==================================================================== */

function GalleryView() {
  const t = useT();
  const tiles = [
    { src: 'assets/room-01.jpg', label: 'Family Room', aspect: '4/5', span: 1 },
    { src: 'assets/dining-01.jpg', label: 'Dining Hall', aspect: '4/3', span: 2 },
    { src: 'assets/room-02.jpg', label: 'Deluxe Room', aspect: '1/1', span: 1 },
    { src: 'assets/dining-02.jpg', label: 'Booth seating', aspect: '4/3', span: 2 },
    { src: 'assets/room-03.jpg', label: 'Standard Room', aspect: '4/5', span: 1 },
    { src: 'assets/room-04.jpg', label: 'Twin Room', aspect: '1/1', span: 1 },
    { src: 'assets/dining-03.jpg', label: 'Café corner', aspect: '4/5', span: 1 },
    { video: 'assets/property.mp4', label: 'Property walkthrough', aspect: '4/3', span: 2 },
    { src: 'assets/room-01.jpg', label: 'Family Room — detail', aspect: '4/5', span: 1 },
  ];
  return (
    <div className="page-fade">
      <section className="section-tight" style={{ paddingTop: 80 }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{marginBottom:20}}>{t('gallery_eyebrow')}</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', maxWidth: 900 }}>
              {t('gallery_title_a')} <em className="gold-text" style={{fontStyle:'italic'}}>{t('gallery_title_em')}</em>
            </h1>
          </Reveal>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {tiles.map((tile, i) => (
              <Reveal key={i} delay={(i % 3) * 80} style={{ gridColumn: `span ${tile.span}` }}>
                {tile.video
                  ? <VideoTile src={tile.video} aspect={tile.aspect} />
                  : <Photo src={tile.src} alt={tile.label} aspect={tile.aspect} kenBurns />
                }
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ====================================================================
   CONTACT
==================================================================== */

function ContactView() {
  const t = useT();
  return (
    <div className="page-fade">
      <section className="section-tight" style={{ paddingTop: 80 }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{marginBottom:20}}>{t('contact_eyebrow')}</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', maxWidth: 900 }}>
              {t('contact_title_a')} <em className="gold-text" style={{fontStyle:'italic'}}>{t('contact_title_em')}</em>
            </h1>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
            <Reveal>
              <div>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, marginBottom: 28 }}>{t('visit_us')}</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 24, fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7 }}>
                  <div style={{ display: 'flex', gap: 14 }}>
                    <span style={{ color: 'var(--accent)', marginTop: 3 }}><Icon.Pin /></span>
                    <div>
                      <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 4 }}>{t('address_label')}</div>
                      {t('address')}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 14 }}>
                    <span style={{ color: 'var(--accent)', marginTop: 3 }}><Icon.Phone /></span>
                    <div>
                      <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 4 }}>{t('reservations')}</div>
                      <a href="tel:+97791410144" style={{ color: 'inherit' }}>+977 91-410144</a><br/>
                      <a href="tel:+9779848860565" style={{ color: 'inherit' }}>+977 9848 860 565</a><br/>
                      <a href="mailto:maheshworihotel33@gmail.com" style={{ color: 'inherit' }}>maheshworihotel33@gmail.com
</a>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 14 }}>
                    <span style={{ color: 'var(--accent)', marginTop: 3 }}><Icon.Whatsapp /></span>
                    <div>
                      <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 4 }}>WhatsApp</div>
                      <a href="https://wa.me/9779848860565" target="_blank" rel="noreferrer" style={{ color: 'inherit' }}>+977 9779848860565</a>
                    </div>
                  </div>
                  <hr className="gold-rule" />
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 8 }}>{t('hours')}</div>
                    <div>{t('front_desk')}</div>
                    <div>{t('concierge')}</div>
                  </div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <form style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: 40 }} onSubmit={e => { e.preventDefault(); alert('Message sent (demo)'); }}>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, marginBottom: 28 }}>{t('send_note')}</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 28 }}>
                  <div className="field">
                    <label className="field-label">{t('first_name')}</label>
                    <input className="field-input" defaultValue=""/>
                  </div>
                  <div className="field">
                    <label className="field-label">{t('last_name')}</label>
                    <input className="field-input" defaultValue=""/>
                  </div>
                </div>
                <div className="field" style={{ marginBottom: 28 }}>
                  <label className="field-label">{t('email')}</label>
                  <input className="field-input" type="email" defaultValue=""/>
                </div>
                <div className="field" style={{ marginBottom: 36 }}>
                  <label className="field-label">{t('how_can_we_help')}</label>
                  <textarea className="field-input" rows="3" style={{ resize: 'vertical' }} />
                </div>
                <button type="submit" className="btn btn-primary">{t('send_message')} <Icon.Arrow /></button>
              </form>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeView, RoomsView, DiningView, ExperiencesView, GalleryView, ContactView, ROOM_DEFS, EXPERIENCE_DEFS, MENU_DEFS, getRooms });