/* CIRG website — core pages + shared contact form. Exported to window. */

/* Contact / partnership form — inactive (in finalization); users are asked to reach out by phone/email. */
function ContactForm({ t, title, types, micro, withOrg, typeLabel }) {
  const f = t.contacts.fields;
  const ph = t.lang === "en" ? "Olena Kovalchuk" : "Олена Ковальчук";
  return (
    <form className="card form-card form-disabled" onSubmit={(e) => e.preventDefault()} aria-describedby="cf-note">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <h3 style={{ margin: 0, fontSize: 20, fontWeight: 500 }}>{title}</h3>
        <span className="badge badge-muted" style={{ whiteSpace: "nowrap" }}><Icon name="lock" size={13} /> {t.ui.inPrep}</span>
      </div>
      <div id="cf-note" className="notice"><span className="ic"><Icon name="info" size={20} /></span>
        <p>{t.contacts.formDisabledNote}{" "}
          <a href={"tel:" + t.footer.tel} style={{ color: "var(--color-action-blue)", fontWeight: 500 }}>{t.footer.phone}</a>
          {" · "}
          <a href={"mailto:" + t.footer.email} style={{ color: "var(--color-action-blue)", fontWeight: 500 }}>{t.footer.email}</a>
        </p>
      </div>
      {micro ? <p style={{ margin: "-2px 0 0", fontSize: 14, color: "var(--color-text-secondary)" }}>{micro}</p> : null}
      <div className="form-grid2">
        <label className="field"><span className="field-label">{f.name} *</span><input className="input" disabled placeholder={ph} /></label>
        <label className="field"><span className="field-label">{f.email} *</span><input className="input" type="email" disabled placeholder="you@hromada.ua" /></label>
      </div>
      {withOrg ? <label className="field"><span className="field-label">{f.org}</span><input className="input" disabled placeholder={t.lang === "en" ? "Organization / community" : "Організація / громада"} /></label> : null}
      <label className="field"><span className="field-label">{typeLabel || f.type}</span>
        <select className="select" disabled defaultValue={types[0]}>{types.map((o) => <option key={o}>{o}</option>)}</select>
      </label>
      <label className="field"><span className="field-label">{f.message} *</span>
        <textarea className="textarea" rows="4" disabled placeholder={t.contacts.formMicro}></textarea>
      </label>
      <label className="checkbox-row" style={{ opacity: 0.72 }}><input type="checkbox" disabled /><span>{t.contacts.consent}</span></label>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <button className="btn btn-primary" type="submit" disabled>{t.cta.send}</button>
        <a className="btn btn-secondary btn-sm" href={"tel:" + t.footer.tel}><Icon name="phone" size={15} /> {t.footer.phone}</a>
        <a className="btn btn-secondary btn-sm" href={"mailto:" + t.footer.email}><Icon name="mail" size={15} /> Email</a>
      </div>
    </form>
  );
}

/* ---------------- About ---------------- */
function AboutPage({ t, go }) {
  const a = t.about;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={a.intro.eyebrow} eyebrow={a.intro.eyebrow} title={a.intro.title} lead={a.intro.lead} />
      <section className="section">
        <div className="container grid-2" style={{ gap: 32, alignItems: "stretch" }}>
          {[a.mission, a.vision].map((b, i) => (
            <div className="card" key={i} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <span className="dir-ico" style={{ background: i ? "var(--color-knowledge-soft)" : "var(--color-bg-soft-blue)", color: i ? "var(--color-knowledge)" : "var(--color-action-blue)" }}><Icon name={i ? "telescope" : "target"} size={24} /></span>
              <div className="eyebrow">{b.eyebrow}</div>
              <h2 style={{ fontSize: "var(--fs-h3)", margin: 0 }}>{b.title}</h2>
              <p style={{ margin: 0, fontSize: 16 }}>{b.text}</p>
            </div>
          ))}
        </div>
      </section>
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingTop: 0 }}>
        <div className="container" style={{ paddingTop: "var(--section-pad-y)" }}>
          <SectionHead eyebrow={a.valuesH.eyebrow} title={a.valuesH.title} />
          <div className="value-grid cols-4">
            {a.values.map((v) => (
              <div className="value-chip" key={v[1]}><span className="ic"><Icon name={v[0]} size={18} /></span><span>{v[1]}</span></div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={a.govH.eyebrow} title={a.govH.title} lead={a.govLead} />
          <div className="grid-3">
            {a.gov.map((g) => (
              <article className="card dir-card" key={g[1]}>
                <span className="dir-ico" style={{ background: "var(--color-bg-soft-blue)", color: "var(--color-action-blue)" }}><Icon name={g[0]} size={24} /></span>
                <h3 style={{ fontSize: 19 }}>{g[1]}</h3>
                <p>{g[2]}</p>
                <span className="badge badge-muted" style={{ alignSelf: "flex-start", marginTop: "auto" }}>{t.ui.soon}</span>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 24 }}><Notice icon="users" text={t.placeholders.documents} /></div>
        </div>
      </section>
      <FinalBand t={t} go={go} />
    </main>
  );
}

/* ---------------- Directions ---------------- */
function DirectionsPage({ t, go }) {
  const d = t.directions;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={d.intro.eyebrow} eyebrow={d.intro.eyebrow} title={d.intro.title} lead={d.intro.lead} />
      <section className="section">
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {d.items.map((it) => {
            const a = ACCENT[it.accent];
            return (
              <article className="card dir-row" key={it.n} style={{ display: "grid", gridTemplateColumns: "auto 1.5fr 1fr", gap: 28, alignItems: "center" }}>
                <span className="dir-ico" style={{ background: a.soft, color: a.fg, width: 60, height: 60 }}><Icon name={it.icon} size={28} /></span>
                <div>
                  <div className="dir-n" style={{ marginBottom: 6 }}>{d.labelDir} {it.n}</div>
                  <h3 style={{ margin: "0 0 6px", fontSize: 22, fontWeight: 500 }}>{it.title}</h3>
                  <p style={{ margin: "0 0 10px", fontSize: 15 }}>{it.text}</p>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {it.formats.map((fm) => <span className="badge badge-muted" key={fm}>{fm}</span>)}
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <div><div className="dir-n">{d.labelWho}</div><div style={{ fontSize: 14, color: "var(--color-text-secondary)" }}>{it.who}</div></div>
                  <div><div className="dir-n">{d.labelResult}</div><div style={{ fontSize: 14, color: "var(--color-navy)", fontWeight: 500 }}>{it.result}</div></div>
                  <button className="btn btn-secondary btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => go("partners")}>{t.cta.discuss}</button>
                </div>
              </article>
            );
          })}
        </div>
      </section>
      <FinalBand t={t} go={go} />
    </main>
  );
}

/* ---------------- Projects ---------------- */
function ProjectsPage({ t, go }) {
  const p = t.projects;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={p.intro.eyebrow} eyebrow={p.intro.eyebrow} title={p.intro.title} lead={p.intro.lead} />
      <section className="section">
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 48 }}>
          {p.sections.map((sec) => {
            const isActive = sec.kind === "active";
            const isIdeas = sec.kind === "ideas";
            const count = isActive ? p.active.length : isIdeas ? p.ideas.length : 0;
            return (
            <div key={sec.h}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
                <h2 style={{ fontSize: "var(--fs-h3)", margin: 0 }}>{sec.h}</h2>
                {sec.empty ? <span className="badge badge-muted">{t.ui.soon}</span> : <span className="badge badge-blue">{count}</span>}
              </div>
              {sec.empty ? (
                <EmptyState icon="folder-open" text={t.placeholders.projects} />
              ) : isActive ? (
                <div className="grid-3">
                  {p.active.map((pr) => (
                    <article className="card proj-card" key={pr.id}>
                      <div className="card-cover" style={{ height: 168 }}>
                        <img src={pr.img} alt={pr.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                      </div>
                      <span className={"badge badge-" + pr.tone} style={{ alignSelf: "flex-start" }}>{pr.status}</span>
                      <h3>{pr.title}</h3>
                      <p style={{ margin: 0, fontSize: 14.5, color: "var(--color-text-secondary)" }}>{pr.text}</p>
                      <div className="kv">
                        <div className="row"><span className="k">{p.labels.region}</span><span className="v">{pr.region}</span></div>
                        <div className="row"><span className="k">{p.labels.group}</span><span className="v">{pr.group}</span></div>
                      </div>
                      <button className="btn btn-secondary btn-sm" style={{ alignSelf: "flex-start", marginTop: "auto" }} onClick={() => go(pr.route)}>{p.labels.openProject} <Icon name="arrow-right" size={15} /></button>
                    </article>
                  ))}
                </div>
              ) : (
                <div className="grid-3">
                  {p.ideas.map((idea, i) => {
                    const imgs = ["assets/proj-analytica.png", "assets/proj-veteran.png", "assets/proj-gromadam.png"];
                    return (
                    <article className="card proj-card" key={idea.title}>
                      <div className="card-cover" style={{ height: 168 }}>
                        <img src={imgs[i]} alt={idea.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                      </div>
                      <span className={"badge badge-" + idea.tone} style={{ alignSelf: "flex-start" }}>{idea.status}</span>
                      <h3>{idea.title}</h3>
                      <p style={{ margin: 0, fontSize: 14.5, color: "var(--color-text-secondary)" }}>{idea.text}</p>
                      <div className="kv">
                        <div className="row"><span className="k">{p.labels.region}</span><span className="v">{idea.region}</span></div>
                        <div className="row"><span className="k">{p.labels.group}</span><span className="v">{idea.group}</span></div>
                      </div>
                      <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start", paddingInline: 0, marginTop: "auto" }} onClick={() => go("contacts")}>{t.cta.discuss} <Icon name="arrow-right" size={15} /></button>
                    </article>
                  );})}
                </div>
              )}
            </div>
          );})}
          <div className="band band-amber">
            <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <div style={{ flex: 1, minWidth: 280 }}>
                <h2 style={{ marginBottom: 8, fontSize: "var(--fs-h3)" }}>{p.labels.proposeCta}</h2>
                <p style={{ margin: 0, color: "var(--color-navy)" }}>{t.contacts.formMicro}</p>
              </div>
              <button className="btn btn-donate btn-lg" onClick={() => go("contacts")}>{t.cta.writeUs}</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Partners ---------------- */
function PartnersPage({ t, go }) {
  const p = t.partners;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={p.intro.eyebrow} eyebrow={p.intro.eyebrow} title={p.intro.title} lead={p.intro.lead} />
      <section className="section">
        <div className="container">
          <div className="grid-3">
            {t.home.partners3.groups.map((au) => {
              const a = ACCENT[au.a];
              return (
                <article className="card" key={au.h} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <span className="dir-ico" style={{ background: a.soft, color: a.fg }}><Icon name={au.i} size={24} /></span>
                  <h3 style={{ margin: 0, fontSize: 20, fontWeight: 500 }}>{au.h}</h3>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 9 }}>
                    {au.items.map((it) => (
                      <li key={it} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 14.5, color: "var(--color-text-secondary)" }}>
                        <Icon name="check" size={16} color={a.fg} style={{ marginTop: 2, flex: "none" }} />{it}
                      </li>
                    ))}
                  </ul>
                </article>
              );
            })}
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <SectionHead eyebrow={p.whyH.eyebrow} title={p.whyH.title} />
          <div className="grid-2" style={{ gap: 16 }}>
            {p.why.map((w) => (
              <div className="card" key={w[1]} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span className="dir-ico" style={{ background: "var(--color-bg-soft-blue)", color: "var(--color-action-blue)", flex: "none" }}><Icon name={w[0]} size={22} /></span>
                <div><h3 style={{ margin: "0 0 4px", fontSize: 18, fontWeight: 500 }}>{w[1]}</h3><p style={{ margin: 0, fontSize: 14.5 }}>{w[2]}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container grid-2" style={{ gap: 48, alignItems: "start" }}>
          <div>
            <div className="eyebrow"><Icon name="handshake" size={14} />{p.formatsH.eyebrow}</div>
            <h2 style={{ marginTop: 12 }}>{p.formatsH.title}</h2>
            <p className="lead">{p.formatsH.lead}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 8 }}>
              {p.formats.map((fm) => <span className="badge badge-blue" key={fm} style={{ fontSize: 14, padding: "9px 14px" }}>{fm}</span>)}
            </div>
            <div style={{ marginTop: 28 }}>
              <div className="eyebrow"><Icon name="gift" size={14} />{p.getH.eyebrow}</div>
              <h3 style={{ marginTop: 10, fontSize: "var(--fs-h3)" }}>{p.getH.title}</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {p.get.map((g) => <li key={g} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 15.5, color: "var(--color-navy)" }}><Icon name="check-circle-2" size={18} color="var(--color-volunteer)" />{g}</li>)}
              </ul>
              <div style={{ marginTop: 22 }}>
                <button className="btn btn-secondary" onClick={() => go("contacts")} style={{ marginRight: 10 }}><Icon name="download" size={16} /> {t.cta.downloadDeck}</button>
              </div>
              <div style={{ marginTop: 18 }}><Notice text={t.placeholders.partners} icon="info" /></div>
            </div>
          </div>
          <ContactForm t={t} title={p.formTitle} types={p.formTypes} withOrg typeLabel={t.contacts.fields.type} />
        </div>
      </section>
    </main>
  );
}

/* ---------------- Transparency ---------------- */
function TransparencyPage({ t, go }) {
  const tr = t.transparency;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={tr.intro.eyebrow} eyebrow={tr.intro.eyebrow} title={tr.intro.title} lead={tr.intro.lead} />
      <section className="section">
        <div className="container">
          <div className="grid-3">
            {tr.docs.map((doc) => (
              <article className="card" key={doc.t} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span className="dir-ico" style={{ background: "var(--color-bg-soft-blue)", color: "var(--color-action-blue)" }}><Icon name={doc.i} size={22} /></span>
                  {doc.s === "ready" ? <span className="badge badge-teal">{t.ui.available}</span> : <span className="badge badge-muted">{t.ui.soon}</span>}
                </div>
                <h3 style={{ margin: 0, fontSize: 19, fontWeight: 500 }}>{doc.t}</h3>
                <p style={{ margin: 0, fontSize: 14.5 }}>{doc.d}</p>
                <button className={"btn btn-sm " + (doc.s === "ready" ? "btn-ghost" : "btn-secondary")} disabled={doc.s !== "ready"} style={{ alignSelf: "flex-start", marginTop: "auto", paddingInline: doc.s === "ready" ? 0 : undefined }}>
                  {doc.s === "ready" ? <>{t.cta.view} <Icon name="arrow-up-right" size={15} /></> : t.cta.willPublish}
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingTop: 0 }}>
        <div className="container" style={{ paddingTop: "var(--section-pad-y)" }}>
          <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>
            <div>
              <div className="eyebrow"><Icon name="file-text" size={14} />{tr.regH.eyebrow}</div>
              <h2 style={{ marginTop: 12 }}>{tr.regH.title}</h2>
              <div className="card" style={{ padding: "8px 24px", marginTop: 18 }}>
                {tr.reg.map((r) => (
                  <div className="tr-row" key={r[0]} style={{ padding: "14px 0" }}>
                    <span className="t" style={{ fontSize: 14.5, minWidth: 0 }}>{r[0]}</span>
                    <span className="s" style={{ textAlign: "right", color: "var(--color-navy)", fontWeight: 500, fontSize: 14.5 }}>{r[1]}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="eyebrow"><Icon name="shield-check" size={14} />{tr.policiesH.eyebrow}</div>
              <h2 style={{ marginTop: 12 }}>{tr.policiesH.title}</h2>
              <p className="lead">{tr.policiesH.lead}</p>
              <div className="card" style={{ padding: "8px 24px" }}>
                {tr.policies.map((pol) => (
                  <div className="tr-row" key={pol}>
                    <span className="ic"><Icon name="file-check-2" size={18} /></span>
                    <span className="t" style={{ fontSize: 15 }}>{pol}</span>
                    <span className="s"><span className="badge badge-muted">{t.ui.soon}</span></span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="band band-amber">
            <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <div style={{ flex: 1, minWidth: 280 }}>
                <h2 style={{ marginBottom: 8, fontSize: "var(--fs-h2)" }}>{tr.requestH}</h2>
                <p style={{ margin: 0, color: "var(--color-navy)" }}>{tr.requestText}</p>
              </div>
              <button className="btn btn-donate btn-lg" onClick={() => go("contacts")}>{t.cta.request}</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Team ---------------- */
function TeamCard({ t, m }) {
  const tone = m.accent === "violet" ? "violet" : m.accent === "teal" ? "teal" : "blue";
  return (
    <article className="card team-card">
      <div className="team-photo">
        <image-slot id={"team-" + m.id} shape="circle" placeholder={t.team.photoSlot} style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
      <h3>{m.name}</h3>
      <span className={"badge badge-" + tone}>{m.role}</span>
      <div className="team-skills" aria-label={t.team.skillsLabel}>
        {m.skills.map((s) => <span className="skill-tag" key={s}>{s}</span>)}
      </div>
    </article>
  );
}

function TeamPage({ t, go }) {
  const tm = t.team;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={tm.intro.eyebrow} eyebrow={tm.intro.eyebrow} title={tm.intro.title} lead={tm.intro.lead} />
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={tm.boardH.eyebrow} title={tm.boardH.title} />
          <div className="grid-3">{tm.board.map((m) => <TeamCard key={m.id} t={t} m={m} />)}</div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingTop: 0 }}>
        <div className="container" style={{ paddingTop: "var(--section-pad-y)" }}>
          <SectionHead eyebrow={tm.teamH.eyebrow} title={tm.teamH.title} />
          <div className="grid-3">{tm.members.map((m) => <TeamCard key={m.id} t={t} m={m} />)}</div>
          <div style={{ marginTop: 24 }}><Notice icon="info" text={tm.demoNote} /></div>
        </div>
      </section>
      <FinalBand t={t} go={go} />
    </main>
  );
}

/* Shared final band */
function FinalBand({ t, go }) {
  const f = t.home.finalCta;
  return (
    <section className="section">
      <div className="container">
        <div className="band band-blue">
          <div style={{ maxWidth: 640 }}>
            <h2>{f.title}</h2>
            <p style={{ color: "rgba(255,255,255,0.9)", fontSize: "var(--fs-lead)", fontWeight: 300, marginBottom: 26 }}>{f.lead}</p>
            <div className="cta-row">
              <button className="btn btn-lg" style={{ background: "#fff", color: "var(--color-action-blue)" }} onClick={() => go("partners")}>{t.cta.partner}</button>
              <button className="btn btn-lg btn-ghost" style={{ color: "#fff" }} onClick={() => go("contacts")}>{t.cta.writeUs} <Icon name="arrow-right" size={16} /></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContactForm, AboutPage, DirectionsPage, ProjectsPage, PartnersPage, TransparencyPage, TeamCard, TeamPage, FinalBand });