/* shared.jsx, Monics Studio mockup kit (shared across both directions) */
const { useState } = React;

/* Circular monogram seal, the real Monics circular mark, recolorable via mask */
const SEAL_RATIO = 219 / 233; // height / width of the supplied artwork
function Seal({ size = 86, stroke = "currentColor" }) {
  return (
    <span role="img" aria-label="Monics Studio" style={{
      display: "inline-block", width: size, height: size * SEAL_RATIO, background: stroke,
      WebkitMaskImage: "url(monics-seal.png)", maskImage: "url(monics-seal.png)",
      WebkitMaskSize: "contain", maskSize: "contain",
      WebkitMaskRepeat: "no-repeat", maskRepeat: "no-repeat",
      WebkitMaskPosition: "center", maskPosition: "center",
    }} />
  );
}

/* Horizontal wordmark, the official MONICS STUDIO logo (vector-rendered, recolorable mask) */
const WORDMARK_RATIO = 2408 / 220; // ≈10.95
function Wordmark({ size = 24, color = "currentColor", height }) {
  const h = height != null ? height : size * 0.92;
  return (
    <span role="img" aria-label="MONICS STUDIO" style={{
      display: "inline-block", height: h, width: h * WORDMARK_RATIO, maxWidth: "min(100%, 56vw)", background: color,
      WebkitMaskImage: "url(monics-wordmark.png)", maskImage: "url(monics-wordmark.png)",
      WebkitMaskSize: "contain", maskSize: "contain",
      WebkitMaskRepeat: "no-repeat", maskRepeat: "no-repeat",
      WebkitMaskPosition: "left center", maskPosition: "left center",
      verticalAlign: "middle",
    }} />
  );
}

/* Photographic placeholder. Pass `slot` id to make it user-fillable, else a toned plate. */
function Plate({ tone = "#c8b9a6", glow, cap, slot, src, lock, shape = "rect", radius = 0, style = {}, fit = "cover", placeholder = "Drop photo" }) {
  // empty slots use a clean brand-neutral stone (Base White → Cream), never warm tan
  const STONE = "linear-gradient(165deg, #ebeae4 0%, #d6d1c4 56%, #c5c0b3 100%)";
  const grad = glow
    ? `radial-gradient(120% 90% at 30% 18%, ${glow} 0%, transparent 55%), linear-gradient(165deg, ${tone} 0%, ${shade(tone, -14)} 100%)`
    : `linear-gradient(165deg, ${shade(tone, 8)} 0%, ${tone} 45%, ${shade(tone, -16)} 100%)`;
  // locked: a fixed, non-droppable photograph baked into the page
  if (lock && src) {
    return (
      <div style={{ position: "relative", background: STONE, overflow: "hidden", borderRadius: radius, ...style }}>
        <img src={src} alt={cap || ""} draggable="false" style={{ width: "100%", height: "100%", objectFit: fit, display: "block" }} />
        {cap && <span className="label cap" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.92)", letterSpacing: "0.22em", zIndex: 3 }}>{cap}</span>}
      </div>
    );
  }
  if (slot) {
    return (
      <div style={{ position: "relative", background: STONE, overflow: "hidden", borderRadius: radius, ...style }}>
        <image-slot id={slot} src={src} shape={shape} radius={String(radius)} fit={fit} placeholder={placeholder}
          style={{ width: "100%", height: "100%" }}></image-slot>
        {cap && <span className="label cap" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.92)", letterSpacing: "0.22em", zIndex: 3 }}>{cap}</span>}
      </div>
    );
  }
  return (
    <div className="plate" style={{ background: grad, borderRadius: radius, ...style }}>
      {cap && <span className="label cap" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.86)" }}>{cap}</span>}
    </div>
  );
}

/* tiny color math */
function shade(hex, amt) {
  const c = hex.replace("#", "");
  const n = parseInt(c.length === 3 ? c.split("").map(x => x + x).join("") : c, 16);
  let r = (n >> 16) + amt, g = ((n >> 8) & 255) + amt, b = (n & 255) + amt;
  r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
  return `rgb(${r},${g},${b})`;
}

/* thin hairline rule */
function Rule({ color = "currentColor", opacity = 0.18, style = {} }) {
  return <div style={{ height: 1, background: color, opacity, width: "100%", ...style }} />;
}

/* small caps overline label */
function Over({ children, style = {} }) {
  return <div className="label" style={{ fontSize: 10.5, letterSpacing: "0.26em", ...style }}>{children}</div>;
}

/* numbered index tag e.g. (01) */
function Idx({ n }) {
  return <span className="label" style={{ fontSize: 10, opacity: 0.55, letterSpacing: "0.18em" }}>{n}</span>;
}

/* Layout guide overlay, margins + N-column grid + horizontal rulers. Shown only when html.show-guides. */
function Guides({ pad = 84, cols = 12, gutter = 24, row = 80 }) {
  return (
    <div className="guides-layer" style={{ position: "absolute", inset: 0, zIndex: 50, pointerEvents: "none" }}>
      {/* horizontal rulers, repeating across full height */}
      <div style={{ position: "absolute", inset: 0, backgroundImage: `repeating-linear-gradient(to bottom, rgba(80,143,155,0.28) 0, rgba(80,143,155,0.28) 1px, transparent 1px, transparent ${row}px)` }} />
      {/* margin fills */}
      <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: pad, background: "rgba(183,141,138,0.10)", borderRight: "1px solid rgba(183,141,138,0.55)" }} />
      <div style={{ position: "absolute", top: 0, bottom: 0, right: 0, width: pad, background: "rgba(183,141,138,0.10)", borderLeft: "1px solid rgba(183,141,138,0.55)" }} />
      {/* vertical column grid */}
      <div style={{ position: "absolute", top: 0, bottom: 0, left: pad, right: pad, display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, columnGap: gutter }}>
        {Array.from({ length: cols }).map((_, i) => (
          <div key={i} style={{ background: "rgba(80,143,155,0.10)", borderLeft: "1px solid rgba(80,143,155,0.40)", borderRight: "1px solid rgba(80,143,155,0.40)" }} />
        ))}
      </div>
      {/* center axes */}
      <div style={{ position: "absolute", top: 0, bottom: 0, left: "50%", width: 1, background: "rgba(183,141,138,0.6)" }} />
    </div>
  );
}

/* Shared site footer, used across live pages (Home, Method, Services, Projects, Project, About) */
function SiteFooter({ palette }) {
  const F = palette || { ink: "#282828", soft: "#7d7669", paper2: "#e3ded5", line: "#cdc7b9" };
  const cols = [
    ["Explore", ["Projects", "Services", "Method"]],
    ["Studio", ["About", "Journal", "Contact"]],
    ["Contact", ["hello@monics.studio", "+39 347 4374756", "+971 56 382 7107", "Via Giuseppe Mazzini 9, 20123 Milano MI"]],
    ["Studios", ["Milano, Italy", "Dubai, UAE"]],
    ["Follow", ["Instagram", "Pinterest", "LinkedIn"]],
    ["Sister company", ["monicsvieira.com"]],
  ];
  const hrefFor = (it) => ({ Projects: "projects.html", Services: "services.html", Method: "method.html", About: "about.html", Journal: "https://substack.com/@taniamonics", "hello@monics.studio": "mailto:hello@monics.studio", "monicsvieira.com": "https://monicsvieira.com", "+39 347 4374756": "tel:+393474374756", "+971 56 382 7107": "tel:+971563827107", "Instagram": "https://www.instagram.com/monics.studio", "Pinterest": "https://pin.it/2Lt0WGTY0", "LinkedIn": "https://www.linkedin.com/in/tania-monics/" }[it]);
  return (
    <footer style={{ background: F.paper2, color: F.ink, padding: `clamp(52px,6vw,72px) clamp(28px,6vw,96px) clamp(28px,3vw,36px)`, borderTop: `1px solid ${F.line}` }}>
      <div className="foot-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 30, maxWidth: 1180, margin: "0 auto", textAlign: "center" }}>
        {cols.map(([h, items]) => (
          <div key={h} className={"foot-" + h.toLowerCase().replace(/[^a-z]+/g, "-")}>
            <div className="label" style={{ fontSize: 12, color: F.soft, marginBottom: 13, letterSpacing: "0.22em" }}>{h}</div>
            {items.map(it => {
              const href = hrefFor(it);
              const external = href && href.startsWith("http");
              return href
                ? <a key={it} href={href} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})} style={{ display: "block", fontSize: 15, lineHeight: 1.85, color: F.ink, textDecoration: "none", cursor: "pointer" }}>{it}</a>
                : <div key={it} style={{ fontSize: 15, lineHeight: 1.85, color: F.ink, cursor: "pointer" }}>{it}</div>;
            })}
          </div>
        ))}
      </div>
      <div style={{ height: 1, background: F.line, margin: "clamp(40px,5vw,48px) 0 clamp(28px,3vw,32px)" }} />
      <div className="foot-base" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, alignItems: "center" }}>
        <a href="index.html" style={{ textDecoration: "none" }}><Wordmark size={19} color={F.ink} /></a>
        <div className="label" style={{ fontSize: 12, color: F.soft, letterSpacing: "0.18em" }}>© 2026 Monics Studio · Spatial Sensory Intelligence</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Seal, Wordmark, Plate, Rule, Over, Idx, shade, Guides, SiteFooter });