/* global React, Icon, SectionHead, MegaFooter, ContactStatus */
const { useState: useStateRentals, useEffect: useEffectRentals } = React;
// ===================================================================
// Rentals — sub-routed
// ===================================================================
// `/rentals` → RentalsLanding (hero + reviews + FAQ)
// `/rentals/equipment` → EquipmentPage (Booqable widgets, native)
// `/rentals/contact` → RentalsContactPage
// `/rentals/open-account` → OpenAccountPage (slim hero + Notion form)
//
// All sub-pages share the `rentals-light` chrome (light theme, rentals
// nav, rentals footer). The big hero only appears on the landing —
// every sub-page gets its own slim VR—XX header so it feels distinct.
//
// The Booqable JS widget script is loaded on every rentals route via
// `useBooqable()` so the floating cart persists as users move between
// the landing, equipment, FAQs, contact and open-account pages.
// ===================================================================
const BOOQABLE_SRC = 'https://ff981641-1ae6-4700-9720-0b8c06579658.assets.booqable.com/v2/booqable.js';
function useBooqable() {
const [status, setStatus] = useStateRentals('loading');
useEffectRentals(() => {
const existing = document.querySelector(`script[src="${BOOQABLE_SRC}"]`);
if (existing) {
setStatus(existing.dataset.bqStatus || 'loaded');
return;
}
const s = document.createElement('script');
s.src = BOOQABLE_SRC;
s.async = true;
s.onload = () => { s.dataset.bqStatus = 'loaded'; setStatus('loaded'); };
s.onerror = () => { s.dataset.bqStatus = 'error'; setStatus('error'); };
document.head.appendChild(s);
const t = setTimeout(() => setStatus((p) => p === 'loading' ? 'error' : p), 8000);
return () => clearTimeout(t);
}, []);
return status;
}
const FAQ = [
{
q: 'Studio hours',
a: 'Acton studio (W3) collection & returns: Mon–Fri 08:30–18:00, Sat 08:30–17:00, Sun 10:00–16:00. Bank holidays by arrangement. After-hours collection on a Friday for a Monday shoot is fine — drop us a line.'
},
{
q: 'Address & parking',
a: 'Access House, 207-211 The Vale, London W3 7QS. Free on-site parking during collections, returns, and kit prep. Acton Central Station is a five-minute walk.',
link: { url: 'https://www.google.com/maps/search/?api=1&query=Access+House+207-211+The+Vale+Acton+London+W3+7QS', label: 'Open in Google Maps →' }
},
{
q: 'Hire periods & late returns',
a: 'A standard single-day hire means collection after 3pm the previous day and return by 11am the following day — that overnight window is included in the day rate. Multi-day hires follow the same structure. Saturday + Sunday counts as a single hire day. Returns after 11am are charged at a full additional day rate.'
},
{
q: 'Who can rent from us?',
a: 'Production companies, agencies, and freelance crew. First-time direct clients complete a quick verification: photo ID held next to face, two recent proofs of address (PDF, dated within 3 months), and two trade references from custom-domain (non-Gmail) email addresses. Hygglo bookings are pre-verified by the platform.'
},
{
q: 'Payment & accounts',
a: 'New direct clients book on a Cash Account: full payment in advance via bank transfer or card before any kit is prepped. After a successful first hire you can move to a Credit Account with 30-day terms (invoices over £250 default to 30 days; smaller invoices stay payment-on-collection until a track record is established). Hire-in insurance covering the full replacement value of the kit is required — happy to recommend brokers if you need one.'
},
{
q: 'Collection & delivery',
a: 'Collect from our Acton studio within staffed hours. Driven delivery within the M25 is £45 per hour, central London congestion zone is £65 per hour, small deliveries under 10kg are £25 per hour — time is calculated on a return-trip basis. Nationwide courier on request. Weekend slots are limited — book early.'
},
{
q: 'After-hours collection or return',
a: 'Outside staffed hours we can usually accommodate, subject to technician availability — flat £25 per collection or return. Confirm the day before via WhatsApp.'
},
{
q: 'Prep & checkout',
a: 'Every kit is bench-tested, projected (lenses), and packed by our techs before it leaves the building. You\'re welcome to attend prep and check the rig over.'
},
{
q: 'Discounts & minimum spend',
a: 'First-time direct rentals get up to 10% off (excluding third-party platforms). Repeat clients are eligible for further discount at our discretion. Every booking has a £25 minimum spend after any discounts or credits.'
},
{
q: 'Damage, loss & cancellations',
a: 'Accidental damage is covered by your hire-in insurance — we\'ll quote any repair or replacement and invoice through Booqable with photos. Missing items not returned within 24 hours are invoiced at full replacement value. Cancellations: free more than 14 days out, 50% of the rental value if cancelled up to 48 hours before, non-refundable within 48 hours. We try to be fair on weather days for outdoor shoots.'
}];
// ===================================================================
// Slim per-page hero — used by every sub-page.
// ===================================================================
function RentalsSubHero({ idx, label, title, lead }) {
return (
{idx} {label}
{lead &&
{lead}
}
);
}
// ===================================================================
// /rentals — landing page (big hero + 4 cards)
// ===================================================================
// ===================================================================
// Reviews — Google reviews shown as a 3-up grid of cards. Each card
// links to Google Maps reviews; the bottom CTA opens the full list.
// REVIEWS_TOTAL is the count Google shows for the listing (update as
// more reviews come in). To swap the featured three, replace entries
// in REVIEWS with text from the Google review you want surfaced.
// ===================================================================
const GOOGLE_REVIEWS_URL = 'https://www.google.com/maps/place/Valley+Rentals/@51.5061014,-0.2620762,17z/data=!4m8!3m7!1s0x48760f2a724d1c33:0xaa5d67f6abb38bfc!8m2!3d51.5060981!4d-0.2595013!9m1!1b1!16s%2Fg%2F11vbw9dmpt';
const REVIEWS_TOTAL = 10;
const REVIEWS = [
{
author: 'Fenton Dyer',
rating: 5,
date: '2 years ago',
text: "I had a top tier experience with Valley Rentals. Friendly and clear communication, fair prices, and easy to pick up and drop off. Glad to say this is everything you'd want from a rental house!",
url: ''
},
{
author: 'Mark Winterlin',
rating: 5,
date: '2 months ago',
text: 'Valley Rentals is my go-to kit hire company. They have excellent service, are always responsive and take the initiative to tackle any problems, and Max and the team are always lovely to work with. Highly recommended!',
url: ''
},
{
author: 'Ben Stewart',
rating: 5,
date: 'a year ago',
text: 'Max is super knowledgeable and helpful with the kit he rents out, and the kit is in pristine condition. He is reasonably priced, and very organised with quotes and expectations. Would definitely rent from him again!',
url: ''
}];
// Single-star SVG — filled-vs-empty driven by parent class. We render
// 5 stars per card and toggle the .filled class up to `rating`.
function ReviewStar({ filled }) {
return (
);
}
function ReviewsSection() {
return (
T—01 What clients say
Reviewed on Google.
{Array.from({ length: 5 }, (_, i) => )}
5.0· {REVIEWS_TOTAL} reviews on Google
);
}
// ===================================================================
// /rentals — landing page (hero, reviews, FAQ, footer). Mirrors the
// flow of the films home: editorial sections rather than a card grid.
// ===================================================================
function RentalsLanding({ onGoto }) {
// Controlled-accordion state — only one FAQ open at a time. Mirrors the
// pattern used by ServicesAccordion on the films home so the reveal
// animation can use grid-template-rows: 0fr → 1fr instead of '
// discrete toggle. First item open by default for affordance.
const [openFaq, setOpenFaq] = useStateRentals(0);
// Hover-driven on devices with a fine pointer; click stays as the
// fallback for keyboards and touch screens. matchMedia gate prevents
// the open-then-instantly-close flicker when a tap synthesises both
// mouseenter and click on iOS/Android.
const [hoverOpens, setHoverOpens] = useStateRentals(false);
React.useEffect(() => {
const m = window.matchMedia('(hover: hover) and (pointer: fine)');
const apply = () => setHoverOpens(m.matches);
apply();
m.addEventListener ? m.addEventListener('change', apply) : m.addListener(apply);
return () => { m.removeEventListener ? m.removeEventListener('change', apply) : m.removeListener(apply); };
}, []);
return (
{/* FAQPage structured data — surfaces in Google search results.
The FAQ accordion now lives on the home page, so the schema
ships from here too. */}