/* CIRG website — Home page. window.HomePage */

function Hero({ t, go }) {
  const h = t.home.hero;
  const DT = window.CIRGDesignSystem_05f3b3 && window.CIRGDesignSystem_05f3b3.DisplayTitle;
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow"><Icon name="sparkles" size={15} />{h.eyebrow}</div>
          {h.titleParts && DT
            ? <DT parts={h.titleParts} size="calc(clamp(2.5rem, 5.2vw, 4.2rem) * 0.9)" as="h1" style={{ marginTop: 16 }} />
            : <h1 style={{ marginTop: 16 }}>{h.title}</h1>}
          <p className="lead">{h.lead}</p>
          <div className="cta-row">
            <button className="btn btn-primary btn-lg" onClick={() => go("partners")}>{t.cta.partner}</button>
            <button className="btn btn-donate btn-lg" onClick={() => go("donate")}>{t.cta.support}</button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("directions")}>{t.cta.viewDirections} <Icon name="arrow-right" size={16} /></button>
          </div>
        </div>
        <div className="hero-visual">
          <img src="assets/hero-community.png" alt="Команда ЦІРГ і громада обговорюють розвиток біля сучасного освітнього хабу" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          <div className="hero-chip" style={{ left: 18, bottom: 18 }}>
            <span className="ico" style={{ background: "var(--color-volunteer-soft)", color: "var(--color-volunteer)" }}><Icon name="users" size={18} /></span>
            <div><div className="v">{h.chip1.v}</div><div className="l">{h.chip1.l}</div></div>
          </div>
          <div className="hero-chip" style={{ right: 18, top: 18 }}>
            <span className="ico" style={{ background: "var(--color-knowledge-soft)", color: "var(--color-knowledge)" }}><Icon name="bar-chart-3" size={18} /></span>
            <div><div className="v">{h.chip2.v}</div><div className="l">{h.chip2.l}</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip({ t }) {
  return (
    <div className="trust">
      <div className="container trust-in">
        <div className="trust-lead">{t.home.trust.lead}</div>
        <div className="trust-items">
          {t.home.trust.items.map((x) => (
            <div className="trust-item" key={x[1]}><span className="dot"><Icon name={x[0]} size={16} /></span>{x[1]}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function WhyNow({ t }) {
  const w = t.home.why;
  return (
    <section className="why section">
      <div className="container why-grid">
        <div>
          <div className="eyebrow"><Icon name="circle-dot" size={14} />{w.eyebrow}</div>
          <h2 style={{ marginTop: 14 }}>{w.title}</h2>
          <p className="lead">{w.lead}</p>
          <div style={{ marginTop: 8 }}>
            <div style={{ fontWeight: 500, color: "var(--color-navy)", marginBottom: 10 }}>{w.answersH}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {w.answers.map((a) => <span className="badge badge-blue" key={a}>{a}</span>)}
            </div>
          </div>
        </div>
        <div className="card" style={{ padding: "8px 28px" }}>
          {w.challenges.map((c) => (
            <div className="chk" key={c[1]}>
              <span className="ic" style={{ background: "var(--color-donate-soft)", color: "var(--color-donate)" }}><Icon name={c[0]} size={16} /></span>
              <div><b>{c[1]}</b></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Directions({ t, go }) {
  const d = t.home.directions;
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow={d.eyebrow} title={d.title} lead={d.lead} />
        <div className="grid-2">
          {t.directions.items.map((it) => {
            const a = ACCENT[it.accent];
            return (
              <article className="card dir-card" key={it.n}>
                <span className="dir-ico" style={{ background: a.soft, color: a.fg }}><Icon name={it.icon} size={24} /></span>
                <div className="dir-n">{it.n}</div>
                <h3>{it.title}</h3>
                <p>{it.text}</p>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: "auto", alignSelf: "flex-start", paddingInline: 0 }} onClick={() => go("directions")}>{t.cta.learnMore} <Icon name="arrow-right" size={15} /></button>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  const p = t.home.process;
  return (
    <section className="section" style={{ background: "var(--color-bg-soft-blue)" }}>
      <div className="container">
        <SectionHead center eyebrow={p.eyebrow} title={p.title} lead={p.lead} />
        <div className="process">
          {p.steps.map((s, idx) => (
            <div className="proc-step" key={s[1]}>
              <div className="proc-ico"><Icon name={s[0]} size={26} /></div>
              <h4>{s[1]}</h4>
              <span className="num">0{idx + 1}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Programs({ t, go }) {
  const p = t.home.programs;
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow={p.eyebrow} title={p.title} />
        <div className="grid-3">
          {p.items.map((it, i) => {
            const a = ACCENT[it.accent];
            const imgs = ["assets/prog-osvita.png", "assets/prog-orsa.png", "assets/prog-analytics.png"];
            return (
              <article className="card prog-card" key={it.title}>
                <div className="card-cover" style={{ height: 168 }}>
                  <img src={imgs[i]} alt={it.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
                <span className="dir-ico" style={{ background: a.soft, color: a.fg }}><Icon name={it.icon} size={24} /></span>
                <span className={"badge badge-" + (it.accent === "amber" ? "amber" : it.accent === "teal" ? "teal" : it.accent === "violet" ? "violet" : "blue") + " tag"}>{it.tag}</span>
                <h3 style={{ fontSize: 21, fontWeight: 500, margin: 0 }}>{it.title}</h3>
                <p style={{ fontSize: 15, margin: 0, color: "var(--color-text-secondary)" }}>{it.text}</p>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: "auto", alignSelf: "flex-start", paddingInline: 0 }} onClick={() => go("directions")}>{t.cta.learnMore} <Icon name="arrow-right" size={15} /></button>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Ecosystem({ t, go }) {
  const e = t.home.ecosystem;
  return (
    <section className="eco section">
      <div className="container eco-wrap">
        <div>
          <div className="eyebrow" style={{ color: "var(--color-cirg-cyan)" }}><Icon name="circle-dot" size={14} />{e.eyebrow}</div>
          <h2 style={{ marginTop: 14 }}>{e.title}</h2>
          <p className="lead">{e.lead}</p>
          <button className="btn btn-primary btn-lg" onClick={() => go("partners")} style={{ marginTop: 8 }}>{t.cta.discussPartnership}</button>
        </div>
        <div className="eco-ring" aria-hidden="true">
          <div className="eco-center"><img src="assets/logo-cirg-mark.png" alt="" /></div>
          {e.nodes.map((n, i) => {
            const ang = (i / e.nodes.length) * Math.PI * 2 - Math.PI / 2;
            const x = 50 + Math.cos(ang) * 48;
            const y = 50 + Math.sin(ang) * 48;
            return <div className="eco-node" key={n} style={{ left: x + "%", top: y + "%" }}>{n}</div>;
          })}
        </div>
      </div>
    </section>
  );
}

function TransparencyTeaser({ t, go }) {
  const tr = t.home.transparency;
  return (
    <section className="section">
      <div className="container grid-2" style={{ alignItems: "center", gap: 56 }}>
        <div>
          <SectionHead eyebrow={tr.eyebrow} title={tr.title} lead={tr.lead} />
          <div className="cta-row">
            <button className="btn btn-primary" onClick={() => go("transparency")}>{t.cta.transparency}</button>
            <button className="btn btn-donate-soft" onClick={() => go("donate")}>{tr.supportSoft}</button>
          </div>
        </div>
        <div className="card" style={{ padding: "8px 28px" }}>
          <div className="tr-list">
            {t.transparency.docs.map((doc) => (
              <div className="tr-row" key={doc.t}>
                <span className="ic"><Icon name={doc.i} size={20} /></span>
                <span className="t">{doc.t}</span>
                <span className="s">{doc.s === "ready"
                  ? <span className="badge badge-teal">{t.ui.available}</span>
                  : <span className="badge badge-muted">{t.ui.soon}</span>}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PlansHome({ t, go }) {
  const p = t.home.plans;
  return (
    <section className="section" style={{ background: "var(--color-bg-soft-blue)" }}>
      <div className="container">
        <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>
          <div>
            <SectionHead eyebrow={p.eyebrow} title={p.title} lead={p.lead} />
            <div className="grid-2" style={{ gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {p.cards.map((c) => (
                <div key={c} style={{ display: "flex", gap: 10, alignItems: "center", background: "#fff", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: "12px 14px" }}>
                  <Icon name="check" size={16} color="var(--color-volunteer)" style={{ flex: "none" }} />
                  <span style={{ fontSize: 14.5, color: "var(--color-navy)", fontWeight: 500 }}>{c}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="eyebrow" style={{ marginBottom: 16 }}><Icon name="calendar-range" size={14} />{p.timelineH}</div>
            <div className="timeline">
              {p.timeline.map((row) => (
                <div className="tl-item" key={row[0]}>
                  <div className="tl-q">{row[0]}</div>
                  <div className="body"><b>{row[1]}</b></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NewsHome({ t, go }) {
  const n = t.home.news;
  return (
    <section className="section">
      <div className="container">
        <SectionHead eyebrow={n.eyebrow} title={n.title} lead={n.lead} />
        <div className="grid-3">
          {t.news.items.map((it) => (
            <article className="card news-card" key={it.title}>
              <div className="news-top">
                <span className={"badge badge-" + it.tone}>{it.cat}</span>
                <span className="news-date">{it.date}</span>
              </div>
              <h3>{it.title}</h3>
              <p>{it.text}</p>
              <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start", paddingInline: 0, marginTop: "auto" }} onClick={() => go("news")}>{t.cta.readMore} <Icon name="arrow-right" size={15} /></button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ t, go }) {
  const f = t.home.finalCta;
  return (
    <section className="section" style={{ background: "var(--color-bg-soft-blue)" }}>
      <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-donate btn-lg" onClick={() => go("donate")}>{t.cta.support}</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>
  );
}

function PhotoBand({ t }) {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="photo-band">
          <img src="assets/process-path.png" alt="Шлях розвитку громади: від ідеї до сталого впливу" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
    </section>
  );
}

function HomePage({ t, go }) {
  return (
    <main id="main">
      <Hero t={t} go={go} />
      <TrustStrip t={t} />
      <WhyNow t={t} />
      <Directions t={t} go={go} />
      <PhotoBand t={t} />
      <Process t={t} />
      <Programs t={t} go={go} />
      <Ecosystem t={t} go={go} />
      <TransparencyTeaser t={t} go={go} />
      <PlansHome t={t} go={go} />
      <NewsHome t={t} go={go} />
      <FinalCTA t={t} go={go} />
    </main>
  );
}

Object.assign(window, { HomePage });