// ---------- Journal page — editorial blog ----------

const JournalPage = ({ onNav, onEnterApp }) => {
  const featured = {
    cat: "STUDIO PRACTICE", date: "MAY 18, 2026", read: "9 min read",
    title: "The cost of the eight-tab workflow.",
    italic: "And what we gave up to build something better.",
    excerpt: "We started HarborDock because we kept watching brilliant studios — the kind whose work we admired — lose hours every week to the most mundane part of the job: keeping track of where the latest cut lived and what the client thought of it. Here's what we learned in our first year on the road, and what we built in response.",
    author: "Maren Kell", role: "Founding studio",
    accent: "harbor",
  };

  const articles = [
    { cat: "BRAND", date: "MAY 14", title: "Why your client portal is your second brand identity.", read: "6 min", accent: "amber" },
    { cat: "WORKFLOW", date: "MAY 09", title: "Approval velocity is a leading indicator of retention.", read: "8 min", accent: "harbor" },
    { cat: "CRAFT", date: "MAY 02", title: "The art of writing a revision note your editor will love.", read: "5 min", accent: "teal" },
    { cat: "OPERATIONS", date: "APR 26", title: "Building a revision-round language for your studio.", read: "11 min", accent: "lavender" },
    { cat: "TOOLS", date: "APR 18", title: "Premiere, Resolve, HarborDock — a sample finishing flow.", read: "7 min", accent: "steel" },
    { cat: "INTERVIEW", date: "APR 11", title: "Lucía Ramos on selling the portal before the deck.", read: "12 min", accent: "teal" },
  ];

  const series = [
    { t: "Field Notes", n: 14, body: "Short pieces from the founding team — process, observations, behind the build." },
    { t: "Studio Stories", n: 8, body: "Long-form profiles of studios doing remarkable work in remarkable ways." },
    { t: "Craft Letters", n: 22, body: "Notes on the small, considered choices that elevate creative work." },
  ];

  return (
    <div className="light-scroll" style={{ background: "var(--paper)", color: "var(--ink)", minHeight: "100vh", fontFamily: "var(--sans)" }}>
      <MarketingNav active="journal" onNav={onNav} onEnterApp={onEnterApp} />

      <PageMasthead
        eyebrow="THE JOURNAL"
        title="Letters from"
        italic="the workshop."
        lead="Field notes, studio stories, and craft essays from the team building HarborDock and the studios who run on it."
      />

      {/* Featured article */}
      <section style={{ padding: "60px 0 80px" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <LCard hover style={{ overflow: "hidden" }}>
              <div className="md-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
                <div style={{
                  aspectRatio: "5/4", position: "relative", overflow: "hidden",
                  background: `linear-gradient(135deg, var(--ink), ${STATUS_TONES[featured.accent].bg})`,
                }}>
                  <svg width="100%" height="100%" viewBox="0 0 400 320" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.20 }}>
                    {Array.from({ length: 22 }).map((_, i) => {
                      const y = 10 + i * 14;
                      return <path key={i} d={`M -10 ${y} Q 100 ${y - 6} 200 ${y} T 410 ${y}`} stroke="white" fill="none" strokeWidth="0.5" />;
                    })}
                  </svg>
                  <div style={{
                    position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", padding: 28,
                  }}>
                    <span className="micro" style={{ background: "rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.18)", color: "white", padding: "4px 10px", borderRadius: 99, fontSize: 9.5 }}>
                      FEATURED · MAY 18
                    </span>
                  </div>
                </div>
                <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                  <div className="micro" style={{ color: "rgba(8,12,16,0.55)" }}>{featured.cat} · {featured.read}</div>
                  <h2 style={{ fontFamily: "var(--serif)", fontSize: 36, lineHeight: 1.08, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 16px" }}>
                    {featured.title}<br />
                    <span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>{featured.italic}</span>
                  </h2>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "rgba(8,12,16,0.65)", margin: 0 }}>{featured.excerpt}</p>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 28 }}>
                    <Avatar initials="MK" accent="harbor" size={32} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{featured.author}</div>
                      <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.55)" }}>{featured.role}</div>
                    </div>
                    <Button variant="ghost" light size="sm" iconRight={<window.Icon.Arrow size={12} />}>Read</Button>
                  </div>
                </div>
              </div>
            </LCard>
          </Reveal>
        </div>
      </section>

      {/* Article grid */}
      <section style={{ padding: "0 0 100px" }}>
        <div className="container">
          <Reveal>
            <div className="hd-mobile-row" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, gap: 16 }}>
              <DisplayH2 eyebrow="LATEST" italic="from the studio.">Recent dispatches</DisplayH2>
              <div className="hd-scroll-x" style={{ display: "flex", gap: 8, width: "100%" }}>
                {["All", "Studio practice", "Workflow", "Craft", "Tools"].map((c, i) => (
                  <button key={c} style={{
                    padding: "6px 12px", borderRadius: 99, fontSize: 12, fontWeight: 500,
                    background: i === 0 ? "var(--ink)" : "transparent",
                    color: i === 0 ? "var(--white)" : "rgba(8,12,16,0.65)",
                    border: i === 0 ? "1px solid var(--ink)" : "1px solid rgba(8,12,16,0.12)",
                    cursor: "pointer", fontFamily: "var(--sans)",
                  }}>{c}</button>
                ))}
              </div>
            </div>
          </Reveal>
          <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {articles.map((a, i) => {
              const tone = STATUS_TONES[a.accent];
              return (
                <Reveal key={i} delay={i * 50}>
                  <LCard hover style={{ overflow: "hidden", height: "100%" }}>
                    <div style={{
                      aspectRatio: "16/9", position: "relative", overflow: "hidden",
                      background: `linear-gradient(135deg, var(--ink), ${tone.bg})`,
                    }}>
                      <svg width="100%" height="100%" viewBox="0 0 320 180" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
                        {Array.from({ length: 12 }).map((_, j) => {
                          const y = 8 + j * 16;
                          return <path key={j} d={`M -10 ${y} Q 80 ${y - 4} 160 ${y} T 340 ${y}`} stroke="white" fill="none" strokeWidth="0.5" />;
                        })}
                      </svg>
                    </div>
                    <div style={{ padding: 22 }}>
                      <div className="micro" style={{ color: tone.dot, fontSize: 9.5 }}>{a.cat} · {a.date}</div>
                      <h3 style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.2, fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 14px" }}>{a.title}</h3>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11.5, color: "rgba(8,12,16,0.55)" }}>
                        <span>{a.read}</span>
                        <window.Icon.Arrow size={12} />
                      </div>
                    </div>
                  </LCard>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* Series strip */}
      <section style={{ padding: "100px 0", background: "var(--sand-soft)", borderTop: "1px solid rgba(8,12,16,0.06)", borderBottom: "1px solid rgba(8,12,16,0.06)" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <DisplayH2 eyebrow="SERIES" italic="follow along.">Threads worth</DisplayH2>
          </Reveal>
          <div className="md-stack sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 40 }}>
            {series.map(s => (
              <LCard key={s.t} hover style={{ padding: 28 }}>
                <div className="micro" style={{ color: "rgba(8,12,16,0.55)" }}>{s.n} ESSAYS</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 500, letterSpacing: "-0.015em", marginTop: 12 }}>{s.t}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "rgba(8,12,16,0.62)", marginTop: 10 }}>{s.body}</div>
                <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 500, color: "var(--harbor)" }}>
                  Read the series <window.Icon.Arrow size={12} />
                </div>
              </LCard>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section style={{ padding: "100px 0" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <LCard style={{ padding: 48, textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
              <div className="micro" style={{ color: "rgba(8,12,16,0.55)" }}>THE FIELD NOTES</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 12px", lineHeight: 1.1 }}>
                One short letter,<br /><span style={{ fontStyle: "italic" }}>every Sunday.</span>
              </h3>
              <p style={{ fontSize: 15, color: "rgba(8,12,16,0.62)", margin: "0 auto 28px", maxWidth: 460 }}>
                Field notes from the team and the studios on HarborDock. Practical, brief, never noisy.
              </p>
              <div className="sm-stack-row" style={{ display: "flex", gap: 8, maxWidth: 440, margin: "0 auto" }}>
                <input
                  type="email"
                  placeholder="your@studio.com"
                  style={{
                    flex: 1, background: "var(--paper)",
                    border: "1px solid rgba(8,12,16,0.14)", borderRadius: 8,
                    padding: "10px 14px", fontSize: 14, fontFamily: "var(--sans)", color: "var(--ink)",
                    outline: "none",
                  }}
                />
                <Button variant="secondary" light size="md">Subscribe</Button>
              </div>
              <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.45)", marginTop: 16 }}>1,840 studio teams reading along · unsubscribe anytime.</div>
            </LCard>
          </Reveal>
        </div>
      </section>

      <MarketingFooter onNav={onNav} />
    </div>
  );
};

window.JournalPage = JournalPage;