/* global React, PFGlyph, PF_HOME */
/* Field Notes — current research + studio writing. Header/Footer from homepage.jsx + sections.jsx. */
const { FIELD_NOTES: FN_WRITING } = window.PF_HOME;

/* ============================================================
   RESEARCH STREAMS
   ============================================================ */
const RESEARCH = [
  {
    theme: "Migration & food systems", ink: "bloom", glyph: "dots",
    status: "Active research", horizon: "2026 – 2036",
    bg: "assets/research-diaspora-food.jpg",
    title: "Diaspora Food Futures",
    abstract: "Plural Futures is support Mycelium Gastronomy Network's foresight inquiry into how diaspora movement, human mobility, and shifting cultural food practices are reshaping demand and supply patterns globally often well before formal suppliers respond. As of April, a practitioner network of 25+ people were interviwed together across five continents — from Singapore's wet markets to the kitchens of Quito, from Filipino diaspora networks in Dubai to Mexican supplier ecosystems in Mexico City — translating field signals into concrete strategic questions for corporate food teams.",
    signals: ["Migration", "Food system", "Food trends"]
  },
  {
    theme: "INVESTING & AGRI-TECH ECOSYTEMS", ink: "sky", glyph: "branching",
    bg: "https://images.unsplash.com/photo-1652211955967-99c892925469?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "In development", horizon: "2026 –",
    href: "field-note-agrifood.html",
    title: "Beyond Due Diligence: Agritech & Foresight-Integrated Diligence",
    abstract: <>Agritech has had a rough ride - from the alternative-protein bust to the catastrophic implosion of Indonesia's unicorn startup-up eFisher. Traditional firm-centric diligence is simply not fit-for-purpose in agritech. We propose <b>Foresight-Integrated Diligence (FID)</b>, an approach that incorporates the complexity of the agricultural system to create a agritech-fit approach for due diligence.</>,
    signals: ["AGRITECH START-UPS", "INVESTMENT STRATEGY", "ECOSYTEM ANALYSIS"]
  }
];

/* ============================================================
   HERO — compact chapter opener
   ============================================================ */
const fnHero = {
  wrap: { background: "var(--paper)", borderBottom: "1px solid var(--line)", padding: "clamp(48px, 7vw, 104px) var(--gutter) clamp(40px, 5vw, 72px)", position: "relative", overflow: "hidden" },
  inner: { maxWidth: "var(--container)", margin: "0 auto", position: "relative", zIndex: 1 },
  strip: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, paddingBottom: 20, borderBottom: "1px solid var(--line)", marginBottom: "clamp(34px, 5vw, 60px)", flexWrap: "wrap" },
  crumb: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: "0.04em" },
  crumbHome: { color: "var(--ink-2)", textDecoration: "none", borderBottom: "1px solid var(--line-2)" },
  pageMark: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" },
  comp: { display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: "clamp(28px, 5vw, 72px)", alignItems: "end" },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(44px, 7vw, 104px)", lineHeight: 0.94, letterSpacing: "-0.03em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  titleEm: { color: "var(--accent-deep)" },
  lede: { fontFamily: "var(--font-body)", fontSize: "clamp(17px, 1.5vw, 21px)", lineHeight: 1.55, color: "var(--ink)", margin: 0, textWrap: "pretty" },
  ledeEm: { fontStyle: "italic", color: "var(--ink-2)" }
};

function FNHero() {
  return (
    <section style={fnHero.wrap} data-ink="bloom" data-screen-label="Field Notes Hero">
      <div className="pf-motif pf-motif--dots pf-motif--fade-r" data-ink="bloom" style={{ opacity: 0.09 }}></div>
      <div style={fnHero.inner}>
        <div style={fnHero.strip}>
          <div style={fnHero.crumb}>
            <a href="index.html" style={fnHero.crumbHome}>Plural Futures</a>
            <span style={{ margin: "0 10px", color: "var(--ink-3)" }}>/</span>
            <span style={{ color: "var(--ink)" }}>Field notes</span>
          </div>
          <div style={fnHero.pageMark}>Research in progress · updated seasonally</div>
        </div>
        <div style={fnHero.comp} className="pf-collapse-2">
          <div>
            <span className="eyebrow" style={{ display: "block", marginBottom: 22 }}>From the studio</span>
            <h1 style={fnHero.title}>Field <span style={fnHero.titleEm}>notes.</span></h1>
          </div>
          <p style={fnHero.lede}>
            What we are reading, watching, and working on — the research still in motion, shared while the questions are <span style={fnHero.ledeEm}>still unstable</span>.
          </p>
        </div>
      </div>
    </section>
  );
}
window.FNHero = FNHero;

/* ============================================================
   CURRENT RESEARCH — stacked split cards
   ============================================================ */
const fnCar = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  list: { display: "flex", flexDirection: "column", gap: "clamp(24px, 3vw, 40px)" },
  card: { border: "1px solid var(--line)", borderRadius: "var(--radius)", overflow: "hidden", background: "var(--surface)", display: "grid", gridTemplateColumns: "minmax(240px, 340px) 1fr" },

  left: { position: "relative", overflow: "hidden", background: "var(--accent-wash)", padding: "clamp(26px, 2.6vw, 36px)", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 40, minHeight: 300, borderRight: "1px solid var(--line)" },
  leftTop: { display: "flex", flexDirection: "column", gap: 20, position: "relative", zIndex: 1 },
  theme: { fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent-deep)", margin: 0, lineHeight: 1.4 },
  glyphBox: { width: 74, height: 74, borderRadius: "var(--r-sm)", background: "var(--paper)", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" },
  leftBottom: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 4, paddingTop: 18, borderTop: "1px solid var(--line)" },
  metaLabel: { fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)" },
  metaVal: { fontFamily: "var(--font-body)", fontSize: 17, color: "var(--ink)", margin: 0 },

  right: { padding: "clamp(28px, 3vw, 44px)", display: "flex", flexDirection: "column", gap: 18 },
  statusRow: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" },
  title: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(26px, 2.9vw, 40px)", lineHeight: 1.06, letterSpacing: "-0.025em", color: "var(--ink)", margin: "4px 0 0", textWrap: "balance" },
  abstract: { fontFamily: "var(--font-body)", fontSize: "clamp(16px, 1.2vw, 18px)", lineHeight: 1.62, color: "var(--ink-2)", margin: 0, maxWidth: "60ch" },
  signals: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: "auto", paddingTop: 12 }
};

function ResearchCard({ r }) {
  const leftStyle = r.bg
    ? { ...fnCar.left, backgroundImage: `linear-gradient(180deg, rgba(28,18,15,0.48), rgba(28,18,15,0.80)), url("${r.bg}")`, backgroundSize: "cover", backgroundPosition: "center", borderRight: "none" }
    : fnCar.left;
  return (
    <article className="pf-card" data-ink={r.ink} style={fnCar.card}>
      <div style={leftStyle}>
        <div className="pf-motif pf-motif--dots pf-motif--fade-r" style={{ opacity: r.bg ? 0.26 : 0.14 }}></div>
        <div style={fnCar.leftTop}>
          <p style={r.bg ? { ...fnCar.theme, color: "#FBF7F1" } : fnCar.theme}>{r.theme}</p>
          <span style={r.bg ? { ...fnCar.glyphBox, background: "rgba(251,247,241,0.18)", color: "#FBF7F1" } : fnCar.glyphBox}><PFGlyph name={r.glyph} size={44} /></span>
        </div>
        <div style={r.bg ? { ...fnCar.leftBottom, borderTopColor: "rgba(251,247,241,0.32)" } : fnCar.leftBottom}>
          <span style={r.bg ? { ...fnCar.metaLabel, color: "#FBF7F1", opacity: 0.85 } : fnCar.metaLabel}>Horizon</span>
          <p style={r.bg ? { ...fnCar.metaVal, color: "#FBF7F1" } : fnCar.metaVal}>{r.horizon}</p>
        </div>
      </div>
      <div style={fnCar.right}>
        <div style={fnCar.statusRow}>
          <span className="pf-tag pf-tag--accent">{r.status}</span>
        </div>
        <h3 style={fnCar.title}>{r.href ? <a href={r.href} className="fn-card-link">{r.title}</a> : r.title}</h3>
        <p style={fnCar.abstract}>{r.abstract}</p>
        <div style={fnCar.signals}>
          {r.signals.map((s) => <span key={s} className="pf-tag">{s}</span>)}
        </div>
      </div>
    </article>
  );
}

function FNResearch() {
  return (
    <section className="pf-section pf-bg-1" data-screen-label="Current Research">
      <div style={fnCar.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(36px, 5vw, 56px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Current research</div>
            <h2 className="pf-section-title">What we're working on.</h2>
          </div>
          <p className="pf-section-sub">A small number of inquiries, carried at once. Some become client work; some stay open questions.</p>
        </div>
        <div style={fnCar.list}>
          {RESEARCH.map((r) => <ResearchCard key={r.title} r={r} />)}
        </div>
      </div>
    </section>
  );
}
window.FNResearch = FNResearch;

/* ============================================================
   WRITING — the studio's shorter notes (reuses homepage data)
   ============================================================ */
const fnWrite = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  list: { borderTop: "var(--stroke-bold) solid var(--ink)" },
  row: { display: "grid", gridTemplateColumns: "150px 1fr auto", gap: "clamp(16px, 3vw, 48px)", alignItems: "baseline", padding: "clamp(22px, 2.4vw, 32px) 0", borderBottom: "1px solid var(--line)", textDecoration: "none", color: "inherit" },
  date: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em" },
  title: { fontFamily: "var(--font-body)", fontWeight: 500, fontSize: "clamp(20px, 1.9vw, 27px)", lineHeight: 1.2, color: "var(--ink)", margin: 0, textWrap: "pretty" },
  read: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--accent-deep)", whiteSpace: "nowrap", display: "inline-flex", alignItems: "center", gap: 8 }
};

const FN_ARTICLE_LINKS = {
  "Aging Japan is not a cautionary tale. It is a syllabus.": "field-note-aging-japan.html"
};

function FNWriting() {
  return (
    <section className="pf-section pf-bg-2" id="writing" data-ink="loam" data-screen-label="Studio Writing">
      <div style={fnWrite.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(32px, 4vw, 48px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Latest field notes</div>
            <h2 className="pf-section-title">From the studio writing.</h2>
          </div>
          <p className="pf-section-sub">Shorter pieces — arguments, provocations, and things we cannot stop thinking about.</p>
        </div>
        <div style={fnWrite.list}>
          {FN_WRITING.map((n) => {
            const href = FN_ARTICLE_LINKS[n.title];
            return (
            <a key={n.title} href={href || "#"} onClick={href ? undefined : (e) => e.preventDefault()} data-ink={n.ink} style={fnWrite.row} className="pf-writing-row">
              <span style={fnWrite.date}>{n.date} · {n.sector}</span>
              <h3 style={fnWrite.title} dangerouslySetInnerHTML={{ __html: n.title }}></h3>
              <span style={fnWrite.read}>{href ? "Read" : "Soon"} <span aria-hidden>→</span></span>
            </a>
          );})}
        </div>
      </div>
    </section>
  );
}
window.FNWriting = FNWriting;