/* Alchemy — VIRTUAL TOUR funnel.
   One destination for every "Virtual Tour" button on the site (home page location
   cards and all three location pages). Visitor picks a location, watches its
   walkthrough inline, then converts to an in-person tour.

   Each location's `tourUrl` is the embeddable walkthrough (Matterport, YouTube,
   etc). Until a real URL is supplied the viewer shows a labelled placeholder
   rather than a broken frame. */
const { Button, Tag, SectionHeading } = window.DS;

const vtWrap = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };
const vtGoMain = (hash) => { window.location.href = window.alcUrl ? window.alcUrl('home', hash) : 'index.html' + (hash ? '#' + hash : ''); };

/* Walkthrough URLs come from the shared registry (virtualTours.jsx) so the funnel and
   every location page agree on whether a tour exists yet. */
const VT_LOCATIONS = [
  {
    key: 'dtg', name: 'Downtown Gastonia', tag: 'Our flagship',
    addr: '121 W. Main Ave, Gastonia, NC 28052',
    blurb: 'A historic Main Street building, The Wandering Cup coffee shop, and the community that started it all.',
    thumb: '../../assets/dtg-09.webp',
    route: 'dtg',
  },
  {
    key: 'clt', name: 'Charlotte', tag: 'Room to scale',
    addr: '2459 Wilkinson Blvd, Charlotte, NC 28208',
    blurb: 'The Launch Pad event space, a podcast studio, bookable rooms, and free direct-access parking.',
    thumb: '../../assets/event-space.webp',
    route: 'clt',
  },
  {
    key: 'lry', name: 'Loray Gastonia', tag: 'Historic Loray Mill',
    addr: '300 S Firestone St, Suite 200 H, Gastonia, NC 28052',
    blurb: 'Exposed brick, massive windows, and an on-site gym inside one of the most storied buildings in the Carolinas.',
    thumb: '../../assets/lry/lry-lounge-2.jpg',
    route: 'lry',
  },
];

const vtUrlFor = (key) => (window.VIRTUAL_TOURS && window.VIRTUAL_TOURS[key]) || '';

function VTHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = document.getElementById('kit-scroll');
    const h = () => setScrolled((el ? el.scrollTop : window.scrollY) > 12);
    h();
    (el || window).addEventListener('scroll', h);
    return () => (el || window).removeEventListener('scroll', h);
  }, []);
  const light = !scrolled;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,248,250,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
    }}>
      <div style={{ ...vtWrap, height: 78, display: 'flex', alignItems: 'center', gap: 16 }}>
        <img src={light ? '../../assets/logo-mark-white.png' : '../../assets/logo-mark.png'} alt="Alchemy Co-Working" style={{ height: 56, width: 'auto', display: 'block' }} />
        <span style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: '0.66rem', letterSpacing: '0.16em', textTransform: 'uppercase', padding: '4px 9px', background: 'var(--gold-500)', color: 'var(--navy-700)', flex: 'none' }}>Virtual Tour</span>
        <nav style={{ display: 'flex', gap: 2, marginLeft: 'auto', alignItems: 'center' }}>
          <window.LocationsMenu light={light} onNavigate={(r) => { if (r === 'home') vtGoMain(); }} />
        </nav>
        <Button variant="slate" size="sm" onClick={() => vtGoMain('tour')}>Schedule a Tour</Button>
      </div>
    </header>
  );
}

function VTHero({ active, onPick }) {
  return (
    <section style={{ position: 'relative', paddingTop: 78, marginTop: -78, background: 'linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%)', color: 'var(--text-on-dark)' }}>
      <div style={{ ...vtWrap, paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-7)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)' }}>
        <span className="alc-eyebrow" style={{ color: 'var(--gold-400)' }}>Look around before you visit</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.6rem, 5.4vw, 4.5rem)', lineHeight: 0.98, letterSpacing: '-0.02em', textTransform: 'uppercase', margin: 0, maxWidth: '20ch' }}>
          Take a virtual tour
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.02rem, 1.5vw, 1.25rem)', lineHeight: 1.6, color: 'rgba(255,255,255,0.9)', maxWidth: '52ch', margin: '4px 0 0' }}>
          Walk all three Alchemy locations from wherever you are. Pick a location to start, then book an in-person tour when you're ready.
        </p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginTop: 'var(--space-4)' }}>
          {VT_LOCATIONS.map((l) => {
            const on = active === l.key;
            return (
              <button key={l.key} onClick={() => onPick(l.key)} style={{
                all: 'unset', cursor: 'pointer', fontFamily: 'var(--font-label)', fontWeight: 600,
                fontSize: '0.84rem', letterSpacing: '0.06em', textTransform: 'uppercase',
                padding: '0.72rem 1.3rem',
                border: '1.5px solid ' + (on ? 'var(--gold-500)' : 'var(--border-on-dark)'),
                background: on ? 'var(--gold-500)' : 'transparent',
                color: on ? 'var(--navy-700)' : 'rgba(255,255,255,0.88)',
                transition: 'background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
              }}>{l.name}</button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function VTViewer({ loc, onPick }) {
  const tourUrl = vtUrlFor(loc.key);
  return (
    <section id="viewer" style={{ background: 'var(--bg)' }}>
      <div style={{ ...vtWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--space-7)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-6)', flexWrap: 'wrap', marginBottom: 'var(--space-5)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Tag variant="soft">{loc.tag}</Tag>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(1.9rem, 3vw, 2.6rem)', letterSpacing: '-0.01em', color: 'var(--text-strong)', margin: 0, lineHeight: 1.1 }}>{loc.name}</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1rem', lineHeight: 1.6, color: 'var(--text-body)', margin: 0, maxWidth: '58ch' }}>{loc.blurb}</p>
            <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.74rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{loc.addr}</span>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => vtGoMain('tour')}>Book a Tour</Button>
            <Button variant="outline" as="a" href={window.alcUrl ? window.alcUrl(loc.route) : '#'}>{'Visit the ' + loc.name + ' page'}</Button>
          </div>
        </div>

        <div style={{ position: 'relative', width: '100%', aspectRatio: '16/9', background: 'var(--surface-inverse)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', overflow: 'hidden' }}>
          {tourUrl ? (
            <iframe
              key={loc.key}
              src={tourUrl}
              title={'Virtual tour — Alchemy ' + loc.name}
              allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none', display: 'block' }}
            ></iframe>
          ) : (
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, textAlign: 'center', padding: 'var(--space-7)', background: loc.thumb ? 'linear-gradient(180deg, rgba(15,24,48,0.78), rgba(15,24,48,0.9)), url(' + loc.thumb + ') center / cover' : 'transparent' }}>
              <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.76rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>Walkthrough coming soon</span>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.9)', margin: 0, maxWidth: '46ch' }}>
                The {loc.name} walkthrough is being produced. Book an in-person tour in the meantime and we'll show you around ourselves.
              </p>
              <Button variant="onDark" onClick={() => vtGoMain('tour')}>Book an in-person tour</Button>
              {onPick && (
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center', marginTop: 4 }}>
                  {VT_LOCATIONS.filter((l) => l.key !== loc.key).map((l) => (
                    <button key={l.key} onClick={() => onPick(l.key)} style={{ all: 'unset', cursor: 'pointer', fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.74rem', letterSpacing: '0.1em', textTransform: 'uppercase', padding: '0.5rem 0.9rem', border: '1px solid var(--border-on-dark)', color: 'rgba(255,255,255,0.85)' }}>{'Or view ' + l.name + ' →'}</button>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function VTPicker({ active, onPick }) {
  return (
    <section style={{ background: 'var(--bg-alt)' }}>
      <div style={{ ...vtWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ marginBottom: 'var(--space-6)' }}>
          <SectionHeading eyebrow="All three locations" title="Tour another location" lead="Same community, same values, three different rooms to build in." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {VT_LOCATIONS.map((l) => {
            const on = active === l.key;
            return (
              <button key={l.key} onClick={() => {
                onPick(l.key);
                const sc = document.getElementById('kit-scroll');
                const t = document.getElementById('viewer');
                if (t && sc) sc.scrollTo({ top: t.offsetTop - 70, behavior: 'smooth' });
              }} style={{
                all: 'unset', cursor: 'pointer', display: 'flex', flexDirection: 'column',
                background: 'var(--surface)',
                border: '1px solid ' + (on ? 'var(--gold-500)' : 'var(--border)'),
                boxShadow: on ? 'var(--shadow-md)' : 'var(--shadow-sm)',
                overflow: 'hidden',
              }}>
                <div style={{ position: 'relative', aspectRatio: '3/2', overflow: 'hidden', background: 'var(--surface-inverse)' }}>
                  {l.thumb
                    ? <img src={l.thumb} alt={l.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%)' }}>
                        <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>Photos coming soon</span>
                      </div>}
                  {on && <div style={{ position: 'absolute', top: 12, left: 12 }}><Tag variant="copper">Now viewing</Tag></div>}
                </div>
                <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.2rem', color: 'var(--text-strong)' }}>{l.name}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9rem', color: 'var(--text-muted)' }}>{l.addr}</span>
                  <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.74rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--link)', marginTop: 4 }}>{on ? 'Viewing now' : 'Start this tour →'}</span>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function VTConvert() {
  return (
    <section id="book" style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-dark)' }}>
      <div style={{ ...vtWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 110, display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <SectionHeading onDark eyebrow="Ready for the real thing?" title="Come see it in person"
            lead="A walkthrough only goes so far. Book a tour and we'll introduce you to the Partners you'd be building alongside." as="h2" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            {[['Call', '(704) 753-8722'], ['Email', 'team@alchemycowork.com']].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '1.02rem', color: '#fff' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <window.FormEmbed form="contact" />
      </div>
    </section>
  );
}

function VirtualTourApp() {
  const initial = (() => {
    const h = (window.location.hash || '').replace('#', '').toLowerCase();
    return VT_LOCATIONS.some((l) => l.key === h) ? h : 'dtg';
  })();
  const [active, setActive] = React.useState(initial);
  const loc = VT_LOCATIONS.find((l) => l.key === active) || VT_LOCATIONS[0];
  return (
    <div style={{ fontFamily: 'var(--font-body)', color: 'var(--text-body)', minHeight: '100%' }}>
      <window.AnnouncementBar />
      <VTHeader />
      <VTHero active={active} onPick={setActive} />
      <VTViewer loc={loc} onPick={setActive} />
      <VTPicker active={active} onPick={setActive} />
      <VTConvert />
      <window.Footer onNavigate={() => vtGoMain()} />
    </div>
  );
}

Object.assign(window, { VirtualTourApp, VT_LOCATIONS });