/* Tours page */

function ToursPage() {
  const byRegion = REGIONS.map(r => ({
    ...r,
    tours: TOURS.filter(t => t.region === r.slug)
  })).filter(r => r.tours.length > 0);

  return (
    <React.Fragment>
      <Nav active="tours" />

      <header className="page-head">
        <div className="container">
          <div className="crumb">Tours &amp; Shuttles</div>
          <h1>Nine tours out of one outpost.</h1>
          <p>Two permit-only days in Coyote Buttes, six no-permit days across the Vermilion Cliffs plateau and the Grand Staircase, and an overnight under the desert stars. All tours run 8–9 hours with as much hiking as you wish. Same flat rate. Lunch, water, and cold drinks included.</p>
        </div>
      </header>

      <section className="toursPage">
        <div className="container">
          {byRegion.map(region => (
            <div className="region" key={region.slug}>
              <div className="region-head">
                <h2>{region.name}</h2>
                <div className="k">{region.sub}</div>
              </div>
              {region.tours.map((t, i) => (
                <article className="tourRow" key={t.slug} id={t.slug}>
                  <SmartImg src={t.photo} label={t.photoLabel} tone={["rust","canyon","gold","sand","shadow","sky"][i%6]} />
                  <div className="tourRow-body">
                    <div className="num">№ {t.num} · {t.regionName}</div>
                    <h3>{t.title}</h3>
                    <div className="short">{t.short}</div>
                    <p className="long">{t.long}</p>
                    <dl className="tourRow-meta">
                      <dt>Duration</dt><dd>{t.duration}</dd>
                      <dt>Permit</dt><dd>{t.permit}</dd>
                      <dt>Price</dt><dd>{t.region === "overnight" ? "$300 per person" : "$200 + tax ($220) per person · 2-person minimum"}</dd>
                      <dt>Included</dt><dd>{t.region === "overnight" ? "Tent, sleeping bag, pad, sack lunch, dinner, breakfast, water & cold drinks" : "Guide, 4WD transport, lunch, water & cold drinks"}</dd>
                    </dl>
                    <a href="about.html#contact" className="btn primary">Book this tour</a>
                  </div>
                </article>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section className="pricing" id="pricing">
        <div className="container">
          <div className="pricing-head">
            <div className="k">Pricing</div>
            <h2>One flat rate. No deposits, ever.</h2>
          </div>
          <div className="pricing-grid">
            <div className="price-card">
              <div className="k">Day tours · Per person</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$200 + tax ($220 total)</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>2-person minimum · Solo private $175 × 4 = $700</p>
              <p>All day, 8–9 hours, with as much hiking as you wish. Includes guide, 4WD transport from the Outpost, picnic lunch, water and cold drinks. Same rate whether you're in Coyote Buttes, on the plateau, or in the Grand Staircase.</p>
            </div>
            <div className="price-card">
              <div className="k">Half-day tours · Per person</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$150 per person</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>4 hours · 2-person minimum</p>
              <p>A shorter morning or afternoon run — the right length if you want a taste of the area without committing a full day.</p>
            </div>
            <div className="price-card">
              <div className="k">Overnight camp-outs · Per person</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$300 per person</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>24 hours · Noon to noon</p>
              <p>Tent, sleeping bag and pad, table, chairs. Sack lunch, dinner, breakfast, water and cold drinks. Primitive camping — sunset, Milky Way, sunrise.</p>
            </div>
            <div className="price-card">
              <div className="k">Photo workshops · Per person</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$375 per person</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>Minimum 4 · Maximum 10</p>
              <p>Dawn-and-dusk photography trips with hands-on instruction. Custom night-sky tours also available on request — $275 per person, 2-person minimum, flexible timing up to 8 hours.</p>
            </div>
            <div className="price-card">
              <div className="k">Kids · Family rate</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$100 per child</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>18 &amp; under · With 2 paying adults</p>
              <p>Group and family rates available on any tour. Dogs are allowed on some tours for $7 per dog per day; they must stay under your control on the lead.</p>
            </div>
            <div className="price-card">
              <div className="k">Payment</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>Cash or check only</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>No deposits · No plastic</p>
              <p>We put your name on the calendar and count on you to show up. Weather and other factors can change your day — we don't want your money if we can't do your tour. Reschedule free, any time.</p>
            </div>
          </div>
        </div>
      </section>

      {/* SHUTTLES */}
      <section className="shuttles" id="shuttles">
        <div className="container">
          <div className="pricing-head">
            <div className="k">Wave trailhead shuttle</div>
            <h2>Just the ride, if that's what you need.</h2>
          </div>
          <p className="big-italic">
            If you've already won the Wave permit and want to hike on your own, we can shuttle you to the trailhead and back.
          </p>
          <p>
            $150 per group, your time preference. Road conditions occasionally make this impossible — we'll tell you honestly if that's the case. Reserve by calling <a href="tel:+19286911047" style={{borderBottom:"1px solid var(--accent)"}}>(928) 691-1047</a> or emailing <a href="mailto:outpost@paria.com" style={{borderBottom:"1px solid var(--accent)"}}>outpost@paria.com</a>.
          </p>
        </div>
      </section>

      {/* LODGING & FOOD */}
      <section className="pricing" id="lodging">
        <div className="container">
          <div className="pricing-head">
            <div className="k">Stay with us</div>
            <h2>B&amp;B, camping, and BBQ by reservation.</h2>
          </div>
          <div className="pricing-grid">
            <div className="price-card">
              <div className="k">Bed &amp; Breakfast</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>$100 per night</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>One queen room · Includes breakfast</p>
              <p>A small, peaceful room out in the country. No TV, no phone, no wifi — by design. If you want to unplug before a tour, this is the place to do it.</p>
            </div>
            <div className="price-card">
              <div className="k">Tent &amp; RV camping</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>On-site</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>Tent · Hammock · RV dry camping</p>
              <p>Guests are welcome to pitch a tent, sling a hammock on the shady porch, or dry-camp an RV in our parking lot. No hookups. Free parking the night before a tour.</p>
            </div>
            <div className="price-card">
              <div className="k">BBQ restaurant</div>
              <p style={{fontFamily:"var(--font-display)",fontSize:"28px",fontStyle:"italic",margin:"0 0 10px"}}>Open 1998 · By reservation</p>
              <p style={{fontFamily:"var(--font-display)",fontSize:"20px",fontStyle:"italic",margin:"0 0 16px", color:"var(--accent)"}}>Private parties &amp; special groups</p>
              <p>Our BBQ restaurant has been here since 1998. We currently open it by advance reservation for special groups and private parties. Private events — family reunions, weddings, retreats — also welcome.</p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="faq" id="faq">
        <div className="container">
          <div className="pricing-head">
            <div className="k">Frequently asked</div>
            <h2>Questions we get a lot.</h2>
          </div>
          <div className="faq-grid">
            <div className="faq-item">
              <h4>Which tours need a permit?</h4>
              <p>Only The Wave (North Coyote Buttes) and South Coyote Buttes are permit-controlled. Every other tour we run is no-permit — we can go tomorrow morning if you want.</p>
            </div>
            <div className="faq-item">
              <h4>Can you get the Wave permit for us?</h4>
              <p>No. The BLM lottery has to go through the applicant. We can explain how the advance online lottery and the next-day geographic lottery work, and we'll substitute a no-permit tour if you don't draw.</p>
            </div>
            <div className="faq-item">
              <h4>Why cash or check? Why no deposits?</h4>
              <p>We've done it this way since 1998 and haven't had a reason to change. If weather turns or you can't make it, we don't want your money.</p>
            </div>
            <div className="faq-item">
              <h4>How long are the tours?</h4>
              <p>Day tours are 8–9 hours. We're already five minutes from both monument entrances, so our tours are considerably longer than ones that start in Kanab or Page. Overnights run 24 hours, noon to noon.</p>
            </div>
            <div className="faq-item">
              <h4>What should we bring?</h4>
              <p>Sturdy shoes, sun protection, layered clothing. We supply lunch, water, and cold drinks. For overnights, we supply tents and bags or you can bring your own.</p>
            </div>
            <div className="faq-item">
              <h4>Kids? Dogs?</h4>
              <p>Kids 18 and under are $100 each with two paying adults. Dogs are allowed on some tours for $7 per dog per day and must stay under your control on the lead. BLM rules prohibit dogs in Coyote Buttes and Buckskin Gulch.</p>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <Tweaks />
    </React.Fragment>
  );
}

window.ToursPage = ToursPage;