/* VSHD chrome: Nav, Footer, Enquiry panel, Lightbox */

const { useState, useEffect, useRef } = React;

/* ----- Wordmark (uses vshd-logo.svg vector, falls back to text) ----- */
function VshdMark({ dark }) {
  return (
    <span className="nav__logo" aria-label="VSHD Design">
      <img
        src="media/vshd-logo.svg"
        alt="VSHD"
        style={{
          height: 14, width: "auto", display: "block",
          transform: "scaleY(0.625)", // counter-act the nav__logo scaleY
          filter: dark ? "invert(1) brightness(1.4)" : "none",
          opacity: dark ? 0.95 : 0.85
        }}
      />
    </span>
  );
}

/* ----- Nav ----- */
function Nav({ route, go, dark, onOpenEnquiry, lang, setLang }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const NavLink = ({ to, children }) => (
    <a
      href={"#/" + to}
      onClick={(e) => { e.preventDefault(); go(to); }}
      className={route.startsWith(to) && to !== "" ? "is-active" : (route === "" && to === "" ? "is-active" : "")}
    >{children}</a>
  );

  return (
    <header className={["nav", dark ? "nav--dark" : "", solid ? "nav--solid" : ""].join(" ")}>
      <a href="#/" onClick={(e) => { e.preventDefault(); go(""); }} aria-label="VSHD Design — home">
        <VshdMark dark={dark} />
      </a>

      <nav className="nav__center" aria-label="Primary">
        <NavLink to="projects">Projects</NavLink>
        <NavLink to="sectors">Sectors</NavLink>
        <NavLink to="studio">Studio</NavLink>
        <NavLink to="awards">Awards</NavLink>
        <NavLink to="press">Press</NavLink>
        <NavLink to="contact">Contact</NavLink>
      </nav>

      <div className="nav__right">
        <div className="nav__lang">
          <button
            onClick={() => setLang("en")}
            className={lang === "en" ? "is-active" : ""}
            aria-label="English"
          >EN</button>
          <span>·</span>
          <button
            onClick={() => setLang("ar")}
            className={lang === "ar" ? "is-active" : ""}
            aria-label="Arabic"
          >AR</button>
        </div>
        <button className="nav__cta" onClick={onOpenEnquiry}>Start a project</button>
      </div>
    </header>
  );
}

/* ----- Footer ----- */
function Footer({ onOpenEnquiry, go }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div style={{ padding: "0 0 88px" }}>
        <p className="footer__big">
          Tell us about your space.<br/>
          <em>We listen first.</em>
        </p>
        <button className="btn btn--light" onClick={onOpenEnquiry}>
          Start a project <span className="arrow" />
        </button>
      </div>

      <div className="footer__grid">
        <div>
          <h4>VSHD Design</h4>
          <p style={{ maxWidth: 42 + "ch" }}>
            A boutique interior architecture studio founded in 2007 by Rania Hamed.
            Studios in Dubai and Montréal. We work across residential,
            hospitality, workplace, retail, wellness and fitness.
          </p>
        </div>
        <div>
          <h4>Dubai</h4>
          <p>HDS Tower, Suite 1608<br/>Cluster F, JLT<br/>P.O. Box 213603, Dubai, UAE</p>
          <p style={{ marginTop: 14 }}><a href="tel:+97144542580" className="link-underline">+971 4 454 2580</a></p>
        </div>
        <div>
          <h4>Montréal</h4>
          <p>1450 René-Lévesque Blvd<br/>Suite 3305, H3G 0E1</p>
          <p style={{ marginTop: 14 }}><a href="tel:+15146909125" className="link-underline">+1 514 690 9125</a></p>
        </div>
        <div>
          <h4>General</h4>
          <p><a href="mailto:contact@vshd.net" className="link-underline">contact@vshd.net</a></p>
          <p style={{ marginTop: 14 }}>
            <a href="#" className="link-underline">Instagram</a><br/>
            <a href="#" className="link-underline">LinkedIn</a><br/>
            <a href="#" onClick={(e) => { e.preventDefault(); go("join-us"); }} className="link-underline">Join us</a>
          </p>
        </div>
      </div>

      <div className="footer__bottom">
        <span>© 2026 VSHD Design JLT</span>
        <span>Interior architecture · Dubai · Montréal</span>
      </div>
    </footer>
  );
}

/* ----- Enquiry slide-over ----- */
function EnquiryPanel({ open, onClose }) {
  const [submitted, setSubmitted] = useState(false);
  const formRef = useRef(null);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <>
      <div className={"scrim " + (open ? "is-open" : "")} onClick={onClose} aria-hidden />
      <aside className={"enquiry " + (open ? "is-open" : "")} role="dialog" aria-label="Start a project" aria-modal>
        <div className="enquiry__head">
          <span className="enquiry__title">Start a project · 01</span>
          <button className="enquiry__close" onClick={onClose}>Close</button>
        </div>

        {!submitted ? (
          <>
            <div className="enquiry__body">
              <h2 className="enquiry__h">A few <em>quiet</em> questions.</h2>
              <p className="enquiry__lede">
                Tell us about the place. We typically respond within two working days.
                For confidential briefs, write directly to contact@vshd.net.
              </p>

              <form ref={formRef} onSubmit={handleSubmit}>
                <div className="enq-row">
                  <div className="enq-field">
                    <label htmlFor="enq-name">Name</label>
                    <input id="enq-name" type="text" autoComplete="name" required />
                  </div>
                  <div className="enq-field">
                    <label htmlFor="enq-email">Email</label>
                    <input id="enq-email" type="email" autoComplete="email" required />
                  </div>
                </div>

                <div className="enq-row">
                  <div className="enq-field">
                    <label htmlFor="enq-phone">Phone (optional)</label>
                    <input id="enq-phone" type="tel" autoComplete="tel" />
                  </div>
                  <div className="enq-field">
                    <label htmlFor="enq-sector">Project type</label>
                    <select id="enq-sector" defaultValue="">
                      <option value="" disabled>Select…</option>
                      <option>Residential</option>
                      <option>Hospitality / F&amp;B</option>
                      <option>Workplace</option>
                      <option>Retail</option>
                      <option>Wellness</option>
                      <option>Fitness</option>
                      <option>Other</option>
                    </select>
                  </div>
                </div>

                <div className="enq-row">
                  <div className="enq-field">
                    <label htmlFor="enq-location">Location</label>
                    <input id="enq-location" type="text" placeholder="City, country" />
                  </div>
                  <div className="enq-field">
                    <label htmlFor="enq-stage">Stage</label>
                    <select id="enq-stage" defaultValue="">
                      <option value="" disabled>Select…</option>
                      <option>Concept / pre-design</option>
                      <option>Permit / DD</option>
                      <option>Construction</option>
                      <option>Refurbishment</option>
                    </select>
                  </div>
                </div>

                <div className="enq-field">
                  <label htmlFor="enq-msg">A little about the project</label>
                  <textarea id="enq-msg" rows="3" placeholder="The place, the brief, the deadline — as much or as little as you like." />
                </div>

                <div className="enq-channels">
                  <a href="https://wa.me/" target="_blank" rel="noreferrer">
                    <strong>WhatsApp</strong>
                    <span>Direct line</span>
                  </a>
                  <a href="tel:+97144542580">
                    <strong>+971 4 454 2580</strong>
                    <span>Dubai studio</span>
                  </a>
                  <a href="mailto:contact@vshd.net">
                    <strong>contact@vshd.net</strong>
                    <span>Confidential</span>
                  </a>
                </div>
              </form>
            </div>

            <div className="enquiry__foot">
              <span className="cap">Replies within 2 working days</span>
              <button
                className="btn btn--solid"
                onClick={() => formRef.current && formRef.current.requestSubmit()}
              >
                Send enquiry <span className="arrow" />
              </button>
            </div>
          </>
        ) : (
          <div className="enquiry__body" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ textAlign: "center", maxWidth: 36 + "ch" }}>
              <p className="cap" style={{ marginBottom: 24 }}>Received · 02</p>
              <h2 className="enquiry__h" style={{ marginBottom: 18 }}>Thank you.<br/><em>We'll be in touch.</em></h2>
              <p style={{ color: "var(--ink-soft)", fontSize: 15 }}>
                We typically reply within two working days.
                For anything urgent, the Dubai studio is on +971 4 454 2580.
              </p>
            </div>
          </div>
        )}
      </aside>
    </>
  );
}

/* ----- Lightbox ----- */
function Lightbox({ src, caption, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    if (src) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [src, onClose]);

  return (
    <div className={"lightbox " + (src ? "is-open" : "")} onClick={onClose}>
      <button className="lightbox__close" onClick={onClose}>Close</button>
      {src && <img src={src} alt="" />}
      {caption && <div className="lightbox__caption">{caption}</div>}
    </div>
  );
}

Object.assign(window, { Nav, Footer, EnquiryPanel, Lightbox, VshdMark });