// Home page

function HeroSplit({ openBook, hero }) {
  return (
    <section className="relative">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10 pt-8 md:pt-12">
        <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
          <div className="lg:col-span-7 pt-4 lg:pt-10">
            <div className="flex items-center gap-3 mb-7">
              <span className="num text-teal text-[22px]">01</span>
              <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">An aparthotel · not a resort</span>
            </div>
            <h1 className="font-display text-[56px] md:text-[88px] lg:text-[104px]">
              A real apartment
              <br/>
              in <span className="text-teal">Tecom</span>,
              <br/>
              five minutes
              <br/>
              from the Metro.
            </h1>
            <p className="mt-8 text-[17px] md:text-[19px] text-ink-soft max-w-[48ch] leading-snug">
              Full kitchen. In-unit laundry. A rate that gets better the longer you stay. Most of our guests stay around <span className="num text-teal text-[20px]">eight</span> nights — that&rsquo;s how we&rsquo;re built.
            </p>

            <div className="mt-10 grid grid-cols-3 gap-6 md:gap-10 max-w-[640px]">
              <Stat value="159" label="Apartments" size="sm"/>
              <Stat value="5" unit="min" label="To the Metro" size="sm"/>
              <Stat value="8" unit="nights" label="Average stay" size="sm"/>
            </div>

            <div className="mt-10 flex flex-wrap items-center gap-3">
              <a href="#long-stay" onClick={(e) => { e.preventDefault(); window.__route('long-stay'); }}
                 className="inline-flex items-center gap-2 px-4 py-2.5 border hairline text-[13.5px] hover:bg-sand transition rounded-full">
                See long-stay rates <Icon name="arrow" className="w-3.5 h-3.5"/>
              </a>
              <span className="mono text-[11px] ink-soft">or</span>
              <button onClick={openBook} className="inline-flex items-center gap-2 px-4 py-2.5 bg-ink text-cream rounded-full text-[13.5px] hover:bg-teal-dark transition">
                Book direct <Icon name="arrow" className="w-3.5 h-3.5"/>
              </button>
            </div>
          </div>
          <div className="lg:col-span-5 lg:pt-6">
            <BookingWidget variant="hero" onBookClick={() => window.__route('apartments')}/>
          </div>
        </div>
      </div>

      {/* Bottom photo strip */}
      <div className="max-w-[1320px] mx-auto px-6 md:px-10 mt-16 md:mt-24">
        <div className="grid grid-cols-12 gap-3 md:gap-4 h-[260px] md:h-[420px]">
          {hero === 'photo' ? (
            <>
              <div className="col-span-5 overflow-hidden">
                <Placeholder label="Kitchen-in-use, kettle on, fruit on counter" sub="The single most-requested reshoot frame." className="w-full h-full"/>
              </div>
              <div className="col-span-4 overflow-hidden warm-photo">
                <img src="assets/family-suite.jpg" alt="Family suite living-and-dining area" className="w-full h-full object-cover"/>
              </div>
              <div className="col-span-3 overflow-hidden">
                <Placeholder label="In-unit washer-dryer · door open" sub="Crop tight on the laundry door." className="w-full h-full" tone="dim"/>
              </div>
            </>
          ) : (
            <>
              <div className="col-span-6 overflow-hidden warm-photo">
                <img src="assets/studio.jpg" alt="Studio apartment interior" className="w-full h-full object-cover"/>
              </div>
              <div className="col-span-3 overflow-hidden">
                <Placeholder label="In-unit washer-dryer · door open" sub="Tight crop." className="w-full h-full" tone="dim"/>
              </div>
              <div className="col-span-3 overflow-hidden warm-photo">
                <img src="assets/pool.jpg" alt="Outdoor pool terrace" className="w-full h-full object-cover"/>
              </div>
            </>
          )}
        </div>
        <div className="mt-3 flex items-center justify-between mono text-[10.5px] tracking-[0.16em] uppercase ink-soft">
          <span>Studio · Family Suite · Pool Terrace</span>
          <span>Photography 2022 — reshoot pending</span>
        </div>
      </div>
    </section>
  );
}

function HeroFullbleed({ openBook }) {
  return (
    <section className="relative">
      <div className="relative h-[88vh] min-h-[640px] max-h-[920px] overflow-hidden">
        <div className="absolute inset-0 warm-photo">
          <img src="assets/studio.jpg" alt="Studio apartment" className="w-full h-full object-cover scale-105"/>
          <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-ink/30 to-transparent"></div>
          <div className="absolute inset-0 bg-gradient-to-r from-ink/40 via-transparent to-transparent"></div>
        </div>
        <div className="relative h-full max-w-[1320px] mx-auto px-6 md:px-10 flex flex-col justify-end pb-16 md:pb-24">
          <div className="grid lg:grid-cols-12 gap-8 items-end">
            <div className="lg:col-span-8 text-cream">
              <div className="flex items-center gap-3 mb-5 text-cream/80">
                <span className="num text-cream text-[22px]">01</span>
                <span className="mono text-[10.5px] tracking-[0.22em] uppercase">An aparthotel · not a resort</span>
              </div>
              <h1 className="font-display text-[56px] md:text-[88px] lg:text-[112px] text-cream">
                A real apartment in <span className="text-sand">Tecom</span>,<br/>
                five minutes from the Metro.
              </h1>
              <p className="mt-6 text-[18px] text-cream/85 max-w-[52ch] leading-snug">
                Full kitchen. In-unit laundry. A rate that gets better the longer you stay.
              </p>
            </div>
            <div className="lg:col-span-4">
              <BookingWidget variant="hero" onBookClick={() => window.__route('apartments')}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ openBook }) {
  return (
    <section className="relative">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10 pt-12 md:pt-20 pb-10">
        <div className="grid grid-cols-12 gap-6 items-end">
          <div className="col-span-12 lg:col-span-7">
            <div className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft mb-6">Aparthotel · Barsha Heights · 159 apartments</div>
            <h1 className="font-display text-[64px] md:text-[120px] lg:text-[160px]">
              <span className="block">A real</span>
              <span className="block text-teal -mt-2">apartment</span>
              <span className="block">in Tecom.</span>
            </h1>
          </div>
          <div className="col-span-12 lg:col-span-5">
            <div className="ph-stripes aspect-[3/4] relative warm-photo overflow-hidden">
              <img src="assets/studio-superior.jpg" alt="Apartment interior" className="w-full h-full object-cover"/>
            </div>
          </div>
        </div>
        <div className="mt-8 grid grid-cols-12 gap-6">
          <div className="col-span-12 lg:col-span-7">
            <p className="font-display text-[24px] md:text-[32px] max-w-[24ch]">
              Five minutes&rsquo; walk to the Metro. Full kitchen on the counter. In-unit laundry behind a door you can actually open. A rate that steps down after night seven.
            </p>
          </div>
          <div className="col-span-12 lg:col-span-5">
            <BookingWidget onBookClick={() => window.__route('apartments')}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ApartmentsTeaser() {
  return (
    <section className="section bg-sand/55" id="apartments-teaser">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-end mb-14">
          <div className="lg:col-span-7">
            <SectionLabel index="02" eyebrow="All six types · on the direct site for the first time">
              Six apartments, sized for how you actually stay.
            </SectionLabel>
          </div>
          <div className="lg:col-span-5">
            <p className="text-[15px] text-ink-soft leading-snug max-w-[45ch]">
              Studios for solo weeks. One-bedrooms for couples settling in. A 135 m² family flagship with two bedrooms, a full kitchen, and an in-unit washer-dryer. The two One-Bedroom types — long invisible on the direct site — are bookable here for the first time.
            </p>
            <a href="#apartments" onClick={(e) => { e.preventDefault(); window.__route('apartments'); }}
               className="mt-5 inline-flex items-center gap-2 text-[14px] text-teal hover:text-teal-dark">
              See all six side-by-side <Icon name="arrow" className="w-4 h-4"/>
            </a>
          </div>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
          {APARTMENTS.slice(0,3).map((a) => (
            <ApartmentCard key={a.id} apt={a} onPick={() => window.__route('apartments')}/>
          ))}
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 mt-5 md:mt-6">
          {APARTMENTS.slice(3,6).map((a) => (
            <ApartmentCard key={a.id} apt={a} onPick={() => window.__route('apartments')}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function LongStayBlock({ framing }) {
  return (
    <section className="section" id="long-stay-block">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
          <div className="lg:col-span-5">
            <SectionLabel index="03" eyebrow="Long-stay · the way most guests actually use us">
              The rate gets better the longer you stay.
            </SectionLabel>
            <p className="mt-6 text-[15.5px] text-ink-soft leading-snug max-w-[44ch]">
              Most of our guests stay around eight nights — long enough that takeaway gets old and laundry piles up. So every apartment has a real kitchen and an in-unit washer-dryer in the larger types, and after your first week the rate steps down. Think of us as a soft landing in Tecom before you sign a lease.
            </p>
            <a href="#long-stay" onClick={(e) => { e.preventDefault(); window.__route('long-stay'); }}
               className="mt-7 inline-flex items-center gap-2 px-4 py-2.5 bg-teal text-cream rounded-full text-[13.5px]">
              Open the long-stay page <Icon name="arrow" className="w-3.5 h-3.5"/>
            </a>
          </div>

          <div className="lg:col-span-7">
            {framing === 'rate' && <RateLed/>}
            {framing === 'testimonial' && <TestimonialLed/>}
            {framing === 'checklist' && <ChecklistLed/>}
          </div>
        </div>
      </div>
    </section>
  );
}

function RateLed() {
  const tiers = [
    { name: 'Nightly',   sub: '1–6 nights',  from: 51, save: '',         tone: 'cream' },
    { name: 'Weekly',    sub: '7–27 nights', from: 41, save: 'save ≈20%', tone: 'sand' },
    { name: 'Monthly',   sub: '28+ nights',  from: 34, save: 'save ≈33%', tone: 'teal' },
  ];
  return (
    <div>
      <div className="grid grid-cols-3 gap-3 md:gap-4">
        {tiers.map((t) => (
          <div key={t.name} className={`border hairline p-5 md:p-6 ${t.tone === 'teal' ? 'bg-teal text-cream' : t.tone === 'sand' ? 'bg-sand' : 'bg-cream'}`}>
            <div className={`mono text-[10px] tracking-[0.22em] uppercase ${t.tone === 'teal' ? 'text-cream/80' : 'ink-soft'}`}>{t.name}</div>
            <div className={`mt-1 text-[11.5px] ${t.tone === 'teal' ? 'text-cream/70' : 'ink-soft'}`}>{t.sub}</div>
            <div className="mt-5 flex items-baseline gap-1.5">
              <span className={`num text-[56px] md:text-[80px] leading-none ${t.tone === 'teal' ? 'text-cream' : 'text-teal'}`}>{t.from}</span>
              <span className={`text-[12px] ${t.tone === 'teal' ? 'text-cream/70' : 'ink-soft'}`}>USD<br/>from / n</span>
            </div>
            <div className={`mt-3 mono text-[10.5px] tracking-[0.12em] ${t.tone === 'teal' ? 'text-cream/80' : 'text-teal'}`}>{t.save || ' '}</div>
          </div>
        ))}
      </div>
      <div className="mt-6 border-t hairline pt-6 grid grid-cols-2 gap-x-6 gap-y-3">
        {NIGHT_SEVEN.slice(0,4).map((it, i) => (
          <div key={i} className="flex gap-3">
            <Icon name="check" className="w-4 h-4 text-teal mt-0.5 shrink-0" stroke={2}/>
            <div>
              <div className="text-[13.5px] text-ink">{it.title}</div>
              <div className="text-[12.5px] ink-soft leading-snug">{it.detail}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TestimonialLed() {
  const longStays = REVIEWS.filter(r => r.nights >= 8).slice(0, 3);
  return (
    <div className="grid gap-4">
      {longStays.map((r, i) => (
        <div key={i} className="border hairline p-6 bg-cream relative overflow-hidden">
          <div className="text-teal/10 text-[120px] absolute -top-6 -right-3 leading-none select-none" style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 300 }}>"</div>
          <div className="absolute top-5 right-5 num text-teal text-[28px]">{r.nights}</div>
          <div className="mono text-[10px] tracking-[0.18em] uppercase ink-soft">{r.nights} night stay</div>
          <blockquote className="mt-3 font-display text-[20px] md:text-[24px] max-w-[36ch]">{r.quote}</blockquote>
          <div className="mt-3 mono text-[10.5px] ink-soft tracking-[0.08em]">{r.author}, {r.origin} · {r.apartment}</div>
        </div>
      ))}
    </div>
  );
}

function ChecklistLed() {
  return (
    <div className="border hairline bg-sand/40 p-6 md:p-8">
      <div className="mono text-[10px] tracking-[0.22em] uppercase text-teal mb-2">What changes after night 7</div>
      <h3 className="font-display text-[28px] md:text-[34px]">Six small things that turn a hotel into a flat.</h3>
      <ul className="mt-6 divide-y hairline">
        {NIGHT_SEVEN.map((it, i) => (
          <li key={i} className="py-4 flex items-start gap-4">
            <span className="num text-teal text-[20px] w-7 shrink-0">{i+1}</span>
            <div className="flex-1">
              <div className="text-[14.5px] text-ink">{it.title}</div>
              <div className="text-[12.5px] ink-soft leading-snug mt-0.5">{it.detail}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function LocationBlock() {
  return (
    <section className="section bg-teal-dark text-cream" id="location-block">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-end mb-12">
          <div className="lg:col-span-7">
            <div className="flex items-baseline gap-3 mb-4">
              <span className="num text-cream text-[22px]">04</span>
              <span className="mono text-[10.5px] tracking-[0.22em] uppercase text-cream/70">Barsha Heights · Tecom</span>
            </div>
            <h2 className="font-display text-[40px] md:text-[64px] max-w-[18ch] text-cream">
              Quiet enough to live in. Connected enough to commute.
            </h2>
          </div>
          <div className="lg:col-span-5 text-cream/80">
            <p className="text-[15px] leading-snug max-w-[42ch]">
              Five minutes&rsquo; walk to Dubai Internet City Metro. Carrefour Express and Subway across the road. Ten minutes by car to Mall of the Emirates, Ski Dubai, the Marina and JBR. Off the tourist strip, on the way to work.
            </p>
          </div>
        </div>

        <div className="grid lg:grid-cols-12 gap-8">
          <div className="lg:col-span-8">
            <div className="rounded-[2px] overflow-hidden border border-cream/15">
              <MapEmbed/>
            </div>
          </div>
          <div className="lg:col-span-4 flex flex-col gap-2">
            {NEIGHBOURHOOD.map((p, i) => (
              <div key={i} className="flex items-center justify-between gap-4 py-3 border-b border-cream/15">
                <div className="flex items-center gap-2.5">
                  <Icon name={p.type==='metro' ? 'metro' : 'pin'} className="w-3.5 h-3.5 text-sand"/>
                  <span className="text-[13.5px] text-cream">{p.label}</span>
                </div>
                <span className="mono text-[10.5px] tracking-[0.06em] text-cream/70">{p.distance}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Worth-knowing strip — pulled from booking + research */}
        <div className="mt-12 border-t border-cream/15 pt-10">
          <div className="mono text-[10px] tracking-[0.22em] uppercase text-cream/60 mb-6">Worth knowing</div>
          <div className="grid md:grid-cols-4 gap-6 md:gap-8">
            {[
              { k: '17',          l: 'Floors',            s: 'Higher floors get the Tecom skyline. Ask for 12+.' },
              { k: '0.8',  u: 'km', l: 'The Greens Lake',  s: 'Quietest dog-walk loop in the neighbourhood.' },
              { k: '10',   u: 'min', l: 'Al Sufouh Beach',  s: 'Free public beach, white sand, locals\u2019 strip.' },
              { k: '25',   u: 'min', l: 'Emirates Golf Club', s: '36 holes on foot if you\u2019re mad enough.' },
            ].map((it, i) => (
              <div key={i}>
                <div className="flex items-baseline gap-1">
                  <span className="num text-cream text-[44px] leading-none">{it.k}</span>
                  {it.u && <span className="font-display text-[16px] text-cream/60">{it.u}</span>}
                </div>
                <div className="mt-3 text-[13.5px] text-cream">{it.l}</div>
                <div className="mt-1 text-[12.5px] text-cream/60 leading-snug max-w-[28ch]">{it.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ReviewsBlock() {
  return (
    <section className="section">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-5">
            <div className="flex items-baseline gap-3 mb-4">
              <span className="num text-teal text-[22px]">05</span>
              <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Real guest words</span>
            </div>
            <h2 className="font-display text-[36px] md:text-[52px]">
              Homely. Quiet. <span className="text-teal">A soft landing.</span>
            </h2>
            <div className="mt-7">
              <ReviewBadges/>
            </div>
            <div className="mt-7 grid grid-cols-3 gap-x-5 gap-y-2 border-t hairline pt-5 max-w-[460px]">
              <div>
                <div className="num text-teal text-[34px] leading-none">8.9</div>
                <div className="mono text-[9.5px] tracking-[0.14em] uppercase ink-soft mt-1.5 leading-tight">Couples<br/>score (Booking)</div>
              </div>
              <div>
                <div className="num text-teal text-[34px] leading-none">2011</div>
                <div className="mono text-[9.5px] tracking-[0.14em] uppercase ink-soft mt-1.5 leading-tight">Year the<br/>building opened</div>
              </div>
              <div>
                <div className="num text-teal text-[34px] leading-none">↑</div>
                <div className="mono text-[9.5px] tracking-[0.14em] uppercase ink-soft mt-1.5 leading-tight">More repeat guests<br/>than most in Tecom</div>
              </div>
            </div>
            <p className="mt-6 text-[14px] text-ink-soft leading-snug max-w-[42ch]">
              We&rsquo;ve filtered the long-stay reviews — eight nights or more — because that&rsquo;s the segment we&rsquo;re built for.
            </p>
          </div>
          <div className="lg:col-span-7 lg:pl-8 border-l hairline pl-8">
            <ReviewCarousel/>
          </div>
        </div>
      </div>
    </section>
  );
}

function DirectBookStrip() {
  return (
    <section className="section-tight bg-sand">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="flex items-baseline gap-3 mb-6">
          <span className="num text-teal text-[22px]">06</span>
          <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Book direct · four reasons</span>
        </div>
        <div className="grid md:grid-cols-4 gap-6">
          {[
            { n: '0%', l: 'OTA commission', s: 'Direct rate is the lowest published rate — guaranteed.' },
            { n: '48h', l: 'Free cancellation', s: 'Cancel up to 48 hours before check-in, no fee.' },
            { n: '2pm', l: 'Free late checkout', s: 'Stays of 7+ nights. 4pm on stays of 14+.' },
            { n: '15min', l: 'WhatsApp reply', s: 'Median first response time over the last 30 days.' },
          ].map((it, i) => (
            <div key={i} className="border-t hairline pt-6">
              <div className="num text-[64px] md:text-[80px] leading-none text-teal">{it.n}</div>
              <div className="mt-3 text-[13.5px] text-ink">{it.l}</div>
              <div className="mt-1.5 text-[12.5px] ink-soft leading-snug">{it.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CorporateStrip() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ company: '', contact: '', email: '', nights: 30, headcount: 1, lpo: false });
  return (
    <section className="section bg-cream border-t hairline" id="corporate-block">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5">
            <div className="flex items-baseline gap-3 mb-4">
              <span className="num text-teal text-[22px]">07</span>
              <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Corporate · relocation · long-stay LPO</span>
            </div>
            <h2 className="font-display text-[36px] md:text-[52px] max-w-[16ch]">
              Soft landings, billed to the company.
            </h2>
            <p className="mt-5 text-[14.5px] text-ink-soft leading-snug max-w-[42ch]">
              LPO accepted. Monthly billing on terms. We&rsquo;ll match the longest reasonable competitor quote within Tecom on long-stay enquiries — and we&rsquo;ll do it without an OTA in the middle.
            </p>
            <ul className="mt-6 space-y-2 text-[13.5px]">
              <li className="flex items-center gap-2"><Icon name="check" className="w-3.5 h-3.5 text-teal"/> RFP form &amp; rate card on request</li>
              <li className="flex items-center gap-2"><Icon name="check" className="w-3.5 h-3.5 text-teal"/> Relocation packages with welcome shop</li>
              <li className="flex items-center gap-2"><Icon name="check" className="w-3.5 h-3.5 text-teal"/> Quiet floors for night-shift teams</li>
            </ul>
          </div>
          <div className="lg:col-span-7">
            {submitted ? (
              <div className="border hairline p-8 bg-sand/40">
                <div className="num text-teal text-[60px] leading-none">✓</div>
                <h3 className="mt-3 font-display text-[28px]">Thanks, {form.contact.split(' ')[0] || 'there'}.</h3>
                <p className="mt-2 text-[14px] ink-soft max-w-[42ch]">A reservations manager will be in touch within one business day — usually faster. We&rsquo;ll send a rate card and a sample LPO.</p>
                <button onClick={() => setSubmitted(false)} className="mt-5 text-[13px] text-teal hover:text-teal-dark">Send another →</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
                    className="border hairline p-6 md:p-8 bg-cream">
                <div className="mono text-[10px] tracking-[0.22em] uppercase ink-soft mb-4">Corporate enquiry</div>
                <div className="grid sm:grid-cols-2 gap-4">
                  <Field label="Company" required>
                    <input required value={form.company} onChange={(e) => setForm({...form, company: e.target.value})}
                           className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                  </Field>
                  <Field label="Contact name" required>
                    <input required value={form.contact} onChange={(e) => setForm({...form, contact: e.target.value})}
                           className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                  </Field>
                  <Field label="Work email" required>
                    <input type="email" required value={form.email} onChange={(e) => setForm({...form, email: e.target.value})}
                           className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                  </Field>
                  <Field label="Move-in (target)">
                    <input type="date" className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                  </Field>
                  <Field label={`Nights · ${form.nights}`}>
                    <input type="range" min="7" max="180" value={form.nights} onChange={(e) => setForm({...form, nights: +e.target.value})}
                           className="w-full accent-teal"/>
                  </Field>
                  <Field label={`Headcount · ${form.headcount}`}>
                    <input type="range" min="1" max="20" value={form.headcount} onChange={(e) => setForm({...form, headcount: +e.target.value})}
                           className="w-full accent-teal"/>
                  </Field>
                </div>
                <label className="mt-5 flex items-center gap-2 text-[13px] text-ink-soft cursor-pointer">
                  <input type="checkbox" checked={form.lpo} onChange={(e) => setForm({...form, lpo: e.target.checked})}
                         className="accent-teal w-3.5 h-3.5"/>
                  We&rsquo;ll be raising an LPO and need 30-day billing terms.
                </label>
                <button type="submit"
                        className="mt-6 inline-flex items-center gap-2 px-5 py-3 bg-teal text-cream text-[13.5px] tracking-tight">
                  Send enquiry <Icon name="arrow" className="w-3.5 h-3.5"/>
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, children, required }) {
  return (
    <label className="block">
      <div className="mono text-[10px] tracking-[0.18em] uppercase ink-soft mb-1.5">{label}{required && <span className="text-teal"> *</span>}</div>
      {children}
    </label>
  );
}

function FacilitiesBlock() {
  return (
    <section className="section-tight">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="flex flex-wrap items-baseline justify-between gap-4 mb-8">
          <h2 className="font-display text-[28px] md:text-[40px] leading-tight">
            And the things you&rsquo;d expect from a hotel.
          </h2>
          <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Facilities</span>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
          {FACILITIES.map((f, i) => (
            <div key={i} className="flex items-center gap-3 py-3 border-t hairline">
              <Icon name={f.icon} className="w-5 h-5 text-teal"/>
              <span className="text-[13.5px] text-ink">{f.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Home({ tweaks, openBook }) {
  return (
    <main>
      {tweaks.heroLayout === 'fullbleed' && <HeroFullbleed openBook={openBook}/>}
      {tweaks.heroLayout === 'editorial' && <HeroEditorial openBook={openBook}/>}
      {tweaks.heroLayout === 'split' && <HeroSplit openBook={openBook} hero={tweaks.heroPhoto || 'mixed'}/>}
      <ApartmentsTeaser/>
      <LongStayBlock framing={tweaks.longStayFraming}/>
      <LocationBlock/>
      <ReviewsBlock/>
      <FacilitiesBlock/>
      <DirectBookStrip/>
      <CorporateStrip/>
    </main>
  );
}

Object.assign(window, { Home });