/* Hope Council — Home wireframe, assembly + review chrome. */

const KA = window.DooleyWireframeKit_e41309;
const { useState: useStateA } = React;

const ANNOTATIONS = [
  "Utility strip — persists site-wide. Crisis lines (911, 988, 262-657-7188) and main phone are tel: links; Donate routes to donate.html. Confirmed crisis numbers — load-bearing.",
  "Primary nav — each hub label is a link to its landing page; hovering opens the dropdown (the hub's own page is also the first item). Programs & Services and Resources open wide mega-menus with their sub-clusters. 'Get Help' button repeats the page's single primary CTA.",
  "Hero — eyebrow, H1, and lead are populated with production copy. Primary CTA 'Get Help' → get-help.html (the one solid CTA on this template). Secondary: Contact → contact.html; Programs & Services → programs-services.html.",
  "Hero media — optional image slot, pending direction. Remove for a text-led hero if preferred.",
  "Urgent Help Panel — shared component reused on Get Help, For Myself, For a Loved One. Sits directly under the hero, visually distinct (heavy border + zone fill, no color). Five crisis lines as tel: links; related links route to crisis/overdose/naloxone pages.",
  "Situation Pathways — the primary wayfinding device; intentionally dominant over the program grid (larger cards, icon slots). Routes: Help for Myself → get-help-for-myself.html · Loved One → get-help-for-a-loved-one.html · Court → court-referred-diversion.html · Testing → alcohol-drug-testing.html · Risk Reduction → risk-reduction.html · Parent/caregiver → youth-and-teens.html.",
  "Programs & Services grid — six category cards → court-referred-diversion, alcohol-drug-testing, family-services, prevention-advocacy, treatment, risk-reduction. Section CTA → programs-services.html. Kept secondary to the situation pathways above.",
  "Readiness-Neutral band — tone-setting message; CTA 'Start With Get Help' → get-help.html.",
  "Resource Library — six cards → substance-information, youth-and-teens (Teen Substance Prevention), recovery-support, overdose-prevention, local-directories, resources (overview).",
  "Community Trust — '55 years' is a refreshable stat. CTAs → about.html, impact.html. Image slot pending.",
  "Get Involved — six links → volunteer, donate, sponsor, request-a-speaker, recovery-meeting-calendar (Community Calendar), news. Band CTAs → get-involved.html, donate.html.",
  "Contact — address/phone/fax/email/hours are real, load-bearing content. Emergency reminder repeats crisis numbers (web forms are not monitored 24/7). Pathways → general-inquiry, referral-form, request-peer-support, volunteer-interest, request-a-speaker. CTA → contact.html.",
  "FAQ Preview — accordion, one panel open at a time; six questions with full production answers populated. 'View All FAQs' target TBD (routed to contact.html for now).",
];

function Toolbar({ anno, setAnno, grid, setGrid }) {
  const btn = (active) => ({
    font: "var(--wf-weight-bold) var(--wf-text-small)/1 var(--wf-font-mono)",
    padding: "7px 12px", borderRadius: "var(--wf-radius)", cursor: "pointer",
    border: "var(--wf-border-strong)",
    background: active ? "var(--wf-ink)" : "var(--wf-surface)",
    color: active ? "var(--wf-cta-ink)" : "var(--wf-ink-soft)",
  });
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 16 }}>
      <span style={{ font: "var(--wf-weight-bold) 10px/1 var(--wf-font-mono)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--wf-ink-faint)", marginRight: 4 }}>Review</span>
      <button type="button" style={btn(anno)} onClick={() => setAnno(!anno)}>Annotations {anno ? "ON" : "OFF"}</button>
      <button type="button" style={btn(grid)} onClick={() => setGrid(!grid)}>Grid {grid ? "ON" : "OFF"}</button>
    </div>
  );
}

function App() {
  const { PageFrame, AnnotationList } = KA;
  const [anno, setAnno] = useStateA(true);
  const [grid, setGrid] = useStateA(false);
  return (
    <div style={{ minHeight: "100vh", padding: "28px 28px 80px", overflowX: "auto" }}>
      <div style={{ width: "fit-content", margin: "0 auto", display: "flex", flexDirection: "column" }}>
        <Toolbar anno={anno} setAnno={setAnno} grid={grid} setGrid={setGrid} />
        <div style={{ display: "flex", gap: 28, alignItems: "flex-start" }}>
          <div style={{ flex: "0 0 1280px", width: 1280 }}>
            <PageFrame
              title="Home"
              template="Homepage"
              version="v0.1"
              date="2026-06-12"
              note="Pages: / (hope-council-prototype.html)"
              width={1280}
              maxWidth={1280}
              showGrid={grid}
            >
              <SiteUtilityStrip anno={anno} />
              <SiteNav anno={anno} />
              <Hero anno={anno} />
              <UrgentHelpPanel anno={anno} />
              <SituationPathways anno={anno} />
              <ProgramsServices anno={anno} />
              <ReadinessNeutral anno={anno} />
              <ResourceLibrary anno={anno} />
              <CommunityTrust anno={anno} />
              <GetInvolved anno={anno} />
              <ContactSection anno={anno} />
              <FaqPreview anno={anno} />
              <SiteFooter />
            </PageFrame>
          </div>
          {anno ? (
            <div style={{ flex: "0 0 320px", position: "sticky", top: 28, maxHeight: "calc(100vh - 56px)", overflowY: "auto" }}>
              <AnnotationList title="Annotations — Home" items={ANNOTATIONS} />
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

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