/* Home page */

function HomePage() {
  return (
    <React.Fragment>
      <Nav active="home" />

      {/* HERO */}
      <section className="heroF">
        <div className="container">
          <div className="heroF-mark">Hwy 89 · Mile 21.5 · Paria River Bridge · Est. 1998</div>
          <h1>Your guides to the Grand Staircase.</h1>
          <div className="heroF-rule"></div>
          <p className="heroF-lede">
            Guided photography and hiking tours in the Vermilion Cliffs and Grand Staircase-Escalante National Monuments. Steve &amp; Susan Dodson have been running the outpost since 1998 — nestled in the Paria River Valley, five minutes from both monument entrances.
          </p>
          <div className="heroF-cta">
            <a href="tours.html" className="btn primary">See the tours</a>
            <a href="about.html" className="btn">Our story</a>
          </div>
        </div>
      </section>

      {/* HERO PHOTO */}
      <section className="heroF-photo">
        <div className="container">
          <SmartImg src="photos/hero-landscape.jpg" label="SOAP CREEK · LAURENT MARTRES" tone="rust" />
        </div>
      </section>

      {/* STATS */}
      <section className="container">
        <div className="heritageStrip">
          <div className="stat"><div className="n">28</div><span className="l">Years on this road</span></div>
          <div className="stat"><div className="n">9</div><span className="l">Tours offered</span></div>
          <div className="stat"><div className="n">2</div><span className="l">Permit tours (Wave · S. CB)</span></div>
          <div className="stat"><div className="n">0</div><span className="l">Deposits ever taken</span></div>
        </div>
      </section>

      {/* FIRST BLOCK OF TOURS */}
      <section className="heritageTours">
        <div className="container">
          <div className="heritageTours-head">
            <div className="k">The tours</div>
            <h2>Nine ways into the monument.</h2>
          </div>
          {TOURS.slice(0,4).map((t, i) => (
            <article className="heritageTour" key={t.slug}>
              <SmartImg src={t.photo} label={t.photoLabel} tone={["rust","canyon","gold","shadow"][i%4]} />
              <div>
                <div className="num">№ {t.num} · {t.regionName}</div>
                <h3>{t.title}</h3>
                <p>{t.short}</p>
                <div className="meta">
                  <span>{t.duration}</span>
                  <span>{t.permit}</span>
                </div>
                <div style={{marginTop: 24}}>
                  <a href={`tours.html#${t.slug}`} className="btn">Details</a>
                </div>
              </div>
            </article>
          ))}
          <div style={{textAlign:"center", paddingTop: 60}}>
            <a href="tours.html" className="btn primary">See all nine tours</a>
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <section className="heritageQuote">
        <div className="container">
          <blockquote>
            "We don't take money upfront for reservations. You book your day, and if the weather is bad or you can't make it, we don't want your money."
          </blockquote>
          <cite>— Steve &amp; Susan Dodson, Paria Outpost</cite>
        </div>
      </section>

      {/* TRIPADVISOR */}
      <TripAdvisor />

      {/* HOW IT WORKS */}
      <section className="heritageHow">
        <div className="container">
          <div className="heritageHow-head">
            <div className="k">How it works</div>
            <h2>Four steps, no deposits.</h2>
          </div>
          <div className="heritageHow-grid">
            <div className="heritageHow-step">
              <div className="num">i.</div>
              <h4>Call or email</h4>
              <p>(928) 691-1047 or outpost@paria.com. Tell us your dates, party size, and which tour you have in mind. We'll customize to your interests and ability.</p>
            </div>
            <div className="heritageHow-step">
              <div className="num">ii.</div>
              <h4>We hold the date</h4>
              <p>We put your name on the calendar. No deposit, no card on file. We count on you to show up — and if weather turns, we reschedule, no penalty.</p>
            </div>
            <div className="heritageHow-step">
              <div className="num">iii.</div>
              <h4>You apply for permits</h4>
              <p>If it's The Wave or South Coyote Buttes, you enter the BLM lottery yourself. We cannot obtain permits for you, but we can explain the process.</p>
            </div>
            <div className="heritageHow-step">
              <div className="num">iv.</div>
              <h4>Meet at the Outpost</h4>
              <p>Hwy 89 at mile 21.5 — the Paria River bridge, between Kanab and Page. Tours run 8–9 hours with as much hiking as you wish. Lunch, water, and cold drinks included.</p>
            </div>
          </div>
        </div>
      </section>

      {/* OWNER'S NOTE */}
      <section className="heritageNote">
        <div className="container">
          <div className="heritageNote-grid">
            <div>
              <div className="k" style={{marginBottom:14}}>About the Outpost</div>
              <p className="big-italic">
                We are here to get you out to remote, beautiful locations so you can photograph and experience nature in the solitude it merits.
              </p>
              <p>
                Nestled in the historic Paria River Valley, five minutes from both Monument entrances, we offer day trips — early-morning-to-afternoon or midday-to-sunset — as well as overnight camp-outs and photo workshops. Our tours are considerably longer than those that start from Kanab or Page, because we're already here. Brain rocks, hoodoos, badlands, slot canyons, balanced rocks, and wildly colored formations are all within reach of a day.
              </p>
              <cite>— Steve &amp; Susan Dodson, Paria Outpost</cite>
            </div>
            <div>
              <dl className="meta-dl">
                <dt>Location</dt><dd>Hwy 89 · Mile 21.5 · Paria River bridge</dd>
                <dt>Mailing</dt><dd>PO Box 410075 · Big Water, UT 84741</dd>
                <dt>Page, AZ</dt><dd>30 miles · ~30 min</dd>
                <dt>Kanab, UT</dt><dd>43 miles · ~45 min</dd>
                <dt>Big Water</dt><dd>10 min away</dd>
                <dt>Tour length</dt><dd>8–9 hours (day) · 24 hours (overnight)</dd>
                <dt>Payment</dt><dd>Cash or personal check — no plastic</dd>
                <dt>Phone</dt><dd>(928) 691-1047</dd>
              </dl>
            </div>
          </div>
        </div>
      </section>

      {/* REMAINING TOURS */}
      <section className="heritageTours" style={{paddingTop: 40}}>
        <div className="container">
          {TOURS.slice(4).map((t, i) => (
            <article className="heritageTour" key={t.slug}>
              <SmartImg src={t.photo} label={t.photoLabel} tone={["canyon","sand","shadow","gold","rust"][i%5]} />
              <div>
                <div className="num">№ {t.num} · {t.regionName}</div>
                <h3>{t.title}</h3>
                <p>{t.short}</p>
                <div className="meta">
                  <span>{t.duration}</span>
                  <span>{t.permit}</span>
                </div>
                <div style={{marginTop: 24}}>
                  <a href={`tours.html#${t.slug}`} className="btn">Details</a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

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

window.HomePage = HomePage;