/* global React */
// ============================================================
// Come Let's Wander — Mobile Landing (390 wide)
// ============================================================

const HERO_BG_M = "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=900&q=80";
const TRIPS_M = [
  { place: "Kerala", country: "India",     img: "https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?w=900&q=80",  days: "12 days", grp: "8–12", rating: 4.9, price: 1480, tag: "Slow trek through Kerala backwaters and hills" },
  { place: "Faroe Islands",   country: "Denmark",   img: "https://images.unsplash.com/photo-1500380804539-4e1e8c1e7118?w=900&q=80",  days: "7 days",  grp: "6–10", rating: 4.8, price: 1890, tag: "Cliffs, fog, tiny villages" },
  { place: "Sapa Highlands",  country: "Vietnam",   img: "https://images.unsplash.com/photo-1528127269322-539801943592?w=900&q=80",  days: "9 days",  grp: "8–12", rating: 4.9, price: 1120, tag: "Rice terraces & homestays" },
];

function MobileNav() {
  return (
    <div style={{
      position: 'sticky', top: 8, zIndex: 50, margin: '8px 12px 0',
      padding: '8px 10px 8px 14px',
      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 20px rgba(18,32,58,0.10)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Logo size={32}/>
        <div className="t-display" style={{ fontSize: 13, color: 'var(--night-navy)' }}>COME LET'S WANDER</div>
      </div>
      <div style={{
        width: 36, height: 36, borderRadius: '50%', background: 'var(--trailhead-gold)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--night-navy)',
      }}>
        <svg width="16" height="12" viewBox="0 0 16 12"><path d="M0 1h16M0 6h16M0 11h16" stroke="currentColor" strokeWidth="1.5"/></svg>
      </div>
    </div>
  );
}

function MobileHero() {
  return (
    <section style={{ position: 'relative', height: 700, marginTop: -60, paddingTop: 60, overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(18,32,58,0.45) 0%, rgba(18,32,58,0.30) 30%, rgba(18,32,58,0.85) 100%), url(${HERO_BG_M})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
      }}/>
      <div style={{ position: 'relative', padding: '48px 22px 30px', color: '#fff', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div className="t-mono" style={{ color: 'rgba(255,255,255,0.85)', fontSize: 9, marginBottom: 16 }}>
          ◆ GROUP TRIPS · STAYCATIONS · BACKPACKING
        </div>
        <h1 className="t-display" style={{ fontSize: 76, lineHeight: 0.85, margin: 0, letterSpacing: '-0.02em' }}>
          EXPLORE<br/>WITHOUT<br/>
          <span style={{ color: 'var(--trailhead-gold)', fontStyle: 'italic' }}>WANDER</span>.
        </h1>
        <p style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(255,255,255,0.92)', maxWidth: 320, marginTop: 18, marginBottom: 0, fontFamily: 'var(--f-body)' }}>
          Small-group adventures, slow staycations, untamed backpacking. Come. Wander. Belong.
        </p>

        {/* Stacked search */}
        <div style={{
          marginTop: 'auto',
          background: 'rgba(255,255,255,0.14)',
          backdropFilter: 'blur(28px) saturate(160%)',
          WebkitBackdropFilter: 'blur(28px) saturate(160%)',
          border: '1px solid rgba(255,255,255,0.22)',
          borderRadius: 22, padding: 12,
          boxShadow: '0 16px 36px rgba(0,0,0,0.25)',
        }}>
          {[
            ['WHERE TO?', 'Anywhere wild', '◎'],
            ['WHEN?', 'May – Aug 2026', '◴'],
            ['TRIP TYPE · TRAVELERS', 'Group · 2 wanderers', '◐'],
          ].map(([l, v, ic], i, arr) => (
            <div key={l} style={{
              padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none',
            }}>
              <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>{ic}</span>
              <div>
                <div className="t-mono" style={{ fontSize: 9, color: 'rgba(255,255,255,0.7)' }}>{l}</div>
                <div style={{ color: '#fff', fontSize: 14, fontWeight: 500, fontFamily: 'var(--f-body)', marginTop: 2 }}>{v}</div>
              </div>
            </div>
          ))}
          <button className="btn btn-gold" style={{ width: '100%', marginTop: 8, padding: '14px 0', borderRadius: 14, fontSize: 14 }}>
            Search Adventures →
          </button>
        </div>
      </div>
    </section>
  );
}

function MobileCategory() {
  return (
    <section style={{ padding: '40px 22px 24px' }}>
      <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 10, fontSize: 10 }}>◆ FIND YOUR PACE</div>
      <h2 className="t-display" style={{ fontSize: 44, margin: 0, color: 'var(--night-navy)', lineHeight: 0.9 }}>
        HOW DO YOU<br/>WANT TO <span style={{ fontStyle: 'italic', color: 'var(--steel-blue)' }}>WANDER</span>?
      </h2>
      <div style={{ display: 'flex', gap: 8, marginTop: 24, overflowX: 'auto', paddingBottom: 4 }}>
        {[
          ['Group Trips', true],
          ['Staycations', false],
          ['Backpacking', false],
        ].map(([t, active]) => (
          <button key={t} style={{
            padding: '12px 22px', borderRadius: 999, border: 'none', whiteSpace: 'nowrap',
            background: active ? 'var(--steel-blue)' : 'transparent',
            color: active ? '#fff' : 'var(--night-navy)',
            fontFamily: 'var(--f-sub)', fontWeight: 500, fontSize: 14,
            boxShadow: active ? '0 6px 14px rgba(52,88,130,0.25)' : 'inset 0 0 0 1px var(--ink-12)',
            position: 'relative',
          }}>
            {t}
            {active && <span style={{
              position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)',
              width: 20, height: 2, background: 'var(--trailhead-gold)', borderRadius: 2,
            }}/>}
          </button>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 18, marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--ink-08)' }}>
        {[['120+', 'TRIPS'], ['40', 'PLACES'], ['12K', 'WANDERERS']].map(([n, l]) => (
          <div key={l}>
            <div className="t-display" style={{ fontSize: 26, color: 'var(--night-navy)' }}>{n}</div>
            <div className="t-mono" style={{ fontSize: 9, color: 'var(--ink-60)', marginTop: 2 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MobileTrips() {
  return (
    <section style={{ padding: '20px 22px 60px' }}>
      <div className="t-mono" style={{ color: 'var(--steel-blue)', marginBottom: 10, fontSize: 10 }}>◆ FEATURED · MAY ROSTER</div>
      <h2 className="t-display" style={{ fontSize: 40, margin: 0, color: 'var(--night-navy)', lineHeight: 0.9, marginBottom: 22 }}>
        TRIPS WORTH<br/>PACKING FOR.
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {TRIPS_M.map((t) => (
          <article key={t.place} style={{
            background: '#fff', borderRadius: 18, overflow: 'hidden',
            border: '1px solid var(--ink-08)', boxShadow: 'var(--sh-card)',
          }}>
            <div style={{ position: 'relative', height: 220 }}>
              <img src={t.img} alt={t.place} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              <div style={{
                position: 'absolute', top: 12, right: 12,
                background: 'rgba(255,255,255,0.22)',
                backdropFilter: 'blur(14px) saturate(150%)',
                WebkitBackdropFilter: 'blur(14px) saturate(150%)',
                border: '1.5px solid var(--trailhead-gold)',
                borderRadius: 999, padding: '6px 12px',
              }}>
                <span className="t-mono" style={{ fontSize: 9, color: '#fff', marginRight: 4 }}>FROM</span>
                <span className="t-mono" style={{ fontSize: 12, color: '#fff', fontWeight: 500 }}>${t.price}</span>
              </div>
            </div>
            <div style={{ padding: '16px 18px 18px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div className="t-display" style={{ fontSize: 22, color: 'var(--night-navy)', lineHeight: 1 }}>
                    {t.place.toUpperCase()}
                  </div>
                  <div className="t-mono" style={{ fontSize: 9, color: 'var(--ink-60)', marginTop: 4 }}>{t.country.toUpperCase()}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ color: 'var(--trailhead-gold)', fontSize: 12, letterSpacing: 2 }}>★★★★★</div>
                  <div className="t-mono" style={{ fontSize: 9, color: 'var(--ink-60)', marginTop: 2 }}>{t.rating}</div>
                </div>
              </div>
              <p className="t-sub" style={{ fontSize: 13, color: 'var(--ink-60)', margin: '10px 0 12px', lineHeight: 1.4 }}>{t.tag}</p>
              <div style={{ display: 'flex', gap: 14, paddingTop: 10, borderTop: '1px solid var(--ink-08)' }}>
                <div className="t-mono" style={{ fontSize: 10, color: 'var(--ink-60)' }}>◴ {t.days}</div>
                <div className="t-mono" style={{ fontSize: 10, color: 'var(--ink-60)' }}>◎ {t.grp}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function MobileNewsletter() {
  const [email,   setEmail]   = React.useState('');
  const [tsToken, setTsToken] = React.useState('');
  const [status,  setStatus]  = React.useState('idle');
  const [msg,     setMsg]     = React.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-mobile' }),
      });
      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.');
    }
  }

  return (
    <section style={{ background: 'var(--night-navy)', padding: '48px 22px' }}>
      <div className="t-mono" style={{ color: 'var(--trailhead-gold)', marginBottom: 12, fontSize: 10 }}>◆ THE FIELD JOURNAL</div>
      <h2 className="t-display" style={{ fontSize: 40, color: '#fff', margin: 0, lineHeight: 0.9 }}>
        TRIP DROPS.<br/>NO SPAM.
      </h2>
      {status === 'success' ? (
        <p style={{ color: '#fff', fontFamily: 'var(--f-sub)', fontSize: 15, marginTop: 18 }}>✓ {msg}</p>
      ) : (
        <form onSubmit={submit}>
          <div style={{
            marginTop: 22, display: 'flex', alignItems: 'center', gap: 6,
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.18)',
            borderRadius: 999, padding: 6, paddingLeft: 18,
          }}>
            <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: 13, padding: '8px 0' }}
            />
            <button className="btn btn-gold" type="submit" style={{ padding: '10px 14px', fontSize: 12 }} disabled={status === 'loading'}>
              {status === 'loading' ? '…' : 'Join →'}
            </button>
          </div>
          {window.TurnstileWidget && <window.TurnstileWidget onVerify={setTsToken} theme="dark"/>}
          {status === 'error' && (
            <p className="t-mono" style={{ color: '#f87171', fontSize: 11, marginTop: 6 }}>{msg}</p>
          )}
        </form>
      )}
    </section>
  );
}

function MobileFooter() {
  return (
    <footer style={{ background: 'var(--night-navy)', color: '#F5F0E6', padding: '40px 22px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <Logo size={36} dark/>
        <div className="t-display" style={{ fontSize: 16 }}>COME LET'S WANDER</div>
      </div>
      <p className="t-sub" style={{ fontSize: 13, color: 'rgba(245,240,230,0.7)', lineHeight: 1.5, margin: '0 0 22px' }}>
        Come. Wander. Belong.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, paddingBottom: 22, borderBottom: '1px solid rgba(245,240,230,0.12)' }}>
        {[['EXPLORE', ['Trips','Stays','Backpack']], ['COMPANY', ['About','Leads','Press']], ['SUPPORT', ['FAQ','Terms','Help']]].map(([t, items]) => (
          <div key={t}>
            <div className="t-mono" style={{ color: 'var(--trailhead-gold)', marginBottom: 8, fontSize: 9 }}>{t}</div>
            {items.map((i) => <div key={i} style={{ fontFamily: 'var(--f-sub)', fontSize: 12, color: 'rgba(245,240,230,0.78)', padding: '3px 0' }}>{i}</div>)}
          </div>
        ))}
      </div>
      <div className="t-mono" style={{ color: 'rgba(245,240,230,0.5)', fontSize: 9, marginTop: 18, lineHeight: 1.6 }}>
        © 2026 COME LET'S WANDER<br/>#COMELETSWANDER · #EXPLOREWITHOUTLIMITS
      </div>
    </footer>
  );
}

function LandingMobile() {
  return (
    <div style={{ width: '100%', background: '#fff', overflowX: 'hidden', fontFamily: 'var(--f-body)' }}>
      <MobileNav/>
      <MobileHero/>
      <MobileCategory/>
      <MobileTrips/>
      <MobileNewsletter/>
      <MobileFooter/>
    </div>
  );
}

window.LandingMobile = LandingMobile;