/* eslint-disable */
/* ===============================================================
   Pages — Home, Issue, Archive, Portfolio, Subscribe, About
   =============================================================== */

const HomePage = ({ go }) => {
  const featured = ISSUES.find(i => i.featured);
  const recent = ISSUES.slice(0, 6);

  return (
    <main>
      {/* ── Masthead — portrait + wordmark ───────────────── */}
      <section style={{
        background: "var(--teal)",
        color: "var(--parchment)",
        borderBottom: "3px double var(--gold-deep)",
        position: "relative",
      }}>
        <div className="container" style={{ padding: "48px 28px 56px" }}>
          <div className="masthead-grid">
            <div className="masthead-portrait">
              <img src={ASSET("assets/jan-portrait-crop.jpg")} alt="Jan Öberg"
                   style={{
                     width: "100%",
                     display: "block",
                     border: "1px solid var(--gold-deep)",
                     filter: "contrast(1.04) saturate(0.92)",
                   }}/>
              <div className="label-tiny on-teal" style={{ textAlign: "center", marginTop: 12 }}>
                Jan Öberg<br/>
                <span style={{ opacity: 0.7 }}>Falun · skriver sedan 2014</span>
              </div>
            </div>
            <div className="masthead-text">
              <div className="label-tiny on-teal" style={{ marginBottom: 14 }}>
                Ett månatligt aktiebrev · Sedan januari 2014
              </div>
              <h1 className="wordmark" style={{
                fontSize: "clamp(40px, 6.2vw, 78px)",
                color: "var(--gold)",
                lineHeight: 0.95,
                marginBottom: 14,
                letterSpacing: "0.10em",
              }}>
                Aktiebrevet
              </h1>
              <hr style={{ border: 0, borderTop: "1px solid var(--gold-deep)", borderBottom: "1px solid var(--gold-deep)", height: 4, margin: "18px 0" }}/>
              <p style={{
                fontFamily: "var(--serif-body)",
                fontStyle: "italic",
                fontSize: 20,
                lineHeight: 1.55,
                color: "var(--parchment)",
                maxWidth: "46ch",
                marginBottom: 26,
              }}>
                Författaren är en självlärd amatör, verksam på aktiemarknaden i mer
                än 40 år. Mina erfarenheter vill jag dela med mig till dig —
                kunskaper du inte har råd att vara utan.
              </p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                <a className="btn btn-gold" href={HREF.subscribe} style={{ textDecoration: "none" }}>
                  Prenumerera — 100 kr/år
                </a>
                <a className="btn btn-ghost-teal" href={ISSUE_HREF(111)} style={{ textDecoration: "none" }}>
                  Läs senaste numret →
                </a>
              </div>
              <div style={{
                marginTop: 28,
                fontFamily: "var(--serif-display)",
                fontStyle: "italic",
                fontSize: 22,
                color: "var(--gold-soft)",
              }}>
                Hej, du glade investerare!
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Departures board — latest issue ─────────────── */}
      <section className="container" style={{ paddingTop: 64 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 8 }}>
          <div className="label-tiny">Avgångar · Departures</div>
          <div className="label-tiny tabular">Nästa nr · 2026-05-22</div>
        </div>
        <hr style={{ border: 0, borderTop: "2px solid var(--ink)", margin: "0 0 8px" }}/>
        <hr style={{ border: 0, borderTop: "1px solid var(--ink)", margin: "0 0 16px" }}/>

        <div style={{
          background: "var(--teal-deep)",
          color: "var(--gold-soft)",
          padding: "32px 36px",
          border: "1px solid var(--gold-deep)",
          position: "relative",
          overflow: "hidden",
        }}>
          {/* train silhouette decoration — large, faint, behind content, bottom-right */}
          <div style={{
            position: "absolute",
            bottom: -12,
            right: -20,
            opacity: 0.10,
            pointerEvents: "none",
          }}>
            <TrainIcon size={260} color="var(--gold)"/>
          </div>
          <div className="featured-grid">
            <div className="featured-num" style={{
              fontFamily: "var(--serif-display)",
              fontWeight: 700,
              fontSize: 86,
              color: "var(--gold)",
              lineHeight: 1,
              letterSpacing: "-0.02em",
              borderRight: "1px solid var(--gold-deep)",
              paddingRight: 32,
            }}>
              <div className="label-tiny on-teal" style={{ marginBottom: 6 }}>Nummer</div>
              <span className="tabular">{String(featured.nr).padStart(3, "0")}</span>
            </div>
            <div>
              <div className="label-tiny on-teal" style={{ marginBottom: 8 }}>Senaste numret · 2022-12-19</div>
              <h2 style={{
                fontFamily: "var(--serif-display)",
                fontStyle: "italic",
                fontSize: "clamp(32px, 4.4vw, 48px)",
                color: "var(--gold-soft)",
                lineHeight: 1.05,
                marginBottom: 14,
              }}>
                {featured.title}
              </h2>
              <p style={{ fontSize: 17, color: "var(--parchment)", maxWidth: "50ch", marginBottom: 20, lineHeight: 1.55 }}>
                {featured.teaser}
              </p>
              <a className="btn btn-ghost-teal" href={ISSUE_HREF(111)} style={{ textDecoration: "none" }}>
                Hoppa på tåget →
              </a>
            </div>
            <div className="featured-toc" style={{ borderLeft: "1px solid var(--gold-deep)", paddingLeft: 24, fontSize: 13, color: "var(--gold-soft)" }}>
              <div className="label-tiny on-teal" style={{ marginBottom: 12 }}>Innehåll</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, fontStyle: "italic" }}>
                <li style={{ padding: "6px 0", lineHeight: 1.35 }}>· Det sluttande planet</li>
                <li style={{ padding: "6px 0", lineHeight: 1.35 }}>· PPM — den tysta tjuven</li>
                <li style={{ padding: "6px 0", lineHeight: 1.35 }}>· RISK!</li>
                <li style={{ padding: "6px 0", lineHeight: 1.35, color: "var(--gold)", fontWeight: 600 }}>· Hoppa på tåget</li>
                <li style={{ padding: "6px 0", lineHeight: 1.35 }}>· Bolag i portföljen</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ── Senaste numren ──────────────────────────────── */}
      <section className="container" style={{ paddingTop: 80 }}>
        <div className="rule-fancy">
          <Ornament color="var(--gold-deep)" size={16}/>
          <h2 style={{
            fontFamily: "var(--serif-display)",
            fontStyle: "italic",
            fontSize: 36,
            color: "var(--teal)",
            flex: "0 0 auto",
            padding: "0 4px",
          }}>
            Senaste numren
          </h2>
          <Ornament color="var(--gold-deep)" size={16}/>
        </div>
        <div className="recent-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 0,
          border: "1px solid var(--parchment-3)",
        }}>
          {recent.map((iss, i) => (
            <a key={iss.nr} href={ISSUE_HREF(iss.nr)}
               className="recent-card" style={{
              padding: "26px 24px",
              borderRight: i % 3 !== 2 ? "1px solid var(--parchment-3)" : "none",
              borderBottom: i < 3 ? "1px solid var(--parchment-3)" : "none",
              background: "var(--parchment)",
              transition: "background 0.15s",
              position: "relative",
              display: "block",
              textDecoration: "none",
              color: "inherit",
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--parchment-2)"}
            onMouseLeave={(e) => e.currentTarget.style.background = "var(--parchment)"}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="label-tiny tabular">Nr {iss.nr}</span>
                <span className="label-tiny tabular">{iss.date}</span>
              </div>
              <h3 style={{
                fontFamily: "var(--serif-display)",
                fontSize: 24,
                fontStyle: "italic",
                color: "var(--teal)",
                margin: "14px 0 10px",
                lineHeight: 1.15,
              }}>
                {iss.title}
              </h3>
              <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.55, marginBottom: 14 }}>
                {iss.teaser}
              </p>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: 11,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: iss.free ? "var(--gain)" : "var(--gold-deep)",
              }}>
                {iss.free ? "Fritt att läsa →" : "Lås upp · 100 kr/år →"}
              </div>
            </a>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 28 }}>
          <a className="btn btn-ghost" href={HREF.archive} style={{ textDecoration: "none" }}>
            Hela arkivet — 111 nummer →
          </a>
        </div>
      </section>

      {/* ── Bolag jag följer ────────────────────────────── */}
      <section className="container" style={{ paddingTop: 80 }}>
        <div className="rule-fancy">
          <Ornament color="var(--gold-deep)" size={16}/>
          <h2 style={{
            fontFamily: "var(--serif-display)",
            fontStyle: "italic",
            fontSize: 36,
            color: "var(--teal)",
            padding: "0 4px",
          }}>
            Bolag jag följer
          </h2>
          <Ornament color="var(--gold-deep)" size={16}/>
        </div>
        <p style={{ textAlign: "center", maxWidth: 580, margin: "0 auto 32px", fontStyle: "italic", color: "var(--ink-soft)" }}>
          Det här är de gruvbolag jag personligen följer och äger i min egen portfölj —
          inga rekommendationer, bara där jag har skin in the game.
        </p>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 1,
          background: "var(--parchment-3)",
          border: "1px solid var(--parchment-3)",
        }}>
          {PORTFOLIO.map(c => <PortfolioCard key={c.ticker} c={c} go={go}/>)}
        </div>
      </section>

      {/* ── Watercolor signature section ─────────────────── */}
      <section className="container" style={{ paddingTop: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, alignItems: "center" }}>
          <WatercolorPlaceholder height={320} caption="Stugan i Bjursås, februari"/>
          <div>
            <div className="label-tiny" style={{ marginBottom: 14 }}>Mellan numren</div>
            <h2 style={{
              fontFamily: "var(--serif-display)",
              fontStyle: "italic",
              fontSize: 38,
              color: "var(--teal)",
              lineHeight: 1.1,
              marginBottom: 18,
            }}>
              Akvareller från ladugården
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)", marginBottom: 18 }}>
              När siffrorna trycker på lite för hårt går jag ut till ladugården,
              tar fram penslarna och målar. Mest stugor, mest snö, mest fotspår.
              Ibland dyker akvarellerna upp i breven — som månadsmärken,
              som paus, som påminnelse om att livet inte bara består av kvartalsrapporter.
            </p>
            <a className="btn btn-ghost" href={HREF.about} style={{ textDecoration: "none" }}>
              Om Jan & akvarellerna →
            </a>
          </div>
        </div>
      </section>

      {/* ── Subscribe ───────────────────────────────────── */}
      <section className="container" style={{ paddingTop: 80 }}>
        <SubscribeBlock/>
      </section>
    </main>
  );
};

const PortfolioCard = ({ c }) => (
  <a href={HREF.portfolio} className="port-card-home" style={{
    background: "var(--parchment)",
    padding: "24px 22px",
    display: "flex",
    flexDirection: "column",
    gap: 12,
    transition: "background 0.15s",
    textDecoration: "none",
    color: "inherit",
  }}
  onMouseEnter={(e) => e.currentTarget.style.background = "var(--parchment-2)"}
  onMouseLeave={(e) => e.currentTarget.style.background = "var(--parchment)"}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
          <FlagFor country={c.country} size={12}/>
          <span className="label-tiny tabular">{c.exchange} · {c.ticker}</span>
        </div>
        <h3 style={{
          fontFamily: "var(--serif-display)",
          fontSize: 22,
          fontStyle: "italic",
          color: "var(--teal)",
          lineHeight: 1.15,
        }}>{c.name}</h3>
      </div>
      <div style={{
        border: "1px solid var(--gold-deep)",
        padding: "4px 6px",
        display: "flex",
        alignItems: "center",
        gap: 4,
      }}>
        <MetalSigil metal={c.metal} size={18} color="var(--gold-deep)"/>
        <span className="label-tiny" style={{ color: "var(--gold-deep)" }}>{c.metal}</span>
      </div>
    </div>
    <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.55, fontStyle: "italic" }}>
      "{c.note}"
    </p>
    <div style={{
      borderTop: "1px solid var(--parchment-3)",
      paddingTop: 10,
      display: "flex",
      justifyContent: "space-between",
      fontSize: 12,
      color: "var(--ink-muted)",
    }}>
      <span className="label-tiny">{c.stage}</span>
      <span className="label-tiny">Omnämnd · {c.issues.length} nr</span>
    </div>
  </a>
);

Object.assign(window, { HomePage, PortfolioCard });