// ───────────── Journal page ─────────────
const TWEAK_DEFAULTS_JOURNAL = /*EDITMODE-BEGIN*/{
  "palette": "aurora",
  "grain": true
}/*EDITMODE-END*/;

const POSTS = [
  { id: 1, cat: "Essay", title: "The case for a smaller agency.", excerpt: "Why we turned down 9 in 10 enquiries this year — and what that buys you as a client.", author: "Mira Rajan", date: "May 14, 2026", read: "6 min", featured: true, c1: "#1a2a4a", c2: "#0f1525" },
  { id: 2, cat: "Craft", title: "On reading the brand brief twice.", excerpt: "The first read is for ego. The second is for craft. A short essay on what gets missed in week one.", author: "Theo Kassidis", date: "Apr 28, 2026", read: "4 min", c1: "#3a2418", c2: "#1f1411" },
  { id: 3, cat: "Growth", title: "Paid social, lifecycle and the dollar that connects them.", excerpt: "Treating channels as one system, not many. A working model for unifying paid and CRM.", author: "Asha Tan", date: "Apr 12, 2026", read: "9 min", c1: "#0f2820", c2: "#0a1813" },
  { id: 4, cat: "Studio", title: "What we read at the studio this quarter.", excerpt: "Twelve books, two podcasts and one bafflingly good newsletter. Our recommended reading list for Q1.", author: "Jules Kim", date: "Mar 30, 2026", read: "5 min", c1: "#2a1a3e", c2: "#160c22" },
  { id: 5, cat: "Engineering", title: "How we shaved 800ms off MeinHaus.", excerpt: "Three boring decisions, two clever ones, and one we'd never make again.", author: "Sam Park", date: "Mar 18, 2026", read: "11 min", c1: "#3a1f1f", c2: "#1f0f0f" },
  { id: 6, cat: "AI", title: "Practical AI in the studio (not theatre).", excerpt: "Where we use AI, where we don't, and what we wish people would stop pitching us.", author: "Mira Rajan", date: "Mar 04, 2026", read: "7 min", c1: "#1f3a2f", c2: "#0f1f17" },
  { id: 7, cat: "Craft", title: "On grids that bend.", excerpt: "Type-driven grids, breakpoint-aware rhythm and the lie of mobile-first.", author: "Iris Romero", date: "Feb 17, 2026", read: "6 min", c1: "#0e1a30", c2: "#1a3a6a" },
  { id: 8, cat: "Growth", title: "SEO in the age of the answer engine.", excerpt: "Less keyword stuffing, more authority — how we're rethinking content for a chatbot-first web.", author: "Asha Tan", date: "Feb 02, 2026", read: "10 min", c1: "#3a2a1a", c2: "#7a5a3a" },
  { id: 9, cat: "Studio", title: "Notes from the Bangalore pod.", excerpt: "Three engineers, fifteen Slack threads and one shared Spotify playlist. A week in our BLR pod.", author: "Priya Singh", date: "Jan 22, 2026", read: "4 min", c1: "#2a1818", c2: "#5c2c2c" },
  { id: 10, cat: "Engineering", title: "Why we still ship Webflow (sometimes).", excerpt: "A modest defense of the visual builder, written by someone who can read Next.js source.", author: "Theo Kassidis", date: "Jan 08, 2026", read: "8 min", c1: "#3e4e2a", c2: "#7a8f4d" },
];

function Featured({ p, accent }) {
  return (
    <a href="#" style={{ textDecoration: "none", color: "inherit" }}>
      <TiltCard max={2} style={{
        position: "relative", borderRadius: 28, overflow: "hidden", aspectRatio: "21/9",
        background: `linear-gradient(135deg, ${p.c1}, ${p.c2})`,
        border: "1px solid rgba(255,255,255,0.08)"
      }}>
        {/* abstract art */}
        <svg viewBox="0 0 1000 420" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}>
          {Array.from({ length: 30 }).map((_, i) => (
            <path key={i} d={`M -100 ${200 + i*8} Q 250 ${100 + i*5}, 500 ${200 + Math.sin(i)*40} T 1100 ${200 - i*6}`} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
          ))}
        </svg>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%)" }}/>

        <div style={{ position: "absolute", top: 28, left: 28, display: "flex", gap: 8 }}>
          <span className="liquid-glass" style={{ borderRadius: 999, padding: "8px 16px", fontSize: 12, color: "#fff", letterSpacing: "0.1em", textTransform: "uppercase" }}>Featured</span>
          <span className="liquid-glass" style={{ borderRadius: 999, padding: "8px 16px", fontSize: 12, color: "rgba(255,255,255,0.85)" }}>{p.cat}</span>
        </div>
        <div style={{ position: "absolute", bottom: 40, left: 40, right: 40, color: "#fff" }}>
          <h2 className="font-serif" style={{ fontSize: "clamp(40px, 5vw, 76px)", lineHeight: 1, letterSpacing: "-0.025em", marginBottom: 14, maxWidth: 800 }}>
            {p.title}
          </h2>
          <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 17, lineHeight: 1.55, maxWidth: 560, marginBottom: 22 }} dangerouslySetInnerHTML={{__html: p.excerpt}}/>
          <div style={{ display: "flex", alignItems: "center", gap: 18, color: "rgba(255,255,255,0.65)", fontSize: 13 }}>
            <span>{p.author}</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>{p.date}</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>{p.read} read</span>
          </div>
        </div>
      </TiltCard>
    </a>
  );
}

function PostCard({ p, accent }) {
  return (
    <a href="#" style={{ textDecoration: "none", color: "inherit" }}>
      <TiltCard max={3} className="glow-edge" style={{
        borderRadius: 22, overflow: "hidden", height: "100%",
        background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)",
        display: "flex", flexDirection: "column"
      }}>
        <div style={{ aspectRatio: "16/10", position: "relative", overflow: "hidden",
          background: `linear-gradient(135deg, ${p.c1}, ${p.c2})` }}>
          <svg viewBox="0 0 400 250" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.4 }}>
            {Array.from({ length: 14 }).map((_, i) => {
              const cx = ((p.id * 50) + i * 31) % 400;
              const cy = ((p.id * 30) + i * 19) % 250;
              return <circle key={i} cx={cx} cy={cy} r={(i % 6) + 4} fill="none" stroke="rgba(255,255,255,0.2)"/>;
            })}
          </svg>
          <div style={{ position: "absolute", top: 14, left: 14 }}>
            <span className="liquid-glass" style={{ borderRadius: 99, padding: "6px 12px", fontSize: 11, color: "#fff", letterSpacing: "0.08em", textTransform: "uppercase" }}>{p.cat}</span>
          </div>
        </div>
        <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1, gap: 14 }}>
          <h3 className="font-serif" style={{ fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.015em", color: "#fff" }}>{p.title}</h3>
          <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, lineHeight: 1.55, flex: 1 }} dangerouslySetInnerHTML={{__html: p.excerpt}}/>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "rgba(255,255,255,0.5)", paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
            <span>{p.author}</span>
            <span>{p.date} · {p.read}</span>
          </div>
        </div>
      </TiltCard>
    </a>
  );
}

function JournalApp() {
  const t = useSiteTweaks(TWEAK_DEFAULTS_JOURNAL);
  const accent = PALETTES[t.palette] || PALETTES.aurora;
  const [cat, setCat] = useState("All");
  const cats = ["All", "Essay", "Craft", "Growth", "Engineering", "AI", "Studio"];

  const featured = POSTS.find(p => p.featured);
  const rest = POSTS.filter(p => !p.featured);
  const visible = cat === "All" ? rest : rest.filter(p => p.cat === cat);

  return (
    <SiteChrome accent={accent} t={t}>
      <PageHero
        accent={accent}
        eyebrow="Journal"
        title="Notes from the"
        italic="studio"
        suffix="floor."
        sub="A monthly note on what we shipped, what we learned and what we're reading. Essays, working notes, the occasional rant."
      />

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container">
          <Reveal><Featured p={featured} accent={accent}/></Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 60 }}>
        <div className="container">
          <Reveal>
            <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
              <div>
                <span className="kicker"><span className="dot"/> All posts · {visible.length}</span>
              </div>
              <div className="liquid-glass" style={{ borderRadius: 999, padding: 6, display: "flex", gap: 4, flexWrap: "wrap" }}>
                {cats.map(c => (
                  <button key={c} onClick={()=>setCat(c)} style={{
                    padding: "8px 14px", borderRadius: 999,
                    background: cat === c ? "#fff" : "transparent",
                    color: cat === c ? "#07070a" : "rgba(255,255,255,0.78)",
                    border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500,
                    transition: "all .25s", fontFamily: "inherit"
                  }}>{c}</button>
                ))}
              </div>
            </div>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }}>
            {visible.map((p, i) => (
              <Reveal key={p.id} delay={i*60}>
                <PostCard p={p} accent={accent}/>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 60 }}>
        <div className="container">
          <Reveal>
            <div className="liquid-glass-strong" style={{ borderRadius: 28, padding: "60px 48px", textAlign: "center", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0,
                background: `radial-gradient(ellipse at 30% 0%, ${accent[1]}22, transparent 60%), radial-gradient(ellipse at 80% 100%, ${accent[2]}22, transparent 60%)`,
              }}/>
              <div style={{ position: "relative", zIndex: 1 }}>
                <div className="font-mono" style={{ color: "rgba(255,255,255,0.5)", fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 18 }}>Newsletter</div>
                <h3 className="font-serif" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 16, maxWidth: 720, margin: "0 auto 16px" }}>
                  One short note a month. <span className="italic-serif" style={{ color: "rgba(255,255,255,0.55)" }}>No fluff.</span>
                </h3>
                <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 16, lineHeight: 1.6, marginBottom: 28, maxWidth: 520, margin: "0 auto 28px" }}>
                  Selected work, what we learned, and the occasional studio essay.
                  Unsubscribe in one click.
                </p>
                <form onSubmit={e=>e.preventDefault()} className="liquid-glass" style={{
                  borderRadius: 999, padding: "5px 5px 5px 22px",
                  display: "flex", alignItems: "center", gap: 8, maxWidth: 460, margin: "0 auto"
                }}>
                  <input className="input-bare" placeholder="your@email" style={{ fontSize: 15 }}/>
                  <button type="submit" className="btn-primary" style={{ padding: "10px 18px" }}>Subscribe <I.Arrow size={14} stroke={2.2}/></button>
                </form>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </SiteChrome>
  );
}

const journalRoot = ReactDOM.createRoot(document.getElementById("root"));
journalRoot.render(<JournalApp/>);