// site/page-rv-tour.jsx, Fairs Across America Tour
// Copy and images sourced from fairs.com/resources/rv per user direction.
// Em dashes replaced with commas per site-wide style rule.

const RV_CDN = 'https://cdn.prod.website-files.com/693311519694297faf620ece';
const RV_PHOTOS = {
  dusk:  `${RV_CDN}/697b57a3236c96f939c5e11d_fairs-rv-top-left.webp`,
  front: `${RV_CDN}/697b57a3891257f2303f4d65_fairs-rv-front.webp`,
  side:  `${RV_CDN}/697b57a3ab230fa50700ce2c_fairs-rv-side.webp`,
  map:   `${RV_CDN}/697b57a3539d031b0308764e_fairs-across-america-tour-map.webp`,
};

const RV_WHY = [
  { title: 'To Celebrate Traditions',
    body:  "Fairs have always been more than just fun. They’re where generations gather, memories are made, and communities come to life. They are the places where agricultural knowledge and heritage is not only celebrated, but passed down to future generations." },
  { title: 'To Recognize Excellence',
    body:  "But the people behind the scenes, the volunteers, board members, families, and local businesses, don’t always get the recognition they deserve. That’s where we come in." },
  { title: 'To Say Thanks',
    body:  "The Fairs Across America Tour is our way of saying thank you. It’s a celebration of the energy, effort, and pride that make county fairs not just relevant, but vital." },
  { title: 'To Show Up',
    body:  "We’re not just talking, we’re showing up in person, with cameras rolling and stories waiting to be told." },
];

const RV_EXPECT = [
  { title: 'Video Content',     body: 'Regular video and photo content from the road.' },
  { title: 'Social Highlights', body: 'Social media highlights and blog features from every stop.' },
  { title: 'Real Stories',      body: 'Stories from volunteers, vendors, 4-H exhibitors, and fair families.' },
  { title: 'Fair Recognition',  body: 'Recognition of fair milestones, anniversaries, and standout contributions.' },
  { title: 'A New Home',        body: "A platform to showcase your fair’s legacy, and its future." },
];

const RV_NOMINATE = [
  "Long-serving volunteers who’ve given decades of their time",
  "Families who’ve been part of your fair for generations",
  "Major fair milestones, like historic anniversaries or facility upgrades",
  "Outstanding youth participants and 4-H exhibitors",
];

function PageRVTour({ onNav }) {
  return (
    <div>
      {/* ─── Hero ───────────────────────────────────────────── */}
      <section style={{ background: S.cream, padding: '96px 64px 64px', position: 'relative', overflow: 'hidden' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <SectionEyebrow>Fairs Across America</SectionEyebrow>
              <h1 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 0.98,
                letterSpacing: '-0.035em', color: S.ink, margin: '20px 0 18px',
              }}>
                Fairs Across <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>America</em> Tour.
              </h1>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: S.ink, opacity: 0.85, margin: '0 0 28px', maxWidth: 540 }}>
                Celebrating County Fairs. Championing Rural America.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <StubBtn size="lg" onClick={() => onNav('contact')}>Submit your nomination</StubBtn>
                <a href="https://www.facebook.com/fairsdotcom" target="_blank" rel="noopener" style={{
                  position: 'relative', height: 56, padding: '0 24px',
                  background: 'transparent', color: S.ink, textDecoration: 'none',
                  border: `1.5px solid ${S.ink}`, borderRadius: 8,
                  fontFamily: 'inherit', fontSize: 16, fontWeight: 700,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}>
                  <Ico name="facebook" size={16} /> Follow the tour
                </a>
              </div>
            </div>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div style={{ gridColumn: '1 / span 2' }}>
                <FramedPhoto src={RV_PHOTOS.dusk} treatment="clean" tilt={-1.5} style={{ width: '100%' }} caption="★ The RV at dusk" />
              </div>
              <FramedPhoto src={RV_PHOTOS.front} treatment="clean" tilt={1.5} style={{ width: '100%' }} caption="Front view" />
              <FramedPhoto src={RV_PHOTOS.side} treatment="clean" tilt={-1.5} style={{ width: '100%' }} caption="Side · scan to follow" />
            </div>
          </div>
        </div>
      </section>

      {/* ─── Big stat: 50 fairs / 90 days ─────────────────────── */}
      <section style={{ background: S.ink, color: S.cream, padding: '96px 64px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -100, left: -100, width: 400, height: 400, borderRadius: '50%', background: S.red, opacity: 0.18, filter: 'blur(60px)' }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase' }}>★ The Journey ★</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 0.98,
            letterSpacing: '-0.035em', color: S.cream, margin: '20px auto 12px', maxWidth: 1080,
          }}>
            50 fairs. 90 days.<br />
            <em style={{ fontStyle: 'italic', color: S.red }}>One unforgettable journey.</em>
          </h2>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: 'rgba(253,249,240,0.78)', maxWidth: 740, margin: '24px auto 14px' }}>
            We’re hitting the road to travel the country to shine a spotlight on the heartbeat of rural America: county fairs.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(253,249,240,0.68)', maxWidth: 760, margin: '0 auto 36px' }}>
            This tour is about honoring the people, traditions, and stories that make each fair a one-of-a-kind experience. From barn to midway, main gate to grandstand, we’re capturing the critical role fairs play in bringing their communities together.
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, padding: '14px 22px', borderRadius: 999, background: 'rgba(255,255,255,0.06)', border: `1px solid ${S.borderD}` }}>
            <Ico name="facebook" size={18} color={S.cream} />
            <span style={{ fontSize: 16, fontWeight: 600, color: S.cream }}>Get the most recent updates about the tour.</span>
            <a href="https://www.facebook.com/fairsdotcom" target="_blank" rel="noopener" style={{ color: S.red, fontWeight: 700, fontSize: 16, textDecoration: 'none' }}>Follow on Facebook →</a>
          </div>
        </div>
      </section>

      {/* ─── Tour map ───────────────────────────────────────── */}
      <section style={{ background: S.cream2, padding: '88px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <SectionEyebrow>The Route</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px auto 6px' }}>
              84 days on the <em style={{ fontStyle: 'italic', color: S.red }}>road.</em>
            </h2>
          </div>
          <div style={{
            background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 18, overflow: 'hidden',
            boxShadow: `8px 8px 0 0 ${S.red}`,
          }}>
            <img src={RV_PHOTOS.map} alt="Fairs Across America Tour map showing every stop"
              style={{ width: '100%', height: 'auto', display: 'block' }} />
          </div>
        </div>
      </section>

      {/* ─── Why We're Doing This (4 reasons) ─────────────────── */}
      <section style={{ background: S.cream, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>Why We’re Doing This</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px auto 0', maxWidth: 760 }}>
              Four reasons to <em style={{ fontStyle: 'italic', color: S.red }}>hit the road.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {RV_WHY.map((w, i) => (
              <div key={i} style={{
                background: i % 2 === 0 ? S.cream2 : S.cream,
                border: `1.5px solid ${S.ink}`, borderRadius: 16, padding: 32,
                boxShadow: `5px 5px 0 0 ${i === 1 ? S.red : S.ink}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: S.red, color: S.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.15, color: S.ink, margin: 0, letterSpacing: '-0.02em' }}>
                    {w.title}
                  </h3>
                </div>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: S.ink, opacity: 0.78, margin: 0 }}>{w.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── What to Expect from the Tour (5 items) ───────────── */}
      <section style={{ background: S.cream2, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>The Journey</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px auto 12px', maxWidth: 760 }}>
              What to expect <em style={{ fontStyle: 'italic', color: S.red }}>from the tour.</em>
            </h2>
            <a href="https://www.facebook.com/fairsdotcom" target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              color: S.red, fontWeight: 700, fontSize: 16, textDecoration: 'none',
            }}>
              <Ico name="facebook" size={14} /> Follow the tour on Facebook
            </a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {RV_EXPECT.map((e, i) => {
              const icons = ['zap', 'megaphone', 'users', 'star', 'globe'];
              return (
                <div key={i} style={{
                  background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14, padding: 24,
                  boxShadow: `4px 4px 0 0 ${i === 2 ? S.red : S.ink}`,
                  display: 'flex', flexDirection: 'column', gap: 10,
                }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: S.red100, color: S.red, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Ico name={icons[i]} size={20} strokeWidth={1.8} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: S.ink, letterSpacing: '-0.015em' }}>{e.title}</div>
                  <div style={{ fontSize: 12, lineHeight: 1.5, color: S.ink, opacity: 0.72 }}>{e.body}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ─── Want Us to Visit Your Fair? ──────────────────────── */}
      <section style={{ background: S.cream, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <SectionEyebrow>Nominations open</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px 0 18px' }}>
              Want us to visit <em style={{ fontStyle: 'italic', color: S.red }}>your fair?</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: S.ink, opacity: 0.78, margin: '0 0 22px' }}>
              We’re accepting nominations right now. Whether your fair is big or small, what matters most is the heart behind it. We’re looking for:
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
              {RV_NOMINATE.map((n, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{ marginTop: 4, width: 20, height: 20, borderRadius: 999, background: S.red, color: S.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                    <Ico name="check" size={12} strokeWidth={2.6} color={S.cream} />
                  </span>
                  <span style={{ fontSize: 16, lineHeight: 1.55, color: S.ink }}>{n}</span>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: S.red, margin: '0 0 28px' }}>
              Our route will be shaped by stories, not size. If your fair has something worth sharing, we want to be there!
            </p>
            <StubBtn size="lg" onClick={() => onNav('contact')}>Submit your nomination</StubBtn>
          </div>
          <div style={{ position: 'relative', justifySelf: 'end' }}>
            <FramedPhoto src={RV_PHOTOS.side} treatment="clean" tilt={2} style={{ width: 460 }} caption="★ Fairs Across America Tour" />
            <div style={{ position: 'absolute', bottom: -28, left: -28 }}>
              <Cow size={150} rotate={-4} />
            </div>
          </div>
        </div>
      </section>

      {/* ─── Mission statement ───────────────────────────────── */}
      <section style={{ background: S.cream2, padding: '88px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <SectionEyebrow>Our mission</SectionEyebrow>
          <p style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
            fontSize: 36, lineHeight: 1.3, color: S.ink, margin: '20px auto 0',
          }}>
            Fairs.com is built for fairs and fairground events, plain and simple. The Fairs Across America Tour is our commitment in motion. We’re not just here to provide tools, we’re here to stand shoulder to shoulder with the people who make the fair magic happen. <em style={{ color: S.red }}>Let’s hit the road!</em>
          </p>
        </div>
      </section>

      {/* ─── Nominate Your Fair CTA (final) ──────────────────── */}
      <section style={{ background: S.ink, color: S.cream, padding: '88px 64px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -100, right: -100, width: 400, height: 400, borderRadius: '50%', background: S.red, opacity: 0.18, filter: 'blur(60px)' }} />
        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 280px', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase' }}>★ Our mission ★</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05,
              letterSpacing: '-0.03em', color: S.cream, margin: '16px 0 12px',
            }}>
              Nominate <em style={{ fontStyle: 'italic', color: S.red }}>your fair.</em>
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(253,249,240,0.78)', maxWidth: 560, margin: '0 0 24px', lineHeight: 1.55 }}>
              Tell us what makes your fair special, and we just might show up in your town with cameras, questions, and a whole lot of appreciation.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <StubBtn size="lg" onClick={() => onNav('contact')}>Submit your nomination</StubBtn>
              <a href="https://www.facebook.com/fairsdotcom" target="_blank" rel="noopener" style={{
                position: 'relative', height: 56, padding: '0 24px',
                background: 'transparent', color: S.cream, textDecoration: 'none',
                border: `1.5px solid rgba(253,249,240,0.45)`, borderRadius: 8,
                fontFamily: 'inherit', fontSize: 16, fontWeight: 700,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <Ico name="facebook" size={16} /> Follow the tour
              </a>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, justifySelf: 'end' }}>
            <SpeechBubble tail="right" tilt={-3}>
              <em style={{ fontStyle: 'italic', color: S.red }}>Yeehaw!</em><br />See you down<br />the road.
            </SpeechBubble>
            <Cow size={180} flip rotate={-4} />
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageRVTour });