// Apartments page — all 6 with detail panel, then the comparison table.

function Apartments() {
  const [active, setActive] = useState(APARTMENTS[0].id);
  const apt = APARTMENTS.find(a => a.id === active);

  return (
    <main>
      <section className="pt-12 md:pt-20 pb-10">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="flex items-baseline gap-3 mb-5">
            <span className="num text-teal text-[22px]">02</span>
            <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">All six apartments · on the direct site for the first time</span>
          </div>
          <h1 className="font-display text-[56px] md:text-[88px] lg:text-[104px] max-w-[16ch]">
            Pick by <span className="text-teal font-bold">how long</span> you&rsquo;re staying, not by how many stars are on the wall.
          </h1>
          <p className="mt-6 text-[15.5px] md:text-[17px] text-ink-soft max-w-[60ch] leading-snug">
            Six apartment types. Each one has a kitchen of some kind. The bigger ones have an in-unit washer-dryer. We&rsquo;ve put what changes on a single comparison row so you can pick without scrolling.
          </p>
        </div>
      </section>

      {/* All-six selector strip */}
      <section className="section-tight">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="overflow-x-auto no-scrollbar -mx-6 px-6 md:mx-0 md:px-0">
            <div className="flex gap-3 md:grid md:grid-cols-6 md:gap-3">
              {APARTMENTS.map((a) => (
                <button key={a.id}
                        onClick={() => setActive(a.id)}
                        className={`text-left p-4 border min-w-[200px] transition ${active===a.id ? 'border-teal bg-teal text-cream' : 'hairline bg-cream hover:bg-sand/50'}`}>
                  <div className={`flex items-baseline justify-between`}>
                    <span className={`num text-[20px] ${active===a.id ? 'text-cream' : 'text-teal'}`}>{a.sqm}</span>
                    <span className={`mono text-[10px] tracking-[0.14em] ${active===a.id ? 'text-cream/70' : 'ink-soft'}`}>m²</span>
                  </div>
                  <div className={`mt-2 font-display text-[16px] ${active===a.id ? 'text-cream' : 'text-ink'}`}>{a.name}</div>
                  <div className={`mt-1 text-[11px] ${active===a.id ? 'text-cream/70' : 'ink-soft'}`}>Sleeps {a.sleeps} · {a.kitchen}</div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Detail panel */}
      <section className="pb-20">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid lg:grid-cols-12 gap-8 lg:gap-10">
            <div className="lg:col-span-7">
              <div className="grid grid-cols-12 gap-3 h-[420px] md:h-[520px]">
                <div className="col-span-12 md:col-span-8 overflow-hidden">
                  {(apt.photoOk === true || apt.photoOk === 'partial') ? (
                    <img src={apt.photo} alt={apt.name} className="w-full h-full object-cover warm-photo"/>
                  ) : (
                    <Placeholder label={`${apt.name} — full apartment frame`} sub={apt.photoNote} className="w-full h-full"/>
                  )}
                </div>
                <div className="hidden md:flex md:col-span-4 flex-col gap-3">
                  <Placeholder label={`Kitchen-in-use · ${apt.name}`} sub="Kettle on, fruit on counter." className="w-full h-1/2"/>
                  <Placeholder label={apt.laundry===true ? 'In-unit washer-dryer · door open' : 'Hotel laundry · pickup at door'} className="w-full h-1/2" tone="dim"/>
                </div>
              </div>
            </div>

            <div className="lg:col-span-5 lg:pt-2">
              <div className="flex items-baseline gap-3 mb-2">
                {!apt.visibleOnDirect && <span className="chip solid !text-[10px]">New on direct</span>}
                <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">{apt.bed}</span>
              </div>
              <h2 className="font-display text-[36px] md:text-[52px]">{apt.name}</h2>

              <div className="mt-6 grid grid-cols-4 gap-4 border-t hairline pt-5">
                <div>
                  <div className="num text-teal text-[36px] leading-none">{apt.sqm}</div>
                  <div className="mono text-[10px] tracking-[0.14em] uppercase ink-soft mt-1">m²</div>
                </div>
                <div>
                  <div className="num text-teal text-[36px] leading-none">{apt.sleeps}</div>
                  <div className="mono text-[10px] tracking-[0.14em] uppercase ink-soft mt-1">sleeps</div>
                </div>
                <div className="col-span-2">
                  <div className="num text-teal text-[36px] leading-none">${apt.fromNight}</div>
                  <div className="mono text-[10px] tracking-[0.14em] uppercase ink-soft mt-1">from · night</div>
                </div>
              </div>

              <div className="mt-7 space-y-3 text-[14px]">
                <div className="flex items-start gap-3">
                  <Icon name="kitchen" className="w-4 h-4 text-walnut mt-0.5"/>
                  <div>
                    <div className="text-ink">{apt.kitchen}</div>
                    <div className="text-[12.5px] ink-soft leading-snug">{apt.kitchenDetail}</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Icon name="laundry" className="w-4 h-4 text-walnut mt-0.5"/>
                  <div className="text-ink">{apt.laundry===true ? 'In-unit washer-dryer' : apt.laundry || 'Hotel laundry (24/7)'}</div>
                </div>
                <div className="flex items-start gap-3">
                  <Icon name="sun" className="w-4 h-4 text-walnut mt-0.5"/>
                  <div className="text-ink">Balcony: <span className="ink-soft">{apt.balcony || '—'}</span></div>
                </div>
              </div>

              <div className="mt-6 border-t hairline pt-5">
                <div className="mono text-[10px] tracking-[0.22em] uppercase ink-soft">Best for</div>
                <div className="mt-1 font-display text-[20px] leading-snug max-w-[34ch]">{apt.bestFor}</div>
              </div>

              <div className="mt-6 flex flex-wrap items-center gap-3">
                <button className="inline-flex items-center gap-2 px-5 py-3 bg-teal text-cream text-[13.5px] tracking-tight">
                  Book direct · from ${apt.fromNight}/n <Icon name="arrow" className="w-3.5 h-3.5"/>
                </button>
                <button className="inline-flex items-center gap-2 px-4 py-2.5 border hairline text-[13px]">
                  Long-stay enquiry <Icon name="arrow-up-right" className="w-3.5 h-3.5"/>
                </button>
              </div>

              <div className="mt-6 grid grid-cols-3 gap-3 text-center border-t hairline pt-5">
                <div className="bg-sand/50 py-3">
                  <div className="num text-teal text-[22px]">${apt.fromNight}</div>
                  <div className="mono text-[9.5px] tracking-[0.16em] uppercase ink-soft mt-0.5">/ night</div>
                </div>
                <div className="bg-sand/50 py-3">
                  <div className="num text-teal text-[22px]">${apt.fromWeek}</div>
                  <div className="mono text-[9.5px] tracking-[0.16em] uppercase ink-soft mt-0.5">/ night, weekly</div>
                </div>
                <div className="bg-teal py-3 text-cream">
                  <div className="num text-cream text-[22px]">${apt.fromMonth}</div>
                  <div className="mono text-[9.5px] tracking-[0.16em] uppercase text-cream/80 mt-0.5">/ night, monthly</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section className="section-tight bg-sand/55">
        <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">
            <div>
              <div className="flex items-baseline gap-3 mb-3">
                <span className="num text-teal text-[22px]">03</span>
                <span className="mono text-[10.5px] tracking-[0.22em] uppercase ink-soft">Side-by-side</span>
              </div>
              <h2 className="font-display text-[32px] md:text-[48px] max-w-[20ch]">
                All six types on one row. Scroll horizontally on mobile.
              </h2>
            </div>
            <div className="mono text-[10.5px] tracking-[0.16em] uppercase ink-soft">USD rates · weekly &amp; monthly auto-apply</div>
          </div>
          <ComparisonTable apartments={APARTMENTS}/>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Apartments });