/* global React, PFGlyph, PF_HOME */
const { PROVOCATIONS, LENSES, WORK, PARTNERS, FIELD_NOTES } = window.PF_HOME;

/* ============================================================
   SECTION HEAD helper
   ============================================================ */
function SectionHead({ overline, children, aside, ink }) {
  return (
    <div className="pf-headrow" style={{ marginBottom: "clamp(40px, 5vw, 64px)" }} data-ink={ink}>
      <div>
        <div className="pf-srule"></div>
        <div className="eyebrow" style={{ marginBottom: 18 }}>{overline}</div>
        <h2 className="pf-section-title">{children}</h2>
      </div>
      {aside}
    </div>);

}

/* ============================================================
   THE PROBLEM WE SOLVE — editorial, loam ink
   ============================================================ */
const prob = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", display: "grid", gridTemplateColumns: "0.6fr 1.4fr", gap: "clamp(40px, 6vw, 96px)", alignItems: "start", position: "relative", zIndex: 1 },
  side: { borderTop: "var(--stroke-bold) solid var(--ink)", paddingTop: 20 },
  overline: { fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--ink-2)", margin: 0 },
  meta: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", marginTop: 12, letterSpacing: "0.04em" },
  prose: { fontFamily: "var(--font-body)", fontSize: "clamp(22px, 2.3vw, 32px)", lineHeight: 1.4, color: "var(--ink)", margin: "0 0 32px", textWrap: "pretty" },
  proseLast: { marginBottom: 0 },
  drop: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(64px, 7vw, 104px)", float: "left", lineHeight: 0.74, marginRight: 16, marginTop: 10, color: "var(--accent-deep)", letterSpacing: "-0.02em" },
  emph: { color: "var(--accent-deep)", fontStyle: "italic" }
};

function ProblemSection() {
  return (
    <section className="pf-section pf-bg-2" data-ink="loam" data-screen-label="Problem" style={{ position: "relative", overflow: "hidden" }}>
      <div className="pf-motif pf-motif--dots pf-motif--fade-r" style={{ opacity: 0.08 }}></div>
      <div style={prob.inner}>
        <div style={prob.side}>
          <p style={prob.overline}>The problem we solve</p>
          <p style={prob.meta}></p>
        </div>
        <div>
          <p style={prob.prose}>
            <span style={prob.drop}>M</span>ost strategy is written for the world that already exists. By the time the assumptions are dry on the page they are three years out of date — and the disruption that mattered was the one nobody scheduled a meeting about.
          </p>
          <p style={prob.prose}>
            This is what strategy without foresight quietly costs you: a slow, expensive lurch from one surprise to the next, dressed up as <em style={prob.emph}>resilience</em>.
          </p>
          <p style={{ ...prob.prose, ...prob.proseLast }}>
            We work with organisations who have decided this is not an acceptable way to spend the next decade. We help you see the signals you have been trained to dismiss — and design with them, not around them.
          </p>
        </div>
      </div>
    </section>);

}
window.PFProblem = ProblemSection;

/* ============================================================
   THREE LENSES — per-ink sector cards
   ============================================================ */
const lens = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: { display: "flex", flexDirection: "column" },
  figRow: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 },
  num: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em" },
  glyphTile: { width: 60, height: 60, borderRadius: "var(--radius)", background: "var(--accent-wash)", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" },
  name: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, lineHeight: 1, letterSpacing: "-0.02em", color: "var(--ink)", margin: "4px 0 0" },
  question: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 20, lineHeight: 1.35, color: "var(--ink)", margin: 0, textWrap: "pretty", flex: 1 },
  more: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 18, borderTop: "1px solid var(--line)", marginTop: 4, color: "var(--ink-2)" }
};

function LensesSection() {
  return (
    <section className="pf-section pf-bg-1" id="how-we-work" data-screen-label="Three Lenses">
      <div style={lens.inner}>
        <SectionHead overline="Our three lenses"
        aside={<p className="pf-section-sub">We work at the intersection of the three systems that shape collective futures: the technologies we build, the food systems that sustain us on a living planet, and the governance through which we make decisions together</p>}>
          Where we look closely.
        </SectionHead>

        <div style={lens.grid} className="pf-collapse-3">
          {LENSES.map((l) =>
          <a key={l.name} href={`sectors-offerings.html#${l.id}`}
          className="pf-card pf-card--link" data-ink={l.ink}
          style={{ ...lens.card, padding: "clamp(24px,2.6vw,34px)", gap: 24 }}>
              <div style={lens.figRow}>
                <span style={lens.num}>{l.n}</span>
                <span style={lens.glyphTile}><PFGlyph name={l.glyph} size={34} /></span>
              </div>
              <h3 style={lens.name}>{l.name}</h3>
              <p style={lens.question}>{l.question}</p>
              <div style={lens.more}>
                <span>Sectors &amp; offerings</span>
                <span style={{ color: "var(--accent-deep)" }} aria-hidden>→</span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}
window.PFLenses = LensesSection;

/* ============================================================
   SELECTED WORK — per-ink case cards
   ============================================================ */
const work = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: { padding: "clamp(24px,2.6vw,32px)", gap: 16, minHeight: 380 },
  top: { display: "flex", alignItems: "center", justifyContent: "space-between" },
  numTxt: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em" },
  title3: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 23, lineHeight: 1.1, letterSpacing: "-0.015em", color: "var(--ink)", margin: "6px 0 4px", textWrap: "balance" },
  label: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ink-3)", marginBottom: 6 },
  body: { fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 },
  bodyEm: { fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.55, color: "var(--ink)", margin: 0, fontStyle: "italic" },
  divider: { height: 1, background: "var(--line)", margin: "4px 0" },
  more: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 18, borderTop: "1px solid var(--line)", marginTop: "auto", color: "var(--ink-2)" }
};

function SelectedWorkSection() {
  return (
    <section className="pf-section pf-bg-3" data-screen-label="Selected Work">
      <div style={work.inner}>
        <SectionHead overline="Selected work"
        aside={<a href="#" onClick={(e) => e.preventDefault()} className="pf-arrowlink">All case studies ↗</a>}>
          What we have actually done.
        </SectionHead>

        <div style={work.grid} className="pf-collapse-3">
          {WORK.map((w, i) =>
          <a key={w.title} href="#" onClick={(e) => e.preventDefault()}
          className="pf-card pf-card--link" data-ink={w.ink} style={work.card}>
              <div style={work.top}>
                <span style={work.numTxt}>CS · 0{i + 1}</span>
                <span className="pf-tag pf-tag--accent">{w.sector}</span>
              </div>
              <h3 style={work.title3}>{w.title}</h3>
              <div>
                <div style={work.label}>The challenge</div>
                <p style={work.body}>{w.challenge}</p>
              </div>
              <div style={work.divider}></div>
              <div>
                <div style={work.label}>So what</div>
                <p style={work.bodyEm}>{w.soWhat}</p>
              </div>
              <div style={work.more}>
                <span>Read case study</span>
                <span style={{ color: "var(--accent-deep)" }} aria-hidden>→</span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}
window.PFWork = SelectedWorkSection;

/* ============================================================
   PARTNERS
   ============================================================ */
const team = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 },
  card: { display: "grid", gridTemplateColumns: "150px 1fr", gap: 28, alignItems: "center", padding: 24 },
  portrait: { borderRadius: "var(--radius)", aspectRatio: "1 / 1", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--accent-wash)", position: "relative", overflow: "hidden" },
  initials: { fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 800, letterSpacing: "-0.03em", color: "var(--accent-deep)", margin: 0, lineHeight: 1 },
  pmark: { position: "absolute", left: 10, top: 8, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--accent-deep)", letterSpacing: "0.06em", opacity: 0.7 },
  role: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--accent-deep)", marginBottom: 8 },
  name: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, lineHeight: 1.05, letterSpacing: "-0.02em", color: "var(--ink)", margin: "0 0 12px" },
  bio: { fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }
};

function TeamSection() {
  return (
    <section className="pf-section pf-bg-1" data-screen-label="Team">
      <div style={team.inner}>
        <SectionHead overline="Who is behind this"
        aside={<a href="#" onClick={(e) => e.preventDefault()} className="pf-arrowlink">Meet the team ↗</a>}>
          Two partners. One network.
        </SectionHead>
        <div style={team.grid} className="pf-collapse-2">
          {PARTNERS.map((p, i) =>
          <div key={p.name} className="pf-card" data-ink={p.ink} style={team.card}>
              <div style={team.portrait}>
                <span style={team.pmark}>0{i + 1} · Portrait</span>
                <span style={team.initials}>{p.initials}</span>
              </div>
              <div>
                <div style={team.role}>{p.role}</div>
                <h3 style={team.name}>{p.name}</h3>
                <p style={team.bio}>{p.bio}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.PFTeam = TeamSection;

/* ============================================================
   FIELD NOTES
   ============================================================ */
const notes = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  item: { padding: "26px 26px 24px", display: "flex", flexDirection: "column", gap: 16 },
  meta: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 },
  date: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.04em" },
  noteTitle: { fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 21, lineHeight: 1.25, color: "var(--ink)", margin: 0, textWrap: "pretty" },
  read: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 8, color: "var(--accent-deep)" }
};

function FieldNotesSection() {
  return (
    <section className="pf-section pf-bg-2" id="writing" data-screen-label="Field Notes">
      <div style={notes.inner}>
        <SectionHead overline="Latest field notes"
        aside={<a href="#" onClick={(e) => e.preventDefault()} className="pf-arrowlink">All writing ↗</a>}>
          From the studio writing.
        </SectionHead>
        <div style={notes.grid} className="pf-collapse-3">
          {FIELD_NOTES.map((n) =>
          <a key={n.title} href="#" onClick={(e) => e.preventDefault()}
          className="pf-card pf-card--link" data-ink={n.ink} style={notes.item}>
              <div style={notes.meta}>
                <span style={notes.date}>{n.date}</span>
                <span className="pf-tag pf-tag--accent">{n.sector}</span>
              </div>
              <h4 style={notes.noteTitle} dangerouslySetInnerHTML={{ __html: n.title }}></h4>
              <span style={notes.read}>Read note <span aria-hidden>→</span></span>
            </a>
          )}
        </div>
      </div>
    </section>);

}
window.PFNotes = FieldNotesSection;

/* ============================================================
   REACH OUT — dark band, spectrum moment
   ============================================================ */
const reach = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(72px, 9vw, 128px) var(--gutter)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center", position: "relative", zIndex: 1 },
  ctaCol: { display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" },
  hello: { fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(251,247,241,0.6)", marginTop: 8, letterSpacing: "0.04em" },
  corner: { position: "absolute", right: "var(--gutter)", top: 28, fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(251,247,241,0.4)", letterSpacing: "0.1em", textTransform: "uppercase", zIndex: 1 }
};

function ReachOutSection() {
  return (
    <section className="pf-band" id="reach-out" data-screen-label="Reach Out">
      <div className="pf-motif pf-motif--rings pf-motif--fade-r" data-ink="ember" style={{ opacity: 0.14 }}></div>
      <div style={reach.corner}>§ 07 · Reach out</div>
      <div style={reach.inner} className="pf-collapse-2">
        <div>
          <div className="eyebrow" style={{ color: "var(--ember-soft)", marginBottom: 24 }}>Start the conversation</div>
          <h2 className="pf-band__display">
            Bring us the question you cannot <span className="grad-text">stop asking.</span>
          </h2>
          <p className="pf-band__sub" style={{ marginTop: 24, maxWidth: 460 }}>
            We take on a small number of engagements each year. The good ones usually begin with an email that is a little too long.
          </p>
        </div>
        <div style={reach.ctaCol}>
          <a href="mailto:hello@pluralfutures.com" className="btn btn--primary btn--on-ink btn--lg">hello@pluralfutures.com <span className="arr" aria-hidden>↗</span></a>
          <a href="lets-talk.html" className="btn btn--outline btn--on-ink btn--lg">Let's Talk</a>
          <div style={reach.hello}>Response within 3 working days.</div>
        </div>
      </div>
    </section>);

}
window.PFReachOut = ReachOutSection;

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="pf-footer" data-screen-label="Footer">
      <div className="pf-container">
        <div className="pf-footer__top">
          <div>
            <div className="pf-footer__word">Plural<br /><span className="grad-text">Futures</span></div>
            <p className="pf-footer__tag">A foresight studio for organisations willing to be changed by what they find.</p>
          </div>
          <div>
            <h5>Sectors</h5>
            <a className="pf-footer__link" href="sectors-offerings.html#agrifood">Agrifood</a>
            <a className="pf-footer__link" href="sectors-offerings.html#tech">Emerging Tech</a>
            <a className="pf-footer__link" href="sectors-offerings.html#governance">Governance</a>
            <a className="pf-footer__link" href="sectors-offerings.html#offerings">All offerings</a>
          </div>
          <div>
            <h5>Studio</h5>
            <a className="pf-footer__link" href="strategy-foresight.html">How we work</a>
            <a className="pf-footer__link" href="field-notes.html">Field Notes</a>
            <a className="pf-footer__link" href="about.html">About</a>
          </div>
          <div>
            <h5>Contact</h5>
            <a className="pf-footer__link" href="mailto:hello@pluralfutures.com">hello@pluralfutures.com</a>
            <a className="pf-footer__link" href="lets-talk.html">Let's Talk ↗</a>
            <a className="pf-footer__link" href="#" onClick={(e) => e.preventDefault()}>LinkedIn ↗</a>
          </div>
        </div>
        <div className="pf-footer__bottom">
          <div className="pf-footer__fine">© Plural Futures, part of the Mycelium Gastronomy Family </div>
          <div className="pf-footer__fine">Privacy · Imprint</div>
        </div>
      </div>
    </footer>);

}
window.PFFooter = Footer;