/* Hope Council — Get Involved: Donate wireframe.
   Page: prototype-pages/donate.html
   Depends on chrome + helpers from gh-shared.jsx. Production copy from
   future-get-involved-donate-page-copy.md, pasted complete. */

const DN = window.DooleyWireframeKit_e41309;
const {
  Dot, Para, Band, SectionHead, WireCard, Crumbs, PageHeader,
  FaqPreview, PageShell, ghGo,
} = window;

const DN_ANNO = [
  "Utility strip — persists site-wide. Crisis lines and main phone are tel: links; Donate routes to donate.html.",
  "Primary nav — Get Involved hub active; 'Donate' is in the Get Involved dropdown.",
  "Page header — eyebrow, H1, lead are production copy. Primary CTA 'Donate Now' anchors to the donation block below (this template's one solid CTA). Secondary: Sponsor Instead → sponsor.html; Volunteer → volunteer.html.",
  "Donation link block — placed high, directly after the header. Prominent 'Donate Now' button links to the secure donation form (URL needed). Phone and email are tel:/mailto: links.",
  "What your gift makes possible — four cards, followed by the Kenosha Firefighters C.A.R.E. community-example callout ($15,000 to the 'I Am Special' program).",
  "Ways to give — four gift-option cards. The corporate/in-kind card carries a 'Sponsor Hope Council' CTA → sponsor.html.",
  "Give with confidence — donor-trust narrative. Tax-deductibility statement and EIN are a dashed placeholder pending staff input. CTAs: View Impact → impact.html; Read the Annual Impact Report → impact.html.",
  "Not ready to give today? — other ways to support, with CTAs to Volunteer, Sponsor, Events, and Share Your Story.",
  "FAQ Preview — accordion, one panel open at a time; four questions with full production answers.",
];

/* ---- Donation link block ------------------------------------------------- */

function DonationBlock({ anno }) {
  const { CtaButton } = DN;
  const link = { color: "var(--wf-ink)", textDecoration: "underline", textUnderlineOffset: 2, fontWeight: "var(--wf-weight-bold)" };
  return (
    <Band fill="alt" label="Donation Link Block">
      <div id="donate-now" style={{ position: "relative", border: "2px solid var(--wf-ink)", borderRadius: "var(--wf-radius)", background: "var(--wf-surface)", padding: "32px 36px", display: "flex", flexDirection: "column", gap: 18, alignItems: "flex-start" }}>
        <Dot n={4} anno={anno} top={-12} left={-12} />
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <CtaButton label="Donate Now" size="lg" style={{ whiteSpace: "nowrap" }} onClick={ghGo("#donate-now")} />
          <span style={{ font: "var(--wf-weight-bold) var(--wf-text-meta)/1.2 var(--wf-font-mono)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--wf-ink-muted)", border: "var(--wf-border-dashed)", borderRadius: "var(--wf-radius)", padding: "8px 12px" }}>Links to secure donation form — URL needed</span>
        </div>
        <p style={{ margin: 0, fontSize: "var(--wf-text-body)", color: "var(--wf-ink-soft)", lineHeight: 1.6 }}>
          Your donation is processed securely. Questions about giving? Call <a href="tel:2626588166" style={link}>262-658-8166</a> or email <a href="mailto:info@hopecouncil.org" style={link}>info@hopecouncil.org</a>.
        </p>
      </div>
    </Band>
  );
}

/* ---- Why give ------------------------------------------------------------ */

function WhyGive({ anno }) {
  const cards = [
    ["Judgment-free help", "Gifts keep no-cost services available — peer support, recovery coaching, naloxone training, and navigation — for anyone, at any stage of readiness."],
    ["Life-saving supplies", "Naloxone, fentanyl and xylazine test strips, and safer-use supplies stay stocked and free, 24/7, through the Public Health Vending Machine and front desk."],
    ["Prevention for the next generation", "Donations extend school-based prevention, youth vaping programs, and community education across Kenosha County."],
    ["Support for whole families", "The Loved Ones Support Group, parent support, and family programming stay free and open because the community funds them."],
  ];
  return (
    <Band fill="surface" label="Why Give">
      <div style={{ position: "relative" }}>
        <Dot n={5} anno={anno} top={-12} left={-12} />
        <SectionHead title="What your gift makes possible" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
          {cards.map((c, i) => <WireCard key={i} title={c[0]} body={c[1]} />)}
        </div>
        <div style={{ marginTop: 18, border: "var(--wf-border-strong)", borderRadius: "var(--wf-radius)", background: "var(--wf-zone)", padding: "26px 30px", display: "flex", flexDirection: "column", gap: 8 }}>
          <span style={{ font: "var(--wf-weight-bold) var(--wf-text-label)/1.2 var(--wf-font-sans)", letterSpacing: "var(--wf-tracking-label)", textTransform: "uppercase", color: "var(--wf-ink-muted)" }}>Community example</span>
          <Para text="When the Kenosha Firefighters C.A.R.E. program raised $15,000 for Hope Council's “I Am Special” program, that gift directly supported children whose lives have been impacted by a parent or guardian's substance use. That is what community giving does here — it reaches real people, close to home." size="var(--wf-text-h3)" />
        </div>
      </div>
    </Band>
  );
}

/* ---- Gift options -------------------------------------------------------- */

function GiftOptions({ anno }) {
  const cards = [
    ["One-time gift", "Give once, in any amount. Every gift matters.", null],
    ["Monthly giving", "A recurring monthly gift provides steady, predictable support that keeps programs running year-round.", null],
    ["Tribute and memorial gifts", "Give in honor of someone living in recovery, or in memory of someone you have lost. A meaningful way to mark what — and who — matters.", null],
    ["Corporate and in-kind giving", "Businesses and organizations can give directly, contribute goods or services, or explore a visible partnership through sponsorship.", [["Sponsor Hope Council", "sponsor.html"]]],
  ];
  return (
    <Band fill="alt" label="Gift Options">
      <div style={{ position: "relative" }}>
        <Dot n={6} anno={anno} top={-12} left={-12} />
        <SectionHead title="Ways to give" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
          {cards.map((c, i) => <WireCard key={i} title={c[0]} body={c[1]} ctas={c[2]} />)}
        </div>
      </div>
    </Band>
  );
}

/* ---- Donor trust + other ways -------------------------------------------- */

function DonorTrust({ anno }) {
  const { CtaButton } = DN;
  return (
    <Band fill="surface" label="Donor Trust">
      <div style={{ position: "relative", maxWidth: 860 }}>
        <Dot n={7} anno={anno} top={-12} left={-12} />
        <SectionHead title="Give with confidence" />
        <Para text="Hope Council on Alcohol & Other Drug Abuse, Inc. is a local nonprofit serving Kenosha County since 1968. Your gift stays local, and you can see what it does: our annual impact report shows program reach, outcomes, and community value, year after year." />
        <div style={{ marginTop: 16, border: "var(--wf-border-dashed)", borderRadius: "var(--wf-radius)", background: "var(--wf-zone)", padding: "16px 20px" }}>
          <span style={{ font: "var(--wf-weight-bold) var(--wf-text-meta)/1.2 var(--wf-font-mono)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--wf-ink-muted)", display: "block", marginBottom: 6 }}>Placeholder — staff to provide</span>
          <Para text="Tax-deductibility statement (exact language and EIN needed)." size="var(--wf-text-small)" />
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 22 }}>
          <CtaButton label="View Impact" style={{ whiteSpace: "nowrap" }} onClick={ghGo("impact.html")} />
          <CtaButton label="Read the Annual Impact Report" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={ghGo("impact.html")} />
        </div>
      </div>
    </Band>
  );
}

function OtherWays({ anno }) {
  const { CtaButton } = DN;
  const link = { color: "var(--wf-ink)", textDecoration: "underline", textUnderlineOffset: 2, fontWeight: "var(--wf-weight-bold)" };
  return (
    <Band fill="alt" label="Other Ways To Support">
      <div style={{ position: "relative", maxWidth: 860 }}>
        <Dot n={8} anno={anno} top={-12} left={-12} />
        <SectionHead title="Not ready to give today?" />
        <p style={{ margin: 0, fontSize: "var(--wf-text-body)", color: "var(--wf-ink-soft)", lineHeight: 1.7, textWrap: "pretty" }}>
          There are other meaningful ways to be part of this work: volunteer your time, sponsor an event or program, attend an event, or share your story. To discuss an offline gift, planned giving, or anything else, contact Hope Council at <a href="tel:2626588166" style={link}>262-658-8166</a> or <a href="mailto:info@hopecouncil.org" style={link}>info@hopecouncil.org</a>.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 22 }}>
          <CtaButton label="Volunteer" style={{ whiteSpace: "nowrap" }} onClick={ghGo("volunteer.html")} />
          <CtaButton label="Sponsor" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={ghGo("sponsor.html")} />
          <CtaButton label="Events" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={ghGo("events.html")} />
          <CtaButton label="Share Your Story" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={ghGo("share-your-story.html")} />
        </div>
      </div>
    </Band>
  );
}

/* ---- Page assembly ------------------------------------------------------- */

const DN_FAQS = [
  ["How are donations used?", "Donations support Hope Council's programs in Kenosha County: no-cost peer support and recovery coaching, naloxone and risk-reduction supplies, prevention education, family programming, and community training. The annual impact report shows this work in verified numbers."],
  ["Is my donation tax-deductible?", "Placeholder — staff to confirm exact tax-deductibility language and EIN. A receipt is provided for every gift."],
  ["Can I give by check or phone instead of online?", "Yes. Call 262-658-8166 to give by phone or ask about mailing a check to Hope Council at 6103 39th Ave., Kenosha, WI 53142."],
  ["Can my business donate or sponsor?", "Both. Businesses can make a direct gift here, or explore a visible partnership — event, program, training, or supply sponsorship — through Sponsor Hope Council."],
];

function DonatePage() {
  return (
    <PageShell
      title="Donate"
      template="Interior / Conversion Page"
      version="v0.1"
      date="2026-06-15"
      note="Pages: donate.html"
      active="Get Involved"
      annotations={DN_ANNO}
    >
      {(anno) => (
        <React.Fragment>
          <Band fill="surface" label="Breadcrumb" style={{ borderTop: "none" }} pad="22px 56px 0">
            <Crumbs trail={[["Home", window.ghHOME], ["Get Involved", "get-involved.html"], ["Donate"]]} />
          </Band>
          <PageHeader
            anno={anno}
            n={3}
            eyebrow="Every gift gives hope."
            title="Donate to Hope Council"
            lead="Your gift keeps judgment-free help available in Kenosha County — no-cost peer support, life-saving supplies, prevention education, and support for families navigating substance use. Hope Council has served this community for more than 55 years. Donors are a big part of why."
            primary={["Donate Now", "#donate-now"]}
            secondary={[["Sponsor Instead", "sponsor.html"], ["Volunteer", "volunteer.html"]]}
          />
          <DonationBlock anno={anno} />
          <WhyGive anno={anno} />
          <GiftOptions anno={anno} />
          <DonorTrust anno={anno} />
          <OtherWays anno={anno} />
          <FaqPreview anno={anno} n={9} faqs={DN_FAQS} />
        </React.Fragment>
      )}
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(DonatePage));
