/* global React */
// ============================================================
// Come Let's Wander — Desktop Landing Page (1440 wide)
// ============================================================

const { useState, useEffect, useRef } = React;

// ─── Image library (Unsplash) ────────────────────────────────
const HERO_BG = "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1800&q=80";
const TRIPS = [
  { id: 1, place: "Kerala", country: "India",      img: "https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?w=900&q=80",  days: "12 days", grp: "8–12 wanderers", rating: 4.9, price: 1480, tag: "Slow trek through Kerala backwaters and hills" },
  { id: 2, place: "Faroe Islands",   country: "Denmark",    img: "https://images.unsplash.com/photo-1500380804539-4e1e8c1e7118?w=900&q=80",  days: "7 days",  grp: "6–10 wanderers", rating: 4.8, price: 1890, tag: "Cliffs, fog, tiny villages" },
  { id: 3, place: "Sapa Highlands",  country: "Vietnam",    img: "https://images.unsplash.com/photo-1528127269322-539801943592?w=900&q=80",  days: "9 days",  grp: "8–12 wanderers", rating: 4.9, price: 1120, tag: "Rice terraces & homestays" },
  { id: 4, place: "Kerala Backwaters", country: "India",    img: "https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?w=900&q=80",  days: "6 days",  grp: "10 wanderers",   rating: 4.7, price:  860, tag: "Houseboat & coastal staycation" },
  { id: 5, place: "Lofoten Loop",    country: "Norway",     img: "https://images.unsplash.com/photo-1601439678777-b2b3c56fa627?w=900&q=80",  days: "8 days",  grp: "6–8 wanderers",  rating: 4.9, price: 2240, tag: "Arctic light & fishing huts" },
  { id: 6, place: "Atlas Mountains", country: "Morocco",    img: "https://images.unsplash.com/photo-1489493585363-d69421e0edd3?w=900&q=80",  days: "10 days", grp: "8–14 wanderers", rating: 4.8, price: 1340, tag: "Berber villages & desert nights" },
];
const COMMUNITY = [
  "https://images.unsplash.com/photo-1530789253388-582c481c54b0?w=600&q=70",
  "https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?w=600&q=70",
  "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=600&q=70",
  "https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=600&q=70",
  "https://images.unsplash.com/photo-1473625247510-8ceb1760943f?w=600&q=70",
  "https://images.unsplash.com/photo-1504609813442-a8924e83f76e?w=600&q=70",
];
const TESTIMONIAL_BG = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=70";
const TESTIMONIALS = [
  { quote: "Felt like a small group of old friends from day one. The pace, the people, the meals — every detail was thought through.", name: "Aanya Mehra",  trip: "Sapa Highlands · 2025", img: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&q=80" },
  { quote: "I came back changed. Not in some cliché way — I just remember how to be quiet again.",                                       name: "Daniel Park",  trip: "Lofoten Loop · 2024",  img: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&q=80" },
  { quote: "First solo trip and it never felt solo. Genuinely the best 12 days of my year.",                                            name: "Imani Okafor",  trip: "Kerala · 2025", img: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80" },
];

// ─── Reveal-on-scroll hook ───────────────────────────────────
function useReveal(rootRef) {
  useEffect(() => {
    const root = rootRef.current; if (!root) return;
    const els = root.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { root: root, threshold: 0.15 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ─── Nav (uses SiteNav from site-chrome.jsx if loaded; else this fallback) ───
function Nav() {
  if (window.SiteNav) return <window.SiteNav active="Trips"/>;
  return null;
}
function NavLegacy() {
  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)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <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>
      </div>
      <nav style={{ display: 'flex', gap: 28 }}>
        {['Trips', 'Staycations', 'Backpacking', 'Community', 'About'].map((l, i) => (
          <a key={l} href="#" style={{
            fontFamily: 'var(--f-sub)', fontSize: 14, fontWeight: 500,
            color: i === 0 ? 'var(--steel-blue)' : 'var(--night-navy)',
            textDecoration: 'none', position: 'relative',
          }}>
            {l}
            {i === 0 && <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 }}>
        <button className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 14 }}>Sign in</button>
        <button className="btn btn-gold" style={{ padding: '11px 20px', fontSize: 14 }}>
          Plan Your Trip
          <span style={{ fontSize: 16, marginLeft: 2 }}>→</span>
        </button>
      </div>
    </div>
  );
}

// ─── Search field cell ───────────────────────────────────────
function SearchField({ label, value, icon, isLast }) {
  return (
    <div style={{
      flex: 1, padding: '14px 22px',
      borderRight: isLast ? 'none' : '1px solid rgba(255,255,255,0.25)',
      cursor: 'text',
      transition: 'background .2s ease',
    }}
      onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.10)'}
      onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
    >
      <div className="t-mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.7)', marginBottom: 4 }}>
        {label}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14 }}>{icon}</span>
        <span style={{ color: '#fff', fontSize: 16, fontWeight: 500, fontFamily: 'var(--f-body)' }}>{value}</span>
      </div>
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{ position: 'relative', height: 720, marginTop: -76, paddingTop: 76, overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(18,32,58,0.55) 0%, rgba(18,32,58,0.35) 40%, rgba(18,32,58,0.75) 100%), url(${HERO_BG})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '120px 64px 60px', color: '#fff' }}>
        <div className="t-mono reveal" style={{ color: 'rgba(255,255,255,0.85)', fontSize: 12, marginBottom: 22 }}>
          ◆ GROUP TRIPS · STAYCATIONS · BACKPACKING
        </div>
        <h1 className="t-display reveal" style={{
          fontSize: 168, lineHeight: 0.85, margin: 0,
          letterSpacing: '-0.025em', maxWidth: 1100,
        }}>
          EXPLORE<br/>
          WITHOUT <span style={{ color: 'var(--trailhead-gold)', fontStyle: 'italic', fontWeight: 700 }}>WANDER</span>.
        </h1>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 28, gap: 32 }}>
          <p className="t-body reveal" style={{
            maxWidth: 460, fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.92)',
            fontWeight: 400, margin: 0,
          }}>
            Small-group adventures, slow staycations, and untamed backpacking routes — curated by people who actually go. Come. Wander. Belong.
          </p>
          <div className="t-mono reveal" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11, textAlign: 'right' }}>
            <div>SCROLL TO WANDER</div>
            <div style={{ height: 36, width: 1, background: 'rgba(255,255,255,0.4)', margin: '8px 0 0 auto' }}/>
          </div>
        </div>

        {/* Search bar */}
        <div className="reveal" style={{
          marginTop: 56,
          display: 'flex', alignItems: 'stretch',
          background: 'rgba(255, 255, 255, 0.12)',
          backdropFilter: 'blur(28px) saturate(160%)',
          WebkitBackdropFilter: 'blur(28px) saturate(160%)',
          border: '1px solid rgba(255, 255, 255, 0.22)',
          borderRadius: 24,
          boxShadow: '0 18px 40px rgba(0,0,0,0.25)',
          padding: 8,
          gap: 0,
        }}>
          <SearchField label="WHERE TO?"   value="Anywhere wild" icon="◎"/>
          <SearchField label="WHEN?"       value="May – Aug 2026" icon="◴"/>
          <SearchField label="TRIP TYPE"   value="Group Trip"     icon="◐"/>
          <SearchField label="TRAVELERS"   value="2 wanderers"    icon="◇" isLast/>
          <button className="btn btn-gold" style={{
            padding: '0 28px', borderRadius: 18, marginLeft: 4, fontSize: 15,
          }}>
            Search Adventures →
          </button>
        </div>
      </div>
    </section>
  );
}

// ─── Category Switcher + Stats ───────────────────────────────
function CategorySwitcher() {
  const [active, setActive] = useState(0);
  const tabs = ['Group Trips', 'Staycations', 'Backpacking'];
  return (
    <section style={{ background: '#fff', padding: '88px 64px 32px', maxWidth: 1280, margin: '0 auto' }}>
      <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
        <div>
          <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 14 }}>◆ FIND YOUR PACE</div>
          <h2 className="t-display" style={{ fontSize: 76, margin: 0, color: 'var(--night-navy)', maxWidth: 720 }}>
            HOW DO YOU<br/>WANT TO <span style={{ fontStyle: 'italic', color: 'var(--steel-blue)' }}>WANDER</span>?
          </h2>
        </div>
        <p className="t-body" style={{ maxWidth: 320, fontSize: 15, lineHeight: 1.55, color: 'var(--ink-60)', margin: 0, paddingBottom: 8 }}>
          Three rhythms of travel. Same warmth, same care, same crew you'll be texting two years later.
        </p>
      </div>

      {/* Pill tabs */}
      <div className="reveal" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        {tabs.map((t, i) => {
          const isActive = active === i;
          return (
            <button key={t} onClick={() => setActive(i)} style={{
              position: 'relative', padding: '16px 32px',
              border: 'none', cursor: 'pointer',
              borderRadius: 999,
              background: isActive ? 'var(--steel-blue)' : 'transparent',
              color: isActive ? '#fff' : 'var(--night-navy)',
              fontFamily: 'var(--f-sub)', fontWeight: 500, fontSize: 18,
              boxShadow: isActive ? '0 8px 20px rgba(52,88,130,0.25)' : 'inset 0 0 0 1px var(--ink-12)',
              transition: 'all .25s ease',
            }}>
              {t}
              {isActive && (
                <span style={{
                  position: 'absolute', bottom: -10, left: '50%', transform: 'translateX(-50%)',
                  width: 28, height: 3, background: 'var(--trailhead-gold)', borderRadius: 2,
                }}/>
              )}
            </button>
          );
        })}
        <div style={{ flex: 1 }}/>
        <a href="#" className="t-mono" style={{ color: 'var(--steel-blue)', textDecoration: 'none', fontSize: 11 }}>
          ALL DESTINATIONS →
        </a>
      </div>

      {/* Stat row */}
      <div className="reveal" style={{
        display: 'flex', gap: 48, marginTop: 44, paddingTop: 28,
        borderTop: '1px solid var(--ink-08)',
      }}>
        {[
          ['120+', 'CURATED TRIPS'],
          ['40',   'DESTINATIONS'],
          ['12K',  'WANDERERS'],
          ['4.9★', 'AVG. RATING'],
        ].map(([n, l]) => (
          <div key={l}>
            <div className="t-display" style={{ fontSize: 44, color: 'var(--night-navy)', lineHeight: 0.9 }}>{n}</div>
            <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Trip Card ───────────────────────────────────────────────
function TripCard({ trip }) {
  return (
    <article className="trip-card" style={{
      background: '#fff',
      borderRadius: 20,
      overflow: 'hidden',
      border: '1px solid var(--ink-08)',
      boxShadow: 'var(--sh-card)',
      cursor: 'pointer',
    }}>
      <div style={{ position: 'relative', height: 320, overflow: 'hidden' }}>
        <img src={trip.img} alt={trip.place} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
        {/* Glass price badge */}
        <div style={{
          position: 'absolute', top: 16, right: 16,
          background: 'rgba(255,255,255,0.22)',
          backdropFilter: 'blur(16px) saturate(150%)',
          WebkitBackdropFilter: 'blur(16px) saturate(150%)',
          border: '1.5px solid var(--trailhead-gold)',
          borderRadius: 999,
          padding: '8px 14px',
          color: '#fff',
        }}>
            <span className="t-mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)', marginRight: 4 }}>FROM</span>
            <span className="t-mono" style={{ fontSize: 14, color: '#fff', fontWeight: 500 }}>${trip.price}</span>
        </div>
        {/* Hover CTA */}
        <button className="trip-cta btn btn-gold" style={{
          position: 'absolute', bottom: 16, left: 16,
          padding: '10px 18px', fontSize: 13,
        }}>View trip →</button>
      </div>
      <div style={{ padding: '20px 22px 22px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
          <div>
            <div className="t-display" style={{ fontSize: 28, color: 'var(--night-navy)', letterSpacing: '-0.01em', lineHeight: 1 }}>
              {trip.place.toUpperCase()}
            </div>
            <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 6 }}>{trip.country.toUpperCase()}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ color: 'var(--trailhead-gold)', fontSize: 14, letterSpacing: 2 }}>★★★★★</div>
            <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 3, fontSize: 11 }}>{trip.rating} · 240</div>
          </div>
        </div>
        <p className="t-sub" style={{ fontSize: 14, color: 'var(--ink-60)', margin: '12px 0 14px', lineHeight: 1.4 }}>
          {trip.tag}
        </p>
        <div style={{ display: 'flex', gap: 16, paddingTop: 14, borderTop: '1px solid var(--ink-08)' }}>
          <div className="t-mono" style={{ color: 'var(--ink-60)' }}>◴ {trip.days}</div>
          <div className="t-mono" style={{ color: 'var(--ink-60)' }}>◎ {trip.grp}</div>
        </div>
      </div>
    </article>
  );
}

// ─── Featured Trips ──────────────────────────────────────────
function FeaturedTrips() {
  return (
    <section style={{ padding: '64px 64px 96px', maxWidth: 1280, margin: '0 auto' }}>
      <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
        <div>
          <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 12 }}>◆ FEATURED · MAY ROSTER</div>
          <h2 className="t-display" style={{ fontSize: 64, margin: 0, color: 'var(--night-navy)' }}>
            TRIPS WORTH<br/>PACKING FOR.
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost" style={{ border: '1px solid var(--ink-12)', padding: '11px 16px', fontSize: 14 }}>← Prev</button>
          <button className="btn btn-ghost" style={{ border: '1px solid var(--ink-12)', padding: '11px 16px', fontSize: 14 }}>Next →</button>
        </div>
      </div>
      <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {TRIPS.map((t) => <TripCard key={t.id} trip={t}/>)}
      </div>
    </section>
  );
}

// ─── How It Works ────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', title: 'DISCOVER', icon: <CompassIcon/>, body: 'Browse trips by region, season, or pace. Filter for hikers, slow travelers, or first-timers — every itinerary is annotated honestly.' },
    { n: '02', title: 'BOOK',     icon: <TicketIcon/>,  body: 'Hold your spot with a deposit. Meet your crew on a video call before departure. Free changes up to 60 days out.' },
    { n: '03', title: 'WANDER',   icon: <MountainIcon/>, body: 'Show up. Your trip lead handles the rest — local guides, real food, downtime, surprises. Come home different.' },
  ];
  return (
    <section style={{ background: 'var(--basecamp-cream)', padding: '120px 64px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
          <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 14 }}>◆ HOW IT WORKS</div>
          <h2 className="t-display" style={{ fontSize: 88, margin: 0, color: 'var(--night-navy)', lineHeight: 0.9 }}>
            THREE STEPS,<br/>ONE GOOD <span style={{ fontStyle: 'italic', color: 'var(--steel-blue)' }}>STORY</span>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, position: 'relative' }}>
          {/* dotted connector */}
          <div style={{
            position: 'absolute', top: 56, left: '16%', right: '16%',
            borderTop: '2px dashed rgba(52,88,130,0.3)',
          }}/>
          {steps.map((s, i) => (
            <div key={s.n} className="reveal" style={{ textAlign: 'left', position: 'relative', zIndex: 1 }}>
              <div style={{
                width: 112, height: 112, borderRadius: '50%',
                background: '#fff', border: '1.5px solid var(--ink-08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 28, color: 'var(--steel-blue)',
                boxShadow: '0 8px 20px rgba(18,32,58,0.06)',
              }}>
                {s.icon}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
                <span className="t-display" style={{ fontSize: 64, color: 'var(--trailhead-gold)', lineHeight: 0.9 }}>{s.n}</span>
                <span className="t-display" style={{ fontSize: 32, color: 'var(--night-navy)' }}>{s.title}</span>
              </div>
              <p className="t-body" style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-60)', maxWidth: 360, margin: 0 }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Icons ───────────────────────────────────────────────────
function CompassIcon() {
  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="24" cy="24" r="18"/>
    <path d="M30 18 L26 26 L18 30 L22 22 Z" fill="currentColor" fillOpacity="0.15"/>
    <circle cx="24" cy="24" r="2" fill="currentColor"/>
  </svg>;
}
function TicketIcon() {
  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M8 16 v4 a3 3 0 0 1 0 8 v4 a2 2 0 0 0 2 2 h28 a2 2 0 0 0 2 -2 v-4 a3 3 0 0 1 0 -8 v-4 a2 2 0 0 0 -2 -2 h-28 a2 2 0 0 0 -2 2 z"/>
    <path d="M22 16 v20" strokeDasharray="2 3"/>
  </svg>;
}
function MountainIcon() {
  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M6 38 L18 18 L24 28 L32 14 L42 38 Z"/>
    <circle cx="34" cy="12" r="2.5" fill="currentColor"/>
  </svg>;
}

// ─── Testimonials ────────────────────────────────────────────
function Testimonials() {
  return (
    <section style={{ position: 'relative', padding: '120px 64px', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(140,175,210,0.45) 0%, rgba(140,175,210,0.15) 100%), url(${TESTIMONIAL_BG})`,
        backgroundSize: 'cover', backgroundPosition: 'center', filter: 'saturate(0.9)',
      }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(245,240,230,0.6), rgba(255,255,255,0.7))' }}/>
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div className="reveal" style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 14 }}>◆ FROM THE TRAIL</div>
          <h2 className="t-display" style={{ fontSize: 80, margin: 0, color: 'var(--night-navy)', lineHeight: 0.9 }}>
            WHAT WANDERERS<br/><span style={{ fontStyle: 'italic', color: 'var(--steel-blue)' }}>SAY.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="reveal" style={{
              background: 'rgba(255, 255, 255, 0.55)',
              backdropFilter: 'blur(24px) saturate(150%)',
              WebkitBackdropFilter: 'blur(24px) saturate(150%)',
              border: '1px solid rgba(255,255,255,0.7)',
              borderRadius: 20, padding: '32px 28px',
              boxShadow: '0 12px 32px rgba(18, 32, 58, 0.10)',
              transform: i === 1 ? 'translateY(24px)' : 'none',
            }}>
              <div style={{ color: 'var(--trailhead-gold)', fontSize: 16, letterSpacing: 3, marginBottom: 18 }}>★★★★★</div>
              <p className="t-sub" style={{ fontSize: 19, lineHeight: 1.45, color: 'var(--night-navy)', margin: 0, fontWeight: 500 }}>
                "{t.quote}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 28, paddingTop: 22, borderTop: '1px solid rgba(18,32,58,0.10)' }}>
                <img src={t.img} alt={t.name} style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover' }}/>
                <div>
                  <div className="t-body" style={{ fontWeight: 600, fontSize: 14, color: 'var(--night-navy)' }}>{t.name}</div>
                  <div className="t-mono" style={{ color: 'var(--ink-60)', marginTop: 2 }}>{t.trip}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Community / Instagram ───────────────────────────────────
function Community() {
  return (
    <section style={{ padding: '120px 64px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, gap: 32 }}>
          <div>
            <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 14 }}>◆ @COMELETSWANDER</div>
            <h2 className="t-display" style={{ fontSize: 80, margin: 0, color: 'var(--night-navy)', lineHeight: 0.9 }}>
              JOIN THE WANDER<br/><span style={{ fontStyle: 'italic', color: 'var(--steel-blue)' }}>COMMUNITY.</span>
            </h2>
          </div>
          <div style={{ textAlign: 'right' }}>
            <p className="t-body" style={{ fontSize: 15, color: 'var(--ink-60)', maxWidth: 320, margin: '0 0 18px', lineHeight: 1.5 }}>
              Real photos, real wanderers. Tag #ComeLetsWander to be featured.
            </p>
            <button className="btn btn-gold">Follow on Instagram →</button>
          </div>
        </div>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {COMMUNITY.map((src, i) => (
            <div key={i} style={{
              position: 'relative', aspectRatio: '1', borderRadius: 14,
              overflow: 'hidden', cursor: 'pointer',
              transition: 'transform .35s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'scale(1.02)';
                e.currentTarget.querySelector('.ig-overlay').style.opacity = '1';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'scale(1)';
                e.currentTarget.querySelector('.ig-overlay').style.opacity = '0';
              }}
            >
              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
              <div className="ig-overlay" style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 50%, rgba(18,32,58,0.85) 100%)',
                display: 'flex', alignItems: 'flex-end', padding: 14,
                opacity: 0, transition: 'opacity .25s ease', color: '#fff',
              }}>
                <div style={{ display: 'flex', gap: 14 }}>
                  <span className="t-mono" style={{ fontSize: 11 }}>♥ {1240 + i * 87}</span>
                  <span className="t-mono" style={{ fontSize: 11 }}>◐ {32 + i * 7}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Newsletter ──────────────────────────────────────────────
function Newsletter() {
  const [email,   setEmail]   = useState('');
  const [tsToken, setTsToken] = useState('');
  const [status,  setStatus]  = useState('idle'); // idle | loading | success | error
  const [msg,     setMsg]     = useState('');

  async function submit(e) {
    e.preventDefault();
    if (!tsToken) { setStatus('error'); setMsg('Please complete the security check.'); return; }
    setStatus('loading');
    try {
      const res  = await fetch('/api/newsletter', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, turnstile_token: tsToken, source: 'newsletter-desktop' }),
      });
      const data = await res.json();
      if (data.ok) { setStatus('success'); setMsg(data.message); }
      else         { setStatus('error');   setMsg(data.error); }
    } catch {
      setStatus('error'); setMsg('Something went wrong. Please try again.');
    }
  }

  return (
    <section style={{ background: 'var(--night-navy)', padding: '88px 64px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', right: -120, top: -100, width: 480, height: 480, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(200,162,80,0.18) 0%, transparent 70%)',
      }}/>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 64, position: 'relative' }}>
        <div className="reveal" style={{ flex: 1 }}>
          <div className="t-mono" style={{ color: 'var(--trailhead-gold)', marginBottom: 14 }}>◆ THE FIELD JOURNAL</div>
          <h2 className="t-display" style={{ fontSize: 64, color: '#fff', margin: 0, lineHeight: 0.9 }}>
            TRIP DROPS,<br/>TRAVEL GUIDES,<br/><span style={{ color: 'var(--trailhead-gold)' }}>NO SPAM.</span>
          </h2>
        </div>
        <div className="reveal" style={{ flex: 1, maxWidth: 520 }}>
          {status === 'success' ? (
            <div style={{ color: '#fff', fontFamily: 'var(--f-sub)', fontSize: 18 }}>
              ✓ {msg}
            </div>
          ) : (
            <form onSubmit={submit}>
              <div style={{
                display: 'flex', alignItems: 'center',
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.18)',
                borderRadius: 999, padding: 8, paddingLeft: 24, gap: 8,
              }}>
                <input
                  type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="your@email.com" required
                  style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: '#fff', fontFamily: 'var(--f-body)', fontSize: 15, padding: '10px 0' }}
                />
                <button className="btn btn-gold" type="submit" disabled={status === 'loading'}>
                  {status === 'loading' ? 'Joining…' : 'Join the journey →'}
                </button>
              </div>
              {window.TurnstileWidget && <window.TurnstileWidget onVerify={setTsToken} theme="dark"/>}
              {status === 'error' && (
                <p className="t-mono" style={{ color: '#f87171', fontSize: 11, marginTop: 8 }}>{msg}</p>
              )}
            </form>
          )}
          <p className="t-mono" style={{ color: 'rgba(255,255,255,0.45)', marginTop: 14, fontSize: 11 }}>
            ONE EMAIL EACH NEW MOON. UNSUB ANYTIME.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── Footer (uses SiteFooter from site-chrome.jsx if loaded) ──
function Footer() {
  if (window.SiteFooter) return <window.SiteFooter/>;
  return null;
}
function FooterLegacy() {
  const cols = [
    { t: 'EXPLORE', items: ['Group Trips', 'Staycations', 'Backpacking', 'Custom Itineraries', 'Trip Calendar'] },
    { t: 'COMPANY', items: ['About', 'Trip Leads', 'Sustainability', 'Press', 'Careers'] },
    { t: 'SUPPORT', items: ['FAQ', 'Booking Terms', 'Travel Insurance', 'Contact', 'Help Center'] },
  ];
  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>
            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              {['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} href="#" style={{
                  display: 'block', color: 'rgba(245,240,230,0.78)',
                  textDecoration: 'none', fontFamily: 'var(--f-sub)', fontSize: 15,
                  padding: '6px 0',
                }}>{item}</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 wrapper ────────────────────────────────────────────
function LandingDesktop() {
  const ref = useRef(null);
  useReveal(ref);
  return (
    <div ref={ref} style={{ width: '100%', background: '#fff', overflowX: 'hidden', position: 'relative' }}>
      <Nav/>
      <Hero/>
      <CategorySwitcher/>
      <FeaturedTrips/>
      <HowItWorks/>
      <Testimonials/>
      <Community/>
      <Newsletter/>
      <Footer/>
    </div>
  );
}

window.LandingDesktop = LandingDesktop;
window.Logo = Logo;
window.TripCard = TripCard;