// Shared UI pieces — nav, footer, hero variants, helpers.

const { useState, useEffect, useRef, useMemo } = React;

const NAV = [
  { path: '/', label: 'Home' },
  { path: '/podcast', label: 'Podcast' },
  { path: '/journal', label: 'Journal' },
  { path: '/gear', label: 'Gear' },
  { path: '/newsletter', label: 'The Gravel Loop' },
  { path: '/events', label: 'Events' },
  { path: '/membership', label: 'Membership' },
  { path: '/about', label: 'About' },
  { path: '/contact', label: 'Contact' }
];

function useRoute() {
  const [path, setPath] = useState(() => window.location.hash.replace(/^#/, '') || '/');
  useEffect(() => {
    const handler = () => setPath(window.location.hash.replace(/^#/, '') || '/');
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);
  return [path, (p) => { window.location.hash = p; window.scrollTo(0, 0); }];
}

function Link({ to, children, className, ...rest }) {
  return (
    <a href={'#' + to} className={className} {...rest}>{children}</a>
  );
}

function Topbar({ path }) {
  return (
    <header className="topbar">
      <div className="wrap topbar-inner">
        <Link to="/" className="brand">
          <span className="brand-mark">V</span>
          <span>Velo Health</span>
        </Link>
        <nav className="nav-links">
          {NAV.filter(n => !['Home'].includes(n.label)).map(n => (
            <Link key={n.path} to={n.path} className={path === n.path ? 'active' : ''}>{n.label}</Link>
          ))}
        </nav>
        <Link to="/newsletter" className="nav-cta">Subscribe</Link>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">Velo Health</div>
            <div style={{ maxWidth: '34ch', color: 'var(--muted)' }}>
              Independent gravel cycling media, community, and commerce. Toronto &amp; everywhere the road turns to dust.
            </div>
            <div className="foot-disclaimer">
              Velo Health Ltd. is a gravel cycling media brand. Our content is general, educational, and for entertainment. It is not medical advice, not a training plan, and not a substitute for talking to your own healthcare providers.
            </div>
          </div>
          <div>
            <h5>Read</h5>
            <ul>
              <li><Link to="/podcast">Podcast</Link></li>
              <li><Link to="/journal">Journal</Link></li>
              <li><Link to="/gear">Gear</Link></li>
              <li><Link to="/newsletter">The Gravel Loop</Link></li>
            </ul>
          </div>
          <div>
            <h5>Ride</h5>
            <ul>
              <li><Link to="/events">Events</Link></li>
              <li><Link to="/membership">Membership</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
            </ul>
          </div>
          <div>
            <h5>Elsewhere</h5>
            <ul>
              <li><a href="https://www.instagram.com/velohealthltd/" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>Apple Podcasts</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>Spotify</a></li>
              <li><a href="#" onClick={e => e.preventDefault()}>YouTube</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-legal">
          <span>© 2026 Velo Health Ltd. · Ontario, Canada</span>
          <span>Gear. Grit. Gravel.</span>
        </div>
      </div>
    </footer>
  );
}

// Newsletter block, reused across pages
function NewsletterBlock() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  return (
    <section className="newsletter" id="subscribe">
      <div className="newsletter-inner">
        <div>
          <div className="eyebrow">The Gravel Loop · Issue 013 drops Friday</div>
          <h2>Product reviews, every other Sunday.</h2>
          <p>A newsletter for gear that earns its place. Long-term notes on the bikes, tires, kit, and tools we actually ride. One email. No spam. No press-release paraphrase.</p>
        </div>
        <form className="newsletter-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
          <div>
            <label>Name</label>
            <input type="text" placeholder="First name" />
          </div>
          <div>
            <label>Email</label>
            <input type="email" placeholder="you@wherever.com" value={email} onChange={e => setEmail(e.target.value)} required />
          </div>
          <button type="submit">{sent ? 'Thanks — check your inbox ↗' : 'Subscribe →'}</button>
          <div className="newsletter-meta">4,280 subscribers · unsub in one click</div>
        </form>
      </div>
    </section>
  );
}

// Hero — varies by tweak
function Hero({ heroLayout, episode }) {
  const bg = 'assets/gravel-road.jpg';
  if (heroLayout === 'split') {
    return (
      <section className="hero">
        <div className="hero-split">
          <div className="hero-text">
            <div className="eyebrow">Independent gravel · est. 2026</div>
            <h1 className="display">Gear.<br/>Grit.<br/>Gravel.</h1>
            <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: '48ch' }}>
              Long rides and longer conversations. A podcast, a journal, and a community for people who care about the sport.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <Link to={'/podcast/' + episode.id} className="btn btn-primary">
                Listen to Episode 001 <span className="arrow">→</span>
              </Link>
              <Link to="/newsletter" className="btn btn-ghost">Subscribe <span className="arrow">→</span></Link>
            </div>
          </div>
          <div className="hero-image" style={{ backgroundImage: `url(${bg})` }} />
        </div>
      </section>
    );
  }
  if (heroLayout === 'stack') {
    return (
      <section className="hero hero-stack">
        <div className="wrap">
          <div className="eyebrow">Independent gravel cycling media · est. 2026</div>
          <h1 className="display">Gear. Grit. Gravel.</h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'end' }}>
            <p style={{ fontSize: 22, color: 'var(--ink-soft)', maxWidth: '42ch', margin: 0 }}>
              The gravel show, and the gear behind it. Long-format interviews, honest reviews, and a community of riders who want to go long.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
              <Link to={'/podcast/' + episode.id} className="btn btn-primary">Listen to Episode 001 <span className="arrow">→</span></Link>
            </div>
          </div>
        </div>
        <div className="hero-band" style={{ backgroundImage: `url(${bg})` }} />
      </section>
    );
  }
  // overlay (default)
  return (
    <section className="hero">
      <div className="hero-overlay">
        <div className="hero-img" style={{ backgroundImage: `url(${bg})` }} />
        <div className="hero-content">
          <div className="wrap">
            <div className="eyebrow">Independent gravel cycling media · est. 2026</div>
            <h1 className="display">Gear.<br/>Grit.<br/>Gravel.</h1>
            <p className="subtle">
              Long rides and longer conversations. A podcast, a journal, and a community for people who care about the sport.
            </p>
            <div className="hero-meta">
              <Link to={'/podcast/' + episode.id} className="play-pill">
                <span className="play-icon">▶</span>
                <span>
                  <div style={{ fontSize: 10, letterSpacing: '0.14em', opacity: 0.7 }}>NOW PLAYING · EP 001</div>
                  <div style={{ marginTop: 2 }}>{episode.title}</div>
                </span>
              </Link>
              <span style={{ opacity: 0.6 }}>·</span>
              <span>{episode.duration}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, meta, link, linkLabel }) {
  return (
    <div className="section-head">
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{eyebrow}</div>
        <h2>{title}</h2>
      </div>
      <div className="meta">
        {link && <Link to={link}>{linkLabel || 'View all'} →</Link>}
        {!link && meta}
      </div>
    </div>
  );
}

Object.assign(window, { useRoute, Link, Topbar, Footer, NewsletterBlock, Hero, SectionHead, NAV });