// shared.jsx — Nav, Footer, common bits used across every page
// ─────────────────────────────────────────────────────────────

const { useState, useEffect, useRef, useMemo } = React;

const NAV_LINKS = [
  { num: "01", label: "Process",    href: "process.html"    },
  { num: "02", label: "Services",   href: "services.html"   },
  { num: "03", label: "Consulting", href: "consulting.html" },
  { num: "04", label: "Gallery",    href: "gallery.html"    },
  { num: "05", label: "About",      href: "about.html"      },
];

// Site logotype — Newsreader, with italic "the"
function Wordmark({ size = 18, color = "var(--ink)", subColor = "var(--ink-3)" }) {
  return (
    <div style={{
      fontFamily: "var(--serif)",
      fontWeight: 400,
      fontSize: size,
      letterSpacing: "-0.01em",
      lineHeight: 1,
      color,
    }}>
      Jewel<span style={{ fontStyle: "italic", color: subColor }}> the </span>Paint
    </div>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 30,
      background: "var(--bg-glass)",
      backdropFilter: "saturate(160%) blur(14px)",
      WebkitBackdropFilter: "saturate(160%) blur(14px)",
      borderBottom: "1px solid var(--rule)",
    }}>
      <div className="row" style={{
        padding: "14px var(--pad-gutter)",
        alignItems: "center", justifyContent: "space-between", gap: 24,
      }}>
        <a href="index.html" className="row gap-12" style={{ alignItems: "baseline" }}>
          <Wordmark size={18} />
          <div className="spec responsive-hide" style={{ marginLeft: 8 }}>
            BAY AREA · MOBILE
          </div>
        </a>

        <nav className="row gap-32 nav-links" style={{ alignItems: "center" }}>
          {NAV_LINKS.map(x => (
            <a key={x.label} href={x.href} className="spec"
               style={{
                 color: active === x.label ? "var(--ink)" : "var(--ink-2)",
                 fontWeight: active === x.label ? 500 : 400,
               }}>
              <span style={{ color: "var(--ink-4)", marginRight: 6 }}>{x.num}</span>
              {x.label}
            </a>
          ))}
        </nav>

        <a href="contact.html" className="btn" style={{ padding: "10px 14px" }}>
          Book <span className="arr">→</span>
        </a>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{
      borderTop: "1px solid var(--footer-bg)",
      background: "var(--footer-bg)",
      color: "var(--footer-fg)",
      padding: "64px var(--pad-gutter) 48px",
    }}>
      <div className="wrap col gap-48">
        <div className="row responsive-stack" style={{
          justifyContent: "space-between", alignItems: "baseline",
          flexWrap: "wrap", gap: 32,
        }}>
          <div className="col gap-12" style={{ maxWidth: 520 }}>
            <div style={{
              fontFamily: "var(--serif)", fontWeight: 300,
              fontSize: "clamp(40px, 6vw, 64px)",
              letterSpacing: "-0.025em", lineHeight: 0.95,
              color: "var(--footer-fg)",
            }}>
              Jewel <em style={{ color: "var(--footer-mute)" }}>the</em> Paint
            </div>
            <div className="spec" style={{ color: "var(--footer-mute)" }}>
              jewelthepaint.com · san francisco bay area · mobile detailing
            </div>
          </div>
          <div className="row responsive-stack gap-48">
            {[
              ["Studio",   [["Process", "process.html"], ["Services", "services.html"], ["Gallery", "gallery.html"]]],
              ["Visit",    [["About", "about.html"], ["Service area", "about.html#area"], ["FAQ", "about.html#faq"]]],
              ["Contact",  [["Start a consultation", "contact.html"], ["jewelthepaint@gmail.com", "mailto:jewelthepaint@gmail.com"], ["(408) 987-5587", "tel:+14089875587"]]],
            ].map(([t, items]) => (
              <div key={t} className="col gap-8">
                <div className="spec" style={{ color: "var(--footer-mute)" }}>{t}</div>
                {items.map(([label, href]) => (
                  <a key={label} href={href} style={{
                    fontFamily: "var(--serif)", fontWeight: 300, fontSize: 18,
                    color: "var(--footer-fg)",
                  }}>{label}</a>
                ))}
              </div>
            ))}
          </div>
        </div>

        <div className="row responsive-stack" style={{
          justifyContent: "space-between",
          paddingTop: 24,
          borderTop: "1px solid oklch(1 0 0 / 0.15)",
          fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em",
          color: "var(--footer-mute)", gap: 12,
        }}>
          <span>© 2026 JEWEL THE PAINT, LLC</span>
          <span>BY APPOINTMENT · MOBILE BAY-AREA</span>
          <span>EST. 2019</span>
        </div>
      </div>
    </footer>
  );
}

// ── shared in-page mini-components ────────────────────────────

function SpecStrip({ items }) {
  return (
    <div className="row responsive-stack" style={{
      borderTop: "1px solid var(--rule)",
      borderBottom: "1px solid var(--rule)",
    }}>
      {items.map((x, i) => (
        <div key={i} className="col" style={{
          flex: 1, padding: "18px 20px",
          borderRight: i < items.length - 1 ? "1px solid var(--rule)" : "none",
        }}>
          <div style={{
            fontFamily: "var(--serif)", fontSize: 18, fontWeight: 300,
          }}>{x[0]}</div>
          <div className="spec">{x[1]}</div>
        </div>
      ))}
    </div>
  );
}

function PageHeader({ section, eyebrow, title, kicker }) {
  return (
    <section className="section" style={{
      paddingTop: "calc(var(--pad-section) - 32px)",
      paddingBottom: "var(--pad-section)",
      position: "relative",
    }}>
      <span className="crosshair tl" />
      <span className="crosshair tr" />
      <div className="wrap col gap-32">
        <div className="row responsive-stack" style={{
          justifyContent: "space-between", alignItems: "baseline", gap: 24,
        }}>
          <div className="spec">§ {section} · {eyebrow}</div>
          <div className="spec" style={{ color: "var(--ink-4)" }}>
            JEWELTHEPAINT.COM
          </div>
        </div>
        <h1 className="h-display" style={{
          fontSize: "clamp(48px, 9vw, 132px)",
          letterSpacing: "-0.035em",
          margin: 0, maxWidth: "16ch",
        }}>
          {title}
        </h1>
        {kicker && (
          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
            fontSize: "clamp(18px, 1.6vw, 22px)", color: "var(--ink-2)",
            maxWidth: 640, margin: 0, lineHeight: 1.45,
          }}>
            {kicker}
          </p>
        )}
      </div>
    </section>
  );
}

// striped image-aware "ph" wrapper — uses a real img when src is given, else
// keeps the striped placeholder
function ImageFrame({ src, alt, caption, corner, aspect = "21/9", style }) {
  return (
    <div className="ph" style={{
      aspectRatio: aspect, width: "100%",
      border: "1px solid var(--rule)",
      ...style,
    }}>
      {src && (
        <img src={src} alt={alt || ""} style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover",
        }} />
      )}
      {corner && <div className="ph-corner">{corner}</div>}
      {caption && <div className="ph-label">{caption}</div>}
    </div>
  );
}

// Apply tweaks to body (theme, density)
function ApplyTweaks(t) {
  useEffect(() => {
    document.body.dataset.theme   = t.dark ? "dark" : "light";
    document.body.dataset.density = t.density || "standard";
  }, [t.dark, t.density]);
  return null;
}

// shared tweak defaults — same JSON shape on every page
const SITE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "density": "standard"
}/*EDITMODE-END*/;

Object.assign(window, {
  Wordmark, Nav, Footer, SpecStrip, PageHeader, ImageFrame,
  ApplyTweaks, SITE_TWEAK_DEFAULTS, NAV_LINKS,
});