// ============================================================
// pages.jsx — page components for all 7 sections
// ============================================================

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

// ------------------ shared bits ------------------

const PhSlot = ({ id, label, style }) => (
  <image-slot
    id={id}
    placeholder={label}
    shape="rounded"
    radius="10"
    style={style}
  ></image-slot>
);

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

// ------------------ cabin meta sidecar ------------------
// Persists byggeår and notes to .cabin-meta.state.json via the same
// omelette pattern as image-slot.js. Falls back gracefully if omelette
// is not available (view-only or deployed site).

const CABIN_META_FILE = '.cabin-meta.state.json';
let _cabinMeta = null;
let _cabinMetaP = null;

function loadCabinMeta() {
  if (_cabinMetaP) return _cabinMetaP;
  _cabinMetaP = fetch(CABIN_META_FILE)
    .then((r) => (r.ok ? r.json() : {}))
    .catch(() => ({}))
    .then((j) => { _cabinMeta = (j && typeof j === 'object') ? j : {}; });
  return _cabinMetaP;
}

function saveCabinMeta() {
  if (!window.omelette?.writeFile) return;
  window.omelette.writeFile(CABIN_META_FILE, JSON.stringify(_cabinMeta, null, 2));
}

function getCabinMeta(id) {
  return _cabinMeta?.[id] || { builtYear: '', notes: '' };
}

function setCabinMeta(id, data) {
  if (!_cabinMeta) _cabinMeta = {};
  _cabinMeta[id] = data;
  saveCabinMeta();
}

// ------------------ EVENT LIST (expandable) ------------------

function EventList({ events }) {
  const [open, setOpen] = useState(null);
  return (
    <div className="events">
      {events.map((e, i) => (
        <div className="event-row" key={i} style={{flexWrap:"wrap"}}>
          <div className="event-date">
            <span className="day">{e.day}</span>
            <span className="mon">{e.mon} {e.year}</span>
          </div>
          <div className="event-body">
            <h4>{e.title}</h4>
            <div className="meta">{e.meta}</div>
            {open === i && e.detail && (
              <p style={{marginTop: 12, color:"var(--ink-soft)", fontSize:16, maxWidth:580, lineHeight:1.6}}>
                {e.detail}
              </p>
            )}
          </div>
          {e.detail && (
            <div className="event-action">
              <a className="btn-quiet" style={{cursor:"pointer"}} onClick={() => setOpen(open === i ? null : i)}>
                {open === i ? "Skjul ↑" : "Les mer →"}
              </a>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ------------------ HOME ------------------

function HomePage({ go }) {
  const D = window.SITE_DATA;
  return (
    <main>
      {/* HERO */}
      <section className="hero" data-screen-label="01 Hjem · Hero">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot"></span>
              Stiftet 1935 · Drammensmarka
            </div>
            <h1>
              Hytteliv i Drammensmarka med folk du kjenner.
            </h1>
            <p className="hero-lede">
              Drammensmarka Hytteeierforening samler 175 hytteeiere i Drammensmarka.
            </p>
            <div className="hero-actions">
              <a className="btn btn-primary" onClick={() => go("kart")}>Se hyttekartet</a>
              <a className="btn btn-ghost" onClick={() => go("historie")}>Vår historie</a>
            </div>
            <div className="hero-stats">
              <div>
                <div className="stat-num">175</div>
                <div className="stat-label">Medlemmer</div>
              </div>
              <div>
                <div className="stat-num">164</div>
                <div className="stat-label">Hytter registrert</div>
              </div>
              <div>
                <div className="stat-num">91</div>
                <div className="stat-label">År i marka</div>
              </div>
              <div>
                <div className="stat-num">2×</div>
                <div className="stat-label">Hyttenytt i året</div>
              </div>
            </div>
          </div>
          <div className="hero-image">
            <PhSlot id="hero" label="Hovedbilde · skog & hytte ved Landfalltjern" style={{width:"100%", height:"100%"}} />
          </div>
        </div>
      </section>

      {/* WELCOME */}
      <section className="section bg-cream-2" data-screen-label="01 Hjem · Velkommen">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Velkommen</Eyebrow>
              <h2>En forening for dem som er glade i marka.</h2>
            </div>
            <div className="read">
              <p style={{fontSize: 21, lineHeight: 1.55, color: "var(--ink-soft)"}}>Drammensmarka Hytteeierforening ble stiftet en novemberkveld i 1935 av en gruppe hytteeiere som ville sikre felles vei og godt naboskap. I dag er vi 175 hytter rundt Landfalltjern og Furumotomta.</p>
              <p>Vi holder årsmøte hver vår, gir ut medlemsbladet <em>Hyttenytt</em> to ganger i året, og samles på arrangement og høstsamling.</p>
              <p style={{marginTop: 28}}>
                <a className="btn-quiet" onClick={() => go("historie")}>Les om foreningens historie →</a>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* HVA VI GJØR */}
      <section className="section" data-screen-label="01 Hjem · Hva vi gjør">
        <div className="container">
          <div className="section-head">
            <div><Eyebrow>Hva vi gjør</Eyebrow><h2>Fire kjerneoppgaver</h2></div>
          </div>
          <div className="hviggjor-grid">
            {D.hvaViGjor.map((k, i) => (
              <div className="hviggjor-card" key={i}>
                <h4>{k.title}</h4>
                <p>{k.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EVENTS */}
      <section className="section bg-paper" data-screen-label="01 Hjem · Arrangementer">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>Hva skjer</Eyebrow>
              <h2>Arrangementer i 2026</h2>
            </div>
            <div className="right">Møter og turer er åpne for alle medlemmer.</div>
          </div>
          <EventList events={D.events} />
        </div>
      </section>

      {/* NEWS */}
      <section className="section bg-paper" data-screen-label="01 Hjem · Nyheter">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>Hyttenytt og kunngjøringer</Eyebrow>
              <h2>Siste nytt fra foreningen</h2>
            </div>
            <div className="right"><a className="btn-quiet" onClick={() => go("hyttenytt")}>Alle nyheter →</a></div>
          </div>
          <div className="news-grid">
            {D.news.map((n, i) => (
              <a className="news-card" key={i}>
                <div className="ph">
                  <PhSlot id={n.slot} label={`Bilde · ${n.tag}`} style={{width:"100%", height:"100%"}} />
                </div>
                <div className="meta">{n.tag} · {n.date}</div>
                <h4>{n.title}</h4>
                <p>{n.teaser}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="section" data-screen-label="01 Hjem · Galleri">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>Bilder fra marka</Eyebrow>
              <h2>Året rundt i Drammensmarka</h2>
            </div>
            <div className="right">Fra medlemmenes egne kameraer.</div>
          </div>
          <div className="gallery">
            <div className="g1"><PhSlot id="gal-1" label="Vinter ved Landfalltjern" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-2" label="Hytte i sne" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-3" label="Sommer" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-4" label="Bål og kaffe" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-5" label="Sti gjennom skogen" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-6" label="Høstløv" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-7" label="Skiløype" style={{width:"100%", height:"100%"}} /></div>
            <div className="g2"><PhSlot id="gal-8" label="Dugnad ved hytta" style={{width:"100%", height:"100%"}} /></div>
          </div>
        </div>
      </section>

      {/* QUICK LINKS */}
      <section className="section bg-cream-2" data-screen-label="01 Hjem · Snarveier">
        <div className="container">
          <Eyebrow>Snarveier</Eyebrow>
          <h2 style={{marginBottom: 32}}>Finn fram raskt</h2>
          <div className="qlinks">
            <a className="qlink" onClick={() => go("arsmoter")}>
              <span className="num">01</span>
              <span className="label">Årsmøter</span>
              <span className="desc">Referater og protokoller fra alle møter siden 2020.</span>
            </a>
            <a className="qlink" onClick={() => go("okonomi")}>
              <span className="num">02</span>
              <span className="label">Økonomi</span>
              <span className="desc">Regnskap, budsjett og medlemskontingent.</span>
            </a>
            <a className="qlink" onClick={() => go("vedtekter")}>
              <span className="num">03</span>
              <span className="label">Vedtekter</span>
              <span className="desc">Foreningens vedtekter.</span>
            </a>
            <a className="qlink" onClick={() => go("kart")}>
              <span className="num">04</span>
              <span className="label">Hyttekart</span>
              <span className="desc">Kart over hytteområdet.</span>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ------------------ HISTORIE ------------------

function HistoriePage() {
  const D = window.SITE_DATA;
  return (
    <main data-screen-label="02 Historie">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Historie</span></div>
          <h1>Ni tiår i marka.</h1>
          <p className="lede">
            Fra tolv hytteeiere rundt et bord i 1935 til 175 medlemshytter i dag —
            her er noen merkesteiner i Drammensmarka Hytteeierforenings historie.
          </p>
        </div>
      </header>
      <section className="section">
        <div className="container">
          <blockquote className="lead-quote" style={{marginBottom: 64}}>
            «Formålet er å ivareta hytteeiernes felles interesser i Drammensmarka, fremme interessen for skog, hytteliv og naturvern, og holde foreningens ambulansehytte ved Landfalltjern i orden.»
            <cite>— Vedtektene, Drammensmarka Hytteeierforening 1935</cite>
          </blockquote>

          <div className="timeline">
            {D.history.map((h, i) => (
              <div className="tl-row" key={i}>
                <div className="tl-year">{h.year}</div>
                <div className="tl-body">
                  <h3>{h.title}</h3>
                  <p>{h.body}</p>
                  {h.slot && (
                    <div className="ph">
                      <PhSlot id={h.slot} label={`Bilde fra ${h.year}`} style={{width:"100%", height:"100%"}} />
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>

          <div className="callout" style={{marginTop: 72}}>
            <h3 style={{marginBottom: 12}}>Har du gamle bilder eller historier?</h3>
            <p style={{margin:0, color:"var(--ink-soft)"}}>
              Vi samler stadig på materiale fra foreningens historie. Send bilder,
              brev eller fortellinger til <a href="mailto:post@dmhf.no">post@dmhf.no</a>.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

// ------------------ ÅRSMØTER ------------------

function ArsmoterPage() {
  const D = window.SITE_DATA;
  const [open, setOpen] = useState(0);
  const latest = D.meetings[0];
  return (
    <main data-screen-label="03 Årsmøter">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Årsmøter</span></div>
          <h1>Årsmøter og protokoller.</h1>
          <p className="lede">
            Foreningen avholder ordinært årsmøte hver vår på Landfallhytta. Her finner
            du referater, regnskap og innkallinger fra de siste årene.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Siste årsmøte</Eyebrow>
              <h2 style={{marginBottom: 18}}>{latest.title}</h2>
              <p style={{color:"var(--ink-muted)", marginBottom: 24}}>{latest.when}</p>
            </div>
            <div className="card">
              <h4 style={{fontFamily:"var(--serif)", fontSize: 22, marginBottom: 14}}>Sammendrag</h4>
              <p style={{color:"var(--ink-soft)"}}>{latest.summary}</p>
              <hr className="rule" style={{margin:"22px 0"}} />
              <dl style={{margin:0, display:"grid", gridTemplateColumns:"160px 1fr", gap:"10px 16px", fontSize:16}}>
                <dt style={{color:"var(--ink-muted)"}}>Møtested</dt><dd>Landfallhytta</dd>
                <dt style={{color:"var(--ink-muted)"}}>Neste årsmøte</dt><dd>23. mai 2026</dd>
              </dl>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-cream-2">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>Arkiv</Eyebrow>
              <h2>Tidligere årsmøter</h2>
            </div>
            <div className="right">Klikk en rad for å se sammendrag</div>
          </div>

          <div className="amlist">
            {D.meetings.map((m, i) => (
              <div className={"am-row " + (open === i ? "open" : "")} key={i}>
                <div className="am-summary" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="y">{m.year}</span>
                  <h4>{m.title}</h4>
                  <span className="when">{m.when}</span>
                  <span className="chev">{open === i ? "−" : "+"}</span>
                </div>
                <div className="am-detail">
                  <p>{m.summary}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ------------------ CHART HELPERS ------------------

function GrasrotChart({ data }) {
  const W = 640, H = 200;
  const padL = 50, padR = 12, padT = 28, padB = 48;
  const cW = W - padL - padR, cH = H - padT - padB;
  const max = Math.max(...data.map(d => d.belop));
  const n = data.length;
  const slotW = cW / n;
  const barW = Math.max(18, slotW - 8);
  const fmtK = v => v >= 1000 ? Math.round(v / 1000) + 'k' : String(v);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%',overflow:'visible',fontFamily:'var(--sans)',fontSize:11}}>
      {data.map((d, i) => {
        const bH = Math.max(2, Math.round((d.belop / max) * cH));
        const cx = padL + (i + 0.5) * slotW;
        const x = cx - barW / 2;
        const y = padT + cH - bH;
        return (
          <g key={i}>
            <rect x={x} y={y} width={barW} height={bH} fill="var(--forest)" rx={2} opacity={0.8} />
            <text x={cx} y={y - 5} textAnchor="middle" fill="var(--ink-soft)" fontSize={9}>{fmtK(d.belop)}</text>
            <text x={cx} y={H - 6} textAnchor="end" fill="var(--ink-muted)" fontSize={9}
              transform={`rotate(-45 ${cx} ${H - 6})`}>{d.ar}</text>
          </g>
        );
      })}
      <line x1={padL} y1={padT} x2={padL} y2={padT + cH} stroke="var(--rule)" strokeWidth={1} />
      <line x1={padL} y1={padT + cH} x2={W - padR} y2={padT + cH} stroke="var(--rule)" strokeWidth={1} />
      <text x={padL - 4} y={padT + cH + 4} textAnchor="end" fill="var(--ink-muted)" fontSize={9}>0</text>
      <text x={padL - 4} y={padT + 4} textAnchor="end" fill="var(--ink-muted)" fontSize={9}>{fmtK(max)}</text>
    </svg>
  );
}

function BankChart({ termin, kalender }) {
  const W = 640, H = 210;
  const padL = 58, padR = 12, padT = 36, padB = 44;
  const cW = W - padL - padR, cH = H - padT - padB;
  const all = [...termin, ...kalender];
  const max = Math.max(...all.map(d => d.total));
  const min = Math.min(...all.map(d => d.total)) - 15000;
  const range = max - min;
  const n = all.length;
  const toX = i => padL + Math.round((i / (n - 1)) * cW);
  const toY = v => padT + cH - Math.round(((v - min) / range) * cH);
  const fmtK = v => Math.round(v / 1000) + 'k';
  const tPts = termin.map((d, i) => ({ x: toX(i), y: toY(d.total), label: d.aar }));
  const kPts = kalender.map((d, i) => ({ x: toX(i + termin.length), y: toY(d.total), label: d.aar, est: d.estimert }));
  const pathD = pts => pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%',overflow:'visible',fontFamily:'var(--sans)',fontSize:11}}>
      <line x1={padL} y1={14} x2={padL + 20} y2={14} stroke="var(--ink-muted)" strokeWidth={2} strokeDasharray="4 3" />
      <text x={padL + 24} y={18} fill="var(--ink-muted)" fontSize={10}>Termin (okt–okt)</text>
      <line x1={padL + 148} y1={14} x2={padL + 168} y2={14} stroke="var(--forest)" strokeWidth={2.5} />
      <text x={padL + 172} y={18} fill="var(--ink-soft)" fontSize={10}>Kalenderår (jan–des)</text>
      <path d={pathD(tPts)} fill="none" stroke="var(--ink-muted)" strokeWidth={2} strokeDasharray="4 3" />
      <path d={pathD(kPts)} fill="none" stroke="var(--forest)" strokeWidth={2.5} />
      {tPts.length > 0 && kPts.length > 0 && (
        <line x1={tPts[tPts.length - 1].x} y1={tPts[tPts.length - 1].y}
          x2={kPts[0].x} y2={kPts[0].y}
          stroke="var(--rule)" strokeWidth={1} strokeDasharray="2 3" />
      )}
      {tPts.map((p, i) => (
        <g key={`t${i}`}>
          <circle cx={p.x} cy={p.y} r={4} fill="var(--ink-muted)" />
          <text x={p.x} y={H - 6} textAnchor="end" fill="var(--ink-muted)" fontSize={9}
            transform={`rotate(-45 ${p.x} ${H - 6})`}>{p.label}</text>
        </g>
      ))}
      {kPts.map((p, i) => (
        <g key={`k${i}`}>
          <circle cx={p.x} cy={p.y} r={4} fill={p.est ? "none" : "var(--forest)"} stroke="var(--forest)" strokeWidth={1.5} />
          {p.est && <text x={p.x} y={p.y - 8} textAnchor="middle" fill="var(--ink-muted)" fontSize={9}>est.</text>}
          <text x={p.x} y={H - 6} textAnchor="end" fill="var(--ink-soft)" fontSize={9}
            transform={`rotate(-45 ${p.x} ${H - 6})`}>{p.label}</text>
        </g>
      ))}
      <line x1={padL} y1={padT} x2={padL} y2={padT + cH} stroke="var(--rule)" />
      <line x1={padL} y1={padT + cH} x2={W - padR} y2={padT + cH} stroke="var(--rule)" />
      <text x={padL - 4} y={padT + cH + 4} textAnchor="end" fill="var(--ink-muted)" fontSize={9}>{fmtK(min)}</text>
      <text x={padL - 4} y={padT + 4} textAnchor="end" fill="var(--ink-muted)" fontSize={9}>{fmtK(max)}</text>
    </svg>
  );
}

// ------------------ ØKONOMI ------------------

function OkonomiPage() {
  const F = window.SITE_DATA.finance;
  const sumI = F.income.reduce((s, r) => s + parseInt(r[1].replace(/\s/g, ""), 10), 0);
  const sumU = F.expense.reduce((s, r) => s + parseInt(r[1].replace(/\s/g, ""), 10), 0);
  const fmt = (n) => n.toLocaleString("nb-NO").replace(/,/g, " ");
  return (
    <main data-screen-label="04 Økonomi">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Økonomi</span></div>
          <h1>Foreningens økonomi.</h1>
          <p className="lede">
            Sammendrag av regnskap for 2025 og budsjett for 2026. Fullstendige
            tall finner du i protokollen fra siste årsmøte.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <Eyebrow>Nøkkeltall 2025</Eyebrow>
          <h2 style={{marginBottom: 28}}>I korte trekk</h2>
          <div className="fin-grid">
            {F.summary.map((s, i) => (
              <div className="fin-cell" key={i}>
                <div className="label">{s.label}</div>
                <div className="num">{s.num}</div>
                <div className={"delta " + (s.neg ? "neg" : "")}>{s.delta}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-paper">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Inntekter</Eyebrow>
              <h2>Slik finansieres foreningen</h2>
              <p style={{color:"var(--ink-soft)", marginTop: 18}}>
                Hovedinntekten er medlemskontingenten. Bompenger fra Landfalltjernveien
                bidrar til veivedlikehold, og Hyttenytt finansieres delvis av annonser.
              </p>
            </div>
            <div>
              <table className="ledger">
                <thead>
                  <tr><th>Post</th><th className="num">Beløp (NOK)</th></tr>
                </thead>
                <tbody>
                  {F.income.map((r, i) => (
                    <tr key={i}><td>{r[0]}</td><td className="num">{r[1]}</td></tr>
                  ))}
                  <tr className="total"><td>Sum inntekter</td><td className="num">{fmt(sumI)}</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Utgifter</Eyebrow>
              <h2>Hvor pengene går</h2>
              <p style={{color:"var(--ink-soft)", marginTop: 18}}>
                Det meste går til vei og bom — brøyting om vinteren, grus og
                skraping resten av året — og til vedlikehold av Landfallhytta.
              </p>
            </div>
            <div>
              <table className="ledger">
                <thead>
                  <tr><th>Post</th><th className="num">Beløp (NOK)</th></tr>
                </thead>
                <tbody>
                  {F.expense.map((r, i) => (
                    <tr key={i}><td>{r[0]}</td><td className="num">{r[1]}</td></tr>
                  ))}
                  <tr className="total"><td>Sum utgifter</td><td className="num">{fmt(sumU)}</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-paper">
        <div className="container">
          <Eyebrow>Grasrotandel</Eyebrow>
          <h2 style={{marginBottom: 8}}>Bidrag fra Norsk Tipping</h2>
          <p style={{color:"var(--ink-soft)", marginBottom: 28, maxWidth: 580}}>
            Betalende medlemmer kan knytte sin Norsk Tipping-konto til foreningen.
            Foreningen mottar 5 % av spillerinnsatsen — uten kostnad for spilleren.
            Frem til 2021 ble regnskapet ført per termin (oktober–oktober).
          </p>
          <GrasrotChart data={F.grasrot} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Eyebrow>Bankbeholdning</Eyebrow>
          <h2 style={{marginBottom: 8}}>Utvikling over tid</h2>
          <p style={{color:"var(--ink-soft)", marginBottom: 28, maxWidth: 580}}>
            Stiplet linje viser termin-regnskap (oktober–oktober). Heltrukket linje
            viser kalenderår (januar–desember) fra og med 2021.
          </p>
          <BankChart termin={F.bankTermin} kalender={F.bankKalender} />
        </div>
      </section>

      <section className="section bg-cream-2">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Medlemskontingent</Eyebrow>
              <h2>kr 300 per hytte per år</h2>
            </div>
            <div className="read">
              <p>
                Kontingenten dekker drift av foreningen, utgivelse av Hyttenytt og
                vedlikehold av Landfallhytta. Faktura sendes ut i januar med forfall
                1. mars. Du kan også betale via Vipps til <strong>#924386 — Drammensmarka HEF</strong>, eller skanne QR-koden i bunnen av siden.
              </p>
              <p>
                Spørsmål om medlemskap eller faktura: <a href="mailto:post@dmhf.no">post@dmhf.no</a>.
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ------------------ VEDTEKTER ------------------

function VedtekterPage() {
  const B = window.SITE_DATA.bylaws;
  const [active, setActive] = useState("§1");
  useEffect(() => {
    const onScroll = () => {
      const top = window.scrollY + 140;
      let cur = active;
      for (const b of B) {
        const el = document.getElementById("§" + b.n);
        if (el && el.offsetTop <= top) cur = "§" + b.n;
      }
      if (cur !== active) setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [active, B]);

  return (
    <main data-screen-label="05 Vedtekter">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Vedtekter</span></div>
          <h1>Vedtekter.</h1>
          <p className="lede">
            Foreningens vedtekter, sist endret på årsmøtet 3. oktober 2015. Spørsmål
            kan rettes til styret.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="bylaws-grid">
            <aside className="toc">
              <h5>Innhold</h5>
              <ol>
                {B.map((b) => (
                  <li key={b.n}>
                    <a
                      href={"#§" + b.n}
                      className={active === "§" + b.n ? "active" : ""}
                    >
                      <span className="num">§ {b.n}</span>
                      <span>{b.title}</span>
                    </a>
                  </li>
                ))}
              </ol>
            </aside>

            <div className="bylaws-body">
              {B.map((b) => (
                <section key={b.n} id={"§" + b.n}>
                  <span className="pn">§ {b.n}</span>
                  <h2>{b.title}</h2>
                  <p>{b.body}</p>
                </section>
              ))}
              <section>
                <span className="pn">Vedtatt</span>
                <h2 style={{fontSize: 22}}>Sist endret 3. oktober 2015</h2>
                <p style={{color:"var(--ink-muted)"}}>Originalprotokollen oppbevares hos styret. Henvendelser om vedtektene kan rettes til <a href="mailto:post@dmhf.no">post@dmhf.no</a>.</p>
                <div className="callout" style={{marginTop:24}}>
                  <p style={{margin:0}}>Forslag til endring av § 3 og § 5 er kunngjort i Hyttenytt – behandles på neste årsmøte.</p>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ------------------ KART ------------------

function KartPage() {
  const C = window.SITE_DATA.cabins;
  const mapRef = useRef(null);
  const mapObj = useRef(null);
  const markersRef = useRef([]);
  const placingPinRef = useRef(null);
  const [showOwners, setShowOwners] = useState(true);
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState(null);
  const [placingMode, setPlacingMode] = useState(false);
  const [pickedCoord, setPickedCoord] = useState(null);
  const [copied, setCopied] = useState(false);

  const placed = useMemo(() => C.filter((c) => c.lat != null && c.lon != null), [C]);
  const unplaced = useMemo(() => C.filter((c) => c.lat == null && c.kind !== "landmark"), [C]);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return placed;
    return placed.filter((c) =>
      [c.id, c.name, c.owner, c.note].filter(Boolean).join(" ").toLowerCase().includes(q)
    );
  }, [query, placed]);

  useEffect(() => {
    if (mapObj.current || !mapRef.current) return;
    const L = window.L;
    const map = L.map(mapRef.current, {
      center: [59.772, 10.157],
      zoom: 14,
      scrollWheelZoom: false,
    });
    L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
      attribution: "Kartdata © OpenStreetMap-bidragsytere · SRTM | Kart © OpenTopoMap (CC-BY-SA)",
      maxZoom: 17,
      subdomains: "abc",
    }).addTo(map);
    mapObj.current = map;
  }, []);

  useEffect(() => {
    const map = mapObj.current;
    if (!map) return;
    const onClick = (e) => {
      if (!placingMode) return;
      setPickedCoord({ lat: e.latlng.lat, lng: e.latlng.lng });
      // place / move the temporary pin
      if (placingPinRef.current) map.removeLayer(placingPinRef.current);
      placingPinRef.current = window.L.marker([e.latlng.lat, e.latlng.lng], {
        icon: window.L.divIcon({
          className: '',
          html: '<div class="placing-pin"></div>',
          iconSize: [24, 24],
          iconAnchor: [12, 12],
        }),
        interactive: false,
        zIndexOffset: 1000,
      }).addTo(map);
    };
    map.on("click", onClick);
    map.getContainer().style.cursor = placingMode ? "crosshair" : "";
    if (!placingMode && placingPinRef.current) {
      map.removeLayer(placingPinRef.current);
      placingPinRef.current = null;
    }
    return () => {
      map.off("click", onClick);
      if (map.getContainer()) map.getContainer().style.cursor = "";
    };
  }, [placingMode]);

  useEffect(() => {
    const L = window.L;
    const map = mapObj.current;
    if (!map) return;
    markersRef.current.forEach((m) => map.removeLayer(m));
    markersRef.current = [];

    filtered.forEach((c) => {
      const isLm = c.kind === "landmark";
      const icon = L.divIcon({
        className: "",
        html: `<div class="cabin-marker ${isLm ? "landmark" : ""}"></div>`,
        iconSize: isLm ? [26, 26] : [22, 22],
        iconAnchor: isLm ? [13, 13] : [11, 11],
      });
      const m = L.marker([c.lat, c.lon], { icon }).addTo(map);
      m.on("click", () => { if (!placingMode) setSelected(c); });
      const ownerLine = c.owner && showOwners ? `<div class="owner">${c.owner}</div>` : "";
      m.bindTooltip(
        `<strong>${c.name}</strong>${ownerLine}`,
        { direction: "top", offset: [0, -10], className: "cabin-tt" }
      );
      markersRef.current.push(m);
    });
  }, [filtered, showOwners, placingMode]);

  const coordStr = pickedCoord
    ? `${pickedCoord.lat.toFixed(7)}° N, ${pickedCoord.lng.toFixed(7)}° Ø`
    : null;

  const copyCoord = () => {
    if (!coordStr) return;
    navigator.clipboard.writeText(`${pickedCoord.lat.toFixed(7)}, ${pickedCoord.lng.toFixed(7)}`).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  const mapCabinCount = filtered.filter((c) => c.kind !== "landmark").length;
  const totalCabins = placed.filter((c) => c.kind !== "landmark").length;

  return (
    <main data-screen-label="06 Hyttekart">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Hyttekart</span></div>
          <h1>Hyttekartet.</h1>
          <p className="lede">
            Kartet viser registrerte hytter med koordinater rundt Landfalltjern og Furumotomta.
            Klikk en markør for hyttenavn og informasjon.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="map-toolbar">
            <input
              type="text"
              placeholder="Søk etter hytte, nummer eller eier…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            <label className="toggle">
              <input
                type="checkbox"
                checked={showOwners}
                onChange={(e) => setShowOwners(e.target.checked)}
              />
              Vis adresse
            </label>
            <button
              className={"btn " + (placingMode ? "btn-primary" : "btn-ghost")}
              style={{fontSize: 14, padding: "7px 16px", cursor: "pointer"}}
              onClick={() => { setPlacingMode(!placingMode); setPickedCoord(null); setCopied(false); }}
            >
              {placingMode ? "Avslutt plassering" : "Finn koordinater på kartet"}
            </button>
            <span className="count">{mapCabinCount} av {totalCabins} hytter på kart</span>
          </div>

          {placingMode && (
            <div className="placement-info">
              <strong>Plasseringsmodus:</strong> Klikk på kartet der hytta di ligger for å hente koordinater.
              {pickedCoord ? (
                <div className="coord-result">
                  <code>{coordStr}</code>
                  <button className="btn btn-ghost" style={{fontSize:13, padding:"4px 12px", cursor:"pointer"}} onClick={copyCoord}>
                    {copied ? "✓ Kopiert" : "Kopier"}
                  </button>
                  <span className="coord-hint">
                    Send koordinatene til <a href="mailto:post@dmhf.no">post@dmhf.no</a> for å registrere din hytte på kartet.
                  </span>
                </div>
              ) : (
                <span style={{color:"var(--ink-muted)", fontSize:14, marginLeft: 12}}>Klikk på kartet…</span>
              )}
            </div>
          )}

          <div id="map" ref={mapRef}></div>

          <div className="map-legend">
            <span><span className="swatch"></span>Medlemshytte</span>
            <span><span className="swatch lm"></span>Landemerke (Landfallhytta, Furumotomta)</span>
            <span style={{marginLeft:"auto", color:"var(--ink-muted)", fontSize:13, fontFamily:"var(--mono)"}}>
              Furumotomta: 59.7733° N, 10.1481° Ø
            </span>
          </div>

          <div className="callout" style={{marginTop: 40}}>
            <h3 style={{marginBottom: 8, fontSize: 22}}>Registrer hytta di på kartet</h3>
            <p style={{margin:0, color:"var(--ink-soft)"}}>
              Bruk «Finn koordinater på kartet» over for å hente posisjonen, og send
              koordinatene til <a href="mailto:post@dmhf.no">post@dmhf.no</a> — oppgi hyttenummer og navn.
            </p>
          </div>
        </div>
      </section>

      {unplaced.length > 0 && (
        <section className="section bg-cream-2">
          <div className="container">
            <div className="section-head">
              <div>
                <Eyebrow>Hytteliste</Eyebrow>
                <h2>Hytter uten kartkoordinater</h2>
              </div>
              <div className="right" style={{fontSize:14, color:"var(--ink-muted)"}}>{unplaced.length} hytter ikke kartfestet ennå</div>
            </div>
            <div className="cabin-list-grid">
              {unplaced.map((c) => (
                <button className="cabin-list-card" key={c.id} onClick={() => setSelected(c)}>
                  <div className="cabin-list-badge">{c.id}</div>
                  <div className="cabin-list-info">
                    <div className="cabin-list-name">{c.name}</div>
                    {c.owner && <div className="cabin-list-addr">{c.owner}</div>}
                  </div>
                </button>
              ))}
            </div>
          </div>
        </section>
      )}

      {selected && (
        <CabinModal cabin={selected} showOwner={showOwners} onClose={() => setSelected(null)} />
      )}
    </main>
  );
}

const YEARS = Array.from({ length: 2026 - 1900 + 1 }, (_, i) => 2026 - i);

function CabinSubmitBox({ cabin }) {
  const mapRef = useRef(null);
  const mapObj = useRef(null);
  const markerRef = useRef(null);
  const [coords, setCoords] = useState(null);
  const [copied, setCopied] = useState(false);
  const [infoText, setInfoText] = useState('');
  const [builtYear, setBuiltYear] = useState('');

  useEffect(() => {
    if (mapObj.current || !mapRef.current) return;
    const L = window.L;
    const map = L.map(mapRef.current, {
      center: [59.763, 10.171],
      zoom: 12,
      scrollWheelZoom: true,
    });
    L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
      attribution: "© OpenStreetMap · OpenTopoMap (CC-BY-SA)",
      maxZoom: 17,
    }).addTo(map);
    map.on("click", (e) => {
      const { lat, lng } = e.latlng;
      const c = { lat: lat.toFixed(6), lon: lng.toFixed(6) };
      setCoords(c);
      if (markerRef.current) markerRef.current.setLatLng(e.latlng);
      else markerRef.current = L.marker(e.latlng).addTo(map);
    });
    setTimeout(() => map.invalidateSize(), 80);
    mapObj.current = map;
    return () => { map.remove(); mapObj.current = null; markerRef.current = null; };
  }, []);

  const copyAll = () => {
    const lines = [
      `Hytte: ${cabin.id} – ${cabin.name}`,
      cabin.owner ? `Adresse: ${cabin.owner}` : null,
      coords
        ? `Koordinater: ${coords.lat}° N, ${coords.lon}° Ø`
        : "Koordinater: (klikk på kartet for å velge)",
      builtYear ? `Byggeår: ${builtYear}` : null,
      infoText ? `Info: ${infoText}` : null,
    ].filter(Boolean).join("\n");
    navigator.clipboard.writeText(lines).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 2200);
  };

  return (
    <div className="cabin-submit-box">
      <div className="cabin-submit-map" ref={mapRef}></div>
      <div className="cabin-submit-row">
        <span className="cabin-submit-coords">
          {coords
            ? `${coords.lat}° N, ${coords.lon}° Ø`
            : "Klikk i kartet for å finne koordinater"}
        </span>
        <button className="btn btn-ghost cabin-submit-copy" onClick={copyAll}>
          {copied ? "✓ Kopiert" : "Kopier alt"}
        </button>
      </div>
      <div className="cabin-submit-fields">
        <label className="cabin-submit-fieldlabel">Byggeår</label>
        <input
          className="cabin-submit-input"
          type="text"
          inputMode="numeric"
          placeholder="f.eks. 1965"
          value={builtYear}
          onChange={(e) => setBuiltYear(e.target.value)}
        />
        <label className="cabin-submit-fieldlabel">Info om hytten</label>
        <textarea
          className="cabin-submit-textarea"
          rows={3}
          placeholder="Byggestil, historikk, særpreg — alt som kan hjelpe oss å identifisere hytten."
          value={infoText}
          onChange={(e) => setInfoText(e.target.value)}
        />
      </div>
      <p className="cabin-submit-text">
        Send koordinater og gjerne et bilde til{" "}
        <a href={`mailto:post@dmhf.no?subject=Koordinater ${cabin.id} ${cabin.name}`}>
          post@dmhf.no
        </a>{" "}
        — vi legger hytten inn på kartet.
      </p>
    </div>
  );
}

function CabinModal({ cabin, showOwner, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const isLm = cabin.kind === "landmark";
  const hasCoords = cabin.lat != null && cabin.lon != null;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <span className="num">{isLm ? "Landemerke" : cabin.id}</span>
            <h3>{cabin.name}</h3>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Lukk">×</button>
        </div>

        <div className="modal-body">
          {(hasCoords || isLm) ? (
            <image-slot
              id={"cabin-" + cabin.id}
              placeholder={`Bilde av ${cabin.name}`}
              shape="rounded"
              radius="6"
            ></image-slot>
          ) : (
            <CabinSubmitBox cabin={cabin} />
          )}

          {/* Info box */}
          <div className="cabin-info-box">
            {!isLm && cabin.owner && (
              <div className="cabin-info-row">
                <span className="cabin-info-label">Adresse</span>
                <span className="cabin-info-val">{cabin.owner}</span>
              </div>
            )}
            <div className="cabin-info-row">
              <span className="cabin-info-label">Koordinater</span>
              {hasCoords ? (
                <span className="cabin-info-val" style={{fontFamily:"var(--mono)", fontSize:13}}>
                  {cabin.lat.toFixed(6)}° N, {cabin.lon.toFixed(6)}° Ø
                </span>
              ) : (
                <span className="cabin-info-val" style={{color:"var(--ink-muted)"}}>Ikke registrert — bruk «Finn koordinater» på kartet</span>
              )}
            </div>
            {cabin.note && (
              <div className="cabin-info-row">
                <span className="cabin-info-label">Notat</span>
                <span className="cabin-info-val">{cabin.note}</span>
              </div>
            )}
          </div>

        </div>
      </div>
    </div>
  );
}

// ------------------ HYTTENYTT ------------------

function HyttenyttPage() {
  const H = window.SITE_DATA.hyttenytt;
  const latest = H.issues.find((i) => i.featured) || H.issues[0];

  return (
    <main data-screen-label="07 Hyttenytt">
      <header className="page-head">
        <div className="container">
          <div className="crumbs"><a>Hjem</a> · <span>Hyttenytt</span></div>
          <h1>Hyttenytt.</h1>
          <p className="lede">
            Medlemsbladet til Drammensmarka Hytteeierforening — to ganger i året siden 1979.
          </p>
        </div>
      </header>

      {/* SISTE UTGAVE */}
      <section className="section">
        <div className="container">
          <div className="hn-feature">
            <div className="hn-cover">
              <span className="badge">Siste utgave</span>
              <PhSlot
                id={"hn-cover-" + latest.yr + "-" + latest.no}
                label={`Forside · Hyttenytt nr. ${latest.no} / ${latest.yr}`}
                style={{width:"100%", height:"100%"}}
              />
            </div>
            <div>
              <Eyebrow>Hyttenytt nr. {latest.no} / {latest.yr}</Eyebrow>
              <h2 style={{marginBottom: 16}}>{latest.theme}</h2>
              <div className="meta">{latest.date} · {latest.pages} sider</div>
              <p style={{fontSize: 19, color:"var(--ink-soft)", maxWidth: 560, marginTop: 20}}>
                {latest.teaser}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* OM BLADET */}
      <section className="section bg-cream-2">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Om bladet</Eyebrow>
              <h2>To ganger i året, siden 1979.</h2>
            </div>
            <div className="read">
              <p style={{fontSize: 20, color:"var(--ink-soft)"}}>{H.intro}</p>
              <p>
                Redaksjonen tar gjerne imot bilder, historier og leserinnlegg.
                Send til <a href="mailto:post@dmhf.no">post@dmhf.no</a> innen 1. mars (vårutgaven) eller 1. oktober (høstutgaven).
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// expose
Object.assign(window, { HomePage, HistoriePage, ArsmoterPage, OkonomiPage, VedtekterPage, KartPage, HyttenyttPage });