/* Hope Council — Home wireframe, part 2
   Readiness-neutral band, resource library, community trust, get involved,
   contact, FAQ preview, footer. Content-populated with production copy.
   Depends on helpers exported by part 1. */

const K2 = window.DooleyWireframeKit_e41309;
const { useState: useState2 } = React;

/* ---- 7. Readiness-Neutral Support band ----------------------------------- */

function ReadinessNeutral({ anno }) {
  const { CtaButton } = K2;
  return (
    <Band fill="alt" label="Readiness-Neutral Support" pad="64px 56px">
      <div style={{ position: "relative", maxWidth: 760, margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", gap: 22, alignItems: "center" }}>
        <Dot n={8} anno={anno} top={-14} right={-14} />
        <h2 style={{ margin: 0, font: "var(--wf-weight-bold) var(--wf-text-h2)/1.25 var(--wf-font-sans)", color: "var(--wf-ink)", textWrap: "balance" }}>
          You do not have to be ready for everything to take one next step.
        </h2>
        <Para
          text={[
            "People contact Hope Council for many reasons. Some are ready for treatment. Some are not. Some are worried about a loved one. Some are trying to complete a requirement and move forward. Some need supplies, testing, education, or a conversation that feels private and real.",
            "Wherever you are starting, Hope Council will meet you with respect, practical options, and no lectures.",
          ]}
          style={{ alignItems: "center", textAlign: "center" }}
        />
        <CtaButton label="Start With Get Help" emphasis="secondary" size="lg" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/get-help.html")} />
      </div>
    </Band>
  );
}

/* ---- 8. Resource Library ------------------------------------------------- */

function ResourceLibrary({ anno }) {
  const cards = [
    ["Substance Information", "Information about alcohol, cannabis, opioids, fentanyl and xylazine, vaping, tobacco, and nicotine.", "View Substance Information"],
    ["Teen Substance Prevention", "Resources for talking with teens, recognizing warning signs, supporting youth, and helping parents and caregivers keep the conversation going.", "View Teen Substance Prevention"],
    ["Recovery Support", "Information about recovery options, supporting a loved one, stigma and language, and helping someone who does not want help.", "View Recovery Support"],
    ["Overdose Prevention", "Guidance on recognizing signs of opioid overdose, using naloxone, what to do after an overdose, and where to find local supplies.", "View Overdose Prevention"],
    ["Local Directories", "Local resource directories for treatment providers, inpatient treatment, crisis and immediate support, and safe medication disposal.", "View Local Directories"],
    ["Resources Overview", "Start here if you are not sure which resource you need.", "Browse Resources"],
  ];
  return (
    <Band fill="surface" label="Resource Library">
      <div style={{ position: "relative" }}>
        <Dot n={9} anno={anno} top={-12} left={-12} />
        <SectionHead kicker="Learn &amp; explore" title="Learn about substance use, prevention, recovery, and safety" intro="Hope Council's resource library helps people, families, schools, partners, and community members find practical information and local next steps." maxTitle={760} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {cards.map((c, i) => <WireCard key={i} title={c[0]} body={c[1]} cta={c[2]} />)}
        </div>
      </div>
    </Band>
  );
}

/* ---- 9. Community Trust --------------------------------------------------- */

function CommunityTrust({ anno }) {
  const { ImgPlaceholder, CtaButton } = K2;
  const points = [
    "More than 55 years serving Kenosha County",
    "Practical support for individuals, families, and communities",
    "Programs connected to prevention, recovery, diversion, testing, and risk reduction",
    "Community-rooted nonprofit support",
  ];
  return (
    <Band fill="alt" label="Community Trust">
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 48, alignItems: "center" }}>
        <Dot n={10} anno={anno} top={-12} left={-12} />
        <ImgPlaceholder kind="image" ratio="4:3" note="Community / org photo — slot" />
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <h2 style={{ margin: 0, font: "var(--wf-weight-bold) var(--wf-text-h2)/1.2 var(--wf-font-sans)", color: "var(--wf-ink)", textWrap: "balance" }}>A Local Resource for More Than 55 Years</h2>
          <Para
            text={[
              "Hope Council has served Kenosha County for more than 55 years, working with people, families, courts, schools, public health, treatment providers, coalitions, public agencies, volunteers, and community partners.",
              "Substance use affects individuals, families, and the whole community. Hope Council helps connect people to support, education, prevention, risk reduction, and recovery resources at more than one starting point.",
            ]}
          />
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {points.map((p, i) => (
              <li key={i} style={{ position: "relative", paddingLeft: 22, fontSize: "var(--wf-text-body)", color: "var(--wf-ink-soft)" }}>
                <span aria-hidden="true" style={{ position: "absolute", left: 0, color: "var(--wf-ink)", fontWeight: "var(--wf-weight-bold)" }}>▸</span>{p}
              </li>
            ))}
          </ul>
          <div style={{ display: "flex", gap: 12, marginTop: 4 }}>
            <CtaButton label="About Hope Council" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/about.html")} />
            <CtaButton label="Our Impact" emphasis="text" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/impact.html")} />
          </div>
        </div>
      </div>
    </Band>
  );
}

/* ---- 10. Get Involved ----------------------------------------------------- */

function GetInvolved({ anno }) {
  const { CtaButton } = K2;
  const cards = [
    ["Volunteer With Hope Council", "prototype-pages/volunteer.html"],
    ["Donate to Hope Council", "prototype-pages/donate.html"],
    ["Sponsor Hope Council", "prototype-pages/sponsor.html"],
    ["Request a Speaker", "prototype-pages/request-a-speaker.html"],
    ["Recovery Meeting Calendar", "prototype-pages/recovery-meeting-calendar.html"],
    ["News and Updates", "prototype-pages/news.html"],
  ];
  return (
    <Band fill="surface" label="Get Involved">
      <div style={{ position: "relative" }}>
        <Dot n={11} anno={anno} top={-12} left={-12} />
        <SectionHead
          kicker="Support the work"
          title="Help Build a Healthier Kenosha Community"
          intro={[
            "Hope Council's work is strengthened by volunteers, donors, sponsors, schools, employers, partner organizations, coalitions, and community members who want to help more people access practical support.",
            "Whether you want to volunteer, donate, sponsor, request a speaker, attend an event, or share your story, there is a way to get involved.",
          ]}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
          {cards.map((c, i) => (
            <a key={i} href={c[1]} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, border: "var(--wf-border)", borderRadius: "var(--wf-radius)", padding: "16px 18px", background: "var(--wf-surface)", textDecoration: "none" }}>
              <span style={{ font: "var(--wf-weight-bold) 15px/1.25 var(--wf-font-sans)", color: "var(--wf-ink)" }}>{c[0]}</span>
              <span aria-hidden="true" style={{ color: "var(--wf-ink-muted)" }}>▸</span>
            </a>
          ))}
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
          <CtaButton label="Get Involved" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/get-involved.html")} />
          <CtaButton label="Donate" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/donate.html")} />
        </div>
      </div>
    </Band>
  );
}

/* ---- 11. Contact ---------------------------------------------------------- */

function ContactSection({ anno }) {
  const { CtaButton } = K2;
  const tel = { color: "var(--wf-ink)", textDecoration: "underline", textUnderlineOffset: 2 };
  const pathways = [
    ["General Inquiry", "prototype-pages/general-inquiry.html"],
    ["Referral Form", "prototype-pages/referral-form.html"],
    ["Intoxicated Driver Intake Form", "prototype-pages/idp-intake-form.html"],
    ["Volunteer Interest Form", "prototype-pages/volunteer-interest.html"],
    ["Request a Speaker", "prototype-pages/request-a-speaker.html"],
  ];
  return (
    <Band fill="alt" label="Contact">
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
        <Dot n={12} anno={anno} top={-12} left={-12} />
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <SectionHead title="Contact Hope Council" intro="You can call, email, visit the office, or use the form that best fits what you need." />
          <div style={{ border: "var(--wf-border-dashed)", borderRadius: "var(--wf-radius)", padding: "14px 16px", fontSize: "var(--wf-text-small)", color: "var(--wf-ink-soft)", lineHeight: 1.55 }}>
            If this is an emergency, do not use a web form. Call <a href="tel:911" style={tel}>911</a> for immediate danger or suspected overdose. Call or text <a href="tel:988" style={tel}>988</a> for mental health or substance use crisis support. For local 24/7 crisis support, call <a href="tel:2626577188" style={tel}>262-657-7188</a>.
          </div>
          <div style={{ fontSize: "var(--wf-text-body)", color: "var(--wf-ink-soft)", lineHeight: 1.6 }}>
            <strong style={{ color: "var(--wf-ink)" }}>Hope Council on Alcohol &amp; Other Drug Abuse, Inc.</strong><br />
            6103 39th Ave., Kenosha, WI 53142<br />
            Phone: <a href="tel:2626588166" style={tel}>262-658-8166</a> · Fax: 262-658-8210<br />
            Email: <a href="mailto:info@hopecouncil.org" style={tel}>info@hopecouncil.org</a>
            <div style={{ marginTop: 10, color: "var(--wf-ink-muted)" }}>
              Office hours:<br />
              Monday through Thursday: 9:00 a.m. to 4:00 p.m.<br />
              Friday: 9:00 a.m. to 12:00 p.m.
            </div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, alignSelf: "center" }}>
          <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)" }}>Contact Pathways</span>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 8 }}>
            {pathways.map((p, i) => (
              <a key={i} href={p[1]} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", border: "var(--wf-border)", borderRadius: "var(--wf-radius)", padding: "11px 14px", background: "var(--wf-surface)", fontSize: "var(--wf-text-body)", fontWeight: "var(--wf-weight-medium)", color: "var(--wf-ink)", textDecoration: "none" }}>
                {p[0]}<span aria-hidden="true" style={{ color: "var(--wf-ink-muted)" }}>▸</span>
              </a>
            ))}
          </div>
          <div style={{ marginTop: 6 }}>
            <CtaButton label="Contact Hope Council" emphasis="secondary" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/contact.html")} />
          </div>
        </div>
      </div>
    </Band>
  );
}

/* ---- 12. FAQ Preview ------------------------------------------------------ */

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderTop: "var(--wf-border)" }}>
      <button type="button" onClick={onToggle} aria-expanded={open}
        style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "16px 4px", background: "none", border: "none", cursor: "pointer", textAlign: "left", font: "var(--wf-weight-bold) var(--wf-text-h3)/1.3 var(--wf-font-sans)", color: "var(--wf-ink)" }}>
        {q}<span aria-hidden="true" style={{ color: "var(--wf-ink-muted)", fontSize: 13, flexShrink: 0 }}>{open ? "▴" : "▾"}</span>
      </button>
      {open ? (
        <div style={{ padding: "0 4px 18px" }}>
          <Para text={a} />
        </div>
      ) : null}
    </div>
  );
}

function FaqPreview({ anno }) {
  const { CtaButton } = K2;
  const [open, setOpen] = useState2(0);
  const faqs = [
    ["What does Hope Council do?", "Hope Council helps people, families, and communities in Kenosha County navigate substance use, recovery, prevention, diversion, testing, family support, risk reduction, related mental health challenges, and community education."],
    ["Do I need to know what kind of help I need before I contact Hope Council?", "No. You can reach out even if you are not sure what to ask for yet. Hope Council can help you talk through options and find a practical next step."],
    ["Can family members contact Hope Council?", "Yes. Hope Council supports loved ones, parents, caregivers, and family members, not only the person using substances."],
    ["Where can I get naloxone or safer-use supplies?", "Hope Council supports access to naloxone, fentanyl and xylazine test strips, safer-use supplies, safe disposal kits, and the Public Health Vending Machine. Start with the Risk Reduction section or contact Hope Council for current information."],
    ["What if I have a court or citation requirement?", "Hope Council provides court-referred and diversion services, including IDP, AODA assessments, UDAAP, DAAP, Hold-Open / Alternative Agreements, General Diversion, and related pathways."],
    ["Are web forms monitored 24/7?", "No. Web forms should not be used for emergencies. If someone is in immediate danger or may be overdosing, call 911. For mental health or substance use crisis support, call or text 988. For local 24/7 crisis support, call 262-657-7188."],
  ];
  return (
    <Band fill="surface" label="FAQ Preview">
      <div style={{ position: "relative", maxWidth: 820, margin: "0 auto" }}>
        <Dot n={13} anno={anno} top={-12} right={-12} />
        <SectionHead title="Common Questions" center />
        <div style={{ borderBottom: "var(--wf-border)" }}>
          {faqs.map((f, i) => (
            <FaqItem key={i} q={f[0]} a={f[1]} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 24 }}>
          <CtaButton label="View All FAQs" emphasis="text" style={{ whiteSpace: "nowrap" }} onClick={() => (window.location.href = "prototype-pages/contact.html")} />
        </div>
      </div>
    </Band>
  );
}

/* ---- Footer --------------------------------------------------------------- */

function SiteFooter() {
  const { FooterBlock } = K2;
  return (
    <FooterBlock
      columns={[
        { heading: "Get Help", links: ["Find Help", "For Myself", "For a Loved One"] },
        { heading: "Programs & Services", links: ["Court-Referred & Diversion", "Testing", "Family Services", "Treatment", "Risk Reduction"] },
        { heading: "Resources", links: ["Substance Information", "Youth & Teens", "Recovery & Support", "Overdose Prevention", "Local Directories"] },
        { heading: "About & Involved", links: ["About Us", "Impact", "Volunteer", "Donate", "Contact"] },
      ]}
      legal="Hope Council website prototype. Copy on this page is production copy under client review."
    />
  );
}

Object.assign(window, {
  ReadinessNeutral, ResourceLibrary, CommunityTrust, GetInvolved, ContactSection, FaqPreview, SiteFooter,
});