/* Alchemy website — Spaces detail (offices / desks / meeting rooms) */
const { Button, Tag, ElementTile, SectionHeading } = window.DS;

const SPACES = {
  offices: {
    eyebrow: 'Private Offices', title: 'Welcome to your new HQ',
    lead: 'The perfect plug-and-play solution. Fully furnished and turn-key, with room to make it yours.',
    hero: '../../assets/office-private.webp',
    price: 'Office prices vary',
    amenities: [['Sd','Sit/Stand'],['Ch','Ergo Chairs'],['Lk','Locking Storage'],['Wifi','Gig Wifi'],['24','24/7 Access'],['Kt','Kitchen']],
    gallery: ['../../assets/interior-1.webp','../../assets/interior-2.webp','../../assets/lounge-2.webp'],
    cta: 'Claim your office',
  },
  desks: {
    eyebrow: 'Dedicated Desks', title: 'A desk of your very own',
    lead: 'A smaller open-space footprint with a desk that\'s yours. Secure, with locking storage, come and go without skipping a beat.',
    hero: '../../assets/desks-open.webp',
    price: 'Desks $349/mo',
    amenities: [['Dk','Your Desk'],['Lk','Locking Storage'],['Mr','Meeting Rooms'],['Pb','Phone Booths'],['24','24/7 Access'],['Kt','Kitchen']],
    gallery: ['../../assets/desks-open.webp','../../assets/phone-booth.webp','../../assets/lounge.webp'],
    cta: 'Claim your desk',
  },
  meeting: {
    eyebrow: 'Meeting Rooms', title: 'Rooms for every moment',
    lead: 'Open to the public. Conference rooms for team retreats; intimate rooms for signings, interviews, and 1:1s.',
    hero: '../../assets/meeting-room-real.webp',
    price: 'Rooms from $25/hr',
    amenities: [['Tv','Displays'],['Wb','Whiteboards'],['Vc','Video Conf'],['Pb','Phone Booths'],['Lp','Launch Pad'],['Kt','Kitchen']],
    gallery: ['../../assets/meeting-room-real.webp','../../assets/event-space.webp','../../assets/event-2.webp'],
    cta: 'Book a Room',
  },
};

const sWrap = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };

function SpacesScreen({ kind = 'offices', onNavigate }) {
  const d = SPACES[kind] || SPACES.offices;
  return (
    <React.Fragment>
      <section style={{ background: 'var(--navy-700)', color: 'var(--text-on-dark)', marginTop: -78 }}>
        <div style={{ ...sWrap, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center', paddingTop: 'calc(var(--space-8) + 78px)', paddingBottom: 'var(--space-8)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <SectionHeading onDark eyebrow={d.eyebrow} title={d.title} lead={d.lead} as="h1" />
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <Button variant="onDark" size="lg" onClick={() => onNavigate('tour')}>{d.cta}</Button>
              <Tag variant="solid" dot>{d.price}</Tag>
            </div>
          </div>
          <div style={{ aspectRatio: '3/2', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
            <img src={d.hero} alt={d.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...sWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--space-7)' }}>
          <SectionHeading eyebrow="What's included" title="Everything but the bobblehead" as="h2" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 'var(--space-4)', marginTop: 'var(--space-6)' }}>
            {d.amenities.map(([sym, name], i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.86rem', color: 'var(--text-body)', textAlign: 'center' }}>{name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...sWrap, paddingBottom: 'var(--section-y)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gridTemplateRows: '220px 220px', gap: 'var(--space-4)' }}>
            <div style={{ gridRow: '1 / 3', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
              <img src={d.gallery[0]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
              <img src={d.gallery[1]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
              <img src={d.gallery[2]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.SpacesScreen = SpacesScreen;