/* Alchemy Charlotte (CLT) — location page.
   Renders the shared, owner-approved LocationPage layout; this file is data only.
   Meeting rooms book live through the OfficeRnD "growth-hub" web component
   (loader script lives in CLT.html). */
const { Button } = window.DS;

const CLT = {
  name: 'Charlotte',
  eyebrow: 'Alchemy Charlotte · 2459 Wilkinson Blvd',
  heroSub: 'Every dollar should provide a return, that’s what you will find at Alchemy. We have Partners, not members. Partnership means you get community, connections, and support all in the same amazing space. With our culture and intentionality, networking and opportunities come to you.',
  logoLight: '../../assets/logo-clt-white.png',
  logoDark: '../../assets/logo-clt-mark.png',
  heroImg: '../../assets/interior-1.webp',
  tourImg: '../../assets/community-17.webp',
  address: '2459 Wilkinson Blvd, Charlotte, NC 28208',
  hours: 'Coworking 24/7 for Partners · Cafe and event space open to the public',
  phone: '(704) 753-8722',
  mapUrl: 'https://maps.google.com/?q=2459+Wilkinson+Blvd+Charlotte+NC+28208',
  areaInfo: 'Located near Uptown Charlotte you are at the heart of it all without the usual headaches. Free direct access parking, ideal for you and your clients. Quick access to major highways, the airport, and surrounding Charlotte areas. Above all else, at Alchemy, the opportunity comes to you. Between our hosted events and our Partners such as the Charlotte Area Chamber, Executive Club, Charlotte Entrepreneurs, and Network Charlotte; you have all the connection and opportunities you need under one roof.',
  primaryCta: 'Book a Space',
  tourKey: 'clt',
  tierOverrides: {
    'Private Office': { sub: 'month to month · furnished, no deposits' },
  },
  roomsTitle: 'A space for every occasion',
  roomsLead: 'Every space at Alchemy Charlotte books online through our live calendar. Choose a room to see real-time availability and reserve.',
  roomsIntro: 'Explore our options',
  rooms: [
    { name: 'The Launch Pad', kind: 'Event Space', img: '../../assets/event-space.webp',
      route: 'resources/684bcb6781214026d1fbf847',
      body: 'Our largest room. Product launches, workshops, and big team gatherings, built to hold a crowd and a moment.' },
    { name: 'Brain Storm', kind: 'Meeting Room', img: '../../assets/meeting-room.webp',
      route: 'resources/684bcb6781214026d1fbf84b',
      body: 'A focused meeting room for the working session, the pitch rehearsal, or the deal that needs a whiteboard and a door.' },
    { name: 'Podcast Studio', kind: 'Studio', img: '../../assets/interior-2.webp',
      route: 'resources/684bcb6781214026d1fbf857',
      body: 'A ready-to-roll recording studio. Mics up, lights on, hit record on the next episode.' },
    { name: 'Think Tank', kind: 'Meeting Room', img: '../../assets/interior-1.webp',
      route: 'resources/684bcb6781214026d1fbf853',
      body: 'A private room for the small group that needs to go deep. Strategy, planning, and honest conversation.' },
    { name: 'Thought Cloud', kind: 'Meeting Room', img: '../../assets/lounge.webp',
      route: 'resources/684bcb6781214026d1fbf84f',
      body: 'A lighter, lounge-style room for the brainstorm that flows better on a couch than around a table.' },
    { name: 'The Cafe', kind: 'Kitchen & Taps', img: '../../assets/clt/clt-kitchen-taps.jpg',
      route: 'resources/684bcb6781214026d1fbf86b',
      body: 'Great for networking or social events.' },
  ],
  qualitiesTitle: 'Room to scale, minutes from Uptown',
  qualitiesLead: 'What makes Alchemy different?',
  qualities: [
    ['FREE DIRECT PARKING', 'You read that right. A rare find this close to Uptown. Pull in, plug in, and get to work. This matters to your customers and clients as well.'],
    ['Intentionality', 'From introductions to lasting relationships. We seek to connect and add value to your business. Partnership isn’t a buzzword, its our culture.'],
    ['The Launch Pad', 'Our largest event space. Launches, workshops, and gatherings that need room to hold a crowd and a moment. You have access to this at no added charge.'],
    ['Access to all locations, no charge', 'We have three locations and growing. At no added charge, you have multiple sites to call your business home.'],
    ['Podcast studio on site', 'A ready-to-roll recording studio. Book it by the hour and hit record on the next episode.'],
  ],
  gallery: [
    '../../assets/event-space.webp', '../../assets/meeting-room.webp', '../../assets/lounge.webp',
    '../../assets/clt/clt-kitchen-taps.jpg', '../../assets/interior-2.webp', '../../assets/community-17.webp',
  ],
};

/* ---- Booking modal: injects the growth-hub web component on demand ---- */
function BookingModal({ open, route, title, onClose }) {
  const mountRef = React.useRef(null);
  React.useEffect(() => {
    const el = mountRef.current;
    if (!el) return;
    if (open && route) {
      el.innerHTML = '<growth-hub slug="alchemy" initial-route="' + route + '"></growth-hub>';
    } else {
      el.innerHTML = '';
    }
  }, [open, route]);

  React.useEffect(() => {
    function esc(e) { if (e.key === 'Escape') onClose(); }
    if (open) document.addEventListener('keydown', esc);
    return () => document.removeEventListener('keydown', esc);
  }, [open, onClose]);

  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(12,18,32,0.66)',
      backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: 'clamp(1rem, 4vh, 3rem) var(--gutter)', overflowY: 'auto',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--surface)', width: '100%', maxWidth: 960, minHeight: 420,
        boxShadow: 'var(--shadow-lg)', display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '1.1rem 1.4rem', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="../../assets/logo-mark.png" alt="" style={{ height: 34, width: 'auto' }} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.15rem', color: 'var(--text-strong)' }}>Book {title}</span>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            all: 'unset', cursor: 'pointer', fontFamily: 'var(--font-label)', fontWeight: 700,
            fontSize: '1.4rem', lineHeight: 1, color: 'var(--stone-500)', padding: '4px 8px',
          }}>×</button>
        </div>
        <div style={{ position: 'relative', flex: 1, minHeight: 380, padding: '0.5rem' }}>
          <div ref={mountRef} style={{ position: 'relative', zIndex: 2, minHeight: 380 }}></div>
          <div style={{
            position: 'absolute', inset: '0.5rem', zIndex: 1, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center', color: 'var(--text-muted)',
          }}>
            <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.8rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Loading live availability…</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9rem', maxWidth: 320 }}>Powered by OfficeRnD. If the booking calendar doesn't appear, this preview may be offline.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function CLTApp() {
  const [booking, setBooking] = React.useState(null);
  const loc = { ...CLT, onPrimary: () => setBooking({ route: 'dashboard', name: 'a Space' }) };
  return (
    <React.Fragment>
      <window.LocationPage loc={loc} onBookRoom={(r) => setBooking(r)} />
      <BookingModal open={!!booking} route={booking && booking.route} title={booking && booking.name} onClose={() => setBooking(null)} />
    </React.Fragment>
  );
}

window.CLTApp = CLTApp;