/* EquiWork website, Insights: index of case notes + long-form articles. */
const insDS = window.EquiWorkDesignSystem_e8fee2;
const IA = "assets/";

const NOTES = [
  {
    slug: "aureliano", kind: "Judgments",
    cite: "Supreme Court of India · CA 2482/2014 · 12 May 2023",
    title: "Institutional compliance is not optional",
    implication: "The Court's directions read as a standing audit checklist for every employer's committee.",
    pdf: "resources/aureliano-fernandes-v-state-of-goa-2023.pdf",
  },
  {
    slug: "malik", kind: "Judgments",
    cite: "Supreme Court of India · 2025 INSC 1415 · 10 December 2025",
    title: "The committee that must hear you",
    implication: "An IC may inquire even when the respondent works in a different department or organisation.",
    pdf: "resources/dr-sohail-malik-v-union-of-india-2025.pdf",
  },
  {
    slug: "heard", kind: "Practice",
    cite: "EquiWork practice note · July 2026",
    title: "You will be heard, no matter where the other person works",
    implication: "What the Malik ruling means for a woman whose harasser sits in another organisation.",
    hero: "post-11-jul.png",
  },
  {
    slug: "travels", kind: "Practice",
    cite: "EquiWork practice note · July 2026",
    title: "Your protection travels with you",
    implication: "The Act's 'workplace' follows the work, client sites, travel, and the co-working desk.",
    hero: "post-18-jul.png",
  },
  {
    slug: "own-committee", kind: "Practice",
    cite: "EquiWork practice note · July 2026",
    title: "Is the daily commute a workplace?",
    implication: "After Siddhesh Satpute (Bombay HC, 2026), jurisdiction is a fact the IC must decide first.",
    hero: "post-commute.png",
  },
];

function NoteCard({ n, onNavigate }) {
  const { Exhibit } = window;
  return (
    <insDS.Card variant="judgment" style={{ display: "flex", flexDirection: "column" }}>
      {n.hero && <div style={{ margin: "0 0 14px" }}><Exhibit src={IA + n.hero} caption={null} style={{ padding: 8 }} /></div>}
      <cite style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontStyle: "normal", color: "var(--brass-700)" }}>{n.cite}</cite>
      <h3 style={{ margin: "8px 0 6px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 21, lineHeight: 1.3, color: "var(--teal-800)" }}>{n.title}</h3>
      <p style={{ margin: "0 0 14px", fontSize: 15, lineHeight: 1.55, color: "var(--ink-700)", flex: 1 }}>{n.implication}</p>
      <div><insDS.Button variant="ghost" size="sm" onClick={() => onNavigate("insights/" + n.slug)}>Read the note</insDS.Button></div>
    </insDS.Card>
  );
}

function InsightsIndex({ onNavigate }) {
  const { Section, CtaBand, PageHead } = window;
  const [filter, setFilter] = React.useState("All");
  const tabs = ["All", "Judgments", "Practice"];
  const shown = NOTES.filter((n) => filter === "All" || n.kind === filter);
  return (
    <div className="page-insights">
      <PageHead crumbs={[{ label: "Home", href: "#home" }, { label: "Insights" }]} eyebrow="Insights" title="Case commentary, framed as analysis"
        standfirst="Notes on judgments and practice under the Act. This is analysis for committees and compliance leads, it does not sensationalise, and it never implies an outcome was won." wide />
      <Section bg="var(--canvas)">
        <div style={{ display: "flex", gap: 8, marginBottom: 32 }}>
          {tabs.map((t) => (
            <button key={t} onClick={() => setFilter(t)} style={{ font: "500 14px var(--font-sans)", padding: "7px 16px", borderRadius: "var(--radius-md)", cursor: "pointer", border: "1px solid " + (filter === t ? "var(--teal-800)" : "var(--hairline)"), background: filter === t ? "var(--teal-800)" : "transparent", color: filter === t ? "var(--on-teal)" : "var(--ink-700)", transition: "background .15s ease" }}>{t}</button>
          ))}
        </div>
        <div className="grid-3" style={{ alignItems: "stretch" }}>
          {shown.map((n) => <NoteCard key={n.slug} n={n} onNavigate={onNavigate} />)}
        </div>
      </Section>
      <CtaBand title="Discuss how a ruling affects your committee." lead="If a decision summarised here touches a live process in your organisation, raise it in confidence." onClick={() => onNavigate("engage")} />
    </div>
  );
}

/* ---------- Long-form articles ---------- */

function ArticleShell({ note, dark, standfirst, children, onNavigate }) {
  const { Section, CtaBand, Exhibit } = window;
  return (
    <div className="page-insights">
      {dark ? (
        <section style={{ background: "var(--surface-teal)", padding: "48px 24px 72px" }}>
          <div style={{ maxWidth: 720, margin: "0 auto" }}>
            <p style={{ margin: "0 0 20px", fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--brass-300)" }}>{note.cite}</p>
            <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 42, lineHeight: 1.16, letterSpacing: "-0.4px", color: "var(--on-teal)" }}>{note.title}</h1>
            <p style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontSize: 21, lineHeight: 1.55, color: "var(--on-teal-mute)" }}>{standfirst}</p>
          </div>
        </section>
      ) : (
        <section style={{ background: "var(--parchment)", padding: "40px 24px 64px" }}>
          <div style={{ maxWidth: 720, margin: "0 auto" }}>
            <div style={{ marginBottom: 24 }}><insDS.Breadcrumb items={[{ label: "Home", href: "#home" }, { label: "Insights", href: "#insights" }, { label: note.title }]} /></div>
            {note.hero && <div style={{ margin: "0 0 28px" }}><Exhibit src={IA + note.hero} caption="From the EquiWork awareness series." /></div>}
            <p style={{ margin: "0 0 14px", fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--brass-700)" }}>{note.cite}</p>
            <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 38, lineHeight: 1.18, letterSpacing: "-0.4px", color: "var(--teal-800)" }}>{note.title}</h1>
            <p style={{ margin: "18px 0 0", fontFamily: "var(--font-display)", fontSize: 21, lineHeight: 1.55, color: "var(--ink-700)" }}>{standfirst}</p>
          </div>
        </section>
      )}
      <Section bg="var(--canvas)">
        <article style={{ maxWidth: 720, margin: "0 auto" }}>
          {children}
          <p style={{ margin: "36px 0 0", paddingTop: 20, borderTop: "1px solid var(--hairline)", fontSize: 14, lineHeight: 1.55, color: "var(--ink-600)" }}>
            This note is commentary for compliance purposes, not legal advice, and does not suggest any outcome for any party.
            {note.pdf && <span> Read the full judgment: <a href={note.pdf} download style={{ color: "var(--brass-700)", textDecoration: "underline" }}>download the PDF</a>.</span>}
          </p>
        </article>
      </Section>
      <CtaBand title="Discuss how this affects your committee." onClick={() => onNavigate("engage")} />
    </div>
  );
}

function PlaceholderBody() {
  return (
    <div style={{ margin: "24px 0", padding: "22px 24px", border: "1px dashed var(--hairline)", borderRadius: "var(--radius-lg)", background: "var(--parchment)" }}>
      <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 14, lineHeight: 1.6, color: "var(--ink-600)" }}>[ARTICLE BODY: paste LinkedIn copy, to be restructured as What happened → What it means → What it changes for your IC → Practical checklist. Hook lines, emoji, hashtags, and follow/DM CTAs will be stripped.]</p>
    </div>
  );
}

function AurelianoArticle({ note, onNavigate }) {
  const { proseStyles: ps } = window;
  return (
    <ArticleShell note={note} dark standfirst="A decade after the Act, the Supreme Court found its implementation still wanting, and issued directions every employer's committee should read as a compliance checklist." onNavigate={onNavigate}>
      <h2 style={{ ...ps.h2, marginTop: 0 }}>What happened</h2>
      <p style={ps.p}>A college disciplinary inquiry ended in dismissal, after hearings the respondent could not meaningfully attend, on timelines no one could defend. The Supreme Court set the dismissal aside for breach of natural justice and remitted the matter, then widened its lens to the state of PoSH implementation across public and private institutions.</p>
      <h2 style={ps.h2}>What the Court held</h2>
      <p style={ps.p}>Haste is as fatal as delay: an inquiry that denies a fair opportunity to be heard cannot stand, however serious the allegations. And the machinery of the Act (committees, training, returns) must actually exist and actually work.</p>
      <blockquote style={ps.pull}>However salutary this enactment may be, it will never succeed in providing dignity and respect that women deserve at the workplace unless and until there is strict adherence to the enforcement regime and a proactive approach by all the State and non-State actors.</blockquote>
      <insDS.StatuteCallout citation="s. 4(1), PoSH Act 2013">Every employer of a workplace shall, by an order in writing, constitute a Committee to be known as the &ldquo;Internal Complaints Committee&rdquo;.</insDS.StatuteCallout>
      <h2 style={ps.h2}>What it changes for your IC</h2>
      <p style={ps.p}>The directions instruct employers to verify committee constitution, publish committee details, and, pointedly, to familiarise members with the manner in which an inquiry ought to be conducted, from receipt of complaint to report. A committee that cannot show this on paper is now visibly non-compliant, not quietly so.</p>
      <h2 style={ps.h2}>Practical checklist</h2>
      <insDS.ChecklistRow status="pending" label="Committee constituted in writing, with a qualified external member" reference="s. 4" />
      <insDS.ChecklistRow status="pending" label="Committee details declared and displayed" reference="s. 19(b)" />
      <insDS.ChecklistRow status="pending" label="Members oriented on the conduct of an inquiry, with records" reference="s. 19(c), direction (iv)" />
      <insDS.ChecklistRow status="pending" label="Inquiry procedure honours notice, hearing, and representation" reference="s. 11" />
      <insDS.ChecklistRow status="pending" label="Annual report prepared and submitted" reference="s. 21" />
    </ArticleShell>
  );
}

function MalikArticle({ note, onNavigate }) {
  const { proseStyles: ps } = window;
  return (
    <ArticleShell note={note} dark standfirst="The Supreme Court holds that the Internal Committee at the aggrieved woman's workplace may inquire into her complaint, even when the respondent works in a different department altogether." onNavigate={onNavigate}>
      <h2 style={{ ...ps.h2, marginTop: 0 }}>What happened</h2>
      <p style={ps.p}>An officer of one Government department alleged sexual harassment by an officer of another. She complained to the Internal Committee constituted at her own department. The respondent challenged jurisdiction: the committee empowered to inquire, he argued, could only be the one at his workplace. The Tribunal and the High Court rejected the challenge; the Supreme Court agreed with them.</p>
      <h2 style={ps.h2}>What the Court held</h2>
      <blockquote style={ps.pull}>The phrase &lsquo;where the respondent is an employee&rsquo; as contained in Section 11 of the POSH Act, cannot be interpreted to mean that ICC proceedings against a &lsquo;respondent&rsquo; may only be instituted before the ICC constituted at the workplace of the &lsquo;respondent&rsquo;.</blockquote>
      <p style={ps.p}>The Court anchored the conclusion in the breadth of the Act's definition of workplace, protection follows the woman's work, not the respondent's employment.</p>
      <insDS.StatuteCallout citation="s. 2(o)(v), PoSH Act 2013">any place visited by the employee arising out of or during the course of employment including transportation by the employer for undertaking such journey</insDS.StatuteCallout>
      <h2 style={ps.h2}>What it changes for your IC</h2>
      <p style={ps.p}>A committee can no longer decline a complaint because the respondent sits elsewhere, in another department, another group company, or a vendor. Your IC takes the complaint, conducts the fact-finding inquiry, and transmits its report; the respondent's employer must cooperate with the inquiry and act on the report. Multi-entity campuses, client-site work, and deputation arrangements all now have a clear answer to &ldquo;who hears this?&rdquo;</p>
      <h2 style={ps.h2}>Practical checklist</h2>
      <insDS.ChecklistRow status="pending" label="Intake procedure accepts complaints against non-employee respondents" reference="s. 9" />
      <insDS.ChecklistRow status="pending" label="Protocol for seeking cooperation from the respondent's employer" reference="s. 19(f)" />
      <insDS.ChecklistRow status="pending" label="Report transmission path to the respondent's organisation documented" reference="s. 13" />
      <insDS.ChecklistRow status="pending" label="Vendor and client agreements reflect the cooperation duty" />
    </ArticleShell>
  );
}

function CommuteBody() {
  const { proseStyles: ps } = window;
  return (
    <div>
      <p style={ps.p}>Is an employee's daily commute a “workplace” under the POSH Act? The Bombay High Court has just answered, and every IC should take note.</p>
      <p style={ps.p}>In Siddhesh Pradeep Satpute v. State Bank of India (16 June 2026), an incident was alleged in a shared autorickshaw during an employee's ordinary commute. The employer's Internal Committee inquired and found against him. The High Court set that order aside.</p>
      <p style={ps.p}>Why? Section 2(o)(v) covers transport as a “workplace” only when it is provided by the employer. A public or self-arranged commute generally is not. The Court expressed no view on the merits, the inquiry simply happened in the wrong forum.</p>
      <blockquote style={ps.pull}>Whether the incident occurred at a “workplace” is a jurisdictional fact. Decide it first, record the finding, and only then proceed with the inquiry.</blockquote>
      <h2 style={ps.h2}>Two takeaways</h2>
      <p style={ps.p}><strong>1. Employers: your cab and shuttle arrangements are covered.</strong> Who arranges the transport is what matters.</p>
      <p style={ps.p}><strong>2. IC members: open every inquiry with a recorded jurisdiction finding.</strong> How does your IC document this step?</p>
    </div>
  );
}

function TravelsBody() {
  const { proseStyles: ps } = window;
  return (
    <div>
      <p style={ps.p}>“It happened at the client's office, so our IC can't do anything, right?”</p>
      <p style={ps.p}>A manager heard this from a team member last week. She'd been made deeply uncomfortable during an offsite visit, and assumed that because it wasn't inside her own office, she had nowhere to go.</p>
      <p style={ps.p}>She was wrong, and this misconception silences far too many people. Under the POSH Act, “workplace” (Section 2(o)) includes any place an employee visits in the course of employment: client sites, offsites, work travel, even employer-arranged transport.</p>
      <p style={ps.p}>In December 2025, the Supreme Court (Dr Sohail Malik v. Union of India) reaffirmed this wide reading. Her own organisation's Internal Committee can take up the inquiry even when the respondent belongs to another department or entity, whose employer must cooperate under Section 19(f).</p>
      <h2 style={ps.h2}>So what should happen next?</h2>
      <p style={ps.p}>The manager listens with empathy, and does not investigate it himself. He connects her to the IC promptly, without pressure either way. She can then file a written complaint within three months of the incident, the IC may extend by another three for recorded reasons.</p>
      <blockquote style={ps.pull}>A safe workplace doesn't end at your office door. Neither does the law.</blockquote>
    </div>
  );
}

function PracticeArticle({ note, onNavigate, statute, lead, body }) {
  const { proseStyles: ps } = window;
  return (
    <ArticleShell note={note} standfirst={lead} onNavigate={onNavigate}>
      {body || <PlaceholderBody />}
      {statute}
    </ArticleShell>
  );
}

function HeardBody() {
  const { proseStyles: ps } = window;
  return (
    <div>
      <p style={ps.p}>The person who harassed you works at a different company. Does that leave you with no way to complain?</p>
      <p style={ps.p}>It doesn't.</p>
      <p style={ps.p}>In Dr Sohail Malik v. Union of India (Supreme Court, December 2025), the Court read the POSH Act the way it was meant to be read, as social-welfare legislation that protects the woman, not one that shields a harasser behind an org chart.</p>
      <h2 style={ps.h2}>Three things it clarified</h2>
      <p style={ps.p}><strong>1. “Workplace” is defined broadly.</strong> Under Section 2(o) it reaches any place you visit in the course of your work, not just your own office floor.</p>
      <p style={ps.p}><strong>2. The Internal Committee at the aggrieved woman's workplace can inquire</strong> into her complaint even when the respondent sits in a different department or organisation. Section 11 doesn't lock the process to the respondent's own IC.</p>
      <p style={ps.p}><strong>3. The respondent's employer has a duty to cooperate</strong> and share information with that IC (Section 19(f)).</p>
      <h2 style={ps.h2}>The takeaway for HR and IC members</h2>
      <p style={ps.p}>A vendor, a client, someone from another office, none of these is a loophole. Build your redressal process so a cross-organisation complaint isn't quietly turned away at the door.</p>
    </div>
  );
}

function ArticleScreen({ route = "insights", onNavigate }) {
  const slug = route.split("/")[1];
  const note = NOTES.find((n) => n.slug === slug);
  if (!note) return <InsightsIndex onNavigate={onNavigate} />;
  if (note.slug === "aureliano") return <AurelianoArticle note={note} onNavigate={onNavigate} />;
  if (note.slug === "malik") return <MalikArticle note={note} onNavigate={onNavigate} />;
  if (note.slug === "heard") return (
    <PracticeArticle note={note} onNavigate={onNavigate} body={<HeardBody />}
      lead="After Dr Sohail Malik (2025), the committee at your workplace must hear your complaint, whoever employs the person you are complaining about."
      statute={<insDS.StatuteCallout citation="s. 9(1), PoSH Act 2013">Any aggrieved woman may make, in writing, a complaint of sexual harassment at workplace to the Internal Committee if so constituted, or the Local Committee, in case it is not so constituted, within a period of three months from the date of incident…</insDS.StatuteCallout>} />
  );
  if (note.slug === "travels") return (
    <PracticeArticle note={note} onNavigate={onNavigate} body={<TravelsBody />}
      lead="The Act's definition of workplace follows the work: the client site, the conference, the cab the employer arranged, the co-working desk."
      statute={<insDS.StatuteCallout citation="s. 2(o)(v), PoSH Act 2013">any place visited by the employee arising out of or during the course of employment including transportation by the employer for undertaking such journey</insDS.StatuteCallout>} />
  );
  return (
    <PracticeArticle note={note} onNavigate={onNavigate} body={<CommuteBody />}
      lead="The Act's 'workplace' reaches employer-provided transport, but a self-arranged commute is a different question, and jurisdiction must be settled before the inquiry begins."
      statute={<insDS.StatuteCallout citation="s. 2(o)(v), PoSH Act 2013">any place visited by the employee arising out of or during the course of employment including transportation by the employer for undertaking such journey</insDS.StatuteCallout>} />
  );
}

Object.assign(window, { ArticleScreen, InsightsNotes: NOTES });
