// Shared components for Art Dallas

const { useState, useEffect, useRef } = React;

function navigate(path) {
  window.location.hash = path;
}

function useRoute() {
  const [route, setRoute] = useState(window.location.hash.slice(1) || "/");
  useEffect(() => {
    const onHash = () => { setRoute(window.location.hash.slice(1) || "/"); window.scrollTo({ top: 0 }); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return [route, navigate];
}

function Link({ to, children, className, style, onClick }) {
  return (
    <a href={"#" + to} className={className} style={style} onClick={(e) => { onClick && onClick(e); }}>
      {children}
    </a>
  );
}

function Wordmark({ size = 22, color }) {
  return (
    <Link to="/" className="wordmark" style={{ display: "inline-flex", alignItems: "baseline", gap: 8, fontFamily: "var(--font-display)", color: color || "var(--ink)", letterSpacing: "-0.01em" }}>
      <span style={{ fontSize: size, fontStyle: "italic", fontWeight: 500 }}>Art</span>
      <span style={{ fontSize: size, fontWeight: 500 }}>Dallas</span>
      <span style={{ fontSize: 9, letterSpacing: "0.25em", color: color || "var(--muted)", marginLeft: 2, transform: "translateY(-2px)" }}>EST. 1988</span>
    </Link>
  );
}

function UtilityBar() {
  return (
    <div style={{ background: "var(--ink)", color: "rgba(255,255,255,0.78)", fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", padding: "8px 0" }}>
      <div className="container-wide" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
        <span style={{ fontWeight: 500 }}>Dallas · Art Consulting · Since 1988</span>
        <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
          <a href="tel:2146880244" style={{ color: "inherit" }}>214 · 688 · 0244</a>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>By Appointment</span>
        </div>
      </div>
    </div>
  );
}

function Navbar({ transparent = false }) {
  const [route] = useRoute();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const solid = !transparent || scrolled;
  const nav = [
    { label: "About", to: "/about" },
    { label: "Services", to: "/services" },
    { label: "Projects", to: "/projects" },
    { label: "Process", to: "/new-project" },
    { label: "Contact", to: "/contact" },
  ];
  return (
    <>
      <UtilityBar />
      <nav style={{
        position: "sticky", top: 0, zIndex: 40,
        background: solid ? "rgba(250,247,241,0.96)" : "transparent",
        backdropFilter: solid ? "blur(8px)" : "none",
        borderBottom: solid ? "1px solid var(--hairline)" : "1px solid transparent",
        transition: "all 0.25s ease",
      }}>
        <div className="container-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 32px" }}>
          <Wordmark />
          <div className="nav-links" style={{ display: "flex", gap: 36 }}>
            {nav.map(n => {
              const active = route === n.to || (n.to !== "/" && route.startsWith(n.to));
              return (
                <Link key={n.to} to={n.to} style={{
                  fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase",
                  color: active ? "var(--ink)" : "var(--ink-body)",
                  borderBottom: active ? "1px solid var(--forest)" : "1px solid transparent",
                  paddingBottom: 4, transition: "all 0.2s",
                }}>{n.label}</Link>
              );
            })}
          </div>
          <button className="hamburger" onClick={() => setOpen(true)} aria-label="Menu" style={{
            display: "none", background: "transparent", border: "1px solid var(--hairline)", padding: "10px 14px",
            fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", cursor: "pointer", color: "var(--ink)",
          }}>Menu</button>
        </div>
      </nav>
      {open && (
        <div style={{ position: "fixed", inset: 0, background: "var(--bg)", zIndex: 100, padding: 32 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 48 }}>
            <Wordmark />
            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: 0, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", cursor: "pointer" }}>Close</button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {nav.map(n => (
              <Link key={n.to} to={n.to} onClick={() => setOpen(false)} style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink)" }}>{n.label}</Link>
            ))}
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 880px) {
          .nav-links { display: none !important; }
          .hamburger { display: block !important; }
        }
      `}</style>
    </>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "rgba(255,255,255,0.7)", padding: "80px 0 32px", marginTop: 80 }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48, marginBottom: 64 }} className="footer-grid">
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff", letterSpacing: "-0.01em" }}>
              <span style={{ fontStyle: "italic" }}>Art</span> Dallas
            </div>
            <p style={{ marginTop: 16, fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.6)" }}>
              <em style={{ fontFamily: "var(--font-display)", fontSize: 16 }}>Make it. Frame it. Ship it.</em><br/>
              Dallas · Since 1988
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>Sitemap</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <li><Link to="/about" style={{ color: "rgba(255,255,255,0.78)" }}>About</Link></li>
              <li><Link to="/services" style={{ color: "rgba(255,255,255,0.78)" }}>Services</Link></li>
              <li><Link to="/projects" style={{ color: "rgba(255,255,255,0.78)" }}>Projects</Link></li>
              <li><Link to="/new-project" style={{ color: "rgba(255,255,255,0.78)" }}>Start a Project</Link></li>
              <li><Link to="/contact" style={{ color: "rgba(255,255,255,0.78)" }}>Contact</Link></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>Visit</div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: "rgba(255,255,255,0.78)" }}>
              9207 Sovereign Row<br/>
              Dallas, TX 75247<br/><br/>
              <a href="tel:2146880244" style={{ color: "#fff" }}>214.688.0244</a><br/>
              <a href="mailto:info@artdallas.com" style={{ color: "#fff" }}>info@artdallas.com</a>
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>Hours</div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: "rgba(255,255,255,0.78)" }}>
              Mon–Thu · 8:30–4:30<br/>
              Fri · 8:30–4:00<br/>
              <em style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--gold)" }}>Currently by appointment only</em>
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 20, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
              <a href="https://www.instagram.com/art_dallas_inc/" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.6)" }}>IG</a>
              <a href="https://www.facebook.com/artdallasinc/" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.6)" }}>FB</a>
              <a href="http://pinterest.com/artdallas" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.6)" }}>PT</a>
              <a href="http://www.yelp.com/biz/art-dallas-dallas" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.6)" }}>YE</a>
            </div>
          </div>
        </div>
        <hr style={{ border: 0, borderTop: "1px solid rgba(255,255,255,0.12)" }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(255,255,255,0.4)" }}>
          <span>© 2026 Art Dallas, Inc.</span>
          <span>Woman Owned · Family Run</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function Eyebrow({ children, style }) {
  return <div className="eyebrow" style={style}>{children}</div>;
}

function Lightbox({ images, index, onClose, onIndex }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onIndex((index + 1) % images.length);
      if (e.key === "ArrowLeft") onIndex((index - 1 + images.length) % images.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [index]);
  return (
    <div className="lb-overlay" onClick={onClose}>
      <button className="lb-close" onClick={onClose}>Close ✕</button>
      <button className="lb-nav lb-prev" onClick={(e) => { e.stopPropagation(); onIndex((index - 1 + images.length) % images.length); }}>‹</button>
      <img src={images[index]} className="lb-img" onClick={(e) => e.stopPropagation()} alt="" />
      <button className="lb-nav lb-next" onClick={(e) => { e.stopPropagation(); onIndex((index + 1) % images.length); }}>›</button>
      <div className="lb-count">{String(index + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")}</div>
    </div>
  );
}

function Gallery({ images, columns = 3, aspectVariants = true }) {
  const [lbIdx, setLbIdx] = useState(null);
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 16 }} className="gallery-grid">
        {images.map((src, i) => {
          const aspect = aspectVariants ? (i % 5 === 0 ? "3/4" : i % 5 === 2 ? "4/3" : "1/1") : "1/1";
          return (
            <button key={i} onClick={() => setLbIdx(i)} style={{ padding: 0, border: 0, background: "transparent", cursor: "zoom-in", overflow: "hidden" }}>
              <img src={src} alt="" loading="lazy" style={{ width: "100%", aspectRatio: aspect, objectFit: "cover", transition: "transform 0.6s ease", filter: "saturate(0.96)" }}
                onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.03)"}
                onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
              />
            </button>
          );
        })}
      </div>
      {lbIdx !== null && <Lightbox images={images} index={lbIdx} onClose={() => setLbIdx(null)} onIndex={setLbIdx} />}
      <style>{`
        @media (max-width: 880px) { .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </>
  );
}

function PullQuote({ children, attribution }) {
  return (
    <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(28px, 3.5vw, 44px)", lineHeight: 1.25, color: "var(--ink)", maxWidth: 880 }}>
      <span style={{ color: "var(--gold)", fontSize: "1.4em", verticalAlign: "-0.2em", marginRight: 8 }}>“</span>
      {children}
      <span style={{ color: "var(--gold)", fontSize: "1.4em", verticalAlign: "-0.2em", marginLeft: 4 }}>”</span>
      {attribution && <footer style={{ marginTop: 24, fontFamily: "var(--font-body)", fontStyle: "normal", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>— {attribution}</footer>}
    </blockquote>
  );
}

function CTASection({ title, body, ctaLabel, ctaTo, dark = false }) {
  return (
    <section className="section" style={{ background: dark ? "var(--ink)" : "transparent", color: dark ? "#fff" : "inherit", borderTop: "1px solid var(--hairline)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", color: dark ? "#fff" : "var(--ink)", marginBottom: 24 }}>{title}</h2>
        {body && <p style={{ maxWidth: 620, margin: "0 auto 36px", fontSize: 17, color: dark ? "rgba(255,255,255,0.72)" : "var(--ink-body)" }}>{body}</p>}
        <Link to={ctaTo}><span className="btn btn-primary" style={{ background: dark ? "var(--gold)" : "var(--forest)" }}>{ctaLabel}</span></Link>
      </div>
    </section>
  );
}

Object.assign(window, { useRoute, navigate, Link, Wordmark, Navbar, Footer, Eyebrow, Lightbox, Gallery, PullQuote, CTASection, UtilityBar });