/* janoberg.art — page components. Each is also a fragment-level component
   (no Nav/Footer wrapping) since pages render that themselves. */
/* global React, WORKS, SERIES, Nav, Footer, Paper, PriceLine, CommerceBlock, url, seriesUrl, workUrl */
const { useState: useStateP } = React;

// ───── HOME ─────
function HomePage({ scope = "desktop", base }) {
  const find = (slug) => WORKS.find(w => w.slug === slug);
  const featured = find("evigt");
  const tiles = [
    { series: "norden",     work: find("midnattssol-lulea") },
    { series: "bohuslan",   work: find("fyren") },
    { series: "balett",     work: find("grace") },
    { series: "marin-yta",  work: find("vimlar-av-segel") },
    { series: "marin-djup", work: find("maneter") },
    { series: "mystik",     work: find("ledljus") }
  ];
  if (scope === "mobile") return <HomeMobile featured={featured} tiles={tiles} base={base} />;
  return <HomeDesktop featured={featured} tiles={tiles} base={base} />;
}

function HomeDesktop({ featured, tiles, base }) {
  return (
    <div>
      <Nav active="home" base={base} />
      <div style={{ display: "flex", justifyContent: "space-between", padding: "20px 56px", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)", maxWidth: 1440, margin: "0 auto" }}>
        <span>Dagens verk · Today's work</span>
        <span>Mystik · 2025</span>
      </div>
      <section style={{ padding: "40px 56px 96px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center", maxWidth: 1440, margin: "0 auto" }}>
        <div><Paper src={base + featured.file} ratio={featured.ratio} padding={48} /></div>
        <div style={{ paddingRight: 24 }}>
          <div className="kicker" style={{ marginBottom: 28 }}>Mystik · 2025</div>
          <h1 className="serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 400, marginBottom: 8, letterSpacing: "-0.01em" }}>Evigt</h1>
          <h2 className="serif" style={{ fontSize: 24, lineHeight: 1.1, fontWeight: 300, fontStyle: "italic", color: "var(--ink-soft)", marginBottom: 40 }}>Forever</h2>
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, marginBottom: 12, fontStyle: "italic" }}>"När pigment, vatten och papper möts skapas poesi i färg och form."</p>
          <p style={{ fontSize: 13, color: "var(--ink-soft)", marginBottom: 56, fontStyle: "italic" }}>When pigment, water and paper meet, poetry in colour and form is created.</p>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <a className="btn" href={workUrl(base, featured)}>Se verket · See the work →</a>
            <a className="btn" href={seriesUrl(base, "mystik")}>Mystik-serien</a>
          </div>
          <div style={{ marginTop: 64, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-soft)" }}>
            <span>Akvarell på papper · 76×57 cm</span>
            <span>Signerad Öberg -25</span>
          </div>
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "96px 56px", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>Serierna · The series</div>
            <h2 className="serif" style={{ fontSize: 40, fontWeight: 400 }}>Sju serier, en hand</h2>
            <p className="serif" style={{ fontSize: 18, color: "var(--ink-soft)", fontStyle: "italic", marginTop: 4 }}>Seven series, one hand</p>
          </div>
          <a href={url(base, "verk/")} style={{ fontSize: 13, letterSpacing: "0.04em" }}>Alla verk · All work →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 40, rowGap: 80 }}>
          {tiles.map((t, i) => <SeriesTile key={t.series} tile={t} idx={i} base={base} />)}
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "96px 56px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, maxWidth: 1280, margin: "0 auto", alignItems: "center" }}>
        <div>
          <div className="kicker" style={{ marginBottom: 16 }}>Om · About</div>
          <p className="serif" style={{ fontSize: 28, lineHeight: 1.4 }}>Född 1959 i Luleå, utbildad arkitekt. Arbetar i akvarell från en ateljé i Stenungsund — Norrbotten i ögat, västkustens ljus i fönstret.</p>
          <p style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 20, fontStyle: "italic", lineHeight: 1.6 }}>Born 1959 in Luleå, trained as an architect. Works in watercolour from a studio in Stenungsund — Norrbotten in the eye, the west-coast light in the window.</p>
          <a className="btn" href={url(base, "om.html")} style={{ marginTop: 32 }}>Läs vidare · Read on →</a>
        </div>
        <div style={{ background: "#fff", aspectRatio: "4/5", padding: 32, boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -28px rgba(40,30,20,0.18)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <img src={base + "assets/janoberg.jpg"} alt="Jan Öberg" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
        </div>
      </section>
      <Footer base={base} />
    </div>
  );
}

function SeriesTile({ tile, idx, base }) {
  const w = tile.work;
  const series = SERIES.find(s => s.id === tile.series);
  const layouts = [
    { col: "1 / span 7", offsetTop: 0 }, { col: "9 / span 4", offsetTop: 60 },
    { col: "1 / span 4", offsetTop: 0 }, { col: "6 / span 4", offsetTop: 80 },
    { col: "1 / span 5", offsetTop: 40 }, { col: "8 / span 5", offsetTop: 100 }
  ];
  const L = layouts[idx];
  return (
    <a href={seriesUrl(base, tile.series)} style={{ gridColumn: L.col, marginTop: L.offsetTop, display: "block" }}>
      <Paper src={base + w.file} ratio={w.ratio} padding={28} />
      <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div className="serif" style={{ fontSize: 28 }}>{series.name_se}</div>
          <div style={{ fontSize: 12, color: "var(--ink-soft)", fontStyle: "italic", marginTop: 2 }}>{series.name_en}</div>
        </div>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)" }}>{series.years}</div>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 12, fontStyle: "italic" }}>"{w.title_se}", {w.year}</div>
    </a>
  );
}

function HomeMobile({ featured, tiles, base }) {
  return (
    <div>
      <Nav active="home" scope="mobile" base={base} />
      <section style={{ padding: "20px 20px 40px" }}>
        <Paper src={base + featured.file} ratio={featured.ratio} padding={20} />
        <div className="kicker" style={{ marginTop: 24, fontSize: 10 }}>Mystik · 2025</div>
        <h1 className="serif" style={{ fontSize: 36, lineHeight: 1.05, marginTop: 8 }}>Evigt</h1>
        <h2 className="serif" style={{ fontSize: 17, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 4 }}>Forever</h2>
        <p className="serif" style={{ fontSize: 17, lineHeight: 1.4, marginTop: 24, fontStyle: "italic" }}>"När pigment, vatten och papper möts skapas poesi i färg och form."</p>
        <a className="btn" href={workUrl(base, featured)} style={{ marginTop: 28, width: "100%", padding: "14px 18px", fontSize: 12 }}>Se verket →</a>
      </section>
      <hr className="rule" />
      <section style={{ padding: "40px 20px" }}>
        <div className="kicker" style={{ fontSize: 10, marginBottom: 12 }}>Serierna</div>
        <h2 className="serif" style={{ fontSize: 28, marginBottom: 32 }}>Sju serier, en hand</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 36 }}>
          {tiles.map(t => {
            const s = SERIES.find(x => x.id === t.series);
            return (
              <a key={t.series} href={seriesUrl(base, t.series)} style={{ display: "block" }}>
                <Paper src={base + t.work.file} ratio={t.work.ratio} padding={16} />
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12 }}>
                  <div className="serif" style={{ fontSize: 22 }}>{s.name_se}</div>
                  <div style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--ink-soft)", textTransform: "uppercase", paddingTop: 8 }}>{s.years}</div>
                </div>
                <div style={{ fontSize: 11, color: "var(--ink-soft)", fontStyle: "italic" }}>{s.name_en}</div>
              </a>
            );
          })}
        </div>
      </section>
      <Footer scope="mobile" base={base} />
    </div>
  );
}

// ───── SERIES INDEX ─────
function coverFor(seriesId) {
  const map = { arkiv: "kapellplatsen", norden: "midnattssol-lulea", bohuslan: "fyren", balett: "grace", "marin-yta": "vimlar-av-segel", "marin-djup": "maneter", mystik: "evigt", menagerie: "giraffa" };
  return WORKS.find(w => w.slug === map[seriesId]) || WORKS.find(w => w.series === seriesId);
}

function SeriesIndexPage({ base }) {
  return (
    <div>
      <Nav active="verk" base={base} />
      <section style={{ padding: "80px 56px 48px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="kicker" style={{ marginBottom: 20 }}>Verk · Work</div>
        <h1 className="serif" style={{ fontSize: 56, letterSpacing: "-0.01em", lineHeight: 1.05, maxWidth: "16ch" }}>Sju serier, plus en mindre menageri av djur och resor.</h1>
        <p className="serif" style={{ fontSize: 20, color: "var(--ink-soft)", fontStyle: "italic", marginTop: 12, maxWidth: "60ch" }}>Seven series, plus a smaller menagerie of animal and travel pieces.</p>
      </section>
      <hr className="rule" />
      <section style={{ padding: "64px 56px 96px", maxWidth: 1280, margin: "0 auto" }}>
        {SERIES.map((s, i) => {
          const cover = coverFor(s.id);
          const flip = i % 2 === 1;
          return (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: flip ? "1fr 1.1fr" : "1.1fr 1fr", gap: 80, alignItems: "center", padding: "64px 0", borderBottom: i < SERIES.length - 1 ? "1px solid var(--rule)" : "none" }}>
              <a href={seriesUrl(base, s.id)} style={{ order: flip ? 2 : 1, display: "block" }}>
                <Paper src={base + cover.file} ratio={cover.ratio} padding={32} />
              </a>
              <div style={{ order: flip ? 1 : 2 }}>
                <div className="kicker" style={{ marginBottom: 12 }}>0{i+1} · {s.years}</div>
                <h2 className="serif" style={{ fontSize: 40, lineHeight: 1.1 }}>{s.name_se}</h2>
                <h3 className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 4, marginBottom: 28 }}>{s.name_en}</h3>
                <p style={{ fontSize: 16, lineHeight: 1.65, maxWidth: "52ch", marginBottom: 12 }}>{s.intro_se}</p>
                <p style={{ fontSize: 13, lineHeight: 1.65, color: "var(--ink-soft)", fontStyle: "italic", maxWidth: "60ch", marginBottom: 32 }}>{s.intro_en}</p>
                <a className="btn" href={seriesUrl(base, s.id)}>Se serien · See the series →</a>
                <div style={{ marginTop: 28, fontSize: 12, color: "var(--ink-soft)" }}>
                  Representativt verk: <span className="serif" style={{ fontStyle: "italic", fontSize: 14 }}>{cover.title_se}</span>{cover.title_en ? <span style={{ fontStyle: "italic" }}> · {cover.title_en}</span> : null}, {cover.year}
                </div>
              </div>
            </div>
          );
        })}
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── SINGLE SERIES ─────
function SingleSeriesPage({ seriesId, base }) {
  const series = SERIES.find(s => s.id === seriesId);
  const works = WORKS.filter(w => w.series === seriesId);
  const idx = SERIES.findIndex(s => s.id === seriesId);
  const next = SERIES[(idx + 1) % SERIES.length];
  const tone = `tone-${seriesId}`;
  React.useEffect(() => {
    document.body.classList.add(tone);
    return () => document.body.classList.remove(tone);
  }, [tone]);
  return (
    <div className={tone}>
      <Nav active="verk" base={base} />
      <section style={{ padding: "64px 56px 48px", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ fontSize: 12, color: "var(--ink-soft)", marginBottom: 28 }}>
          <a href={url(base, "verk/")}>Verk</a> <span style={{ opacity: 0.4, padding: "0 8px" }}>›</span> {series.name_se}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "flex-end" }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>{series.years} · {works.length} verk</div>
            <h1 className="serif" style={{ fontSize: 56, letterSpacing: "-0.01em", lineHeight: 1.05 }}>{series.name_se}</h1>
            <h2 className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 4 }}>{series.name_en}</h2>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.65, marginBottom: 12 }}>{series.intro_se}</p>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--ink-soft)", fontStyle: "italic" }}>{series.intro_en}</p>
          </div>
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "80px 56px", maxWidth: 1280, margin: "0 auto" }}>
        {works.map((w, i) => (
          i === 0 || i % 3 === 0
            ? <Row1 key={w.slug} work={w} base={base} />
            : (i % 3 === 1 && works[i+1])
              ? <Row2 key={w.slug} a={w} b={works[i+1]} base={base} />
              : (i % 3 === 1 && !works[i+1])
                ? <Row1 key={w.slug} work={w} base={base} />
                : null
        ))}
      </section>
      <hr className="rule" />
      <section style={{ padding: "64px 56px", maxWidth: 1280, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div className="kicker" style={{ marginBottom: 8 }}>Nästa serie · Next</div>
          <div className="serif" style={{ fontSize: 28 }}>{next.name_se}</div>
        </div>
        <a className="btn" href={seriesUrl(base, next.id)}>Vidare → · Continue →</a>
      </section>
      <Footer base={base} />
    </div>
  );
}

function Row1({ work, base }) {
  const dimmed = work.status === "sold" || work.status === "private";
  return (
    <div style={{ marginBottom: 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: work.ratio > 1.1 ? "1fr" : "1fr 1fr", gap: 60, alignItems: "center" }}>
        <a href={workUrl(base, work)} style={{ opacity: dimmed ? 0.55 : 1, transition: "opacity .3s", display: "block" }}>
          <Paper src={base + work.file} ratio={work.ratio} padding={36} />
        </a>
        <div>
          <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
            {work.status === "sold" && <span className="tag sold">SÅLD · SOLD</span>}
            {work.status === "private" && <span className="tag">PRIVAT SAMLING</span>}
            <span className="kicker">{work.year}{work.dim ? ` · ${work.dim}` : ""}</span>
          </div>
          <h3 className="serif" style={{ fontSize: 32 }}><a href={workUrl(base, work)}>{work.title_se}</a></h3>
          {work.title_en && <h4 className="serif" style={{ fontSize: 16, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 4 }}>{work.title_en}</h4>}
          <p style={{ fontSize: 14, lineHeight: 1.65, marginTop: 20, maxWidth: "44ch" }}>{work.note_se}</p>
          <a href={workUrl(base, work)} style={{ display: "inline-block", marginTop: 24, fontSize: 13, borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>Se verket →</a>
        </div>
      </div>
    </div>
  );
}

function Row2({ a, b, base }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 80, alignItems: "flex-start" }}>
      {[a, b].map((w, i) => (
        <div key={w.slug} style={{ marginTop: i === 0 ? 60 : 0, opacity: (w.status === "sold" || w.status === "private") ? 0.55 : 1 }}>
          <a href={workUrl(base, w)} style={{ display: "block" }}>
            <Paper src={base + w.file} ratio={w.ratio} padding={28} />
          </a>
          <WorkCaption work={w} base={base} />
        </div>
      ))}
    </div>
  );
}

function WorkCaption({ work, base }) {
  return (
    <div style={{ marginTop: 18 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 6 }}>
        {work.status === "sold" && <span className="tag sold">SÅLD</span>}
        {work.status === "private" && <span className="tag">PRIVAT</span>}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <a href={workUrl(base, work)} className="serif" style={{ fontSize: 20, fontStyle: "italic" }}>{work.title_se}</a>
          {work.title_en && <span className="serif" style={{ fontSize: 13, color: "var(--ink-soft)", fontStyle: "italic" }}> · {work.title_en}</span>}
        </div>
        <span style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-soft)" }}>{work.year}</span>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 4 }}>{work.dim || "—"}</div>
    </div>
  );
}

// ───── SINGLE ARTWORK ─────
function SingleArtworkPage({ slug, base }) {
  const work = WORKS.find(w => w.slug === slug);
  const series = SERIES.find(s => s.id === work.series);
  const related = WORKS.filter(w => w.series === work.series && w.slug !== work.slug).slice(0, 3);
  return (
    <div>
      <Nav active="verk" base={base} />
      <section style={{ padding: "32px 56px 0", maxWidth: 1440, margin: "0 auto", fontSize: 12, color: "var(--ink-soft)" }}>
        <a href={url(base, "verk/")}>Verk</a> <span style={{ opacity: 0.4, padding: "0 8px" }}>›</span>
        <a href={seriesUrl(base, series.id)}>{series.name_se}</a> <span style={{ opacity: 0.4, padding: "0 8px" }}>›</span>
        {work.title_se}
      </section>
      <section style={{ padding: "48px 56px 96px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, maxWidth: 1440, margin: "0 auto", alignItems: "flex-start" }}>
        <div>
          <Paper src={base + work.file} ratio={work.ratio} padding={56} />
          <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            <span>Visad i sin pappersmarginal · Shown in its paper margin</span>
            <span>Signerad nedre höger · Öberg -{String(work.year).slice(2)}</span>
          </div>
        </div>
        <div style={{ position: "sticky", top: 32 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>{series.name_se} · {work.year}</div>
          <h1 className="serif" style={{ fontSize: 48, lineHeight: 1.05 }}>{work.title_se}</h1>
          {work.title_en
            ? <h2 className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 6, marginBottom: 32 }}>{work.title_en}</h2>
            : <div style={{ height: 32 }} />}
          <dl style={{ fontSize: 13, lineHeight: 1.8, color: "var(--ink-soft)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 24px", marginBottom: 28 }}>
            <dt>Medium</dt><dd style={{ color: "var(--ink)" }}>{work.medium_se}<span style={{ color: "var(--ink-soft)", fontStyle: "italic" }}> · {work.medium_en}</span></dd>
            <dt>Mått</dt><dd style={{ color: "var(--ink)" }}>{work.dim || "—"}</dd>
            <dt>År</dt><dd style={{ color: "var(--ink)" }}>{work.year}</dd>
            <dt>Signatur</dt><dd style={{ color: "var(--ink)" }}>Öberg -{String(work.year).slice(2)}, nedre höger</dd>
          </dl>
          <CommerceBlock work={work} base={base} />
          <div style={{ marginTop: 32 }}>
            <div className="kicker" style={{ marginBottom: 12 }}>Om verket · About the work</div>
            <p style={{ fontSize: 14, lineHeight: 1.65, marginBottom: 10 }}>{work.note_se}</p>
            <p style={{ fontSize: 12, lineHeight: 1.6, color: "var(--ink-soft)", fontStyle: "italic" }}>{work.note_en}</p>
          </div>
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "80px 56px", maxWidth: 1440, margin: "0 auto" }}>
        <div className="kicker" style={{ marginBottom: 24 }}>Andra verk i serien · Other works in the series</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          {related.map(w => (
            <a key={w.slug} href={workUrl(base, w)} style={{ opacity: (w.status === "sold" || w.status === "private") ? 0.55 : 1, display: "block" }}>
              <Paper src={base + w.file} ratio={w.ratio} padding={20} />
              <div style={{ marginTop: 14 }}>
                <div className="serif" style={{ fontSize: 18, fontStyle: "italic" }}>{w.title_se}</div>
                {w.title_en && <div style={{ fontSize: 12, fontStyle: "italic", color: "var(--ink-soft)" }}>{w.title_en}</div>}
                <div style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 4 }}>{w.year}{w.dim ? ` · ${w.dim}` : ""}</div>
              </div>
            </a>
          ))}
        </div>
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── ABOUT ─────
function AboutPage({ base }) {
  return (
    <div>
      <Nav active="om" base={base} />
      <section style={{ padding: "80px 56px 64px", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "flex-end" }}>
        <div>
          <div className="kicker" style={{ marginBottom: 20 }}>Om · About</div>
          <h1 className="serif" style={{ fontSize: 56, letterSpacing: "-0.01em", lineHeight: 1.05 }}>Norrbotten i ögat,<br/>västkustens ljus i fönstret.</h1>
          <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 16 }}>Norrbotten in the eye, the west-coast light in the window.</p>
        </div>
        <div style={{ background: "#fff", aspectRatio: "4/5", padding: 32, boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -28px rgba(40,30,20,0.18)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <img src={base + "assets/janoberg.jpg"} alt="Jan Öberg" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "80px 56px", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <p style={{ fontSize: 18, lineHeight: 1.7, marginBottom: 20 }}>Jan Öberg är född i Luleå, med rötterna i Norrbottens natur. Utbildad arkitekt — under 1980-talets studier i Göteborg gick han allt mer över från olja till akvarell. Livet kom emellan. 2022 återvände han till måleriet på allvar. Sedan dess har han deltagit i samlingsutställningar och egna separatutställningar — senast på Tofta Konstgalleri i Varberg, våren 2024. Han bor i Stenungsund, 5 mil norr om Göteborg, där han har sin ateljé i bostaden.</p>
          <p style={{ fontSize: 18, lineHeight: 1.7, marginBottom: 20 }}>Med en inre glädje skapar han konst i ett brett spektrum av motiv: djur, knotiga träd, mjuk mossa och havslevande graciösa varelser. Arbetet rör sig mellan sju serier: tidiga arkivblad, det norrbottniska landskapet, västkustens skärgård, balettens enstaka figurer, det marina i två register — yta och djup — och en pågående mystik där figur och hav möts.</p>
          <p style={{ fontSize: 18, lineHeight: 1.7 }}>Medlem i Svenska Konstnärsförbundet. Självpublicerad monografi, <em>KONST ART</em> (2024), 76 sidor, sätts ut via Amazon US/UK/AU.</p>
        </div>
        <div>
          <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink-soft)", fontStyle: "italic", marginBottom: 16 }}>Jan Öberg was born in Luleå, with roots in Norrbotten's nature. Trained as an architect in Gothenburg in the 1980s, he switched from oil painting to watercolour during that period. Life intervened. In 2022 he returned to painting seriously — participating in group exhibitions and separate shows since then, most recently at Tofta Konstgalleri in Varberg, spring 2024. He lives in Stenungsund, 50 km north of Gothenburg, where his studio is at home.</p>
          <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink-soft)", fontStyle: "italic", marginBottom: 16 }}>With an inner joy he creates art across a wide range of motifs: animals, gnarled trees, soft moss and sea-dwelling graceful creatures. The work moves across seven series: early archive sheets, the Norrbotten landscape, the west-coast archipelago, single ballet figures, the marine in two registers — surface and below — and an ongoing mystik in which figure and sea meet.</p>
          <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink-soft)", fontStyle: "italic" }}>Member, Svenska Konstnärsförbundet. Self-published monograph <em>KONST ART</em> (2024), 76 pages, available via Amazon US/UK/AU.</p>
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "96px 56px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="kicker" style={{ marginBottom: 32 }}>Boken · The Book</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
          <div style={{ padding: 16, background: "#fff", boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 36px 70px -30px rgba(40,30,20,0.35)" }}>
            <img src={base + "assets/konstart-front.jpg"} alt="KONST ART — Jan Öberg" style={{ width: "100%", display: "block" }} />
          </div>
          <div>
            <h2 className="serif" style={{ fontSize: 40 }}>KONST <span style={{ fontStyle: "italic" }}>ART</span></h2>
            <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 6 }}>76 sidor · ObergCapital Publications · 2024</div>
            <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 24, marginBottom: 12 }}>En självpublicerad monografi som samlar arbetet från återvändandet till måleriet. Texten är bilingval; bildmaterialet utgör ett tvärsnitt av Norden, Bohuslän och de tidigaste Mystik-bladen.</p>
            <p style={{ fontSize: 13, lineHeight: 1.65, color: "var(--ink-soft)", fontStyle: "italic", marginBottom: 32 }}>A self-published monograph collecting the return to painting. Bilingual text; the plates form a cross-section across Norden, Bohuslän, and the earliest Mystik sheets.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
              {[["Amazon SE","https://www.amazon.se/dp/9153109759"],["Amazon US","https://www.amazon.com/dp/B0D6C2ZJ7X"],["Amazon UK","https://www.amazon.co.uk/dp/9153109759"],["Amazon AU","https://www.amazon.com.au/dp/9153109759"]].map(([s,h]) => (
                <a key={s} className="btn" href={h} target="_blank" rel="noopener" style={{ padding: "12px 8px", fontSize: 11 }}>{s} →</a>
              ))}
            </div>
          </div>
        </div>
      </section>
      <hr className="rule" />
      <section style={{ padding: "64px 56px", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 60 }}>
        <div><h5 style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 14 }}>Medlemskap</h5><p style={{ fontSize: 15, lineHeight: 1.6 }}>Svenska Konstnärsförbundet</p><p style={{ fontSize: 12, color: "var(--ink-soft)", fontStyle: "italic", marginTop: 4 }}>Member, Swedish Artists' Association</p></div>
        <div><h5 style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 14 }}>Ateljé</h5><p style={{ fontSize: 15, lineHeight: 1.6 }}>Stenungsund<br/>5 mil norr om Göteborg</p></div>
        <div><h5 style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 14 }}>Kontakt</h5><p style={{ fontSize: 15, lineHeight: 1.6 }}><a href="mailto:jan@janoberg.art">jan@janoberg.art</a></p><p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 4 }}><a href="https://instagram.com/janoberg1" target="_blank" rel="noopener">Instagram · @janoberg1</a></p></div>
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── BOOK (own page) ─────
function BookPage({ base }) {
  return (
    <div>
      <Nav active="boken" base={base} />
      <section style={{ padding: "80px 56px 64px", maxWidth: 1080, margin: "0 auto" }}>
        <div className="kicker" style={{ marginBottom: 20 }}>Boken · The Book</div>
        <h1 className="serif" style={{ fontSize: 64, letterSpacing: "-0.01em", lineHeight: 1.05 }}>KONST <span style={{ fontStyle: "italic" }}>ART</span></h1>
        <p className="serif" style={{ fontSize: 20, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 12 }}>En monografi · A monograph · 2024</p>
      </section>
      <section style={{ padding: "0 56px 96px", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div style={{ padding: 20, background: "#fff", boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 36px 80px -30px rgba(40,30,20,0.45)" }}>
          <img src={base + "assets/konstart-front.jpg"} alt="KONST ART" style={{ width: "100%", display: "block" }} />
        </div>
        <div>
          <p style={{ fontSize: 18, lineHeight: 1.7, marginBottom: 16 }}>76 sidor. Bilingval text på svenska och engelska. Tvärsnitt av Norden-, Bohuslän- och de tidiga Mystik-arbetena. Tryckt och distribuerad via Amazons print-on-demand-tjänst.</p>
          <p style={{ fontSize: 14, lineHeight: 1.65, color: "var(--ink-soft)", fontStyle: "italic", marginBottom: 32 }}>76 pages. Bilingual Swedish/English. A cross-section of Norden, Bohuslän, and the early Mystik works. Printed and distributed through Amazon's print-on-demand service.</p>
          <dl style={{ fontSize: 13, lineHeight: 1.9, color: "var(--ink-soft)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "0 24px", marginBottom: 32 }}>
            <dt>Förläggare</dt><dd style={{ color: "var(--ink)" }}>ObergCapital Publications</dd>
            <dt>Format</dt><dd style={{ color: "var(--ink)" }}>21,6 × 28 cm · paperback</dd>
            <dt>Sidor</dt><dd style={{ color: "var(--ink)" }}>76</dd>
            <dt>Språk</dt><dd style={{ color: "var(--ink)" }}>Svenska / English</dd>
            <dt>År</dt><dd style={{ color: "var(--ink)" }}>2024</dd>
          </dl>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
            {[["Amazon SE","https://www.amazon.se/dp/9153109759"],["Amazon US","https://www.amazon.com/dp/B0D6C2ZJ7X"],["Amazon UK","https://www.amazon.co.uk/dp/9153109759"],["Amazon AU","https://www.amazon.com.au/dp/9153109759"]].map(([s,h]) => (
              <a key={s} className="btn primary" href={h} target="_blank" rel="noopener" style={{ padding: "14px 12px", fontSize: 12 }}>{s} →</a>
            ))}
          </div>
        </div>
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── KÖP / SHOP (lists prints) ─────
function ShopPage({ base }) {
  const available = WORKS.filter(w => w.status === "available");
  return (
    <div>
      <Nav active="kop" base={base} />
      <section style={{ padding: "80px 56px 48px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="kicker" style={{ marginBottom: 20 }}>Köp · Shop</div>
        <h1 className="serif" style={{ fontSize: 56, letterSpacing: "-0.01em", lineHeight: 1.05, maxWidth: "20ch" }}>Tillgängliga original och signerade tryck.</h1>
        <p className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 12, maxWidth: "60ch" }}>Available originals and signed prints.</p>
        <p style={{ fontSize: 14, lineHeight: 1.7, marginTop: 24, maxWidth: "62ch", color: "var(--ink-soft)" }}>Originalverk är unika. Tryck framställs i signerad upplaga om 50, på Hahnemühle bomullsark, 308 g/m². Alla priser i SEK; EUR och USD på begäran.</p>
      </section>
      <hr className="rule" />
      <section style={{ padding: "64px 56px 96px", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 56, rowGap: 80 }}>
          {available.map(w => {
            const series = SERIES.find(s => s.id === w.series);
            return (
              <a key={w.slug} href={workUrl(base, w)} style={{ display: "block" }}>
                <Paper src={base + w.file} ratio={w.ratio} padding={22} />
                <div style={{ marginTop: 18 }}>
                  <div className="kicker" style={{ fontSize: 10, marginBottom: 6 }}>{series.name_se} · {w.year}</div>
                  <div className="serif" style={{ fontSize: 22 }}>{w.title_se}</div>
                  {w.title_en && <div className="serif" style={{ fontSize: 13, color: "var(--ink-soft)", fontStyle: "italic" }}>{w.title_en}</div>}
                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, fontSize: 12, color: "var(--ink-soft)" }}>
                    <span>{w.dim}</span>
                    <span className="serif" style={{ fontSize: 16, color: "var(--ink)" }}>{w.price_sek?.toLocaleString("sv-SE")} <span style={{ fontSize: 10, fontFamily: "var(--sans)", letterSpacing: "0.12em" }}>SEK</span></span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── KONTAKT ─────
function ContactPage({ base }) {
  const [sent, setSent] = useStateP(false);
  return (
    <div>
      <Nav active="kontakt" base={base} />
      <section style={{ padding: "80px 56px", maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <div className="kicker" style={{ marginBottom: 20 }}>Kontakt · Contact</div>
          <h1 className="serif" style={{ fontSize: 48, letterSpacing: "-0.01em", lineHeight: 1.05 }}>Skriv till ateljén.</h1>
          <p className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 12 }}>Write to the studio.</p>
          <dl style={{ fontSize: 14, lineHeight: 1.9, color: "var(--ink-soft)", marginTop: 40, display: "grid", gridTemplateColumns: "auto 1fr", gap: "0 24px" }}>
            <dt>E-post</dt><dd style={{ color: "var(--ink)" }}><a href="mailto:jan@janoberg.art">jan@janoberg.art</a></dd>
            <dt>Ateljé</dt><dd style={{ color: "var(--ink)" }}>Stenungsund</dd>
            <dt>Instagram</dt><dd style={{ color: "var(--ink)" }}><a href="https://instagram.com/janoberg1" target="_blank" rel="noopener">@janoberg1</a></dd>
            <dt>Förbund</dt><dd style={{ color: "var(--ink)" }}>Svenska Konstnärsförbundet</dd>
          </dl>
          <p style={{ fontSize: 13, lineHeight: 1.7, marginTop: 40, color: "var(--ink-soft)" }}>Frågor om beställningar, internationell frakt, inramning, utställningsmöjligheter eller tryck — skriv direkt eller använd formuläret. Svar inom två arbetsdagar.</p>
        </div>
        <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ background: "#fff", padding: 40, boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -28px rgba(40,30,20,0.18)" }}>
          {sent ? (
            <div>
              <div className="serif" style={{ fontSize: 28, marginBottom: 12 }}>Tack.</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)" }}>Ditt meddelande är skickat till ateljén. Du får svar inom två arbetsdagar.</p>
              <p style={{ fontSize: 12, lineHeight: 1.6, color: "var(--ink-soft)", fontStyle: "italic", marginTop: 8 }}>Your message has been sent. You'll receive a reply within two working days.</p>
            </div>
          ) : (
            <>
              <Field label="Namn · Name" name="name" required />
              <Field label="E-post · Email" name="email" type="email" required />
              <Field label="Ärende · Subject" name="subject" />
              <Field label="Meddelande · Message" name="message" textarea required />
              <button className="btn primary" type="submit" style={{ width: "100%", padding: "16px 24px", marginTop: 12 }}>Skicka · Send <span className="arrow">→</span></button>
            </>
          )}
        </form>
      </section>
      <Footer base={base} />
    </div>
  );
}
function Field({ label, name, type = "text", textarea, required }) {
  return (
    <label style={{ display: "block", marginBottom: 24, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
      {label}{required && <span style={{ color: "var(--accent)" }}> *</span>}
      {textarea
        ? <textarea name={name} required={required} rows={5} style={{ display: "block", width: "100%", marginTop: 8, padding: "10px 0", border: "none", borderBottom: "1px solid var(--ink)", background: "transparent", font: "inherit", fontSize: 14, color: "var(--ink)", textTransform: "none", letterSpacing: "normal", outline: "none", resize: "vertical" }} />
        : <input type={type} name={name} required={required} style={{ display: "block", width: "100%", marginTop: 8, padding: "10px 0", border: "none", borderBottom: "1px solid var(--ink)", background: "transparent", font: "inherit", fontSize: 14, color: "var(--ink)", textTransform: "none", letterSpacing: "normal", outline: "none" }} />}
    </label>
  );
}

// ───── 404 ─────
function NotFoundPage({ base }) {
  return (
    <div>
      <Nav base={base} />
      <section style={{ padding: "120px 56px", maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <div className="kicker" style={{ marginBottom: 16 }}>404</div>
        <h1 className="serif" style={{ fontSize: 48 }}>Sidan finns inte.</h1>
        <p className="serif" style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink-soft)", marginTop: 8 }}>The page does not exist.</p>
        <a className="btn" href={url(base, "")} style={{ marginTop: 32 }}>Tillbaka · Back home →</a>
      </section>
      <Footer base={base} />
    </div>
  );
}

// ───── mountPage entry ─────
function ResponsiveRoot({ name, opts }) {
  const base = opts.base || "./";
  const [scope, setScope] = React.useState(() => window.matchMedia && window.matchMedia("(max-width: 880px)").matches ? "mobile" : "desktop");
  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 880px)");
    const h = () => setScope(mq.matches ? "mobile" : "desktop");
    mq.addEventListener ? mq.addEventListener("change", h) : mq.addListener(h);
    return () => mq.removeEventListener ? mq.removeEventListener("change", h) : mq.removeListener(h);
  }, []);
  const Map = {
    home: <HomePage scope={scope} base={base} />,
    "series-index": <SeriesIndexPage base={base} scope={scope} />,
    "single-series": <SingleSeriesPage seriesId={opts.seriesId} base={base} scope={scope} />,
    artwork: <SingleArtworkPage slug={opts.slug} base={base} scope={scope} />,
    about: <AboutPage base={base} scope={scope} />,
    book: <BookPage base={base} scope={scope} />,
    shop: <ShopPage base={base} scope={scope} />,
    contact: <ContactPage base={base} scope={scope} />,
    "404": <NotFoundPage base={base} scope={scope} />
  };
  return Map[name] || Map["404"];
}

function mountPage(name, opts = {}) {
  const root = document.getElementById("root");
  ReactDOM.createRoot(root).render(<ResponsiveRoot name={name} opts={opts} />);
}

window.mountPage = mountPage;