/* ============================================================
   STREAM WITH LIEN — Lien's Letters & Love Letters
   ============================================================ */

/* ---------------- LIEN'S LETTERS ---------------- */
function LettersPage({ d, ui, social }) {
  const ref = useReveal();
  const [feat, ...rest] = d.posts;
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section letters" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          {/* Featured */}
          <article className="feat sticker reveal">
            <div className="feat__media">
              <Ph label="brief · uitgelicht" h={340} r={16} />
              <span className="feat__flag">{d.featured}</span>
            </div>
            <div className="feat__body">
              <div className="flex" style={{ gap: 10, alignItems: "center", marginBottom: 14 }}>
                <span className="chip">{feat.tag}</span>
                <span className="muted" style={{ fontSize: 14, fontWeight: 600 }}>{feat.date} · {feat.read}</span>
              </div>
              <h2 className="feat__t">{feat.t}</h2>
              <p className="feat__x soft">{feat.excerpt}</p>
              <div className="feat__sign">{d.signoff}</div>
              <Btn variant="ink" icon="arrow">{ui.readMore}</Btn>
            </div>
          </article>

          {/* Grid */}
          <div className="letter-grid">
            {rest.map((p, i) => (
              <article className="letter sticker reveal" key={i} style={{ transitionDelay: (i * 60) + "ms" }}>
                <Ph label="brief" h={150} r={12} className="letter__ph" />
                <div className="letter__meta">
                  <span className="chip">{p.tag}</span>
                  <span className="muted" style={{ fontSize: 13, fontWeight: 600 }}>{p.read}</span>
                </div>
                <h3 className="letter__t">{p.t}</h3>
                <p className="letter__x soft">{p.excerpt}</p>
                <div className="letter__foot">
                  <span className="muted" style={{ fontSize: 13, fontWeight: 600 }}>{p.date}</span>
                  <span className="letter__go">{ui.readMore}<Icon name="arrow" size={16} /></span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------------- LOVE LETTERS ---------------- */
function LoveLettersPage({ d, ui, social }) {
  const ref = useReveal();
  const rot = [-1.5, 1.2, -0.8, 1.6, -1.2, 0.9];
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section loveletters" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="ll-grid">
            {d.cards.map((c, i) => (
              <article className="ll-card reveal" key={i}
                       style={{ transform: `rotate(${rot[i % rot.length]}deg)`, transitionDelay: (i * 55) + "ms" }}>
                <span className="ll-heart"><Icon name="heart" size={18} /></span>
                <div className="ll-to">{c.to}</div>
                <p className="ll-body">{c.body}</p>
                <div className="ll-sign">— Lien</div>
              </article>
            ))}
          </div>

          <div className="ll-cta sticker reveal">
            <div>
              <h2 className="ll-cta__h">{d.cta}</h2>
              <p className="soft" style={{ fontSize: 16, margin: 0 }}>{d.ctaNote}</p>
            </div>
            <Btn variant="primary" size="lg" iconLeft="discord" href={social.discord}>Discord</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { LettersPage, LoveLettersPage });