// pages/prepare.jsx — Prepare for your tour + FAQ

function PreparePage({ onBook }) {
  const [cat, setCat] = React.useState('booking');

  return (
    <div className="page">
      <PageHero
        kicker="✓ Before you come"
        title="Everything you need to know <em>before nightfall</em>."
        intro="Sedona nights cool faster than you'd think, our meeting spots aren't on Google Maps, and the moon changes the plan. Here's the straight read."
      />

      {/* Pack list at top */}
      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'flex-start' }}
               className="prep-grid">
            <div style={{
              position: 'sticky', top: 80,
              padding: 32,
              background: 'var(--c-ink)',
              color: 'var(--c-star)',
              borderRadius: 'var(--r-xl)',
              overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
                <StarField stars={makeStars(40, 17)} opacity={0.7} />
              </div>
              <div style={{ position: 'relative' }}>
                <div className="eyebrow on-night" style={{ marginBottom: 14 }}>Pack list</div>
                <div className="display" style={{ fontSize: 32, lineHeight: 1.05, marginBottom: 24 }}>
                  What to <em>bring</em>.
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {[
                    ['Warm layers', 'Even summer nights drop fast'],
                    ['Closed-toe shoes', 'Uneven ground in the dark'],
                    ['A water bottle', 'Desert air is dry'],
                    ['Phone (camera!)', 'For shots through the eyepiece'],
                    ['Curiosity', 'Bring questions'],
                  ].map(([t, d], i) => (
                    <li key={i} style={{ display: 'flex', gap: 12 }}>
                      <IconCheck size={18} stroke={2} style={{ color: 'var(--c-moon)', flexShrink: 0, marginTop: 2 }} />
                      <div>
                        <div style={{ fontFamily: 'var(--f-display)', fontSize: 19 }}>{t}</div>
                        <div style={{ fontFamily: 'var(--f-body)', fontSize: 13, color: 'rgba(248,244,232,0.6)',
                                      fontStyle: 'italic' }}>{d}</div>
                      </div>
                    </li>
                  ))}
                </ul>

                <hr className="rule rule--night" style={{ margin: '24px 0' }} />

                <div className="eyebrow on-night" style={{ marginBottom: 14 }}>We provide</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8,
                             fontFamily: 'var(--f-body)', fontSize: 14, color: 'rgba(248,244,232,0.85)' }}>
                  <li>· Telescopes (8″ SCT &amp; 11″ Dobsonian)</li>
                  <li>· Camp chairs &amp; blankets</li>
                  <li>· Loaner parka jackets (winter)</li>
                  <li>· Red headlamps</li>
                  <li>· Green laser pointer for constellations</li>
                  <li>· Driving directions (3hr before)</li>
                </ul>
              </div>
            </div>

            <div>
              <div style={{ marginBottom: 32 }}>
                <SectionHead
                  kicker="? Frequent questions"
                  title="<em>Honest</em> answers."
                />
              </div>

              {/* Category pills */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 24 }}>
                {FAQ_CATEGORIES.map(c => (
                  <button key={c.id} onClick={() => setCat(c.id)} style={{
                    padding: '8px 14px',
                    borderRadius: 999,
                    border: '1px solid var(--c-line)',
                    background: cat === c.id ? 'var(--c-ink)' : 'transparent',
                    color: cat === c.id ? 'var(--c-star)' : 'var(--c-ink)',
                    fontFamily: 'var(--f-ui)', fontSize: 12.5, fontWeight: 600,
                    letterSpacing: '0.02em', cursor: 'pointer',
                    transition: 'all 0.15s',
                  }}>
                    {c.label}
                  </button>
                ))}
              </div>

              <Accordion items={FAQS[cat]} multi />
            </div>
          </div>
          <style>{`
            @media (max-width: 1000px) {
              .prep-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
              .prep-grid > div:first-child { position: relative !important; top: auto !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Hotel partner / accessibility callouts */}
      <section className="section--tight" style={{ background: 'var(--c-paper-2)' }}>
        <div className="wrap-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="cta-cards-grid">
            <CalloutCard
              icon={<IconRoute size={26} />}
              kicker="Hotel & resort concierge"
              title="We partner with concierges across Sedona."
              text="Front desk staff can book directly through our partner portal — same prices, no markup, instant confirmation, and a tonight-only late availability feed for guests."
              btn="Become a partner"
            />
            <CalloutCard
              icon={<IconShield size={26} />}
              kicker="Accessibility"
              title="Most tours are wheelchair-accessible."
              text="Our flat dark-sky site has a hard-packed surface to the viewing area. We can bring telescopes to your rental for guests who prefer to stay seated indoors during talks."
              btn="Email us about access"
            />
          </div>
          <style>{`@media (max-width: 880px) { .cta-cards-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

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

function CalloutCard({ icon, kicker, title, text, btn }) {
  return (
    <div style={{
      background: 'white', borderRadius: 'var(--r-lg)', padding: 32,
      border: '1px solid var(--c-line)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18, marginBottom: 18 }}>
        <div style={{ color: 'var(--c-rock)' }}>{icon}</div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>{kicker}</div>
          <div className="display" style={{ fontSize: 26, lineHeight: 1.15 }}>{title}</div>
        </div>
      </div>
      <p style={{ fontFamily: 'var(--f-body)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--c-mute)',
                  margin: '0 0 22px', fontWeight: 300 }}>{text}</p>
      <button className="btn btn--ghost btn--sm">{btn} <IconArrow size={14} /></button>
    </div>
  );
}

const FAQ_CATEGORIES = [
  { id: 'booking', label: 'Booking' },
  { id: 'weather', label: 'Weather' },
  { id: 'moon', label: 'Moon phase' },
  { id: 'meeting', label: 'Meeting & location' },
  { id: 'comfort', label: 'Comfort' },
  { id: 'kids', label: 'Kids & families' },
  { id: 'access', label: 'Accessibility' },
  { id: 'photo', label: 'Photography' },
  { id: 'rules', label: 'Pets · Alcohol · Smoking' },
];

const FAQS = {
  booking: [
    { q: 'How far in advance should I book?',
      a: 'Summer Saturdays and special sky events (meteor showers, eclipses) sell out 2–3 weeks ahead. Most other nights you can book 1–3 days out. Same-day spots happen — call us.' },
    { q: 'Can I change my date after booking?',
      a: 'Yes, up to 24 hours before tour time, free, as long as we have space on the night you want.' },
    { q: 'Do you accept walk-ups?',
      a: "Only when there's space, which is rare. Always book first — we cap groups at 10 to keep telescope time generous." },
    { q: 'Are gift certificates available?',
      a: 'Yes. You pick the tour and dollar amount; the recipient picks any night within 12 months. Sent as a printable PDF or emailed directly.' },
  ],
  weather: [
    { q: "What happens if it's cloudy?",
      a: "We make the call by 4 PM the day of your tour, based on local forecasts. If we cancel, you get a full refund or free reschedule — whichever you'd prefer.\n\nWe don't cancel for a few clouds — partly cloudy nights often deliver brilliant breaks of clear sky. We do cancel for solid overcast or active storms." },
    { q: 'What about wind?',
      a: 'Sustained winds above 25 mph make telescope viewing unstable. We may relocate or cancel. Same refund policy applies.' },
    { q: 'What about monsoon season?',
      a: 'July through early September has afternoon thunderstorms that usually clear by sunset. We monitor radar closely and have rescheduled successfully on most monsoon nights.' },
    { q: 'Smoke from wildfires?',
      a: "If air quality drops below 'moderate,' we cancel and refund. We never run tours that could harm guests' lungs." },
  ],
  moon: [
    { q: 'Should I avoid full moon?',
      a: "Depends what you want. A full moon overwhelms the dim galaxies and Milky Way — but the moon itself, in a telescope, is one of the most dramatic things you'll ever see.\n\nFor Milky Way and deep-sky: avoid the four nights leading up to full moon, plus full moon night.\n\nFor lunar craters and bright planets: any moon phase works." },
    { q: 'When is the Milky Way visible?',
      a: 'The galactic core is up May through September, best around new moon. Even before May, the outer arms of the Milky Way are visible in dark sky.' },
    { q: 'Do you cancel during full moon?',
      a: 'No — we switch you to the Moon & Planets Night tour, at the lower $95 price, and refund the difference if you booked the Public tour.' },
  ],
  meeting: [
    { q: 'Where do we meet?',
      a: "Once you book, we send the exact meeting pin and parking note 3 hours before tour time. We rotate between a few permitted dark-sky sites within 18–22 minutes of Uptown Sedona." },
    { q: 'Is transportation included?',
      a: "Self-drive by default. Optional round-trip Uptown shuttle for $25/person (book 24hr ahead). Private tours include the option of us driving to your rental." },
    { q: 'Is there parking?',
      a: 'Yes, on a packed-dirt lot at our main site. We meet you in the lot with red flashlights to walk you in.' },
    { q: 'How much walking is involved?',
      a: 'About 80 yards on a flat, hard-packed trail from parking to the viewing area. We carry the equipment.' },
    { q: 'Are there restrooms?',
      a: 'A pit toilet at the main site. We recommend using a restroom in Uptown before driving out.' },
  ],
  comfort: [
    { q: 'How cold does it get?',
      a: "Summer nights: 55–65°F. Spring/fall: 40–55°F. Winter: 28–45°F. Bring layers no matter the season." },
    { q: 'Are chairs and blankets provided?',
      a: 'Yes. Comfortable camp chairs and clean fleece blankets for every guest. Loaner parka jackets in winter.' },
    { q: 'What should I wear?',
      a: 'Layers, closed-toe shoes, and a warm hat in cooler months. Avoid any white clothing — it reflects what little light we have and disrupts dark adaptation.' },
    { q: 'Can I bring snacks?',
      a: "Light snacks fine. Please avoid anything strongly scented (it attracts wildlife) and pack out everything you bring in." },
  ],
  kids: [
    { q: 'What age is appropriate?',
      a: "Ages 5+ love the public tour. Under-5s are welcome on private tours and on public tours when they're capable of sitting quietly during 5-minute constellation talks." },
    { q: 'Will kids stay engaged?',
      a: "Our guides are great with kids — they use stories, the laser pointer, and let kids drive the telescope. Most parents are surprised at how long kids stay focused (often longer than adults)." },
    { q: 'Can a parent step away if a kid needs a break?',
      a: 'Absolutely. The parking lot is steps away, and our guide can pause the tour without disrupting it.' },
  ],
  access: [
    { q: 'Is the tour wheelchair accessible?',
      a: 'Our main dark-sky site has a hard-packed surface from parking to viewing. Telescopes can be lowered for seated viewing. Let us know in the booking notes and we will confirm the night-of accessibility for your specific date.' },
    { q: 'Can a telescope come to my rental?',
      a: "Yes — the Private Star Show comes to you anywhere within 30 minutes of Sedona. We've set up on patios, decks, and lawns." },
    { q: 'Do you accommodate hearing/vision differences?',
      a: 'Yes. We provide a printed star map and field guide on request. Our guides naturally use clear, projected speech and face guests when explaining.' },
  ],
  photo: [
    { q: 'Can I take a photo through the telescope with my phone?',
      a: 'Yes — and our guides will help you get a clean shot. Saturn and the Moon photograph especially well through a phone.' },
    { q: 'Should I bring a real camera?',
      a: 'For wide Milky Way shots, yes — a DSLR/mirrorless on a tripod, with a 14–24mm lens at f/2.8, 20-second exposure, ISO 3200. Our guides can coach you.' },
    { q: 'Do you offer dedicated astrophotography tours?',
      a: 'Add astrophoto coaching to a Private Star Show ($150 add-on). We bring a tracker and walk you through the full workflow.' },
  ],
  rules: [
    { q: 'Can I bring my dog?',
      a: 'Sadly, no. Wildlife protocols and the safety of other guests come first. Service animals are always welcome.' },
    { q: 'Can I bring alcohol?',
      a: "No alcohol on tours — uneven ground in the dark, low-light walking, and shared telescope time don't mix well with it." },
    { q: 'Can I smoke or vape?',
      a: 'No — both impact other guests and create light pollution near the telescopes.' },
  ],
};

Object.assign(window, { PreparePage, CalloutCard, FAQS, FAQ_CATEGORIES });