// Page-level views: Home, About, Project detail.

function Home({ lang, layout, accent, onOpen }) {
  const c = COPY[lang];
  const [hovered, setHovered] = React.useState(null);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const [slide, setSlide] = React.useState(0);

  React.useEffect(() => {
    if (layout !== "list-hover") return;
    const onMove = (e) => setMouse({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, [layout]);

  // Featured — slugs listed in FEATURED (data.jsx), in that order.
  const featured = FEATURED
    .map((slug) => PROJECTS.find((p) => p.slug === slug))
    .filter(Boolean);

  // auto-advance slideshow
  React.useEffect(() => {
    const id = setInterval(() => setSlide((s) => (s + 1) % featured.length), 4500);
    return () => clearInterval(id);
  }, [featured.length]);

  const hoveredProject = PROJECTS.find((p) => p.slug === hovered);
  // Only projects with real thumbnails are eligible for the hover preview.
  const previewProjects = React.useMemo(
    () => PROJECTS.filter((p) => !!p.hero),
    []
  );


  // Maker's mark — uses the uploaded PK logo SVG.
  const Mark = () =>
  <img src="assets/pk-logo.svg" alt="PK" width="56" height="50"
  style={{ display: "block", objectFit: "contain" }} />;


  // Hero gutter — same padding from each edge.
  // Top edge sits flush against the bottom of the nav, so the headline and
  // the nav share the same horizontal alignment too.
  const gutter = "clamp(20px, 4vw, 56px)";

  return (
    <main>
      {/* Hero — 100vw × (100vh - nav). Equal gutter on all four sides. */}
      <section className="hero-section" style={{
        position: "relative",
        width: "100%",
        height: "calc(100vh - var(--nav-h, 92px))",
        padding: gutter,
        boxSizing: "border-box",
        overflow: "hidden"
      }}>
        {/* Top-left: big headline, pinned to top + left gutter */}
        <h1 className="hero-h1" style={{
          position: "absolute",
          top: gutter, left: gutter,
          right: "auto",
          maxWidth: "min(72vw, 1100px)",
          margin: 0,
          fontFamily: "var(--font-display)",
          fontSize: "clamp(36px, min(9vw, 14vh), 156px)",
          fontWeight: 400,
          lineHeight: .92,
          letterSpacing: "-.035em",
          textWrap: "balance",
          whiteSpace: "nowrap",
          color: "currentColor"
        }}>
          Peter Koolmees<br />
          <em style={{ fontStyle: "italic", color: accent }}>{c.tagline}</em>
        </h1>

        {/* Wrapper for bio + portrait — desktop: children stay absolutely
             positioned; mobile: this becomes a flex column-reverse. */}
        <div className="hero-bottom-grid">
          {/* Bottom-left: bio block, pinned to bottom + left gutter */}
          <div className="hero-bio" style={{
            position: "absolute",
            bottom: gutter, left: gutter,
            maxWidth: "min(520px, 42vw)"
          }}>
          <div style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, marginBottom: 16
          }}>
            {lang === "nl" ? "Korte biografie" : "Short biography"}
          </div>
          <p style={{
            fontSize: "clamp(14px, 1vw, 16px)", lineHeight: 1.55,
            margin: "0 0 22px", textWrap: "pretty"
          }}>
            {lang === "nl" ?
            "Peter Koolmees verbindt in zijn werk als goud- en zilversmid traditioneel ambacht met een hedendaagse visie op menselijk gedrag, transformatie en onderlinge relaties. Zijn creaties omarmen imperfectie en diversiteit, waardoor elk stuk een puur, persoonlijk en eigen karakter krijgt." :
            "In his work as a goldsmith and silversmith, Peter Koolmees combines traditional craft with a contemporary view on human behaviour, transformation and the relationships between us. His creations embrace imperfection and diversity, giving each piece a pure, personal character of its own."}
          </p>
          <a href="#/about"
            onMouseEnter={(e) => {
              e.currentTarget.style.background = accent;
              e.currentTarget.style.color = "#fff";
              e.currentTarget.style.borderColor = "transparent";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "#1a1816";
              e.currentTarget.style.borderColor = "#1a1816";
            }}
            style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "11px 20px",
              border: "0.5px solid #1a1816",
              borderRadius: 999,
              background: "transparent",
              color: "#1a1816", textDecoration: "none", cursor: "pointer",
              transition: "background .2s ease, color .2s ease, border-color .2s ease",
              fontFamily: "ui-monospace, monospace", fontSize: 11,
              letterSpacing: ".18em", textTransform: "uppercase"
            }}>
            {c.leesMeer} <span aria-hidden="true">→</span>
          </a>
        </div>

        {/* Bottom-right: portrait, pinned to bottom + right gutter */}
        <div className="hero-portrait" style={{
          position: "absolute",
          bottom: gutter, right: gutter,
          width: "min(360px, 30vw, 38vh)"
        }}>
          <img src="assets/peter-portrait.png" alt="Peter Koolmees"
            style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", display: "block" }} />
        </div>
        </div>
      </section>

      {/* Spacer below hero so the rest of the page starts in the next viewport */}
      <div style={{ height: "clamp(40px, 6vw, 80px)" }}></div>

      <div style={{ padding: "0 clamp(20px, 4vw, 56px) 80px" }}>

      {/* Slideshow of work */}
      <section id="slideshow" style={{ marginBottom: "clamp(60px, 9vw, 120px)" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 16, paddingBottom: 8,
          borderBottom: "0.5px solid currentColor"
        }}>
          <h2 style={{
            margin: 0, fontFamily: "ui-monospace, monospace", fontSize: 11,
            fontWeight: 500, letterSpacing: ".18em", textTransform: "uppercase", opacity: .55
          }}>
            {lang === "nl" ? "Werk — uitgelicht" : "Work — featured"}
          </h2>
          <span style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".08em", opacity: .4, fontVariantNumeric: "tabular-nums"
          }}>
            {String(slide + 1).padStart(2, "0")} / {String(featured.length).padStart(2, "0")}
          </span>
        </div>

        <Slideshow
          slide={slide} setSlide={setSlide} items={featured}
          lang={lang} accent={accent} onOpen={onOpen} />
      </section>

      {/* Full categorised project list (kept as a quick index) */}
      <section style={{ marginBottom: "clamp(60px, 9vw, 120px)" }}>
        <h2 style={{
          margin: "0 0 16px", fontFamily: "ui-monospace, monospace", fontSize: 11,
          fontWeight: 500, letterSpacing: ".18em", textTransform: "uppercase", opacity: .55,
          paddingBottom: 8, borderBottom: "0.5px solid currentColor"
        }}>
          {lang === "nl" ? "Index — alle werken" : "Index — all works"}
        </h2>
        <div style={{ marginTop: 24 }}>
          {PROJECTS.map((p, i) =>
          <ListRow key={p.slug} project={p} lang={lang} layout="list"
          onClick={() => onOpen(p.slug)}
          hovered={hovered} setHovered={setHovered}
          index={i} total={PROJECTS.length} />
          )}
        </div>
      </section>

      {/* Contact info — bottom of home page */}
      <section id="contact" style={{
        paddingTop: "clamp(40px, 6vw, 80px)",
        borderTop: "0.5px solid currentColor"
      }}>
        <div style={{
          fontFamily: "ui-monospace, monospace", fontSize: 11,
          letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, marginBottom: 24
        }}>
          {lang === "nl" ? "Contact" : "Contact"}
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: "clamp(20px, 3vw, 40px)",
          fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.4
        }}>
          <ContactCell label={lang === "nl" ? "Email" : "Email"}
          href={`mailto:${SITE.email}`} value={SITE.email} />
          <ContactCell label={lang === "nl" ? "Telefoon" : "Phone"}
          href={`tel:${SITE.phone.replace(/\s/g, '')}`} value={SITE.phone} />
          <ContactCell label="Instagram"
          href={SITE.instagramUrl} value={`@${SITE.instagram}`} external />
        </div>
      </section>

      {layout === "list-hover" && <HoverPreview projects={previewProjects} hoveredSlug={hovered} mouse={mouse} />}
      </div>
    </main>);

}

function ContactCell({ label, value, href, external }) {
  const v = href ?
  <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener" : undefined}
  style={{
    color: "inherit", textDecoration: "none",
    borderBottom: "1px solid currentColor", paddingBottom: 1
  }}>{value}</a> :
  value;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{
        fontFamily: "ui-monospace, monospace", fontSize: 11,
        letterSpacing: ".15em", textTransform: "uppercase", opacity: .45
      }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)" }}>{v}</span>
    </div>);

}

function Slideshow({ slide, setSlide, items, lang, accent, onOpen }) {
  const p = items[slide];
  const next = () => setSlide((s) => (s + 1) % items.length);
  const prev = () => setSlide((s) => (s - 1 + items.length) % items.length);
  const c = COPY[lang];

  return (
    <div>
      <div
        onClick={() => onOpen(p.slug)}
        style={{ cursor: "pointer", position: "relative" }}
        onMouseEnter={(e) => e.currentTarget.style.opacity = "0.96"}
        onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}>
        {(() => {
          // Prefer images[0] (the detail-page main photo) over hero (which may be
          // a thumbnail crop). Natural aspect + viewport-height cap, same as the
          // project detail page hero. No crop.
          const src = (p.images && p.images[0]) || p.hero;
          // Slideshow box = viewport-height minus nav, the "Werk — uitgelicht"
          // header above (~38px), the controls bar below (~52px) and a small
          // buffer (~24px). Net subtraction: ~114px so header + image +
          // dots/arrows all fit in one viewport.
          // Wider photos get side-cropped via cover so full height stays visible.
          return src
            ? <div style={{
                width: "100%",
                height: "calc(100vh - var(--nav-h, 92px) - 114px)",
                overflow: "hidden"
              }}>
                <img src={src} alt={p.titles[lang]}
                  loading="lazy"
                  style={{
                    display: "block",
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                    objectPosition: "center"
                  }} />
              </div>
            : <Placeholder aspect="16 / 9" tone={p.placeholder.tone}
                label={`${c[`section${cap(p.category)}`]} — ${p.year}`}
                caption={c.placeholderNote} />;
        })()}
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "clamp(20px, 3vw, 40px)",
          background: "linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0))",
          color: "#fff",
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          pointerEvents: "none"
        }}>
          <div>
            <div style={{
              fontFamily: "ui-monospace, monospace", fontSize: 11,
              letterSpacing: ".15em", textTransform: "uppercase", opacity: .8, marginBottom: 6
            }}>
              {c[`section${cap(p.category)}`]} · {p.year}
            </div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1, letterSpacing: "-.02em"
            }}>{p.titles[lang]}</div>
          </div>
          <div style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".15em", textTransform: "uppercase", opacity: .8
          }}>
            {lang === "nl" ? "Open →" : "Open →"}
          </div>
        </div>
      </div>

      {/* Controls + dots */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        marginTop: 16
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          {items.map((proj, i) =>
          <button key={proj.slug}
          onClick={() => setSlide(i)}
          aria-label={`Go to ${proj.titles[lang]}`}
          style={{
            appearance: "none", border: 0, padding: 0, cursor: "pointer",
            width: i === slide ? 24 : 8, height: 8, borderRadius: 4,
            background: i === slide ? accent : "currentColor",
            opacity: i === slide ? 1 : .25,
            transition: "all .25s ease"
          }} />
          )}
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <SlideBtn onClick={prev} label="←" />
          <SlideBtn onClick={next} label="→" />
        </div>
      </div>
    </div>);

}

function SlideBtn({ onClick, label }) {
  return (
    <button onClick={onClick} style={{
      appearance: "none", background: "transparent", border: "0.5px solid currentColor",
      color: "inherit", width: 36, height: 36, borderRadius: 18, cursor: "pointer",
      fontFamily: "ui-monospace, monospace", fontSize: 14
    }}>{label}</button>);

}

function About({ lang, accent }) {
  const c = COPY[lang];
  return (
    <main className="about-main" style={{
      padding: "clamp(40px, 8vw, 120px) clamp(20px, 4vw, 56px) 80px",
      maxWidth: 1280, margin: "0 auto"
    }}>
      <div className="about-grid" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)",
        gap: "clamp(32px, 6vw, 100px)",
        alignItems: "start"
      }}>
        <div className="about-portrait-wrap" style={{ position: "sticky", top: 120 }}>
          <img src="assets/peter-portrait.png" alt="Peter Koolmees"
          style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", display: "block" }} />
        </div>
        <div>
          <div style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, marginBottom: 16
          }}>
            {c.over}
          </div>
          <h1 className="about-h1" style={{
            margin: "0 0 48px",
            fontFamily: "var(--font-display)",
            fontSize: "clamp(36px, 5vw, 72px)",
            fontWeight: 400, lineHeight: 1.05, letterSpacing: "-.025em",
            textWrap: "balance"
          }}>
            {lang === "nl" ?
            <>In materie <em style={{ color: accent, fontStyle: "italic" }}>gevangen</em> gedachten.</> :
            <>Thoughts <em style={{ color: accent, fontStyle: "italic" }}>caught</em> in matter.</>}
          </h1>
          {c.aboutBody.map((para, i) =>
          <p key={i} style={{
            fontSize: "clamp(15px, 1.3vw, 17px)",
            lineHeight: 1.65, marginBottom: 22, opacity: .85, textWrap: "pretty"
          }}>{para}</p>
          )}
          <div style={{
            display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 32, rowGap: 8,
            marginTop: 48, paddingTop: 32, borderTop: "0.5px solid rgba(0,0,0,.1)",
            fontSize: 13, fontFamily: "ui-monospace, monospace", letterSpacing: ".04em"
          }}>
            <div style={{ opacity: .5 }}>Email</div>
            <div><a href={`mailto:${SITE.email}`} style={{ color: "inherit" }}>{SITE.email}</a></div>
            <div style={{ opacity: .5 }}>{lang === "nl" ? "Tel" : "Phone"}</div>
            <div><a href={`tel:${SITE.phone.replace(/\s/g, '')}`} style={{ color: "inherit" }}>{SITE.phone}</a></div>
            <div style={{ opacity: .5 }}>Instagram</div>
            <div><a href={SITE.instagramUrl} target="_blank" rel="noopener" style={{ color: "inherit" }}>@{SITE.instagram}</a></div>
          </div>
        </div>
      </div>
    </main>);

}

function ProjectPage({ slug, lang, accent, onOpen, onBack }) {
  const c = COPY[lang];
  const project = PROJECTS.find((p) => p.slug === slug);
  if (!project) return null;
  const idx = PROJECTS.findIndex((p) => p.slug === slug);
  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];
  const t = project.titles[lang];
  const blurb = project.blurb[lang];
  const body = project.body[lang];
  const material = project.specs.material[lang];
  const sectionLabel = c[`section${cap(project.category)}`];
  const images = project.images || null;
  const hasImages = !!images && images.length > 0;
  const totalSlots = hasImages ? images.length : Math.max(project.placeholder.count, 4);

  const slot = (i, aspect, labelPrefix) => {
    const num = String(i + 1).padStart(2, "0");
    const total = String(totalSlots).padStart(2, "0");
    if (hasImages && i < images.length) {
      // Every image slot: box = viewport-height (minus nav + small buffer),
      // full container width. Image fills with cover — sides crop for wider
      // images so the full height is always visible.
      return (
        <div style={{
          width: "100%",
          height: "calc(100vh - var(--nav-h, 92px) - 24px)",
          overflow: "hidden"
        }}>
          <img src={images[i]} alt={`${t} — ${num}`}
            loading={i === 0 ? "eager" : "lazy"}
            style={{
              display: "block",
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "center"
            }} />
        </div>
      );
    }
    return (
      <Placeholder aspect={aspect} tone={project.placeholder.tone}
        label={`${labelPrefix || ""}${num} / ${total}`}
        caption={i === 0 ? c.placeholderNote : undefined} />
    );
  };

  return (
    <main style={{ padding: "clamp(20px, 4vw, 40px) 0 80px" }}>
      <div style={{ padding: "0 clamp(20px, 4vw, 56px) 32px" }}>
        <a onClick={onBack} style={{
          cursor: "pointer", color: "inherit", textDecoration: "none",
          fontFamily: "ui-monospace, monospace", fontSize: 11,
          letterSpacing: ".15em", textTransform: "uppercase", opacity: .55
        }}>← {c.backToWork}</a>
      </div>

      <header style={{
        padding: "0 clamp(20px, 4vw, 56px)",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
        gap: "clamp(32px, 4vw, 64px)",
        alignItems: "end",
        marginBottom: "clamp(40px, 6vw, 80px)"
      }}>
        <div>
          <div style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".18em", textTransform: "uppercase", opacity: .55, marginBottom: 16
          }}>
            {sectionLabel} · {project.year}
          </div>
          <h1 style={{
            margin: 0,
            fontFamily: "var(--font-display)",
            fontSize: "clamp(40px, 7vw, 104px)",
            fontWeight: 400,
            lineHeight: .98,
            letterSpacing: "-.03em",
            textWrap: "balance"
          }}>{t}</h1>
        </div>
        {blurb &&
        <p style={{
          margin: 0,
          fontSize: "clamp(15px, 1.4vw, 18px)",
          lineHeight: 1.55, opacity: .8, maxWidth: 480, textWrap: "pretty"
        }}>{blurb}</p>
        }
      </header>

      {/* Hero image */}
      <div style={{ padding: "0 clamp(20px, 4vw, 56px)", marginBottom: 24 }}>
        {slot(0, "16 / 10", `${sectionLabel} — `)}
      </div>

      <section style={{
        padding: "clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px)",
        display: "grid",
        gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)",
        gap: "clamp(32px, 5vw, 80px)"
      }}>
        <aside style={{
          fontFamily: "ui-monospace, monospace", fontSize: 12,
          letterSpacing: ".04em", display: "flex", flexDirection: "column", gap: 4
        }}>
          <SpecRow label={c.yearLabel} value={project.year} />
          <SpecRow label={c.materialLabel} value={material} />
          <SpecRow label={c.dimensionsLabel} value={project.specs.dimensions} />
          <div style={{
            marginTop: 24, paddingTop: 16, borderTop: "0.5px solid rgba(0,0,0,.1)",
            display: "flex", alignItems: "center", justifyContent: "space-between"
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase"
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: "50%",
                background: project.specs.status === "available" ? "#5a8c3a" : "rgba(0,0,0,.25)"
              }} />
              {project.specs.status === "available" ? c.available : c.sold}
            </span>
            {project.specs.status === "available" &&
            <a href={`mailto:${SITE.email}?subject=${encodeURIComponent(t)}`}
            style={{
              color: "inherit", textDecoration: "none",
              fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase",
              borderBottom: "1px solid currentColor", paddingBottom: 1
            }}>
                {c.inquire} →
              </a>
            }
          </div>
        </aside>
        <div>
          {body.map((para, i) =>
          <p key={i} style={{
            margin: "0 0 22px",
            fontSize: "clamp(15px, 1.3vw, 17px)", lineHeight: 1.65,
            opacity: i === 0 ? .95 : .8, textWrap: "pretty"
          }}>{para}</p>
          )}
        </div>
      </section>

      {/* Exactly 2 images: second one is full-width (skip the grid) */}
      {totalSlots === 2 &&
      <div style={{ padding: "0 clamp(20px, 4vw, 56px)", marginBottom: 24 }}>
        {slot(1, "3 / 2")}
      </div>
      }
      {/* 3+ images: 2-col grid for slots 2 + 3 */}
      {totalSlots >= 3 &&
      <div style={{
        padding: "0 clamp(20px, 4vw, 56px)",
        display: "grid",
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
        gap: "clamp(16px, 2vw, 24px)",
        marginBottom: "clamp(16px, 2vw, 24px)"
      }}>
        {slot(1, "1975 / 1838")}
        {slot(2, "1975 / 1838")}
      </div>
      }
      {totalSlots >= 4 &&
      <div style={{ padding: "0 clamp(20px, 4vw, 56px)", marginBottom: 24 }}>
        {slot(3, "3 / 2")}
      </div>
      }
      {totalSlots >= 5 &&
      <div style={{ padding: "0 clamp(20px, 4vw, 56px)" }}>
        {slot(4, "3 / 2")}
      </div>
      }

      <nav style={{
        marginTop: "clamp(60px, 10vw, 120px)",
        padding: "32px clamp(20px, 4vw, 56px) 0",
        borderTop: "0.5px solid rgba(0,0,0,.1)",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24
      }}>
        <a onClick={() => onOpen(prev.slug)} style={{
          cursor: "pointer", color: "inherit", textDecoration: "none",
          display: "flex", flexDirection: "column", gap: 6
        }}>
          <span style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".15em", textTransform: "uppercase", opacity: .5
          }}>← {c.prev}</span>
          <span style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.4vw, 28px)",
            letterSpacing: "-.01em"
          }}>{prev.titles[lang]}</span>
        </a>
        <a onClick={() => onOpen(next.slug)} style={{
          cursor: "pointer", color: "inherit", textDecoration: "none",
          display: "flex", flexDirection: "column", gap: 6, textAlign: "right",
          alignItems: "flex-end"
        }}>
          <span style={{
            fontFamily: "ui-monospace, monospace", fontSize: 11,
            letterSpacing: ".15em", textTransform: "uppercase", opacity: .5
          }}>{c.next} →</span>
          <span style={{
            fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.4vw, 28px)",
            letterSpacing: "-.01em"
          }}>{next.titles[lang]}</span>
        </a>
      </nav>
    </main>);

}

function SpecRow({ label, value }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "auto 1fr", gap: 16,
      padding: "8px 0", borderBottom: "0.5px solid rgba(0,0,0,.06)"
    }}>
      <span style={{ opacity: .5, textTransform: "uppercase", letterSpacing: ".08em", fontSize: 11 }}>{label}</span>
      <span style={{ textAlign: "right" }}>{value}</span>
    </div>);

}

Object.assign(window, { Home, About, ProjectPage, ContactCell, Slideshow, SlideBtn });