// Public-facing homepage

const PublicHome = ({ state, navigate }) => {
  const packages = state.packages.filter(p => p.status === 'published');
  const featured = packages.filter(p => p.featured).slice(0, 4);
  const allTours = packages;
  const [searchDest, setSearchDest] = useState('');
  const [searchService, setSearchService] = useState('All services');
  const [searchPrice, setSearchPrice] = useState('Any price');

  return (
    <div>
      {/* HERO */}
      <section data-pxs-hero style={{ position: 'relative', minHeight: 640, background: 'var(--green-deep)', color: '#F5EEDE', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <Img src={state.settings.heroImage} style={{ width: '100%', height: '100%', opacity: 0.55 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,58,43,0.5) 0%, rgba(31,58,43,0.25) 40%, rgba(31,58,43,0.9) 100%)' }} />
        </div>

        <div className="pxs-section-pad" style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '28px 32px 60px' }}>
          <PublicNav state={state} navigate={navigate} dark />

          <div data-pxs-hero-content style={{ marginTop: 80, maxWidth: 780 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(245,238,222,0.12)', border: '1px solid rgba(245,238,222,0.25)', fontSize: 13, letterSpacing: '0.02em', marginBottom: 28 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E85D2F' }} />
              Kuching-based · Licensed {state.settings.license}
            </div>
            <h1 style={{ fontSize: 'clamp(54px, 8vw, 104px)', lineHeight: 0.95, letterSpacing: '-0.035em', fontWeight: 300 }}>
              Sarawak,<br />
              <span style={{ fontStyle: 'italic', color: '#E85D2F' }}>on your terms.</span>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.5, marginTop: 28, maxWidth: 560, color: 'rgba(245,238,222,0.85)', fontFamily: 'Fraunces', fontWeight: 300 }}>
              Inbound tours from the people who actually live here. Outbound trips without the call-centre middleman.
              Since 2008.
            </p>
          </div>

          {/* Search bar */}
          <div data-pxs-search-bar style={{ marginTop: 48, background: 'white', borderRadius: 20, padding: 8, display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr auto', gap: 8, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', maxWidth: 920 }}>
            <div style={{ padding: '10px 16px', borderRight: '1px solid #eee7d6' }}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573' }}>Destination</div>
              <input value={searchDest} onChange={e => setSearchDest(e.target.value)} placeholder="Where to?" style={{ border: 0, outline: 0, fontSize: 15, marginTop: 2, width: '100%', background: 'transparent', color: 'var(--ink)' }} />
            </div>
            <div style={{ padding: '10px 16px', borderRight: '1px solid #eee7d6' }}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573' }}>Service</div>
              <select value={searchService} onChange={e => setSearchService(e.target.value)} style={{ border: 0, outline: 0, fontSize: 15, marginTop: 2, width: '100%', background: 'transparent', appearance: 'none', color: 'var(--ink)' }}>
                <option>All services</option><option>Tour</option><option>Car Rental</option><option>Hotel</option><option>Ticketing</option>
              </select>
            </div>
            <div style={{ padding: '10px 16px' }}>
              <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8a8573' }}>Budget</div>
              <select value={searchPrice} onChange={e => setSearchPrice(e.target.value)} style={{ border: 0, outline: 0, fontSize: 15, marginTop: 2, width: '100%', background: 'transparent', appearance: 'none', color: 'var(--ink)' }}>
                <option>Any price</option><option>Under RM 200</option><option>RM 200–500</option><option>RM 500–1,500</option><option>RM 1,500+</option>
              </select>
            </div>
            <Btn kind="primary" size="lg" icon="search" onClick={() => navigate({ route: 'tours' })}>Search</Btn>
          </div>

          {/* Trust strip */}
          <div data-pxs-trust style={{ display: 'flex', gap: 32, marginTop: 44, flexWrap: 'wrap', color: 'rgba(245,238,222,0.8)' }}>
            {[
              { k: '17 yrs', v: 'curating Sarawak' },
              { k: '12,400+', v: 'travellers hosted' },
              { k: '4.8 ★', v: 'average rating' },
              { k: 'Local', v: 'guides, always' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'Fraunces', fontSize: 28, color: '#F5EEDE', letterSpacing: '-0.02em' }}>{s.k}</span>
                <span style={{ fontSize: 13 }}>{s.v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="pxs-section-pad" style={{ background: 'var(--paper)', padding: '80px 32px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div data-pxs-section-head style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 20, flexWrap: 'wrap', marginBottom: 36 }}>
            <div style={{ maxWidth: 520 }}>
              <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: 8 }}>What we do</div>
              <h2 style={{ fontSize: 44, letterSpacing: '-0.02em', lineHeight: 1.05 }}>Four services, one <span style={{ fontStyle: 'italic' }}>honest</span> agency.</h2>
            </div>
            <div style={{ fontSize: 15, color: '#5a5544', maxWidth: 420, lineHeight: 1.55 }}>
              We don't list everything under the sun. We list the things we've personally vetted — and we answer WhatsApp messages ourselves.
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, background: '#e2dccb', border: '1px solid #e2dccb', borderRadius: 20, overflow: 'hidden' }}>
            {[
              { icon: 'compass', title: 'Tours', text: 'Inbound Sarawak + curated outbound trips.', count: packages.length + ' packages' },
              { icon: 'bed-double', title: 'Hotels', text: '4★ and boutique, with direct-booking rates.', count: '60+ partners' },
              { icon: 'plane', title: 'Ticketing', text: 'Flight ticketing with on-shore support.', count: '24h response' },
              { icon: 'car', title: 'Car Rental', text: 'Self-drive + chauffeured, Kuching-wide.', count: state.vehicles.length + ' vehicles' },
            ].map((s, i) => (
              <div key={i} style={{ background: 'white', padding: 32, cursor: 'pointer', transition: 'background .2s' }}
                onMouseEnter={e => e.currentTarget.style.background = '#FBF8F1'}
                onMouseLeave={e => e.currentTarget.style.background = 'white'}
                onClick={() => navigate({ route: i === 0 ? 'tours' : i === 3 ? 'vehicles' : 'contact' })}>
                <Icon name={s.icon} size={28} style={{ color: 'var(--green)' }} />
                <h3 style={{ fontSize: 26, marginTop: 20, letterSpacing: '-0.02em' }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: '#5a5544', marginTop: 8, lineHeight: 1.55 }}>{s.text}</p>
                <div style={{ marginTop: 20, fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)' }}>{s.count} →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED TOURS */}
      <section className="pxs-section-pad" style={{ background: 'var(--cream)', padding: '80px 32px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div data-pxs-section-head style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 20, flexWrap: 'wrap', marginBottom: 36 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: 8 }}>Featured trips</div>
              <h2 data-pxs-section-h2 style={{ fontSize: 44, letterSpacing: '-0.02em' }}>Borneo, actually seen.</h2>
            </div>
            <button onClick={() => navigate({ route: 'tours' })} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 500, color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 2 }}>
              View all {allTours.length} packages <Icon name="arrow-right" size={16} />
            </button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(270px, 1fr))', gap: 20 }}>
            {featured.map((p, i) => <TourCard key={p.id} pkg={p} onClick={() => navigate({ route: 'tour', slug: p.slug })} hero={i === 0} />)}
          </div>
        </div>
      </section>

      {/* EDITORIAL BAND */}
      <section className="pxs-section-pad" style={{ background: 'var(--green-deep)', color: '#F5EEDE', padding: '100px 32px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--accent)', marginBottom: 20 }}>★ The PXS promise</div>
          <h2 style={{ fontSize: 'clamp(38px, 5vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 300 }}>
            No white-label itineraries. No sub-contracted guides.{' '}
            <span style={{ fontStyle: 'italic', color: '#E85D2F' }}>Just our team</span>, from inquiry to airport drop-off.
          </h2>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 32 }}>
            {[
              ['01', 'You inquire', 'Form or WhatsApp — a human replies in under 4 hours.'],
              ['02', 'We plan', 'A licensed Kuching-based consultant builds the trip with you.'],
              ['03', 'You travel', 'One phone number for the whole trip. Answered 24/7.'],
            ].map(([n, t, d], i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(245,238,222,0.25)', paddingTop: 20 }}>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 13, color: '#E85D2F' }}>{n}</div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 26, marginTop: 8, letterSpacing: '-0.015em' }}>{t}</div>
                <div style={{ fontSize: 14, marginTop: 10, color: 'rgba(245,238,222,0.75)', lineHeight: 1.55 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="pxs-section-pad" style={{ background: 'var(--paper)', padding: '80px 32px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 36 }}>
            <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: 8 }}>Travellers</div>
            <h2 style={{ fontSize: 44, letterSpacing: '-0.02em' }}>What they said when they got home.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
            {[
              { name: 'Clara Bennett', from: 'London, UK', text: 'We used PXS for a two-week Sarawak loop. Peter actually meets you for a coffee when you land — who does that any more?', rating: 5 },
              { name: 'Yoshi Nakamura', from: 'Tokyo, Japan', text: 'Impeccable communication in English. Our Mulu trip had a weather hiccup and they rebooked us instantly, at no cost.', rating: 5 },
              { name: 'Michael O\'Brien', from: 'Sydney, AU', text: 'We\'ve used them for three family trips now. Kids love Sarah, one of their guides. Book her if you can.', rating: 5 },
            ].map((r, i) => (
              <div key={i} style={{ background: 'white', border: '1px solid #e8e1cf', borderRadius: 16, padding: 28 }}>
                <div style={{ display: 'flex', gap: 2, color: '#E85D2F', marginBottom: 16 }}>
                  {[...Array(r.rating)].map((_, j) => <Icon key={j} name="star" size={14} />)}
                </div>
                <p style={{ fontFamily: 'Fraunces', fontSize: 19, lineHeight: 1.4, letterSpacing: '-0.01em' }}>"{r.text}"</p>
                <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid #eee7d6', fontSize: 14 }}>
                  <div style={{ fontWeight: 500 }}>{r.name}</div>
                  <div style={{ color: '#8a8573', fontSize: 13 }}>{r.from}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Partner logos */}
          <div style={{ marginTop: 64, padding: '28px 0', borderTop: '1px solid #e8e1cf', borderBottom: '1px solid #e8e1cf' }}>
            <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#8a8573', textAlign: 'center', marginBottom: 20 }}>Licensed partner of</div>
            <div style={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap', gap: 32, alignItems: 'center', opacity: 0.55 }}>
              {['Sarawak Tourism', 'MATTA', 'ASEANTA', 'MAS Tours', 'AirAsia', 'Ministry of Tourism'].map(x => (
                <div key={x} style={{ fontFamily: 'Fraunces', fontSize: 18, letterSpacing: '-0.01em' }}>{x}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* BLOG TEASER */}
      <section className="pxs-section-pad" style={{ background: 'var(--cream)', padding: '80px 32px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div data-pxs-section-head style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 20, flexWrap: 'wrap', marginBottom: 36 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)', marginBottom: 8 }}>Field notes</div>
              <h2 style={{ fontSize: 44, letterSpacing: '-0.02em' }}>From the journal.</h2>
            </div>
            <button onClick={() => navigate({ route: 'blog' })} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 500, borderBottom: '1px solid var(--ink)', paddingBottom: 2 }}>
              All articles <Icon name="arrow-right" size={16} />
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
            {state.blogs.filter(b => b.status === 'published').slice(0, 3).map(b => (
              <div key={b.id} onClick={() => navigate({ route: 'blogpost', slug: b.slug })} style={{ cursor: 'pointer' }}
                onMouseEnter={e => { const img = e.currentTarget.querySelector('img'); if (img) img.style.transform = 'scale(1.04)'; }}
                onMouseLeave={e => { const img = e.currentTarget.querySelector('img'); if (img) img.style.transform = 'scale(1)'; }}>
                <div style={{ borderRadius: 14, overflow: 'hidden', marginBottom: 16 }}>
                  <Img src={b.featuredImage} ratio="16 / 10" style={{ transition: 'transform .5s' }} />
                </div>
                <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{b.category}</div>
                <h3 style={{ fontSize: 22, marginTop: 8, letterSpacing: '-0.015em', lineHeight: 1.2 }}>{b.title}</h3>
                <p style={{ fontSize: 14, color: '#5a5544', marginTop: 8, lineHeight: 1.55 }}>{b.excerpt}</p>
                <div style={{ fontSize: 12, color: '#8a8573', marginTop: 12 }}>{b.author} · {fmtDate(b.date)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="pxs-section-pad" style={{ background: 'var(--accent)', color: 'white', padding: '72px 32px' }}>
        <div data-pxs-cta style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', letterSpacing: '-0.025em', lineHeight: 1.05 }}>
              Ready to go? <span style={{ fontStyle: 'italic' }}>WhatsApp is fastest.</span>
            </h2>
            <p style={{ fontSize: 17, marginTop: 12, opacity: 0.9 }}>Most inquiries answered within the hour during business hours.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn kind="dark" size="lg" icon="message-circle" onClick={() => window.open(`https://wa.me/${state.settings.whatsapp.replace(/[^\d]/g, '')}`, '_blank')}>Chat on WhatsApp</Btn>
            <Btn kind="ghostDark" size="lg" icon="mail" onClick={() => navigate({ route: 'contact' })}>Send inquiry</Btn>
          </div>
        </div>
      </section>

      <PublicFooter state={state} navigate={navigate} />
    </div>
  );
};

// ---------- Tour card ----------
const TourCard = ({ pkg, onClick, hero = false }) => {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        gridColumn: hero ? 'span 2' : 'auto',
        gridRow: hero ? 'span 2' : 'auto',
        cursor: 'pointer', background: 'white', borderRadius: 18, overflow: 'hidden',
        border: '1px solid #e8e1cf', transition: 'all .2s',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover ? '0 18px 40px rgba(26,31,28,0.12)' : '0 1px 3px rgba(0,0,0,0.03)',
      }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <Img src={pkg.hero} ratio={hero ? '16 / 14' : '4 / 3'} style={{ transition: 'transform .5s', transform: hover ? 'scale(1.04)' : 'scale(1)' }} />
        <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <Pill tone="white">{pkg.category === 'inbound' ? 'Sarawak' : 'Outbound'}</Pill>
          {pkg.duration && <Pill tone="dark" icon="clock">{pkg.duration}</Pill>}
        </div>
      </div>
      <div style={{ padding: hero ? 28 : 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: '#5a5544' }}>
          <Icon name="map-pin" size={12} />
          {pkg.destination}
        </div>
        <h3 style={{ fontSize: hero ? 30 : 20, marginTop: 8, letterSpacing: '-0.015em', lineHeight: 1.15 }}>{pkg.title}</h3>
        {hero && <p style={{ fontSize: 15, color: '#5a5544', marginTop: 10, lineHeight: 1.5 }}>{pkg.short}</p>}
        <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid #eee7d6', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, color: '#8a8573', textTransform: 'uppercase', letterSpacing: '0.06em' }}>From</div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 24, letterSpacing: '-0.02em' }}>{fmtMYR(pkg.priceFrom)}<span style={{ fontSize: 13, color: '#8a8573', fontFamily: 'Geist', marginLeft: 4 }}>/pax</span></div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13 }}>
            <Icon name="star" size={13} style={{ color: 'var(--accent)' }} />
            <span style={{ fontWeight: 600 }}>{pkg.rating}</span>
            <span style={{ color: '#8a8573' }}>({pkg.reviews})</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// ---------- Nav bar ----------
const PublicNav = ({ state, navigate, dark = false }) => {
  const color = dark ? '#F5EEDE' : 'var(--ink)';
  const border = dark ? 'rgba(245,238,222,0.2)' : '#e8e1cf';
  const nav = state.nav.filter(n => n.visible);
  return (
    <nav data-pxs-nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
      <div onClick={() => navigate({ route: 'home' })} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10, color }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'Fraunces', fontWeight: 600, fontSize: 16, letterSpacing: '-0.02em' }}>P</div>
        <div>
          <div style={{ fontFamily: 'Fraunces', fontSize: 20, letterSpacing: '-0.02em', lineHeight: 1 }}>{state.settings.agencyName}</div>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', opacity: 0.7, marginTop: 2 }}>Kuching · Sarawak</div>
        </div>
      </div>

      <div data-pxs-nav-links style={{ display: 'flex', gap: 28, alignItems: 'center', color }}>
        {nav.map(n => {
          const route = n.link.startsWith('/p/') ? { route: 'page', slug: n.link.replace('/p/', '') }
            : n.link === '/tours' ? { route: 'tours' }
            : n.link === '/vehicles' ? { route: 'vehicles' }
            : n.link === '/blog' ? { route: 'blog' }
            : n.link === '/contact' ? { route: 'contact' }
            : { route: 'home' };
          return (
            <button key={n.id} onClick={() => navigate(route)} style={{ color, fontSize: 14, fontWeight: 500, padding: '4px 0' }}>{n.label}</button>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <button data-pxs-nav-menu-btn style={{ display: 'none', padding: '8px 10px', fontSize: 12, fontWeight: 600, color, border: `1px solid ${border}`, borderRadius: 8, alignItems: 'center', gap: 6 }} onClick={() => { const menu = document.getElementById('pxs-mobile-menu'); if (menu) menu.style.display = menu.style.display === 'block' ? 'none' : 'block'; }}><Icon name="menu" size={16} /></button>
        <button style={{ padding: '6px 10px', fontSize: 12, fontWeight: 600, color, border: `1px solid ${border}`, borderRadius: 999 }}>EN / BM</button>
        <Btn kind={dark ? 'primary' : 'dark'} size="sm" icon="message-circle" onClick={() => window.open(`https://wa.me/${state.settings.whatsapp.replace(/[^\d]/g, '')}`, '_blank')}>WhatsApp</Btn>
      </div>
      <div id="pxs-mobile-menu" style={{ display: 'none', width: '100%', background: dark ? 'rgba(0,0,0,0.25)' : 'white', borderRadius: 12, padding: 8, marginTop: 4 }}>
        {nav.map(n => {
          const route = n.link.startsWith('/p/') ? { route: 'page', slug: n.link.replace('/p/', '') }
            : n.link === '/tours' ? { route: 'tours' } : n.link === '/vehicles' ? { route: 'vehicles' }
            : n.link === '/blog' ? { route: 'blog' } : n.link === '/contact' ? { route: 'contact' } : { route: 'home' };
          return <button key={n.id} onClick={() => { navigate(route); document.getElementById('pxs-mobile-menu').style.display = 'none'; }} style={{ display: 'block', width: '100%', padding: '10px 12px', textAlign: 'left', color, fontSize: 14, fontWeight: 500 }}>{n.label}</button>;
        })}
      </div>
    </nav>
  );
};

// ---------- Footer ----------
const PublicFooter = ({ state, navigate }) => (
  <footer className="pxs-section-pad" style={{ background: 'var(--ink)', color: '#c8c0a8', padding: '64px 32px 28px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div data-pxs-footer-grid style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48, paddingBottom: 48, borderBottom: '1px solid #2a2f28' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'Fraunces', fontWeight: 600, fontSize: 18 }}>P</div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 26, color: 'white' }}>{state.settings.agencyName}</div>
          </div>
          <p style={{ fontSize: 14, marginTop: 16, maxWidth: 360, lineHeight: 1.55 }}>{state.settings.tagline} Licensed {state.settings.license}. Family-run since 2008.</p>
          <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
            {['facebook', 'instagram', 'youtube'].map(s => (
              <button key={s} style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid #2a2f28', color: '#c8c0a8', display: 'grid', placeItems: 'center' }}>
                <Icon name={s} size={14} />
              </button>
            ))}
          </div>
        </div>
        {[
          ['Travel', ['Tours', 'Car rental', 'Hotel booking', 'Flight ticketing']],
          ['Company', ['About', 'FAQ', 'Blog', 'Contact']],
          ['Contact', [state.settings.phone, state.settings.whatsapp + ' (WA)', state.settings.email, state.settings.address]],
        ].map(([title, items]) => (
          <div key={title}>
            <div style={{ color: 'white', fontSize: 13, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 18 }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 14, lineHeight: 1.4 }}>
              {items.map(i => <li key={i}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div data-pxs-footer-bottom style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, flexWrap: 'wrap', gap: 12 }}>
        <div>© 2026 PXS Travel Sdn Bhd. All rights reserved.</div>
        <div style={{ display: 'flex', gap: 20 }}>
          <button onClick={() => navigate({ route: 'page', slug: 'terms' })}>Terms</button>
          <button onClick={() => navigate({ route: 'page', slug: 'privacy' })}>Privacy</button>
          <span style={{ opacity: 0.6 }}>Hours: {state.settings.hours}</span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { PublicHome, TourCard, PublicNav, PublicFooter });