// pages/home.jsx — Home page

function HomePage({ hour, phase, heroVariant, showPromise = true, onBook, go }) {
  return (
    <div className="page">
      <Hero variant={heroVariant} hour={hour} phase={phase} onBook={onBook} go={go} />

      {/* TONIGHT'S SKY */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)', padding: 'clamp(40px, 6vw, 80px) 0' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionHead
              kicker="◐ Tonight's sky"
              title="Every night in Sedona is a <em>different</em> night."
              intro="The moon, season, and weather change what's visible. We track all three so you don't have to guess."
            />
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn--primary" onClick={onBook}>Reserve tonight</button>
              <button className="btn btn--ghost" onClick={() => go('tours')}>See all tours</button>
            </div>
          </div>
          <TonightsSky onBook={onBook} />
        </div>
        <style>{`
          @media (max-width: 880px) { 
            .section--tight .wrap[style] { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>

      {/* 7-NIGHT CALENDAR */}
      <section className="section--tight">
        <div className="wrap-wide">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                        flexWrap: 'wrap', gap: 16, marginBottom: 28 }}>
            <SectionHead
              kicker="✦ Next 7 nights"
              title="Pick the right night for what you want to see."
            />
            <a onClick={() => go('tours')} style={{
              fontFamily: 'var(--f-ui)', fontSize: 13, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
              color: 'var(--c-rock)',
            }}>
              View 30-night calendar <IconArrow size={14} />
            </a>
          </div>
          <MoonCalendar />
        </div>
      </section>

      {/* TOURS */}
      <section className="section" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <SectionHead
            kicker="✶ Choose your night"
            title="Four ways to meet the <em>Sedona sky</em>."
            intro="From a first-timer's public tour to a private night for a proposal — every tour is led by a real astronomer, with real telescopes, in a small group."
          />
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}
               className="tours-grid">
            {TOURS.map(t => (
              <TourCard key={t.id} tour={t} onBook={onBook} />
            ))}
          </div>
          <style>{`
            @media (max-width: 1100px) { .tours-grid { grid-template-columns: 1fr 1fr !important; } }
            @media (max-width: 600px)  { .tours-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* WHY SEDONA — split image/text */}
      <WhySedona go={go} />

      {/* WHAT YOU'LL SEE TEASER */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            kicker="◉ Through the eyepiece"
            title="Not a planetarium. <em>The real sky.</em>"
            intro="Every Sedona Star Show is shaped by the season, the moon, and the weather. That's part of the magic. Your guide chooses the best available objects for the night."
            align="center"
          />
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}
               className="see-grid">
            {[
              { title: "Saturn's rings", desc: 'When up · April–Dec', kind: 'planet',
                grad: 'radial-gradient(circle at 50% 50%, #1a2745, #07111f)' },
              { title: 'Orion Nebula M42', desc: 'Winter · Nov–Mar', kind: 'deepsky',
                grad: 'radial-gradient(circle at 40% 50%, #d97243, #9b3a4b 30%, #182A46 65%, #07111f)' },
              { title: 'Milky Way core', desc: 'Summer · May–Sept', kind: 'milkyway',
                grad: 'linear-gradient(180deg, #07111F, #182A46 50%, #2a1428 100%)' },
              { title: 'Lunar craters', desc: 'Most months', kind: 'planet',
                grad: 'radial-gradient(circle at 50% 50%, #f4e4b0 0%, #c2a878 35%, #182A46 80%)' },
            ].map((it, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <PhotoPlaceholder item={{ ...it, id: 'see-' + i }} style={{ aspectRatio: '1 / 1' }} />
                <div>
                  <div className="display" style={{ fontSize: 22 }}>{it.title}</div>
                  <div style={{ fontFamily: 'var(--f-ui)', fontSize: 12, color: 'var(--c-mute)',
                                letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 2 }}>
                    {it.desc}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 36, textAlign: 'center' }}>
            <button className="btn btn--ghost" onClick={() => go('sky')}>
              See the full sky guide <IconArrow size={14} />
            </button>
          </div>
          <style>{`
            @media (max-width: 880px) { .see-grid { grid-template-columns: 1fr 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* DARK SKY PROMISE */}
      {showPromise && (
        <section className="section--tight">
          <div className="wrap-wide">
            <DarkSkyPromise />
          </div>
        </section>
      )}

      {/* REVIEWS */}
      <Reviews />

      {/* FAQ PREVIEW */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }} className="faq-preview-grid">
            <div>
              <SectionHead
                kicker="? Common questions"
                title="The straight answers."
              />
              <div style={{ marginTop: 24 }}>
                <a onClick={() => go('prepare')} className="btn btn--ghost btn--sm">
                  Full FAQ &amp; prep <IconArrow size={14} />
                </a>
              </div>
            </div>
            <Accordion items={[
              { q: 'What if it&apos;s cloudy?',
                a: "If we cancel for weather, you get a full refund or a free reschedule — your choice, no questions. We make the call by 4 PM the day of, based on our local meteorologist's read." },
              { q: 'Can I see Saturn or Jupiter?',
                a: "When they're up, yes. Saturn is high April through December. Jupiter is best summer and fall. Both are usually the most jaw-dropping thing first-timers see through a telescope." },
              { q: 'Is it cold?',
                a: "Even in summer, desert nights drop fast after sunset. Bring layers and closed-toe shoes. We provide camp chairs, blankets, and loaner parkas in winter." },
              { q: 'Do you cancel for the full moon?',
                a: "We don't cancel — we switch. On bright moon nights, we run a Moon & Planets tour instead, which is honestly incredible. Craters in a telescope are unforgettable." },
              { q: 'Where do we meet?',
                a: "Once you book, we send the exact meeting pin 3 hours before tour time. We rotate between a few permitted dark-sky sites within 20 minutes of Uptown Sedona." },
            ]} />
          </div>
          <style>{`
            @media (max-width: 880px) { .faq-preview-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
          `}</style>
        </div>
      </section>

      {/* FINAL CTA */}
      <FinalCTA onBook={onBook} />
    </div>
  );
}

function WhySedona({ go }) {
  return (
    <section className="section" style={{ background: 'var(--c-ink)', color: 'var(--c-star)', position: 'relative', overflow: 'hidden' }}>
      <StarField stars={makeStars(60, 77)} opacity={0.6} />
      <div className="wrap-wide" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center' }}
             className="why-grid">
          <div>
            <SectionHead
              kicker="★ Why Sedona, why now"
              title="One of <em>the darkest</em> skies in the lower 48."
              intro="Sedona has been an International Dark Sky Community since 2014. That status means real, enforced lighting ordinances — and skies you simply can't find within an hour of most American cities."
              onNight
            />
            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
              <BigStat n="2014" l="Dark Sky Community designation" />
              <BigStat n="Bortle 3" l="Typical sky brightness rating" />
              <BigStat n="4,500ft" l="Elevation reduces atmospheric haze" />
              <BigStat n="280+" l="Clear nights per year, on average" />
            </div>
          </div>

          {/* Layered Sedona twilight artwork */}
          <div style={{
            position: 'relative',
            aspectRatio: '4 / 5',
            borderRadius: 'var(--r-xl)',
            overflow: 'hidden',
            background: 'linear-gradient(180deg, #07111F 0%, #182A46 30%, #3a2046 55%, #9b3a4b 78%, #d97243 100%)',
          }}>
            <StarField stars={makeStars(100, 8)} opacity={0.95} />
            <div style={{ position: 'absolute', top: '14%', right: '18%' }}>
              <MoonGlyph fraction={0.2} size={56} />
            </div>
            <RedRocksFar color="#1a0a14" />
            <RedRocksNear color="#0a0408" />
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) { .why-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        `}</style>
      </div>
    </section>
  );
}

function BigStat({ n, l }) {
  return (
    <div>
      <div className="num" style={{ fontSize: 48, lineHeight: 1, color: 'var(--c-moon)' }}>{n}</div>
      <div style={{ fontFamily: 'var(--f-body)', fontSize: 14, fontStyle: 'italic',
                    color: 'rgba(248,244,232,0.7)', marginTop: 6, maxWidth: 260, lineHeight: 1.4 }}>{l}</div>
    </div>
  );
}

function Reviews() {
  const reviews = [
    {
      stars: 5, name: 'Margaret K.',
      where: 'Phoenix · Anniversary trip',
      quote: 'Our guide had the patience of a saint with my husband\'s 200 questions about galaxies. Saw Saturn\'s rings, the Andromeda Galaxy, and a meteor I\'ll remember forever.',
    },
    {
      stars: 5, name: 'David & Reyna',
      where: 'San Diego · Family vacation',
      quote: 'Our kids (8 and 11) are still talking about it three weeks later. The guides made the constellations feel like stories instead of trivia.',
    },
    {
      stars: 5, name: 'Hiroshi T.',
      where: 'Tokyo · Solo traveler',
      quote: 'I have traveled to dark sky sites in Chile and New Zealand. Sedona was every bit as moving — and the guide knew exactly what to point at and when.',
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          kicker="❝ Guest reviews"
          title="What people say <em>after</em> the lights go out."
        />
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }} className="rev-grid">
          {reviews.map((r, i) => (
            <div key={i} className="card">
              <div style={{ display: 'flex', gap: 2, marginBottom: 16, color: 'var(--c-rock)' }}>
                {[...Array(r.stars)].map((_, j) => <IconStar key={j} size={14} stroke={0} fill="currentColor" />)}
              </div>
              <p style={{ fontFamily: 'var(--f-body)', fontSize: 17.5, fontStyle: 'italic',
                          lineHeight: 1.55, margin: '0 0 22px', fontWeight: 300 }}>
                "{r.quote}"
              </p>
              <div style={{ fontFamily: 'var(--f-ui)', fontSize: 13, fontWeight: 600 }}>{r.name}</div>
              <div style={{ fontFamily: 'var(--f-ui)', fontSize: 12, color: 'var(--c-mute)' }}>{r.where}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center', gap: 24, fontFamily: 'var(--f-ui)',
                      fontSize: 12, color: 'var(--c-mute)', flexWrap: 'wrap' }}>
          <span>Tripadvisor: 4.9 · 412 reviews</span>
          <span>Google: 4.9 · 287 reviews</span>
          <span>Viator: 4.9 · 168 reviews</span>
        </div>
        <style>{`
          @media (max-width: 880px) { .rev-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function FinalCTA({ onBook }) {
  return (
    <section style={{
      background: 'linear-gradient(180deg, #07111F 0%, #182A46 100%)',
      color: 'var(--c-star)',
      padding: 'clamp(80px, 12vw, 160px) 0',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <StarField stars={makeStars(80, 123)} opacity={0.85} />
      <RedRocksNear color="#04020a" />
      <div className="wrap" style={{ position: 'relative', textAlign: 'center' }}>
        <h2 className="display" style={{
          fontSize: 'clamp(48px, 8vw, 112px)',
          margin: 0, maxWidth: 1000, marginInline: 'auto',
        }}>
          The sky tonight<br/>is <em>waiting</em>.
        </h2>
        <p className="lead" style={{
          color: 'rgba(248,244,232,0.75)',
          maxWidth: 480, margin: '24px auto 36px',
        }}>
          Two hours. Real telescopes. A guide who knows every star above the red rocks.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn--moon" onClick={onBook}>
            Book a Star Show <IconArrow size={16} />
          </button>
          <button className="btn btn--ghost-night">Gift a tour</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });