(() => {
const { Button, IconButton, SectionHeading, Tabs, ImageTile, JournalCard, PromoPanel, Icon, AvailabilityBar } = window.HeronsDesignSystem_c1fb00;
const wrap = { maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-gutter)' };

// Self-contained hero. `children` / `overlay` is the hook for a future scroll animation.
function Hero({ image, overlay }) {
  return (
    <section data-hero style={{ position: 'relative', height: '100vh', minHeight: 640, maxHeight: 960, overflow: 'hidden', background: 'var(--midnight)' }}>
      <img src={image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(15,31,40,0) 50%,rgba(15,31,40,.71) 100%)' }} />
      {overlay}
      <div className="hero-copy" style={{ ...wrap, position: 'absolute', left: 0, right: 0, bottom: 150, color: 'var(--ivory)' }}>
        <h1 style={{ fontSize: 'var(--fs-hero)', lineHeight: 1.1, color: 'var(--ivory)', maxWidth: 900 }}>Your London Residence<br />Quietly considered.</h1>
      </div>
    </section>
  );
}

function Positioning() {
  return (
    <section id="approach" className="approach-section" style={{ padding: '120px 0', textAlign: 'center', background: 'var(--white)', borderBottom: '1px solid var(--stone)' }}>
      <div style={{ ...wrap, maxWidth: 820 }}>
        <SectionHeading align="center" eyebrow="Our approach" title="Thoughtfully furnished apartments, discreet service."
          intro="Herons provides furnished London apartments for relocations, corporate and mid-term stays, with a personal representative throughout." />
      </div>
    </section>
  );
}

function StayEssentials() {
  const items = [
    ['key-round', 'Ready for arrival', 'Thoughtfully furnished homes with practical details prepared before check-in.'],
    ['briefcase', 'Made for longer stays', 'Comfortable spaces for work, relocation, family time and extended visits.'],
    ['concierge-bell', 'Personal support', 'A Herons contact from your first enquiry through to departure.'],
  ];
  return (
    <section className="essentials-section" style={{ background: 'var(--midnight)', color: 'var(--ivory)', padding: '88px 0' }}>
      <div style={wrap}>
        <SectionHeading tone="light" eyebrow="Your stay" title="The essentials, thoughtfully handled" />
        <div className="essentials-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 0, marginTop: 44, borderTop: '1px solid var(--ivory-16)' }}>
          {items.map(([icon, title, body], i) => <div key={title} style={{ padding: '32px 32px 0', paddingLeft: i ? 32 : 0, borderLeft: i ? '1px solid var(--ivory-16)' : 0 }}><Icon name={icon} size={22} color="var(--brass-light)" /><h3 style={{ color: 'var(--ivory)', fontSize: 24, margin: '20px 0 10px' }}>{title}</h3><p style={{ color: 'var(--ivory-72)', margin: 0, lineHeight: 1.6 }}>{body}</p></div>)}
        </div>
      </div>
    </section>
  );
}

function Spotlight({ go }) {
  const { residences, categories } = window.HERONS_DATA;
  const [cat, setCat] = React.useState('All');
  const track = React.useRef(null);
  const list = residences.filter((r) => cat === 'All' || r.category === cat);
  const scroll = (d) => track.current && track.current.scrollBy({ left: d * 404, behavior: 'smooth' });
  const openListing = (residence) => {
    if (residence.bookingUrl) window.location.href = residence.bookingUrl;
    else go('residence', residence.id);
  };
  return (
    <section className="spotlight-section" style={{ padding: '96px 0 104px', overflow: 'hidden', background: 'var(--ivory)' }}>
      <div style={wrap}>
        <SectionHeading eyebrow="In the spotlight" title="Featured residences" action={<div style={{ display: 'flex', gap: 10 }}><IconButton icon="chevron-left" label="Previous" onClick={() => scroll(-1)} /><IconButton icon="chevron-right" label="Next" onClick={() => scroll(1)} /></div>} />
        <div className="spotlight-tabs"><Tabs items={categories} value={cat} onChange={setCat} style={{ marginTop: 36 }} /></div>
        <div className="spotlight-track" ref={track} style={{ display: 'flex', gap: 24, overflowX: 'auto', scrollSnapType: 'x mandatory', padding: '32px 0 8px', scrollbarWidth: 'none' }}>
          {list.map((r) => (
            <article key={r.id} onClick={() => openListing(r)} style={{ flex: '0 0 calc((100% - 48px) / 3)', minWidth: 0, scrollSnapAlign: 'start', cursor: 'pointer', background: 'var(--white)' }}>
              <div style={{ aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--stone)' }}>
                <img src={r.images[0]} alt={`${r.type} in ${r.area}`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div style={{ padding: '22px 22px 24px' }}>
                <div style={{ fontSize: 11, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--ink-64)' }}>{r.type}</div>
                <div style={{ height: 78 }}>
                  <h3 style={{ fontSize: 25, lineHeight: 1.2, margin: '10px 0 8px' }}>{r.name}{r.postcode && <><br />{r.postcode}</>}</h3>
                </div>
                <div style={{ display: 'flex', gap: 22, padding: '16px 0', borderTop: '1px solid var(--stone)', borderBottom: '1px solid var(--stone)', fontSize: 14 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name="bed-double" size={18} />{r.beds} bedrooms</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon name={r.rent ? 'bath' : 'users'} size={18} />{r.rent ? `${r.baths} bathrooms` : `Up to ${r.guests}`}</span>
                </div>
                <div style={{ minHeight: 48, marginTop: 18, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                  {r.rate && <span style={{ fontSize: 14, color: 'var(--ink-64)' }}>From <strong style={{ color: 'var(--midnight)', fontWeight: 600 }}>£{r.rate}</strong> per night</span>}
                  <Button variant="text" onClick={(e) => { e.stopPropagation(); openListing(r); }} style={{ marginLeft: r.rate ? 'auto' : 0 }}>{r.rent ? 'View property' : 'View & book'}</Button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <div style={{ textAlign: 'center', marginTop: 40 }}><Button variant="secondary" onClick={() => go('residences')}>View all residences</Button></div>
    </section>
  );
}

function Locations({ go }) {
  const { locations } = window.HERONS_DATA;
  return (
    <section className="locations-section" style={{ background: 'var(--white)', padding: '104px 0' }}>
      <div style={wrap}>
        <SectionHeading eyebrow="Locations" title="Furnished apartments across central London" />
        <div className="locations-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 16, marginTop: 44 }}>
          {locations.map((l) => <ImageTile key={l.name} image={l.image} title={l.name} cta="View residences" onClick={() => go('residences')} />)}
        </div>
      </div>
    </section>
  );
}

function CuratedStays({ go }) {
  const { I } = window.HERONS_DATA;
  const r = [
    { id: 'signature-knightsbridge', type: 'Penthouse', area: 'Knightsbridge, SW1', image: I + 'penthouse-terrace-sunset.webp' },
    { id: 'signature-marylebone', type: 'Apartment', area: 'Marylebone, W1', image: I + 'dining-shelving-warm.webp' },
    { id: 'signature-kensington', type: 'Townhouse', area: 'Kensington, W8', image: I + 'dining-library.webp' }
  ];
  return (
    <section className="signature-section" style={{ padding: '104px 0' }}>
      <div style={wrap}>
        <div className="signature-heading" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'end', gap: 48 }}>
          <SectionHeading eyebrow="Curated stays" title="Signature residences" />
          <p style={{ justifySelf: 'end', maxWidth: 390, margin: 0, fontSize: 15, lineHeight: 1.7, color: 'var(--ink-64)' }}>A considered collection of London homes, selected for their setting, character and sense of place.</p>
        </div>
        <div className="signature-gallery" style={{ display: 'grid', gridTemplateColumns: '1.05fr .78fr 1.12fr', gap: 38, alignItems: 'start', marginTop: 68 }}>
          {r.map((x, i) => (
            <figure key={x.id} className={`signature-art signature-art-${i + 1}`} onClick={() => go('residences')} style={{ margin: 0, cursor: 'pointer', paddingTop: i === 1 ? 104 : i === 2 ? 34 : 0 }}>
              <div style={{ overflow: 'hidden', background: 'var(--stone)', aspectRatio: i === 0 ? '4 / 5' : i === 1 ? '3 / 4' : '4 / 5' }}>
                <img src={x.image} alt={`${x.type} in ${x.area}`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform var(--dur-zoom) var(--ease-calm)' }} />
              </div>
              <figcaption style={{ display: 'flex', justifyContent: 'space-between', gap: 18, paddingTop: 14, borderTop: '1px solid var(--stone)', marginTop: 12 }}>
                <span style={{ fontSize: 11, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--ink-64)' }}>No. {String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 17, color: 'var(--midnight)', textAlign: 'right' }}>{x.area.split(',')[0]}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Partners({ go }) {
  const { I } = window.HERONS_DATA;
  return (
    <section className="partners-section" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <PromoPanel image={I + 'chauffeur-red-brick.webp'} eyebrow="Travel in comfort" title="Luxury chauffeur service" body="From airport arrivals to evenings across London, arrange a private chauffeur for a calm, discreet journey to your residence and beyond." cta="Arrange a chauffeur" onCta={() => go('enquire')} />
      <PromoPanel align="right" image={I + 'stone-mansion-block.webp'} eyebrow="For property owners" title="Well-presented homes, carefully managed" body="We work with property owners to provide well-presented furnished accommodation, managing the property and coordinating suitable stays." cta="Work with us" onCta={() => go('enquire')} />
    </section>
  );
}

function Experiences({ go }) {
  const { experiences } = window.HERONS_DATA;
  const openExperience = (title) => {
    if (title === 'Relocations') go('relocations');
    if (title === 'Corporate residences') go('corporate');
  };
  return (
    <section className="experiences-section" style={{ padding: '104px 0' }}>
      <div style={wrap}>
        <SectionHeading align="center" eyebrow="Stays" title="A stay to suit every need" />
        <div className="experiences-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 16, marginTop: 44 }}>
          {experiences.map((e) => <ImageTile key={e.title} image={e.image} title={e.title} ratio="3 / 2" size="sm" cta={(e.title === 'Relocations' || e.title === 'Corporate residences') ? 'Discover more' : 'Explore'} onClick={() => openExperience(e.title)} />)}
        </div>
      </div>
    </section>
  );
}

function Journal({ go }) {
  const { journal } = window.HERONS_DATA;
  return (
    <section className="journal-section" style={{ background: 'var(--white)', padding: '104px 0' }}>
      <div style={wrap}>
        <SectionHeading eyebrow="Heron’s Newsletter" title="Notes on London" action={<Button variant="text" onClick={() => go('newsletter')}>View more</Button>} />
        <div className="journal-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 24, marginTop: 44 }}>
          {journal.map((j) => <JournalCard key={j.title} {...j} onClick={() => go('newsletter')} />)}
        </div>
      </div>
    </section>
  );
}

function HomePage({ go, book, scrollY }) {
  const { I } = window.HERONS_DATA;
  return (
    <main>
      <Hero image={I + 'hero.png'} />
      <div className="availability-shell guesty-shell" style={{ ...wrap, position: 'relative', zIndex: 5, marginTop: -64 }}>
        <AvailabilityBar onSubmit={(query) => book({ ...query, source: 'home-search' })} />
      </div>
      <Positioning />
      <Spotlight go={go} />
      <Locations go={go} />
      <StayEssentials />
      <CuratedStays go={go} />
      <Partners go={go} />
      <Experiences go={go} />
      <Journal go={go} />
    </main>
  );
}

Object.assign(window, { HomePage, Hero });

})();