// Home page — warm boutique style.

function HomeHero() {
  const bp = useBP();
  const mob = bp === 'mobile';
  const tab = bp === 'tablet';
  return (
    <section style={{ padding: bpv(bp, '92px 20px 48px', '108px 36px 60px', '120px 56px 72px'), position: 'relative', background: TNF.cream }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: bpv(bp, '1fr', '1.1fr 1fr', '1.15fr 1fr'), gap: bpv(bp, 40, 48, 80), alignItems: 'center' }}>
        <div className="tnf-fade">
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#fff', padding: '8px 16px', borderRadius: 999, fontSize: 12, color: TNF.blueDk, fontWeight: 500, marginBottom: 24, boxShadow: '0 1px 3px rgba(0,0,0,0.04)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: TNF.green }}/>
            A family-built travel agency · since 2022
          </div>
          <h1 style={{
            fontFamily: 'var(--tnf-display)', fontSize: 'clamp(44px, 11vw, 100px)', lineHeight: 1.0,
            fontWeight: 800, letterSpacing: '-0.03em', margin: 0, color: TNF.blueDk,
            textWrap: 'balance',
          }}>
            <span style={{ fontSize: '0.62em' }}>Dream. Book.</span><br/>
            <span style={{ fontSize: '1.5em', display: 'inline-block', lineHeight: 1, color: TNF.turqDk }}>Fly.</span>
          </h1>
          <p style={{ fontSize: mob ? 16 : 18, lineHeight: 1.6, marginTop: mob ? 20 : 28, color: TNF.inkSoft, maxWidth: 480 }}>
            A small team with a real love for travel. No call-centre scripts — just personal planning, transparent quotes, and the kind of care larger agencies overlook.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: mob ? 28 : 36, alignItems: 'center', flexWrap: 'wrap', flexDirection: mob ? 'column' : 'row' }}>
            <button onClick={() => window.scrollToQuickEnquiry && window.scrollToQuickEnquiry()} style={{ ...btn(TNF.blueDk), width: mob ? '100%' : 'auto', justifyContent: 'center', minHeight: 48 }}>
              Plan with us <Icon.arrow width={18} height={18}/>
            </button>
          </div>
          <div style={{ display: 'flex', gap: bpv(bp, 18, 28, 36), marginTop: mob ? 36 : 48, alignItems: 'center' }}>
            <AvatarStack/>
            <div style={{ fontSize: 13, color: TNF.inkSoft, lineHeight: 1.5 }}>
              <div style={{ display: 'flex', gap: 4, color: TNF.green, marginBottom: 4 }}>
                {[1,2,3,4,5].map(k => <Icon.star key={k} width={13} height={13}/>)}
              </div>
              <strong style={{ color: TNF.ink, fontWeight: 600 }}>280+ trips</strong> planned · loved by leisure, honeymoon & corporate travellers
            </div>
          </div>
        </div>

        {(mob || tab) ? (
          /* Compact polaroid grid for small screens */
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: mob ? 14 : 18, marginTop: mob ? 8 : 0 }}>
            {[
              { photo: 'omanPolaroid', tag: 'Oman · 2025', rot: -3 },
              { photo: 'sgPolaroid', tag: 'Singapore · 2026', rot: 2, fz: 16 },
              { photo: 'baliPolaroid', tag: 'Bali · 2026', rot: 2 },
              { photo: 'qatarPolaroid', tag: 'Qatar · 2025', rot: -3 },
            ].map(p => (
              <div key={p.photo} className="tnf-card-hover" style={{
                transform: `rotate(${p.rot}deg)`, padding: 8, paddingBottom: 26,
                background: '#fff', boxShadow: '0 8px 24px rgba(11,38,48,0.16)', position: 'relative',
              }}>
                <div style={{ width: '100%', aspectRatio: '16 / 10', overflow: 'hidden', background: TNF.line }}>
                  <Img photo={p.photo} style={{ width: '100%', height: '100%' }}/>
                </div>
                <div style={{ position: 'absolute', left: 8, right: 8, bottom: 0, height: 26, paddingBottom: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', fontFamily: "'Shadows Into Light', cursive", fontWeight: 400, WebkitTextStroke: '0.2px #000', fontSize: p.fz || 18, color: '#000' }}>{p.tag}</div>
              </div>
            ))}
          </div>
        ) : (
          /* Polaroid stack (desktop) — Instax Wide (landscape), corner-overlapped cascade */
          <div style={{ position: 'relative', height: 620 }}>
            <Polaroid photo="omanPolaroid"  tag="Oman · 2025"       rot={-5} x={0}   y={0}   z={4}/>
            <Polaroid photo="sgPolaroid" tag="Singapore · 2026" rot={4}  x={250} y={120} z={3} lift={4}/>
            <Polaroid photo="baliPolaroid"  tag="Bali · 2026"        rot={-4} x={12}  y={240} z={2}/>
            <Polaroid photo="qatarPolaroid" tag="Qatar · 2025"      rot={5}  x={238} y={360} z={1}/>
            <div style={{
              position: 'absolute', top: 40, right: 0, transform: 'rotate(8deg)',
              border: `2px solid ${TNF.green}`, color: TNF.greenDk,
              padding: '10px 14px', fontFamily: 'monospace', fontSize: 11,
              letterSpacing: '0.15em', textTransform: 'uppercase',
              background: 'rgba(43, 216, 132, 0.06)', borderRadius: 6,
            }}>
              Boarded ✈ 280+ times
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function Polaroid({ photo, tag, rot, x, y, z, lift = 0 }) {
  return (
    <div className="tnf-card-hover" style={{
      position: 'absolute', left: x, top: y, transform: `rotate(${rot}deg)`,
      width: 320, padding: 12, paddingBottom: 36, background: '#fff',
      boxShadow: '0 8px 24px rgba(11,38,48,0.18)', zIndex: z,
    }}>
      <div style={{ width: '100%', height: 188, overflow: 'hidden', background: TNF.line }}>
        <Img photo={photo} style={{ width: '100%', height: '100%' }}/>
      </div>
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 0, height: 36, paddingBottom: 6 + lift,
        display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
        fontFamily: "'Shadows Into Light', cursive", fontWeight: 400, WebkitTextStroke: '0.3px #000', fontSize: 22, color: '#000',
      }}>{tag}</div>
    </div>
  );
}

function AvatarStack() {
  return (
    <div style={{ display: 'flex' }}>
      {['Reema', 'Arun', 'Hari', 'Fathima'].map((n, i) => (
        <div key={n} style={{ marginLeft: i === 0 ? 0 : -10, border: '2px solid #fff', borderRadius: '50%' }}>
          <Avatar name={n} size={36}/>
        </div>
      ))}
    </div>
  );
}

// === HOW WE WORK — large scroll-revealed process ===
const HOW_STEPS = [
  { n: '01', t: 'Consultation', d: 'A real conversation about how you travel. Pace, taste, must-sees, dealbreakers — all of it.', accent: 'green' },
  { n: '02', t: 'Custom plan',  d: 'Your travel consultant drafts an itinerary built to your taste, calendar and budget.', accent: 'turq' },
  { n: '03', t: 'Clear quote',  d: 'Itemised, transparent costs. Flights, stay, transfers, visas, insurance — line by line, no surprises.', accent: 'green' },
  { n: '04', t: 'We book it all', d: 'Reservations, vouchers, documentation, visa filings — handled end to end while you keep working.', accent: 'turq' },
  { n: '05', t: 'On-trip support', d: 'One number you can reach any hour you need us — for a re-routed flight, a missed transfer, or just a recommendation.', accent: 'green' },
  { n: '06', t: 'Follow-up',    d: 'A debrief over coffee on your return — feedback that shapes the next trip we plan together.', accent: 'turq' },
];

function HowWeWork() {
  const bp = useBP();
  const mob = bp === 'mobile';
  const refs = React.useRef([]);
  const spineWrapRef = React.useRef(null);
  const [visible, setVisible] = React.useState(() => new Set());
  const [fill, setFill] = React.useState(0);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const i = Number(entry.target.dataset.idx);
            setVisible(prev => {
              if (prev.has(i)) return prev;
              const next = new Set(prev);
              next.add(i);
              return next;
            });
          }
        });
      },
      { threshold: 0.4, rootMargin: '0px 0px -12% 0px' }
    );
    refs.current.forEach(el => el && observer.observe(el));
    return () => observer.disconnect();
  }, []);

  // Scroll-driven spine fill: 0 → 1 as the timeline passes through the viewport middle.
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const el = spineWrapRef.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        const anchor = window.innerHeight * 0.55;
        const p = (anchor - r.top) / r.height;
        setFill(Math.max(0, Math.min(1, p)));
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  return (
    <section style={{ padding: bpv(bp, '48px 20px 56px', '60px 36px 72px', '64px 56px 88px'), background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: 60, right: -120, width: 300, height: 300,
        borderRadius: '50%', background: `radial-gradient(circle, ${TNF.turq}22, transparent 70%)`,
      }}/>
      <div style={{
        position: 'absolute', bottom: 40, left: -80, width: 240, height: 240,
        borderRadius: '50%', background: `radial-gradient(circle, ${TNF.green}1c, transparent 70%)`,
      }}/>

      <div style={{ maxWidth: 980, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 680, margin: bpv(bp, '0 auto 32px', '0 auto 40px', '0 auto 44px') }}>
          <SectionEyebrow>How we work</SectionEyebrow>
          <H2 style={{ fontSize: 50, fontWeight: 700 }}>A simple, thoughtful process.</H2>
          <p style={{ fontSize: 16, color: TNF.inkSoft, marginTop: 16, lineHeight: 1.6 }}>
            Six steps, no surprises — from the first conversation to coffee on your return.
          </p>
        </div>

        {/* Vertical timeline */}
        <div ref={spineWrapRef} style={{ position: 'relative' }}>
          {/* Center spine — static track */}
          <div style={{
            position: 'absolute', left: mob ? 27 : '50%', top: 0, bottom: 0, width: 2,
            background: `${TNF.turq}26`, transform: mob ? 'none' : 'translateX(-1px)',
          }}/>
          {/* Center spine — scroll-driven fill */}
          <div style={{
            position: 'absolute', left: mob ? 27 : '50%', top: 0, width: 2,
            height: `${fill * 100}%`,
            background: `linear-gradient(to bottom, ${TNF.turq}, ${TNF.green})`,
            transform: mob ? 'none' : 'translateX(-1px)',
            boxShadow: `0 0 10px ${TNF.turq}66`,
          }}/>

          {HOW_STEPS.map((s, i) => {
            const isLeft = i % 2 === 0;
            const accent = s.accent === 'green' ? TNF.green : TNF.turq;
            const accentDk = s.accent === 'green' ? TNF.greenDk : TNF.turqDk;
            const isVis = visible.has(i);
            if (mob) {
              return (
                <div
                  key={s.n}
                  ref={el => (refs.current[i] = el)}
                  data-idx={i}
                  style={{
                    position: 'relative', paddingLeft: 72,
                    marginBottom: i === HOW_STEPS.length - 1 ? 0 : 28,
                  }}
                >
                  <div style={{ position: 'absolute', left: 0, top: 0 }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: '50%',
                      background: accent,
                      color: s.accent === 'green' ? TNF.blueXdk : '#fff',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700, fontSize: 16, fontFamily: 'monospace',
                      boxShadow: isVis ? `0 0 0 7px ${accent}1f, 0 8px 22px ${accent}40` : `0 4px 12px ${accent}30`,
                      transform: isVis ? 'scale(1)' : 'scale(0.5)',
                      transition: 'transform .6s cubic-bezier(.2,1.5,.4,1) .08s, box-shadow .8s ease',
                    }}>{s.n}</div>
                  </div>
                  <div style={{
                    opacity: isVis ? 1 : 0,
                    transform: isVis ? 'translateY(0)' : 'translateY(16px)',
                    transition: 'opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)',
                  }}>
                    <StepContent step={s} accent={accent} accentDk={accentDk}/>
                  </div>
                </div>
              );
            }
            return (
              <div
                key={s.n}
                ref={el => (refs.current[i] = el)}
                data-idx={i}
                style={{
                  display: 'grid', gridTemplateColumns: '1fr 72px 1fr',
                  alignItems: 'center', gap: 0, marginBottom: i === HOW_STEPS.length - 1 ? 0 : 52,
                  position: 'relative',
                }}
              >
                {/* Left content */}
                <div style={{
                  paddingRight: 36, textAlign: 'right',
                  opacity: isVis && isLeft ? 1 : 0,
                  transform: isVis && isLeft ? 'translateX(0) scale(1)' : (isLeft ? 'translateX(-36px) scale(.96)' : 'none'),
                  filter: isVis || !isLeft ? 'blur(0)' : 'blur(6px)',
                  transition: 'opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .6s ease',
                  visibility: isLeft ? 'visible' : 'hidden',
                }}>
                  {isLeft && <StepContent step={s} accent={accent} accentDk={accentDk} alignRight/>}
                </div>

                {/* Node */}
                <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
                  <div style={{
                    width: 58, height: 58, borderRadius: '50%',
                    background: accent,
                    color: s.accent === 'green' ? TNF.blueXdk : '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 700, fontSize: 17, fontFamily: 'monospace',
                    boxShadow: isVis ? `0 0 0 8px ${accent}1f, 0 8px 22px ${accent}40` : `0 4px 12px ${accent}30`,
                    transform: isVis ? 'scale(1) rotate(0deg)' : 'scale(0.4) rotate(-25deg)',
                    transition: 'transform .65s cubic-bezier(.2,1.5,.4,1) .08s, box-shadow .8s ease',
                  }}>
                    {s.n}
                  </div>
                </div>

                {/* Right content */}
                <div style={{
                  paddingLeft: 36,
                  opacity: isVis && !isLeft ? 1 : 0,
                  transform: isVis && !isLeft ? 'translateX(0) scale(1)' : (!isLeft ? 'translateX(36px) scale(.96)' : 'none'),
                  filter: isVis || isLeft ? 'blur(0)' : 'blur(6px)',
                  transition: 'opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .6s ease',
                  visibility: !isLeft ? 'visible' : 'hidden',
                }}>
                  {!isLeft && <StepContent step={s} accent={accent} accentDk={accentDk}/>}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <button onClick={() => window.scrollToQuickEnquiry && window.scrollToQuickEnquiry()} style={btn(TNF.blueDk)}>
            Start with a conversation <Icon.arrow width={16} height={16}/>
          </button>
        </div>
      </div>
    </section>
  );
}

function StepContent({ step, accent, accentDk, alignRight = false }) {
  const bp = useBP();
  const mob = bp === 'mobile';
  return (
    <div style={{
      background: '#fff', padding: mob ? '20px 22px' : '22px 26px', borderRadius: 16,
      border: `1px solid ${TNF.lineSoft}`,
      boxShadow: '0 10px 26px rgba(11,38,48,0.06)',
      display: mob ? 'block' : 'inline-block', maxWidth: mob ? 'none' : 400, textAlign: 'left',
    }}>
      <div style={{
        fontSize: 10.5, fontWeight: 700, color: accentDk, letterSpacing: '0.2em',
        textTransform: 'uppercase', marginBottom: 8,
      }}>Step {step.n}</div>
      <h3 style={{
        fontFamily: 'var(--tnf-display)', fontSize: 24, color: TNF.blueDk,
        margin: 0, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.1,
      }}>{step.t}</h3>
      <p style={{
        fontSize: 14, color: TNF.inkSoft, marginTop: 10, lineHeight: 1.55,
        marginBottom: 0,
      }}>{step.d}</p>
    </div>
  );
}

// === DESTINATIONS — by region ===
const HOME_REGIONS = [
  {
    id: 'me',
    name: 'Middle East',
    blurb: 'Long weekends in the Gulf, fjords and wadis in Oman, desert escapes near home — short flights from home, worlds away in feel.',
    photo: 'homeMiddleEast',
    accent: 'green',
    places: ['UAE', 'Oman', 'Saudi Arabia', 'Qatar'],
    trips: '60+ trips planned',
  },
  {
    id: 'ind',
    name: 'Indian Subcontinent',
    blurb: 'The places we know best — backwaters, deserts, snow-line lakes and tea-country trails across India, Sri Lanka and beyond.',
    photo: 'homeIndianSub',
    accent: 'turq',
    places: ['Kerala', 'Kashmir', 'Goa', 'Rajasthan', 'Ladakh', 'Sri Lanka'],
    trips: '120+ trips planned',
  },
  {
    id: 'asia',
    name: 'Asia',
    blurb: 'Tropical beaches in Bali, temple mornings in Kyoto, food trails in Hanoi — the continent we send the most honeymooners to.',
    photo: 'homeAsia',
    accent: 'green',
    places: ['Thailand', 'Singapore', 'Vietnam', 'Bali', 'Malaysia'],
    trips: '90+ trips planned',
  },
];

function DestinationsPreview() {
  const bp = useBP();
  const mob = bp === 'mobile';
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: TNF.cream }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: mob ? 32 : 48, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <SectionEyebrow>Hand-picked journeys</SectionEyebrow>
            <H2 style={{ fontWeight: 700 }}>Trips we love<br/>planning.</H2>
            <p style={{ fontSize: 16, color: TNF.inkSoft, marginTop: 20, lineHeight: 1.6, maxWidth: 520 }}>
              Three regions we know inside out — from the visa quirks to the hotels worth the extra night.
            </p>
          </div>
          <a href="destinations.html" style={btnOutline()}>All destinations <Icon.arrow width={14} height={14}/></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'), gap: bpv(bp, 20, 24, 28) }}>
          {HOME_REGIONS.map(r => {
            const accent   = r.accent === 'green' ? TNF.green   : TNF.turq;
            const accentDk = r.accent === 'green' ? TNF.greenDk : TNF.turqDk;
            return (
              <a key={r.id} href="destinations.html" className="tnf-card-hover" style={{
                background: '#fff', borderRadius: 22, overflow: 'hidden',
                border: `1px solid ${TNF.lineSoft}`, textDecoration: 'none',
                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ height: 280, position: 'relative' }}>
                  <Img photo={r.photo} style={{ width: '100%', height: '100%' }}/>
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: 'linear-gradient(180deg, transparent 50%, rgba(7,42,53,0.55) 100%)',
                  }}/>
                  <div style={{
                    position: 'absolute', top: 16, left: 16,
                    background: '#fff', padding: '6px 12px', borderRadius: 999,
                    fontSize: 11, color: accentDk, fontWeight: 700, letterSpacing: '0.1em',
                    textTransform: 'uppercase',
                  }}>{r.trips}</div>
                  <div style={{
                    position: 'absolute', bottom: 20, left: 24, right: 24,
                    color: '#fff', fontFamily: 'var(--tnf-display)', fontSize: 36,
                    fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1,
                  }}>
                    {r.name}
                  </div>
                </div>
                <div style={{ padding: '26px 26px 28px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <p style={{ fontSize: 14, color: TNF.inkSoft, margin: 0, lineHeight: 1.6 }}>{r.blurb}</p>
                  <div style={{
                    marginTop: 'auto', paddingTop: 22,
                    borderTop: `1px dashed ${TNF.line}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  }}>
                    <span style={{ fontSize: 12, color: accentDk, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Explore the region</span>
                    <Icon.arrow width={16} height={16} style={{ color: TNF.blue }}/>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// === SERVICES — the four ways we travel ===
const HOME_SERVICES = [
  {
    id: 'leisure',
    label: 'Leisure Travel',
    icon: 'globe',
    blurb: 'Honeymoons, family holidays, multi-country grand tours — itineraries built around your pace, not a brochure.',
  },
  {
    id: 'group',
    label: 'Group Travel',
    icon: 'user',
    blurb: 'Family reunions, friend gangs, educational trips — coordinated for groups of 8 to 60 with one point of contact.',
  },
  {
    id: 'corporate',
    label: 'Corporate Travel',
    icon: 'briefcase',
    blurb: 'Dedicated account managers, consolidated billing, after-hours support — for businesses that travel often.',
  },
  {
    id: 'luxury',
    label: 'Luxury Travel',
    icon: 'star',
    blurb: 'Private villas, chartered transfers, off-menu experiences — quiet, considered travel at the upper end.',
  },
];

function ServicesPreview() {
  const bp = useBP();
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: '#fff' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: bp === 'mobile' ? '0 auto 32px' : '0 auto 48px' }}>
          <SectionEyebrow>What we do</SectionEyebrow>
          <H2 style={{ fontWeight: 700 }}>End-to-end travel,<br/>handled with care.</H2>
          <p style={{ fontSize: 16, color: TNF.inkSoft, marginTop: 18, lineHeight: 1.6 }}>
            One trusted point of contact for every kind of trip — from first quote to coffee on your return.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(4, 1fr)'), gap: 20 }}>
          {HOME_SERVICES.map((s, i) => {
            const Ic = Icon[s.icon];
            const isOdd = i % 2 === 1;
            return (
              <div key={s.id} className="tnf-card-hover" style={{
                padding: '32px 28px 36px', borderRadius: 20, background: '#fff',
                border: `1px solid ${TNF.lineSoft}`,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 14,
                  background: isOdd ? TNF.turq : TNF.green,
                  color: isOdd ? '#fff' : TNF.blueXdk,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 22,
                }}>
                  <Ic width={26} height={26}/>
                </div>
                <h3 style={{
                  fontFamily: 'var(--tnf-display)', fontSize: 24, color: TNF.blueDk,
                  margin: 0, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.15,
                }}>{s.label}</h3>
                <p style={{
                  fontSize: 14, color: TNF.inkSoft, marginTop: 12,
                  lineHeight: 1.6, marginBottom: 0,
                }}>{s.blurb}</p>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <a href="services.html" style={btnOutline()}>Browse all services <Icon.arrow width={14} height={14}/></a>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <SiteShell active="Home" overHero={false}>
      <HomeHero/>
      <HowWeWork/>
      <DestinationsPreview/>
      <ServicesPreview/>
    </SiteShell>
  );
}
window.HomePage = HomePage;