/* ============================================================
   WorkStay — Home page sections (below hero)
   exports: HomePage
   ============================================================ */
const { useRef: useRefHome } = React;

/* ---------- Discovery: editorial collections (not a grid) ---------- */
function CollectionCard({ c, go, big = false }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={() => go('explore', { collection: c.title })}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ position: 'relative', display: 'block', textAlign: 'left', border: '1px solid var(--line)',
        borderRadius: 'var(--r-lg)', overflow: 'hidden', padding: 0, background: 'var(--surface)',
        height: big ? 460 : 300, transition: 'transform .5s cubic-bezier(.16,1,.3,1), border-color .4s',
        transform: hov ? 'translateY(-6px)' : 'none', borderColor: hov ? 'var(--line-2)' : 'var(--line)', width: '100%' }}>
      <Scene variant={c.scene} style={{ position: 'absolute', inset: 0, transform: hov ? 'scale(1.06)' : 'scale(1)', transition: 'transform 1s cubic-bezier(.16,1,.3,1)' }} sill={false} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(10,10,12,0.9) 6%, transparent 62%)' }} />
      <div style={{ position: 'absolute', top: 18, right: 18, opacity: hov ? 1 : 0, transform: hov ? 'none' : 'translateY(-6px)', transition: 'all .4s' }}>
        <span className="glass" style={{ width: 42, height: 42, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="arrowUR" size={18} />
        </span>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: big ? 30 : 24 }}>
        <div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 8 }}>{c.count} curated spaces</div>
        <div className="serif" style={{ fontSize: big ? 34 : 25, lineHeight: 1.05 }}>{c.title}</div>
        <div style={{ fontSize: 14, color: 'var(--text-dim)', marginTop: 6 }}>{c.sub}</div>
      </div>
    </button>
  );
}

function Discovery({ go }) {
  const { COLLECTIONS } = window.WS_DATA;
  return (
    <section className="section" style={{ position: 'relative' }}>
      <div className="wrap">
        <Reveal><div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 54 }}>
          <SectionHead eyebrow="Curated discovery" title={<>Not listings.<br />Collections worth living in.</>}
            sub="Editorial worlds, each tuned to a way of working — chosen, not crowdsourced." />
          <Btn variant="line" icon="arrow" onClick={() => go('explore')}>Explore all</Btn>
        </div></Reveal>
        {/* asymmetric editorial layout */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 22 }} className="ws-disc-top">
          <Reveal><CollectionCard c={COLLECTIONS[0]} go={go} big /></Reveal>
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 22 }}>
            <Reveal delay={0.08}><CollectionCard c={COLLECTIONS[1]} go={go} /></Reveal>
            <Reveal delay={0.16}><CollectionCard c={COLLECTIONS[2]} go={go} /></Reveal>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, marginTop: 22 }} className="ws-disc-bot">
          {COLLECTIONS.slice(3).map((c, i) => <Reveal key={c.id} delay={i * 0.08}><CollectionCard c={c} go={go} /></Reveal>)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Workspace Intelligence preview ---------- */
function IntelligencePreview({ go }) {
  const feats = [
    { icon: 'wifi', t: 'Live Internet Verification', d: 'Real throughput, measured monthly — not a checkbox.' },
    { icon: 'wave', t: 'Daily Noise Timeline', d: 'See exactly how quiet a home gets, hour by hour.' },
    { icon: 'gauge', t: 'Focus Score', d: 'One number for how work-ready an environment truly is.' },
    { icon: 'light', t: 'Natural Light Simulation', d: 'Watch the light move through the room across the day.' },
  ];
  return (
    <section className="section" id="intelligence" style={{ background: 'var(--bg-2)', borderBlock: '1px solid var(--line)' }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 'clamp(40px,6vw,90px)', alignItems: 'center' }} className="ws-intel">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Workspace Intelligence</div>
          <h2 className="d2" style={{ margin: 0 }}>Every home, <span className="italic" style={{ color: 'var(--beige)' }}>measured</span> for work.</h2>
          <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.6, color: 'var(--text-dim)', maxWidth: 480 }}>
            We instrument the things that actually decide your day — bandwidth, silence, light, and ergonomics — and turn them into signals you can trust.
          </p>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26 }} className="ws-intel-feats">
            {feats.map(f => (
              <div key={f.t} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--surface-2)', border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--violet-soft)', marginBottom: 4 }}><Icon name={f.icon} size={19} /></span>
                <div style={{ fontSize: 15.5, fontWeight: 500 }}>{f.t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-dim)' }}>{f.d}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40 }}><Btn variant="line" icon="arrow" onClick={() => go('property', { id: 'still-house' })}>See a full Work Profile</Btn></div>
        </Reveal>

        <Reveal delay={0.1}>
          <IntelligencePanel />
        </Reveal>
      </div>
    </section>
  );
}

/* the futuristic floating data panel */
function IntelligencePanel() {
  const noise = [38, 34, 30, 27, 24, 22, 21, 24, 33, 40, 36, 30, 26, 23];
  return (
    <div className="glass" style={{ position: 'relative', borderRadius: 'var(--r-xl)', padding: 30, boxShadow: 'var(--shadow-soft), 0 0 80px -30px var(--violet-glow)' }}>
      <div style={{ position: 'absolute', top: -1, left: 40, right: 40, height: 1, background: 'linear-gradient(90deg, transparent, var(--violet-soft), transparent)' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>Still House · Bir</div>
          <div className="serif" style={{ fontSize: 26, marginTop: 2 }}>Work Profile</div>
        </div>
        <WorkScore value={95} size={104} stroke={7} label="Focus" />
      </div>

      <div style={{ display: 'flex', gap: 14, marginTop: 24 }}>
        <StatChip icon="wifi" big="950" unit="Mbps" label="Verified down" tone="good" />
        <StatChip icon="quiet" big="21" unit="dB" label="Quiet index" tone="violet" />
      </div>

      {/* noise timeline */}
      <div style={{ marginTop: 26 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-faint)', marginBottom: 12 }}>
          <span style={{ letterSpacing: '0.1em', textTransform: 'uppercase' }}>Daily noise timeline</span><span>Silent after 8pm</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 78 }}>
          {noise.map((n, i) => {
            const h = ((n - 18) / 24) * 100;
            return <div key={i} title={`${n} dB`} style={{ flex: 1, height: `${h}%`, borderRadius: 4, alignSelf: 'flex-end',
              background: n <= 26 ? 'linear-gradient(var(--violet-soft), var(--violet-deep))' : 'var(--surface-3)',
              transition: 'height .4s', minHeight: 6 }} />;
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-ghost)', marginTop: 8 }}>
          <span>6a</span><span>12p</span><span>6p</span><span>12a</span>
        </div>
      </div>

      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <MetricBar label="Video-call ready" value={96} icon="video" />
        <MetricBar label="Natural light" value={86} icon="light" delay={0.1} />
        <MetricBar label="Ergonomic setup" value={92} icon="ergo" delay={0.2} />
      </div>
    </div>
  );
}

function StatChip({ icon, big, unit, label, tone }) {
  const col = tone === 'good' ? 'var(--good)' : 'var(--violet-soft)';
  return (
    <div style={{ flex: 1, padding: 16, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', border: '1px solid var(--line)' }}>
      <Icon name={icon} size={17} style={{ color: col }} />
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 5 }}>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1 }}>{big}</span>
        <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>{unit}</span>
      </div>
      <div style={{ fontSize: 12.5, color: 'var(--text-dim)', marginTop: 6 }}>{label}</div>
    </div>
  );
}

/* ---------- Operators teaser ---------- */
function OperatorsTeaser({ go }) {
  const { OPERATORS } = window.WS_DATA;
  const ops = Object.values(OPERATORS);
  return (
    <section className="section" id="operators">
      <div className="wrap">
        <Reveal><SectionHead align="center" eyebrow="The Operators" title={<>Hosted by boutique brands,<br />not landlords.</>}
          sub="Every WorkStay is run by a verified Operator — a small studio obsessed with the craft of work-ready hospitality." style={{ marginBottom: 56 }} /></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="ws-ops">
          {ops.map((op, i) => (
            <Reveal key={op.id} delay={i * 0.08}>
              <button onClick={() => go('operator', { id: op.id })} style={{ width: '100%', textAlign: 'left', background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 'var(--r-lg)', padding: 28, transition: 'all .4s', display: 'flex', flexDirection: 'column', gap: 18 }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-2)'; e.currentTarget.style.transform = 'translateY(-5px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'none'; }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 52, height: 52, 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: 24 }}>{op.initials}</span>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 16.5, fontWeight: 500 }}>
                      {op.name} <Icon name="shield" size={15} style={{ color: 'var(--violet-soft)' }} />
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--text-faint)', marginTop: 2 }}>{op.location}</div>
                  </div>
                </div>
                <p className="serif" style={{ fontSize: 19, lineHeight: 1.3, color: 'var(--text)', margin: 0 }}>“{op.philosophy}”</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 18, fontSize: 13, color: 'var(--text-dim)', paddingTop: 6 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="star" size={13} style={{ color: 'var(--amber)' }} /> {op.rating}</span>
                  <span>{op.properties} spaces</span>
                  <span>Since {op.since}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Reviews (productivity, not tourism) ---------- */
function ReviewsBand() {
  const { REVIEWS, AI_SUMMARY } = window.WS_DATA;
  return (
    <section className="section" style={{ background: 'var(--bg-2)', borderBlock: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'clamp(40px,6vw,80px)', alignItems: 'center' }} className="ws-rev">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Remote work reviews</div>
            <h2 className="d2" style={{ margin: 0 }}>Reviewed for <span className="italic" style={{ color: 'var(--beige)' }}>focus</span>, not for sightseeing.</h2>
            <div className="glass" style={{ marginTop: 32, padding: 24, borderRadius: 'var(--r-lg)', borderLeft: '2px solid var(--violet)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--violet-soft)', marginBottom: 12 }}>
                <Icon name="gauge" size={15} /> AI review summary
              </div>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'var(--text)' }}>{AI_SUMMARY}</p>
            </div>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="ws-rev-grid">
            {REVIEWS.map((r, i) => (
              <Reveal key={r.id} delay={i * 0.06}>
                <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: 22, height: '100%' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 11px', borderRadius: 999,
                    background: 'rgba(124,108,240,0.12)', color: 'var(--violet-soft)', fontSize: 12, fontWeight: 500, marginBottom: 14 }}>
                    <Icon name="check" size={12} /> {r.tag}
                  </span>
                  <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-dim)', margin: '0 0 18px' }}>“{r.body}”</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 34, height: 34, borderRadius: 999, background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-dim)' }}>{r.who[0]}</span>
                    <div><div style={{ fontSize: 13.5 }}>{r.who}</div><div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{r.role}</div></div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA({ go }) {
  return (
    <section className="section" style={{ position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 80% at 50% 30%, var(--violet-glow), transparent 70%)', opacity: 0.5 }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 22 }}>Your next chapter</div>
          <h2 className="d1" style={{ margin: 0, fontSize: 'clamp(44px,7vw,108px)' }}>Work better,<br /><span className="italic" style={{ color: 'var(--beige)' }}>somewhere</span> beautiful.</h2>
          <div style={{ marginTop: 44, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" icon="arrow" onClick={() => go('explore')}>Find your stay</Btn>
            <Btn size="lg" variant="line" onClick={() => go('operator', { id: 'atlas' })}>Meet the Operators</Btn>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage({ go, heroVariant }) {
  return (
    <main>
      <Hero variant={heroVariant} go={go} />
      <Discovery go={go} />
      <IntelligencePreview go={go} />
      <OperatorsTeaser go={go} />
      <ReviewsBand />
      <FinalCTA go={go} />
    </main>
  );
}

Object.assign(window, { HomePage });