/* global React */
// ============================================================
// Shared chrome — Nav + Footer + Logo (used across all pages)
// ============================================================

const SITE_LOGO_SRC = 'assets/logo.png';

function Logo({ size = 44, dark = false }) {
  return (
    <img
      src={SITE_LOGO_SRC}
      alt="Come Let's Wander"
      width={size}
      height={size}
      style={{
        width: size,
        height: size,
        objectFit: 'contain',
        display: 'block',
        filter: dark ? 'brightness(1.1)' : 'none',
      }}
    />
  );
}

function SiteNav({ active = 'Trips' }) {
  return (
    <div style={{
      position: 'sticky', top: 16, zIndex: 50,
      margin: '16px 32px 0', padding: '12px 18px 12px 22px',
      borderRadius: 999,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(255, 255, 255, 0.55)',
      backdropFilter: 'blur(20px) saturate(150%)',
      WebkitBackdropFilter: 'blur(20px) saturate(150%)',
      border: '1px solid rgba(255,255,255,0.7)',
      boxShadow: '0 8px 24px rgba(18,32,58,0.10)',
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
        <Logo size={40}/>
        <div style={{ lineHeight: 1 }}>
          <div className="t-display" style={{ fontSize: 18, color: 'var(--night-navy)' }}>COME LET'S WANDER</div>
          <div className="t-mono" style={{ fontSize: 9, color: 'var(--ink-60)', marginTop: 3 }}>EST. ON THE ROAD · 2019</div>
        </div>
      </a>
      <nav style={{ display: 'flex', gap: 28 }}>
        {[
          { label: 'Trips', href: 'trips.html' },
          { label: 'Staycations', href: 'staycations.html' },
          { label: 'Backpacking', href: 'backpacking.html' },
          { label: 'Community', href: 'community.html' },
          { label: 'About', href: 'about.html' },
        ].map((item) => {
          const l = item.label;
          const isActive = active === l;
          return (
            <a key={l} href={item.href} style={{
              fontFamily: 'var(--f-sub)', fontSize: 14, fontWeight: 500,
              color: isActive ? 'var(--steel-blue)' : 'var(--night-navy)',
              textDecoration: 'none', position: 'relative',
            }}>
              {l}
              {isActive && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -8, height: 2, background: 'var(--trailhead-gold)', borderRadius: 2 }}/>}
            </a>
          );
        })}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a href="index.html" className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 14, textDecoration: 'none' }}>Sign in</a>
        <a href="trips.html" className="btn btn-gold" style={{ padding: '11px 20px', fontSize: 14, textDecoration: 'none' }}>
          Plan Your Trip<span style={{ fontSize: 16, marginLeft: 2 }}>→</span>
        </a>
      </div>
    </div>
  );
}

function SiteFooter() {
  const cols = [
    { t: 'EXPLORE', items: [
      { l: 'Group Trips',         h: 'trips.html' },
      { l: 'Staycations',         h: 'staycations.html' },
      { l: 'Backpacking',         h: 'backpacking.html' },
      { l: 'Custom Itineraries',  h: 'trips.html' },
      { l: 'Trip Calendar',       h: 'trips.html' },
    ]},
    { t: 'COMPANY', items: [
      { l: 'About',          h: 'about.html' },
      { l: 'Trip Leads',     h: 'about.html' },
      { l: 'Sustainability', h: 'about.html' },
      { l: 'Press',          h: 'mailto:hello@comeletswander.com' },
      { l: 'Careers',        h: 'mailto:hello@comeletswander.com' },
    ]},
    { t: 'SUPPORT', items: [
      { l: 'FAQ',               h: '#' },
      { l: 'Booking Terms',     h: '#' },
      { l: 'Travel Insurance',  h: '#' },
      { l: 'Contact',           h: 'mailto:hello@comeletswander.com' },
      { l: 'Help Center',       h: 'mailto:hello@comeletswander.com' },
    ]},
  ];
  return (
    <footer style={{ background: 'var(--night-navy)', color: '#F5F0E6', padding: '80px 64px 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, paddingBottom: 56, borderBottom: '1px solid rgba(245,240,230,0.12)' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <Logo size={48} dark/>
              <div className="t-display" style={{ fontSize: 22, color: '#F5F0E6' }}>COME LET'S WANDER</div>
            </div>
            <p className="t-sub" style={{ fontSize: 16, color: 'rgba(245,240,230,0.7)', maxWidth: 320, lineHeight: 1.5, margin: 0 }}>
              Come. Wander. Belong. — A community of slow travelers, trip leads, and good company.
            </p>
            <a href="mailto:hello@comeletswander.com" style={{ display: 'block', color: 'rgba(245,240,230,0.6)', fontFamily: 'var(--f-mono)', fontSize: 12, marginTop: 16, textDecoration: 'none' }}>hello@comeletswander.com</a>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['IG', 'TT', 'YT', 'SP'].map((s) => (
                <div key={s} style={{
                  width: 38, height: 38, borderRadius: '50%',
                  border: '1px solid rgba(245,240,230,0.2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--f-mono)', fontSize: 11, color: '#F5F0E6', cursor: 'pointer',
                }}>{s}</div>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.t}>
              <div className="t-mono" style={{ color: 'var(--trailhead-gold)', marginBottom: 18 }}>{c.t}</div>
              {c.items.map((item) => (
                <a key={item.l} href={item.h} style={{ display: 'block', color: 'rgba(245,240,230,0.78)', textDecoration: 'none', fontFamily: 'var(--f-sub)', fontSize: 15, padding: '6px 0' }}>{item.l}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="t-mono" style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, color: 'rgba(245,240,230,0.5)', fontSize: 11 }}>
          <span>© 2026 COME LET'S WANDER · #COMELETSWANDER · #EXPLOREWITHOUTLIMITS</span>
          <span>PRIVACY · TERMS · COOKIES</span>
        </div>
      </div>
    </footer>
  );
}

// Page-section header (used to top each interior page below the nav)
function PageHeader({ kicker, title, italic, sub, bg }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', marginTop: -76, paddingTop: 76 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: bg
          ? `linear-gradient(180deg, rgba(18,32,58,0.55) 0%, rgba(18,32,58,0.4) 60%, rgba(18,32,58,0.7) 100%), url(${bg}) center/cover`
          : 'var(--basecamp-cream)',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '120px 64px 100px', color: bg ? '#fff' : 'var(--night-navy)' }}>
        <div className="t-mono" style={{ color: bg ? 'rgba(255,255,255,0.85)' : 'var(--steel-blue)', marginBottom: 18 }}>{kicker}</div>
        <h1 className="t-display" style={{ fontSize: 132, lineHeight: 0.85, margin: 0, letterSpacing: '-0.025em' }}>
          {title}{italic && <> <span style={{ color: 'var(--trailhead-gold)', fontStyle: 'italic', fontWeight: 700 }}>{italic}</span></>}
        </h1>
        {sub && <p className="t-body" style={{ fontSize: 18, lineHeight: 1.5, maxWidth: 560, marginTop: 26, fontWeight: 400, color: bg ? 'rgba(255,255,255,0.92)' : 'var(--ink-60)' }}>{sub}</p>}
      </div>
    </section>
  );
}

// ─── Turnstile widget ────────────────────────────────────────
// Renders Cloudflare Turnstile. Requires the Turnstile script and
// window.TURNSTILE_SITE_KEY to be set in the page's <head>.
function TurnstileWidget({ onVerify, onExpire, theme = 'light' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    let widgetId;
    const render = () => {
      if (!window.turnstile || !ref.current) return;
      // Only render once
      if (ref.current.children.length > 0) return;
      widgetId = window.turnstile.render(ref.current, {
        sitekey: window.TURNSTILE_SITE_KEY || '0x4AAAAADD4Xlpra5W5Zmxe',
        theme,
        callback:          token => onVerify && onVerify(token),
        'expired-callback':   () => { if (onExpire) onExpire(); else onVerify && onVerify(''); },
        'error-callback':     () => { if (onExpire) onExpire(); else onVerify && onVerify(''); },
      });
    };
    // Turnstile may not be loaded yet — poll briefly
    if (window.turnstile) { render(); }
    else {
      let attempts = 0;
      const id = setInterval(() => {
        attempts++;
        if (window.turnstile) { render(); clearInterval(id); }
        else if (attempts > 20) clearInterval(id);
      }, 200);
    }
    return () => {
      if (widgetId !== undefined && window.turnstile) {
        try { window.turnstile.remove(widgetId); } catch {}
      }
    };
  }, []);
  return <div ref={ref} style={{ margin: '10px 0' }}/>;
}

window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;
window.PageHeader = PageHeader;
window.Logo = Logo;
window.TurnstileWidget = TurnstileWidget;