/* global React, Ico, PROPERTIES, SBImage, Logo, Rating, Tide, TopNav, SearchBar, PropCard, MiniCalendar, Steps, Counter, Footer */
// Desktop screens for Langebaan
const { useState: useStateD } = React;

// ════════════════════════════════════════════════════════════════════
// 1) HOMEPAGE
// ════════════════════════════════════════════════════════════════════
function HomeScreen({ onNav, fav, onFav }) {
  return (
    <div className="sb-screen" style={{width:"100%", minHeight:980}}>
      {/* Hero */}
      <section style={{position:'relative', height: 800, overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0}}>
          <SBImage tone="ocean" style={{width:'100%', height:'100%', borderRadius:0}} label="hero · open sea, sunrise over the bar" corner="01 / 04 · landscape"/>
          {/* Dark gradient for legibility */}
          <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(10,37,64,0.55) 0%, rgba(10,37,64,0.25) 35%, rgba(10,37,64,0.55) 100%)'}}/>
        </div>
        {/* Nav over hero */}
        <div style={{position:'relative', zIndex:2}}>
          <TopNav onNav={onNav} transparent/>
        </div>

        <div style={{position:'relative', zIndex:2, padding:'80px 80px 0', color:'var(--paper)'}}>
          <div className="t-eyebrow" style={{opacity:0.9}}>West Coast · Langebaan</div>
          <h1 className="sb-serif t-display" style={{margin:'18px 0 0', maxWidth:880}}>
            A quiet stretch of <em style={{fontStyle:'italic'}}>coast</em>, kept for the ones who notice.
          </h1>
          <p style={{maxWidth:520, marginTop:22, fontSize:17, lineHeight:1.55, opacity:0.92}}>
            Forty hand-picked houses along seven kilometres of dune-grass and tide pools. Booked direct, no middle-folk.
          </p>
        </div>

        {/* Search bar floating over hero */}
        <div style={{position:'absolute', left:80, right:80, bottom:40, zIndex:3}}>
          <SearchBar onSearch={()=>onNav('list')} dark/>
        </div>
      </section>

      {/* Featured */}
      <section style={{padding:'96px 80px 0'}}>
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:32}}>
          <div>
            <div className="t-eyebrow" style={{color:'var(--muted)'}}>Currently in tide</div>
            <h2 className="sb-serif" style={{fontSize:52, margin:'10px 0 0', letterSpacing:'-0.02em', maxWidth:640}}>Houses we’d quietly recommend this week.</h2>
          </div>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-ghost btn-sm">All houses</button>
            <button className="btn btn-ghost btn-sm" style={{width:38, padding:0, justifyContent:'center'}}><Ico.chev style={{transform:'rotate(180deg)'}}/></button>
            <button className="btn btn-ghost btn-sm" style={{width:38, padding:0, justifyContent:'center'}}><Ico.chev/></button>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:32}}>
          {PROPERTIES.slice(0,3).map(p => (
            <PropCard key={p.id} p={p} fav={fav.includes(p.id)} onFav={onFav} onClick={()=>onNav('detail', p.id)} large/>
          ))}
        </div>
      </section>

      {/* Editorial band — beach proximity story */}
      <section style={{margin:'120px 80px 0', padding:'72px', background:'var(--paper-2)', borderRadius:24, display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:64, alignItems:'center'}}>
        <div>
          <div className="t-eyebrow" style={{color:'var(--ocean)'}}>What we measure that they don’t</div>
          <h3 className="sb-serif" style={{fontSize:40, margin:'12px 0 18px', letterSpacing:'-0.02em', lineHeight:1.05}}>
            Every house, timed to the sea.
          </h3>
          <p style={{fontSize:16, lineHeight:1.6, color:'var(--ink)', maxWidth:520}}>
            We walk it ourselves. From the front gate to the high-water mark — sand under your feet in three minutes or less, or we name it honestly. Each listing carries today’s tide, the soft-sand walking time, and whether you’ll need shoes.
          </p>
          <div className="stat-row" style={{marginTop:32, gap:48}}>
            <div className="stat"><span className="v">40+</span><span className="l">Houses</span></div>
            <div className="stat"><span className="v">7 km</span><span className="l">Coastline</span></div>
            <div className="stat"><span className="v">4.91</span><span className="l">Guest rating</span></div>
            <div className="stat"><span className="v">98%</span><span className="l">Direct bookings</span></div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
          <SBImage tone="sand" style={{aspectRatio:'3/4'}} label="dune path, low light"/>
          <div style={{display:'grid', gridTemplateRows:'1fr 1fr', gap:16, paddingTop:32}}>
            <SBImage tone="shell" style={{aspectRatio:'4/3'}} label="copper kettle still"/>
            <SBImage tone="dusk" style={{aspectRatio:'4/3'}} label="open window, breeze"/>
          </div>
        </div>
      </section>

      {/* Bay Regulars — loyalty programme */}
      <section style={{padding:'120px 80px 0'}}>
        <div style={{textAlign:'center', marginBottom:48}}>
          <div className="t-eyebrow" style={{color:'var(--ocean)'}}>Bay Regulars · Returning guests</div>
          <h3 className="sb-serif" style={{fontSize:44, margin:'12px 0 12px', letterSpacing:'-0.02em', lineHeight:1.05}}>For the ones who come back.</h3>
          <p style={{maxWidth:560, margin:'0 auto', color:'var(--muted)', fontSize:15.5, lineHeight:1.6}}>
            Three tiers, quietly applied. No cards to carry, no points to chase — just better stays, the more you stay.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
          {[
            { tier:'01', title:'First Tide', sub:'Every guest, every stay', perks:[
              'Direct-booking discount visible at checkout',
              'Tide chart pinned in your kitchen',
              'Senior 65+ guests a tier higher, automatically',
            ]},
            { tier:'02', title:'Returning', sub:'From your second stay', perks:[
              '10% off mid-season — applied at checkout, not on email',
              'Early pick of weekends, opens to you first',
              'Late check-out, by request',
            ]},
            { tier:'03', title:'Bay Regular', sub:'From your fifth stay', perks:[
              'Welcome hamper from a local maker',
              'Cleaning fee waived, for life',
              'Standing invitation to our once-a-year summer braai',
            ]},
          ].map((t,i) => (
            <div key={t.tier} className="card" style={{padding:28, background: i===1 ? 'var(--paper-2)' : 'var(--paper)', borderColor: i===1 ? 'var(--rule-strong)' : 'var(--rule)'}}>
              <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:14}}>
                <span className="sb-mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--muted)'}}>TIER {t.tier}</span>
                {i===1 && <span className="chip" style={{background:'var(--sand)', borderColor:'var(--sand-shadow)', fontSize:10.5, padding:'4px 9px'}}>MOST GUESTS</span>}
              </div>
              <h4 className="sb-serif" style={{fontSize:26, margin:'0 0 4px', letterSpacing:'-0.012em'}}>{t.title}</h4>
              <div className="t-meta" style={{marginBottom:18}}>{t.sub}</div>
              <ul style={{margin:0, padding:0, listStyle:'none', display:'grid', gap:12}}>
                {t.perks.map(perk => (
                  <li key={perk} style={{display:'flex', gap:10, fontSize:14, lineHeight:1.5}}>
                    <Ico.check s={14} style={{color:'var(--ocean)', flexShrink:0, marginTop:4}}/>
                    <span>{perk}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:32, fontSize:13, color:'var(--muted)'}}>
          Direct bookings only. Excludes public holidays, long weekends and peak season. The booking name on each stay must match.
        </p>
      </section>

      {/* Tide-times widget feature */}
      <section style={{padding:'96px 80px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:64, alignItems:'center'}}>
          <div>
            <div className="t-eyebrow" style={{color:'var(--muted)'}}>Live · Langebaan</div>
            <h3 className="sb-serif" style={{fontSize:40, margin:'10px 0 16px', letterSpacing:'-0.02em', lineHeight:1.05}}>The bay, right now.</h3>
            <p style={{maxWidth:460, color:'var(--muted)', fontSize:15, lineHeight:1.6}}>
              We pin a live tide read and surf signal to every listing so you can plan around the water, not around availability.
            </p>
            <button className="btn btn-primary btn-lg" style={{marginTop:28}}>Open the tide guide <Ico.arrow/></button>
          </div>
          <div className="card" style={{padding:32}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
              {[
                { l: 'Air',     v: '19°', s: 'Light NW' },
                { l: 'Sea',     v: '14°', s: 'Glass' },
                { l: 'Swell',   v: '1.2m', s: '10s W' },
              ].map(s => (
                <div key={s.l} style={{padding:'10px 0'}}>
                  <div className="t-meta" style={{marginBottom:6}}>{s.l}</div>
                  <div className="sb-serif" style={{fontSize:46, lineHeight:1, letterSpacing:'-0.02em'}}>{s.v}</div>
                  <div style={{marginTop:6, fontSize:12, color:'var(--muted)'}}>{s.s}</div>
                </div>
              ))}
            </div>
            <hr className="hr" style={{margin:'24px 0'}}/>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div>
                <div className="t-meta">Today, Tuesday 12 May</div>
                <div style={{fontWeight:600, marginTop:4}}>High water — 14:32 · 1.8 m</div>
              </div>
              <Tide compact/>
            </div>
            {/* Tide curve */}
            <svg viewBox="0 0 600 90" style={{width:'100%', height:80, marginTop:20, display:'block'}}>
              <defs>
                <linearGradient id="tg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--ocean)" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="var(--ocean)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,60 C 60,60 80,20 150,20 C 220,20 250,80 320,80 C 390,80 420,15 490,15 C 560,15 580,55 600,55 L600,90 L0,90 Z" fill="url(#tg)"/>
              <path d="M0,60 C 60,60 80,20 150,20 C 220,20 250,80 320,80 C 390,80 420,15 490,15 C 560,15 580,55 600,55" fill="none" stroke="var(--ocean)" strokeWidth="1.6"/>
              <circle cx="370" cy="60" r="4" fill="var(--ink)"/>
              <line x1="370" y1="0" x2="370" y2="90" stroke="var(--ink)" strokeOpacity="0.25" strokeDasharray="2 3"/>
            </svg>
            <div className="stat-row" style={{justifyContent:'space-between', fontSize:11, color:'var(--muted)', letterSpacing:'0.08em', textTransform:'uppercase'}}>
              <span>00:00</span><span>06:00</span><span>12:00</span><span>now</span><span>18:00</span><span>24:00</span>
            </div>
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// 2) LISTINGS
// ════════════════════════════════════════════════════════════════════
function ListScreen({ onNav, fav, onFav }) {
  const [showMap, setShowMap] = useStateD(false);
  const [filters, setFilters] = useStateD({ beach:true, pet:false, hot:false, sauna:false });
  const toggle = (k) => setFilters({...filters, [k]: !filters[k]});
  const [sort, setSort] = useStateD('recommended');

  return (
    <div className="sb-screen" style={{width:"100%", minHeight:980}}>
      <TopNav onNav={onNav} active="list"/>
      <div style={{padding:'24px 80px', borderBottom:'1px solid var(--rule)', background:'var(--paper)'}}>
        <SearchBar/>
      </div>

      {/* Filters row */}
      <div style={{padding:'18px 80px', borderBottom:'1px solid var(--rule)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, position:'sticky', top:0, zIndex:4, background:'var(--paper)'}}>
        <div className="tags">
          <span className={`chip ${filters.beach?'chip-on':''}`} onClick={()=>toggle('beach')} style={{cursor:'pointer'}}>Beachfront</span>
          <span className={`chip ${filters.pet?'chip-on':''}`} onClick={()=>toggle('pet')} style={{cursor:'pointer'}}>Pet-friendly</span>
          <span className={`chip ${filters.hot?'chip-on':''}`} onClick={()=>toggle('hot')} style={{cursor:'pointer'}}>Hot tub</span>
          <span className={`chip ${filters.sauna?'chip-on':''}`} onClick={()=>toggle('sauna')} style={{cursor:'pointer'}}>Sauna</span>
          <span className="chip" style={{cursor:'pointer'}}>2+ bedrooms</span>
          <span className="chip" style={{cursor:'pointer'}}>Architect</span>
          <span className="chip" style={{cursor:'pointer'}}><Ico.filter s={12}/> More filters</span>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost btn-sm"><Ico.sort s={14}/> {sort==='recommended'?'Recommended':sort}</button>
          <button className={`btn ${showMap?'btn-primary':'btn-ghost'} btn-sm`} onClick={()=>setShowMap(!showMap)}>
            <Ico.pin s={14}/> {showMap?'Hide map':'Show map'}
          </button>
        </div>
      </div>

      {/* Results */}
      <section style={{padding:'24px 80px 96px'}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:24}}>
          <h2 className="sb-serif" style={{fontSize:32, letterSpacing:'-0.02em'}}>40 houses in Langebaan <span style={{color:'var(--muted)', fontSize:18}}>· 12–15 Jun · 4 guests</span></h2>
          <span className="t-meta">Updated 2 minutes ago</span>
        </div>

        <div style={{display:'grid', gridTemplateColumns: showMap ? '1.4fr 1fr' : '1fr', gap:32}}>
          <div style={{display:'grid', gridTemplateColumns: showMap ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap:32}}>
            {PROPERTIES.map(p => (
              <PropCard key={p.id} p={p} fav={fav.includes(p.id)} onFav={onFav} onClick={()=>onNav('detail', p.id)}/>
            ))}
          </div>
          {showMap && (
            <div className="map" style={{borderRadius:'var(--radius-lg)', position:'sticky', top:96, height:'calc(100vh - 120px)', minHeight:720, border:'1px solid var(--rule)'}}>
              {[
                { l:'R245', x:22, y:48, a:true },
                { l:'R410', x:42, y:32 },
                { l:'R185', x:68, y:54 },
                { l:'R168', x:55, y:68 },
                { l:'R295', x:30, y:22 },
                { l:'R220', x:78, y:38 },
              ].map((m,i) => (
                <div key={i} className={`map-pin ${m.a?'is-active':''}`} style={{left: m.x+'%', top: m.y+'%'}}>
                  <div className="pin-pill">{m.l}</div>
                  <div className="pin-stem"/>
                </div>
              ))}
              {/* Compass */}
              <div style={{position:'absolute', right:14, top:14, padding:'6px 10px', background:'rgba(255,255,255,0.95)', borderRadius:8, fontSize:10, letterSpacing:'0.1em', fontWeight:600, border:'1px solid var(--rule)'}}>N ↑</div>
              {/* Scale */}
              <div style={{position:'absolute', left:14, bottom:14, padding:'6px 10px', background:'rgba(255,255,255,0.95)', borderRadius:8, fontSize:11, fontWeight:500, border:'1px solid var(--rule)'}}>
                <div style={{height:2, width:60, background:'var(--ink)', marginBottom:4}}/>500 m
              </div>
            </div>
          )}
        </div>
      </section>

      <Footer/>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// 3) PROPERTY DETAIL
// ════════════════════════════════════════════════════════════════════
function DetailScreen({ onNav, fav, onFav, propId='tideglass' }) {
  const p = PROPERTIES.find(x => x.id === propId) || PROPERTIES[1];

  return (
    <div className="sb-screen" style={{width:"100%", minHeight:980}}>
      <TopNav onNav={onNav}/>
      {/* Breadcrumb */}
      <div style={{padding:'18px 80px 0', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{fontSize:13, color:'var(--muted)'}}>
          <span onClick={()=>onNav('list')} style={{cursor:'pointer'}}>Langebaan</span> · {p.loc} · <span style={{color:'var(--ink)', fontWeight:600}}>{p.name}</span>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost btn-sm"><Ico.share s={14}/> Share</button>
          <button className={`btn btn-ghost btn-sm ${fav.includes(p.id)?'':''}`} onClick={()=>onFav(p.id)}>
            <Ico.heart filled={fav.includes(p.id)} s={14}/> Save
          </button>
        </div>
      </div>

      {/* Title block */}
      <div style={{padding:'20px 80px 24px'}}>
        <h1 className="sb-serif" style={{fontSize:64, margin:0, letterSpacing:'-0.025em', lineHeight:1.02}}>{p.name}</h1>
        <div style={{display:'flex', gap:18, marginTop:14, alignItems:'center', fontSize:14}}>
          <Rating value={p.rating} count={p.reviews}/>
          <span style={{color:'var(--muted)'}}>·</span>
          <span><Ico.pin s={13}/> {p.loc}, Langebaan</span>
          <span style={{color:'var(--muted)'}}>·</span>
          <span>Sleeps {p.guests} · {p.beds} bedrooms · {p.baths} baths</span>
        </div>
      </div>

      {/* Image gallery */}
      <div style={{padding:'0 80px'}}>
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gridTemplateRows:'250px 250px', gap:8, height:508}}>
          <SBImage tone={p.tone} style={{gridRow:'span 2', height:'100%'}} label="hero · 01 / 12" corner="open in gallery →"/>
          <SBImage tone="sand" style={{height:'100%'}} label="kitchen 02"/>
          <SBImage tone="shell" style={{height:'100%'}} label="primary bed 03"/>
          <SBImage tone="dusk" style={{height:'100%'}} label="bath 04"/>
          <div style={{position:'relative'}}>
            <SBImage tone="sky" style={{height:'100%'}} label="deck 05"/>
            <button className="btn btn-paper btn-sm" style={{position:'absolute', right:14, bottom:14}}>
              + 8 more
            </button>
          </div>
        </div>
      </div>

      {/* Main + booking sidebar */}
      <section style={{padding:'56px 80px 96px', display:'grid', gridTemplateColumns:'1fr 420px', gap:80}}>
        <div>
          {/* Host strip */}
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', paddingBottom:24, borderBottom:'1px solid var(--rule)'}}>
            <div>
              <div className="t-eyebrow" style={{color:'var(--muted)'}}>Whole house · hosted by</div>
              <div style={{fontWeight:600, fontSize:22, marginTop:4, letterSpacing:'-0.005em'}}>Imke & Theo van Wyk</div>
              <div style={{color:'var(--muted)', fontSize:13, marginTop:4}}>Superhost · 9 years on Langebaan · responds in &lt; 1h</div>
            </div>
            <div style={{width:64, height:64, borderRadius:999, background:'linear-gradient(135deg, var(--sand) 0%, var(--sand-shadow) 100%)', border:'1px solid var(--rule)'}}/>
          </div>

          {/* Description */}
          <div style={{padding:'32px 0', borderBottom:'1px solid var(--rule)'}}>
            <p style={{fontSize:17, lineHeight:1.7, maxWidth:640, margin:0}}>
              {p.blurb} A linen-soft palette, deep eaves and a wraparound deck that catches the late sun. The kitchen is properly equipped — Le Creuset, decent knives, a good pepper grinder. There is a quiet record player. Wi-Fi is real.
            </p>
            <p style={{fontSize:17, lineHeight:1.7, maxWidth:640, marginTop:14, color:'var(--muted)'}}>
              The sea is two minutes through marram grass. Beach showers on return. We provide robes, salt-free towels, and a tide chart pinned in the kitchen.
            </p>
          </div>

          {/* Quick specs */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24, padding:'32px 0', borderBottom:'1px solid var(--rule)'}}>
            {[
              { icon:'guests', l:'Sleeps',   v:p.guests},
              { icon:'bed',    l:'Bedrooms', v:p.beds},
              { icon:'bath',   l:'Baths',    v:p.baths},
              { icon:'pin',    l:'To sea',   v:p.walk===0?'On the dune':`${p.walk} min`},
            ].map(s => {
              const I = Ico[s.icon];
              return (
                <div key={s.l} style={{display:'flex', gap:14, alignItems:'center'}}>
                  <div style={{width:44, height:44, borderRadius:12, background:'var(--paper-2)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ocean)'}}><I s={20}/></div>
                  <div>
                    <div className="t-meta">{s.l}</div>
                    <div style={{fontWeight:600, marginTop:2, fontSize:16}}>{s.v}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Amenities */}
          <div style={{padding:'32px 0', borderBottom:'1px solid var(--rule)'}}>
            <h3 className="sb-serif" style={{fontSize:26, margin:'0 0 18px', letterSpacing:'-0.015em'}}>What’s here</h3>
            <div className="amen-grid">
              {[
                { i:'wifi',    l:'Fibre Wi-Fi · 200 Mbps' },
                { i:'fire',    l:'Wood-burning stove' },
                { i:'kitchen', l:'Full kitchen, Le Creuset' },
                { i:'pool',    l:'Outdoor rinse shower' },
                { i:'parking', l:'Covered parking for 2' },
                { i:'ac',      l:'Cross-ventilation cooling' },
                { i:'pet',     l:'One dog, by arrangement' },
                { i:'tide',    l:'Tide chart in kitchen' },
              ].map(a => { const I = Ico[a.i]; return (
                <div key={a.l} className="amen"><I/> {a.l}</div>
              );})}
            </div>
            <button className="btn btn-ghost btn-sm" style={{marginTop:18}}>Show all 31 amenities <Ico.arrow s={12}/></button>
          </div>

          {/* Calendar */}
          <div style={{padding:'32px 0', borderBottom:'1px solid var(--rule)'}}>
            <h3 className="sb-serif" style={{fontSize:26, margin:'0 0 6px', letterSpacing:'-0.015em'}}>When you’ll stay</h3>
            <div className="t-meta" style={{marginBottom:24}}>Selected · Fri 12 — Mon 15 June · 3 nights</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, maxWidth:680}}>
              <MiniCalendar year={2026} month={5} startDay={12} endDay={15} disabled={[2,3,4,5,22,23,24]}/>
              <MiniCalendar year={2026} month={6} startDay={0} endDay={0} disabled={[8,9,10,11,12,13,14]}/>
            </div>
          </div>

          {/* Location */}
          <div style={{padding:'32px 0'}}>
            <h3 className="sb-serif" style={{fontSize:26, margin:'0 0 18px', letterSpacing:'-0.015em'}}>Where on the bay</h3>
            <div className="map" style={{height:340, borderRadius:'var(--radius-lg)', border:'1px solid var(--rule)', position:'relative'}}>
              <div className="map-pin is-active" style={{left:'42%', top:'48%'}}>
                <div className="pin-pill">{p.name}</div>
                <div className="pin-stem"/>
              </div>
            </div>
            <div className="t-meta" style={{marginTop:14}}>Exact address shared after booking. Nearest village: Langebaan, 800 m.</div>
          </div>
        </div>

        {/* Booking sidebar (sticky) */}
        <aside style={{position:'sticky', top:96, alignSelf:'flex-start'}}>
          <div className="card" style={{padding:28, boxShadow:'0 24px 60px -28px rgba(10,37,64,0.35)'}}>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:18}}>
              <div>
                <span className="sb-serif" style={{fontSize:36, letterSpacing:'-0.015em'}}>R{p.price}</span>
                <span style={{color:'var(--muted)', fontSize:14}}> / night</span>
              </div>
              <Rating value={p.rating} count={p.reviews}/>
            </div>
            <div style={{border:'1px solid var(--rule-strong)', borderRadius:14, overflow:'hidden', marginBottom:14}}>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', borderBottom:'1px solid var(--rule)'}}>
                <div className="field" style={{padding:'12px 16px', borderRight:'1px solid var(--rule)'}}>
                  <label>Check in</label>
                  <input defaultValue="Fri 12 Jun"/>
                </div>
                <div className="field" style={{padding:'12px 16px'}}>
                  <label>Check out</label>
                  <input defaultValue="Mon 15 Jun"/>
                </div>
              </div>
              <div className="field" style={{padding:'12px 16px'}}>
                <label>Guests</label>
                <input defaultValue="4 adults · 1 dog"/>
              </div>
            </div>
            <button className="btn btn-primary" style={{width:'100%', justifyContent:'center', padding:'16px'}} onClick={()=>onNav('book', p.id)}>Reserve <Ico.arrow s={14}/></button>
            <div className="t-meta" style={{textAlign:'center', marginTop:10}}>You won’t be charged yet</div>

            <hr className="hr" style={{margin:'22px 0'}}/>
            <table style={{width:'100%', fontSize:14, borderCollapse:'collapse'}}>
              <tbody>
                <tr><td style={{padding:'6px 0'}}>R{p.price} × 3 nights</td><td style={{textAlign:'right', padding:'6px 0'}}>R{p.price*3}</td></tr>
                <tr><td style={{padding:'6px 0', color:'var(--muted)'}}>Cleaning fee</td><td style={{textAlign:'right', padding:'6px 0'}}>R 380</td></tr>
                <tr><td style={{padding:'6px 0', color:'var(--muted)'}}>Local levy</td><td style={{textAlign:'right', padding:'6px 0'}}>R 95</td></tr>
                <tr><td style={{padding:'6px 0', color:'var(--ocean)', fontWeight:600}}>Direct booking discount</td><td style={{textAlign:'right', padding:'6px 0', color:'var(--ocean)', fontWeight:600}}>− R 124</td></tr>
              </tbody>
              <tfoot>
                <tr style={{borderTop:'1px solid var(--rule)'}}>
                  <td style={{padding:'14px 0 0', fontWeight:700, fontSize:16}}>Total before tax</td>
                  <td style={{padding:'14px 0 0', textAlign:'right', fontWeight:700, fontSize:16}}>R{p.price*3 + 380 + 95 - 124}</td>
                </tr>
              </tfoot>
            </table>
          </div>

          <div className="card" style={{padding:20, marginTop:16, background:'var(--paper-2)', border:'1px solid var(--rule)'}}>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
              <Ico.tide s={18}/>
              <span style={{fontWeight:600}}>Tide & weather for your stay</span>
            </div>
            <Tide/>
            <div className="t-meta" style={{marginTop:10, lineHeight:1.5}}>Sunrise 07:14 · Sunset 17:58 · Best swim window: 13:00–15:00</div>
          </div>
        </aside>
      </section>

      <Footer/>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// 4) BOOKING FLOW
// ════════════════════════════════════════════════════════════════════
function BookScreen({ onNav, propId='tideglass' }) {
  const p = PROPERTIES.find(x => x.id === propId) || PROPERTIES[1];
  const [step, setStep] = useStateD(2); // 0..3
  const [guests, setGuests] = useStateD({ adults:3, kids:1, dogs:1 });
  const total = p.price*3 + 380 + 95 - 124;

  const right = (
    <aside style={{position:'sticky', top:120, alignSelf:'flex-start'}}>
      <div className="card" style={{padding:24, overflow:'hidden'}}>
        <SBImage tone={p.tone} style={{aspectRatio:'4/3', marginBottom:18}} label={p.img}/>
        <div style={{fontWeight:600, fontSize:18}}>{p.name}</div>
        <div className="t-meta">{p.loc} · Whole house</div>
        <Rating value={p.rating} count={p.reviews} compact/>
        <hr className="hr" style={{margin:'18px 0'}}/>
        <table style={{width:'100%', fontSize:13.5, borderCollapse:'collapse'}}>
          <tbody>
            <tr><td style={{padding:'4px 0', color:'var(--muted)'}}>Dates</td><td style={{textAlign:'right', padding:'4px 0', fontWeight:600}}>12 — 15 Jun</td></tr>
            <tr><td style={{padding:'4px 0', color:'var(--muted)'}}>Guests</td><td style={{textAlign:'right', padding:'4px 0'}}>{guests.adults+guests.kids} · {guests.dogs} dog</td></tr>
            <tr><td style={{padding:'4px 0', color:'var(--muted)'}}>R{p.price} × 3 nights</td><td style={{textAlign:'right', padding:'4px 0'}}>R{p.price*3}</td></tr>
            <tr><td style={{padding:'4px 0', color:'var(--muted)'}}>Cleaning</td><td style={{textAlign:'right', padding:'4px 0'}}>R 380</td></tr>
            <tr><td style={{padding:'4px 0', color:'var(--muted)'}}>Levy</td><td style={{textAlign:'right', padding:'4px 0'}}>R 95</td></tr>
            <tr><td style={{padding:'4px 0', color:'var(--ocean)'}}>Direct discount</td><td style={{textAlign:'right', padding:'4px 0', color:'var(--ocean)'}}>− R 124</td></tr>
          </tbody>
          <tfoot>
            <tr style={{borderTop:'1px solid var(--rule)'}}>
              <td style={{padding:'12px 0 0', fontWeight:700, fontSize:16}}>Total</td>
              <td style={{padding:'12px 0 0', textAlign:'right', fontWeight:700, fontSize:16}}>R{total}</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div className="t-meta" style={{padding:'18px 4px 0', display:'flex', gap:8, alignItems:'flex-start', lineHeight:1.5}}>
        <Ico.lock s={14}/> Booked directly with Imke &amp; Theo. We use a vetted payment partner; we never see your card.
      </div>
    </aside>
  );

  return (
    <div className="sb-screen" style={{width:"100%", minHeight:980, background:'var(--paper-2)'}}>
      <div style={{background:'var(--paper)'}}>
        <TopNav onNav={onNav}/>
      </div>
      <div style={{padding:'24px 80px', borderBottom:'1px solid var(--rule)', background:'var(--paper)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <button className="btn btn-ghost btn-sm" onClick={()=>onNav('detail', p.id)}><Ico.back s={14}/> Back to listing</button>
        <Steps step={step}/>
        <div className="t-meta">Booking ref pending</div>
      </div>

      <section style={{padding:'48px 80px 96px', display:'grid', gridTemplateColumns:'1fr 420px', gap:80}}>
        <div>
          {step===0 && (
            <div>
              <h2 className="sb-serif" style={{fontSize:42, margin:0, letterSpacing:'-0.02em'}}>Pick your dates</h2>
              <p style={{color:'var(--muted)', marginTop:10, maxWidth:520}}>Three-night minimum in season. We hold tides at the same height every full moon.</p>
              <div className="card" style={{padding:32, marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:48}}>
                <MiniCalendar year={2026} month={5} startDay={12} endDay={15} disabled={[2,3,4,5,22,23,24]}/>
                <MiniCalendar year={2026} month={6} startDay={0} endDay={0} disabled={[8,9,10,11]}/>
              </div>
              <div style={{display:'flex', justifyContent:'flex-end', marginTop:24}}>
                <button className="btn btn-primary btn-lg" onClick={()=>setStep(1)}>Continue <Ico.arrow s={14}/></button>
              </div>
            </div>
          )}
          {step===1 && (
            <div>
              <h2 className="sb-serif" style={{fontSize:42, margin:0, letterSpacing:'-0.02em'}}>Who’s coming?</h2>
              <p style={{color:'var(--muted)', marginTop:10, maxWidth:520}}>This house sleeps eight. A small dog is welcome with notice — Imke leaves a bowl by the door.</p>
              <div className="card" style={{padding:'8px 28px', marginTop:24}}>
                <Counter label="Adults" sub="Age 13+" value={guests.adults} onChange={(v)=>setGuests({...guests, adults:v})} min={1}/>
                <Counter label="Children" sub="Ages 2–12" value={guests.kids} onChange={(v)=>setGuests({...guests, kids:v})}/>
                <Counter label="Dogs" sub="Up to two, please" value={guests.dogs} onChange={(v)=>setGuests({...guests, dogs:v})} max={2}/>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
                <button className="btn btn-ghost" onClick={()=>setStep(0)}>Back</button>
                <button className="btn btn-primary btn-lg" onClick={()=>setStep(2)}>Continue <Ico.arrow s={14}/></button>
              </div>
            </div>
          )}
          {step===2 && (
            <div>
              <h2 className="sb-serif" style={{fontSize:42, margin:0, letterSpacing:'-0.02em'}}>A few last details</h2>
              <p style={{color:'var(--muted)', marginTop:10, maxWidth:520}}>Tell us a touch about your trip so Imke can set the house just right.</p>

              <div className="card" style={{padding:28, marginTop:24}}>
                <div className="t-eyebrow" style={{color:'var(--muted)'}}>Your details</div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginTop:14}}>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Full name</label><input defaultValue="Hanna Reyneke"/></div>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Email</label><input defaultValue="hanna@reyneke.co.za"/></div>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Mobile</label><input defaultValue="+27 82 555 0184"/></div>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Arrival time</label><input defaultValue="approx. 16:00"/></div>
                </div>
                <div className="field" style={{marginTop:22, borderBottom:'1px solid var(--rule)', paddingBottom:6}}>
                  <label>Anything Imke should know</label>
                  <input defaultValue="Celebrating my mother’s 70th — quiet stay, will cook in."/>
                </div>
              </div>

              <div className="card" style={{padding:28, marginTop:18}}>
                <div className="t-eyebrow" style={{color:'var(--muted)'}}>House rules</div>
                <ul style={{margin:'14px 0 0', padding:0, listStyle:'none', display:'grid', gap:10, fontSize:14}}>
                  <li style={{display:'flex', gap:10}}><Ico.check s={14} style={{color:'var(--ocean)', marginTop:4}}/> Check-in from 15:00, check-out by 11:00.</li>
                  <li style={{display:'flex', gap:10}}><Ico.check s={14} style={{color:'var(--ocean)', marginTop:4}}/> No smoking indoors. A pipe on the deck is fine.</li>
                  <li style={{display:'flex', gap:10}}><Ico.check s={14} style={{color:'var(--ocean)', marginTop:4}}/> Free cancellation until 28 days before arrival.</li>
                </ul>
              </div>

              <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
                <button className="btn btn-ghost" onClick={()=>setStep(1)}>Back</button>
                <button className="btn btn-primary btn-lg" onClick={()=>setStep(3)}>Continue to payment <Ico.arrow s={14}/></button>
              </div>
            </div>
          )}
          {step===3 && (
            <div>
              <h2 className="sb-serif" style={{fontSize:42, margin:0, letterSpacing:'-0.02em'}}>Pay & confirm</h2>
              <p style={{color:'var(--muted)', marginTop:10, maxWidth:520}}>A 30% deposit holds your dates today. The balance settles 28 days before arrival — automatically.</p>

              <div className="card" style={{padding:28, marginTop:24}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18}}>
                  <div className="t-eyebrow" style={{color:'var(--muted)'}}>Payment method</div>
                  <span style={{fontSize:11, color:'var(--muted)', display:'inline-flex', alignItems:'center', gap:6}}><Ico.lock s={12}/> Secured by Paystack</span>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:18}}>
                  <div className="chip chip-on" style={{justifyContent:'center', padding:'14px'}}>Card</div>
                  <div className="chip" style={{justifyContent:'center', padding:'14px'}}>EFT</div>
                  <div className="chip" style={{justifyContent:'center', padding:'14px'}}>Apple Pay</div>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:18}}>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Card number</label><input defaultValue="4242 4242 4242 4242"/></div>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>Expiry</label><input defaultValue="04 / 28"/></div>
                  <div className="field" style={{borderBottom:'1px solid var(--rule)', paddingBottom:6}}><label>CVC</label><input defaultValue="•••"/></div>
                </div>
              </div>

              <div className="card" style={{padding:24, marginTop:18, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <div>
                  <div style={{fontWeight:600}}>Pay 30% now</div>
                  <div className="t-meta">Balance R{Math.round(total*0.7)} due 15 May</div>
                </div>
                <div className="sb-serif" style={{fontSize:32, letterSpacing:'-0.015em'}}>R{Math.round(total*0.3)}</div>
              </div>

              <div style={{display:'flex', justifyContent:'space-between', marginTop:24, alignItems:'center'}}>
                <button className="btn btn-ghost" onClick={()=>setStep(2)}>Back</button>
                <button className="btn btn-primary btn-lg" onClick={()=>onNav('confirm', p.id)}>Confirm & pay R{Math.round(total*0.3)} <Ico.arrow s={14}/></button>
              </div>
            </div>
          )}
        </div>
        {right}
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// 5) CONFIRMATION
// ════════════════════════════════════════════════════════════════════
function ConfirmScreen({ onNav, propId='tideglass' }) {
  const p = PROPERTIES.find(x => x.id === propId) || PROPERTIES[1];
  const ref = 'LBN-2026-0418-' + p.id.slice(0,3).toUpperCase();

  return (
    <div className="sb-screen" style={{width:"100%", minHeight:980, background:'var(--paper-2)'}}>
      <div style={{background:'var(--paper)'}}>
        <TopNav onNav={onNav}/>
      </div>

      {/* Hero */}
      <section style={{position:'relative', padding:'80px 80px 56px', textAlign:'center', overflow:'hidden'}}>
        <div style={{display:'inline-flex', alignItems:'center', justifyContent:'center', width:64, height:64, borderRadius:999, background:'var(--ink)', color:'var(--paper)', marginBottom:24}}>
          <Ico.check s={28}/>
        </div>
        <div className="t-eyebrow" style={{color:'var(--muted)'}}>Booking confirmed</div>
        <h1 className="sb-serif" style={{fontSize:72, letterSpacing:'-0.025em', margin:'14px auto 16px', maxWidth:900, lineHeight:1.02}}>
          You’re booked into <em style={{fontStyle:'italic'}}>{p.name}</em>, Fri 12 — Mon 15 June.
        </h1>
        <p style={{maxWidth:520, margin:'0 auto', color:'var(--muted)', fontSize:16, lineHeight:1.6}}>
          Imke has been notified and will be in touch before Wednesday with the gate code and her mobile number. The kettle will be on.
        </p>
        <div style={{display:'flex', gap:10, justifyContent:'center', marginTop:32}}>
          <button className="btn btn-primary btn-lg">Add to calendar <Ico.cal s={14}/></button>
          <button className="btn btn-ghost btn-lg">Email receipt</button>
        </div>
        <div className="t-meta" style={{marginTop:24}}>Reference · <span className="sb-mono" style={{color:'var(--ink)'}}>{ref}</span></div>
      </section>

      {/* Itinerary */}
      <section style={{padding:'24px 80px 96px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <SBImage tone={p.tone} style={{aspectRatio:'2/1', borderRadius:0}} label={p.img} corner="your house"/>
          <div style={{padding:28}}>
            <div className="t-eyebrow" style={{color:'var(--muted)'}}>Stay summary</div>
            <h3 className="sb-serif" style={{fontSize:28, margin:'8px 0 4px', letterSpacing:'-0.015em'}}>{p.name}</h3>
            <div style={{color:'var(--muted)', fontSize:13}}>{p.loc} · Langebaan</div>
            <hr className="hr" style={{margin:'20px 0'}}/>
            <table style={{width:'100%', fontSize:14, borderCollapse:'collapse'}}>
              <tbody>
                <tr><td style={{padding:'8px 0', color:'var(--muted)'}}>Check in</td><td style={{textAlign:'right', padding:'8px 0', fontWeight:600}}>Fri 12 Jun · from 15:00</td></tr>
                <tr><td style={{padding:'8px 0', color:'var(--muted)'}}>Check out</td><td style={{textAlign:'right', padding:'8px 0', fontWeight:600}}>Mon 15 Jun · by 11:00</td></tr>
                <tr><td style={{padding:'8px 0', color:'var(--muted)'}}>Guests</td><td style={{textAlign:'right', padding:'8px 0', fontWeight:600}}>4 · 1 dog</td></tr>
                <tr><td style={{padding:'8px 0', color:'var(--muted)'}}>Paid today</td><td style={{textAlign:'right', padding:'8px 0', fontWeight:600}}>R 312</td></tr>
                <tr><td style={{padding:'8px 0', color:'var(--muted)'}}>Balance · 15 May</td><td style={{textAlign:'right', padding:'8px 0', fontWeight:600}}>R 727</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:24}}>
          <div className="card" style={{padding:28}}>
            <div className="t-eyebrow" style={{color:'var(--muted)'}}>Before you arrive</div>
            <ul style={{margin:'14px 0 0', padding:0, listStyle:'none', display:'grid', gap:14, fontSize:14}}>
              {[
                { d:'Wed 10 Jun', t:'Gate code & directions emailed' },
                { d:'Thu 11 Jun', t:'Imke calls to set arrival time' },
                { d:'Fri 12 Jun', t:'Kettle on, robes out · 14:00' },
                { d:'Sat 13 Jun', t:'High water 15:18 — best swim window' },
              ].map((x,i) => (
                <li key={i} style={{display:'flex', gap:14, alignItems:'flex-start', paddingTop: i?14:0, borderTop: i?'1px solid var(--rule)':'none'}}>
                  <div className="sb-mono" style={{width:90, fontSize:11.5, color:'var(--muted)', letterSpacing:'0.04em', paddingTop:2}}>{x.d.toUpperCase()}</div>
                  <div style={{flex:1}}>{x.t}</div>
                </li>
              ))}
            </ul>
          </div>

          <div className="card" style={{padding:28, background:'linear-gradient(180deg, var(--shallow) 0%, var(--paper-2) 100%)'}}>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
              <Ico.tide s={20}/>
              <div className="t-eyebrow" style={{color:'var(--ocean)'}}>Tides for your stay</div>
            </div>
            {[
              { d:'Fri 12', hi:'14:32 · 1.8m', lo:'08:14 · 0.4m' },
              { d:'Sat 13', hi:'15:18 · 1.9m', lo:'09:01 · 0.3m' },
              { d:'Sun 14', hi:'16:02 · 1.9m', lo:'09:46 · 0.3m' },
            ].map((x,i) => (
              <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'10px 0', borderTop: i?'1px solid rgba(13,59,92,0.15)':'none'}}>
                <span style={{fontWeight:600}}>{x.d}</span>
                <span className="sb-mono" style={{fontSize:12.5}}>HW {x.hi}</span>
                <span className="sb-mono" style={{fontSize:12.5, color:'var(--muted)'}}>LW {x.lo}</span>
              </div>
            ))}
          </div>

          <div style={{display:'flex', gap:12}}>
            <button className="btn btn-ghost" style={{flex:1, justifyContent:'center'}} onClick={()=>onNav('home')}>Browse the bay</button>
            <button className="btn btn-primary" style={{flex:1, justifyContent:'center'}}>View itinerary</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, ListScreen, DetailScreen, BookScreen, ConfirmScreen });