// 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> Platform</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={{ fontSize: 44, 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 }}>
                <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/aviation" onClick={(e) => { e.preventDefault(); onNavigate("/platform/aviation"); }} className="btn compact">
                  Continue ↓ <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." },
  ];

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

  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}`;
  };

  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)" }}>
          {items.map((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>
          ))}
        </div>
      </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); }
        @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" 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>
    </section>
  );
}

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