// Page components

function HomePage({ tweaks }) {
  const featured = window.VELO_CONTENT.episodes[0];
  const posts = window.VELO_CONTENT.posts.slice(0, 4);
  const gear = window.VELO_CONTENT.gear.slice(0, 6);
  const igImages = [
    'assets/gravel-road.jpg',
    'assets/cyclist.jpg',
    'assets/gravel-road.jpg',
    'assets/cyclist.jpg',
    'assets/gravel-road.jpg',
    'assets/cyclist.jpg'
  ];

  return (
    <>
      <Hero heroLayout={tweaks.heroLayout} episode={featured} />

      {/* Featured podcast */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="Now playing · Episode 001"
            title="The conversations behind the sport."
            link="/podcast"
            linkLabel="All episodes"
          />
          <div className="episode-feature">
            <div className="episode-art" style={{ '--art-image': `url(assets/gravel-road.jpg)` }}>
              <div className="art-inner" style={{ backgroundImage: `url(assets/gravel-road.jpg)` }} />
              <div className="art-label">VH · 001</div>
              <div className="art-num">001</div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>With Cameron Jones · {featured.duration}</div>
              <h3>{featured.title}</h3>
              <p className="lede">{featured.excerpt}</p>
              <Link to={'/podcast/' + featured.id} className="btn btn-primary" style={{ marginBottom: 40 }}>
                Listen to the full episode <span className="arrow">→</span>
              </Link>
              <div>
                {window.VELO_CONTENT.episodes.map((ep, i) => (
                  <Link key={ep.id} to={'/podcast/' + ep.id} className="episode-row">
                    <span className="n">{ep.number}</span>
                    <span className="t">{ep.title}</span>
                    <span className="d">{ep.duration}</span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gear grid */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <SectionHead eyebrow="Honest gear · From The Gravel Loop" title="Reviews, with no affiliate agenda." link="/newsletter" linkLabel="The Gravel Loop →" />
          <div className="gear-grid">
            {gear.map(g => (
              <Link className="gear-card" key={g.id} to={'/journal/' + g.id}>
                <div className="gear-img placeholder"><span>product shot · {g.cat.toLowerCase()}</span></div>
                <div className="gear-meta">
                  <span>{g.cat}</span>
                  <span className="rating">{g.rating}</span>
                </div>
                <h4>{g.title}</h4>
                <div className="gear-excerpt">{g.excerpt}</div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <NewsletterBlock />

      {/* About strip */}
      <section className="section">
        <div className="wrap">
          <div className="about-block">
            <div className="about-img" style={{ backgroundImage: 'url(assets/cyclist.jpg)' }} />
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Who rides this</div>
              <h2>A rider. A writer. A founder.</h2>
              <p>
                Houman is a gravel rider based in Toronto who got obsessed with the sport a few years ago and never quite recovered. He started Velo Health to tell the kinds of stories, and review the kinds of gear, that he wished he could find as a listener.
              </p>
              <p>
                Velo Health is independent. No parent company, no clinic, no sponsor pressure on what we cover. Just a point of view, built slowly, with long rides and long conversations.
              </p>
              <div className="sig">— Houman</div>
              <div style={{ marginTop: 32 }}>
                <Link to="/about" className="btn btn-ghost">More about Velo Health <span className="arrow">→</span></Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Latest journal */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <SectionHead eyebrow="From the journal" title="Short pieces. Long rides." link="/journal" linkLabel="All entries" />
          <div className="post-list">
            {posts.map(p => {
              const { meta } = parseMD(p.md);
              return (
                <Link key={p.id} to={'/journal/' + p.id} className="post-row">
                  <span className="pr-date">{meta.date}</span>
                  <span className="pr-title">{meta.title}</span>
                  <span className="pr-cat">{meta.category}</span>
                  <span className="pr-arrow">→</span>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* Instagram */}
      <section className="ig-strip">
        <div className="wrap">
          <div className="ig-head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>From the feed</div>
              <h3>@velohealthltd</h3>
            </div>
            <a href="https://www.instagram.com/velohealthltd/" target="_blank" rel="noreferrer" className="btn btn-ghost">Follow →</a>
          </div>
          <div className="ig-grid">
            {igImages.map((src, i) => (
              <a key={i} href="https://www.instagram.com/velohealthltd/" target="_blank" rel="noreferrer" className="ig-tile" style={{ backgroundImage: `url(${src})` }} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function PodcastPage() {
  const eps = window.VELO_CONTENT.episodes;
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>The Velo Health Podcast</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Long rides.<br/>Long conversations.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            Interviews with the riders, mechanics, builders, and event directors who make gravel worth caring about. Bi-weekly, 45–75 minutes, no filler.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#" onClick={e => e.preventDefault()} className="btn btn-primary">Apple Podcasts →</a>
            <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">Spotify →</a>
            <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">RSS →</a>
          </div>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <SectionHead eyebrow="All episodes" title="The archive, from the top." meta={`${eps.length} episodes`} />
          {eps.map(ep => (
            <Link key={ep.id} to={'/podcast/' + ep.id} className="ep-list-row">
              <span className="n">EP · {ep.number}</span>
              <div className="art-thumb" style={{ backgroundImage: `url(${ep.hero})` }}>
                <span style={{ position: 'relative', background: 'rgba(0,0,0,0.4)', width: '100%', height: '100%', display: 'grid', placeItems: 'center', color: '#faf6ee' }}>{ep.number}</span>
              </div>
              <div className="title-block">
                <h4>{ep.title}</h4>
                <p>With {ep.guest} · {ep.date}</p>
              </div>
              <span className="duration">{ep.duration}</span>
              <span className="play">▶</span>
            </Link>
          ))}
        </div>
      </section>
    </>
  );
}

function EpisodePage({ id }) {
  const ep = window.VELO_CONTENT.episodes.find(e => e.id === id);
  if (!ep) return <NotFound />;
  const { meta, body } = parseMD(ep.md);
  return (
    <>
      <section className="wrap-narrow article-hero">
        <div className="eyebrow">Episode {meta.number} · With {meta.guest} · {meta.duration}</div>
        <h1>{meta.title}</h1>
        <div className="meta">{meta.date}</div>
      </section>
      <div className="wrap-narrow">
        <div className="article-img" style={{ backgroundImage: `url(${meta.hero})` }} />
        <div style={{ padding: '24px 0 32px', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary">▶ Play episode</button>
          <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">Apple →</a>
          <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">Spotify →</a>
          <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">Download MP3 →</a>
        </div>
        <div className="article-body" dangerouslySetInnerHTML={{ __html: renderMD(body) }} />
      </div>
      <NewsletterBlock />
    </>
  );
}

function JournalPage() {
  const posts = window.VELO_CONTENT.posts;
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>The Velo Health Journal</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Short pieces.<br/>Long rides.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            Notes from the saddle, gear tests, and the occasional long essay. Written slowly, read at your pace.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="post-list">
            {posts.map(p => {
              const { meta } = parseMD(p.md);
              return (
                <Link key={p.id} to={'/journal/' + p.id} className="post-row">
                  <span className="pr-date">{meta.date}</span>
                  <span className="pr-title">{meta.title}</span>
                  <span className="pr-cat">{meta.category}</span>
                  <span className="pr-arrow">→</span>
                </Link>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

function PostPage({ id }) {
  const p = window.VELO_CONTENT.posts.find(p => p.id === id);
  if (!p) return <NotFound />;
  const { meta, body } = parseMD(p.md);
  return (
    <>
      <section className="wrap-narrow article-hero">
        <div className="eyebrow">{meta.category}</div>
        <h1>{meta.title}</h1>
        <div className="meta">{meta.date}</div>
      </section>
      <div className="wrap-narrow">
        <div className="article-img" style={{ backgroundImage: `url(${meta.hero})` }} />
        <div className="article-body" dangerouslySetInnerHTML={{ __html: renderMD(body) }} />
      </div>
      <NewsletterBlock />
    </>
  );
}

function GearPage() {
  const gear = window.VELO_CONTENT.gear;
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Gear reviews</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Honest gear.<br/>No agenda.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            We pay for most of it. What is gifted is disclosed. What is bad, we say is bad. Long-term notes, not press-release paraphrase.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="gear-grid">
            {gear.map(g => (
              <Link className="gear-card" key={g.id} to={'/journal/' + g.id}>
                <div className="gear-img placeholder"><span>product shot · {g.cat.toLowerCase()}</span></div>
                <div className="gear-meta">
                  <span>{g.cat}</span>
                  <span className="rating">{g.rating}</span>
                </div>
                <h4>{g.title}</h4>
                <div className="gear-excerpt">{g.excerpt}</div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function NewsletterPage() {
  const issues = window.VELO_CONTENT.issues;
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>The Gravel Loop · A Velo Health newsletter</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>The gear, in a loop.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            A product-reviews newsletter for gravel riders who care about what they ride. Honest long-term notes on bikes, tires, kit, tools, and software. Every other Sunday.
          </p>
          <div style={{ marginTop: 24, fontSize: 13, color: 'var(--muted)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em' }}>
            gravelloop.bike · 4,280 subscribers · Issue 012 latest
          </div>
        </div>
      </section>
      <NewsletterBlock />
      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow="The archive" title="Every issue, from the top." meta={`${issues.length} issues`} />
          <div>
            {issues.map(i => (
              <a key={i.n} href="#" onClick={e => e.preventDefault()} className="issue-row">
                <span className="iss-n">№ {i.n}</span>
                <span className="iss-date">{i.date}</span>
                <div>
                  <h4>{i.title}</h4>
                  <div className="iss-excerpt">{i.excerpt}</div>
                </div>
                <span style={{ textAlign: 'right', color: 'var(--muted)' }}>Read →</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function AboutPage() {
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>About Velo Health</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>An independent gravel cycling media brand.</h1>
          <p style={{ fontSize: 22, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            We ride, we talk to the riders, we test the gear, we tell the truth about it. No parent company. No conflicts. No claims we can't defend.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="about-block">
            <div className="about-img" style={{ backgroundImage: 'url(assets/cyclist.jpg)' }} />
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Who rides this</div>
              <h2>Houman Khosravani, founder.</h2>
              <p>
                Houman is a Toronto-based gravel rider. He got obsessed with the sport a few years ago after a long stretch of road riding, a longer stretch off the bike, and a hunt for the thing that would bring him back.
              </p>
              <p>
                He started Velo Health to tell the kinds of stories, and review the kinds of gear, that he wished he could find as a listener. He is also a physician in Toronto — a biographical fact, not the basis of this work.
              </p>
              <div className="sig">— Houman</div>
            </div>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
            {[
              { n: '01', t: 'Rider voices', b: 'Long-format interviews with racers, mechanics, engineers, event directors, and characters in the sport.' },
              { n: '02', t: 'Honest gear', b: 'Reviews, comparisons, "What I\'m Riding" series. Unsponsored opinions. Real miles. Disclosed gifts.' },
              { n: '03', t: 'The gravel life', b: 'Culture, travel, food, events, community, training philosophy — in general terms, never prescriptive.' }
            ].map(p => (
              <div key={p.n}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{p.n} · Pillar</div>
                <h3 style={{ fontSize: 26, marginBottom: 12 }}>{p.t}</h3>
                <p style={{ color: 'var(--ink-soft)' }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <NewsletterBlock />
    </>
  );
}

function EventsPage() {
  const events = window.VELO_CONTENT.events;
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Rides &amp; events</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Show up.<br/>Ride long.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            A few group rides a year, and the occasional longer weekend. No drop. No pressure. Waivers required, coffee guaranteed.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <SectionHead eyebrow="Upcoming" title="On the calendar." meta={`${events.length} upcoming`} />
          {events.map(e => (
            <div key={e.id} className="event-card">
              <div className="event-date">{e.day}<span className="mo">{e.mo} · 2026</span></div>
              <div>
                <h3>{e.title}</h3>
                <div className="locn">{e.locn}</div>
                <p>{e.body}</p>
              </div>
              <div className="event-cta">
                <a href="#" onClick={ev => ev.preventDefault()} className="btn btn-ghost">RSVP →</a>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

function MembershipPage() {
  return (
    <>
      <section className="section">
        <div className="wrap-narrow" style={{ paddingTop: 48, paddingBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Members</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Support the work.<br/>Ride with us.</h1>
          <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            A small paid tier that helps us keep the lights on, the ads off, and the conversations honest. Includes a private Discord, ad-free feeds, partner discounts, and first dibs on retreats.
          </p>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="plan-grid">
            <div className="plan">
              <div className="eyebrow">Monthly</div>
              <h3>Rider</h3>
              <div className="plan-price">$9<sub> / month</sub></div>
              <ul>
                <li>Ad-free podcast &amp; video feed</li>
                <li>Members-only Discord</li>
                <li>Partner discounts (Rapha, MAAP, TrainerRoad)</li>
                <li>Early access to retreats</li>
                <li>Monthly gear desk drop</li>
              </ul>
              <a href="#" onClick={e => e.preventDefault()} className="btn btn-ghost">Start monthly →</a>
            </div>
            <div className="plan featured">
              <div className="eyebrow" style={{ color: 'var(--accent-soft)' }}>Annual · two months free</div>
              <h3>Rider, annual</h3>
              <div className="plan-price">$89<sub> / year</sub></div>
              <ul>
                <li>Everything in monthly</li>
                <li>Members-only written pieces</li>
                <li>Annual Velo Health cap</li>
                <li>Priority RSVP on group rides</li>
                <li>Founding member listing</li>
              </ul>
              <a href="#" onClick={e => e.preventDefault()} className="btn btn-primary" style={{ background: 'var(--accent)' }}>Start annual →</a>
            </div>
          </div>
          <div style={{ marginTop: 64, padding: 32, border: '1px solid var(--rule)', background: 'var(--paper)' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What members get, and don't</div>
            <p style={{ fontSize: 17, color: 'var(--ink-soft)', margin: 0, maxWidth: '72ch' }}>
              Membership is a fan club, not a clinic. You do not get personal coaching, a training plan written for you, or medical, nutritional, or rehab advice. Those things belong with professionals licensed and insured to provide them. What you do get: community, bonus content, honest gear talk, and a seat at the table.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactPage() {
  const [sent, setSent] = useState(false);
  return (
    <section className="section">
      <div className="wrap-narrow" style={{ paddingTop: 48 }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>Get in touch</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', marginBottom: 24 }}>Say hello.</h1>
        <p style={{ fontSize: 20, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
          Guest pitches, brand partnerships, consulting, feedback on a review, a good book recommendation. All welcome. We answer most within a week.
        </p>
        {sent ? (
          <div style={{ marginTop: 48, padding: 48, border: '1px solid var(--rule)', background: 'var(--paper)' }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Received</div>
            <h3 style={{ fontSize: 28 }}>Thanks — we'll be in touch.</h3>
          </div>
        ) : (
          <form className="contact-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
            <div><label>Name</label><input type="text" required /></div>
            <div><label>Email</label><input type="email" required /></div>
            <div>
              <label>Subject</label>
              <select defaultValue="">
                <option value="" disabled>Select one</option>
                <option>Guest pitch for the podcast</option>
                <option>Brand partnership / sponsorship</option>
                <option>B2B consulting</option>
                <option>Gear for review</option>
                <option>General</option>
              </select>
            </div>
            <div><label>Message</label><textarea required /></div>
            <button type="submit" className="btn btn-primary" style={{ justifySelf: 'start' }}>Send →</button>
          </form>
        )}
      </div>
    </section>
  );
}

function NotFound() {
  return (
    <section className="section">
      <div className="wrap-narrow" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <div className="eyebrow">404 · Off the route</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', margin: '20px 0 24px' }}>This road doesn't go anywhere.</h1>
        <Link to="/" className="btn btn-primary">Back to home →</Link>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomePage, PodcastPage, EpisodePage, JournalPage, PostPage,
  GearPage, NewsletterPage, AboutPage, EventsPage, MembershipPage,
  ContactPage, NotFound
});