/* CIRG website — Brand & media kit page for partners. window.BrandPage */

function SwatchTile({ c }) {
  const dark = c.dark;
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ height: 132, background: c.hex, borderBottom: "1px solid var(--color-border)" }}></div>
      <div style={{ padding: "16px 18px", display: "flex", flexDirection: "column", gap: 4 }}>
        <span style={{ fontWeight: 500, color: "var(--color-navy)", fontSize: 15 }}>{c.name}</span>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--color-text-muted)", letterSpacing: ".02em", textTransform: "uppercase" }}>{c.hex}</span>
        {c.note ? <span style={{ fontSize: 13, color: "var(--color-text-secondary)" }}>{c.note}</span> : null}
      </div>
    </div>
  );
}

function LogoFrame({ t, src, label, onDark }) {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ height: 150, display: "flex", alignItems: "center", justifyContent: "center", padding: 28, background: onDark ? "var(--color-navy)" : "#fff", borderBottom: "1px solid var(--color-border)" }}>
        <img src={src} alt={label} style={{ maxHeight: 56, maxWidth: "100%", display: "block" }} />
      </div>
      <div style={{ padding: "14px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <span style={{ fontSize: 14, fontWeight: 500, color: "var(--color-navy)" }}>{label}</span>
        <a className="btn btn-ghost btn-sm" href={src} download style={{ paddingInline: 0 }}>{t.brand.download} <Icon name="download" size={15} /></a>
      </div>
    </div>
  );
}

function BrandPage({ t, go }) {
  const b = t.brand;
  return (
    <main id="main">
      <window.PageIntro t={t} go={go} crumb={b.intro.crumb} backTo="partners" backLabel={t.nav.find((n) => n.id === "partners").label}
        eyebrow={b.intro.eyebrow} title={b.intro.title} lead={b.intro.lead} />

      {/* Logo */}
      <section className="section">
        <div className="container">
          <window.SectionHead eyebrow={b.logo.eyebrow} title={b.logo.title} lead={b.logo.lead} />
          <div className="grid-3">
            <LogoFrame t={t} src="assets/logo-cirg-mark.png" label={b.logo.mark} />
            <LogoFrame t={t} src="assets/logo-cirg-ua.png" label={b.logo.lockupUa} />
            <LogoFrame t={t} src="assets/logo-cirg-en.png" label={b.logo.lockupEn} />
            <LogoFrame t={t} src="assets/logo-cirg-ua-light.png" label={b.logo.lockupUaLight} onDark />
            <LogoFrame t={t} src="assets/logo-cirg-en-light.png" label={b.logo.lockupEnLight} onDark />
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 12, justifyContent: "center", background: "var(--color-bg-soft-blue)" }}>
              <div className="eyebrow"><Icon name="info" size={14} />{b.logo.rulesH}</div>
              <ul className="orsa-list">
                {b.logo.rules.map((r) => (
                  <li key={r}><Icon name="check" size={16} color="var(--color-action-blue)" />{r}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Colors */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <window.SectionHead eyebrow={b.colors.eyebrow} title={b.colors.title} lead={b.colors.lead} />
          <div className="grid-4">
            {b.colors.items.map((c) => <SwatchTile key={c.hex} c={c} />)}
          </div>
        </div>
      </section>

      {/* Typography */}
      <section className="section">
        <div className="container">
          <window.SectionHead eyebrow={b.type.eyebrow} title={b.type.title} lead={b.type.lead} />
          <div className="grid-2" style={{ gap: 16 }}>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <span className="badge badge-blue" style={{ alignSelf: "flex-start" }}>{b.type.displayLabel}</span>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 46, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--color-navy)" }}>e-Ukraine Head</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--color-text-secondary)", letterSpacing: "-0.02em" }}>{b.type.sample}</div>
              <span style={{ fontSize: 13.5, color: "var(--color-text-muted)" }}>{b.type.displayNote}</span>
            </div>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <span className="badge badge-muted" style={{ alignSelf: "flex-start" }}>{b.type.bodyLabel}</span>
              <div style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 34, color: "var(--color-navy)" }}>e-Ukraine</div>
              <div style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 17, color: "var(--color-text-secondary)", lineHeight: 1.6 }}>{b.type.sample}</div>
              <span style={{ fontSize: 13.5, color: "var(--color-text-muted)" }}>{b.type.bodyNote}</span>
            </div>
          </div>
        </div>
      </section>

      {/* Voice */}
      <section className="section" style={{ background: "var(--color-bg-soft-blue)", paddingBlock: "var(--section-pad-y-sm)" }}>
        <div className="container">
          <window.SectionHead eyebrow={b.voice.eyebrow} title={b.voice.title} lead={b.voice.lead} />
          <div className="grid-2" style={{ gap: 16 }}>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="eyebrow" style={{ color: "var(--color-volunteer)" }}><Icon name="check" size={14} />{b.voice.doH}</div>
              <ul className="orsa-list">{b.voice.dos.map((d) => <li key={d}><Icon name="check" size={16} color="var(--color-volunteer)" />{d}</li>)}</ul>
            </div>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="eyebrow" style={{ color: "var(--color-donate)" }}><Icon name="x" size={14} />{b.voice.dontH}</div>
              <ul className="orsa-list">{b.voice.donts.map((d) => <li key={d}><Icon name="x" size={16} color="var(--color-donate)" />{d}</li>)}</ul>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="container">
          <div className="band band-blue">
            <div style={{ maxWidth: 620 }}>
              <h2>{b.cta.title}</h2>
              <p style={{ color: "rgba(255,255,255,0.9)", fontSize: "var(--fs-lead)", fontWeight: 300, marginBottom: 26 }}>{b.cta.lead}</p>
              <div className="cta-row">
                <button className="btn btn-lg" style={{ background: "#fff", color: "var(--color-action-blue)" }} onClick={() => go("contacts")}>{t.cta.writeUs}</button>
                <button className="btn btn-lg btn-ghost" style={{ color: "#fff" }} onClick={() => go("partners")}>{t.nav.find((n) => n.id === "partners").label} <Icon name="arrow-right" size={16} /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { BrandPage });