// Public Housing page — capability statement for housing authorities, in the site's own design system.

function PublicHousingPage() {
  const groups = [
    {
      title: "For your residents",
      items: [
        ["Every call answered", "24/7, in 30+ languages"],
        ["Work orders", "intake → triage → dispatch → closure"],
        ["Recert outreach", "deadlines met, not missed"],
        ["Emergency outreach", "thousands reached when it matters"],
      ],
    },
    {
      title: "For your landlords",
      items: [
        ["Landlord services", "recruiting, RFTA, rent increases"],
        ["Leasing & turnover", "vacant units filled faster"],
        ["Inspections", "scheduling, NSPIRE readiness"],
      ],
    },
    {
      title: "For your staff",
      items: [
        ["Knowledge base", "instant answers from your own policies"],
        ["Onboarding", "new caseworkers productive in weeks"],
        ["Portability", "port-ins and port-outs, handled"],
      ],
    },
    {
      title: "For leadership & the board",
      items: [
        ["Board & HUD reporting", "packets from live data"],
        ["Forecasting", "voucher utilization, budgets, demand"],
        ["Anomaly flags", "caught before they're findings"],
        ["Records requests", "days, not months"],
      ],
    },
  ];

  const thaFacts = [
    "Resident calls answered across 15 housing communities",
    "Requests completed end-to-end — no staff in the loop",
    "Every conversation captured as structured agency data",
    "UAT, staff training, and leadership sign-off at every milestone",
  ];

  return (
    <window.Page active="industries">
      {/* Hero */}
      <section data-section="hero" style={{ padding: "100px 32px 60px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Eyebrow>Public housing · A capability statement for housing authorities</Eyebrow>
          <Display size={88} style={{ marginTop: 24, maxWidth: 1000 }}>
            What happens when a resident calls at <span style={{ color: SIGNAL }}>9 p.m.?</span>
          </Display>
          <Lede style={{ marginTop: 32, fontSize: 20 }}>
            <Wordmark /> deploys managed AI workforces for housing operations — on a private
            on-premises appliance or in a private cloud, so your data never leaves your environment.
            Not a chatbot. Not a pilot. Production systems we build and operate for you.
          </Lede>
          <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
            <Button href="tel:+18136875200" variant="primary" size="lg">Call the live demo · (813) 687-5200</Button>
            <Button href="contact.html" variant="secondary" size="lg">Talk to us →</Button>
          </div>
        </div>
      </section>

      {/* Stats — dark band */}
      <Section dark paddingY={72}>
        <Eyebrow color="rgba(245,241,234,0.78)">The numbers, from live deployments</Eyebrow>
        <div data-grid="4col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48, marginTop: 24 }}>
          <StatCard dark value="100%" label="Data stays in your environment" />
          <StatCard dark value="24/7" label="No hold times, no voicemail" />
          <StatCard dark value="30+" label="Languages, live on the phone" />
          <StatCard dark value="75%" label="Of client calls arrive after hours" />
        </div>
      </Section>

      {/* Capability groups */}
      <Section paddingY={88}>
        <Eyebrow>What becomes possible</Eyebrow>
        <H2 style={{ marginTop: 16, maxWidth: 760 }}>
          One workforce, serving everyone<br />your authority answers to.
        </H2>
        <div data-grid="2col" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 48,
        }}>
          {groups.map(g => (
            <div key={g.title} style={{
              background: CREAM, border: `1px solid ${INK}11`,
              borderRadius: 20, padding: "28px 32px",
            }}>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em",
                textTransform: "uppercase", color: SIGNAL, fontWeight: 600,
                paddingBottom: 12, marginBottom: 6, borderBottom: `2px solid ${SIGNAL}`,
              }}>{g.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {g.items.map(([name, tail]) => (
                  <li key={name} style={{
                    display: "flex", gap: 12, alignItems: "baseline", flexWrap: "wrap",
                    padding: "13px 0", borderBottom: `1px solid ${INK}11`,
                  }}>
                    <span style={{ color: SIGNAL, fontWeight: 800 }}>—</span>
                    <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 16, letterSpacing: "-0.015em", color: INK }}>{name}</span>
                    <span style={{ fontSize: 14, color: MIST }}>{tail}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 14, color: MIST, fontStyle: "italic", marginTop: 24 }}>
          Starting points, not a menu — every engagement is scoped to your authority's mission, systems, and priorities.
        </div>
      </Section>

      {/* THA proof — dark band */}
      <Section dark paddingY={88}>
        <div style={{ position: "relative", overflow: "hidden" }}>
          <div data-decorative="true" aria-hidden="true" style={{ position: "absolute", right: -60, top: -80, opacity: 0.10 }}>
            <NoralMark size={420} color={SIGNAL} />
          </div>
          <div style={{ position: "relative" }}>
            <Eyebrow color={SIGNAL}>Proven in production · Tampa Housing Authority</Eyebrow>
            <H2 color={CREAM} style={{ marginTop: 16, maxWidth: 820 }}>
              A multilingual AI voice workforce,<br />live at a housing authority <span style={{ color: SIGNAL }}>today.</span>
            </H2>
            <ul style={{ listStyle: "none", padding: 0, margin: "36px 0 0", display: "flex", flexDirection: "column", gap: 12, maxWidth: 640 }}>
              {thaFacts.map((f, i) => (
                <li key={i} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.05em",
                    color: SIGNAL, fontWeight: 600, flexShrink: 0, paddingTop: 2,
                  }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: 16, color: CREAM, lineHeight: 1.5 }}>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Section>

      {/* CTA */}
      <Section paddingY={88} style={{ background: CREAM }}>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <Eyebrow>Hear it for yourself</Eyebrow>
          <H2 style={{ marginTop: 16, marginBottom: 24 }}>The demo is a phone call away.</H2>
          <Lede style={{ margin: "0 auto 32px" }}>
            Call <span style={{ fontWeight: 700, color: INK }}>(813) 687-5200</span> and talk to a <Wordmark /> worker
            right now — then imagine a workforce of them inside your authority.
          </Lede>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Button href="tel:+18136875200" variant="primary" size="lg">Call (813) 687-5200</Button>
            <Button href="contact.html" variant="secondary" size="lg">Talk to us →</Button>
          </div>
        </div>
      </Section>
    </window.Page>
  );
}

window.PublicHousingPage = PublicHousingPage;