// HomeBottom.jsx — products showcase, statement, news, contact CTA.
// (Same as your file — only NewsBlock was changed to link to /entry/<slug> pages
//  whose content lives in content/entries.json.)

function PlatformBlock({ onNavigate }) {
  return (
    <section className="section" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 64 }} className="pf-head">
          <div className="idx"><span className="num">03 /</span>Our Platforms</div>
          <div>
            <h2 className="h1" style={{ marginTop: 0 }}>Built to be fielded.<br/>Not demoed.</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="pf-grid">
          <article className="product-card">
            <div className="media">
              <MediaImg src="media/prod-asd.jpg" alt="Aviation Status Dashboard" />
            </div>
            <div className="body">
              <div className="meta">
                <span>FIELDED</span>
                <span><b>LIVE</b> &nbsp; avnstatus.com ↗</span>
              </div>
              <h4 className="h2" style={{ margin: 0 }}>Aviation Status Dashboard</h4>
              <p className="mute" style={{ fontSize: 15 }}>
                Field-proven aviation readiness and workflow automation. Designed for commanders, staff, and maintainers. Realtime visibility across the fleet.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
                <a href="#/platform/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }} className="btn compact">
                  Read the brief <span className="arrow">→</span>
                </a>
                <a href="https://www.avnstatus.com" target="_blank" rel="noopener" className="btn compact ghost">
                  Live deployment <span className="arrow">↗</span>
                </a>
              </div>
            </div>
          </article>

          <article className="product-card">
            <div className="media">
              <MediaImg src="media/prod-aviationmax.jpg" alt="AviationMax" />
            </div>
            <div className="body">
              <div className="meta">
                <span>NEXT STAGE</span>
                <span><b>2026</b></span>
              </div>
              <h3 className="h2" style={{ margin: 0 }}>AviationMax</h3>
              <p className="mute" style={{ fontSize: 15 }}>
                From strong local workflow to a federated platform. AviationMax is the next stage of the Lulius aviation effort — built for multi-unit operations.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
                <a href="#/platform/aviationmax" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviationmax"); }} className="btn compact">
                  Inside AviationMax <span className="arrow">→</span>
                </a>
              </div>
            </div>
          </article>
        </div>

        {/* small inline product mention */}
        <div style={{
          marginTop: 24, padding: "20px 24px",
          border: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <div>
            <span className="eyebrow">Adjacent · </span>
            <span style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18 }}>SpringResource</span>
            <span className="mute" style={{ marginLeft: 12, fontSize: 14 }}>— internal reporting tooling for distributed teams.</span>
          </div>
          <a href="https://www.springresource.com" target="_blank" rel="noopener" className="eyebrow" style={{ color: "var(--paper)" }}>
            springresource.com →
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .pf-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .pf-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Statement() {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="st-grid">
          <div className="idx"><span className="num">04 /</span> Posture</div>
          <div>
            <p className="pull">
              We are a <span className="accent">small, veteran-owned</span> firm with a deep bench of operators and engineers. The U.S. Army puts our software in the field. A four-star general sits on our board. <span className="mute">Our work has to hold up — because the work it supports does too.</span>
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28, marginTop: 80 }} className="stats">
              <div className="stat">
                <div className="n">12<span className="u">+ YR</span></div>
                <div className="lbl">Continuous operations</div>
              </div>
              <div className="stat">
                <div className="n">100<span className="u">%</span></div>
                <div className="lbl">Veteran-operated</div>
              </div>
              <div className="stat">
                <div className="n">04<span className="u">★</span></div>
                <div className="lbl">General on board</div>
              </div>
              <div className="stat">
                <div className="n">RT<span className="u">.</span></div>
                <div className="lbl">Realtime fielding</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .st-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// NewsBlock now reads dispatch entries from content/entries.json so titles,
// dates, and links stay in sync with the EntryPage. Falls back to the
// hardcoded list if the feed can't load (e.g. file:// during dev).
function NewsBlock({ onNavigate }) {
  const FALLBACK = [
    { slug: "aviationmax-2026",      dateLabel: "14 FEB 26", tag: "Platform",    title: "AviationMax",                                          subtitle: "The next stage of the Lulius aviation effort — local workflow becomes federated platform." },
    { slug: "asd-fifth-year",        dateLabel: "01 JAN 26", tag: "Platform",    title: "Aviation Status Dashboard",                            subtitle: "Field-proven readiness and workflow automation for U.S. Army aviation." },
    { slug: "ferguson-ncet-2023",    dateLabel: "22 MAY 23", tag: "Recognition", title: "Rich Ferguson — NCET Technologist of the Year",        subtitle: "Recognized by the Nevada Center for Entrepreneurship & Technology." },
    { slug: "thurman-joins-board",   dateLabel: "13 FEB 23", tag: "Company",     title: "Gen. James D. Thurman joins the Lulius board",         subtitle: "Combat veteran, experienced aviator. Joins a board of decorated veterans." },
  ];

  // How many dispatches to show before the "More articles" expander kicks in.
  const INITIAL = 4;

  const [items, setItems] = React.useState(FALLBACK);
  const [expanded, setExpanded] = React.useState(false);

  React.useEffect(() => {
    if (window.LuliusContent) {
      window.LuliusContent.byKind("dispatch").then((es) => {
        if (es && es.length) setItems(es);
      }).catch(() => {});
    }
  }, []);

  const handleClick = (slug) => (e) => {
    e.preventDefault();
    if (onNavigate) onNavigate(`/entry/${slug}`);
    else window.location.hash = `/entry/${slug}`;
  };

  // Hide archived, newest first (by date; entries without a date sort last).
  const sorted = items
    .filter((it) => !it.archived)
    .sort((a, b) => String(b.date || "").localeCompare(String(a.date || "")));

  const hasMore = sorted.length > INITIAL;
  const visible = expanded ? sorted : sorted.slice(0, INITIAL);

  const Row = (it, i) => (
    <a key={it.slug || i}
      href={`#/entry/${it.slug}`}
      onClick={handleClick(it.slug)}
      className="news-row"
      style={{
        display: "grid",
        gridTemplateColumns: "120px 140px 1fr 60px",
        gap: 32,
        padding: "28px 0",
        borderBottom: "1px solid var(--line)",
        alignItems: "baseline",
      }}>
      <div className="eyebrow mute tabular">{it.dateLabel}</div>
      <div className="eyebrow accent-text">{it.tag}</div>
      <div>
        <div className="h3" style={{ marginBottom: 6 }}>{it.title}</div>
        <div className="mute" style={{ fontSize: 14 }}>{it.subtitle || it.lede}</div>
      </div>
      <div style={{ textAlign: "right", fontFamily: "var(--f-mono)", fontSize: 18, color: "var(--mute-2)" }}>→</div>
    </a>
  );

  return (
    <section className="section" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 56 }} className="nw-head">
          <div className="idx"><span className="num">05 /</span> Dispatch</div>
          <div>
            <h2 className="h1" style={{ marginTop: 0 }}>What's coming<br/>off the line.</h2>
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--line)" }}>
          {visible.map(Row)}
        </div>

        {hasMore && (
          <button
            type="button"
            onClick={() => setExpanded((v) => !v)}
            aria-expanded={expanded}
            className="news-more"
            style={{
              marginTop: 28,
              display: "inline-flex", alignItems: "center", gap: 10,
              background: "transparent",
              border: "1px solid var(--line-2)",
              color: "var(--paper)",
              padding: "14px 20px",
              fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".14em",
              textTransform: "uppercase",
              cursor: "pointer",
            }}>
            {expanded
              ? <>Show fewer <span aria-hidden="true">▲</span></>
              : <>More articles <span className="mute" style={{ letterSpacing: 0 }}>({sorted.length - INITIAL})</span> <span aria-hidden="true">▼</span></>}
          </button>
        )}
      </div>
      <style>{`
        .news-row { transition: padding-left .2s ease, background .2s ease; }
        .news-row:hover { padding-left: 16px !important; background: rgba(200,164,92,.04); }
        .news-more:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
        @media (max-width: 760px) {
          .nw-head { grid-template-columns: 1fr !important; gap: 16px !important; }
          .news-row { grid-template-columns: 1fr 1fr !important; row-gap: 8px; }
          .news-row > div:nth-child(3) { grid-column: 1 / -1; }
          .news-row > div:nth-child(4) { display: none; }
        }
      `}</style>
    </section>
  );
}

function ContactCTA({ onNavigate }) {
  return (
    <section style={{ borderTop: "1px solid var(--line)", padding: "clamp(80px, 10vw, 140px) 0", background: "var(--ink-2)" }}>
      <div className="wrap cta-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>OPEN FOR ENGAGEMENT</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)" }}>
            Have a requirement<br/>that has to <span className="accent-text">hold up?</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 20, alignItems: "flex-start" }}>
          <p className="lede mute">
            Lulius pursues engagements where deep technical experience and operational discipline move outcomes. Tell us about the problem.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }} className="btn">
              Open a file <span className="arrow">→</span>
            </a>
            <a href="mailto:info@luli.us" className="btn ghost">
              info@luli.us
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

window.PlatformBlock = PlatformBlock;
window.Statement = Statement;
window.NewsBlock = NewsBlock;
window.ContactCTA = ContactCTA;