/* global React, ReactDOM, NavBar, Hero, About, ServicesSection, CareSection,
   BeforeAfterSection, IGFeed, TestimonialCarousel, PressFeature, MembershipSection, FaqSection,
   LocationSection, CollabSection, Footer, Marquee, BookingModal, CursorTrail,
   TweaksPanel, useTweaks, TweakSection, TweakToggle, TweakColor, TweakSlider, TweakRadio */
/* eslint-disable no-undef */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF1F6D",
  "cursorTrail": true,
  "marqueeSpeed": 30,
  "showMascotStickers": true,
  "vibe": "max"
}/*EDITMODE-END*/;

function App() {
  // NOTE: Custom booking flow (BookingModal) is built and ready — currently
  // disabled. Every "Book" CTA punches out to Vagaro in a new tab. To
  // re-enable the in-page flow later, flip USE_CUSTOM_BOOKING to true.
  const USE_CUSTOM_BOOKING = false;
  const VAGARO_URL = 'https://www.vagaro.com/tokyobikinibar/services';

  const [bookingOpen, setBookingOpen] = useState(false);
  const [bookingService, setBookingService] = useState(null);
  const [tweaks, setTweak] = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  function openBooking(service) {
    if (USE_CUSTOM_BOOKING) {
      setBookingService(typeof service === 'string' ? service : null);
      setBookingOpen(true);
    } else {
      window.open(VAGARO_URL, '_blank', 'noopener,noreferrer');
    }
  }
  function smoothNav(hash) {
    const el = document.querySelector(hash);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' });
  }

  // Landing on "/#section" from another page (Services, Brand partnerships):
  // the browser tries to jump to the anchor before React has rendered it, so
  // the native hash-scroll misses and you end up stuck at the top. Retry the
  // jump once content (and images) have had a moment to lay out.
  useEffect(() => {
    const hash = window.location.hash;
    if (!hash || hash === '#top') return;
    const jump = () => {
      const el = document.querySelector(hash);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' });
    };
    const timers = [0, 300, 800].map((delay) => setTimeout(jump, delay));
    return () => timers.forEach(clearTimeout);
  }, []);

  // accent color override
  useEffect(() => {
    document.documentElement.style.setProperty('--tbb-hotpink', tweaks.accent || '#FF1F6D');
  }, [tweaks.accent]);

  // marquee speed
  useEffect(() => {
    const sheet = document.getElementById('tbb-dyn-style') || (() => {
      const s = document.createElement('style'); s.id = 'tbb-dyn-style'; document.head.appendChild(s); return s;
    })();
    const dur = Math.max(8, tweaks.marqueeSpeed || 30);
    sheet.textContent = `
      .tbb-marquee-track { animation-duration: ${dur}s !important; }
      .tbb-marquee-track.rev { animation-duration: ${dur - 2}s !important; }
    `;
  }, [tweaks.marqueeSpeed]);

  return (
    <div data-screen-label="Tokyo Bikini Bar — Home">
      {tweaks.cursorTrail && <CursorTrail enabled={true} />}

      <NavBar onBook={()=>openBooking()} onNav={smoothNav} />
      <Hero onBook={()=>openBooking()} />
      <Marquee
        items={['Smooth era', '✦ Hot girl hours', 'Booked by Leia', 'Glow szn open', '♡', 'See you soon', 'Camarillo babes']}
        tone="ink"
      />

      <About />

      <Marquee
        items={['@tokyobikinibar', '✦ Tag us, babe', '♡ The lookbook', '✿ Glow ups daily', 'Camarillo, CA']}
        tone="lime" big={false}
      />

      <IGFeed />

      <TestimonialCarousel />
      <PressFeature />

      <a href="/menu" style={{ display: 'block', textDecoration: 'none', color: 'inherit' }} title="See the full service menu">
        <Marquee
          items={['See the full menu →', 'Brazilian', 'Brow lam', 'Korean lash lift', 'Full body era', '✦', '♡ Booked solid']}
          tone="lime" big={false} rev
        />
      </a>

      <BeforeAfterSection />
      <CareSection />
      <MembershipSection onBook={()=>openBooking()} />

      <FaqSection />
      <LocationSection onBook={()=>openBooking()} />

      <Marquee
        items={['Book now ✦', 'Glow szn open', 'See you here ♡', 'Tokyo Bikini Bar', 'Camarillo, CA']}
        tone="butter" big rev
      />

      <Footer />

      {USE_CUSTOM_BOOKING && (
        <BookingModal open={bookingOpen} onClose={()=>setBookingOpen(false)} initialService={bookingService} />
      )}

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks ✦">
          <TweakSection label="Vibe">
            <TweakColor
              label="Accent color"
              value={tweaks.accent}
              onChange={(v)=>setTweak('accent', v)}
              options={['#FF1F6D','#FF7A45','#4FB8E5','#C7E94B','#F7E26B','#FF8FBE']}
            />
            <TweakRadio
              label="Maximalism"
              value={tweaks.vibe}
              onChange={(v)=>setTweak('vibe', v)}
              options={[{label:'Calm', value:'calm'},{label:'Max ✦', value:'max'}]}
            />
            <TweakToggle
              label="Mascot stickers"
              value={tweaks.showMascotStickers}
              onChange={(v)=>setTweak('showMascotStickers', v)}
            />
          </TweakSection>
          <TweakSection label="Motion">
            <TweakToggle
              label="Cursor sparkles ✦"
              value={tweaks.cursorTrail}
              onChange={(v)=>setTweak('cursorTrail', v)}
            />
            <TweakSlider
              label="Marquee speed (sec/loop)"
              value={tweaks.marqueeSpeed}
              min={10} max={60} step={2}
              onChange={(v)=>setTweak('marqueeSpeed', v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);