// pages/tours.jsx — Tours page with comparison + calendar + policies

function ToursPage({ onBook, go }) {
  return (
    <div className="page">
      <PageHero
        kicker="✦ Tour catalog"
        title="Four tours. <em>One sky.</em>"
        intro="Public, private, moon-friendly, and event tours. Whatever Sedona's sky is doing tonight, there's a way to see it well."
      />

      {/* TOUR CARDS */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap-wide">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="tours-page-grid">
            {TOURS.map(t => (
              <TourCard key={t.id} tour={t} onBook={onBook} />
            ))}
          </div>
          <style>{`@media (max-width: 880px) { .tours-page-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* COMPARISON */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <SectionHead
            kicker="≡ Side by side"
            title="Which tour is right for you?"
          />
          <div style={{ marginTop: 36, background: 'white', borderRadius: 'var(--r-lg)',
                        border: '1px solid var(--c-line)', overflow: 'hidden', overflowX: 'auto' }}>
            <ComparisonTable />
          </div>
        </div>
      </section>

      {/* MOON CALENDAR — 14 days */}
      <section className="section">
        <div className="wrap-wide">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                        flexWrap: 'wrap', gap: 16, marginBottom: 28 }}>
            <SectionHead
              kicker="☾ Pick the right night"
              title="The next 14 nights, planned."
              intro="Dark Sky Nights are best for galaxies and the Milky Way. Moon Nights are best for craters and bright planets."
            />
          </div>
          <MoonCalendar days={7} />
          <div style={{ marginTop: 14 }}>
            <MoonCalendar days={7} />
          </div>
        </div>
      </section>

      {/* POLICIES */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap">
          <SectionHead
            kicker="§ Policies"
            title="What to know <em>before</em> you book."
          />
          <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}
               className="policies-grid">
            {POLICIES.map((p, i) => (
              <div key={i} style={{
                background: 'white', borderRadius: 'var(--r-lg)', padding: 24,
                border: '1px solid var(--c-line)',
              }}>
                <div style={{ color: 'var(--c-rock)', marginBottom: 12 }}>{p.icon}</div>
                <div className="display" style={{ fontSize: 22, marginBottom: 10 }}>{p.title}</div>
                <p style={{ fontFamily: 'var(--f-body)', fontSize: 14.5, lineHeight: 1.55,
                            color: 'var(--c-mute)', margin: 0, fontWeight: 300 }}>{p.text}</p>
              </div>
            ))}
          </div>
          <style>{`@media (max-width: 880px) { .policies-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      <FinalBookCTA onBook={onBook} />
    </div>
  );
}

const POLICIES = [
  { icon: <IconClock size={22} />, title: 'Weather cancellation',
    text: "We make the weather call by 4 PM the day of your tour. If we cancel, you get a full refund or free reschedule — whichever you prefer." },
  { icon: <IconCalendar size={22} />, title: 'Guest cancellation',
    text: "Full refund up to 24 hours before tour time. Within 24 hours we offer a free reschedule, no charge, as long as we can fit you on another night." },
  { icon: <IconShield size={22} />, title: 'Liability waiver',
    text: "Tours involve light walking on uneven desert terrain in low light. Every guest signs a brief electronic waiver during booking." },
  { icon: <IconUsers size={22} />, title: 'Children',
    text: "Ages 5+ welcome on all tours. Under-5s are welcome free on private tours and on public tours when they can sit quietly during talks." },
  { icon: <IconLeaf size={22} />, title: 'Pets &amp; alcohol',
    text: "No pets — wildlife and dark-sky protocols. No alcohol on tours. We do close with sparkling cider on private bookings." },
  { icon: <IconCamera size={22} />, title: 'Photography',
    text: "Personal phone photography is welcome. We provide guidance for phone-through-eyepiece shots. Commercial photography needs prior arrangement." },
];

function ComparisonTable() {
  const rows = [
    ['Adult price', '$117', '$1,200 flat', '$95', '$145'],
    ['Child price (5–12)', '$76', 'included', '$62', '$92'],
    ['Duration', '2 hours', '2.5 hours', '90 min', '3 hours'],
    ['Max group', '10', '8 (your group)', '10', '14'],
    ['Telescopes', '8″ + 11″', '8″ + 11″', '8″', '8″ + 11″ + binos'],
    ['Constellation talk', '✓', '✓ (custom)', '✓', '✓'],
    ['Astrophoto coaching', 'on request', '✓', '—', '✓'],
    ['Hot drinks', '—', '✓', '—', '✓'],
    ['Reclining mats', '—', 'on request', '—', '✓'],
    ['Best for', 'First-timers, couples, families', 'Proposals, retreats, vacation rentals', 'Bright moon nights, families with little kids', 'Meteor showers, eclipses, sky lovers'],
  ];
  return (
    <table style={{
      width: '100%', borderCollapse: 'collapse',
      fontFamily: 'var(--f-ui)', fontSize: 14,
      minWidth: 720,
    }}>
      <thead>
        <tr style={{ background: 'var(--c-ink)', color: 'var(--c-star)' }}>
          <th style={th()}></th>
          <th style={th()}>Public</th>
          <th style={th()}>Private</th>
          <th style={th()}>Moon &amp; Planets</th>
          <th style={th()}>Special Events</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row, i) => (
          <tr key={i} style={{ borderTop: '1px solid var(--c-line)' }}>
            {row.map((cell, j) => (
              <td key={j} style={{
                padding: '16px 18px',
                color: j === 0 ? 'var(--c-mute)' : 'var(--c-ink)',
                fontWeight: j === 0 ? 600 : 400,
                letterSpacing: j === 0 ? '0.04em' : 0,
                textTransform: j === 0 ? 'uppercase' : 'none',
                fontSize: j === 0 ? 11 : 14,
              }}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function th() {
  return {
    padding: '14px 18px',
    textAlign: 'left',
    fontFamily: 'var(--f-ui)',
    fontSize: 11,
    fontWeight: 600,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
  };
}

function PageHero({ kicker, title, intro }) {
  return (
    <section style={{
      position: 'relative',
      background: 'linear-gradient(180deg, #07111F 0%, #182A46 100%)',
      color: 'var(--c-star)',
      padding: 'clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px)',
      overflow: 'hidden',
    }}>
      <StarField stars={makeStars(60, 33)} opacity={0.7} />
      <div className="wrap" style={{ position: 'relative' }}>
        <SectionHead kicker={kicker} title={title} intro={intro} onNight />
      </div>
    </section>
  );
}

function FinalBookCTA({ onBook }) {
  return (
    <section style={{
      background: 'var(--c-ink)', color: 'var(--c-star)',
      padding: 'clamp(60px, 8vw, 100px) 0',
    }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.4fr auto',
                                     gap: 32, alignItems: 'center' }} className="final-cta-grid">
        <div>
          <div className="eyebrow on-night" style={{ marginBottom: 14 }}>Ready when you are</div>
          <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)' }}>
            Pick a night. <em>We'll bring the universe.</em>
          </div>
        </div>
        <button className="btn btn--moon" onClick={onBook}>
          Book a Star Show <IconArrow size={16} />
        </button>
      </div>
      <style>{`@media (max-width: 880px) { .final-cta-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { ToursPage, PageHero, FinalBookCTA, POLICIES });