// Story.jsx — mission + ingredient story + founder image + stats
function Story() {
  const { T } = useLang();
  const S = T.story;
  return (
    <section id="story" style={{ background: "var(--paper-2)", padding: "92px 0 96px" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center" }}>
        <Reveal className="nm-story-copy">
          <Eyebrow>{S.eyebrow}</Eyebrow>
          <h2 style={{ font: "var(--t-h1)", margin: "12px 0 0", letterSpacing: "-.015em",
            textTransform: "uppercase", whiteSpace: "pre-line" }}>
            {S.heading}
          </h2>
          <p style={{ font: "var(--t-lead)", color: "var(--fg2)", marginTop: 18, maxWidth: 520 }}>
            {S.body1}
          </p>
          <p style={{ font: "var(--t-body)", color: "var(--fg2)", marginTop: 14, maxWidth: 520 }}>
            {S.body2}
          </p>
          <div style={{ display: "flex", gap: 22, marginTop: 30, flexWrap: "wrap" }}>
            {S.stats.map(([k, v]) => (
              <div key={k} style={{ flex: "1 1 130px" }}>
                <div style={{ font: "var(--t-h3)", color: "var(--ink)", letterSpacing: "-.01em" }}>{k}</div>
                <div style={{ font: "var(--t-small)", color: "var(--fg2)", marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120} className="nm-story-media">
          <div style={{ position: "relative", borderRadius: 18, overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
            <img src={IMG.foundersGarden} alt="Founders Dean McClumpha & Ton Gerritsen"
              style={{ width: "100%", height: 480, objectFit: "cover" }} />
            <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "40px 20px 18px",
              background: "linear-gradient(180deg, transparent, rgba(20,16,12,.82))", color: "var(--paper)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em", color: "#C9B9D0" }}>
                DEAN McCLUMPHA · TON GERRITSEN
              </div>
              <div style={{ fontWeight: 700, fontSize: 15, marginTop: 3 }}>{S.foundersCaption}</div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width:860px){
        #story .container{ grid-template-columns:1fr !important; gap:34px !important; }
        .nm-story-media img{ height:360px !important; }
      }`}</style>
    </section>
  );
}
window.Story = Story;