(() => {
const { Button, Eyebrow, SectionHeading, Tabs, ResidenceCard, AvailabilityBar, Icon, IconButton, StatusBadge, TextField, SelectField, Checkbox } = window.HeronsDesignSystem_c1fb00;
const pg = { maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-gutter)' };

function ResidencesPage({ go, book }) {
  const { residences, categories } = window.HERONS_DATA;
  const [cat, setCat] = React.useState('All');
  const list = residences.filter((r) => cat === 'All' || r.category === cat);
  return (
    <main style={{ paddingTop: 68 }}>
      <section style={{ background: 'var(--midnight)', padding: '72px 0 120px' }}>
        <div style={pg}><SectionHeading tone="light" eyebrow="Residences" title="Furnished apartments across London" intro="Tell us your dates and number of guests, and we will check availability for you." /></div>
      </section>
      <div className="availability-shell listing-search" style={{ ...pg, marginTop: -64 }}><AvailabilityBar onSubmit={(query) => book({ ...query, source: 'residences-search' })} /></div>
      <section style={{ ...pg, padding: '64px var(--page-gutter) 104px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24 }}>
          <Tabs items={categories} value={cat} onChange={setCat} style={{ flex: 1 }} />
          <span style={{ fontSize: 14, color: 'var(--ink-64)', paddingBottom: 14 }}>{list.length} residences</span>
        </div>
        <div className="residence-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 24, marginTop: 36 }}>
          {list.map((r) => <ResidenceCard key={r.id} {...r} onOpen={() => r.bookingUrl ? window.location.href = r.bookingUrl : go('residence', r.id)} onEnquire={() => r.bookingUrl ? window.location.href = r.bookingUrl : go('enquire', r.id)} />)}
        </div>
      </section>
    </main>
  );
}

function ResidencePage({ go, book, id }) {
  const { residences } = window.HERONS_DATA;
  const r = residences.find((x) => x.id === id) || residences[0];
  const [img, setImg] = React.useState(0);
  const [galleryOpen, setGalleryOpen] = React.useState(false);
  const [enquiry, setEnquiry] = React.useState({ moveIn: '', occupants: '1' });
  const facts = [
    ['bed-double', r.beds + (r.beds === 1 ? ' bedroom' : ' bedrooms')],
    ['bath', r.baths + (r.baths === 1 ? ' bathroom' : ' bathrooms')],
    r.size && ['ruler', r.size],
    r.furnishing && ['key-round', r.furnishing],
  ].filter(Boolean);
  const amenities = r.amenities || ['Fast Wi-Fi', 'Fully equipped kitchen', 'Washer-dryer', 'Linen and towels'];
  const description = r.description || 'A thoughtfully presented London home available to let. Contact our lettings team for the full property particulars, availability and viewing arrangements.';
  const tenancyDetails = r.tenancyDetails || [['Available from', r.availableFrom || 'Please enquire'], ['Furnishing', r.furnishing || 'Furnished'], ['Minimum tenancy', r.minimumTenancy || 'Please enquire'], ['Deposit', r.deposit || 'Please enquire']];
  const enquire = () => {
    const query = { ...enquiry, residence: r.id, area: r.area, source: 'lettings' };
    sessionStorage.setItem('herons-booking-query', JSON.stringify(query));
    go('enquire', r.id);
  };
  const changeImage = (delta) => setImg((img + delta + r.images.length) % r.images.length);
  return (
    <main className="residence-detail" style={{ paddingTop: 68 }}>
      <div className="detail-topline" style={{ ...pg, padding: '28px var(--page-gutter) 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20 }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('residences'); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--midnight)' }}><Icon name="chevron-left" size={16} />All residences</a>
        <span style={{ fontSize: 13, color: 'var(--ink-64)' }}>{r.area}</span>
      </div>
      <section className="detail-gallery" style={{ ...pg, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12, marginTop: 24, height: 560 }}>
        <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--stone)' }}>
          <button type="button" className="detail-image-button" onClick={() => setGalleryOpen(true)} aria-label="Open image gallery"><img src={r.images[img]} alt={`${r.name}, image ${img + 1}`} /></button>
          <div style={{ position: 'absolute', right: 20, bottom: 20, display: 'flex', gap: 8 }}>
            <IconButton icon="chevron-left" label="Previous" variant="on-image" onClick={() => changeImage(-1)} />
            <IconButton icon="chevron-right" label="Next" variant="on-image" onClick={() => changeImage(1)} />
          </div>
          <button type="button" className="gallery-count" onClick={() => setGalleryOpen(true)}>{img + 1} / {r.images.length} · View gallery</button>
        </div>
        <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 12 }}>
          {[1, 2].map((offset) => <button type="button" className="detail-image-button" key={offset} onClick={() => { setImg((img + offset) % r.images.length); setGalleryOpen(true); }}><img src={r.images[(img + offset) % r.images.length]} alt={`${r.name}, image ${(img + offset) % r.images.length + 1}`} /></button>)}
        </div>
      </section>
      <section className="detail-layout" style={{ ...pg, display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 380px', gap: 72, padding: '56px var(--page-gutter) 104px' }}>
        <div>
          <Eyebrow>{r.type} in {r.area}</Eyebrow>
          <h1 style={{ fontSize: 'var(--fs-h1)', marginTop: 18, maxWidth: 760 }}>{r.name}</h1>
          <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', padding: '24px 0', margin: '28px 0', borderTop: '1px solid var(--stone)', borderBottom: '1px solid var(--stone)' }}>
            {facts.map(([i, t]) => <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 15 }}><Icon name={i} size={20} />{t}</span>)}
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.7, maxWidth: 720, whiteSpace: 'pre-line' }}>{description}</p>
          <div className="detail-section"><h2>What this property offers</h2><div className="amenity-grid">
            {amenities.map((a) => <span key={a} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15 }}><Icon name="check" size={16} color="var(--brass)" />{a}</span>)}
          </div></div>
          <div className="detail-section"><h2>Tenancy details</h2><dl className="stay-grid">
            {tenancyDetails.map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}
          </dl></div>
          <div className="detail-section location-panel">
            <div><Eyebrow>Location</Eyebrow><h2>{r.area}</h2><p>{r.locationDescription || 'The full address is available when you arrange a viewing with our lettings team.'}</p></div><Icon name="map-pin" size={30} color="var(--brass)" />
          </div>
        </div>
        <aside className="enquiry-card" style={{ alignSelf: 'start', position: 'sticky', top: 100, background: 'var(--white)', border: '1px solid var(--stone)', padding: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div><div className="card-eyebrow">Lettings</div>{r.rent || r.rate ? <div style={{ fontSize: 15, marginTop: 8 }}><b style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 30, color: 'var(--midnight)' }}>£{r.rent || r.rate}</b> {r.rentPeriod || 'pcm'}</div> : <h2 style={{ fontSize: 28, marginTop: 8 }}>Rent on application</h2>}</div>
          <StatusBadge status="available" />
          <TextField label="Preferred move-in date" type="date" value={enquiry.moveIn} onChange={(e) => setEnquiry({ ...enquiry, moveIn: e.target.value })} />
          <SelectField label="Occupants" options={['1', '2', '3', '4', '5', '6+']} value={enquiry.occupants} onChange={(e) => setEnquiry({ ...enquiry, occupants: e.target.value })} />
          <Button fullWidth onClick={enquire}>Arrange a viewing</Button>
          <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: 'var(--ink-64)' }}>Send your preferred move-in date and a member of our lettings team will contact you.</p>
        </aside>
      </section>
      {galleryOpen && <div className="gallery-modal" role="dialog" aria-modal="true" aria-label={`${r.name} image gallery`}>
        <button type="button" className="gallery-close" onClick={() => setGalleryOpen(false)} aria-label="Close gallery"><Icon name="x" size={22} /></button>
        <IconButton icon="chevron-left" label="Previous image" variant="outline-light" onClick={() => changeImage(-1)} />
        <figure><img src={r.images[img]} alt={`${r.name}, image ${img + 1}`} /><figcaption>{img + 1} of {r.images.length}</figcaption></figure>
        <IconButton icon="chevron-right" label="Next image" variant="outline-light" onClick={() => changeImage(1)} />
      </div>}
    </main>
  );
}

function EnquirePage({ go, id }) {
  const { residences } = window.HERONS_DATA;
  const r = residences.find((x) => x.id === id);
  const [sent, setSent] = React.useState(false);
  const isLettings = Boolean(r && !r.bookingUrl);
  const [kind, setKind] = React.useState(isLettings ? 'Lettings' : id === 'partner' ? 'Property owner' : (id === 'corporate' || id === 'relocation') ? 'Corporate' : 'Guest stay');
  const bookingQuery = React.useMemo(() => {
    try { return JSON.parse(sessionStorage.getItem('herons-booking-query') || '{}'); } catch { return {}; }
  }, []);
  return (
    <main style={{ paddingTop: 68, background: 'var(--ivory)' }}>
      <section className="enquire-layout" style={{ ...pg, display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.2fr)', gap: 96, padding: '96px var(--page-gutter) 120px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <Eyebrow>Enquire</Eyebrow>
          <h1 style={{ fontSize: 'var(--fs-h1)' }}>{isLettings ? 'Arrange a viewing' : 'Tell us about your stay'}</h1>
          <p style={{ fontSize: 18, margin: 0 }}>{isLettings ? 'Tell us when you would like to move and we will contact you to arrange a suitable viewing.' : 'Please send us your preferred dates, location and number of guests, and we will check availability for you.'}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 24, borderTop: '1px solid var(--stone)', fontSize: 15 }}>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}><Icon name="phone" />[Phone number]</span>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}><Icon name="mail" />[Email address]</span>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}><Icon name="message-circle" />WhatsApp [number]</span>
          </div>
        </div>
        <div style={{ background: 'var(--white)', padding: 40, border: '1px solid var(--stone)' }}>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, padding: '40px 0' }}>
              <h2 style={{ fontSize: 32 }}>Thank you for your enquiry.</h2>
              <p style={{ margin: 0, fontSize: 17 }}>{isLettings ? 'Our lettings team will contact you to confirm the property details and arrange a viewing.' : 'We will check availability and reply personally. If anything changes in the meantime, simply reply to our email.'}</p>
              <div><Button variant="secondary" onClick={() => go('home')}>Return home</Button></div>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <Tabs items={isLettings ? ['Lettings', 'Property owner'] : ['Guest stay', 'Corporate', 'Property owner']} value={kind} onChange={setKind} />
              {r && <div style={{ fontSize: 14, color: 'var(--ink-64)' }}>Residence: <b style={{ color: 'var(--midnight)' }}>{r.type}, {r.area}</b></div>}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <TextField label="Full name" required />
                <TextField label="Email" type="email" required />
                <TextField label="Phone" type="tel" />
                {isLettings ? <SelectField label="Occupants" options={['1', '2', '3', '4', '5', '6+']} defaultValue={bookingQuery.occupants || '1'} /> : kind === 'Corporate' ? <TextField label="Company" /> : <SelectField label="Guests" options={['1', '2', '3', '4', '5', '6', '7', '8+']} defaultValue={bookingQuery.guests || '2'} />}
                {isLettings ? <><TextField label="Preferred move-in" type="date" defaultValue={bookingQuery.moveIn || ''} /><SelectField label="Preferred tenancy" options={['6 months', '12 months', '18 months', '24+ months']} /></> : <><TextField label="Arrive" type="date" defaultValue={bookingQuery.arrive || ''} /><TextField label="Depart" type="date" defaultValue={bookingQuery.depart || ''} /></>}
              </div>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ fontSize: 11, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--ink-64)' }}>Anything we should know</span>
                <textarea rows="4" style={{ border: '1px solid var(--stone)', padding: 14, fontFamily: 'var(--font-sans)', fontSize: 16, resize: 'vertical', outline: 'none' }} />
              </label>
              <Checkbox label="Keep me informed about new residences" />
              <div><Button type="submit">Send enquiry</Button></div>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

function AboutPage({ go }) {
  const { I, E } = window.HERONS_DATA;
  const team = [
    ['Mustafa Hussam', 'Founder & Director', 'Mustafa Hussam Director.png'],
    ['Katherine Williams', 'New Business Executive', 'Katherine Williams - New Business Executive.jpg'],
    ['Jamie Woodcock', 'Senior Negotiator', 'Jamie Woodcock Senior Negotiator.jpg'],
    ['Kalani Thiru', 'Service Coordinator', 'Kalani Thiru - Service Cordinator.png'],
    ['Adin Lalani', 'CRM', 'Adin Lalani - CRM.jpg'],
    ['Sarange Balakrishnan', 'Accountant', 'Sarange Balakrishnan Accountant.jpg'],
  ];
  return <main className="about-page" style={{ paddingTop: 68, background: 'var(--ivory)' }}>
    <section className="about-hero" style={{ background: 'var(--midnight)', color: 'var(--ivory)', padding: '112px 0' }}>
      <div className="about-hero-grid" style={{ ...pg, display: 'grid', gridTemplateColumns: 'minmax(0,.9fr) minmax(420px,1.1fr)', gap: 96, alignItems: 'center' }}>
        <div>
          <Eyebrow tone="light">About Herons</Eyebrow>
          <h1 style={{ color: 'var(--ivory)', fontSize: 'var(--fs-h1)', margin: '24px 0 28px', maxWidth: 640 }}>A more considered way to stay in London</h1>
          <p style={{ color: 'var(--ivory-72)', fontSize: 19, lineHeight: 1.7, margin: 0, maxWidth: 620 }}>Herons provides thoughtfully furnished London residences with discreet, personal service for relocations, corporate stays and extended visits.</p>
        </div>
        <div className="about-hero-image" style={{ height: 540, overflow: 'hidden' }}><img src={E + 'c3e316d0-0191-4d6f-ac3a-40ecbdae2fba-0.webp'} alt="A London residence" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
      </div>
    </section>

    <section className="about-story" style={{ ...pg, padding: '120px var(--page-gutter)' }}>
      <div className="about-story-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(320px,.8fr) minmax(0,1.2fr)', gap: 104, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <img src={I + 'headshots/Mustafa Hussam Director.png'} alt="Mustafa Hussam, Founder and Director of Herons" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: 'center top', background: 'var(--white)' }} />
          <div style={{ borderTop: '1px solid var(--stone)', paddingTop: 14, marginTop: 14, display: 'flex', justifyContent: 'space-between', gap: 20 }}><span style={{ fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase' }}>Founder</span><span style={{ fontFamily: 'var(--font-serif)', fontSize: 18 }}>Mustafa Hussam</span></div>
        </div>
        <div>
          <Eyebrow>Our story</Eyebrow>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: '24px 0 28px', maxWidth: 700 }}>From TS Haus to Herons</h2>
          <p style={{ fontSize: 20, lineHeight: 1.7, margin: '0 0 22px' }}>Established as TS Haus Limited in 2023, the company later rebranded as Herons—an identity created for a more refined and personal approach to furnished stays in London.</p>
          <p style={{ fontSize: 17, lineHeight: 1.75, margin: 0, color: 'var(--ink-72)' }}>Herons was founded by Mustafa Hussam, who brings ten years of industry experience. Before founding the business, Mustafa worked with ultra-high-net-worth clients in a variety of roles, building a broad understanding of guests, properties and the details that make a stay feel effortless.</p>
          <div className="about-facts" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--stone)', marginTop: 48, border: '1px solid var(--stone)' }}>
            {[['2023', 'Established'], ['10 years', 'Industry experience'], ['London', 'Our home']].map(([value, label]) => <div key={label} style={{ background: 'var(--ivory)', padding: '26px 20px' }}><div style={{ fontFamily: 'var(--font-serif)', fontSize: 28, color: 'var(--midnight)' }}>{value}</div><div style={{ marginTop: 8, fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--ink-64)' }}>{label}</div></div>)}
          </div>
        </div>
      </div>
    </section>

    <section className="team-section" style={{ background: 'var(--white)', padding: '112px 0 120px' }}>
      <div style={pg}>
        <div className="team-heading" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
          <SectionHeading eyebrow="The people behind Herons" title="Meet the team" />
          <p style={{ margin: 0, maxWidth: 520, justifySelf: 'end', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-72)' }}>A small, experienced team bringing together guest service, property expertise, new business and careful day-to-day coordination.</p>
        </div>
        <div className="team-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: '56px 24px', marginTop: 64 }}>
          {team.map(([name, role, image]) => <article key={name}>
            <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--ivory)' }}><img src={I + 'headshots/' + image} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} /></div>
            <div style={{ borderTop: '1px solid var(--stone)', marginTop: 16, paddingTop: 15 }}><h3 style={{ fontSize: 22, margin: 0 }}>{name}</h3><p style={{ margin: '7px 0 0', fontSize: 11, letterSpacing: '.17em', textTransform: 'uppercase', color: 'var(--ink-64)' }}>{role}</p></div>
          </article>)}
        </div>
        <div style={{ borderTop: '1px solid var(--stone)', marginTop: 88, paddingTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}><h2 style={{ fontSize: 32, margin: 0 }}>Speak with the Herons team</h2><Button onClick={() => go('enquire')}>Contact us</Button></div>
      </div>
    </section>
  </main>;
}

function CorporatePage({ go }) {
  const { E } = window.HERONS_DATA;
  const needs = [
    ['Relocations', 'A comfortable base while an employee settles into London, with practical support throughout the move.'],
    ['Project teams', 'Flexible furnished residences for consultants, contractors and teams working in the capital.'],
    ['Executive travel', 'Discreet, well-positioned homes for senior leaders and frequent business travellers.'],
    ['Extended assignments', 'Considered accommodation for stays that need more space, privacy and ease than a hotel.'],
  ];
  return <main className="corporate-page" style={{ paddingTop: 68, background: 'var(--ivory)' }}>
    <section className="corporate-hero" style={{ position: 'relative', minHeight: 680, display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: 'var(--midnight)' }}>
      <img src={E + 'ZYtrbwaBGECfHQ4nffPNJN-2560-80.webp'} alt="A furnished London residence for corporate stays" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg,rgba(15,31,40,.9) 0%,rgba(15,31,40,.56) 48%,rgba(15,31,40,.08) 100%)' }} />
      <div className="corporate-hero-copy" style={{ ...pg, position: 'relative', width: '100%', paddingBottom: 96 }}>
        <div style={{ maxWidth: 720 }}><Eyebrow tone="light">Corporate stays</Eyebrow><h1 style={{ color: 'var(--ivory)', fontSize: 'var(--fs-hero)', margin: '24px 0 26px' }}>London accommodation, quietly handled</h1><p style={{ color: 'var(--ivory-72)', fontSize: 19, lineHeight: 1.7, maxWidth: 620, margin: '0 0 34px' }}>Furnished residences for relocations, executive travel and project stays, with one personal representative from enquiry to departure.</p><Button variant="light" size="lg" onClick={() => go('enquire', 'corporate')}>Discuss your requirements</Button></div>
      </div>
    </section>

    <section className="corporate-intro" style={{ ...pg, padding: '112px var(--page-gutter)' }}>
      <div className="corporate-intro-grid" style={{ display: 'grid', gridTemplateColumns: '.75fr 1.25fr', gap: 104, alignItems: 'start' }}>
        <div><Eyebrow>For organisations</Eyebrow><h2 style={{ fontSize: 'var(--fs-h2)', margin: '24px 0 0' }}>A residence that works around the assignment</h2></div>
        <div><p style={{ fontFamily: 'var(--font-serif)', fontSize: 28, lineHeight: 1.45, margin: '0 0 28px', color: 'var(--midnight)' }}>A well-chosen home gives employees the space and privacy to settle quickly and focus on the work ahead.</p><p style={{ fontSize: 17, lineHeight: 1.75, margin: 0, color: 'var(--ink-72)' }}>Herons coordinates furnished apartments across London for companies, relocation professionals and private offices. Share the location, dates and guest requirements; we will identify suitable residences and remain available throughout the stay.</p></div>
      </div>
    </section>

    <section className="corporate-needs" style={{ background: 'var(--white)', padding: '104px 0' }}>
      <div style={pg}><SectionHeading eyebrow="Every requirement is different" title="Stays shaped around your people" />
        <div className="corporate-needs-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', borderTop: '1px solid var(--stone)', borderLeft: '1px solid var(--stone)', marginTop: 52 }}>
          {needs.map(([title, body], index) => <article key={title} style={{ minHeight: 250, padding: 42, borderRight: '1px solid var(--stone)', borderBottom: '1px solid var(--stone)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}><span style={{ fontSize: 11, letterSpacing: '.2em', color: 'var(--brass)', textTransform: 'uppercase' }}>0{index + 1}</span><div><h3 style={{ fontSize: 28, margin: '36px 0 14px' }}>{title}</h3><p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-72)', margin: 0, maxWidth: 480 }}>{body}</p></div></article>)}
        </div>
      </div>
    </section>

    <section className="corporate-service" style={{ ...pg, padding: '112px var(--page-gutter)' }}>
      <div className="corporate-service-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 80, alignItems: 'stretch' }}>
        <div style={{ minHeight: 560, overflow: 'hidden' }}><img src={E + 'interior-design-st-johns-wood-photo-1.webp'} alt="A thoughtfully furnished residence" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
        <div style={{ background: 'var(--midnight)', color: 'var(--ivory)', padding: '64px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}><Eyebrow tone="light">One point of contact</Eyebrow><h2 style={{ color: 'var(--ivory)', fontSize: 'var(--fs-h2)', margin: '24px 0 32px' }}>Personal service, without the noise</h2>{[['01', 'Tell us what is needed'], ['02', 'Review suitable residences'], ['03', 'We coordinate the stay']].map(([n, label]) => <div key={n} style={{ display: 'grid', gridTemplateColumns: '44px 1fr', gap: 18, padding: '20px 0', borderTop: '1px solid var(--ivory-16)' }}><span style={{ color: 'var(--brass-light)', fontSize: 11 }}>{n}</span><span style={{ fontFamily: 'var(--font-serif)', fontSize: 21 }}>{label}</span></div>)}</div>
      </div>
    </section>

    <section style={{ background: 'var(--white)', padding: '96px var(--page-gutter)', textAlign: 'center' }}><div style={{ maxWidth: 760, margin: '0 auto' }}><Eyebrow align="center">Corporate enquiries</Eyebrow><h2 style={{ fontSize: 'var(--fs-h2)', margin: '24px 0 20px' }}>Tell us what your team needs</h2><p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-72)', margin: '0 0 32px' }}>Share the preferred area, dates and number of guests. A Herons representative will respond personally.</p><Button size="lg" onClick={() => go('enquire', 'corporate')}>Make an enquiry</Button></div></section>
  </main>;
}

function RelocationsPage({ go }) {
  const { E } = window.HERONS_DATA;
  const stages = [
    ['01', 'Understand the move', 'We begin with the location, timing, household and the practical details that matter to daily life.'],
    ['02', 'Choose the right residence', 'We present suitable furnished homes with clear information, so the decision feels straightforward.'],
    ['03', 'Prepare for arrival', 'Your representative coordinates the stay and shares the information needed before check-in.'],
    ['04', 'Settle in with confidence', 'We remain a consistent point of contact throughout the stay and when plans evolve.'],
  ];
  return <main className="relocations-page" style={{ paddingTop: 68, background: 'var(--ivory)' }}>
    <section className="relocation-hero" style={{ ...pg, display: 'grid', gridTemplateColumns: '.9fr 1.1fr', minHeight: 680, paddingTop: 72, paddingBottom: 72, gap: 80, alignItems: 'center' }}>
      <div><Eyebrow>Relocations</Eyebrow><h1 style={{ fontSize: 'var(--fs-hero)', margin: '24px 0 28px', maxWidth: 650 }}>A calmer arrival in London</h1><p style={{ fontSize: 19, lineHeight: 1.7, color: 'var(--ink-72)', maxWidth: 590, margin: '0 0 34px' }}>Thoughtfully furnished residences for individuals, families and employees moving to London, with personal guidance from the first search through to settling in.</p><Button size="lg" onClick={() => go('enquire', 'relocation')}>Plan a relocation</Button></div>
      <div className="relocation-hero-image" style={{ height: 560, overflow: 'hidden' }}><img src={E + 'c3e316d0-0191-4d6f-ac3a-40ecbdae2fba-0.webp'} alt="A London residential building" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div>
    </section>

    <section style={{ background: 'var(--midnight)', color: 'var(--ivory)', padding: '104px 0' }}><div style={pg}><div className="relocation-statement" style={{ display: 'grid', gridTemplateColumns: '.8fr 1.2fr', gap: 96 }}><Eyebrow tone="light">More than a place to stay</Eyebrow><div><h2 style={{ color: 'var(--ivory)', fontSize: 'var(--fs-h2)', margin: '0 0 28px' }}>A home base while everything else changes</h2><p style={{ color: 'var(--ivory-72)', fontSize: 18, lineHeight: 1.75, margin: 0, maxWidth: 740 }}>A relocation comes with countless decisions. Herons makes the accommodation part feel considered and clear—matching the household with a well-positioned residence and providing one personal representative throughout.</p></div></div></div></section>

    <section className="relocation-journey" style={{ ...pg, padding: '112px var(--page-gutter)' }}><SectionHeading eyebrow="The relocation journey" title="Considered at every stage" /><div className="relocation-stages" style={{ marginTop: 56, borderTop: '1px solid var(--stone)' }}>{stages.map(([n, title, body]) => <article key={n} style={{ display: 'grid', gridTemplateColumns: '80px .7fr 1.3fr', gap: 36, padding: '32px 0', borderBottom: '1px solid var(--stone)', alignItems: 'start' }}><span style={{ color: 'var(--brass)', fontSize: 12, letterSpacing: '.18em' }}>{n}</span><h3 style={{ fontSize: 25, margin: 0 }}>{title}</h3><p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-72)', margin: 0, maxWidth: 620 }}>{body}</p></article>)}</div></section>

    <section className="relocation-feature" style={{ background: 'var(--white)', padding: '104px 0' }}><div className="relocation-feature-grid" style={{ ...pg, display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 88, alignItems: 'center' }}><div style={{ height: 600, overflow: 'hidden' }}><img src={E + 'PENTHOUSE_BEDROOM_FINAL_HJ.webp'} alt="A furnished bedroom prepared for arrival" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div><div><Eyebrow>Ready for arrival</Eyebrow><h2 style={{ fontSize: 'var(--fs-h2)', margin: '24px 0 28px' }}>Space to land, pause and begin</h2><p style={{ fontSize: 18, lineHeight: 1.75, margin: '0 0 28px' }}>The right residence creates breathing room at the start of a move. Space to unpack, establish a routine and get to know the neighbourhood without compromising on privacy or comfort.</p><div style={{ borderTop: '1px solid var(--stone)' }}>{['Individuals and executives', 'Couples and families', 'International and domestic moves', 'Short-term housing between homes'].map((item) => <div key={item} style={{ padding: '16px 0', borderBottom: '1px solid var(--stone)', fontSize: 15 }}>{item}</div>)}</div></div></div></section>

    <section className="relocation-support" style={{ ...pg, padding: '112px var(--page-gutter)' }}><div style={{ background: 'var(--midnight)', color: 'var(--ivory)', display: 'grid', gridTemplateColumns: '1fr 1fr' }} className="relocation-support-grid"><div style={{ padding: '72px 64px' }}><Eyebrow tone="light">Discreet service</Eyebrow><h2 style={{ color: 'var(--ivory)', fontSize: 'var(--fs-h2)', margin: '24px 0 24px' }}>One representative, throughout</h2><p style={{ color: 'var(--ivory-72)', fontSize: 17, lineHeight: 1.75, margin: 0 }}>From an initial shortlist to questions during the stay, there is one consistent person who understands the relocation and can respond personally.</p></div><div style={{ minHeight: 440, overflow: 'hidden' }}><img src={E + 'AS106842__1_.webp'} alt="Private chauffeur service in London" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></div></div></section>

    <section style={{ background: 'var(--white)', padding: '96px var(--page-gutter)', textAlign: 'center' }}><div style={{ maxWidth: 760, margin: '0 auto' }}><Eyebrow align="center">Relocation enquiries</Eyebrow><h2 style={{ fontSize: 'var(--fs-h2)', margin: '24px 0 20px' }}>Tell us about the move</h2><p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-72)', margin: '0 0 32px' }}>Share the preferred location, arrival date and household requirements. A Herons representative will respond personally.</p><Button size="lg" onClick={() => go('enquire', 'relocation')}>Start a conversation</Button></div></section>
  </main>;
}

const legalPages = {
  privacy: {
    eyebrow: 'Your information', title: 'Privacy notice', updated: 'Last updated 22 October 2026',
    intro: 'RENTSMITH LTD, trading as Herons, is responsible for the personal information described in this notice.',
    sections: [
      ['Information we collect', 'We may collect your name, contact details, stay requirements, enquiry messages, booking and payment details, identity or check-in information, correspondence, and technical information about how you use this website.'],
      ['How we use it', 'We use personal information to answer enquiries, arrange and manage stays, take payments, provide check-in and guest support, keep our properties secure, meet legal obligations, prevent fraud, improve our service and—where permitted—send relevant marketing.'],
      ['Our lawful bases', 'Depending on the activity, we process information to take steps at your request or perform a contract, comply with legal obligations, pursue legitimate interests such as operating and protecting our service, or where you have given consent.'],
      ['Who we share it with', 'We may share information only as needed with property operators, payment and booking providers, identity or security providers, technology suppliers, professional advisers and public authorities. Some providers may process information outside the UK using appropriate safeguards.'],
      ['How long we keep it', 'We keep information only for as long as needed for the purpose collected, including legal, accounting, safety and dispute-resolution requirements. Retention periods vary by record type.'],
      ['Your rights', 'UK data protection law may give you rights to access, correct, erase or restrict your information, object to processing, request portability and withdraw consent. You may also complain to the Information Commissioner’s Office at ico.org.uk.'],
      ['Contact us', 'To ask a privacy question or exercise your rights, use the enquiry form and mark your message “Privacy”. Our registered office details appear below.']
    ]
  },
  terms: {
    eyebrow: 'Website information', title: 'Website terms', updated: 'Last updated 22 October 2026',
    intro: 'These terms apply when you browse and use the Herons website operated by RENTSMITH LTD.',
    sections: [
      ['Using this website', 'You may use this website for lawful personal or business enquiries. You must not misuse it, interfere with its operation, attempt unauthorised access or use its content in a misleading or unlawful way.'],
      ['Property information', 'Descriptions, photographs, availability and indicative prices are provided for general information and may change. A stay is not confirmed until the applicable booking terms have been accepted and confirmation has been issued.'],
      ['Bookings', 'Any booking-specific price, cancellation terms, deposit, house rules and other conditions presented during booking or in your confirmation form part of your agreement. If they conflict with these website terms, the booking-specific terms take priority for that stay.'],
      ['Intellectual property', 'The website design, text, photographs, branding and other content belong to RENTSMITH LTD or its licensors. They may not be copied, republished or commercially exploited without permission.'],
      ['Liability', 'We take reasonable care with this website but do not promise uninterrupted access or that every item will always be current. Nothing in these terms excludes liability where it would be unlawful to do so.'],
      ['Law', 'These terms are governed by the laws of England and Wales. The courts of England and Wales will have jurisdiction, subject to any mandatory consumer rights that apply.']
    ]
  },
  cookies: {
    eyebrow: 'Website settings', title: 'Cookie notice', updated: 'Last updated 22 October 2026',
    intro: 'This notice explains how the Herons website uses cookies and similar browser technologies.',
    sections: [
      ['What cookies are', 'Cookies are small files or browser records used to operate websites, remember choices, understand usage and support embedded services.'],
      ['Essential storage', 'We may use essential browser storage to remember your route or booking search and to keep the website functioning. This cannot always be switched off through our site.'],
      ['Third-party services', 'Embedded booking tools and externally hosted website components may set or read their own cookies. Their use is governed by the relevant provider’s privacy and cookie information.'],
      ['Your choices', 'You can remove or block cookies in your browser settings. Blocking essential storage may affect parts of the website. We will request consent before using non-essential analytics or advertising cookies where required.'],
      ['Changes', 'We may update this notice when our website or service providers change. The date above shows the latest revision.']
    ]
  },
  complaints: {
    eyebrow: 'Here to help', title: 'Complaints', updated: 'Last updated 22 October 2026',
    intro: 'We want every Herons stay and interaction to feel considered. If something has gone wrong, please tell us so we can put it right.',
    sections: [
      ['How to complain', 'Use our enquiry form and select the most relevant enquiry type. Include your name, booking reference where applicable, the property, what happened and the outcome you are seeking. Mark the message “Complaint”.'],
      ['What happens next', 'We will acknowledge your complaint, investigate it fairly and keep you informed. We aim to provide a clear response as soon as reasonably possible; more complex matters may take longer.'],
      ['During a stay', 'For an urgent issue affecting your current stay or safety, use the contact details supplied in your booking or check-in information so the on-stay team can respond promptly.'],
      ['Escalation', 'If you are unhappy with our response, ask for the complaint to be reviewed and explain what remains unresolved. Any external redress options that apply to your particular booking will be identified in the relevant booking terms.']
    ]
  }
};

function LegalPage({ go, id }) {
  const page = legalPages[id] || legalPages.privacy;
  return <main style={{ paddingTop: 68, background: 'var(--ivory)' }}>
    <section style={{ maxWidth: 920, margin: '0 auto', padding: '96px var(--page-gutter) 120px' }}>
      <Eyebrow>{page.eyebrow}</Eyebrow>
      <h1 style={{ fontSize: 'var(--fs-h1)', margin: '18px 0 12px' }}>{page.title}</h1>
      <div style={{ fontSize: 13, color: 'var(--ink-64)', marginBottom: 36 }}>{page.updated}</div>
      <p style={{ fontSize: 20, lineHeight: 1.65, margin: '0 0 52px', maxWidth: 760 }}>{page.intro}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
        {page.sections.map(([heading, body]) => <section key={heading} style={{ borderTop: '1px solid var(--stone)', paddingTop: 24 }}>
          <h2 style={{ fontSize: 26, margin: '0 0 12px' }}>{heading}</h2>
          <p style={{ fontSize: 16, lineHeight: 1.75, margin: 0, maxWidth: 780 }}>{body}</p>
        </section>)}
      </div>
      <aside style={{ marginTop: 56, padding: 28, background: 'var(--white)', border: '1px solid var(--stone)', lineHeight: 1.7 }}>
        <strong>RENTSMITH LTD, trading as Herons</strong><br />Company number 17392802<br />Registered in England and Wales<br />Registered office: Unit 3, International House, 1100 Great West Road, Brentford, TW8 0GP
        <div style={{ marginTop: 18 }}><Button variant="secondary" onClick={() => go('enquire')}>Contact Herons</Button></div>
      </aside>
    </section>
  </main>;
}

function NewsletterCard({ article, go }) {
  return <article className="newsletter-card" onClick={() => go('article', article.id)}>
    <div className="newsletter-card-image"><img src={article.image} alt="" /></div>
    <div className="newsletter-card-copy"><div className="newsletter-meta">{article.tag}</div><h3>{article.title}</h3><time>{article.date}</time></div>
  </article>;
}

function NewsletterPage({ go }) {
  const { newsletterSections, I } = window.HERONS_DATA;
  const [active, setActive] = React.useState('All stories');
  const visible = active === 'All stories' ? newsletterSections : newsletterSections.filter((s) => s.title === active);
  return <main className="newsletter-page" style={{ paddingTop: 68 }}>
    <section className="newsletter-hero">
      <img src={I + 'dining-library.webp'} alt="A thoughtfully furnished Herons interior" />
      <div className="newsletter-hero-scrim" />
      <div className="newsletter-hero-copy"><Eyebrow>Ideas for London living</Eyebrow><h1>Heron’s <span>Newsletter</span></h1><p>Practical guidance, neighbourhood notes and considered perspectives on renting and living well in London.</p></div>
    </section>
    <div className="newsletter-shell">
      <aside className="newsletter-categories" aria-label="Newsletter categories">
        {['All stories', ...newsletterSections.map((s) => s.title)].map((name) => <button key={name} className={active === name ? 'active' : ''} onClick={() => setActive(name)}>{name}</button>)}
      </aside>
      <div className="newsletter-content">
        {visible.map((section) => {
          const [lead, ...rest] = section.articles;
          return <section className="newsletter-section" key={section.title}>
            <div className="newsletter-section-heading"><h2>{section.title}</h2><button onClick={() => setActive(section.title)}>View category <Icon name="arrow-right" size={16} /></button></div>
            <article className="newsletter-lead" onClick={() => go('article', lead.id)}>
              <div className="newsletter-lead-image"><img src={lead.image} alt="" /></div>
              <div className="newsletter-lead-copy"><div className="newsletter-meta">{lead.tag}</div><h3>{lead.title}</h3><time>{lead.date}</time><p>{lead.excerpt}</p><Button variant="text">Read article</Button></div>
            </article>
            <div className="newsletter-grid">{rest.map((article) => <NewsletterCard key={article.id} article={article} go={go} />)}</div>
          </section>;
        })}
      </div>
    </div>
  </main>;
}

function NewsletterArticlePage({ go, id }) {
  const { newsletterSections } = window.HERONS_DATA;
  const all = newsletterSections.flatMap((section) => section.articles);
  const article = all.find((item) => item.id === id) || all[0];
  const body = article.body || [article.excerpt, 'Every home and tenancy is different. Take time to consider the practical details, ask clear questions and keep a written record of the information that matters to your decision.', 'Herons brings together useful guidance and a considered view of London living. Contact our team if you would like to discuss a property or your plans.'];
  return <main className="article-page" style={{ paddingTop: 68 }}>
    <div className="article-back"><button onClick={() => go('newsletter')}><Icon name="chevron-left" size={16} />Heron’s Newsletter</button></div>
    <header className="article-header"><div className="newsletter-meta">{article.tag}</div><h1>{article.title}</h1><time>{article.date}</time><p>{article.excerpt}</p></header>
    <div className="article-hero-image"><img src={article.image} alt="" /></div>
    <article className="article-body">{body.map((paragraph, index) => <p key={index}>{paragraph}</p>)}<aside><Eyebrow>Talk to Herons</Eyebrow><h2>Planning your next move?</h2><p>Tell us what you are looking for and we will help you find a suitable London home.</p><Button onClick={() => go('enquire')}>Contact us</Button></aside></article>
  </main>;
}

Object.assign(window, { ResidencesPage, ResidencePage, EnquirePage, AboutPage, CorporatePage, RelocationsPage, LegalPage, NewsletterPage, NewsletterArticlePage });

})();