/* Sora Well Bar — shared website components */
const { useState, useEffect } = React;

// ---- Crest logo (arch + figure mark + Sora / Well Bar) ----
const CrestMark = ({ stroke }) => (
  <svg className="camk" viewBox="0 0 100 112" fill="none" xmlns="http://www.w3.org/2000/svg" style={stroke ? { color: stroke } : null}>
    <path d="M8 110 V52 C8 22 30 6 50 6 C70 6 92 22 92 52 V110" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
    <circle cx="50" cy="46" r="9" stroke="currentColor" strokeWidth="2.4"/>
    <path d="M16 110 L40 70 L52 86 L66 58 L84 110" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round"/>
  </svg>
);

const Crest = ({ go }) => (
  <div className="crest" onClick={() => go && go('home')}>
    <CrestMark />
    <div className="cs">Sora</div>
    <div className="cw">Well Bar</div>
  </div>
);

// ---- Navigation ----
const NAV = [
  ['home', 'Home'], ['about', 'About'], ['movement', 'Movement'],
  ['membership', 'Membership'], ['experiences', 'Experiences'],
  ['corporate', 'Corporate Wellness'], ['contact', 'Contact'],
];

const Nav = ({ route, go }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Track viewport so the mobile menu is only ever in the DOM on small screens
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 980px)');
    const sync = () => setIsMobile(mq.matches);
    sync();
    mq.addEventListener('change', sync);
    return () => mq.removeEventListener('change', sync);
  }, []);
  // Close the menu whenever we leave mobile widths
  useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]);
  // Lock page scroll while the mobile menu is open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const handleGo = (id) => { setOpen(false); go(id); };
  return (
    <React.Fragment>
      <nav className={scrolled ? 'scrolled' : ''}>
        <Crest go={handleGo} />
        {!isMobile && (
          <div className="nav-links">
            {NAV.map(([id, label]) =>
              <a key={id} className={route === id ? 'cur' : ''} onClick={() => handleGo(id)}>{label}</a>
            )}
          </div>
        )}
        {isMobile && (
          <button
            className={`nav-toggle ${open ? 'open' : ''}`}
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        )}
      </nav>
      {isMobile && (
        <div
          className={`mobile-menu ${open ? 'open' : ''}`}
          aria-hidden={!open}
          style={{
            position: 'fixed', inset: 0, zIndex: 90,
            opacity: open ? 1 : 0,
            pointerEvents: open ? 'auto' : 'none',
            transition: 'opacity .5s cubic-bezier(.2,.7,.2,1)',
          }}
        >
          <span className="mm-eyebrow">Move &middot; Connect &middot; Restore</span>
          {NAV.map(([id, label]) =>
            <a key={id} className={route === id ? 'cur' : ''} onClick={() => handleGo(id)}>{label}</a>
          )}
        </div>
      )}
    </React.Fragment>
  );
};

// ---- Ticker ----
const TICKER = [
  'First Class Complimentary', 'Founding Circle — $165/mo · First 25',
  'The Monthly Circle — $195/mo', 'Community Rate — $179/mo',
  'Drop‑In — $34', '10‑Class Pack — $300', 'Towel Service Included',
  'Members First to Every Event',
];
const Ticker = () => (
  <div className="ticker"><div className="ticker-track">
    {[0,1].map(rep => TICKER.map((t,i) =>
      <span className="item" key={`${rep}-${i}`}>{t}<span className="sep">&#10022;</span></span>
    ))}
  </div></div>
);

// ---- Footer ----
const Footer = ({ go }) => (
  <footer>
    <div className="wrap fgrid">
      <div className="fbrand">
        <div className="crest" onClick={() => go('home')}>
          <CrestMark />
          <div className="cs">Sora</div>
          <div className="cw">Well Bar</div>
        </div>
        <p>A boutique wellness destination on the Etobicoke waterfront — movement, community &amp; intentional living for women.</p>
      </div>
      <div className="fcol">
        <h5>Explore</h5>
        <a onClick={() => go('about')}>About</a>
        <a onClick={() => go('movement')}>Movement</a>
        <a onClick={() => go('membership')}>Membership</a>
        <a onClick={() => go('experiences')}>Experiences</a>
        <a onClick={() => go('corporate')}>Corporate Wellness</a>
      </div>
      <div className="fcol">
        <h5>Connect</h5>
        <a onClick={() => go('contact')}>Contact</a>
        <a>Instagram</a>
        <a>Gift Cards</a>
      </div>
      <div className="fcol fnews">
        <h5>Join the Circle</h5>
        <input type="email" placeholder="Your email" />
        <a className="btn solid" style={{ width: '100%', textAlign: 'center' }}>Subscribe</a>
      </div>
    </div>
    <div className="wrap fbottom">
      <span>© Sora Well Bar 2026</span>
      <span>Humber Bay Shores · Etobicoke, ON</span>
    </div>
  </footer>
);

// ---- Page hero (interior pages) ----
const PageHero = ({ eyebrow, title, sub }) => (
  <section className="phero"><div className="wrap">
    <span className="eyebrow">{eyebrow}</span>
    <h1 dangerouslySetInnerHTML={{ __html: title }} />
    {sub && <p>{sub}</p>}
  </div></section>
);

Object.assign(window, { CrestMark, Crest, Nav, Ticker, Footer, PageHero });