// pages/sky.jsx — What You'll See

function SkyPage({ onBook, go }) {
  return (
    <div className="page">
      <PageHero
        kicker="◉ What you'll see"
        title="Real things, <em>really far away</em>."
        intro="Not all objects are visible every night — that depends on the season, moon phase, cloud cover, and your guide's read of the conditions. Here's the full menu we draw from."
      />

      {/* Naked eye / Telescope / Seasonal split */}
      <section className="section--tight">
        <div className="wrap-wide">
          <SectionHead
            kicker="◌ Naked eye"
            title="Things you'll see <em>just by looking up</em>."
          />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}
               className="sky-grid">
            {NAKED_EYE.map((t, i) => <SkyTile key={i} item={t} />)}
          </div>
          <style>{`
            @media (max-width: 1100px) { .sky-grid { grid-template-columns: 1fr 1fr !important; } }
            @media (max-width: 600px)  { .sky-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <SectionHead
            kicker="⊙ Through the telescope"
            title="Things only a <em>real glass</em> can show."
          />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}
               className="scope-grid">
            {TELESCOPE_TARGETS.map((t, i) => <SkyTileBig key={i} item={t} />)}
          </div>
          <style>{`
            @media (max-width: 880px) { .scope-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Seasonal */}
      <section className="section">
        <div className="wrap-wide">
          <SectionHead
            kicker="⌖ Season by season"
            title="The Sedona sky <em>rotates</em>."
            intro="Each season reveals different deep-sky objects. Visiting twice means visiting two different universes."
          />
          <div style={{ marginTop: 40 }}>
            <SeasonGrid />
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <SectionHead
            kicker="❍ The gallery"
            title="Through our telescopes &amp; <em>above the red rocks</em>."
          />
          <div style={{ marginTop: 36 }}>
            <Gallery />
          </div>
          <div style={{ marginTop: 32, textAlign: 'center', fontFamily: 'var(--f-body)',
                        fontSize: 14, fontStyle: 'italic', color: 'var(--c-mute)' }}>
            Educational examples shown. Telescope views vary by night, season, and conditions.
          </div>
        </div>
      </section>

      {/* Expectation disclaimer */}
      <section style={{ background: 'var(--c-ink)', color: 'var(--c-star)', padding: 'clamp(60px, 8vw, 100px) 0',
                        position: 'relative', overflow: 'hidden' }}>
        <StarField stars={makeStars(50, 88)} opacity={0.55} />
        <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
          <div className="eyebrow on-night" style={{ marginBottom: 18 }}>★ Honest expectation</div>
          <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', margin: '0 0 24px', maxWidth: 880, marginInline: 'auto' }}>
            We don't <em>guarantee</em> the Milky Way. We guarantee a great night.
          </div>
          <p className="lead" style={{ color: 'rgba(248,244,232,0.78)', maxWidth: 580, margin: '0 auto 36px' }}>
            Even on a bright moon or partly cloudy night, your guide will find brilliant things to look at.
            That's the difference between a guided tour and pointing a telescope at random.
          </p>
          <button className="btn btn--moon" onClick={onBook}>
            Book your night <IconArrow size={16} />
          </button>
        </div>
      </section>
    </div>
  );
}

const NAKED_EYE = [
  { title: 'The Milky Way', when: 'May – September', desc: 'The galactic core arches overhead in summer.', 
    grad: 'linear-gradient(180deg, #07111F, #182A46 50%, #2a1428)', kind: 'milkyway' },
  { title: 'Bright planets', when: 'Year-round', desc: 'Jupiter, Venus, Saturn, Mars — each visible to the naked eye.', 
    grad: 'radial-gradient(circle at 30% 50%, #f4b85a 0%, #182A46 30%, #07111f)', kind: 'planet' },
  { title: 'Meteors', when: 'Especially Aug, Dec', desc: '5–15 per hour any clear night. 60+/hr during showers.', 
    grad: 'linear-gradient(135deg, #07111f, #182A46)', kind: 'meteor' },
  { title: 'Constellations', when: 'Year-round', desc: 'We trace them with a green laser pointer.', 
    grad: 'radial-gradient(circle at 50% 50%, #1a2745, #07111f)', kind: 'planet' },
];

const TELESCOPE_TARGETS = [
  { title: 'Planets', list: 'Saturn · Jupiter · Mars · Venus · Uranus · Neptune',
    desc: "Saturn's rings, Jupiter's belts and four Galilean moons, Mars's polar ice cap. Year-round depending on orbits.",
    grad: 'radial-gradient(circle at 50% 50%, #1a2745, #07111f)' },
  { title: 'The Moon', list: 'Tycho · Copernicus · Plato · Mare Imbrium',
    desc: 'Crater detail on a moonlit night is one of the most dramatic things you can see in a telescope.',
    grad: 'radial-gradient(circle at 50% 50%, #f4e4b0, #c2a878 35%, #182A46 80%)' },
  { title: 'Star clusters', list: 'Pleiades · Hercules (M13) · Beehive · Hyades',
    desc: 'Hundreds of stars in a single field of view — better than any photograph.',
    grad: 'radial-gradient(circle at 50% 50%, #182A46, #07111f)' },
  { title: 'Nebulae', list: 'Orion (M42) · Lagoon · Ring · Dumbbell',
    desc: 'Glowing clouds of gas where stars are born and where stars die.',
    grad: 'radial-gradient(circle at 40% 50%, #d97243, #9b3a4b 30%, #182A46 70%, #07111f)' },
  { title: 'Galaxies', list: 'Andromeda · M81/82 · Whirlpool · Sombrero',
    desc: 'Other Milky Ways, millions of light-years away. Andromeda is a naked-eye object here.',
    grad: 'radial-gradient(ellipse at 50% 50%, #e8cfa8, #b65a3c 8%, #182A46 45%, #07111f)' },
  { title: 'Double stars', list: 'Albireo · Mizar · Almach · Polaris',
    desc: 'Pairs of stars in surprising colors — gold-and-blue, red-and-white.',
    grad: 'radial-gradient(circle at 35% 50%, #f4b85a 0%, #5a8acc 25%, #182A46 60%)' },
];

function SkyTile({ item }) {
  return (
    <div>
      <PhotoPlaceholder item={{ ...item, id: 'tile-' + item.title }} style={{ aspectRatio: '1 / 1', marginBottom: 14 }} />
      <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>{item.title}</div>
      <div style={{ fontFamily: 'var(--f-ui)', fontSize: 11, color: 'var(--c-rock)',
                    letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, margin: '4px 0 8px' }}>
        {item.when}
      </div>
      <div style={{ fontFamily: 'var(--f-body)', fontSize: 14, color: 'var(--c-mute)', lineHeight: 1.5 }}>
        {item.desc}
      </div>
    </div>
  );
}

function SkyTileBig({ item }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <PhotoPlaceholder item={{ ...item, id: 'big-' + item.title }} style={{ aspectRatio: '4 / 3' }} />
      <div>
        <div className="display" style={{ fontSize: 26, lineHeight: 1.1 }}>{item.title}</div>
        <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11.5, color: 'var(--c-rock)',
                      letterSpacing: '0.04em', margin: '6px 0 10px' }}>
          {item.list}
        </div>
        <div style={{ fontFamily: 'var(--f-body)', fontSize: 15, color: 'var(--c-mute)', lineHeight: 1.55 }}>
          {item.desc}
        </div>
      </div>
    </div>
  );
}

const SEASONS = [
  { name: 'Spring', months: 'Mar – May', headline: 'Galaxy season',
    objects: ['Andromeda Galaxy', 'M81 & M82', 'Whirlpool Galaxy', 'Sombrero Galaxy', 'Leo Triplet'],
    note: 'The sky points away from the dusty Milky Way, opening up clear views of other galaxies.',
    grad: 'linear-gradient(160deg, #07111f, #182A46 45%, #556B52 100%)' },
  { name: 'Summer', months: 'Jun – Aug', headline: 'Milky Way core',
    objects: ['Milky Way core', 'Lagoon Nebula', 'Hercules Cluster', 'Saturn', 'Perseids meteors'],
    note: 'The galactic center rises overhead. The single most dramatic naked-eye sight of the year.',
    grad: 'linear-gradient(160deg, #07111f, #182A46 45%, #B65A3C 100%)' },
  { name: 'Fall', months: 'Sep – Nov', headline: 'Andromeda overhead',
    objects: ['Andromeda Galaxy', 'Double Cluster', 'Ring Nebula', 'Saturn', 'Jupiter'],
    note: 'Clear, cool nights. Andromeda Galaxy passes directly overhead — visible to the naked eye.',
    grad: 'linear-gradient(160deg, #07111f, #182A46 45%, #D47A4A 100%)' },
  { name: 'Winter', months: 'Dec – Feb', headline: 'Orion & friends',
    objects: ['Orion Nebula M42', 'Pleiades', 'Hyades', 'Mars', 'Geminids meteors'],
    note: 'The clearest, steadiest skies of the year. Cold — bring layers — but extraordinary.',
    grad: 'linear-gradient(160deg, #07111f, #182A46 45%, #6680b0 100%)' },
];

function SeasonGrid() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }} className="season-grid">
      {SEASONS.map((s, i) => (
        <div key={i} style={{
          position: 'relative',
          aspectRatio: '3 / 4',
          borderRadius: 'var(--r-lg)',
          overflow: 'hidden',
          background: s.grad,
          padding: 24,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          color: 'var(--c-star)',
        }}>
          <StarField stars={makeStars(40, i * 11 + 3)} opacity={0.8} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'var(--f-ui)', fontSize: 11, letterSpacing: '0.16em',
                          textTransform: 'uppercase', opacity: 0.7 }}>
              {s.months}
            </div>
            <div className="display" style={{ fontSize: 'clamp(34px, 3.6vw, 48px)', marginTop: 6 }}>
              {s.name}
            </div>
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 16, fontStyle: 'italic',
                          color: 'var(--c-moon)', marginTop: 4 }}>
              {s.headline}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 16px', display: 'flex',
                         flexDirection: 'column', gap: 6, fontFamily: 'var(--f-ui)', fontSize: 13 }}>
              {s.objects.map(o => (
                <li key={o} style={{ display: 'flex', gap: 8, alignItems: 'center', opacity: 0.9 }}>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--c-moon)' }} />
                  {o}
                </li>
              ))}
            </ul>
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, fontStyle: 'italic',
                          color: 'rgba(248,244,232,0.7)', lineHeight: 1.5, paddingTop: 14,
                          borderTop: '1px solid rgba(248,244,232,0.18)' }}>
              {s.note}
            </div>
          </div>
        </div>
      ))}
      <style>{`
        @media (max-width: 1000px) { .season-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px)  { .season-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { SkyPage, NAKED_EYE, TELESCOPE_TARGETS, SEASONS });
