// Long-Stay page — rate cards, what changes after night 7, testimonials, FAQ

function LongStay() {
  const [nights, setNights] = useState(14);
  const tier = nights >= 28 ? 'monthly' : nights >= 7 ? 'weekly' : 'nightly';
  const rate = (a) => tier === 'monthly' ? a.fromMonth : tier === 'weekly' ? a.fromWeek : a.fromNight;

  return (
    <main>
      <section className="pt-12 md:pt-20 pb-12">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid lg:grid-cols-12 gap-10 items-end">
            <div className="lg:col-span-8">
              <div className="flex items-baseline gap-3 mb-5">
                <span className="num text-teal text-[22px]">03</span>
                <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Long-stay · the way most guests actually use us</span>
              </div>
              <h1 className="font-display text-[56px] md:text-[88px] lg:text-[104px]">
                Stay a <span className="text-teal font-bold">week.</span><br/>
                Or a month.<br/>
                The rate steps down.
              </h1>
            </div>
            <div className="lg:col-span-4">
              <p className="text-[15.5px] md:text-[17px] text-ink-soft leading-snug max-w-[42ch]">
                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, an in-unit washer-dryer in the larger types, and a rate that gets better after night seven.
              </p>
              <p className="mt-3 text-[13px] ink-soft mono tracking-[0.06em]">
                — Reservations, Gulf Oasis · 2026
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stay-length calculator */}
      <section className="section-tight bg-sand/55 border-y hairline">
        <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="mono text-[10px] tracking-[0.22em] uppercase ink-soft mb-3">How long are you staying?</div>
              <div className="flex items-baseline gap-3">
                <span className="stat-num text-[120px] md:text-[180px] leading-none text-teal">{nights}</span>
                <span className="font-display text-[24px] text-teal-dark/80">night{nights===1?'':'s'}</span>
              </div>
              <input type="range" min="1" max="60" value={nights} onChange={(e) => setNights(+e.target.value)}
                     className="w-full mt-5 accent-teal"/>
              <div className="flex justify-between mono text-[10px] tracking-[0.06em] ink-soft mt-2">
                <span>1 night</span><span>7 — weekly</span><span>28 — monthly</span><span>60 nights</span>
              </div>
              <div className="mt-7 inline-flex items-center gap-2 chip solid">
                {tier === 'nightly' && <>Nightly rate · standard pricing</>}
                {tier === 'weekly' && <>Weekly rate active · save ≈20%</>}
                {tier === 'monthly' && <>Monthly rate active · save ≈33%</>}
              </div>
            </div>

            <div className="lg:col-span-7">
              <div className="border hairline bg-cream">
                <div className="grid grid-cols-12 px-5 py-3 mono text-[10px] tracking-[0.18em] uppercase ink-soft border-b hairline">
                  <div className="col-span-6">Apartment</div>
                  <div className="col-span-2 text-right">m²</div>
                  <div className="col-span-2 text-right">from · /n</div>
                  <div className="col-span-2 text-right">total · {nights}n</div>
                </div>
                {APARTMENTS.map((a) => (
                  <div key={a.id} className="grid grid-cols-12 px-5 py-3 items-baseline border-b hairline last:border-b-0 hover:bg-sand/30 transition">
                    <div className="col-span-6 flex items-center gap-3">
                      <span className="font-display text-[16px]">{a.name}</span>
                      {!a.visibleOnDirect && <span className="mono text-[9px] tracking-[0.14em] uppercase text-teal">new direct</span>}
                    </div>
                    <div className="col-span-2 text-right num text-teal text-[18px]">{a.sqm}</div>
                    <div className="col-span-2 text-right num text-teal text-[18px]">${rate(a)}</div>
                    <div className="col-span-2 text-right num text-[20px] text-teal-dark">${(rate(a)*nights).toLocaleString()}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What changes after night 7 */}
      <section className="section">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid lg:grid-cols-12 gap-12 items-start">
            <div className="lg:col-span-5">
              <div className="flex items-baseline gap-3 mb-4">
                <span className="num text-teal text-[22px]">04</span>
                <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">After night seven</span>
              </div>
              <h2 className="font-display text-[40px] md:text-[60px] max-w-[16ch]">
                Six small things that turn a hotel into a flat.
              </h2>
              <p className="mt-6 text-[14.5px] text-ink-soft leading-snug max-w-[42ch]">
                You don&rsquo;t pack lightly for eight nights. So we change the room a little, on a cadence that respects you&rsquo;ve started to live here.
              </p>
            </div>
            <div className="lg:col-span-7">
              <ul className="divide-y hairline border-y hairline">
                {NIGHT_SEVEN.map((it, i) => (
                  <li key={i} className="py-6 grid grid-cols-12 gap-4 items-baseline">
                    <span className="col-span-2 num text-teal text-[40px] leading-none">{i+1}</span>
                    <div className="col-span-10">
                      <div className="font-display text-[22px] md:text-[26px]">{it.title}</div>
                      <div className="text-[14px] ink-soft leading-snug mt-1.5 max-w-[58ch]">{it.detail}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* 8+ night testimonials */}
      <section className="section bg-teal-dark text-cream">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="flex items-baseline gap-3 mb-10">
            <span className="num text-cream text-[22px]">05</span>
            <span className="mono text-[10.5px] tracking-[0.22em] uppercase text-cream/70">Filtered: stays of 8+ nights</span>
          </div>
          <h2 className="font-display text-[40px] md:text-[60px] max-w-[18ch]">
            Guest words we didn&rsquo;t put in their mouths.
          </h2>
          <div className="mt-12 grid md:grid-cols-2 gap-x-12 gap-y-12">
            {REVIEWS.filter(r => r.nights >= 8).map((r, i) => (
              <div key={i} className="relative">
                <span className="absolute -top-6 -left-1 text-cream/20 text-[100px] leading-none select-none" style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 300 }}>"</span>
                <blockquote className="font-display text-[24px] md:text-[28px] max-w-[40ch] text-cream">
                  {r.quote}
                </blockquote>
                <div className="mt-5 flex items-center justify-between border-t border-cream/15 pt-4">
                  <div className="text-[13px] text-cream/85">{r.author}, {r.origin} <span className="text-cream/55">· {r.apartment}</span></div>
                  <div className="num text-cream text-[24px]">{r.nights}<span className="font-sans not-italic text-[12px] text-cream/55 ml-1">n</span></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Long-stay enquiry form */}
      <LongStayEnquiry/>
    </main>
  );
}

function LongStayEnquiry() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', phone: '', nights: 28, apartment: 'one-bedroom', start: '' });
  if (submitted) {
    return (
      <section className="section">
        <div className="max-w-[820px] mx-auto px-6 md:px-10 text-center">
          <div className="num text-teal text-[80px] leading-none">✓</div>
          <h2 className="mt-3 font-display text-[40px] leading-tight">We&rsquo;ll be in touch tomorrow.</h2>
          <p className="mt-4 text-[15px] ink-soft max-w-[48ch] mx-auto">Reservations replies within one business day — usually the same afternoon. You&rsquo;ll get a rate, a hold on the apartment, and a question or two if we need to clarify.</p>
          <button onClick={() => setSubmitted(false)} className="mt-7 text-[13px] text-teal hover:text-teal-dark">Send another →</button>
        </div>
      </section>
    );
  }
  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">
          <div className="lg:col-span-5">
            <div className="flex items-baseline gap-3 mb-4">
              <span className="num text-teal text-[22px]">06</span>
              <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Tell us about your stay</span>
            </div>
            <h2 className="font-display text-[36px] md:text-[52px] max-w-[18ch]">
              Long-stay enquiry. We&rsquo;ll quote in 24 hours.
            </h2>
            <p className="mt-5 text-[14.5px] text-ink-soft leading-snug max-w-[42ch]">
              Anything 7 nights or longer goes through here. We&rsquo;ll match the reasonable best rate within Tecom and hold your apartment for 48 hours while you decide.
            </p>
            <ul className="mt-5 space-y-1.5 text-[13px] ink-soft">
              <li>· Direct rate · no OTA commission</li>
              <li>· Free 48h cancellation, 30-day hold for corporates</li>
              <li>· LPO &amp; monthly billing on request</li>
            </ul>
          </div>
          <div className="lg:col-span-7">
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
                  className="border hairline p-6 md:p-8 bg-cream">
              <div className="grid sm:grid-cols-2 gap-5">
                <Field label="Your name" required>
                  <input required value={form.name} onChange={(e) => setForm({...form, name: e.target.value})}
                         className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                </Field>
                <Field label="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="WhatsApp / phone">
                  <input value={form.phone} onChange={(e) => setForm({...form, phone: e.target.value})}
                         placeholder="+971…"
                         className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal"/>
                </Field>
                <Field label="Target check-in" required>
                  <input type="date" required value={form.start} onChange={(e) => setForm({...form, start: e.target.value})}
                         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="120" value={form.nights} onChange={(e) => setForm({...form, nights: +e.target.value})}
                         className="w-full accent-teal"/>
                  <div className="flex justify-between mono text-[10px] ink-soft mt-1">
                    <span>7</span><span>28 (mo)</span><span>60</span><span>120</span>
                  </div>
                </Field>
                <Field label="Apartment type">
                  <select value={form.apartment} onChange={(e) => setForm({...form, apartment: e.target.value})}
                          className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal">
                    {APARTMENTS.map((a) => <option key={a.id} value={a.id}>{a.name} · {a.sqm} m²</option>)}
                    <option value="open">No preference — recommend one</option>
                  </select>
                </Field>
              </div>
              <Field label="Anything we should know?">
                <textarea rows="3" className="w-full bg-transparent border-b hairline pb-1.5 focus:outline-none focus:border-teal resize-none"
                          placeholder="e.g. relocating from Singapore on the 14th, lease starts Aug 1"/>
              </Field>
              <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>
              <div className="mt-3 mono text-[10.5px] ink-soft">Or WhatsApp +971 4 451 7111 — we reply in &lt;5 minutes, 24/7.</div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LongStay });