// 彤冠茶莊 website — Journal
const { Tag: JTag } = window.TongguanTeaDesignSystem_a1a7a1;

function JournalPage({ t, lang, journal, go }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const [lead, ...rest] = journal;
  return (
    <main lang={lang}>
      <section style={{ background: "var(--surface-sunken)", paddingTop: "var(--space-8)", paddingBottom: "var(--space-7)" }}>
        <div className="tg-container tg-container--wide">
          <span className="tg-eyebrow" style={{ color: "var(--text-accent)" }}>{t.journalSec.kicker}</span>
          <h1 className="tg-display" style={{ fontSize: "clamp(2.2rem, 4.5vw, 3.4rem)", margin: "14px 0 0" }}>{t.journalSec.title}</h1>
        </div>
      </section>

      <div className="tg-container tg-container--wide" style={{ paddingTop: "var(--space-8)", paddingBottom: "var(--space-10)" }}>
        {/* lead post */}
        <article style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "clamp(24px, 4vw, 56px)", alignItems: "center", marginBottom: "var(--space-9)" }} className="tg-featured">
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "3/2", boxShadow: "var(--shadow-md)" }}>
            <img src={lead.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
              <JTag tone="seal">{lead.cat[lang]}</JTag>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-muted)" }}>{lead.date}</span>
            </div>
            <h2 className="tg-display" style={{ fontSize: "clamp(1.6rem, 3vw, 2.4rem)", margin: "0 0 16px" }}>{lead.title[lang]}</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.8, color: "var(--text-secondary)", margin: 0 }}>{lead.excerpt[lang]}</p>
          </div>
        </article>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "44px 40px" }} className="tg-journal-grid-2">
          {rest.map((j) => (
            <article key={j.id} style={{ display: "grid", gridTemplateColumns: "160px 1fr", gap: 22, alignItems: "start" }} className="tg-journal-row">
              <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", aspectRatio: "4/5" }}>
                <img src={j.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div>
                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 10 }}>
                  <span className="tg-eyebrow" style={{ color: "var(--text-seal)" }}>{j.cat[lang]}</span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>{j.date}</span>
                </div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 20, lineHeight: 1.3, margin: "0 0 8px" }}>{j.title[lang]}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.65, color: "var(--text-secondary)", margin: 0 }}>{j.excerpt[lang]}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </main>
  );
}
window.JournalPage = JournalPage;