/* Case management — MeroCase. */
const { StatCard, StatusBadge, Badge } = window.LexInToshDesignSystem_e187a4;
const Icon = window.Icon;
const SITE = window.SITE;

function CaseDemo() {
  const cases = [
    { no: "CASE-2082-0114", name: "Sharma Holdings \u2014 Contract dispute", status: "in_progress" },
    { no: "CASE-2082-0098", name: "Everest Trek Ltd. \u2014 Writ of mandamus", status: "open" },
    { no: "CASE-2081-0421", name: "Bimala Thapa \u2014 Property appeal", status: "paid" }
  ];
  return (
    <div className="demo demo--dash">
      <div className="demo__head">
        <span className="demo__title"><Icon name="layout-dashboard" size={15} /> Limitation Dashboard</span>
        <Badge variant="secondary" size="sm">Patan High Court</Badge>
      </div>
      <div className="dash__stats">
        <StatCard variant="danger" label="Expiring in 7 Days" value="3" subtitle="Filing deadlines this week." icon={<Icon name="clock" size={18} />} />
        <StatCard variant="warning" label="Expiring in 30 Days" value="12" subtitle="Upcoming limitation periods." icon={<Icon name="bell" size={18} />} />
      </div>
      <div className="dash__list">
        <div className="dash__lhead">Active cases</div>
        {cases.map((c) => (
          <div className="crow" key={c.no}>
            <span className="crow__no">{c.no}</span>
            <span className="crow__nm">{c.name}</span>
            <StatusBadge status={c.status} />
          </div>
        ))}
      </div>
    </div>
  );
}

function CaseWork() {
  return (
    <section className="section section--white" id="casework">
      <div className="wrap casework__grid">
        <div className="casework__copy">
          <window.Reveal><window.Eyebrow>MeroCase</window.Eyebrow></window.Reveal>
          <window.Reveal delay={60}>
            <h2 className="h2">Comprehensive practise management, <span className="accent-serif">end to end</span>.</h2>
          </window.Reveal>
          <window.Reveal delay={120}>
            <p className="lead">Run your entire practice on one platform &mdash; from first client intake to final invoice &mdash; with every hearing, deadline, and document in one connected place.</p>
          </window.Reveal>
          <window.Reveal delay={160}>
            <div className="fgrid">
              {SITE.caseFeatures.map((f) => (
                <div className="feat" key={f.title}>
                  <span className="feat__i"><Icon name={f.icon} size={20} /></span>
                  <div><b>{f.title}</b><p>{f.desc}</p></div>
                </div>
              ))}
            </div>
          </window.Reveal>
          <window.Reveal delay={210}>
            <div className="ai-callout">
              <span className="ai-callout__i"><Icon name="sparkles" size={20} /></span>
              <div>
                <b>The AI Chat Assistant is built in.</b>
                <p>Research any question and draft briefs without leaving your case &mdash; grounded in Nepali statute and najir, with citations.</p>
              </div>
            </div>
          </window.Reveal>
        </div>
        <window.Reveal delay={140} className="casework__demo"><CaseDemo /></window.Reveal>
      </div>
    </section>
  );
}
window.CaseWork = CaseWork;