// Pages: Home, About, Insights, Contact, Expertise list, Industries list

// =================== HOME ===================
function HomePage({ navigate }) {
  return (
    <div className="page-enter">
      <HomeHero navigate={navigate} />
      <HomeMarquee />
      <HomePositioning />
      <HomeExpertise navigate={navigate} />
      <HomeWhoWeAdvise navigate={navigate} />
      <HomeInsights navigate={navigate} />
      <HomeWhy />
      <HomeCTA navigate={navigate} />
      <Footer navigate={navigate} />
    </div>
  );
}

function HomeHero({ navigate }) {
  const [time, setTime] = useState('');
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const opts = { hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Kolkata', hour12: false };
      setTime(`IST ${d.toLocaleTimeString('en-IN', opts)}`);
    };
    tick();
    const i = setInterval(tick, 30000);
    return () => clearInterval(i);
  }, []);

  return (
    <section style={{ paddingTop: 120, paddingBottom: 90 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }} className="hero-grid">
          <div>
            <Reveal>
              <div style={{ display: 'flex', gap: 22, alignItems: 'center', marginBottom: 36 }}>
                <span className="num">001 / Cross-border advisory</span>
                <span style={{ width: 30, height: 1, background: 'var(--hairline-strong)' }} />
                <span className="mono" style={{ fontSize: 11, color: 'var(--graphite)' }}>Est. New Delhi</span>
              </div>
            </Reveal>

            <Reveal delay={80}>
              <h1 style={{
                fontFamily: 'var(--sans)', fontWeight: 400,
                fontSize: 'clamp(44px, 6.4vw, 96px)',
                letterSpacing: '-0.03em', lineHeight: 0.96,
                color: 'var(--ink)', maxWidth: '13ch'
              }}>
                Cross-border tax<br />
                and regulatory<br />
                <span className="serif-i" style={{ color: 'var(--ink-soft)' }}>advisory</span> for globally<br />
                connected businesses.
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <p style={{
                marginTop: 40, color: 'var(--graphite)',
                fontSize: 'clamp(16px, 1.25vw, 19px)',
                lineHeight: 1.5, maxWidth: 580
              }}>
                T D &amp; Co. advises multinational groups, technology businesses and high-net-worth individuals on complex international financial and regulatory matters — quietly, technically and with the commercial perspective the work demands.
              </p>
            </Reveal>

            <Reveal delay={240}>
              <div style={{ display: 'flex', gap: 14, marginTop: 44, flexWrap: 'wrap' }}>
                <button className="btn" onClick={() => navigate({ name: 'contact' })}>
                  Schedule advisory consultation <span className="arrow">→</span>
                </button>
                <button className="btn ghost" onClick={() => navigate({ name: 'expertise' })}>
                  Explore expertise <span className="arrow">→</span>
                </button>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120} style={{ height: '100%' }}>
            <div style={{ height: 580, position: 'relative' }} className="hero-art">
              <GridArt tone="dark" label="advisory perspectives — fig. 01" code="REF // 2026.01" />
              <div style={{
                position: 'absolute', left: -1, top: -28, fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--graphite)', letterSpacing: '0.06em'
              }}>
                {time}  ·  N 28°36′  ·  E 77°12′
              </div>
            </div>
          </Reveal>
        </div>

        <div style={{ marginTop: 100, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40, borderTop: '1px solid var(--hairline)', paddingTop: 32 }} className="stats">
          {[
            ['001', 'Practice areas', '9'],
            ['002', 'Industry sectors', '5'],
            ['003', 'Jurisdictions advised on', '20+'],
            ['004', 'Formerly', 'Tarun Dhall & Associates'],
          ].map(([n, k, v]) => (
            <div key={n}>
              <div className="num" style={{ marginBottom: 14 }}>{n}</div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{k}</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 22, letterSpacing: '-0.02em' }}>{v}</div>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 980px) {
            .hero-grid { grid-template-columns: 1fr !important; }
            .hero-art { height: 380px !important; }
            .stats { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HomeMarquee() {
  const items = ['Transfer Pricing', 'International Tax', 'FEMA Advisory', 'Pillar Two Readiness', 'GCC Architecture', 'Cross-Border M&A', 'HNI / UHNI Structuring', 'Family Office Support', 'Audit & Assurance', 'CFO Advisory'];
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--ivory)', overflow: 'hidden', padding: '34px 0', borderTop: '1px solid var(--hairline)' }}>
      <div style={{ display: 'flex', gap: 56, animation: 'marquee 50s linear infinite', whiteSpace: 'nowrap' }}>
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} style={{ fontFamily: 'var(--sans)', fontWeight: 300, fontSize: 26, letterSpacing: '-0.015em', color: 'rgba(247,247,245,0.85)', display: 'inline-flex', alignItems: 'center', gap: 56 }}>
            {t}
            <span style={{ display: 'inline-block', width: 6, height: 6, background: '#6F7A85', borderRadius: 999 }} />
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
      `}</style>
    </section>
  );
}

function HomePositioning() {
  return (
    <section style={{ padding: '140px 0 110px' }}>
      <div className="container">
        <SectionHead
          num="002 / Positioning"
          kicker="Practice character"
          title={<>A practice built around the matters where <span className="serif-i">cross-border</span> complexity is the substance — not an addendum.</>}
          lede="T D & Co. is positioned for the work that does not sit cleanly within a single jurisdiction: transfer pricing, international tax, FEMA architecture and the regulatory questions that follow capital across borders. Engagements tend to be technical, longitudinal and quietly held."
        />

        <div style={{ marginTop: 90, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 50 }} className="position-cols">
          {[
            {
              n: '01',
              h: 'International perspective',
              p: 'Treaty interpretation, BEPS-aligned structuring and substance analysis applied to live operating questions — not abstract doctrine.'
            },
            {
              n: '02',
              h: 'Regulatory depth',
              p: 'FEMA, exchange-control and overseas-investment positions advised at the architecture level, and held through their reporting and exit pathways.'
            },
            {
              n: '03',
              h: 'Commercial fluency',
              p: 'Recommendations are written for boards, finance leaders and operating teams — not for the file. Defensibility and execution are advised together.'
            },
          ].map(c => (
            <Reveal key={c.n} delay={parseInt(c.n) * 80}>
              <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 28 }}>
                <div className="num">{c.n}</div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 26, letterSpacing: '-0.02em', marginTop: 16, marginBottom: 14 }}>{c.h}</div>
                <p style={{ color: 'var(--graphite)', fontSize: 15.5, lineHeight: 1.55 }}>{c.p}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <style>{`
          @media (max-width: 900px) {
            .position-cols { grid-template-columns: 1fr !important; gap: 28px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HomeExpertise({ navigate }) {
  const [hovered, setHovered] = useState(null);
  return (
    <section style={{ padding: '120px 0', background: 'var(--ivory-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="container">
        <SectionHead
          num="003 / Expertise"
          kicker="Practice areas"
          title="Specialised advisory across the full international tax and regulatory perimeter."
          lede="Nine practice areas, advised in combination. Most engagements involve more than one — by design."
        />

        <div style={{ marginTop: 60 }}>
          {EXPERTISE_LIST.map((e, i) => (
            <a
              key={e.slug}
              className="row"
              onMouseEnter={() => setHovered(e.slug)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => navigate({ name: 'expertise-detail', slug: e.slug })}
            >
              <span className="num">{String(i + 1).padStart(3, '0')}</span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(22px, 2vw, 30px)', letterSpacing: '-0.02em' }}>
                {e.title}
              </span>
              <span className="row-desc" style={{ color: 'var(--graphite)', fontSize: 14.5, lineHeight: 1.5 }}>
                {e.short}
              </span>
              <span className="row-arrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: hovered === e.slug ? 'var(--ink)' : 'var(--graphite)', whiteSpace: 'nowrap' }}>
                Read brief →
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeWhoWeAdvise({ navigate }) {
  return (
    <section style={{ padding: '140px 0 100px' }}>
      <div className="container">
        <SectionHead
          num="004 / Who we advise"
          kicker="Sectors"
          title={<>Sectors where the <span className="serif-i">international</span> dimension is the work, not the exception.</>}
        />

        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }} className="advise-grid">
          {INDUSTRIES_LIST.map((it, i) => (
            <Reveal key={it.slug} delay={i * 60}>
              <a
                onClick={() => navigate({ name: 'industry-detail', slug: it.slug })}
                style={{ display: 'block', cursor: 'pointer', position: 'relative' }}
                className="advise-card"
              >
                <div style={{ height: 280, marginBottom: 22, position: 'relative', overflow: 'hidden' }}>
                  <GridArt tone={i % 2 === 0 ? 'dark' : 'light'} label={it.title.toLowerCase()} code={`SEC // ${String(i + 1).padStart(2, '0')}`} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 20 }}>
                  <div>
                    <div className="num" style={{ marginBottom: 8 }}>{String(i + 1).padStart(2, '0')}</div>
                    <div style={{ fontFamily: 'var(--sans)', fontSize: 26, letterSpacing: '-0.02em' }}>{it.title}</div>
                    <p style={{ color: 'var(--graphite)', fontSize: 14.5, marginTop: 10, maxWidth: 520, lineHeight: 1.55 }}>{it.short}</p>
                  </div>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 18 }}>↗</span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>

        <style>{`
          .advise-card:hover .row-arrow { transform: translateX(4px); }
          @media (max-width: 820px) {
            .advise-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HomeInsights({ navigate }) {
  const featured = INSIGHTS.find(i => i.featured);
  const others = INSIGHTS.filter(i => !i.featured).slice(0, 3);

  return (
    <section style={{ padding: '120px 0', background: 'var(--ink)', color: 'var(--ivory)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.6fr)', gap: 60, alignItems: 'start' }} className="sec-head">
          <div>
            <div className="num" style={{ color: '#8A9099' }}>005 / Insights</div>
            <div className="eyebrow" style={{ marginTop: 10, color: '#8A9099' }}>Editorial research</div>
          </div>
          <div>
            <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(34px, 4.4vw, 64px)', letterSpacing: '-0.025em', lineHeight: 1.04 }}>
              Considered analysis on the regulatory and tax developments that move firm-level decisions.
            </h2>
          </div>
        </div>

        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60 }} className="insights-grid">
          {featured && (
            <a onClick={() => navigate({ name: 'insights' })} style={{ cursor: 'pointer' }}>
              <div style={{ aspectRatio: '4/3', position: 'relative', overflow: 'hidden', marginBottom: 28 }}>
                <GridArt tone="dark" label="featured analysis" code="01 / FEATURED" />
              </div>
              <div className="mono" style={{ fontSize: 11, color: '#8A9099', display: 'flex', gap: 16, marginBottom: 14 }}>
                <span style={{ color: 'var(--ivory)' }}>{featured.cat}</span>
                <span>·</span>
                <span>{featured.date}</span>
                <span>·</span>
                <span>{featured.read}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(26px, 2.4vw, 36px)', letterSpacing: '-0.02em', lineHeight: 1.15, maxWidth: 580 }}>
                {featured.title}
              </h3>
              <p style={{ color: '#B0B2B6', marginTop: 14, fontSize: 15.5, lineHeight: 1.55, maxWidth: 540 }}>{featured.dek}</p>
            </a>
          )}

          <div>
            {others.map((it, i) => (
              <a key={i} onClick={() => navigate({ name: 'insights' })}
                style={{
                  display: 'block', padding: '24px 0', borderTop: '1px solid #2A2A2A', cursor: 'pointer',
                  transition: 'transform .35s cubic-bezier(.2,.7,.2,1)'
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateX(6px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}
              >
                <div className="mono" style={{ fontSize: 10.5, color: '#8A9099', display: 'flex', gap: 12, marginBottom: 10 }}>
                  <span style={{ color: 'var(--ivory)' }}>{it.cat}</span>
                  <span>·</span>
                  <span>{it.date}</span>
                </div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 19, letterSpacing: '-0.015em', lineHeight: 1.3 }}>{it.title}</div>
              </a>
            ))}

            <a onClick={() => navigate({ name: 'insights' })}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 40, fontSize: 13.5, cursor: 'pointer' }}
              className="ulink always">
              All insights →
            </a>
          </div>
        </div>

        <style>{`
          @media (max-width: 820px) {
            .insights-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HomeWhy() {
  const reasons = [
    {
      n: 'i',
      title: 'Cross-border regulatory perspective',
      body: 'Tax and exchange-control regimes read as a single architecture. Positions held coherently through structuring, reporting and dispute.'
    },
    {
      n: 'ii',
      title: 'Strategic tax alignment',
      body: 'Inter-company arrangements designed for the operating model and the audit room — not as documentation projects after the fact.'
    },
    {
      n: 'iii',
      title: 'Globally aware advisory',
      body: 'Treaty, MLI and Pillar Two read against the substance of the business — and against the directions the international consensus is actually moving.'
    },
    {
      n: 'iv',
      title: 'Technical depth, commercial register',
      body: 'Memos written to be read by boards and finance leaders. Recommendations defensible to the assessment officer; legible to the chief executive.'
    },
  ];

  return (
    <section style={{ padding: '140px 0' }}>
      <div className="container">
        <SectionHead
          num="006 / Why T D & Co."
          kicker="Institutional positioning"
          title="A boutique practice with the technical posture of a much larger firm — and the discretion of one considerably smaller."
        />

        <div style={{ marginTop: 90, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }} className="why-grid">
          {reasons.map((r, i) => (
            <Reveal key={r.n} delay={i * 60}>
              <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 30, paddingRight: 20 }}>
                <div className="mono" style={{ fontSize: 13, color: 'var(--slate)', letterSpacing: '0.04em' }}>{r.n}.</div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(22px, 2vw, 28px)', letterSpacing: '-0.02em', marginTop: 14, marginBottom: 14 }}>
                  {r.title}
                </div>
                <p style={{ color: 'var(--graphite)', fontSize: 15.5, lineHeight: 1.55, maxWidth: 480 }}>{r.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <style>{`
          @media (max-width: 820px) {
            .why-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HomeCTA({ navigate }) {
  return (
    <section style={{ padding: '140px 0 160px', background: 'var(--ivory-2)', borderTop: '1px solid var(--hairline)' }}>
      <div className="container">
        <div className="num" style={{ marginBottom: 26 }}>007 / Engagement</div>
        <h2 style={{
          fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(40px, 5.6vw, 84px)',
          letterSpacing: '-0.03em', lineHeight: 0.98, maxWidth: 1100
        }}>
          Discuss complex tax and<br />regulatory matters with <span className="serif-i">clarity.</span>
        </h2>
        <p style={{ color: 'var(--graphite)', fontSize: 'clamp(15px, 1.15vw, 18px)', maxWidth: 620, marginTop: 30, lineHeight: 1.55 }}>
          A short, considered conversation about the matter on your desk. Engagements are accepted on the basis of fit, conflict review and confidentiality.
        </p>
        <div style={{ display: 'flex', gap: 14, marginTop: 44, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => navigate({ name: 'contact' })}>
            Schedule advisory consultation <span className="arrow">→</span>
          </button>
          <button className="btn ghost" onClick={() => navigate({ name: 'expertise' })}>
            Review practice areas <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}


// =================== ABOUT ===================
function AboutPage({ navigate }) {
  return (
    <div className="page-enter">
      <DetailHero
        num="002"
        kicker="About / The firm"
        title={<>A boutique practice for <span className="serif-i">internationally</span> structured business and capital.</>}
        lede="T D & Co. is a chartered accountancy and advisory practice based in New Delhi, advising globally connected businesses, technology groups, family capital and individuals on cross-border tax, regulatory and financial matters. The firm was formerly known as Tarun Dhall & Associates."
        meta={[
          ['Established', 'Tarun Dhall & Associates'],
          ['Practice areas', 'Nine'],
          ['Headquartered', 'New Delhi, India'],
          ['Registration', 'ICAI'],
        ]}
      />

      <section style={{ padding: '40px 0 100px' }}>
        <div className="container">
          <hr className="hairline" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, paddingTop: 80 }} className="about-philo">
            <div>
              <div className="num">A.01</div>
              <div className="eyebrow" style={{ marginTop: 10 }}>Philosophy</div>
            </div>
            <div>
              <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(28px, 3vw, 44px)', letterSpacing: '-0.02em', lineHeight: 1.15, maxWidth: 820 }}>
                The work is technical. The advice is commercial. The relationships are long.
              </h2>
              <div style={{ marginTop: 36, display: 'grid', gap: 22, color: 'var(--graphite)', fontSize: 16, lineHeight: 1.6, maxWidth: 720 }}>
                <p>The firm is built around the kind of advisory work that does not reduce to a compliance checklist — transfer pricing positions defended through audit, ODI structures held across reporting cycles, residency and disclosure regimes navigated quietly across years.</p>
                <p>Most engagements begin with a specific question — a planned acquisition, an inbound investment, a year-end pricing review, a notice from the assessing officer — and broaden, over time, into the longitudinal advisory relationships that this kind of work requires to be done well.</p>
                <p>The firm does not hold itself out as a generalist accountancy practice. The work it accepts, and the work it declines, are both intentional.</p>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 110, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }} className="about-cols">
            <div style={{ height: 540, position: 'relative' }} className="about-img">
              <GridArt tone="dark" label="institutional architecture" code="ABOUT // 01" />
            </div>
            <div style={{ alignSelf: 'center' }}>
              <div className="num">A.02</div>
              <div className="eyebrow" style={{ marginTop: 10, marginBottom: 24 }}>Approach</div>

              {[
                ['Technical depth', 'Practitioner literacy across treaty, transfer pricing, FEMA and indirect tax — written, read and held internally.'],
                ['Cross-border perspective', 'Indian regulation read alongside the parent or counter-party jurisdiction, not in isolation.'],
                ['Advisory mindset', 'Memos are written to be acted on by boards and operators — not filed and forgotten.'],
                ['Discretion', 'Engagements are private. Client identity and matter detail are not used for marketing.'],
              ].map(([h, p], i) => (
                <div key={i} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 22, paddingBottom: 22 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--slate)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ fontFamily: 'var(--sans)', fontSize: 22, letterSpacing: '-0.02em', marginTop: 8 }}>{h}</div>
                  <p style={{ color: 'var(--graphite)', fontSize: 14.5, marginTop: 8, lineHeight: 1.55 }}>{p}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '110px 0 130px', background: 'var(--ivory-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="num">A.03</div>
          <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(32px, 3.6vw, 56px)', letterSpacing: '-0.025em', lineHeight: 1.04, marginTop: 18, maxWidth: 1100 }}>
            From Tarun Dhall &amp; Associates to T D &amp; Co.
          </h2>

          <div style={{ marginTop: 70 }}>
            {[
              { y: '2009', t: 'Practice founded as Tarun Dhall & Associates, advising domestic businesses on assurance and tax matters.' },
              { y: '2014', t: 'Cross-border advisory deepens; practice expands into FEMA, ODI and inbound investment structuring.' },
              { y: '2018', t: 'Transfer pricing and international tax established as standalone practice areas; first multinational group advisory mandates.' },
              { y: '2021', t: 'Family office and HNI / UHNI advisory formalised as longitudinal practice; technology-sector advisory grows.' },
              { y: '2024', t: 'Pillar Two and BEPS readiness work expands; firm advises GCC operations and Indian outbound groups.' },
              { y: '2026', t: 'Practice rebranded as T D & Co. — formalising the boutique advisory positioning the work has always reflected.' },
            ].map((row, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40, padding: '22px 0', borderTop: '1px solid var(--hairline-strong)' }}>
                <div className="mono" style={{ fontSize: 14, color: 'var(--slate)' }}>{row.y}</div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(18px, 1.6vw, 22px)', letterSpacing: '-0.015em', maxWidth: 820, lineHeight: 1.4 }}>{row.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0' }}>
        <div className="container">
          <SectionHead num="A.04" kicker="People" title="A small, technical bench. Engagements are held by partners, not handed off." />

          <div style={{ marginTop: 70, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 30 }} className="people-grid">
            {[
              { initials: 'TD', role: 'Founding Partner', name: 'Tarun Dhall', bio: 'International tax, transfer pricing and cross-border advisory. Former Big Four practitioner; admitted to ICAI.' },
              { initials: 'PA', role: 'Partner — Regulatory', name: 'Practice Lead — FEMA', bio: 'Exchange control, ODI and inbound investment architecture; engagement lead for cross-border financial commitments.' },
              { initials: 'AR', role: 'Partner — Audit', name: 'Practice Lead — Assurance', bio: 'Group reporting alignment, statutory audit and IFRS-aligned engagements for foreign-parent subsidiaries.' },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ border: '1px solid var(--hairline)', padding: '32px 28px 28px', background: 'var(--paper)' }}>
                  <div style={{
                    width: 56, height: 56, border: '1px solid var(--ink)',
                    fontFamily: 'var(--mono)', fontSize: 14, letterSpacing: '0.04em',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28
                  }}>{p.initials}</div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>{p.role}</div>
                  <div style={{ fontFamily: 'var(--sans)', fontSize: 22, letterSpacing: '-0.02em', marginBottom: 14 }}>{p.name}</div>
                  <p style={{ color: 'var(--graphite)', fontSize: 14, lineHeight: 1.55 }}>{p.bio}</p>
                </div>
              </Reveal>
            ))}
          </div>

          <p className="mono" style={{ fontSize: 11.5, color: 'var(--graphite)', marginTop: 26 }}>
            ↳ Detailed practitioner biographies provided on engagement.
          </p>
        </div>
      </section>

      <HomeCTA navigate={navigate} />
      <Footer navigate={navigate} />

      <style>{`
        @media (max-width: 900px) {
          .about-philo, .about-cols, .people-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
          .about-img { height: 320px !important; }
        }
      `}</style>
    </div>
  );
}


// =================== EXPERTISE LIST ===================
function ExpertiseListPage({ navigate }) {
  return (
    <div className="page-enter">
      <DetailHero
        num="003"
        kicker="Expertise / All practice areas"
        title={<>Specialised practice areas across the international tax and regulatory perimeter.</>}
        lede="Nine areas of focused practice. Most engagements draw on more than one — transfer pricing read alongside FEMA, international tax in the context of a transaction, GST positions on the same flows that trigger withholding."
      />

      <section style={{ padding: '40px 0 130px' }}>
        <div className="container">
          {EXPERTISE_LIST.map((e, i) => (
            <a
              key={e.slug}
              className="row"
              onClick={() => navigate({ name: 'expertise-detail', slug: e.slug })}
            >
              <span className="num">{String(i + 1).padStart(3, '0')}</span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(24px, 2.4vw, 36px)', letterSpacing: '-0.02em' }}>{e.title}</span>
              <span className="row-desc" style={{ color: 'var(--graphite)', fontSize: 14.5, lineHeight: 1.5, maxWidth: 540 }}>{e.short}</span>
              <span className="row-arrow" style={{ fontFamily: 'var(--mono)', fontSize: 18 }}>→</span>
            </a>
          ))}
        </div>
      </section>
      <Footer navigate={navigate} />
    </div>
  );
}

// =================== INDUSTRIES LIST ===================
function IndustriesListPage({ navigate }) {
  return (
    <div className="page-enter">
      <DetailHero
        num="004"
        kicker="Industries / Sectors advised"
        title="Sectors where international structure shapes everything."
        lede="Five sector practices, each with its own characteristic regulatory posture. The firm’s industry coverage tracks the kinds of businesses for which cross-border architecture is the central — not incidental — fact."
      />

      <section style={{ padding: '20px 0 130px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }} className="industries-grid">
            {INDUSTRIES_LIST.map((it, i) => (
              <a key={it.slug} onClick={() => navigate({ name: 'industry-detail', slug: it.slug })}
                style={{ display: 'block', cursor: 'pointer', border: '1px solid var(--hairline)', background: 'var(--paper)' }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--ink)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--hairline)'; }}
              >
                <div style={{ height: 280, position: 'relative' }}>
                  <GridArt tone={i % 2 === 0 ? 'dark' : 'light'} label={it.title.toLowerCase()} code={`IND // ${String(i + 1).padStart(2, '0')}`} />
                </div>
                <div style={{ padding: 28 }}>
                  <div className="num" style={{ marginBottom: 8 }}>{String(i + 1).padStart(2, '0')}</div>
                  <div style={{ fontFamily: 'var(--sans)', fontSize: 28, letterSpacing: '-0.02em', marginBottom: 12 }}>{it.title}</div>
                  <p style={{ color: 'var(--graphite)', fontSize: 14.5, lineHeight: 1.55, marginBottom: 22 }}>{it.short}</p>
                  <span className="ulink mono" style={{ fontSize: 11.5, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    Read sector brief →
                  </span>
                </div>
              </a>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 820px) {
            .industries-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
}


// =================== INSIGHTS ===================
function InsightsPage({ navigate }) {
  const cats = ['All', ...Array.from(new Set(INSIGHTS.map(i => i.cat)))];
  const [active, setActive] = useState('All');
  const filtered = active === 'All' ? INSIGHTS : INSIGHTS.filter(i => i.cat === active);
  const featured = filtered.find(i => i.featured) || filtered[0];
  const others = filtered.filter(i => i !== featured);

  return (
    <div className="page-enter">
      <DetailHero
        num="005"
        kicker="Insights / Editorial research"
        title="Considered analysis on regulatory and tax developments."
        lede="A curated journal of practitioner notes — read by finance leaders, in-house counsel and operating partners — on the developments that move firm-level decisions."
      />

      <section style={{ padding: '20px 0 60px' }}>
        <div className="container">
          <hr className="hairline" />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '24px 0', borderBottom: '1px solid var(--hairline)', flexWrap: 'wrap', gap: 16 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {cats.map(c => (
                <button key={c} onClick={() => setActive(c)}
                  style={{
                    padding: '8px 14px',
                    border: '1px solid ' + (active === c ? 'var(--ink)' : 'var(--hairline-strong)'),
                    background: active === c ? 'var(--ink)' : 'transparent',
                    color: active === c ? 'var(--ivory)' : 'var(--ink)',
                    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.06em',
                    textTransform: 'uppercase', cursor: 'pointer',
                    transition: 'background .2s ease, color .2s ease, border-color .2s ease'
                  }}>
                  {c}
                </button>
              ))}
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--graphite)', letterSpacing: '0.08em' }}>
              {filtered.length} {filtered.length === 1 ? 'entry' : 'entries'} · Updated weekly
            </div>
          </div>
        </div>
      </section>

      {featured && (
        <section style={{ padding: '0 0 100px' }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60, alignItems: 'center' }} className="featured-grid">
              <div style={{ height: 540, position: 'relative' }}>
                <GridArt tone="dark" label="featured analysis" code="01 / FEATURED" />
              </div>
              <div>
                <div className="eyebrow" style={{ color: 'var(--slate)' }}>Featured · {featured.cat}</div>
                <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(28px, 3vw, 44px)', letterSpacing: '-0.025em', lineHeight: 1.1, marginTop: 22 }}>
                  {featured.title}
                </h2>
                <p style={{ color: 'var(--graphite)', fontSize: 17, lineHeight: 1.55, marginTop: 22, maxWidth: 540 }}>{featured.dek}</p>
                <div className="mono" style={{ fontSize: 11, color: 'var(--graphite)', marginTop: 24, letterSpacing: '0.06em' }}>
                  {featured.date} · {featured.read} read
                </div>
                <div style={{ marginTop: 28 }}>
                  <a className="ulink always" style={{ fontSize: 13.5 }}>Read the analysis →</a>
                </div>
              </div>
            </div>

            <style>{`
              @media (max-width: 900px) {
                .featured-grid { grid-template-columns: 1fr !important; }
              }
            `}</style>
          </div>
        </section>
      )}

      <section style={{ padding: '40px 0 140px' }}>
        <div className="container">
          <div className="num" style={{ marginBottom: 30 }}>05.02 / Recent</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }} className="insights-list">
            {others.map((it, i) => (
              <Reveal key={i} delay={i * 50}>
                <a style={{
                  display: 'block', padding: '32px 0', cursor: 'pointer',
                  borderTop: '1px solid var(--hairline-strong)',
                  borderRight: (i + 1) % 3 === 0 ? 'none' : '1px solid var(--hairline)',
                  paddingRight: (i + 1) % 3 === 0 ? 0 : 32,
                  paddingLeft: i % 3 === 0 ? 0 : 32,
                  transition: 'background .2s ease',
                }}
                  onMouseEnter={(e) => e.currentTarget.style.background = 'var(--ivory-2)'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                >
                  <div className="mono" style={{ fontSize: 11, color: 'var(--graphite)', display: 'flex', gap: 12, marginBottom: 18, letterSpacing: '0.06em' }}>
                    <span style={{ color: 'var(--slate)' }}>{it.cat}</span>
                    <span>·</span>
                    <span>{it.date}</span>
                    <span>·</span>
                    <span>{it.read}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--sans)', fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.2, minHeight: 80 }}>{it.title}</div>
                  <p style={{ color: 'var(--graphite)', fontSize: 14, marginTop: 14, lineHeight: 1.55 }}>{it.dek}</p>
                  <div style={{ marginTop: 22 }}><span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em' }}>READ →</span></div>
                </a>
              </Reveal>
            ))}
          </div>

          <style>{`
            @media (max-width: 900px) {
              .insights-list { grid-template-columns: 1fr !important; }
              .insights-list a { padding-left: 0 !important; padding-right: 0 !important; border-right: none !important; }
            }
          `}</style>
        </div>
      </section>
      <Footer navigate={navigate} />
    </div>
  );
}


// =================== CONTACT ===================
function ContactPage({ navigate }) {
  const [form, setForm] = useState({
    name: '', org: '', juris: '', nature: '', email: '', context: ''
  });
  const [sent, setSent] = useState(false);
  const [touched, setTouched] = useState({});

  const handle = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const blur = (k) => () => setTouched(t => ({ ...t, [k]: true }));

  const valid = form.name && form.email.includes('@') && form.nature;

  return (
    <div className="page-enter">
      <DetailHero
        num="006"
        kicker="Contact / Engagement"
        title={<>A short, considered <span className="serif-i">conversation</span> about the matter on your desk.</>}
        lede="Engagements are accepted on the basis of fit, conflict review and confidentiality. The firm responds to all qualified inquiries within two business days."
      />

      <section style={{ padding: '40px 0 140px' }}>
        <div className="container">
          <hr className="hairline" />

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, paddingTop: 80 }} className="contact-grid">
            <div>
              {[
                ['Office', 'T D & Co.\nChartered Accountants\nConnaught Place, New Delhi 110001\nIndia'],
                ['General', 'advisory@tdc.business'],
                ['Direct', '+91 11 0000 0000'],
                ['Hours', 'Mon–Fri · 09:30 – 18:30 IST'],
              ].map(([k, v]) => (
                <div key={k} style={{ marginBottom: 30, paddingBottom: 24, borderBottom: '1px solid var(--hairline)' }}>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>{k}</div>
                  <div style={{ fontSize: 14.5, whiteSpace: 'pre-line', lineHeight: 1.55 }}>{v}</div>
                </div>
              ))}

              <div className="mono" style={{ fontSize: 11, color: 'var(--graphite)', lineHeight: 1.7, marginTop: 30, letterSpacing: '0.04em' }}>
                ↳ Inquiries are reviewed under the firm’s conflict and confidentiality protocols. Submission does not constitute an engagement.
              </div>
            </div>

            <div>
              {!sent ? (
                <form onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
                  <div className="num" style={{ marginBottom: 14 }}>06.01 / Inquiry</div>
                  <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.025em', marginBottom: 50 }}>
                    Tell us about the matter.
                  </h2>

                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 30 }} className="form-grid">
                    <div>
                      <label className="field-label">Name</label>
                      <input className="field" value={form.name} onChange={handle('name')} onBlur={blur('name')} placeholder="Full name" />
                    </div>
                    <div>
                      <label className="field-label">Organisation</label>
                      <input className="field" value={form.org} onChange={handle('org')} placeholder="Company / firm" />
                    </div>
                    <div>
                      <label className="field-label">Email</label>
                      <input className="field" type="email" value={form.email} onChange={handle('email')} onBlur={blur('email')} placeholder="address@domain.com" />
                    </div>
                    <div>
                      <label className="field-label">Jurisdiction(s)</label>
                      <input className="field" value={form.juris} onChange={handle('juris')} placeholder="e.g. India / US / Singapore" />
                    </div>
                  </div>

                  <div style={{ marginTop: 30 }}>
                    <label className="field-label">Nature of requirement</label>
                    <select className="field" value={form.nature} onChange={handle('nature')} onBlur={blur('nature')}
                      style={{ appearance: 'none', backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231A1A1A' fill='none'/></svg>\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center' }}>
                      <option value="">Select an area —</option>
                      <option>Transfer Pricing</option>
                      <option>International Tax</option>
                      <option>FEMA & Cross-Border</option>
                      <option>GST Advisory</option>
                      <option>Audit & Assurance</option>
                      <option>CFO / Strategic Advisory</option>
                      <option>Transaction Support</option>
                      <option>HNI / UHNI / Family Office</option>
                      <option>General inquiry</option>
                    </select>
                  </div>

                  <div style={{ marginTop: 30 }}>
                    <label className="field-label">Additional context (optional)</label>
                    <textarea className="field" value={form.context} onChange={handle('context')} placeholder="A short description of the matter — operating jurisdictions, transaction shape, timing." />
                  </div>

                  <div style={{ marginTop: 50, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
                    <p className="mono" style={{ fontSize: 11, color: 'var(--graphite)', maxWidth: 420, lineHeight: 1.5, letterSpacing: '0.04em' }}>
                      ↳ Submitted information is held in confidence. The firm may decline an inquiry on conflict grounds without providing reasons.
                    </p>
                    <button className="btn" type="submit" disabled={!valid} style={{ opacity: valid ? 1 : 0.5, cursor: valid ? 'pointer' : 'not-allowed' }}>
                      Submit inquiry <span className="arrow">→</span>
                    </button>
                  </div>

                  <style>{`
                    @media (max-width: 600px) {
                      .form-grid { grid-template-columns: 1fr !important; }
                    }
                  `}</style>
                </form>
              ) : (
                <div style={{ animation: 'pageEnter .5s cubic-bezier(.2,.7,.2,1) both' }}>
                  <div className="num" style={{ marginBottom: 14 }}>06.02 / Acknowledged</div>
                  <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(32px, 3.4vw, 48px)', letterSpacing: '-0.025em', lineHeight: 1.1 }}>
                    Inquiry received.
                  </h2>
                  <p style={{ color: 'var(--graphite)', fontSize: 16, lineHeight: 1.6, marginTop: 24, maxWidth: 540 }}>
                    Thank you, {form.name.split(' ')[0]}. The firm will review and respond within two business days, typically by direct email from the engagement partner most relevant to the matter described.
                  </p>
                  <div style={{ marginTop: 36 }}>
                    <button className="btn ghost" onClick={() => { setSent(false); setForm({ name: '', org: '', juris: '', nature: '', email: '', context: '' }); }}>
                      Submit another <span className="arrow">→</span>
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          <style>{`
            @media (max-width: 900px) {
              .contact-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
            }
          `}</style>
        </div>
      </section>
      <Footer navigate={navigate} />
    </div>
  );
}

Object.assign(window, {
  HomePage, AboutPage, InsightsPage, ContactPage,
  ExpertiseListPage, IndustriesListPage, HomeCTA,
});