/* EquiWork website, Resources: the statutory reference library as downloads. */
const resDS = window.EquiWorkDesignSystem_e8fee2;

const RESOURCES = [
  { g: "Statute", items: [
    { badge: "ACT", title: "The PoSH Act, 2013", d: "The Sexual Harassment of Women at Workplace (Prevention, Prohibition and Redressal) Act, bare Act, as updated.", f: "posh-act-2013.pdf" },
    { badge: "RULES", title: "The PoSH Rules, 2013", d: "The Rules: inquiry procedure, workshops, annual-report form, and fees.", f: "posh-rules-2013.pdf" },
    { badge: "AMENDMENT", title: "Companies (Accounts) Amendment", d: "The board-report disclosure of compliance with the Act, for companies.", f: "companies-act-amendment.pdf" },
  ]},
  { g: "SHe-Box", items: [
    { badge: "BROCHURE", title: "SHe-Box brochure", d: "The Ministry's brochure on the centralised complaints and IC-registry portal.", f: "shebox-brochure.pdf" },
    { badge: "CHECKLIST", title: "SHe-Box compliance checklist", d: "The portal's own checklist of what a compliant workplace must have in place.", f: "shebox-compliance-checklist.pdf" },
  ]},
  { g: "Judgments", items: [
    { badge: "JUDGMENT", title: "Aureliano Fernandes v. State of Goa (2023)", d: "Supreme Court, natural justice in inquiries, and nationwide compliance directions.", f: "aureliano-fernandes-v-state-of-goa-2023.pdf" },
    { badge: "JUDGMENT", title: "Dr Sohail Malik v. Union of India (2025)", d: "Supreme Court, the IC at the aggrieved woman's workplace may inquire, wherever the respondent works.", f: "dr-sohail-malik-v-union-of-india-2025.pdf" },
  ]},
];

function ResourceCard({ r }) {
  return (
    <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 8, background: "#fff", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: "22px 24px" }}>
      <span aria-hidden="true" style={{ position: "absolute", top: -1, left: -1, width: 16, height: 16, borderTop: "2px solid var(--brass-500)", borderLeft: "2px solid var(--brass-500)", borderTopLeftRadius: "var(--radius-lg)" }}></span>
      <span style={{ alignSelf: "flex-start", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "1px", color: "var(--brass-700)", background: "var(--brass-100)", padding: "3px 8px", borderRadius: "var(--radius-xs)" }}>{r.badge}</span>
      <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19, lineHeight: 1.3, color: "var(--teal-800)" }}>{r.title}</h3>
      <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--ink-700)", flex: 1 }}>{r.d}</p>
      <div><resDS.Button as="a" href={"resources/" + r.f} download variant="ghost" size="sm">Download</resDS.Button></div>
    </div>
  );
}

function ResourcesScreen({ onNavigate }) {
  const { Section, CtaBand, PageHead } = window;
  return (
    <div>
      <PageHead crumbs={[{ label: "Home", href: "#home" }, { label: "Resources" }]} eyebrow="Resources" title="The reference library"
        standfirst="The primary sources every committee should hold: the Act and Rules, the government guidance, the SHe-Box material, and the two Supreme Court decisions that define current practice. All are public documents, offered here as downloads." wide />
      <Section bg="var(--canvas)">
        {RESOURCES.map((grp) => (
          <div key={grp.g} style={{ marginBottom: 48 }}>
            <div style={{ marginBottom: 20 }}><resDS.Eyebrow>{grp.g}</resDS.Eyebrow></div>
            <div className="grid-3" style={{ alignItems: "stretch" }}>
              {grp.items.map((r) => <ResourceCard key={r.f} r={r} />)}
            </div>
          </div>
        ))}
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--ink-600)", maxWidth: "68ch" }}>These documents are reproduced for reference. For anything that turns on a current deadline or a state-specific direction, confirm the position with the District Officer or obtain advice.</p>
      </Section>
      <CtaBand title="Need these turned into practice?" lead="The audit measures your organisation against everything in this library, and leaves you a remediation plan." onClick={() => onNavigate("engage")} />
    </div>
  );
}

Object.assign(window, { ResourcesScreen, ResourceCard });