/* ============================================================
   WorkStay — Property Detail (luxury architecture presentation)
   exports: PropertyPage, OperatorPage
   ============================================================ */
const { useState: useStatePr, useEffect: useEffectPr } = React;

function PropertyPage({ go, params = {}, wish = [], toggleWish }) {
  const { PROPERTIES, OPERATORS, REVIEWS, AI_SUMMARY } = window.WS_DATA;
  const p = PROPERTIES.find(x => x.id === params.id) || PROPERTIES[0];
  const op = OPERATORS[p.operator];
  const wished = wish.includes(p.id);
  const m = p.metrics;

  return (
    <main style={{ paddingTop: 86 }}>
      {/* ---------- edge-to-edge gallery ---------- */}
      <section style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gridTemplateRows: '300px 300px', gap: 10, padding: '10px var(--gutter)' }} className="ws-gallery">
          <Scene variant={p.scene} style={{ gridRow: 'span 2', borderRadius: 'var(--r-lg)', minHeight: 0 }} />
          <Scene variant="studio" style={{ borderRadius: 'var(--r-lg)' }} sill={false} plants={false} />
          <Scene variant="warm" style={{ borderRadius: 'var(--r-lg)' }} sill={false} />
        </div>
        {/* floating title */}
        <div className="wrap" style={{ marginTop: 28, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 13px', borderRadius: 999, background: 'rgba(124,108,240,0.14)', color: 'var(--violet-soft)', fontSize: 12.5, fontWeight: 500 }}>
                <Icon name="shield" size={14} /> Deep Work Certified
              </span>
              <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>{p.collection}</span>
            </div>
            <h1 className="d2" style={{ margin: 0 }}>{p.name}</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 16, color: 'var(--text-dim)', fontSize: 15, flexWrap: 'wrap' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="pin" size={16} /> {p.city}, {p.country}</span>
              <span>{p.beds} bd · {p.baths} ba · {p.sqm} m²</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="star" size={14} style={{ color: 'var(--amber)' }} /> {op.rating} · {REVIEWS.length * 14} stays</span>
            </div>
          </div>
          <div className="ws-pheader-actions" style={{ display: 'flex', gap: 10 }}>
            <Btn variant="line" icon="heart" onClick={() => toggleWish(p.id)} style={wished ? { borderColor: 'var(--violet)', color: 'var(--violet-soft)' } : {}}>{wished ? 'Saved' : 'Save'}</Btn>
          </div>
        </div>
      </section>

      {/* ---------- body: content + sticky booking ---------- */}
      <section className="section" style={{ paddingTop: 70 }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 'clamp(36px,5vw,72px)', alignItems: 'start' }} className="ws-pbody">
          <div style={{ minWidth: 0 }}>
            <p className="serif" style={{ fontSize: 'clamp(24px,2.6vw,34px)', lineHeight: 1.3, margin: 0, color: 'var(--text)' }}>{p.tagline}</p>
            <p style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.65, color: 'var(--text-dim)', maxWidth: 560 }}>
              Built and maintained by {op.name}, every detail here is tuned for the rhythm of focused work — from the wired desk to the silence that settles in after dark.
            </p>

            {/* Workspace Intelligence */}
            <div style={{ marginTop: 56 }}>
              <SectionHead eyebrow="Workspace Intelligence" title="Measured, not marketed." style={{ marginBottom: 32 }} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="ws-wi-grid">
                <WiCard icon="wifi" big={p.speed} unit="Mbps" label="Live verified down" tone="good" note="Measured 3 days ago" />
                <WiCard icon="quiet" big={p.noise} unit="dB" label="Quiet index" tone="violet" note={`Quieter than ${p.quiet}% of stays`} />
                <WiCard icon="video" big={m.video} unit="/100" label="Video-call ready" tone="violet" note="Tested lighting + uplink" />
                <WiCard icon="power" big="100" unit="%" label="Power backup" tone="good" note="Redundant UPS + solar" />
              </div>

              {/* metric bars */}
              <div className="glass" style={{ marginTop: 16, padding: 26, borderRadius: 'var(--r-lg)' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '22px 40px' }} className="ws-wi-bars">
                  <MetricBar label="Internet reliability" value={m.internet} icon="wifi" />
                  <MetricBar label="Quiet" value={m.quiet} icon="quiet" delay={0.05} />
                  <MetricBar label="Natural light" value={m.light} icon="light" delay={0.1} />
                  <MetricBar label="Ergonomic setup" value={m.ergonomic} icon="ergo" delay={0.15} />
                </div>
              </div>
            </div>

            {/* Natural light timeline */}
            <LightTimeline />

            {/* Daily noise timeline */}
            <NoiseTimeline quiet={p.quiet} />

            {/* amenities */}
            <div style={{ marginTop: 56 }}>
              <SectionHead eyebrow="The space" title="What’s in the room." style={{ marginBottom: 28 }} />
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }} className="ws-amen">
                {p.amenities.map(a => (
                  <div key={a} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderRadius: 'var(--r-sm)', background: 'var(--surface)', border: '1px solid var(--line)' }}>
                    <Icon name="check" size={16} style={{ color: 'var(--violet-soft)' }} /> <span style={{ fontSize: 14.5 }}>{a}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* operator strip */}
            <button onClick={() => go('operator', { id: op.id })} style={{ width: '100%', textAlign: 'left', marginTop: 56, padding: 26, borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--line)', display: 'flex', gap: 18, alignItems: 'center', transition: 'border-color .3s' }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--line-2)'} onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--line)'}>
              <span style={{ width: 56, height: 56, borderRadius: 16, background: 'linear-gradient(135deg, var(--surface-3), var(--charcoal))', border: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 26 }}>{op.initials}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>Operated by</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 18, fontWeight: 500, marginTop: 2 }}>{op.name} <Icon name="shield" size={15} style={{ color: 'var(--violet-soft)' }} /></div>
                <div style={{ fontSize: 13.5, color: 'var(--text-dim)', marginTop: 4 }}>“{op.philosophy}”</div>
              </div>
              <Icon name="arrowUR" size={20} style={{ color: 'var(--text-dim)' }} />
            </button>

            {/* reviews */}
            <div style={{ marginTop: 56 }}>
              <SectionHead eyebrow="Remote work reviews" title="Reviewed for focus." style={{ marginBottom: 24 }} />
              <div className="glass" style={{ padding: 22, borderRadius: 'var(--r-lg)', borderLeft: '2px solid var(--violet)', marginBottom: 18 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--violet-soft)', marginBottom: 10 }}><Icon name="gauge" size={14} /> AI review summary</div>
                <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6 }}>{AI_SUMMARY}</p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="ws-amen">
                {REVIEWS.map(r => (
                  <div key={r.id} style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 20 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: 'rgba(124,108,240,0.12)', color: 'var(--violet-soft)', fontSize: 11.5, marginBottom: 12 }}><Icon name="check" size={11} /> {r.tag}</span>
                    <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-dim)', margin: '0 0 14px' }}>“{r.body}”</p>
                    <div style={{ fontSize: 13 }}>{r.who} · <span style={{ color: 'var(--text-faint)' }}>{r.role}</span></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* sticky booking card */}
          <aside style={{ position: 'sticky', top: 96 }} className="ws-bookcard">
            <div className="glass" style={{ borderRadius: 'var(--r-xl)', padding: 26, boxShadow: 'var(--shadow-soft), 0 0 70px -30px var(--violet-glow)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div><span style={{ fontFamily: 'var(--serif)', fontSize: 34 }}>${p.price.toLocaleString()}</span><span style={{ fontSize: 14, color: 'var(--text-faint)' }}> / month</span></div>
                <WorkScore value={p.workScore} size={88} stroke={6} label="Work" />
              </div>
              <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--line)' }}>
                {[['Move in', 'Apr 12'], ['Move out', 'Jul 12'], ['Duration', '3 months'], ['Guests', '1 worker']].map(([l, v], i) => (
                  <div key={l} style={{ padding: '14px 16px', borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none', borderTop: i > 1 ? '1px solid var(--line)' : 'none' }}>
                    <div style={{ fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>{l}</div>
                    <div style={{ fontSize: 14.5, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 18 }}><Btn size="lg" style={{ width: '100%', justifyContent: 'center' }} icon="arrow" onClick={() => go('booking', { id: p.id })}>Reserve this stay</Btn></div>
              <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--text-faint)', textAlign: 'center' }}>Free to hold · You won’t be charged yet</div>
              <div style={{ marginTop: 20, paddingTop: 18, borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 11 }}>
                {[['$' + p.price.toLocaleString() + ' × 3 months', '$' + (p.price * 3).toLocaleString()], ['Workspace setup', 'Included'], ['Operator service', '$240']].map(([l, v]) => (
                  <div key={l} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--text-dim)' }}><span>{l}</span><span>{v}</span></div>
                ))}
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 15, paddingTop: 11, borderTop: '1px solid var(--line)', color: 'var(--text)' }}><span>Total</span><span style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>${(p.price * 3 + 240).toLocaleString()}</span></div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function WiCard({ icon, big, unit, label, tone, note }) {
  const col = tone === 'good' ? 'var(--good)' : 'var(--violet-soft)';
  return (
    <div style={{ padding: 22, borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -30, right: -30, width: 100, height: 100, borderRadius: '50%', background: `radial-gradient(circle, ${tone === 'good' ? 'rgba(111,207,151,0.12)' : 'var(--violet-glow)'}, transparent 70%)` }} />
      <Icon name={icon} size={19} style={{ color: col, position: 'relative' }} />
      <div style={{ marginTop: 16, display: 'flex', alignItems: 'baseline', gap: 5, position: 'relative' }}>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 40, lineHeight: 1 }}>{big}</span>
        <span style={{ fontSize: 14, color: 'var(--text-faint)' }}>{unit}</span>
      </div>
      <div style={{ fontSize: 14, marginTop: 8 }}>{label}</div>
      <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 4 }}>{note}</div>
    </div>
  );
}

/* natural light simulation across the day */
function LightTimeline() {
  const [hour, setHour] = useStatePr(13);
  const warmth = Math.max(0, 1 - Math.abs(hour - 13) / 9);
  const sunX = ((hour - 6) / 12) * 100;
  const sunY = 80 - Math.sin(((hour - 6) / 12) * Math.PI) * 64;
  return (
    <div style={{ marginTop: 56 }}>
      <SectionHead eyebrow="Natural light simulation" title="Watch the room fill with light." style={{ marginBottom: 28 }} />
      <div style={{ position: 'relative', height: 260, borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--line)' }}>
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, hsl(${30 + warmth * 10}, ${30 + warmth * 30}%, ${8 + warmth * 12}%), hsl(28, 25%, ${4 + warmth * 6}%))`, transition: 'background .5s' }} />
        {/* sun */}
        <div style={{ position: 'absolute', left: `${sunX}%`, top: `${sunY}%`, transform: 'translate(-50%,-50%)', width: 70, height: 70, borderRadius: '50%',
          background: `radial-gradient(circle, hsl(40, 90%, ${60 + warmth * 25}%), transparent 65%)`, filter: 'blur(2px)', transition: 'all .5s', opacity: 0.5 + warmth * 0.5 }} />
        {/* room light beam */}
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(60% 70% at ${sunX}% 110%, hsla(38,80%,60%,${warmth * 0.4}), transparent 60%)`, transition: 'all .5s' }} />
        {/* window frame silhouette */}
        <div style={{ position: 'absolute', left: '50%', bottom: 0, width: '70%', height: '64%', transform: 'translateX(-50%)', border: '2px solid rgba(0,0,0,0.5)', borderBottom: 'none', borderRadius: '8px 8px 0 0' }}>
          <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 2, background: 'rgba(0,0,0,0.4)' }} />
          <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', height: 2, background: 'rgba(0,0,0,0.4)' }} />
        </div>
        <div className="glass" style={{ position: 'absolute', left: 18, top: 18, padding: '8px 13px', borderRadius: 999, fontSize: 13, display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon name="light" size={14} style={{ color: 'var(--amber)' }} /> {hour > 12 ? `${hour === 12 ? 12 : hour - 12}:00 PM` : `${hour}:00 AM`} · {warmth > 0.6 ? 'Bright' : warmth > 0.3 ? 'Soft' : 'Dim'}
        </div>
      </div>
      <input type="range" min="6" max="20" value={hour} onChange={e => setHour(+e.target.value)} className="ws-range" style={{ width: '100%', marginTop: 18 }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-faint)', marginTop: 4 }}><span>6 AM</span><span>Noon</span><span>8 PM</span></div>
    </div>
  );
}

function NoiseTimeline({ quiet }) {
  const noise = [40, 38, 35, 32, 36, 42, 44, 40, 34, 30, 26, 23, 21, 20, 22];
  return (
    <div style={{ marginTop: 56 }}>
      <SectionHead eyebrow="Daily noise timeline" title="It gets silent after 8." style={{ marginBottom: 28 }} />
      <div className="glass" style={{ padding: 26, borderRadius: 'var(--r-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 120 }}>
          {noise.map((n, i) => {
            const h = ((n - 16) / 30) * 100;
            const calm = n <= 26;
            return <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center', gap: 6 }}>
              <div title={`${n} dB`} style={{ width: '100%', height: `${h}%`, minHeight: 6, borderRadius: 4, background: calm ? 'linear-gradient(var(--violet-soft), var(--violet-deep))' : 'var(--surface-3)' }} />
            </div>;
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'var(--text-ghost)', marginTop: 10 }}>
          <span>6 AM</span><span>Noon</span><span>6 PM</span><span>Midnight</span>
        </div>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 9, fontSize: 13, color: 'var(--text-dim)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span style={{ width: 11, height: 11, borderRadius: 3, background: 'var(--violet)' }} /> Deep-focus quiet</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span style={{ width: 11, height: 11, borderRadius: 3, background: 'var(--surface-3)' }} /> Ambient</span>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Operator profile page ---------------- */
function OperatorPage({ go, params = {} }) {
  const { OPERATORS, PROPERTIES } = window.WS_DATA;
  const op = OPERATORS[params.id] || OPERATORS.atlas;
  const props = PROPERTIES.filter(p => p.operator === op.id);
  const stats = [['Spaces', op.properties], ['Rating', op.rating], ['Reviews', op.reviews], ['Since', op.since]];
  return (
    <main style={{ paddingTop: 86 }}>
      <section className="ws-op-hero" style={{ position: 'relative', overflow: 'hidden' }}>
        <Scene variant="warm" style={{ position: 'absolute', inset: 0, height: 420 }} />
        <div style={{ position: 'absolute', inset: 0, height: 420, background: 'linear-gradient(0deg, var(--bg) 4%, transparent 70%), linear-gradient(90deg, rgba(10,10,12,0.7), transparent)' }} />
        <div className="wrap" style={{ position: 'relative', paddingTop: 150 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 22 }}>
            <span style={{ width: 92, height: 92, borderRadius: 24, background: 'linear-gradient(135deg, var(--surface-3), var(--charcoal))', border: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 44, boxShadow: 'var(--shadow-soft)' }}>{op.initials}</span>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <h1 className="d2" style={{ margin: 0 }}>{op.name}</h1>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 999, background: 'rgba(124,108,240,0.16)', color: 'var(--violet-soft)', fontSize: 12.5 }}><Icon name="shield" size={13} /> Verified Operator</span>
              </div>
              <div style={{ fontSize: 14.5, color: 'var(--text-dim)', marginTop: 10 }}>{op.location}</div>
            </div>
          </div>
          <p className="serif" style={{ fontSize: 'clamp(24px,3vw,38px)', lineHeight: 1.3, marginTop: 40, maxWidth: 760 }}>“{op.philosophy}”</p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 50 }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 56 }} className="ws-amen">
            {stats.map(([l, v]) => (
              <div key={l} style={{ padding: 22, borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--line)' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 38 }}>{v}</div>
                <div style={{ fontSize: 13, color: 'var(--text-faint)', marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,64px)', marginBottom: 64 }} className="ws-intel">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>The story</div>
              <p style={{ fontSize: 16.5, lineHeight: 1.7, color: 'var(--text-dim)', margin: 0 }}>{op.story}</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Workspace standards</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {op.standards.map(s => (
                  <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderRadius: 'var(--r-sm)', background: 'var(--surface)', border: '1px solid var(--line)' }}>
                    <Icon name="check" size={16} style={{ color: 'var(--violet-soft)' }} /> <span style={{ fontSize: 14.5 }}>{s}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <SectionHead eyebrow="Hosted spaces" title="The portfolio." style={{ marginBottom: 32 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20 }} className="ws-amen">
            {props.map(p => (
              <button key={p.id} onClick={() => go('property', { id: p.id })} style={{ position: 'relative', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden', height: 300, padding: 0, textAlign: 'left', background: 'none' }}>
                <Scene variant={p.scene} style={{ position: 'absolute', inset: 0 }} sill={false} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(10,10,12,0.9), transparent 60%)' }} />
                <div style={{ position: 'absolute', right: 16, top: 16 }}><WorkScore value={p.workScore} size={70} stroke={5} label="Work" /></div>
                <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 22 }}>
                  <div className="serif" style={{ fontSize: 26 }}>{p.name}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-dim)', marginTop: 4 }}>{p.city} · ${p.price.toLocaleString()}/mo</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PropertyPage, OperatorPage });
