// App shell — router, layout, tweaks panel

const { useState, useEffect } = React;
const { Home, Services, Team, Contact } = window.PAGES;
const BookingModal = window.BookingModal;

function useHashRoute() {
  const [route, setRoute] = useState(() => (window.location.hash || "#/").replace(/^#\//, "") || "home");
  useEffect(() => {
    const onHash = () => setRoute((window.location.hash || "#/").replace(/^#\//, "") || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const go = (r) => { window.location.hash = "#/" + (r === "home" ? "" : r); window.scrollTo({ top: 0, behavior: "instant" }); };
  return [route, go];
}

function NavLink({ active, onClick, children }) {
  return <a href="#" className={active ? "active" : ""} onClick={(e) => { e.preventDefault(); onClick(); }}>{children}</a>;
}

function Layout() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [route, go] = useHashRoute();
  const [bookingOpen, setBookingOpen] = useState(false);
  const [mobileNav, setMobileNav] = useState(false);

  useEffect(() => {
    document.documentElement.dataset.aesthetic = t.aesthetic;
    if (t.rounded) document.documentElement.style.setProperty("--radius", "12px");
    else document.documentElement.style.setProperty("--radius", t.aesthetic === "friendly" ? "12px" : "4px");
  }, [t.aesthetic, t.rounded]);

  const openBooking = () => setBookingOpen(true);

  const Page = { home: Home, services: Services, team: Team, contact: Contact }[route] || Home;

  const navItems = [
    { id: "home", label: "Home" },
    { id: "services", label: "Services" },
    { id: "team", label: "Team" },
    { id: "contact", label: "Contact" }
  ];

  return (
    <>
      <div className="topbar">
        <div className="container">
          <div>Independent family optometry · Kew East · Est. 1979</div>
          <div>
            <a href="tel:+61398593962">(03) 9859 3962</a>
            <span className="dot">·</span>
            <span>Mon–Fri 9–5:30 · Sat 9–12</span>
          </div>
        </div>
      </div>

      <nav className="nav">
        <div className="container">
          <a href="#" className="brand-mark" onClick={(e) => { e.preventDefault(); go("home"); }}>
            <span className="name">Bill Cutler</span>
            <span className="since">Optometrists · Est. 1979</span>
          </a>
          <ul className="nav-links">
            {navItems.map(n => (
              <li key={n.id}><NavLink active={route === n.id} onClick={() => go(n.id)}>{n.label}</NavLink></li>
            ))}
          </ul>
          <div className="nav-cta">
            <a className="nav-phone" href="tel:+61398593962">9859 3962</a>
            <button className="btn" onClick={openBooking}>Book <span className="arrow">→</span></button>
          </div>
        </div>
      </nav>

      <main>
        <Page go={go} openBooking={openBooking} />
      </main>

      <footer>
        <div className="container">
          <div className="footer-grid">
            <div>
              <div className="brand-mark" style={{ marginBottom: 18 }}>
                <span className="name">Bill Cutler</span>
                <span className="since">Optometrists · Est. 1979</span>
              </div>
              <p style={{ color: "var(--ink-soft)", fontSize: 14.5, maxWidth: "38ch" }}>An independent family optometry practice on High Street, Kew East. Comprehensive eye care for three generations of Melbourne families.</p>
            </div>
            <div>
              <h4>Site</h4>
              <ul>
                {navItems.map(n => (
                  <li key={n.id}><a href="#" onClick={(e) => { e.preventDefault(); go(n.id); }}>{n.label}</a></li>
                ))}
                <li><a href="#" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book online</a></li>
              </ul>
            </div>
            <div>
              <h4>Visit</h4>
              <ul>
                <li>678 High Street</li>
                <li>Kew East VIC 3102</li>
                <li><a href="tel:+61398593962">(03) 9859 3962</a></li>
                <li><a href="#" onClick={(e) => { e.preventDefault(); openBooking(); }}>info@cutleroptometrists.com.au</a></li>
              </ul>
            </div>
            <div>
              <h4>Hours</h4>
              <ul>
                <li>Mon–Fri  9:00 – 5:30</li>
                <li>Saturday  9:00 – 12:00</li>
                <li style={{ color: "var(--ink-muted)" }}>Closed Sundays & public holidays</li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© 1979–2026 Bill Cutler Optometrists · ABN 79 764 459 096</span>
            <span className="ahpra">Bill Cutler   ·   Melissa Ung</span>
          </div>
        </div>
      </footer>

      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Layout />);