/* EquiWork website UI kit, Home screen. Composes DS primitives. */
const DS = window.EquiWorkDesignSystem_e8fee2;

const FilmPlay = () => <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 3.2v9.6l7.5-4.8z" fill="currentColor"/></svg>;
const FilmPause = () => <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3" width="3" height="10" fill="currentColor"/><rect x="9" y="3" width="3" height="10" fill="currentColor"/></svg>;

// Awareness film, muted autoplay loop, reduced-motion aware.
function AwarenessFilm() {
  const ref = React.useRef(null);
  const [playing, setPlaying] = React.useState(true);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { el.pause(); setPlaying(false); }
    else { el.play().then(() => setPlaying(true)).catch(() => setPlaying(false)); }
  }, []);
  const toggle = () => {
    const el = ref.current; if (!el) return;
    if (el.paused) { el.play(); setPlaying(true); } else { el.pause(); setPlaying(false); }
  };
  return (
    <div className="film-frame">
      {window.__STANDALONE ? (
        /* Offline single-file build: the film is streamed on the live site, so the still stands in for it. */
        <img src="assets/posh-pattern-poster.jpg" alt="Still from the EquiWork POSH awareness film" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      ) : (
        <React.Fragment>
          <video ref={ref} src="assets/posh-pattern.mp4" poster="assets/posh-pattern-poster.jpg" muted loop playsInline preload="metadata" />
          <button className="film-toggle" onClick={toggle} aria-label={playing ? "Pause film" : "Play film"} aria-pressed={playing}>
            {playing ? <FilmPause /> : <FilmPlay />}
          </button>
        </React.Fragment>
      )}
    </div>
  );
}

function AwarenessBand({ onNavigate }) {
  return (
    <Section bg="var(--canvas)">
      <div className="film-grid">
        <div>
          <div style={{ marginBottom: 16 }}><DS.Eyebrow>Awareness &amp; training</DS.Eyebrow></div>
          <h2 style={{ margin: 0, maxWidth: "18ch", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 34, lineHeight: 1.22, letterSpacing: "-0.2px", color: "var(--teal-800)" }}>
            It is rarely one incident. It is a pattern.
          </h2>
          <p style={{ margin: "14px 0 16px", maxWidth: "46ch", fontSize: 18, lineHeight: 1.6, color: "var(--ink-800)" }}>
            The conduct the Act asks an Internal Committee to weigh is often a sequence, not a single act, questions, messages, and pressure that read as ordinary in isolation.
          </p>
          <p style={{ margin: "0 0 8px", maxWidth: "46ch", fontSize: 16, lineHeight: 1.55, color: "var(--ink-700)" }}>
            We produce sober, scenario-based training that helps employees, managers and IC members recognise that pattern, and respond within the process the law requires.
          </p>
        </div>
        <div>
          <AwarenessFilm />
          <p className="film-caption">POSH awareness film, used in EquiWork employee sessions. Illustrative scenarios; not real persons.</p>
          <div style={{ marginTop: 10 }}><DS.Button variant="ghost" size="sm" style={{ whiteSpace: "nowrap" }} onClick={() => onNavigate("training")}>{"See the four training tracks\u00A0\u2192"}</DS.Button></div>
        </div>
      </div>
    </Section>
  );
}

function Section({ bg = "var(--canvas)", children, style }) {
  return (
    <section style={{ background: bg, padding: "80px 24px", ...style }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>{children}</div>
    </section>
  );
}

function SectionHead({ eyebrow, title, lead }) {
  return (
    <div style={{ maxWidth: "60ch", marginBottom: 40 }}>
      {eyebrow && <div style={{ marginBottom: 16 }}><DS.Eyebrow>{eyebrow}</DS.Eyebrow></div>}
      <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 34, lineHeight: 1.22, letterSpacing: "-0.2px", color: "var(--teal-800)" }}>{title}</h2>
      {lead && <p style={{ margin: "14px 0 0", fontSize: 18, lineHeight: 1.6, color: "var(--ink-700)" }}>{lead}</p>}
    </div>
  );
}

function HomeScreen({ onNavigate }) {
  const services = [
    { slug: "policy", t: "Policy drafting", d: "Act-compliant anti-sexual-harassment policy, drafted for your organisation, workforce, and sector." },
    { slug: "ic", t: "IC constitution", d: "Constitute your Internal Committee correctly, with a qualified external member and a defensible mandate." },
    { slug: "training", t: "Training", d: "Employee, manager, employer/board, and IC-member tracks, plain, practical, and legally grounded." },
    { slug: "audit", t: "Compliance audit", d: "Gap assessment against the Act, the Rules, Supreme Court directions, and the SHe-Box mandate.", just: true },
    { slug: "retainer", t: "Retainer advisory", d: "Standing counsel for your committee: live inquiries, annual returns, and questions as they arise.", just: true, hide: true },
  ];
  return (
    <div>
      {/* Hero: full-bleed committee-room photograph, copy overlaid on the quiet left wall */}
      <section className="hero">
        <picture className="hero-media">
          <source media="(max-width: 820px)" srcSet="assets/hero-committee-room-mobile.webp" />
          <img src="assets/hero-committee-room-desktop.webp" width="1672" height="941" alt="An empty committee room set for a formal inquiry, early morning light across the table." fetchpriority="high" decoding="async" />
        </picture>
        <span className="hero-scrim" aria-hidden="true"></span>
        <div className="hero-inner">
          <div className="hero-copy">
            <div style={{ maxWidth: "20ch", marginBottom: 20 }}><DS.Eyebrow>POSH advisory · India</DS.Eyebrow></div>
            <h1 style={{ margin: 0, maxWidth: "16ch", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 54, lineHeight: 1.14, letterSpacing: "-0.5px", color: "var(--teal-900)" }}>
              Compliance that holds up under inquiry
            </h1>
            <p style={{ margin: "22px 0 0", maxWidth: "46ch", fontSize: 20, lineHeight: 1.6, color: "var(--ink-900)" }}>
              Independent advisory on the Sexual Harassment of Women at Workplace Act, 2013 — policy, Internal Committee constitution, training, and inquiry support.
            </p>
            <div className="hero-actions">
              <DS.Button size="lg" className="btn-accent" onClick={() => onNavigate("engage")}>Request a confidential consultation</DS.Button>
              <DS.Button size="lg" variant="secondary" className="btn-onparchment" onClick={() => onNavigate("services")}>Explore services</DS.Button>
            </div>
          </div>
        </div>
      </section>

      {/* Services grid */}
      <Section bg="var(--parchment)">
        <SectionHead eyebrow="What we do" title="Advisory across the full compliance lifecycle" lead="From first policy to a live inquiry, each engagement proceeds under a written scope of work." />
        <div className="grid-3">
          {services.filter((s) => !s.hide).map((s) => (
            <DS.Card key={s.t} variant="service" title={s.t} footer={<DS.Button variant="ghost" size="sm" onClick={() => onNavigate("services/" + s.slug)}>Read more</DS.Button>}>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--ink-700)" }}>{s.d}</p>
            </DS.Card>
          ))}
        </div>
      </Section>

      {/* Awareness film */}
      <AwarenessBand onNavigate={onNavigate} />

      {/* Self-check */}
      <Section bg="var(--canvas)">
        <div className="grid-split">
          <div>
            <SectionHead eyebrow="Is the Act applicable to you?" title="A quick self-check" lead="If your workplace has ten or more employees, the Act applies. These are the obligations most often missed." />
            <DS.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 “Internal Complaints Committee”.</DS.StatuteCallout>
          </div>
          <div>
            <DS.ChecklistRow status="complete" label="Constitute an Internal Committee with a qualified external member" reference="s. 4, PoSH Act 2013" />
            <DS.ChecklistRow status="complete" label="Adopt and circulate an anti-harassment policy" reference="s. 19(b)" />
            <DS.ChecklistRow status="pending" label="Conduct annual awareness training for employees and IC members" reference="s. 19(c)" />
            <DS.ChecklistRow status="pending" label="File the annual return with the District Officer" reference="s. 21 & 22" />
            <DS.ChecklistRow status="pending" label="Display the penal consequences of sexual harassment at the workplace" reference="s. 19(f)" />
          </div>
        </div>
      </Section>

      {/* Insights teaser */}
      <Section bg="var(--parchment)">
        <SectionHead eyebrow="Insights" title="Case commentary, framed as analysis" />
        <div className="grid-3" style={{ alignItems: "stretch" }}>
          <DS.Card variant="judgment" style={{ display: "flex", flexDirection: "column" }}>
            <cite style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontStyle: "normal", color: "var(--brass-700)" }}>Supreme Court of India · 12 May 2023</cite>
            <p style={{ margin: "8px 0 12px", fontSize: 16, lineHeight: 1.55, color: "var(--ink-800)", flex: 1 }}>Aureliano Fernandes: the Court's directions on institutional compliance, a standing checklist for every committee.</p>
            <div><DS.Button variant="ghost" size="sm" onClick={() => onNavigate("insights/aureliano")}>Read the note</DS.Button></div>
          </DS.Card>
          <DS.Card variant="judgment" style={{ display: "flex", flexDirection: "column" }}>
            <cite style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontStyle: "normal", color: "var(--brass-700)" }}>Supreme Court of India · 2025 INSC 1415</cite>
            <p style={{ margin: "8px 0 12px", fontSize: 16, lineHeight: 1.55, color: "var(--ink-800)", flex: 1 }}>Dr Sohail Malik: the IC at the aggrieved woman's workplace may inquire, wherever the respondent works.</p>
            <div><DS.Button variant="ghost" size="sm" onClick={() => onNavigate("insights/malik")}>Read the note</DS.Button></div>
          </DS.Card>
          <DS.Card variant="judgment">
            <img src="assets/post-commute.png" alt="From the EquiWork awareness series" style={{ display: "block", width: "100%", height: "auto", borderRadius: "var(--radius-md)", border: "1px solid var(--hairline)", marginBottom: 12 }} />
            <cite style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontStyle: "normal", color: "var(--brass-700)" }}>EquiWork practice note</cite>
            <p style={{ margin: "8px 0 12px", fontSize: 16, lineHeight: 1.55, color: "var(--ink-800)" }}>Is the daily commute a workplace? After the Bombay High Court's 2026 ruling, jurisdiction is a fact the IC must decide first.</p>
            <DS.Button variant="ghost" size="sm" onClick={() => onNavigate("insights/own-committee")}>Read the note</DS.Button>
          </DS.Card>
        </div>
      </Section>

      {/* Resources teaser */}
      <Section bg="var(--canvas)">
        <SectionHead eyebrow="Resources" title="The primary sources, in one place" />
        <div className="grid-3" style={{ alignItems: "stretch" }}>
          <window.ResourceCard r={{ badge: "ACT", title: "The PoSH Act, 2013", d: "The bare Act, as updated: definitions, the committee, inquiry, and the employer's duties.", f: "posh-act-2013.pdf" }} />
          <window.ResourceCard r={{ badge: "RULES", title: "The PoSH Rules, 2013", d: "The Rules: inquiry procedure, workshops, annual-report form, and fees.", f: "posh-rules-2013.pdf" }} />
          <window.ResourceCard r={{ 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" }} />
        </div>
        <div style={{ marginTop: 24 }}><DS.Button variant="ghost" size="sm" onClick={() => onNavigate("resources")}>{"See all resources\u00A0\u2192"}</DS.Button></div>
      </Section>

      {/* Closing CTA band */}
      <section style={{ background: "var(--surface-teal)", padding: "88px 24px" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", textAlign: "left" }}>
          <div style={{ marginBottom: 18 }}><span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><span style={{ width: 24, height: 2, background: "var(--brass-300)" }} /><span style={{ fontSize: 12, fontWeight: 600, letterSpacing: "1.4px", textTransform: "uppercase", color: "var(--brass-300)" }}>Engage</span></span></div>
          <h2 style={{ margin: 0, maxWidth: "18ch", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 40, lineHeight: 1.2, letterSpacing: "-0.3px", color: "var(--on-teal)" }}>
            Discuss your requirement, in confidence.
          </h2>
          <p style={{ margin: "18px 0 32px", maxWidth: "52ch", fontSize: 18, lineHeight: 1.6, color: "var(--on-teal-mute)" }}>
            This is a first conversation about your organisation's compliance, not a complaint channel.
          </p>
          <DS.Button size="lg" variant="secondary" style={{ background: "transparent", color: "var(--on-teal)", borderColor: "var(--on-teal)" }} onClick={() => onNavigate("engage")}>Request a consultation</DS.Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, Section, SectionHead });
