Hotel Detail Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, Image, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, SERIF, StickyBottomBar, StoryScrim, World } from "../shared";

export interface Amenity {
  id: string;
  icon: IconName;
  label: string;
}

export interface HotelDetailScreenProps {
  name?: string;
  rating?: string;
  distance?: string;
  pricePerNight?: string;
  photos?: string[];
  amenities?: Amenity[];
  onBook?: () => void;
  onBack?: () => void;
}

const DEFAULT_PHOTOS = [
  "https://images.unsplash.com/photo-1590490360182-c33d57733427?w=800&h=500&fit=crop&q=75&auto=format",
];

const DEFAULT_AMENITIES: Amenity[] = [
  { id: "a1", icon: "wifi", label: "Fast Wi-Fi" },
  { id: "a2", icon: "coffee", label: "Breakfast" },
  { id: "a3", icon: "tram-front", label: "Metro 2 min" },
  { id: "a4", icon: "check-circle", label: "Free cancel" },
];

const ROOMS = [
  { id: "r1", name: "Standard double", beds: "1 king bed · 2 guests", note: "Free cancellation until Oct 2", price: "$182" },
  { id: "r2", name: "Deluxe king", beds: "1 king bed · 2 guests", note: "City view · Breakfast included", price: "$214" },
  { id: "r3", name: "Twin room", beds: "2 twin beds · 2 guests", note: "Free cancellation until Oct 2", price: "$168" },
];

/** Hotel detail — photo hero, rating, amenities, price footer. */
export function HotelDetailScreen({
  name = "Memmo Alfama",
  rating = "4.8 · 1,204 reviews",
  distance = "Alfama, Lisbon · 0.4 mi from center",
  pricePerNight = "$182",
  photos = DEFAULT_PHOTOS,
  amenities = DEFAULT_AMENITIES,
  onBook,
  onBack,
}: HotelDetailScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [saved, setSaved] = React.useState(false);

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
      >
        {/* Photo hero — hotel photos do the selling. */}
        <Mount className="relative">
          <Image
            source={{ uri: photos[0] }}
            className="h-60 w-full"
            accessibilityLabel={`${name} photo`}
          />
          <View className="absolute inset-x-0 top-0 h-14">
            <StoryScrim edge="top" />
          </View>
          <View className="absolute inset-x-0 top-0 flex-row items-center justify-between px-4 pt-2">
            <Glass interactive effect="clear" className="rounded-full">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityLabel="Go back"
              className="h-10 w-10 rounded-full"
            >
              <Icon name="chevron-left" size="md" color="primaryForeground" />
            </Button>
            </Glass>
            <Glass interactive effect="clear" className="rounded-full">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => {
                haptics.light();
                setSaved((s) => !s);
              }}
              accessibilityLabel={saved ? "Unsave hotel" : "Save hotel"}
              accessibilityState={{ checked: saved }}
              className="h-10 w-10 rounded-full"
            >
              <Icon
                name="heart"
                size="sm"
                color={saved ? "destructive" : "primaryForeground"}
              />
            </Button>
            </Glass>
          </View>
        </Mount>

        {/* Identity — name + rating + location. */}
        <Mount delay={60} className="gap-1 px-4 pt-3">
          <Text variant="h3" style={{ fontFamily: SERIF }}>{name}</Text>
          <View className="flex-row items-center gap-1.5">
            <Icon name="star" size="sm" color="warning" />
            <Text className="text-sm font-medium">{rating}</Text>
          </View>
          <Text variant="small" className="text-muted-foreground">
            {distance}
          </Text>
          {/* Scarcity + review pull — hotels convert on both. */}
          <Text className="pt-0.5 text-[11px] font-medium text-destructive">
            Only 2 rooms left at this price
          </Text>
        </Mount>

        {/* Amenities — chips, not icon-grid decoration. */}
        <Mount delay={120} className="px-4 pt-3">
          <View className="flex-row flex-wrap gap-2">
            {amenities.map((a) => (
              <Chip
                key={a.id}
                variant="assist"
                icon={<Icon name={a.icon} size="sm" color="foreground" />}
              >
                {a.label}
              </Chip>
            ))}
          </View>
        </Mount>

        {/* Room pick — the booking decision, inline. */}
        <Mount delay={180} className="mx-4 mt-5 gap-2.5">
          <Text variant="h4">Rooms</Text>
          {ROOMS.map((r) => (
            <View key={r.id} className="overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
              <View className="flex-row items-center justify-between">
                <View>
                  <Text className="text-sm font-semibold">{r.name}</Text>
                  <Text className="text-sm font-medium text-muted-foreground">
                    {r.beds}
                  </Text>
                  <Text className="pt-0.5 text-xs text-muted-foreground">
                    {r.note}
                  </Text>
                </View>
                <Text className="text-lg font-semibold">{r.price}</Text>
              </View>
            </View>
          ))}
        </Mount>
      </ScrollView>

      <StickyBottomBar>
        <View className="rounded-3xl bg-white p-3 shadow-sm dark:bg-[#1A1A20]">
        <Button
          haptic="light"
          onPress={() => {
            haptics.medium();
            onBook?.();
          }}
          accessibilityLabel={`Book ${name}, ${pricePerNight} per night`}
          tone="inverse" className="bg-[#1B1B26] h-12 w-full"
        >
          <Text className="text-[15px] font-semibold text-white">
            Book now · <Text className="font-bold text-white">{pricePerNight}</Text>
            <Text className="text-[12px] font-medium text-white/70"> /night</Text>
          </Text>
        </Button>
        </View>
      </StickyBottomBar>
    </SafeAreaView>
    </World>
  );
}
HotelDetailScreen.displayName = "HotelDetailScreen";

Recreate the "Hotel Detail Screen" screen in React Native using LumioUI.

Goal: Hotel photos, amenities, and booking Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add travel-hotel-detail
```

Or pull just the components: `npx lumioui add button chip glass icon image text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3

### `chip` — Compact selectable pill with press scale and ink overlay.
- `<Chip>` ×1

### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- `<Glass>` ×2

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4

### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1

### `text` — Themed type scale from caption to display.
- `<Text>` ×12

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/travel/hotel-detail.tsx` exporting HotelDetailScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, Image, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, SERIF, StickyBottomBar, StoryScrim, World } from "../shared";

export interface Amenity {
  id: string;
  icon: IconName;
  label: string;
}

export interface HotelDetailScreenProps {
  name?: string;
  rating?: string;
  distance?: string;
  pricePerNight?: string;
  photos?: string[];
  amenities?: Amenity[];
  onBook?: () => void;
  onBack?: () => void;
}

const DEFAULT_PHOTOS = [
  "https://images.unsplash.com/photo-1590490360182-c33d57733427?w=800&h=500&fit=crop&q=75&auto=format",
];

const DEFAULT_AMENITIES: Amenity[] = [
  { id: "a1", icon: "wifi", label: "Fast Wi-Fi" },
  { id: "a2", icon: "coffee", label: "Breakfast" },
  { id: "a3", icon: "tram-front", label: "Metro 2 min" },
  { id: "a4", icon: "check-circle", label: "Free cancel" },
];

const ROOMS = [
  { id: "r1", name: "Standard double", beds: "1 king bed · 2 guests", note: "Free cancellation until Oct 2", price: "$182" },
  { id: "r2", name: "Deluxe king", beds: "1 king bed · 2 guests", note: "City view · Breakfast included", price: "$214" },
  { id: "r3", name: "Twin room", beds: "2 twin beds · 2 guests", note: "Free cancellation until Oct 2", price: "$168" },
];

/** Hotel detail — photo hero, rating, amenities, price footer. */
export function HotelDetailScreen({
  name = "Memmo Alfama",
  rating = "4.8 · 1,204 reviews",
  distance = "Alfama, Lisbon · 0.4 mi from center",
  pricePerNight = "$182",
  photos = DEFAULT_PHOTOS,
  amenities = DEFAULT_AMENITIES,
  onBook,
  onBack,
}: HotelDetailScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [saved, setSaved] = React.useState(false);

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
      >
        {/* Photo hero — hotel photos do the selling. */}
        <Mount className="relative">
          <Image
            source={{ uri: photos[0] }}
            className="h-60 w-full"
            accessibilityLabel={`${name} photo`}
          />
          <View className="absolute inset-x-0 top-0 h-14">
            <StoryScrim edge="top" />
          </View>
          <View className="absolute inset-x-0 top-0 flex-row items-center justify-between px-4 pt-2">
            <Glass interactive effect="clear" className="rounded-full">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => onBack?.()}
              accessibilityLabel="Go back"
              className="h-10 w-10 rounded-full"
            >
              <Icon name="chevron-left" size="md" color="primaryForeground" />
            </Button>
            </Glass>
            <Glass interactive effect="clear" className="rounded-full">
            <Button
              variant="ghost"
              size="icon"
              haptic="light"
              onPress={() => {
                haptics.light();
                setSaved((s) => !s);
              }}
              accessibilityLabel={saved ? "Unsave hotel" : "Save hotel"}
              accessibilityState={{ checked: saved }}
              className="h-10 w-10 rounded-full"
            >
              <Icon
                name="heart"
                size="sm"
                color={saved ? "destructive" : "primaryForeground"}
              />
            </Button>
            </Glass>
          </View>
        </Mount>

        {/* Identity — name + rating + location. */}
        <Mount delay={60} className="gap-1 px-4 pt-3">
          <Text variant="h3" style={{ fontFamily: SERIF }}>{name}</Text>
          <View className="flex-row items-center gap-1.5">
            <Icon name="star" size="sm" color="warning" />
            <Text className="text-sm font-medium">{rating}</Text>
          </View>
          <Text variant="small" className="text-muted-foreground">
            {distance}
          </Text>
          {/* Scarcity + review pull — hotels convert on both. */}
          <Text className="pt-0.5 text-[11px] font-medium text-destructive">
            Only 2 rooms left at this price
          </Text>
        </Mount>

        {/* Amenities — chips, not icon-grid decoration. */}
        <Mount delay={120} className="px-4 pt-3">
          <View className="flex-row flex-wrap gap-2">
            {amenities.map((a) => (
              <Chip
                key={a.id}
                variant="assist"
                icon={<Icon name={a.icon} size="sm" color="foreground" />}
              >
                {a.label}
              </Chip>
            ))}
          </View>
        </Mount>

        {/* Room pick — the booking decision, inline. */}
        <Mount delay={180} className="mx-4 mt-5 gap-2.5">
          <Text variant="h4">Rooms</Text>
          {ROOMS.map((r) => (
            <View key={r.id} className="overflow-hidden rounded-3xl bg-white p-4 dark:bg-[#1A1A20]">
              <View className="flex-row items-center justify-between">
                <View>
                  <Text className="text-sm font-semibold">{r.name}</Text>
                  <Text className="text-sm font-medium text-muted-foreground">
                    {r.beds}
                  </Text>
                  <Text className="pt-0.5 text-xs text-muted-foreground">
                    {r.note}
                  </Text>
                </View>
                <Text className="text-lg font-semibold">{r.price}</Text>
              </View>
            </View>
          ))}
        </Mount>
      </ScrollView>

      <StickyBottomBar>
        <View className="rounded-3xl bg-white p-3 shadow-sm dark:bg-[#1A1A20]">
        <Button
          haptic="light"
          onPress={() => {
            haptics.medium();
            onBook?.();
          }}
          accessibilityLabel={`Book ${name}, ${pricePerNight} per night`}
          tone="inverse" className="bg-[#1B1B26] h-12 w-full"
        >
          <Text className="text-[15px] font-semibold text-white">
            Book now · <Text className="font-bold text-white">{pricePerNight}</Text>
            <Text className="text-[12px] font-medium text-white/70"> /night</Text>
          </Text>
        </Button>
        </View>
      </StickyBottomBar>
    </SafeAreaView>
    </World>
  );
}
HotelDetailScreen.displayName = "HotelDetailScreen";
```

Screen: https://lumioui.dev/screens/travel-hotel-detail