/* ============================================================
   IBC Labs — Pages (part 2): Methodologies, Concepts,
   Problem, Notes, Contact
   ============================================================ */

/* ---------- Methodologies ---------- */
function MethodologiesPage() {
  const { methodologies } = window.IBC;
  return (
    <div className="page">
      <div className="container">
        <PageHeader
          eyebrow="Methodologies"
          title="How the work is done."
          lead="The procedures behind our research, stated precisely enough to be reproduced and criticized."
        />
        {methodologies.map((m) => (
          <section className="section--tight" key={m.id}>
            <div className="sectionhead">
              <h2 className="heading">{m.name}</h2>
              <Link to={"research/" + m.paper} className="tlink sectionhead__link">Source paper <Arrow /></Link>
            </div>
            <Rule />
            <p className="lead" style={{ maxWidth: "62ch" }}>{m.summary}</p>
            <div className="methsteps">
              {m.steps.map((s, i) => (
                <div className="methstep" key={i}>
                  <div className="methstep__num">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="methstep__h">{s[0]}</div>
                    <p className="methstep__p">{s[1]}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>
      <Footer />
    </div>
  );
}

/* ---------- Concepts ---------- */
function ConceptsPage() {
  const [q, setQ] = useState("");
  const { concepts } = window.IBC;
  const norm = q.trim().toLowerCase();
  const shown = norm
    ? concepts.filter(
        (c) => c.term.toLowerCase().includes(norm) || c.def.toLowerCase().includes(norm)
      )
    : concepts;
  const jump = (term) => {
    const t = concepts.find((c) => c.term === term);
    if (t) { setQ(""); window.scrollTo({ top: 0, behavior: "smooth" }); }
  };
  return (
    <div className="page">
      <div className="container">
        <PageHeader
          eyebrow="Foundational Concepts"
          title="Foundational Concepts"
          lead="The vocabulary our research is built on. Each term is defined narrowly and cross-linked to the concepts it depends on."
        />
        <div className="search">
          <span className="search__icon">⌕</span>
          <input
            type="text"
            placeholder="Search concepts…"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <section className="section--tight" style={{ paddingTop: "var(--s3)" }}>
          <Rule thin />
          <div className="divider-list">
            {shown.length ? shown.map((c) => (
              <div className="concept" key={c.term}>
                <div className="concept__term">{c.term}</div>
                <p className="concept__def">{c.def}</p>
                <div className="concept__see">
                  See also{" "}
                  {c.see.map((s, i) => (
                    <span key={s}>
                      <a href="#" onClick={(e) => { e.preventDefault(); jump(s); }}>{s}</a>
                      {i < c.see.length - 1 ? ", " : ""}
                    </span>
                  ))}
                </div>
              </div>
            )) : (
              <p className="muted" style={{ padding: "var(--s4) 0" }}>No concepts match “{q}”.</p>
            )}
          </div>
        </section>
      </div>
      <Footer />
    </div>
  );
}

/* ---------- Problem ---------- */
function ProblemPage() {
  const { problemSections } = window.IBC;
  const audiences = ["Practitioners", "Students", "Executives", "The merely curious"];
  return (
    <div className="page">
      <div className="container">
        <section className="hero" style={{ paddingBottom: "var(--s4)" }}>
          <div className="eyebrow hero__eyebrow">A Problem Worth Considering</div>
          <h1 className="display" style={{ maxWidth: "16ch", marginBottom: "var(--s3)" }}>
            A problem worth considering.
          </h1>
          <div className="chips">
            {audiences.map((a) => <span className="chip" key={a}>{a}</span>)}
          </div>
          <p className="lead" style={{ maxWidth: "60ch", marginTop: "var(--s3)" }}>
            You can read this page without any background. It explains, in plain language, why we
            think identity in AI interaction deserves a standard — and why that is harder than it
            first appears.
          </p>
          <hr className="rule" style={{ maxWidth: "220px" }} />
        </section>

        <section className="section--tight" style={{ paddingTop: 0 }}>
          <div className="divider-list">
            {problemSections.map((s) => (
              <div className="prosesec" key={s.h}>
                <h2 className="prosesec__h">{s.h}</h2>
                <div className="prosesec__body">
                  {s.p.map((para, i) => <p key={i}>{para}</p>)}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="section--tight" style={{ paddingTop: "var(--s2)" }}>
          <div className="hero__actions">
            <Link to="research" className="btn btn--solid">Read the Research <Arrow /></Link>
            <Link to="contact" className="btn">Contact Us <Arrow /></Link>
          </div>
        </section>
      </div>
      <Footer />
    </div>
  );
}

/* ---------- Notes ---------- */
function NotesPage() {
  const [q, setQ] = useState("");
  const [tag, setTag] = useState("All");
  const { notes } = window.IBC;
  const tags = ["All", ...Array.from(new Set(notes.map((n) => n.tag)))];
  const norm = q.trim().toLowerCase();
  const shown = notes.filter((n) => {
    const tagOk = tag === "All" || n.tag === tag;
    const qOk = !norm || n.title.toLowerCase().includes(norm) || n.excerpt.toLowerCase().includes(norm);
    return tagOk && qOk;
  });
  return (
    <div className="page">
      <div className="container">
        <PageHeader
          eyebrow="Research Notes"
          title="Research Notes"
          lead="Shorter, less formal writing — arguments in progress, conference notes, and second thoughts that aren't ready to be papers."
        />
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--s3)", alignItems: "center", marginTop: "var(--s4)" }}>
          <div className="search" style={{ margin: 0 }}>
            <span className="search__icon">⌕</span>
            <input type="text" placeholder="Search notes…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="filterbar" style={{ margin: 0 }}>
            {tags.map((t) => (
              <button key={t} className={"filter" + (tag === t ? " is-active" : "")} onClick={() => setTag(t)}>{t}</button>
            ))}
          </div>
        </div>
        <section className="section--tight" style={{ paddingTop: "var(--s4)" }}>
          {shown.length ? (
            <div className="grid-2">
              {shown.map((n) => <NoteCard key={n.id} note={n} />)}
            </div>
          ) : (
            <p className="muted">No notes match your filters.</p>
          )}
        </section>
      </div>
      <Footer />
    </div>
  );
}

/* ---------- Contact ---------- */
function ContactPage() {
  const { org, team } = window.IBC;
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Please enter your name.";
    if (!form.email.trim()) errs.email = "Please enter your email.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "Please enter a valid email.";
    if (!form.message.trim()) errs.message = "Please include a message.";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <div className="page">
      <div className="container">
        <PageHeader
          eyebrow="Contact"
          title="Contact"
          lead="Research inquiries only. We read everything; we reply to what we can."
        />
        <div className="contactlayout">
          <div>
            {sent ? (
              <div className="formsuccess">
                Thank you — your inquiry has been recorded. This is a prototype, so nothing was
                actually sent, but in production we'd be in touch.
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className={"field" + (errors.name ? " field--error" : "")}>
                  <label htmlFor="c-name">Name</label>
                  <input id="c-name" type="text" value={form.name} onChange={set("name")} />
                  {errors.name && <span className="field__err">{errors.name}</span>}
                </div>
                <div className={"field" + (errors.email ? " field--error" : "")}>
                  <label htmlFor="c-email">Email</label>
                  <input id="c-email" type="email" value={form.email} onChange={set("email")} />
                  {errors.email && <span className="field__err">{errors.email}</span>}
                </div>
                <div className={"field" + (errors.message ? " field--error" : "")}>
                  <label htmlFor="c-msg">Message</label>
                  <textarea id="c-msg" rows="6" value={form.message} onChange={set("message")} />
                  {errors.message && <span className="field__err">{errors.message}</span>}
                </div>
                <button type="submit" className="btn btn--solid">Send Inquiry <Arrow /></button>
              </form>
            )}
          </div>
          <aside className="contact__sidecol">
            <div>
              <div className="label sidebar__label">Email</div>
              <a href={"mailto:" + org.email} className="contact__email">{org.email}</a>
            </div>
            <div>
              <div className="label sidebar__label">LinkedIn</div>
              <div className="contact__people">
                {team.map((m) => (
                  <a key={m.name} href="#" onClick={(e) => e.preventDefault()} className="tlink">{m.name} <Arrow /></a>
                ))}
              </div>
            </div>
            <Rule thin />
            <p className="muted" style={{ fontSize: "14px", margin: 0 }}>
              We do not take product, sales, or partnership inquiries. Please keep correspondence to
              the research.
            </p>
          </aside>
        </div>
      </div>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  MethodologiesPage, ConceptsPage, ProblemPage, NotesPage, ContactPage,
});