// components/hero.jsx — four hero variants // 1. cycle — Live Sedona day/night cycle // 2. twilight — Static parallax twilight scene // 3. starmap — Constellation art focus // 4. reticle — Telescope eyepiece reticle // ── Shared Sedona skyline (rear horizon range) ──────────── function RedRocksFar({ opacity = 1, color = '#3a1a14' }) { return ( ); } // Foreground spires — recognizable Sedona / Cathedral Rock-ish silhouette function RedRocksNear({ color = '#2a0f0a' }) { return ( ); } // Tiny Saguaro/desert plants along the foreground edge function DesertEdge({ color = '#1a0806' }) { return ( {/* A few scrubby tufts */} ); } // Star field as positioned divs (more performant than many SVG circles) function StarField({ stars, opacity = 1 }) { return (
{stars.map((s, i) => (
1.6 ? `0 0 ${s.size * 2}px rgba(248,244,232,0.7)` : undefined, }} /> ))}
); } // Sun or moon disc function CelestialBody({ kind, x, y, hidden }) { const isMoon = kind === 'moon'; const size = isMoon ? 62 : 96; if (hidden) return null; return (
); } // ───────────────────────────────────────────────────────── // Hero 1 — Day/Night Cycle (live) // ───────────────────────────────────────────────────────── const HERO_STARS = makeStars(110, 11); function HeroCycle({ hour, phase, onBook, go }) { const grad = SKY_GRADIENTS[phase]; const gradStops = grad.map((c, i) => `${c} ${(i / (grad.length - 1)) * 100}%`).join(', '); const isDark = phase === 'night' || phase === 'twilight' || phase === 'dawn'; const starOpacity = phase === 'night' ? 1 : phase === 'twilight' ? 0.55 : phase === 'dawn' ? 0.2 : 0; const sunY = getSunY(hour); const moonY = getMoonY(hour); const sunX = 12 + ((hour - 6) / 12) * 76; const moonX = 88 - (((hour > 18 ? hour - 18 : hour + 6) / 12) * 76); const moon = getMoonPhase(); return (
{/* Stars */} {/* Sun & moon */}
); } function TrustItem({ label, sub }) { return (
{label}
{sub}
); } function Divider() { return
; } function TonightCardFloating({ moon, phase, go }) { return (
Tonight in Sedona
{moon.name}
{moon.illum}% illuminated
{moon.illum < 30 ? 'Excellent night for Milky Way & deep-sky targets.' : moon.illum > 80 ? "Bright moon. Best for lunar craters & planets." : 'Mixed sky — planets and brighter clusters shine.'}
go('sky')} style={{ fontFamily: 'var(--f-ui)', fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--c-moon)', cursor: 'pointer', }}> See tonight's targets
); } // Moon glyph SVG showing illumination function MoonGlyph({ fraction, size = 32 }) { // fraction 0..1 across synodic month const r = size / 2 - 1; const cx = size / 2, cy = size / 2; // Compute the visible (lit) part // Use ellipse terminator const phaseAngle = fraction * 2 * Math.PI; const cosPhase = Math.cos(phaseAngle); return ( {/* Lit portion */} {fraction < 0.5 ? ( // Waxing: right side lit <> ) : ( <> 0.75 ? '#1a2238' : '#F4D27A'} /> )} ); } // ───────────────────────────────────────────────────────── // Hero 2 — Static parallax twilight // ───────────────────────────────────────────────────────── const TWILIGHT_STARS = makeStars(160, 22); function HeroTwilight({ onBook, go }) { const moon = getMoonPhase(); return (
{/* Crescent moon */}
{/* Constellation arc, Orion */} {[[80,80,3],[220,120,4],[280,200,3.5],[240,280,3],[160,320,3.5],[100,240,2.5],[320,100,2.5],[380,220,3]].map(([x,y,r],i) => ( ))} {/* Layered rocks - 3 layers for parallax feel */}
◦ Tonight · Waxing Crescent · Excellent dark sky

A quiet night
under a very big sky.

After sunset, Sedona becomes something else. The canyon walls turn to silhouette, the desert cools, and the stars begin to appear. We bring the telescopes and the stories. You bring curiosity.

); } // ───────────────────────────────────────────────────────── // Hero 3 — Star map / constellation focus // ───────────────────────────────────────────────────────── const STARMAP_STARS = makeStars(200, 33); function HeroStarMap({ onBook, go }) { return (
{/* Big constellation art - Scorpius-like */} {/* Concentric reticle rings */} {/* Constellation lines */} {/* Major stars */} {[ [180,180,4,'Antares'],[260,240,3,'σ Sco'],[320,300,3.5,'δ Sco'],[380,360,3,'π Sco'], [420,420,5,'Antares'],[450,500,3.5,'ε Sco'],[420,580,3,'μ Sco'],[350,620,3.5,'ζ Sco'], [260,600,4,'λ Sco'],[200,540,3,''],[180,460,3,''],[240,500,2.5,''], [500,400,3,''],[580,420,3.5,''],[640,460,4,'Shaula'],[380,260,2.5,''],[450,250,3,''], ].map(([x,y,r,name], i) => ( {name && {name}} ))} {/* Center crosshair */} SCORPIUS · JUNE SKY {/* Subtle silhouette */}
⊕ N 34°51′ · W 111°45′ · Elev 4,500ft

Learn the sky
the old way.

Your guide names every star you see, traces the constellations that named the seasons, and points a real telescope at the things in between.

); } // ───────────────────────────────────────────────────────── // Hero 4 — Telescope reticle (eyepiece view) // ───────────────────────────────────────────────────────── const RETICLE_STARS = makeStars(80, 44); function HeroReticle({ onBook, go }) { return (
{/* The eyepiece — large circular vignette on the right */}
{/* A "Saturn" inside the eyepiece */} {/* Crosshair */} {/* Tick marks */} {[0,30,60,90,120,150,180,210,240,270,300,330].map(deg => { const rad = (deg * Math.PI) / 180; const x1 = 300 + Math.cos(rad) * 260; const y1 = 300 + Math.sin(rad) * 260; const x2 = 300 + Math.cos(rad) * 275; const y2 = 300 + Math.sin(rad) * 275; return ; })} {/* Saturn */} {/* Ring front */} {/* Labels */} SATURN · 1.27 BILLION KM 8″ SCT · 196× · 12mm EYEPIECE
{/* Skyline subtle */}
+ Live through the eyepiece

That's actually
Saturn.

Not a photo. Not a screen. The real planet — its rings, its moons — one billion miles away, focused into your eye by an 8-inch telescope we point for you.

); } // ───────────────────────────────────────────────────────── // Router // ───────────────────────────────────────────────────────── function Hero({ variant, hour, phase, onBook, go }) { if (variant === 'twilight') return ; if (variant === 'starmap') return ; if (variant === 'reticle') return ; return ; } Object.assign(window, { Hero, HeroCycle, HeroTwilight, HeroStarMap, HeroReticle, MoonGlyph, StarField, RedRocksNear, RedRocksFar, DesertEdge });