/* EquiWork website UI kit, About screen. Founder profile (from CV) + practice mission. */
const DS = window.EquiWorkDesignSystem_e8fee2;

function AboutSection({ 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 AboutHead({ eyebrow, title, lead, maxWidth = "60ch" }) {
  return (
    <div style={{ maxWidth, 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 AboutScreen({ onNavigate }) {
  const principles = [
    ["Statute first", "Every deliverable traces to a section of the Act and the 2013 Rules, never generic template text."],
    ["Process over outcome", "A defensible procedure protects the aggrieved person, the respondent, and the organisation alike. We deliver process, not promises."],
    ["Confidential by construction", "Restraint is a professional value. Sensitive information is handled, and held, with statutory care."],
  ];
  const facts = [
    ["15 years", "Service in the Indian Air Force, in legal and HR command roles"],
    ["200+", "Disciplinary and separation cases adjudicated end-to-end"],
    ["2,000+", "Employee grievances resolved within statutory timelines"],
    ["500+", "Officers and staff trained on conduct and compliance"],
  ];
  const education = [
    ["University of Delhi", "LLB"],
    ["Jamia Millia Islamia", "Master's in Human Resource Management"],
    ["IIM Lucknow", "Defence General Management Programme"],
  ];
  const certifications = [
    "Professional Knowledge Course in Administrative Management, Air Force Administrative College",
    "Certified in Leadership & Behavioural Science, Air Force Administrative College",
  ];
  const commendations = [
    "Commendation by the Chief of Air Staff, Indian Air Force, for dedication and professional ability resulting in a praiseworthy contribution.",
    "Commendation by the Air Officer Commanding-in-Chief, Eastern Air Command, for exemplary dedication and professional competence.",
  ];

  return (
    <div className="page-about">
      {/* Page header */}
      <AboutSection bg="var(--parchment)" style={{ padding: "96px 24px" }}>
        <div className="grid-split about">
          <div>
            <div style={{ maxWidth: "22ch", marginBottom: 20 }}><DS.Eyebrow>About EquiWork</DS.Eyebrow></div>
            <h1 style={{ margin: 0, maxWidth: "20ch", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 50, lineHeight: 1.14, letterSpacing: "-0.5px", color: "var(--teal-800)" }}>
            </h1>
            <p style={{ margin: "22px 0 0", maxWidth: "58ch", fontSize: 20, lineHeight: 1.6, color: "var(--ink-800)" }}>
              EquiWork is an independent POSH advisory led by a former Indian Air Force legal and HR officer who has chaired inquiries, drafted the policies, and defended the process, not a template vendor.
            </p>
          </div>
          <div style={{ aspectRatio: "928 / 1392", borderRadius: "var(--radius-xl, 16px)", overflow: "hidden", border: "1px solid var(--hairline)", boxShadow: "0 1px 3px rgba(11,42,47,.10)" }}>
            <img src="assets/portrait-hero.jpg" alt="Wing Commander Divakar Tomar (Retired), founder of EquiWork" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
          </div>
        </div>
      </AboutSection>

      {/* Mission */}
      <AboutSection bg="var(--canvas)">
        <div className="grid-split mission">
          <AboutHead eyebrow="Our mission" title="Compliance that holds up under inquiry." maxWidth="26ch" />
          <div>
            <DS.StatuteCallout citation="EquiWork · practice principle">
              EquiWork exists so that when an organisation's handling of a complaint is tested, whether by an appellate authority, a court, or its own people, it holds. We build the policy, the committee, and the record that make a fair process defensible.
            </DS.StatuteCallout>
            <p style={{ margin: "20px 0 32px", fontSize: 16, lineHeight: 1.6, color: "var(--ink-700)", maxWidth: "60ch" }}>
              We deliver process, not outcomes. We do not promise a harassment-free or "safe" workplace, because no adviser honestly can, what we can build is a process that is fair, lawful, and defensible when it matters most.
            </p>
            <div style={{ display: "grid", gap: 0 }}>
              {principles.map(([t, d]) => (
                <div key={t} style={{ padding: "20px 0", borderTop: "1px solid var(--hairline)" }}>
                  <h3 style={{ margin: "0 0 6px", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 17, color: "var(--teal-800)" }}>{t}</h3>
                  <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--ink-700)" }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </AboutSection>

      {/* Founder */}
      <AboutSection bg="var(--parchment)">
        <div style={{ marginBottom: 40 }}><DS.Eyebrow>The founder</DS.Eyebrow></div>
        <div className="grid-split portrait">
          {/* Portrait placeholder, replace with the founder's professional portrait */}
          <div>
            <div style={{ aspectRatio: "4 / 5", background: "var(--parchment-deep)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg, 10px)", overflow: "hidden" }}>
              <img src="assets/portrait-founder.jpg" alt="Divakar Tomar, founder of EquiWork" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
            </div>
            <p style={{ margin: "12px 0 0", fontSize: 13, lineHeight: 1.5, color: "var(--ink-500)" }}>Divakar Tomar, Founder.</p>
          </div>
          <div>
            <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 32, letterSpacing: "-0.3px", color: "var(--teal-800)" }}>Wing Commander Divakar Tomar (Retired)</h2>
            <p style={{ margin: "6px 0 0", fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: "0.3px", color: "var(--brass-700)" }}>Judge Advocate General, Indian Air Force</p>
            <p style={{ margin: "20px 0 0", fontSize: 18, lineHeight: 1.62, color: "var(--ink-800)", maxWidth: "64ch" }}>
              A senior legal and HR leader with fifteen years of service in the Indian Air Force, specialising in employee relations, workplace-conduct investigations, and statutory compliance. He has adjudicated more than 200 disciplinary and separation cases, managed Internal Complaint Committee (ICC) proceedings under the POSH Act, and resolved over 2,000 employee grievances within statutory timelines.
            </p>
            <p style={{ margin: "16px 0 0", fontSize: 18, lineHeight: 1.62, color: "var(--ink-800)", maxWidth: "64ch" }}>
              He has drafted institutional policy on POSH, unethical behaviour and grievance redressal, conducted compliance training for over 500 officers and staff, and managed litigation before Labour Courts, Administrative Tribunals and High Courts in coordination with the Assistant Solicitor General of India and Government Standing Counsel. He holds an LLB and a Master's in Human Resource Management, and combines legal grounding with hands-on command leadership.
            </p>
            <div className="grid-4" style={{ marginTop: 32 }}>
              {facts.map(([v, l]) => <DS.StatCard key={l} value={v} label={l} />)}
            </div>
          </div>
        </div>
      </AboutSection>

      {/* Credentials */}
      <AboutSection bg="var(--canvas)">
        <AboutHead eyebrow="Credentials" title="Qualifications, Training and Commendations" />
        <div className="grid-3">
          <DS.Card variant="service" title="Education">
            <div style={{ display: "grid", gap: 0 }}>
              {education.map(([inst, deg]) => (
                <div key={inst} style={{ padding: "12px 0", borderTop: "1px solid var(--hairline)" }}>
                  <div style={{ fontWeight: 700, fontSize: 16, color: "var(--teal-800)" }}>{inst}</div>
                  <div style={{ fontSize: 15, color: "var(--ink-700)" }}>{deg}</div>
                </div>
              ))}
            </div>
          </DS.Card>
          <DS.Card variant="service" title="Certifications & Training">
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              {certifications.map((c) => (
                <li key={c} style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-700)", marginBottom: 10 }}>{c}</li>
              ))}
            </ul>
          </DS.Card>
          <DS.Card variant="service" title="Commendations">
            <ul style={{ margin: 0, paddingLeft: 18 }}>
              {commendations.map((c) => (
                <li key={c} style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-700)", marginBottom: 10 }}>{c}</li>
              ))}
            </ul>
          </DS.Card>
        </div>
      </AboutSection>

      {/* Closing CTA band */}
      <section style={{ background: "var(--surface-teal)", padding: "88px 24px" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <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" className="btn-accent" onClick={() => onNavigate("engage")}>Request a consultation</DS.Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutScreen });