// Services page
function ServicesIntro() {
const bp = useBP();
return (
Everything we offer
One trusted partner. Every travel need.
Five services, one phone number, one team. Whether you need a single visa stamp or a multi-country grand tour, you’ll work with the same consultant the whole way through.
);
}
function ServicesList() {
const bp = useBP();
const mob = bp === 'mobile';
return (
{s.id !== 'tickets' && s.id !== 'visa' && (
)}
Talk to us
);
})}
);
}
function serviceImg(id) {
return ({
inbound: 'svcInbound',
outbound: 'svcOutbound',
visa: 'visaService',
tickets: 'airTicketing',
cab: 'svcCab',
insurance: 'insuranceService',
corporate: 'team',
})[id];
}
const PROCESS_STEPS = [
{
n: '01', t: 'Consultation', timing: 'Day 1 · Free',
blurb: 'A real conversation about how you travel — pace, taste, must-sees, dealbreakers. No questionnaires, no scripts.',
bullets: [
'30-minute call or WhatsApp chat at a time that suits you',
'We listen to what has worked (and what hasn’t) on past trips',
'You meet the consultant who will own your booking end to end',
],
accent: 'green',
},
{
n: '02', t: 'Custom plan', timing: 'Day 2–5',
blurb: 'Your consultant drafts a full itinerary — flights, stays, transfers, day-by-day plan — built to your taste, your calendar and your budget.',
bullets: [
'A first draft in 3–5 working days, not weeks',
'Two stay options per city — never just the one we get a kickback on',
'Pace adjusted to your group: slower with kids, denser for solo trips',
],
accent: 'turq',
},
{
n: '03', t: 'Clear quote', timing: 'Day 5–6',
blurb: 'An itemised quote with every line shown separately — flights, stays, transfers, visas, insurance, our planning fee. No padding, no hidden charges.',
bullets: [
'Line-by-line pricing in INR with our markup made explicit',
'Trade stay categories for trip length and see the impact instantly',
'A re-quote if your dates shift — usually within the day',
],
accent: 'green',
},
{
n: '04', t: 'We book it all', timing: '2–3 weeks before travel',
blurb: 'Once you confirm, we handle every reservation, voucher and document — flights, hotels, transfers, visas, insurance — while you keep working.',
bullets: [
'Tickets issued same day, with seat preferences applied',
'All vouchers, e-tickets and visa filings managed for you',
'Travel insurance explained, not just sold — picked to fit your trip',
],
accent: 'turq',
},
{
n: '05', t: 'On-trip support', timing: 'While you travel',
blurb: 'One number, any hour. From a re-routed flight to a missed transfer to a quiet dinner recommendation — your consultant is on call throughout.',
bullets: [
'24/7 WhatsApp and phone access during your trip dates',
'The same person you’ve been working with — no call-centre handoffs',
'Vetted on-ground partners in every city for real-time help',
],
accent: 'green',
},
{
n: '06', t: 'Follow-up', timing: 'Within a week of return',
blurb: 'A debrief on your return — over coffee in Piravom, or a call if you’re elsewhere. Honest feedback we use to shape the next trip we plan together.',
bullets: [
'Your candid review of every hotel, transfer and partner',
'Notes that go straight into the next trip we design for you',
'A small return-home gift from the team — our favourite part',
],
accent: 'turq',
},
];
function ServicesProcess() {
const bp = useBP();
const mob = bp === 'mobile';
const [pinned, setPinned] = React.useState(0); // click-pinned step
const [hovered, setHovered] = React.useState(null); // mouse-hovered step
// Display: hover takes priority, otherwise pinned
const active = hovered !== null ? hovered : pinned;
const step = PROCESS_STEPS[active];
const accent = step.accent === 'green' ? TNF.green : TNF.turq;
const accentDk = step.accent === 'green' ? TNF.greenDk : TNF.turqDk;
const accentFg = step.accent === 'green' ? TNF.blueXdk : '#fff';
return (
How a booking actually works
Six steps from idea to itinerary.
{mob ? 'Tap any step to explore.' : 'Hover any step to explore — click to pin it.'}
{/* Dock row */}
setHovered(null)}
style={{
position: 'relative', padding: mob ? '8px 0 16px' : '32px 0 24px', marginBottom: 8,
overflowX: mob ? 'auto' : 'visible', WebkitOverflowScrolling: 'touch',
}}
>
{/* Background connecting line (desktop/tablet only) */}
{!mob && }
{/* Highlighted progress line up to active step */}
{!mob && }
);
}
function ServicesForPartners() {
const bp = useBP();
const mob = bp === 'mobile';
const [partnerOpen, setPartnerOpen] = React.useState(false);
return (
For hospitality partners
B2B partnerships that grow with you.
Hotels, resorts, and DMCs across the GCC and India — we’re actively building a network of long-term hospitality partners. If you’d like to explore working together, we’d love to talk.
{[
{ i: 'globe', t: 'Inbound referrals', d: 'High-intent travellers from across India.' },
{ i: 'briefcase', t: 'Corporate flow', d: 'Steady business-travel demand.' },
{ i: 'shield', t: 'Reliable settlements', d: 'Clean, on-time commercial relationships.' },
{ i: 'user', t: 'Single point of contact', d: 'Direct line to our ops team.' },
].map((b, i) => {
const Ic = Icon[b.i];
return (
{b.t}
{b.d}
);
})}
setPartnerOpen(false)}/>
);
}
// === Partner registration modal (For hospitality partners) ===
function PartnerModal({ open, onClose }) {
const bp = useBP();
const mob = bp === 'mobile';
const TYPES = ['Hotel', 'Resort', 'DMC', 'Other'];
const EMPTY = { company: '', type: '', name: '', email: '', countryCode: 'IN', phone: '', message: '' };
const [data, setData] = React.useState(EMPTY);
const [errors, setErrors] = React.useState({});
const [notice, setNotice] = React.useState('');
const [sending, setSending] = React.useState(false);
const [done, setDone] = React.useState(false);
const guard = useFormGuard('partner', { maxPerWindow: 4, windowMs: 60000, minFillMs: 1200 });
const captchaRef = React.useRef(null);
const captcha = useHCaptcha(captchaRef, open && !done);
React.useEffect(() => {
if (open) { guard.reset(); setNotice(''); setErrors({}); setDone(false); setData(EMPTY); }
}, [open]);
if (!open) return null;
const QERR = '#D14343';
const update = (k, v) => {
let cv = v;
if (k === 'company' || k === 'name') cv = InputGuard.line(v, 80);
else if (k === 'email') cv = InputGuard.email(v);
else if (k === 'phone') cv = InputGuard.phone(v);
else if (k === 'countryCode') cv = InputGuard.oneOf(v, COUNTRY_CODES.map(c => c.c), 'IN');
else if (k === 'type') cv = InputGuard.oneOf(v, TYPES, '');
else if (k === 'message') cv = InputGuard.text(v, 1000);
setData(d => ({ ...d, [k]: cv }));
setErrors(e => { if (!e[k]) return e; const n = { ...e }; delete n[k]; return n; });
};
const submit = async () => {
const er = {};
if (!isFilledName(data.company)) er.company = true;
if (!isFilledName(data.name)) er.name = true;
if (!isEmail(data.email)) er.email = true;
if (!isPhone(data.phone)) er.phone = true;
if (Object.keys(er).length) { setErrors(er); return; }
const g = guard.evaluate();
if (!g.ok) {
if (g.bot) { setDone(true); return; }
if (g.reason === 'too-fast') { setNotice('That was quick — take a moment, then send.'); return; }
if (g.reason === 'rate') { setNotice(`Too many requests. Please wait ${Math.ceil((g.retryInMs || 0) / 1000)}s.`); return; }
return;
}
// Require hCaptcha to be completed before submitting.
const captchaToken = captcha.getToken();
if (!captchaToken) { setNotice('Please complete the captcha and submit again.'); return; }
setNotice(''); setSending(true);
const dial = (COUNTRY_CODES.find(c => c.c === data.countryCode) || {}).code || '';
try {
await window.submitWeb3Form(window.WEB3FORMS.partner, {
subject: `Partner registration — ${data.company || 'New partner'}`,
from_name: 'Trips N Flys Website',
form_name: 'Services — Partner Registration',
company: data.company,
partner_type: data.type || '—',
contact_name: data.name,
email: data.email,
phone: `${dial} ${data.phone}`.trim(),
message: data.message || '—',
'h-captcha-response': captchaToken,
});
} catch (err) {
setSending(false);
captcha.reset();
setNotice('Could not send right now. Please try again, or email info@tripsnflys.com.');
return;
}
captcha.reset();
guard.accept();
setSending(false);
setDone(true);
};
return (
e.stopPropagation()}>
Become a partner
{done ? (
Thanks, {data.name.split(' ')[0] || 'partner'}!
Our partnerships team will review your details and reach out shortly.
) : (
<>
Tell us about your property or business and we’ll be in touch to explore working together.