/* VERNIS — app shell, nav, footer, tweaks, mount */
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C44536",
  "fontPair": "Editorial",
  "corners": "Soft",
  "theme": "Light",
  "heroLayout": "Split"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  Editorial: { display: '"Cormorant Garamond", Georgia, serif', body: '"Manrope", system-ui, sans-serif', weight: 600 },
  Modern:    { display: '"DM Serif Display", Georgia, serif', body: '"DM Sans", system-ui, sans-serif', weight: 400 },
  Grotesque: { display: '"Schibsted Grotesk", system-ui, sans-serif', body: '"Schibsted Grotesk", system-ui, sans-serif', weight: 700 },
};
const CORNERS = { Sharp: "4px", Soft: "16px", Round: "26px" };

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--accent", t.accent);
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.Editorial;
  root.style.setProperty("--font-display", fp.display);
  root.style.setProperty("--font-body", fp.body);
  root.style.setProperty("--display-weight", fp.weight);
  root.style.setProperty("--radius", CORNERS[t.corners] || CORNERS.Soft);
  root.setAttribute("data-theme", t.theme === "Dark" ? "dark" : "light");
}

function Nav({ onBook, onMenu }) {
  const D = window.VERNIS;
  return (
    <nav className="nav" id="nav">
      <a className="brand" href="#top" aria-label={D.studio.name}>
        {D.studio.logo ? (
          <img className="brand-logo" src={D.studio.logo} alt="" />
        ) : (
          <span className="brand-name">{D.studio.name}</span>
        )}
        {!D.studio.logo && <span className="dot"></span>}
      </a>
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#gallery">Lookbook</a>
        <a href="#team">Artists</a>
        <a href="#reviews">Reviews</a>
        <a href="#visit">Visit</a>
      </div>
      <div className="nav-actions">
        <span className="nav-call">{D.studio.phone}</span>
        <button className="btn btn-primary btn-sm" onClick={onBook}>Book now</button>
        <button className="nav-burger" onClick={onMenu} aria-label="Menu"><span></span><span></span><span></span></button>
      </div>
    </nav>
  );
}

function MobileMenu({ open, onClose, onBook }) {
  const links = [["Services", "#services"], ["Lookbook", "#gallery"], ["Artists", "#team"], ["Reviews", "#reviews"], ["Visit", "#visit"]];
  return (
    <div className={"mobile-menu" + (open ? " open" : "")}>
      {links.map(([l, h]) => <a key={h} href={h} onClick={onClose}>{l}</a>)}
      <button className="btn btn-primary" onClick={() => { onClose(); onBook(); }}>Book appointment <span className="arrow">→</span></button>
    </div>
  );
}

function Footer({ onBook }) {
  const D = window.VERNIS;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="brand">{D.studio.name}</div>
            <p className="footer-blurb">A calm {D.studio.city} nail studio for considered manicures, pedicures and hand-painted art. Est. {D.studio.est}.</p>
          </div>
          <div className="footer-col">
            <h4>Studio</h4>
            <a href="#services">Services</a>
            <a href="#gallery">Lookbook</a>
            <a href="#team">Artists</a>
            <a href="#specials">Specials</a>
          </div>
          <div className="footer-col">
            <h4>Visit</h4>
            <p>{D.studio.address[0]}</p>
            <p>{D.studio.address[1]}</p>
            <p>{D.studio.phone}</p>
            <a href="#visit">Hours &amp; map</a>
          </div>
          <div className="footer-col">
            <h4>Stay in touch</h4>
            <p style={{ opacity: .85 }}>Seasonal looks and openings, occasionally.</p>
            <div className="news">
              <input type="email" placeholder="Email address" aria-label="Email" />
              <button className="btn btn-primary btn-sm" onClick={(e) => e.preventDefault()}>→</button>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© {new Date().getFullYear()} {D.studio.name} {D.studio.tagline}. All rights reserved.</p>
          <div className="socials">
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="Instagram"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a>
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="TikTok"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M16 3c.3 2 1.6 3.6 3.6 4v2.6c-1.3 0-2.6-.4-3.6-1v5.9a5.5 5.5 0 11-5.5-5.5c.3 0 .6 0 .9.1v2.8a2.7 2.7 0 102 2.6V3H16z"/></svg></a>
            <a href="#" onClick={(e)=>e.preventDefault()} aria-label="Facebook"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M14 8h2V5h-2c-2 0-3 1.3-3 3v2H9v3h2v6h3v-6h2.2l.3-3H14V8.5c0-.4.2-.5.5-.5z"/></svg></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function StickyCTA({ onBook }) {
  const D = window.VERNIS;
  return (
    <div className="sticky-cta">
      <div className="label">
        <span>Book your seat</span>
        <small>Open today · {D.studio.rating} ★</small>
      </div>
      <button onClick={onBook}>Book now</button>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booking, setBooking] = useState(false);
  const [preset, setPreset] = useState(null);
  const [menu, setMenu] = useState(false);

  useEffect(() => { applyTweaks(t); }, [t]);

  // nav scroll state
  useEffect(() => {
    const nav = document.getElementById("nav");
    const onScroll = () => nav && nav.classList.toggle("scrolled", window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // reveal on scroll (content visible by default; below-fold arms then animates in)
  useEffect(() => {
    const reveal = () => {
      const vh = window.innerHeight;
      document.querySelectorAll(".reveal").forEach((el) => {
        const r = el.getBoundingClientRect();
        const inView = r.top < vh * 0.88 && r.bottom > 0;
        if (inView) { el.classList.remove("pre"); el.classList.add("in"); }
        else if (!el.classList.contains("in")) { el.classList.add("pre"); }
      });
    };
    reveal();
    window.addEventListener("scroll", reveal, { passive: true });
    window.addEventListener("resize", reveal);
    return () => {
      window.removeEventListener("scroll", reveal);
      window.removeEventListener("resize", reveal);
    };
  }, []);

  // lock scroll when modal/menu open
  useEffect(() => {
    document.body.style.overflow = (booking || menu) ? "hidden" : "";
  }, [booking, menu]);

  const openBook = () => { setPreset(null); setBooking(true); };
  const openBookService = (svc) => { setPreset(svc); setBooking(true); };

  const layout = (t.heroLayout || "Split").toLowerCase(); // split | stacked | full

  return (
    <>
      <Nav onBook={openBook} onMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} onBook={openBook} />
      <Hero onBook={openBook} layout={layout} />
      <Strip />
      <Services onBookService={openBookService} />
      <Specials onBook={openBook} />
      <Gallery />
      <Team />
      <Reviews />
      <Visit onBook={openBook} />
      <Footer onBook={openBook} />
      <StickyCTA onBook={openBook} />

      <BookingModal open={booking} onClose={() => setBooking(false)} preset={preset} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color" />
        <TweakColor label="Accent" value={t.accent}
          options={["#C44536", "#D98B7A", "#A8577E", "#6E7F5B", "#B79A6B", "#7C6FB0"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Theme" value={t.theme} options={["Light", "Dark"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Type" />
        <TweakSelect label="Font pairing" value={t.fontPair}
          options={["Editorial", "Modern", "Grotesque"]}
          onChange={(v) => setTweak("fontPair", v)} />
        <TweakSection label="Shape" />
        <TweakRadio label="Corners" value={t.corners} options={["Sharp", "Soft", "Round"]}
          onChange={(v) => setTweak("corners", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout} options={["Split", "Stacked", "Full"]}
          onChange={(v) => setTweak("heroLayout", v)} />
      </TweaksPanel>
    </>
  );
}

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