// sections-end.jsx — The Journal, Closing CTA, Footer

// Format "2026-05-01" → "May, 2026"
const journalRowDate = (iso) => {
  const d = new Date(iso + "T12:00:00");
  return d.toLocaleDateString("en-US", { month: "short", year: "numeric" }).replace(" ", ", ");
};

// The feature + list pull from journal-data.js (the CMS layer) so the
// homepage always shows the real article titles, bylines, and decks.
const journalContent = () => {
  const articles = (window.JOURNAL_ARTICLES || []).filter(a => a.status === "published");
  const [featured, ...rest] = articles;
  const feature = featured ? {
    slug:   featured.slug,
    byline: [featured.category, journalRowDate(featured.publishDate), featured.readTime],
    title:  featured.title.toLowerCase() + ".",
    dek:    featured.deck,
    image:  featured.featuredImage,
  } : null;
  const rows = rest.slice(0, 4).map(a => ({
    n: a.id, slug: a.slug, title: a.title, date: journalRowDate(a.publishDate),
  }));
  return { feature, rows };
};

const KayaJournal = () => {
  const { feature: JOURNAL_FEATURE, rows: JOURNAL_ROWS } = journalContent();
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    const val = email.trim();
    if (!val) return;
    const subscribeUrl = (window.KAYA_BEEHIIV || {}).subscribeUrl;
    window.open(`${subscribeUrl}?email=${encodeURIComponent(val)}`, "_blank", "noopener,noreferrer");
    setDone(true);
  };

  return (
    <section className="section section--white" id="journal" data-screen-label="05 Journal">
      <div className="section__inner">
        <KayaReveal as="div" className="journal-header">
          <h2>
            <span className="eyebrow eyebrow--rust" style={{display:"block", marginBottom: "28px"}}>— 02 · The Journal</span>
            An editorial dispatch on design — <em>read slowly.</em>
          </h2>
          <a className="btn-quiet btn-quiet--burgundy" href="/journal">
            Read the Journal
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="7" y1="17" x2="17" y2="7"/><polyline points="9 7 17 7 17 15"/>
            </svg>
          </a>
        </KayaReveal>

        <div className="journal-grid">
          {JOURNAL_FEATURE && (
          <KayaReveal as="a" className="journal-feature" href={`/journal/${JOURNAL_FEATURE.slug}`} style={{textDecoration:"none", color:"inherit", borderBottom:0}}>
            <div className="journal-feature__media">
              <img src={JOURNAL_FEATURE.image} alt="" />
            </div>
            <div className="journal-feature__meta">
              <div className="journal-feature__byline">
                {JOURNAL_FEATURE.byline.map((b, i) => <span key={i}>{b}</span>)}
              </div>
              <h3 className="journal-feature__title">{JOURNAL_FEATURE.title}</h3>
              <p className="journal-feature__dek">{JOURNAL_FEATURE.dek}</p>
            </div>
          </KayaReveal>
          )}

          <KayaReveal as="div" className="journal-list" delay={180}>
            {JOURNAL_ROWS.map((r, i) => (
              <a key={r.n} className="journal-row" href={`/journal/${r.slug}`} style={{textDecoration:"none", color:"inherit", borderBottom:0}}>
                <span className="journal-row__n">{r.n}</span>
                <span className="journal-row__title">{r.title}</span>
                <span className="journal-row__date">{r.date}</span>
              </a>
            ))}
          </KayaReveal>
        </div>

        <KayaReveal as="div" className="journal-newsletter" delay={120}>
          <p className="journal-newsletter__lede">
            New articles arrive <em>weekly</em>, on a Wednesday, somewhere in the morning.
          </p>
          {done ? (
            <div className="journal-form__done">— Thank you. Welcome in.</div>
          ) : (
            <form className="journal-form" onSubmit={submit}>
              <div className="journal-form__row">
                <input
                  type="email"
                  placeholder="your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  aria-label="Email address"
                />
                <button type="submit">
                  Subscribe
                  <svg width="14" height="10" viewBox="0 0 24 14" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="0" y1="7" x2="22" y2="7"/><polyline points="16 1 22 7 16 13"/>
                  </svg>
                </button>
              </div>
              <span className="journal-form__note">No noise. One letter, once a week.</span>
            </form>
          )}
        </KayaReveal>
      </div>
    </section>
  );
};

// ---------- Closing / Quiet CTA ----------
const KayaClosing = () => (
  <section className="closing" id="contact" data-screen-label="06 Closing">
    <KayaReveal as="div" className="closing__rule" />
    <KayaReveal as="span" className="closing__eyebrow" delay={120}>— An invitation</KayaReveal>
    <KayaReveal as="h2" className="closing__title" delay={200}>
      Step inside. <em>This is <img className="closing__logo" src="assets/logos/Kaya - BURGANDY No Tagline Logo REC.png" alt="Kaya" />.</em>
    </KayaReveal>
    <KayaReveal as="p" className="closing__sub" delay={320}>
      You believe in more than surfaces — so do we. Kaya is for stories
      about people, spaces, and the feeling that happens between them.
      For commissions, collaborations, or a quiet conversation about what
      makes a space meaningful, write to us. We read everything, slowly.
    </KayaReveal>
    <KayaReveal as="div" className="closing__contact" delay={420}>
      <a className="closing__email" href="mailto:hello@refinedbykaya.com">hello@refinedbykaya.com</a>
    </KayaReveal>
  </section>
);

// ---------- Footer ----------
// basePath: pass "/" on non-homepage pages so internal
// hash links correctly navigate back to the homepage sections.
const KayaFooter = ({ basePath = "" }) => {
  const h = (id) => basePath ? `${basePath}#${id}` : `#${id}`;
  return (
  <footer className="foot">
    <div className="foot__inner">
      <div className="foot__top">
        <div className="foot__brand">
          <div className="foot__tagline"><span className="hl">refined, not timid.</span></div>
          <p className="foot__about">
            Kaya is a collective of storytellers, designers, and image-makers
            who believe great design deserves to be experienced — not just seen.
          </p>
        </div>
        <div className="foot__col">
          <h4>Index</h4>
          <a href={h("home")}>Home</a>
          <a href="/ethos">Our Ethos</a>
          <a href="/refined">Refined</a>
          <a href="/journal">The Journal</a>
          <a href={h("contact")}>Contact</a>
        </div>
        <div className="foot__col">
          <h4>Watch &amp; Read</h4>
          <a href="/refined">Refined — the series</a>
          <a href="/journal">The Journal</a>
          <a href="/journal">Subscribe</a>
          <a href="https://youtube.com/@kaya" target="_blank" rel="noopener">YouTube</a>
        </div>
        <div className="foot__col">
          <h4>Elsewhere</h4>
          <a href="#">Instagram</a>
          <a href="mailto:hello@refinedbykaya.com">hello@refinedbykaya.com</a>
        </div>
      </div>
      <div className="foot__bottom">
        <span>© Kaya 2026 · A cinematic journal</span>
        <a href="#">↑ to the top</a>
      </div>
    </div>
  </footer>
  );
};

window.KayaJournal = KayaJournal;
window.KayaClosing = KayaClosing;
window.KayaFooter = KayaFooter;