// components/widgets.jsx — Tonight's Sky, Moon Calendar, FAQ, Gallery, Tour Cards, Dark Sky Promise // ── Tonight's Sky widget ───────────────────────────────── function TonightsSky({ onBook }) { const moon = getMoonPhase(); const best = moonBestFor(moon); const cloudRisk = 'Low'; const dressNote = 'Bring a fleece — desert nights drop to 48°F.'; const highlights = moon.illum < 30 ? ['Milky Way core (rising 10pm)', 'Orion Nebula (M42)', 'Andromeda Galaxy (M31)', 'Pleiades cluster'] : moon.illum > 80 ? ['Tycho crater (full detail)', 'Mare Imbrium', 'Jupiter & 4 Galilean moons', 'Saturn (rings open 4°)'] : ['Jupiter & moons', 'Saturn (rings)', 'Albireo double star', 'Ring Nebula (M57)']; return (
Tonight in Sedona
{best.tag}
{best.desc}. Conditions are looking generous — exactly the kind of night you came to Sedona for.
Tonight may include
{highlights.map(h => ( {h} ))}
Not all objects are visible every night. Your guide chooses the best available targets based on the season, moon, and conditions. That's part of the magic.
Tonight's tour starts at 8:15 PM.
); } function Stat({ label, value }) { return (
{label}
{value}
); } // ── 7-night moon calendar ──────────────────────────────── function MoonCalendar({ onBook, days = 7, accent = 'paper' }) { const today = new Date(); const items = []; for (let i = 0; i < days; i++) { const d = new Date(today); d.setDate(today.getDate() + i); const moon = getMoonPhase(d); items.push({ date: d, moon }); } const onNight = accent === 'night'; const lineColor = onNight ? 'var(--c-line-night)' : 'var(--c-line)'; const inkColor = onNight ? 'var(--c-star)' : 'var(--c-ink)'; return (
{items.map((it, i) => { const best = moonBestFor(it.moon); const dow = it.date.toLocaleDateString('en', { weekday: 'short' }); const day = it.date.getDate(); const month = it.date.toLocaleDateString('en', { month: 'short' }); const isDark = best.tag === 'Dark Sky Night'; return (
{i === 0 && ( Tonight )}
{dow} · {month}
{day}
{it.moon.name}
{it.moon.illum}% lit
{isDark ? '★ Best' : best.tag.replace(' Night', '')}
); })}
); } // ── FAQ accordion ──────────────────────────────────────── function Accordion({ items, multi = false }) { const [open, setOpen] = React.useState({}); const toggle = (i) => setOpen(o => multi ? { ...o, [i]: !o[i] } : (o[i] ? {} : { [i]: true })); return (
{items.map((it, i) => (
{open[i] && (
{it.a}
)}
))}
); } // ── Tour Cards ─────────────────────────────────────────── const TOURS = [ { id: 'public', name: 'Sedona Star Show', sub: 'The flagship public tour', price: 117, childPrice: 76, duration: '2 hrs', size: 'Up to 10 guests', age: 'Ages 5+', location: 'Permitted dark-sky site, 18 min from Uptown', badge: 'Most booked', gradient: 'linear-gradient(135deg, #07111F, #182A46)', bullets: [ 'Constellation tour with green laser pointer', 'Six or more telescope objects', 'Celestron 8″ SCT & 11″ Dobsonian', 'Camp chairs, blankets, parka jackets provided', 'Round-trip Uptown shuttle add-on available', ], }, { id: 'private', name: 'Private Star Show', sub: 'For your group only', price: 1200, priceUnit: 'flat · up to 8', duration: '2.5 hrs', size: 'Private group', age: 'All ages', location: 'Your vacation rental, resort, or our site', badge: 'Vacation rentals', gradient: 'linear-gradient(135deg, #2a1d1a, #5a2a1c)', bullets: [ 'Personalized to your group's interests', 'Perfect for proposals, birthdays, family nights', 'Optional astrophotography session', 'We come to your rental within 30 min of Sedona', 'Sparkling cider toast included', ], }, { id: 'moon', name: 'Moon & Planets Night', sub: 'For bright-moon nights', price: 95, childPrice: 62, duration: '90 min', size: 'Up to 10 guests', age: 'Ages 5+', location: 'Uptown overlook', badge: 'Moon-friendly', gradient: 'linear-gradient(135deg, #1c1a14, #4a3a1a)', bullets: [ 'Lunar crater tour (Tycho, Copernicus, Plato)', 'Jupiter & the Galilean moons', 'Saturn when up — rings visible', 'Great when full moon blocks deep sky', 'Shorter format, kid-friendly pacing', ], }, { id: 'event', name: 'Special Sky Events', sub: 'Meteor showers & eclipses', price: 145, childPrice: 92, duration: '3 hrs', size: 'Up to 14 guests', age: 'Ages 8+', location: 'Best-conditions site, announced 48hr prior', badge: 'Limited dates', gradient: 'linear-gradient(135deg, #1f0a1a, #4a1538)', bullets: [ 'Perseids, Geminids, Quadrantids, eclipses', 'Extended viewing window', 'Storytelling around the meteor radiant', 'Hot cocoa, blankets, reclining mats', 'Astrophoto coaching for your phone', ], }, ]; function TourCard({ tour, onBook, onSelect }) { return (
{tour.badge}
{tour.sub}
} label="Duration" value={tour.duration} /> } label="Group" value={tour.size} /> } label="Ages" value={tour.age} /> } label="Location" value={tour.location} />
    {tour.bullets.map((b, i) => (
    • ))}
${tour.price} {tour.priceUnit || (tour.childPrice ? `adult · $${tour.childPrice} child` : '')}
); } function Spec({ icon, label, value }) { return (
{icon}
{label}
{value}
); } // ── Dark Sky Promise ───────────────────────────────────── function DarkSkyPromise() { const promises = [ { icon: , t: 'Low, warm, controlled light', d: 'No bright white flashlights. Red headlamps only.' }, { icon: , t: 'Small groups, always', d: 'Maximum 10 guests per public tour.' }, { icon: , t: 'Leave No Trace', d: 'Pack in, pack out. We bring trash bags.' }, { icon: , t: 'Quiet sites, respected', d: 'We rotate locations to protect fragile dark-sky spots.' }, { icon: , t: 'Quiet hours, respected', d: 'Voices low after 10 PM near residential areas.' }, { icon: , t: 'Teach the next dark', d: 'Every guest leaves with one thing they can do at home.' }, ]; return (
★ Our Dark Sky Promise

We promise to leave the dark the way we found it.

Sedona became an International Dark Sky Community in 2014. That status is fragile, and we take real responsibility for protecting it.

    {promises.map((p, i) => (
  • {p.icon}
    {p.t}
    {p.d}
    • ))}
); } // ── Photo placeholder + Gallery lightbox ───────────────── const GALLERY = [ { id: 'g1', title: 'Cathedral Rock at twilight', kind: 'landscape', grad: 'linear-gradient(160deg, #182A46 0%, #3a2046 30%, #9b3a4b 65%, #d97243 100%)' }, { id: 'g2', title: 'Saturn through the 8″', kind: 'planet', grad: 'radial-gradient(circle at 50% 50%, #1a2745, #07111f)' }, { id: 'g3', title: 'Orion Nebula (M42)', kind: 'deepsky', grad: 'radial-gradient(circle at 40% 50%, #d97243 0%, #9b3a4b 20%, #182A46 60%, #07111f 100%)' }, { id: 'g4', title: 'Milky Way over the red rocks', kind: 'milkyway', grad: 'linear-gradient(180deg, #07111F 0%, #182A46 50%, #2a1428 80%, #1a0a08 100%)' }, { id: 'g5', title: 'Guest at the eyepiece', kind: 'guest', grad: 'linear-gradient(135deg, #3a2046, #1c2a4c)' }, { id: 'g6', title: 'Andromeda Galaxy (M31)', kind: 'deepsky', grad: 'radial-gradient(ellipse at 50% 50%, #e8cfa8 0%, #b65a3c 8%, #182A46 45%, #07111f 100%)' }, { id: 'g7', title: 'Telescope setup at dusk', kind: 'setup', grad: 'linear-gradient(180deg, #b65a3c, #5a2a1c 65%, #1a0a08)' }, { id: 'g8', title: 'Perseid meteor shower', kind: 'meteor', grad: 'linear-gradient(135deg, #07111f, #182A46)' }, ]; function PhotoPlaceholder({ item, onClick, style }) { return (
{/* Decorative elements depending on kind */} {item.kind === 'milkyway' && } {item.kind === 'meteor' && ( <> {[[40,30,180,90],[200,20,330,110],[100,140,260,210]].map(([x1,y1,x2,y2],i) => ( ))} )} {item.kind === 'planet' && ( )}
{item.title}
); } function Gallery({ items = GALLERY }) { const [open, setOpen] = React.useState(null); return ( <>
{items.map((it, i) => ( setOpen(i)} style={{ aspectRatio: i % 5 === 0 ? '2 / 1' : '1 / 1', gridColumn: i % 5 === 0 ? 'span 2' : 'span 1', height: i % 5 === 0 ? undefined : undefined, }} /> ))}
{open !== null && (
setOpen(null)}>
e.stopPropagation()}>
{items[open].title}
)} ); } // ── Section header ────────────────────────────────────── function SectionHead({ kicker, title, intro, align = 'left', onNight = false }) { return (
{kicker}

{intro && (

{intro}

)}

); } Object.assign(window, { TonightsSky, MoonCalendar, Accordion, TourCard, TOURS, Spec, DarkSkyPromise, PhotoPlaceholder, Gallery, GALLERY, SectionHead, Stat, });