// pages2.jsx — Remaining page bodies

// ---------------------------------------------------------------------
// Article data loader
// ---------------------------------------------------------------------
// Partner-authored articles are stored as Markdown in content/articles/
// (edited via the Sveltia CMS at /admin/). At deploy time the CI workflow
// runs scripts/build-articles.js, which compiles those .md files into
// assets/articles.json — the runtime manifest the SPA fetches below.
//
// Cached module-level so the JSON is fetched once and shared across
// every consumer (the home page §05 block, the Articles page list,
// and each individual article view).
let __articlesCache = null;
let __articlesPromise = null;
function loadArticles() {
  if (__articlesCache) return Promise.resolve(__articlesCache);
  if (__articlesPromise) return __articlesPromise;
  __articlesPromise = fetch('assets/articles.json', { cache: 'no-store' })
    .then(r => r.ok ? r.json() : [])
    .then(list => { __articlesCache = Array.isArray(list) ? list : []; return __articlesCache; })
    .catch(() => { __articlesCache = []; return __articlesCache; });
  return __articlesPromise;
}
function useArticles() {
  const [list, setList] = React.useState(__articlesCache || null);
  React.useEffect(() => {
    if (__articlesCache) { setList(__articlesCache); return; }
    let alive = true;
    loadArticles().then(l => { if (alive) setList(l); });
    return () => { alive = false; };
  }, []);
  return list; // null while loading; [] if no articles; [{...}, ...] when ready
}

function fmtArticleDate(iso) {
  if (!iso) return '';
  const [y, m, d] = iso.split('-').map(Number);
  if (!y || !m || !d) return iso;
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  return `${String(d).padStart(2,'0')} ${months[m-1]} ${y}`;
}

function articleKindLabel(type) {
  return ({ text: 'Practice note', pdf: 'PDF', video: 'Video', photos: 'Gallery' })[type] || 'Note';
}

// =====================================================================
// PEOPLE INDEX
// =====================================================================
function PagePeople() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"People"}]}
        eyebrow="Partners · Members at the firm"
        title={<>The People of the <em>Firm.</em></>}
        lede="Partners and Chartered Accountants working at Bagrecha & Singhvi LLP. Information shown is drawn from the firm's records and reconciled to the ICAI register per § 3.3.18."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="The Partners"
            title={<>Two Fellow Members of the <em>Institute.</em></>}
            aside="Partner names, ICAI Membership Numbers, and qualification details are reproduced from the ICAI Member Cards."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {FIRM.partners.map(p => (
              <article key={p.slug} className="partner">
                <div className="partner__photo">
                  <span className="tag partner__photo-tag" style={{ background: "var(--paper)" }}>
                    <span className="dot" />Partner
                  </span>
                  <img src={p.photo} alt={p.title} loading="lazy" />
                  <span className="partner__photo-mrn">ICAI MRN <b>{p.mrn}</b></span>
                </div>
                <div className="partner__body">
                  <h3 className="partner__name">{p.title}</h3>
                  <p className="partner__role">{p.role}</p>
                  <dl className="partner__creds">
                    <dt>ICAI MRN</dt><dd className="mono">{p.mrn}</dd>
                    <dt>Member since</dt><dd>{p.since}</dd>
                    <dt>Fellowship</dt><dd>{p.fellowship}</dd>
                    <dt>Office</dt><dd>{p.office}</dd>
                  </dl>
                </div>
                <div className="partner__foot">
                  <span className="partner__phone">{p.mobile}</span>
                  <button className="link" onClick={() => window.__goto(`partner-${p.slug}`)}>View profile →</button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Members at the firm · § 3.3.6(vi)"
            title={<>Three Chartered Accountants <em>Alongside the Partners.</em></>}
            aside="Qualified Chartered Accountants working at the firm alongside the partners. Click below to open the full profiles with qualifications, ICAI Membership Numbers, and areas of practice."
          />
          <button className="staff-preview" onClick={() => window.__goto("employees")} aria-label="View profiles of all three Chartered Accountants at the firm">
            <div className="staff-preview__row">
              {FIRM.staff.map(s => (
                <div className="staff-preview__cell" key={s.mrn}>
                  <div className="staff-preview__photo">
                    <img src={s.photo} alt={s.name} loading="lazy" />
                  </div>
                  <div className="staff-preview__name">{s.name}</div>
                  <div className="staff-preview__quals">{s.quals}</div>
                  <div className="staff-preview__mrn mono">MRN&nbsp;{s.mrn}</div>
                </div>
              ))}
            </div>
            <div className="staff-preview__cta">
              <span className="staff-preview__cta-label">View Full Profiles &amp; Areas of Practice</span>
              <span className="staff-preview__cta-arrow" aria-hidden="true">→</span>
            </div>
          </button>

          <Pager prev={{id:"about", label:"About the firm"}} next={{id:"services", label:"Services"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// PARTNER PROFILE
// =====================================================================
function PagePartner({ slug }) {
  const p = FIRM.partners.find(x => x.slug === slug);
  if (!p) return null;
  const otherIdx = FIRM.partners.findIndex(x => x.slug !== slug);
  const other = FIRM.partners[otherIdx];

  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"People", href:"people"}, {name:p.title}]}
        eyebrow={`Partner · Chartered Accountant · ${p.office.split("(")[0].trim()}`}
        title={<><em>{p.title.split(" ").slice(1, -1).join(" ")}</em> <span style={{ color: "var(--ink)" }}>{p.title.split(" ").slice(-1)[0]}</span></>}
        lede={`Partner. Fellow member of the Institute of Chartered Accountants of India since ${p.fellowship}. Practice based at the firm's ${p.office.toLowerCase()}.`}
      />

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "start" }}>
            <figure style={{ margin: 0 }} className="office-photo">
              <img src={p.photo} alt={p.title} loading="lazy" />
              <figcaption className="office-photo__cap">
                <span className="label">{p.office.split("(")[1] ? p.office.split("(")[1].replace(")", "") : "Partner"}</span>
                <span className="name">{p.office.split("(")[0].trim()}</span>
              </figcaption>
            </figure>

            <div>
              <Eyebrow>01 / ICAI Register</Eyebrow>
              <h2 className="display" style={{ marginTop: 12, marginBottom: 24, fontSize: "clamp(28px, 3vw, 40px)" }}>
                Particulars from the Institute's Register.
              </h2>
              <div className="dtable">
                <div className="dtable__row"><div className="dtable__label">Name</div><div className="dtable__value">{p.title}</div></div>
                <div className="dtable__row"><div className="dtable__label">Designation</div><div className="dtable__value">Partner · Chartered Accountant</div></div>
                <div className="dtable__row"><div className="dtable__label">ICAI Membership No.</div><div className="dtable__value mono">{p.mrn}</div></div>
                <div className="dtable__row"><div className="dtable__label">Member of ICAI since</div><div className="dtable__value">{p.since} · Associate</div></div>
                <div className="dtable__row"><div className="dtable__label">Fellowship</div><div className="dtable__value">Fellow Chartered Accountant (FCA) · {p.fellowship}</div></div>
                <div className="dtable__row"><div className="dtable__label">DISA</div><div className="dtable__value">Diploma in Information Systems Audit · {p.disa}</div></div>
                <div className="dtable__row"><div className="dtable__label">Education</div><div className="dtable__value">B.Com.</div></div>
                <div className="dtable__row"><div className="dtable__label">Office</div><div className="dtable__value">{p.office}</div></div>
                {p.tel && <div className="dtable__row"><div className="dtable__label">Direct line</div><div className="dtable__value mono">{p.tel}</div></div>}
                <div className="dtable__row"><div className="dtable__label">Mobile</div><div className="dtable__value mono">{p.mobile}</div></div>
                <div className="dtable__row"><div className="dtable__label">Email</div><div className="dtable__value"><a href={`mailto:${p.email}`} style={{ color: "var(--accent)" }}>{p.email}</a></div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Areas of practice · § 3.3.6(v)"
            title={<>Where the Partner <em>Concentrates.</em></>}
            aside="Areas of practice are surfaced on this profile per ICAI § 3.3.6(v) (pull-only). The list below identifies the practice areas the partner most frequently supervises within the firm."
          />
          <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {p.areas.map(([name, desc], i) => (
              <li key={i} className="assignment">
                <span className="assignment__num">{toRoman(i + 1)}</span>
                <div>
                  <h3 className="assignment__name">{name}</h3>
                  <p className="assignment__desc">{desc}</p>
                </div>
              </li>
            ))}
          </ol>

          <Pager
            prev={{id:"people", label:"People directory"}}
            next={{id:`partner-${other.slug}`, label:other.title}}
          />
        </div>
      </section>
    </div>
  );
}

function toRoman(n) {
  const map = ["I","II","III","IV","V","VI","VII","VIII","IX","X"];
  return map[n - 1] || String(n);
}

// =====================================================================
// EMPLOYEES (Chartered Accountants at the firm)
// =====================================================================
function PageEmployees() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"People", href:"people"}, {name:"Chartered Accountants at the Firm"}]}
        eyebrow="Chartered Accountants · § 3.3.6(vi)"
        title={<>Chartered Accountants <em>at the Firm.</em></>}
        lede="Qualified Chartered Accountants working at the firm alongside the partners. Information shown is drawn from the firm's records and reconciled to the ICAI register per § 3.3.18. Areas of practice are surfaced per § 3.3.6(vi) (pull-only)."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Members"
            title={<>Three Chartered Accountants Alongside the <em>Partners.</em></>}
            aside="Membership Numbers reconcile to the ICAI register."
          />
          <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--paper-rule)" }}>
            {FIRM.staff.map(s => (
              <li key={s.mrn} className="staff">
                <figure className="staff__photo">
                  <img src={s.photo} alt={s.name} loading="lazy" />
                </figure>
                <div>
                  <h4 className="staff__name">{s.name}</h4>
                  <p className="staff__role">Chartered Accountant</p>
                  <dl className="staff__creds">
                    <dt>Qualifications</dt><dd>{s.quals}</dd>
                    <dt>Member since</dt><dd>{s.since}</dd>
                    <dt>ICAI MRN</dt><dd className="mono">{s.mrn}</dd>
                    <dt>Areas of practice</dt><dd>{s.areas}</dd>
                  </dl>
                  <p className="staff__bio">{s.bio}</p>
                </div>
              </li>
            ))}
          </ol>
          <div className="note" style={{ marginTop: 48 }}>
            Areas of practice indicate the principal subject-matter areas in which each member is engaged at the firm. Membership Numbers reconcile to the ICAI register per § 3.3.18.
          </div>

          <Pager prev={{id:"people", label:"People directory"}} next={{id:"services", label:"Services"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// SERVICES
// =====================================================================
function PageServices() {
  const [open, setOpen] = useState(null);

  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Services"}]}
        eyebrow="Practice areas · Eight areas"
        title={<>Eight Areas of <em>Practice.</em></>}
        lede="The firm renders services within the scope permitted to Chartered Accountants under the Chartered Accountants Act, 1949 and ICAI regulations. Engagement scope is agreed in writing per engagement and supervised directly by one or both partners."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Practice Areas"
            title={<>Audit, Taxation, Advisory, and <em>Corporate Services.</em></>}
            aside="Click any practice area to read its scope, applicable regulations and engagement notes."
          />

          <div className="services-grid">
            {FIRM.services.map((s, i) => (
              <button key={s.code} className="service"
                style={open === i ? { background: "var(--paper-2)" } : {}}
                onClick={() => setOpen(open === i ? null : i)}>
                <div className="service__num">{s.num} · {s.code}</div>
                <h3 className="service__title">{s.title}</h3>
                <p className="service__desc">{s.short}</p>
                <span className="service__cta">{open === i ? "Collapse ↑" : "Expand →"}</span>
              </button>
            ))}
          </div>

          {open !== null && (
            <div className="service-detail" style={{ marginTop: 32 }}>
              <Eyebrow>{FIRM.services[open].num} · {FIRM.services[open].code} · Detail</Eyebrow>
              <h3 className="display" style={{ fontSize: "clamp(24px, 2.4vw, 34px)", marginTop: 10, marginBottom: 14 }}>
                {FIRM.services[open].title}
              </h3>
              <p className="body" style={{ maxWidth: "70ch" }}>{FIRM.services[open].detail}</p>
              <div className="note" style={{ marginTop: 24 }}>
                Engagement scope is agreed in writing per engagement. The firm renders this service within the scope permitted to Chartered Accountants under the Chartered Accountants Act, 1949 and ICAI regulations.
              </div>
            </div>
          )}

          <Pager prev={{id:"people", label:"People"}} next={{id:"assignments", label:"Past assignments"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ASSIGNMENTS
// =====================================================================
function PageAssignments() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Assignments"}]}
        eyebrow="Nature of assignments · § 3.3.6(ix)"
        title={<>Nature of <em>Assignments.</em></>}
        lede="A description of the categories of work the firm has handled. Names of clients and fee figures are not disclosed, in line with the Institute's Code of Ethics. The list below names sectors broadly enough that no specific client can be reverse-identified."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Sectors"
            title={<>Sectors Served, in <em>Broad Outline.</em></>}
            aside="Six broad sectors are surfaced. Descriptions are pitched so no individual client could be inferred from the entry."
          />
          <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--paper-rule)" }}>
            {FIRM.assignments.map(([name, desc], i) => (
              <li key={i} className="assignment">
                <span className="assignment__num">{toRoman(i + 1)}</span>
                <div>
                  <h3 className="assignment__name">{name}</h3>
                  <p className="assignment__desc">{desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Engagement types"
            title={<>Categories of <em>Work.</em></>}
            aside="Across sectors, the firm has handled the engagement categories listed below."
          />
          <div className="dtable">
            {FIRM.engagementTypes.map(([l, v], i) => (
              <div key={i} className="dtable__row">
                <div className="dtable__label">{l}</div>
                <div className="dtable__value">{v}</div>
              </div>
            ))}
          </div>
          <div className="note" style={{ marginTop: 48 }}>
            The Institute of Chartered Accountants of India treats the disclosure of client identifiers, fee figures, and case studies as solicitation under § 3.3.6(ix) of its Code of Ethics. The categories above are pitched at a level that satisfies the disclosure principle without identifying any specific client.
          </div>

          <Pager prev={{id:"services", label:"Services"}} next={{id:"articles", label:"Articles & updates"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ARTICLES (list view)
// =====================================================================
function PageArticles() {
  const articles = useArticles();
  const featured = articles && articles.length
    ? (articles.find(a => a.featured) || articles[0])
    : null;
  const rest = articles && featured
    ? articles.filter(a => a.slug !== featured.slug)
    : (articles || []);

  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Articles"}]}
        eyebrow="Articles & updates · § 3.3.8"
        title={<>Notes on <em>Practice and Regulation.</em></>}
        lede="Articles and updates on professional standards, regulatory developments and matters of broader professional interest. Authored by partners and members of the firm."
      />

      {articles === null && (
        <section className="section section--alt">
          <div className="container">
            <p className="body" style={{ color: "var(--ink-4)" }}>Loading articles…</p>
          </div>
        </section>
      )}

      {articles && articles.length === 0 && (
        <section className="section section--alt">
          <div className="container">
            <p className="body" style={{ color: "var(--ink-4)" }}>No articles have been published yet. Notes will appear here as the partners post them.</p>
            <Pager prev={{id:"assignments", label:"Assignments"}} next={{id:"careers", label:"Careers"}} />
          </div>
        </section>
      )}

      {featured && (
        <section className="section section--alt">
          <div className="container">
            <article className="article-feat" onClick={() => window.__goto(`article-${featured.slug}`)} style={{ cursor: "pointer" }}>
              <div className="article-feat__art">
                <span className="eyebrow">Featured note · {featured.category}</span>
                <div className="article-feat__quote">&ldquo;{featured.excerpt}&rdquo;</div>
                {featured.author && <span className="label">— {featured.author}</span>}
              </div>
              <div className="article-feat__body">
                <div className="article-feat__meta">
                  <span>{featured.category}</span>
                  <span>·</span>
                  <span>{fmtArticleDate(featured.date)}</span>
                  <span>·</span>
                  <span>{articleKindLabel(featured.type)}</span>
                </div>
                <h3 className="article-feat__h">{featured.title}</h3>
                <p className="article-feat__excerpt">{featured.excerpt}</p>
                <button className="link" style={{ marginTop: 16 }} onClick={(e) => { e.stopPropagation(); window.__goto(`article-${featured.slug}`); }}>
                  Read note →
                </button>
              </div>
            </article>
          </div>
        </section>
      )}

      {articles && articles.length > 0 && (
        <section className="section">
          <div className="container">
            <SectionHead
              no="01"
              eyebrow="Recent notes"
              title={<>All <em>Articles &amp; Updates.</em></>}
              aside="The firm publishes notes intermittently. Subjects covered are determined by the practical relevance of recent regulatory developments."
            />
            <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--paper-rule)" }}>
              {rest.map(a => (
                <li key={a.slug} className="article-row" style={{ paddingTop: 24, paddingBottom: 24, cursor: "pointer" }} onClick={() => window.__goto(`article-${a.slug}`)}>
                  <div className="article-row__top">
                    <span className="mono">{fmtArticleDate(a.date)}</span>
                    <span>·</span>
                    <span>{a.category}</span>
                    {a.type && a.type !== 'text' && <><span>·</span><span>{articleKindLabel(a.type)}</span></>}
                  </div>
                  <h3 className="article-row__h" style={{ fontSize: 22 }}>{a.title}</h3>
                  {a.author && <p className="article-row__by">{a.author}</p>}
                </li>
              ))}
            </ol>

            <div className="note" style={{ marginTop: 48 }}>
              Articles published on this page constitute professional information of broader interest in accordance with § 3.3.8 of the ICAI Code of Ethics. Authorship is attributed to partners and members of the firm in accordance with § 2.14.1.7(xiii).
            </div>

            <Pager prev={{id:"assignments", label:"Assignments"}} next={{id:"careers", label:"Careers"}} />
          </div>
        </section>
      )}
    </div>
  );
}

// =====================================================================
// ARTICLE (single, hash-routed via #article-<slug>)
// =====================================================================
function PageArticle({ slug }) {
  const articles = useArticles();
  const article = articles && articles.find(a => a.slug === slug);
  const prev = articles && article ? (() => {
    const i = articles.findIndex(a => a.slug === slug);
    return i > 0 ? articles[i - 1] : null;
  })() : null;
  const next = articles && article ? (() => {
    const i = articles.findIndex(a => a.slug === slug);
    return i >= 0 && i < articles.length - 1 ? articles[i + 1] : null;
  })() : null;

  if (articles === null) {
    return (
      <div className="page-enter">
        <section className="section">
          <div className="container">
            <p className="body" style={{ color: "var(--ink-4)" }}>Loading…</p>
          </div>
        </section>
      </div>
    );
  }

  if (!article) {
    return (
      <div className="page-enter">
        <PageHero
          crumbs={[{name:"Home", href:"home"}, {name:"Articles", href:"articles"}, {name:"Not found"}]}
          eyebrow="404"
          title={<>Note <em>not found.</em></>}
          lede="The note you're looking for isn't on the firm's register. It may have been renamed or unpublished."
        />
        <section className="section">
          <div className="container">
            <button className="link" onClick={() => window.__goto("articles")}>← Back to all notes</button>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Articles", href:"articles"}, {name:article.title}]}
        eyebrow={`${article.category} · ${articleKindLabel(article.type)}`}
        title={<>{article.title}</>}
        lede={article.excerpt}
      />

      <section className="section section--alt">
        <div className="container">
          <div className="article-byline" style={{ display: "flex", flexWrap: "wrap", gap: 18, alignItems: "baseline", paddingBottom: 18, marginBottom: 24, borderBottom: "1px solid var(--paper-rule-2)" }}>
            {article.author && <span style={{ fontFamily: "'Source Serif 4', serif", fontSize: 15, color: "var(--ink)" }}>{article.author}</span>}
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-5)" }}>{fmtArticleDate(article.date)}</span>
            {article.readingTime && <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-5)" }}>{article.readingTime}</span>}
          </div>

          {/* Type-specific attachment, rendered above the body */}
          {article.type === 'pdf' && article.pdfFile && (
            <div className="note" style={{ marginBottom: 28 }}>
              <a href={article.pdfFile} target="_blank" rel="noopener" className="link" style={{ fontSize: 14 }}>
                Download PDF reference note ↓
              </a>
            </div>
          )}
          {article.type === 'video' && article.videoUrl && (() => {
            const m = article.videoUrl.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
            const id = m && m[1];
            if (!id) return null;
            return (
              <div style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: 28, background: "var(--paper-3)", borderRadius: 6, overflow: "hidden" }}>
                <iframe src={`https://www.youtube-nocookie.com/embed/${id}`} title={article.title} allowFullScreen style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }} />
              </div>
            );
          })()}
          {article.type === 'photos' && Array.isArray(article.gallery) && article.gallery.length > 0 && (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12, marginBottom: 28 }}>
              {article.gallery.map((g, i) => (
                <figure key={i} style={{ margin: 0 }}>
                  <img src={g.image} alt={g.caption || ''} style={{ width: "100%", display: "block", borderRadius: 4 }} loading="lazy" />
                  {g.caption && <figcaption style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 6 }}>{g.caption}</figcaption>}
                </figure>
              ))}
            </div>
          )}

          {/* Rendered Markdown body */}
          <div className="article-body" style={{ maxWidth: "68ch", fontFamily: "'Source Serif 4', serif", fontSize: 17, lineHeight: 1.65, color: "var(--ink)" }} dangerouslySetInnerHTML={{ __html: article.bodyHtml }} />

          <div className="note" style={{ marginTop: 56 }}>
            This note is published as professional information per &sect; 3.3.8 of the ICAI Code of Ethics. It does not constitute advice on any specific transaction. Practitioners should refer to the underlying provisions, the Institute's Guidance Notes, and the latest CBDT / CBIC circulars for the position applicable to their engagements.
          </div>

          <Pager
            prev={prev ? {id: `article-${prev.slug}`, label: prev.title} : {id: "articles", label: "All articles"}}
            next={next ? {id: `article-${next.slug}`, label: next.title} : {id: "careers", label: "Careers"}}
          />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// CAREERS
// =====================================================================
function PageCareers() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Careers"}]}
        eyebrow="Careers · § 3.3.6(vii)"
        title={<>Articleship and <em>Professional</em> Vacancies.</>}
        lede="The firm publishes vacancies on a passive basis — both for articled assistants under the Institute's training scheme and for professional positions. Applications are welcome by the channels listed below."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Open positions"
            title={<>Two <em>Channels.</em></>}
            aside="Articleship is open to candidates registered with the ICAI for the practical-training scheme. Professional vacancies are open to qualified Chartered Accountants and senior professional staff."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <article style={{ border: "1px solid var(--paper-rule)", background: "var(--paper)", padding: 32 }}>
              <Tag>I · Articleship</Tag>
              <h3 className="display" style={{ fontSize: 26, marginTop: 16, marginBottom: 10 }}>Articled Assistant Positions</h3>
              <p className="body" style={{ marginBottom: 22 }}>Three-year practical-training engagements under the ICAI scheme, supervised directly by a partner.</p>
              <dl className="partner__creds" style={{ marginBottom: 22 }}>
                <dt>Eligibility</dt><dd>ICAI registration for practical training (CA Foundation cleared)</dd>
                <dt>Duration</dt><dd>Three years per ICAI scheme</dd>
                <dt>Stipend</dt><dd>Per ICAI minimum scale</dd>
                <dt>Office</dt><dd>Ballari (HO) &amp; Bengaluru (Branch)</dd>
                <dt>Rotation</dt><dd>Audit, taxation, advisory and corporate-services work</dd>
              </dl>
              <div style={{ paddingTop: 18, borderTop: "1px solid var(--paper-rule)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                <a className="mono" style={{ fontSize: 12.5, color: "var(--ink-2)" }} href="mailto:rajeshbagrecha@hotmail.com?subject=Articleship%20enquiry">rajeshbagrecha@hotmail.com</a>
                <a className="link" href="https://forms.gle/1JjuoPYm62bR4NRk6" target="_blank" rel="noopener">Application channel →</a>
              </div>
            </article>

            <article style={{ border: "1px solid var(--paper-rule)", background: "var(--paper)", padding: 32 }}>
              <Tag>II · Professional</Tag>
              <h3 className="display" style={{ fontSize: 26, marginTop: 16, marginBottom: 10 }}>Professional Vacancies</h3>
              <p className="body" style={{ marginBottom: 22 }}>Positions for qualified Chartered Accountants and senior professional staff. Open as engagement load and the firm's plans require.</p>
              <dl className="partner__creds" style={{ marginBottom: 22 }}>
                <dt>Eligibility</dt><dd>ICAI member · specialist staff considered</dd>
                <dt>Roles</dt><dd>Audit, direct &amp; indirect tax, advisory</dd>
                <dt>Office</dt><dd>By placement</dd>
                <dt>Status</dt><dd>Reviewed quarterly</dd>
                <dt>Mode</dt><dd>Full-time, in-office</dd>
              </dl>
              <div style={{ paddingTop: 18, borderTop: "1px solid var(--paper-rule)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                <a className="mono" style={{ fontSize: 12.5, color: "var(--ink-2)" }} href="mailto:rajeshbagrecha@hotmail.com?subject=Professional%20vacancy%20enquiry">rajeshbagrecha@hotmail.com</a>
                <a className="link" href="https://forms.gle/1JjuoPYm62bR4NRk6" target="_blank" rel="noopener">Application channel →</a>
              </div>
            </article>
          </div>

          <div className="note" style={{ marginTop: 48 }}>
            The firm does not advertise vacancies through aggregator platforms or paid recruitment channels. Per § 3.6 of the ICAI Code of Ethics, listing on application-based aggregator platforms that mix Chartered Accountants with other categories is not permitted.
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Training"
            title={<>Articleship as <em>Practical Training.</em></>}
            aside="The firm trains articled assistants under the Institute of Chartered Accountants of India's prescribed scheme, with rotation across audit, taxation, advisory, and corporate-services work."
          />
          <div style={{ maxWidth: 720 }}>
            <p className="lede" style={{ marginBottom: 18 }}>
              Articled assistants spend their first months on the audit floor, supervised directly by a partner.
            </p>
            <p className="body">
              Subsequent rotations cover statutory-audit work in different sectors, tax-audit and direct-tax advisory, indirect-tax (GST) work, and corporate-services and incorporation work. By the third year, articles take supervisory responsibility on smaller engagements and act as the principal point of contact with junior client teams.
            </p>
            <p className="body">
              The firm encourages articles to take up the Institute's parallel courses (DISA, certificate courses on taxation, on bank-branch audit) where these align with the practice areas they have rotated through.
            </p>
          </div>

          <Pager prev={{id:"articles", label:"Articles & updates"}} next={{id:"icai", label:"ICAI & links"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// ICAI & REGULATORY LINKS
// =====================================================================
function PageICAI() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"ICAI & links"}]}
        eyebrow="External resources · § 3.3.16"
        title={<>ICAI &amp; <em>Regulatory Links.</em></>}
        lede="Plain links to the Institute of Chartered Accountants of India, regional councils, government departments, regulatory authorities, and professional bodies. Permitted under § 3.3.16 of the ICAI Code of Ethics."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Institute, regulators & professional bodies"
            title={<>External <em>References.</em></>}
            aside="Each link opens the official site in a new tab. The firm does not endorse content on third-party sites; links are provided as a passive reference."
          />
          <div className="ext-list">
            {FIRM.externalLinks.map(l => (
              <a key={l.url} href={`https://${l.url}`} target="_blank" rel="noopener">
                <div>
                  <div className="ext-list__name">{l.name}</div>
                  <div className="ext-list__url">{l.url}</div>
                </div>
                <span className="ext-list__arrow">↗</span>
              </a>
            ))}
          </div>

          <div className="note" style={{ marginTop: 48 }}>
            External links are restricted to the Institute, regulators, government departments and professional bodies in keeping with § 3.3.16 of the ICAI Code of Ethics. The firm does not link to commercial sites or aggregator platforms.
          </div>

          <Pager prev={{id:"careers", label:"Careers"}} next={{id:"contact", label:"Contact"}} />
        </div>
      </section>
    </div>
  );
}

// =====================================================================
// CONTACT
// =====================================================================
function PageContact() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"Contact"}]}
        eyebrow="Contact · § 3.3.6(iii)"
        title={<>Contact <em>the Firm.</em></>}
        lede="The firm operates from a head office in Ballari and a branch office in Bengaluru. Visits are by prior appointment. Communications addressed to the firm reach both partners."
      />

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="Offices"
            title={<>Head Office and <em>Branch.</em></>}
            aside="Both offices answer to the firm's common email. Telephone numbers are office-specific."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, alignItems: "stretch" }}>
            <figure className="office-photo" style={{ margin: 0 }}>
              <img src={FIRM.offices.ho.photo} alt="Bagrecha Arcade, head office at Fort Main Road, Ballari" loading="lazy" />
              <figcaption className="office-photo__cap">
                <span className="label">Head office</span>
                <span className="name">Bagrecha Arcade, Ballari</span>
              </figcaption>
            </figure>
            <div style={{ display: "grid", gap: 18 }}>
              <OfficeCard data={FIRM.offices.ho} />
              <OfficeCard data={FIRM.offices.branch} />
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Direct to partners"
            title={<>Reach a Partner <em>Directly.</em></>}
            aside="Both partners welcome communications by phone or email. Engagements are taken on by direct discussion."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {FIRM.partners.map(p => (
              <article key={p.slug} className="partner">
                <div className="partner__photo">
                  <span className="tag partner__photo-tag" style={{ background: "var(--paper)" }}>
                    <span className="dot" />Partner
                  </span>
                  <img src={p.photo} alt={p.title} loading="lazy" />
                  <span className="partner__photo-mrn">ICAI MRN <b>{p.mrn}</b></span>
                </div>
                <div className="partner__body">
                  <h3 className="partner__name">{p.title}</h3>
                  <p className="partner__role">{p.role}</p>
                  <dl className="partner__creds">
                    <dt>Mobile</dt><dd className="mono">{p.mobile}</dd>
                    <dt>Email</dt><dd><a href={`mailto:${p.email}`} style={{ color: "var(--accent)" }}>{p.email}</a></dd>
                    <dt>Office</dt><dd>{p.office}</dd>
                  </dl>
                </div>
                <div className="partner__foot">
                  <span className="partner__phone">{p.mobile}</span>
                  <button className="link" onClick={() => window.__goto(`partner-${p.slug}`)}>View profile →</button>
                </div>
              </article>
            ))}
          </div>

          <Pager prev={{id:"icai", label:"ICAI & links"}} next={{id:"home", label:"Home"}} />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  PagePeople, PagePartner, PageEmployees, PageServices,
  PageAssignments, PageArticles, PageCareers, PageICAI, PageContact,
  toRoman,
});