// Space.jsx — "See our practice" editorial gallery
// Sits between Philosophy and Spotlight: who we are → where → what we do
function Space() {
  const [active, setActive] = React.useState(0);

  const shots = [
    {
      src: 'assets/space-01.jpg',
      n: '01',
      label: 'The Lounge',
      caption: 'Lavender chairs, Tuscan archways, and orchids in bloom — the room you wait in is part of the treatment.',
    },
    {
      src: 'assets/space-02.jpg',
      n: '02',
      label: 'The Atrium',
      caption: 'Cross-vaulted ceilings and travertine columns. Light filters in slowly, the way time should move here.',
    },
    {
      src: 'assets/space-03.jpg',
      n: '03',
      label: 'The Reception',
      caption: 'Floor-to-ceiling arched windows on El Camino — the threshold between street and ritual.',
    },
    {
      src: 'assets/space-04.jpg',
      n: '04',
      label: 'The Foyer',
      caption: 'Sage-leather seating and warm stone. A place to settle before, and decompress after.',
    },
  ];

  const a = shots[active];

  return (
    <section style={{
      background: 'var(--rv-warm-wash-2)',
      padding: '140px 0 120px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Ambient ghost wordmark */}
      <div aria-hidden="true" className="rv-futura" style={{
        position: 'absolute', top: '-2vw', right: '-6vw',
        fontSize: 'clamp(180px, 22vw, 360px)', fontWeight: 300,
        color: 'rgba(159,101,230,0.06)', pointerEvents: 'none', userSelect: 'none',
        lineHeight: 0.82, letterSpacing: '-0.04em', whiteSpace: 'nowrap',
        textTransform: 'lowercase',
      }}>the&nbsp;space</div>

      <div className="rv-container" style={{ position: 'relative' }}>
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80,
          alignItems: 'end', marginBottom: 64,
        }} className="rv-space-head">
          <div>
            <div className="rv-eyebrow" style={{ marginBottom: 28 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple)', verticalAlign: 'middle', marginRight: 12 }}></span>
              See Our Practice · Millbrae
            </div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(42px, 5.4vw, 80px)', fontWeight: 300,
              lineHeight: 0.98, margin: 0, letterSpacing: '-0.01em',
              textTransform: 'uppercase',
            }}>
              The space,<br />
              <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', color: 'var(--rv-purple-700)', fontWeight: 300, textTransform: 'none' }}>built like a sanctuary.</em>
            </h2>
          </div>
          <p style={{
            fontSize: 18, lineHeight: 1.65, color: 'var(--rv-ink)',
            margin: 0, maxWidth: 520, paddingBottom: 12,
          }}>
            Our Millbrae practice was designed around a single idea: that medical care can feel restorative the moment you step inside. Tuscan arches, hand-troweled plaster, sage and lavender — a room to slow down in.
          </p>
        </div>

        {/* Gallery: large feature + 4 thumbs */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32,
          alignItems: 'stretch',
        }} className="rv-space-grid">
          {/* Feature image */}
          <div style={{
            position: 'relative', aspectRatio: '4/3', overflow: 'hidden',
            background: 'var(--rv-stone-100)',
          }}>
            {shots.map((s, i) => (
              <img key={i} src={s.src} alt={s.label} loading="lazy" decoding="async" style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'cover',
                opacity: i === active ? 1 : 0,
                transform: i === active ? 'scale(1)' : 'scale(1.04)',
                transition: 'opacity 600ms var(--rv-ease), transform 1200ms var(--rv-ease)',
              }}/>
            ))}

            {/* Bottom gradient + caption */}
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0,
              padding: '80px 28px 24px',
              background: 'linear-gradient(180deg, transparent 0%, rgba(26,22,37,0.7) 100%)',
              color: 'white', pointerEvents: 'none',
            }}>
              <div style={{
                fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: 'var(--rv-purple-300)', fontWeight: 500, marginBottom: 10,
              }}>
                {a.n} · {a.label}
              </div>
              <p className="rv-futura" style={{
                fontSize: 'clamp(18px, 1.6vw, 22px)', fontWeight: 300, lineHeight: 1.4,
                margin: 0, maxWidth: 520, letterSpacing: '-0.005em',
              }}>{a.caption}</p>
            </div>

            {/* Top tick: sheet number */}
            <div style={{
              position: 'absolute', top: 18, left: 18,
              padding: '6px 10px', background: 'rgba(255,255,255,0.92)',
              fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
              color: 'var(--rv-ink)', fontWeight: 500,
            }}>
              Sheet {a.n} / 04
            </div>
          </div>

          {/* Right column: thumb grid + meta */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
              flex: 1,
            }}>
              {shots.map((s, i) => (
                <button key={i} onClick={() => setActive(i)}
                  onMouseEnter={() => setActive(i)}
                  style={{
                    position: 'relative', aspectRatio: '1/1', overflow: 'hidden',
                    border: 0, padding: 0, cursor: 'pointer', background: 'var(--rv-stone-100)',
                    outline: i === active ? '2px solid var(--rv-purple)' : '2px solid transparent',
                    outlineOffset: -2,
                    transition: 'outline-color 240ms var(--rv-ease)',
                  }}>
                  <img src={s.src} alt={s.label} loading="lazy" decoding="async" style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    opacity: i === active ? 1 : 0.72,
                    transform: i === active ? 'scale(1.04)' : 'scale(1)',
                    transition: 'all 400ms var(--rv-ease)',
                  }}/>
                  <div style={{
                    position: 'absolute', top: 8, left: 8,
                    fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
                    color: 'white', fontWeight: 500,
                    textShadow: '0 1px 4px rgba(0,0,0,0.4)',
                  }}>{s.n}</div>
                </button>
              ))}
            </div>

            {/* Visit card */}
            <div style={{
              padding: '24px 24px 22px',
              background: 'white', border: '1px solid var(--rv-border)',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: -1, left: -1, width: 12, height: 12,
                borderTop: '1px solid var(--rv-purple)', borderLeft: '1px solid var(--rv-purple)',
              }}></div>
              <div style={{
                position: 'absolute', bottom: -1, right: -1, width: 12, height: 12,
                borderBottom: '1px solid var(--rv-purple)', borderRight: '1px solid var(--rv-purple)',
              }}></div>

              <div className="rv-eyebrow" style={{ marginBottom: 12, color: 'var(--rv-purple-700)' }}>Visit in person</div>
              <div style={{ fontSize: 15, color: 'var(--rv-ink)', lineHeight: 1.6, marginBottom: 16 }}>
                <strong style={{ fontWeight: 600 }}>31 S. El Camino Real</strong><br/>
                Millbrae, California 94030
              </div>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
                <a href="tel:6506973339" style={{
                  fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--rv-ink)', fontWeight: 500,
                  borderBottom: '1px solid var(--rv-ink)', paddingBottom: 3, textDecoration: 'none',
                }}>(650) 697-3339</a>
                <span style={{ fontSize: 12, color: 'var(--rv-muted)', letterSpacing: '0.1em' }}>Tue–Fri 10–6 · Sat 10–3</span>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom rule with dragonfly mark */}
        <div style={{
          marginTop: 56, paddingTop: 28, borderTop: '1px solid var(--rv-border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <img src="assets/dragonfly-real.png" alt="" loading="lazy" decoding="async" width="18" height="24" style={{ width: 18, height: 'auto', opacity: 0.7 }}/>
            <span style={{ fontSize: 12, color: 'var(--rv-muted)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              The Reviv Practice — Photographed in natural light
            </span>
          </div>
          <a href="#contact" style={{
            fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--rv-ink)', borderBottom: '1px solid var(--rv-ink)', paddingBottom: 3,
            textDecoration: 'none', fontWeight: 500,
          }}>Plan Your Visit →</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .rv-space-head { grid-template-columns: 1fr !important; gap: 32px !important; align-items: start !important; }
          .rv-space-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 768px) {
          section .rv-container { }
        }
      `}</style>
    </section>
  );
}
window.Space = Space;