// pages.jsx — All page bodies for BNS & Co redesign
// Exports each page component to window so app.jsx can route them.

const { useState } = React;

// ===== Shared inline data (firm facts, ICAI-reconciled) =====
const FIRM = {
  name: "Bagrecha & Singhvi LLP",
  short: "B&S",
  designation: "Chartered Accountants",
  frn: "006339S/S000238",
  established: 1993,
  partners: [
    {
      slug: "rajesh-bagrecha",
      title: "CA. Rajesh Bagrecha",
      role: "Partner · FCA · DISA(ICAI)",
      mrn: "207484",
      since: "30 April 1998",
      fellowship: "30 April 2003",
      disa: "March 2003",
      photo: "assets/firm-images/c1.jpg",
      office: "Ballari (Head Office)",
      mobile: "+91 93426 11390",
      tel: "08392 · 268411",
      email: "rajeshbagrecha@hotmail.com",
      areas: [
        ["Statutory and tax audit of corporates", "Audit and assurance work under the Companies Act, 2013 and section 44AB of the Income-Tax Act."],
        ["Bank-branch and concurrent audit", "Statutory branch audit and concurrent audit of bank branches under RBI panel allotment."],
        ["Direct tax representation and advisory", "Representation before the Income-Tax Department, advisory on direct-tax structuring, and litigation support."],
        ["RERA — advisory and compliance", "Advisory and compliance work under the Real Estate (Regulation and Development) Act, 2016."],
        ["Partnership firms — taxation and mergers", "Specialisation in partnership-firm taxation, restructuring, and mergers."],
        ["Incorporation and taxation of non-profits", "Formation, registration, and taxation matters relating to trusts, societies, and other not-for-profit entities."],
      ],
    },
    {
      slug: "surendraa-singhvii",
      title: "CA. Surendraa Singhvii",
      role: "Partner · FCA · DISA(ICAI)",
      mrn: "027197",
      since: "21 January 1988",
      fellowship: "5 February 1993",
      disa: "September 2004",
      photo: "assets/firm-images/surendraa.jpg",
      office: "Bengaluru (Branch Office)",
      mobile: "+91 94484 72061",
      email: "surendraa@singhvii.in",
      areas: [
        ["Statutory and tax audit of corporates", "Audit and assurance work under the Companies Act, 2013 and section 44AB of the Income-Tax Act."],
        ["Corporate-services and incorporation", "Company, LLP, and partnership-firm formation, ROC filings, and ongoing secretarial-compliance work."],
        ["Information-systems audit", "DISA-qualified IS audits as part of statutory and concurrent audit engagements."],
        ["Direct & indirect tax advisory", "Direct- and indirect-tax advisory, returns, and representation before tax authorities."],
        ["Loan syndication", "Project reports, financial projections, and lender-documentation assistance for credit facilities."],
      ],
    },
  ],
  staff: [
    {
      name: "CA. K. Jagadeesh Kumar", photo: "assets/firm-images/jagadeesh.jpg",
      quals: "FCA · DISA (ICAI)", since: "2018", mrn: "233515",
      areas: "Companies Act · Indirect tax laws · Internal audit · Review of internal-control procedures",
      bio: "Conducts statutory and tax audits, general insurance audits, expenditure audits, stock and book-debt audits, bank audits, and concurrent audits. Provides representation before Income-Tax and Service-Tax authorities for assessment, GST audits and consultations, and renders services across accounts, income tax, bank project financing, GST, LLP, and Company-Law matters."
    },
    {
      name: "CA. Jagdeep M", photo: "assets/firm-images/jagdeep.jpg",
      quals: "ACA", since: "November 2020", mrn: "259048",
      areas: "Consultancy · Audit · Taxation",
      bio: "Qualified as a Chartered Accountant in November 2020, following articleship at the firm in Ballari. Holds 1.5 years of post-articleship experience in internal audit work for the automobile sector. Joined the firm as a Consultant and practises in the areas of consultancy, audit, and taxation."
    },
    {
      name: "CA. Irshad Basha", photo: "assets/firm-images/irshad.jpg",
      quals: "FCA · DISA (ICAI)", since: "2018", mrn: "245355",
      areas: "Statutory audit · Tax audit · Bank audits · Audit of charitable trusts and institutions",
      bio: "Holds the DISA qualification awarded by ICAI. Practises in statutory audit, tax audit, bank audit, accounting, income tax, and Company-Law matters. Areas of practice include audit and taxation matters relating to charitable trusts and institutions."
    },
  ],
  offices: {
    ho: {
      label: "Head office", name: "Ballari, Karnataka",
      address: ["Bagrecha Arcade, No. 83 W-32,", "Fort Main Road,", "Ballari, Karnataka 583102."],
      tel: "08392 · 268411", mobile: "+91 93426 11390",
      email: "rajeshbagrecha@hotmail.com", partner: "CA. Rajesh Bagrecha",
      maps: "https://share.google/3VRb1dUU7D9WuQnmi",
      hours: "Mon–Sat · 10:00–19:00",
      photo: "assets/firm-images/c4.jpg",
    },
    branch: {
      label: "Branch office", name: "Bengaluru, Karnataka",
      address: ["Rishab Arcade, No. 301, 4th Floor,", "Sanjay Nagar Main Road,", "RMV II Stage, Bengaluru 560094."],
      mobile: "+91 94484 72061",
      email: "surendraa@singhvii.in", partner: "CA. Surendraa Singhvii",
      hours: "By prior appointment",
    },
  },
  services: [
    { code: "AUD", num: "01", title: "Audit & Assurance",
      short: "Statutory audit, tax audit, and assurance engagements under the Companies Act 2013 and applicable Standards on Auditing.",
      detail: "Audit of financial statements under the Companies Act, 2013 and applicable accounting standards, and tax-audit reporting under section 44AB of the Income-Tax Act, 1961. Engagements are conducted in accordance with ICAI Standards on Auditing and are supervised directly by one or both partners." },
    { code: "INT", num: "02", title: "Internal & Concurrent Audits",
      short: "Risk-based internal audit and concurrent audit engagements for corporates and financial institutions.",
      detail: "Risk-based internal audit for corporates and not-for-profit organisations; continuous concurrent audit of bank branches, with reporting on advances, NPAs and KYC compliance." },
    { code: "GOV", num: "03", title: "Government Audits",
      short: "Audit assignments rendered for government entities under the applicable empanelment framework.",
      detail: "Audit assignments under empanelment with the Comptroller and Auditor General of India and audit assignments rendered for state-government and local-body entities." },
    { code: "BNK", num: "04", title: "Bank Branch Audits",
      short: "Statutory branch audits for public-sector and private banks under the applicable allotment process.",
      detail: "Statutory branch audits for public-sector and private banks under RBI panel allotment. Reporting covers advances, classification of NPAs, income recognition, KYC compliance, and operational controls at the branch." },
    { code: "TAX", num: "05", title: "Taxation Advisory",
      short: "Direct and indirect taxation, regulatory representation, and transaction-structuring advice.",
      detail: "Direct and indirect taxation: returns, advisory, representation before the Income-Tax Department and GST authorities, transaction structuring, and litigation support at the assessment and appellate levels." },
    { code: "LSY", num: "06", title: "Loan Syndication",
      short: "Project reports, financial projections, and lender-documentation assistance for credit facilities.",
      detail: "Preparation of project reports and financial projections, assistance with lender documentation for term loans and working-capital facilities, and follow-through with the lender's appraisal team." },
    { code: "INC", num: "07", title: "Incorporation & ROC",
      short: "Company, LLP and partnership formation, statutory filings, and Companies-Act compliance.",
      detail: "Formation of companies, LLPs, and partnership firms; ongoing Registrar of Companies filings, annual returns, and secretarial-compliance work under the Companies Act, 2013." },
    { code: "ADV", num: "08", title: "Consultation",
      short: "On-request advisory on specific accounting, audit and compliance matters with documented terms.",
      detail: "On-request advisory on specific accounting, audit and compliance matters. The scope of consultation is documented in writing per engagement." },
  ],
  assignments: [
    ["Manufacturing", "Statutory and tax audits, internal audits, and direct- and indirect-tax advisory for manufacturing units across South India."],
    ["Retail and trading", "Audit and tax engagements for trading houses, distributors, and retail businesses."],
    ["Financial services", "Statutory branch audits, concurrent audits, and information-systems audits for banks and non-banking financial entities."],
    ["Education", "Statutory audits, government-aided audits, and compliance work for educational institutions and trusts."],
    ["Agriculture and agri-processing", "Audit and tax engagements for agricultural cooperatives, agri-processing units, and allied enterprises."],
    ["Not-for-profit organisations", "Statutory audits and FCRA/12A compliance for charitable trusts, societies, and section-8 companies."],
  ],
  engagementTypes: [
    ["Statutory audit", "Audit of financial statements under the Companies Act, 2013 and applicable accounting standards."],
    ["Tax audit", "Reporting under section 44AB of the Income-Tax Act, 1961."],
    ["Internal audit", "Risk-based internal audit engagements for corporates and not-for-profit organisations."],
    ["Concurrent audit", "Continuous audit of bank branches, with reporting on advances, NPAs, and KYC compliance."],
    ["Bank branch audit", "Statutory branch audits under RBI panel allotments."],
    ["Government audit", "Audit assignments under empanelment with the Comptroller and Auditor General of India."],
    ["Direct & indirect tax", "Returns, advisory, representation before tax authorities, and litigation support."],
    ["Loan syndication", "Project reports, financial projections, and lender-documentation assistance."],
    ["Incorporation", "Company, LLP, and partnership-firm formation; ongoing ROC filings."],
    ["Information-systems audit", "DISA-qualified IS audits as part of statutory and concurrent audit engagements."],
  ],
  articles: [
    {
      slug: "tax-audit-reporting-section-44ab",
      cat: "Direct Tax · Practice note", date: "15 April 2026",
      title: "Notes on the revised tax-audit reporting format under section 44AB",
      author: "CA. Rajesh Bagrecha, FCA",
      excerpt: "A walkthrough of the 2026 amendments to Form 3CD and what practitioners should observe in clause-by-clause reporting, with reference to recent Institute guidance.",
    },
    {
      slug: "gst-input-tax-credit-framework",
      cat: "Indirect Tax / GST", date: "02 March 2026",
      title: "Reading the latest amendments to the GST input-tax-credit framework",
      author: "CA. Surendraa Singhvii, FCA",
      kind: "PDF",
    },
    {
      slug: "related-party-transactions-audit",
      cat: "Audit & Assurance", date: "18 February 2026",
      title: "A practitioner's walk-through of the revised standard on auditing for related-party transactions",
      author: "CA. K. Jagadeesh Kumar, FCA",
      kind: "Video",
    },
  ],
  externalLinks: [
    { name: "Institute of Chartered Accountants of India", url: "icai.org" },
    { name: "Ministry of Corporate Affairs", url: "mca.gov.in" },
    { name: "Income-Tax Department", url: "incometax.gov.in" },
    { name: "Central Board of Direct Taxes", url: "cbdt.gov.in" },
    { name: "Goods and Services Tax", url: "gst.gov.in" },
    { name: "Reserve Bank of India", url: "rbi.org.in" },
    { name: "Securities and Exchange Board of India", url: "sebi.gov.in" },
    { name: "Comptroller and Auditor General of India", url: "cag.gov.in" },
    { name: "ICAI Bangalore Branch (SIRC)", url: "bangaloreicai.org" },
  ],
};

window.FIRM = FIRM;

// ===== Shared elements =====

const Eyebrow = ({ children }) => <span className="eyebrow">{children}</span>;
const Tag = ({ children }) => <span className="tag"><span className="dot" />{children}</span>;

const SectionHead = ({ no, eyebrow, title, aside }) => (
  <header className="section-head">
    <div>
      <span className="eyebrow">{no ? `${no} / ` : ""}{eyebrow}</span>
      <h2 className="display" style={{ marginTop: 12 }}>{title}</h2>
    </div>
    {aside ? <p className="meta">{aside}</p> : <div />}
  </header>
);

const PageHero = ({ crumbs, eyebrow, title, lede }) => (
  <section className="hero" style={{ paddingTop: 88, paddingBottom: 56 }}>
    <div className="container">
      {crumbs && (
        <nav className="breadcrumb" aria-label="Breadcrumb">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {c.href ? <a href="#" onClick={(e)=>{e.preventDefault(); window.__goto(c.href);}}>{c.name}</a> : <span className="breadcrumb__current">{c.name}</span>}
              {i < crumbs.length - 1 && <span className="breadcrumb__sep">/</span>}
            </React.Fragment>
          ))}
        </nav>
      )}
      <Eyebrow>{eyebrow}</Eyebrow>
      <h1 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 18, lineHeight: 0.98 }}>{title}</h1>
      {lede && <p className="lede" style={{ marginTop: 28, maxWidth: "58ch" }}>{lede}</p>}
    </div>
  </section>
);

const Pager = ({ prev, next }) => (
  <nav className="pager" aria-label="Page navigation">
    {prev ? (
      <button className="pager__btn pager__btn--prev" onClick={() => window.__goto(prev.id)}>
        <span className="pager__arrow">←</span>
        <span>
          <div className="pager__dir">Previous</div>
          <div className="pager__label">{prev.label}</div>
        </span>
      </button>
    ) : <div />}
    {next ? (
      <button className="pager__btn pager__btn--next" onClick={() => window.__goto(next.id)}>
        <span>
          <div className="pager__dir">Next</div>
          <div className="pager__label">{next.label}</div>
        </span>
        <span className="pager__arrow">→</span>
      </button>
    ) : <div />}
  </nav>
);

// =====================================================================
// HOME
// =====================================================================
function PageHome() {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero__inner">
            <div className="hero__text">
              <div className="hero__eyebrow">
                <span className="badge">CA</span>
                <span className="eyebrow">A firm of members of the Institute of Chartered Accountants of India</span>
              </div>

              <h1 className="display hero__h1">
                <span className="row">Bagrecha</span>
                <span className="row"><span className="amp">&amp;</span> Singhvi LLP</span>
              </h1>

              <p className="lede hero__lede">
                A Chartered Accountancy practice established in 1993, with a head office in Ballari and a branch office in Bengaluru. Engagements are supervised directly by the partners across audit and assurance, taxation, advisory, and corporate-services work.
              </p>

              <dl className="hero__strip">
                <div>
                  <dt>Established</dt>
                  <dd className="mono">1993</dd>
                </div>
                <div>
                  <dt>Head office</dt>
                  <dd>Ballari<span className="unit">· KA</span></dd>
                </div>
                <div>
                  <dt>Branch</dt>
                  <dd>Bengaluru<span className="unit">· KA</span></dd>
                </div>
                <div>
                  <dt>Partners</dt>
                  <dd className="mono">2<span className="unit">· FCA</span></dd>
                </div>
              </dl>
            </div>

            <aside className="hero__side">
              <div className="hero__crt">
                <div className="hero__crt-head">
                  <span className="hero__crt-badge">
                    <span className="hero__crt-dot" aria-hidden="true" />
                    Member Firm of the ICAI
                  </span>
                  <span className="hero__crt-frn mono">FRN&nbsp;{FIRM.frn}</span>
                </div>

                <div className="hero__crt-grid">
                  {FIRM.partners.map(p => (
                    <div className="hero__crt-cell" key={p.slug}>
                      <div className="hero__crt-photo">
                        <img src={p.photo} alt={p.title} loading="lazy" />
                      </div>
                      <div className="hero__crt-caption">
                        <div className="hero__crt-name">{p.title}</div>
                        <div className="hero__crt-role">{p.role}</div>
                      </div>
                      <div className="hero__crt-mrn">
                        <span className="hero__crt-mrn-label">ICAI MRN</span>
                        <span className="hero__crt-mrn-num mono">{p.mrn}</span>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="hero__crt-foot">
                  <span>Practising under <b>The Chartered Accountants Act, 1949</b></span>
                  <span>LLP Constitution</span>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* THE FIRM IN BRIEF */}
      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="01"
            eyebrow="The Firm"
            title={<>A Practice <em>in Brief.</em></>}
            aside="This site is maintained as a passive reference in keeping with ICAI guidance on advertising and solicitation by Chartered Accountants."
          />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }}>
            <div>
              <p className="lede" style={{ marginBottom: 18 }}>
                <span style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", color: "var(--accent)" }}>B&amp;S.</span>{" "}
                Bagrecha and Singhvi LLP is a firm of Chartered Accountants registered with the Institute of Chartered Accountants of India under Firm Registration Number <span className="mono" style={{ color: "var(--ink)" }}>{FIRM.frn}</span>. The firm was established in <b style={{ fontWeight: 500 }}>1993</b>.
              </p>
              <p className="body" style={{ marginBottom: 16 }}>
                The firm operates from two registered offices: a head office at Bagrecha Arcade, Ballari, Karnataka, and a branch office at Rishab Arcade, Bengaluru, Karnataka. Both partners — Fellow members of the ICAI — supervise engagements directly across statutory audit, tax audit, internal and concurrent audits, government and bank-branch audits, advisory, loan-syndication assistance, and corporate-services work.
              </p>
              <p className="body">
                The firm is not affiliated with any ICAI-registered Network. Engagement scope is agreed in writing on a per-engagement basis. Detailed practice areas and assignment categories are listed under the{" "}
                <button className="link" onClick={() => window.__goto("services")} style={{ display: "inline" }}>services</button>{" "}and{" "}
                <button className="link" onClick={() => window.__goto("articles")} style={{ display: "inline" }}>articles</button>{" "}sections.
              </p>
            </div>

            <aside className="compliance">
              <div className="compliance__head">
                <h3>Compliance &amp; Credentials</h3>
                <span className="label">Verified</span>
              </div>
              <div className="compliance__rows">
                <div className="compliance__row"><span className="l">ICAI Firm Reg. No.</span><span className="v mono">{FIRM.frn}</span></div>
                <div className="compliance__row"><span className="l">Established</span><span className="v">1993</span></div>
                <div className="compliance__row"><span className="l">Constitution</span><span className="v">Limited Liability Partnership</span></div>
                <div className="compliance__row"><span className="l">Partners</span><span className="v">2 · FCA · DISA(ICAI)</span></div>
                <div className="compliance__row"><span className="l">Offices</span><span className="v">Ballari (HO) · Bengaluru</span></div>
                <div className="compliance__row"><span className="l">Network affiliation</span><span className="v">None</span></div>
                <div className="compliance__row"><span className="l">Auditing standards</span><span className="v">ICAI SAs · Companies Act 2013</span></div>
                <div className="compliance__row"><span className="l">Peer review</span><span className="v">Conducted per ICAI policy</span></div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* PRACTICE AREAS */}
      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Practice Areas"
            title={<>Eight Areas of <em>Professional Practice.</em></>}
            aside="The firm renders services within the scope permitted to Chartered Accountants under the Chartered Accountants Act, 1949 and ICAI regulations."
          />
          <div className="services-grid">
            {FIRM.services.map(s => (
              <button key={s.code} className="service" onClick={() => window.__goto("services")}>
                <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">View practice →</span>
              </button>
            ))}
          </div>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <p className="meta" style={{ margin: 0, maxWidth: "56ch" }}>
              Each practice area lists scope, applicable regulations and engagement procedures in detail.
            </p>
            <button className="link" onClick={() => window.__goto("services")}>All practice areas →</button>
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="03"
            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 register."
          />
          <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 style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <p className="meta" style={{ margin: 0, maxWidth: "56ch" }}>
              The full roster — including Chartered Accountants on staff, articled assistants, and support personnel — is maintained at the people directory.
            </p>
            <button className="link" onClick={() => window.__goto("people")}>Full people directory →</button>
          </div>
        </div>
      </section>

      {/* OFFICES */}
      <section className="section">
        <div className="container">
          <SectionHead
            no="04"
            eyebrow="Offices"
            title={<>Two Registered Offices in <em>Karnataka.</em></>}
            aside="Visits are by prior appointment. Postal communications addressed to the firm reach both partners."
          />
          <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>

      {/* ARTICLES */}
      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="05"
            eyebrow="Articles & Updates"
            title={<>Notes on <em>Practice and Regulation.</em></>}
            aside="Updates on professional standards, regulatory developments and matters of broader professional interest."
          />
          <HomeArticlesBlock />
        </div>
      </section>
    </div>
  );
}

// Home page §05 block. Pulled into its own component so it can use the
// useArticles() hook (defined in pages2.jsx) without nesting hooks inside
// PageHome's larger JSX block.
function HomeArticlesBlock() {
  const articles = useArticles && useArticles();

  if (!articles) {
    return (
      <div style={{ color: "var(--ink-4)" }}>Loading articles…</div>
    );
  }

  if (articles.length === 0) {
    return (
      <div style={{ color: "var(--ink-4)" }}>
        Notes will appear here as the partners publish them.
      </div>
    );
  }

  const featured = articles.find(a => a.featured) || articles[0];
  const secondary = articles.filter(a => a.slug !== featured.slug).slice(0, 2);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>
      <article className="article-feat">
        <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>
          </div>
          <h3 className="article-feat__h">
            <a href="#" onClick={(e)=>{e.preventDefault(); window.__goto(`article-${featured.slug}`);}}>
              {featured.title}
            </a>
          </h3>
          <p className="article-feat__excerpt">{featured.excerpt}</p>
          <div style={{ marginTop: 22 }}>
            <button className="link" onClick={() => window.__goto(`article-${featured.slug}`)}>Read note →</button>
          </div>
        </div>
      </article>

      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {secondary.map(a => (
          <li key={a.slug} className="article-row">
            <div className="article-row__top">
              <span className="mono">{fmtArticleDate(a.date)}</span>
              <span>·</span>
              <span>{a.category}</span>
            </div>
            <h3 className="article-row__h">
              <a href="#" onClick={(e)=>{e.preventDefault(); window.__goto(`article-${a.slug}`);}}>{a.title}</a>
            </h3>
            {a.author && <p className="article-row__by">{a.type && a.type !== 'text' ? `${articleKindLabel(a.type)} · ` : ""}{a.author}</p>}
          </li>
        ))}
        <li style={{ paddingTop: 24, display: "flex", justifyContent: "flex-end" }}>
          <button className="link" onClick={() => window.__goto("articles")}>All articles →</button>
        </li>
      </ul>
    </div>);
}

function OfficeCard({ data }) {
  return (
    <article className="office">
      <div className="office__head">
        <Tag>{data.label}</Tag>
        <span className="label">{data.hours}</span>
      </div>
      <h3 className="office__name">{data.name}</h3>
      <p className="office__addr">{data.address.map((l,i) => <React.Fragment key={i}>{l}<br/></React.Fragment>)}</p>
      <dl className="office__list">
        {data.tel && <><dt>Tel</dt><dd className="mono">{data.tel}</dd></>}
        {data.mobile && <><dt>Mobile</dt><dd className="mono">{data.mobile}</dd></>}
        {data.email && <><dt>Email</dt><dd><a href={`mailto:${data.email}`}>{data.email}</a></dd></>}
        <dt>Partner</dt><dd>{data.partner}</dd>
        {data.maps && <><dt>Map</dt><dd><a href={data.maps} target="_blank" rel="noopener">Open on Google Maps ↗</a></dd></>}
      </dl>
    </article>
  );
}

// =====================================================================
// ABOUT
// =====================================================================
function PageAbout() {
  return (
    <div className="page-enter">
      <PageHero
        crumbs={[{name:"Home", href:"home"}, {name:"About"}]}
        eyebrow="About the firm · Established 1993"
        title={<>A Practice of <em>Chartered Accountants.</em></>}
        lede="Bagrecha & Singhvi LLP is a firm of Chartered Accountants registered with the Institute of Chartered Accountants of India under Firm Registration Number 006339S/S000238. The firm was established in 1993 and operates as a Limited Liability Partnership."
      />

      <section className="section section--alt">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
            <div>
              <Eyebrow>01 / The firm</Eyebrow>
              <h2 className="display" style={{ marginTop: 12, marginBottom: 24, fontSize: "clamp(28px, 3vw, 44px)" }}>
                Three Decades of Audit, Taxation and Advisory Work.
              </h2>
              <p className="body">
                The firm operates from two registered offices: a head office at Bagrecha Arcade, Ballari, Karnataka, and a branch office at Rishab Arcade, Bengaluru, Karnataka. Both partners — Fellow members of the ICAI — supervise engagements directly across statutory audit, tax audit, internal and concurrent audits, government and bank-branch audits, advisory, loan-syndication assistance, and corporate-services work.
              </p>
              <p className="body">
                The practice is not affiliated with any ICAI-registered Network. Engagement scope is agreed in writing on a per-engagement basis. The firm operates under the Chartered Accountants Act, 1949 and the regulations made thereunder.
              </p>
            </div>
            <figure style={{ margin: 0 }}>
              <div className="office-photo">
                <img src="assets/firm-images/c5.jpg" alt="The firm at Bagrecha Arcade" />
                <figcaption className="office-photo__cap">
                  <span className="label">The firm</span>
                  <span className="name">Bagrecha Arcade, Ballari · 2026</span>
                </figcaption>
              </div>
            </figure>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            no="02"
            eyebrow="Registered particulars"
            title={<>Reconciled to the <em>ICAI Register.</em></>}
            aside="The firm's registered particulars are reproduced from the records maintained by the Institute of Chartered Accountants of India per § 3.3.18."
          />
          <div className="dtable">
            <div className="dtable__row"><div className="dtable__label">Firm name</div><div className="dtable__value">Bagrecha and Singhvi LLP</div></div>
            <div className="dtable__row"><div className="dtable__label">Firm Registration No.</div><div className="dtable__value mono">{FIRM.frn}</div></div>
            <div className="dtable__row"><div className="dtable__label">Year of establishment</div><div className="dtable__value">1993</div></div>
            <div className="dtable__row"><div className="dtable__label">Constitution</div><div className="dtable__value">Limited Liability Partnership (LLP)</div></div>
            <div className="dtable__row"><div className="dtable__label">Practising under</div><div className="dtable__value">The Chartered Accountants Act, 1949</div></div>
            <div className="dtable__row"><div className="dtable__label">Number of partners</div><div className="dtable__value">2 · Fellow Chartered Accountants · DISA(ICAI)</div></div>
            <div className="dtable__row"><div className="dtable__label">Head office</div><div className="dtable__value">Bagrecha Arcade, Fort Main Road, Ballari, Karnataka 583102</div></div>
            <div className="dtable__row"><div className="dtable__label">Branch office</div><div className="dtable__value">Rishab Arcade, RMV II Stage, Bengaluru, Karnataka 560094</div></div>
            <div className="dtable__row"><div className="dtable__label">Network affiliation</div><div className="dtable__value">None</div></div>
            <div className="dtable__row"><div className="dtable__label">Working hours</div><div className="dtable__value">Mon–Sat · 10:00–19:00 IST · By prior appointment at Bengaluru</div></div>
            <div className="dtable__row"><div className="dtable__label">Email of record</div><div className="dtable__value"><a href="mailto:rajeshbagrecha@hotmail.com" style={{ color: "var(--accent)" }}>rajeshbagrecha@hotmail.com</a></div></div>
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            no="03"
            eyebrow="Practice doctrine"
            title={<>How the Firm <em>Works.</em></>}
            aside="Five operating principles the firm applies to every engagement."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1px", background: "var(--paper-rule)", border: "1px solid var(--paper-rule)" }}>
            {[
              ["I", "Direct partner supervision", "Every engagement is supervised directly by one or both partners. There is no intermediate engagement-management layer; the partners read the working papers and sign the reports."],
              ["II", "Engagement in writing", "Scope, deliverables, and the engagement framework are agreed in writing per engagement, in accordance with the applicable ICAI Standards on Engagements."],
              ["III", "Standards-based work", "Statutory audits are performed under the ICAI Standards on Auditing. Tax audits follow section 44AB and the corresponding Institute guidance. Internal audits use a documented risk-based methodology."],
              ["IV", "Confidentiality", "Information and working papers are held in confidence under the Code of Ethics. Client correspondence and identifiers are not disclosed in any external communication."],
              ["V", "Independence", "The firm and its members observe the Institute's independence framework on every engagement, including the prohibitions on incompatible services for audit clients."],
              ["VI", "Continuing learning", "Both partners hold the DISA qualification. Staff members are encouraged to take up the Institute's certificate courses in the practice areas they rotate through."],
            ].map(([num, name, desc], i) => (
              <div key={i} style={{ background: "var(--paper)", padding: "28px 24px" }}>
                <div style={{ fontFamily: "'Source Serif 4', serif", fontStyle: "italic", fontSize: 24, color: "var(--accent)", marginBottom: 12 }}>{num}</div>
                <h4 style={{ fontFamily: "'Source Serif 4', serif", fontSize: 18, fontWeight: 500, color: "var(--ink)", margin: "0 0 8px 0", letterSpacing: "-0.005em" }}>{name}</h4>
                <p className="meta" style={{ margin: 0, color: "var(--ink-3)" }}>{desc}</p>
              </div>
            ))}
          </div>

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

window.PageHome = PageHome;
window.PageAbout = PageAbout;
window.OfficeCard = OfficeCard;
window.Pager = Pager;
window.PageHero = PageHero;
window.SectionHead = SectionHead;
window.Eyebrow = Eyebrow;
window.Tag = Tag;