// Industries list (index) + detail page

function IndustriesPage({ navigate }) {
  return (
    <main className="page-enter">
      <section style={{ paddingTop: 130, paddingBottom: 60 }}>
        <div className="container">
          <div className="num" style={{ marginBottom: 22 }}>001 / Industries</div>
          <h1 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(48px, 7.2vw, 110px)', letterSpacing: '-0.035em', lineHeight: 0.94, maxWidth: 1180 }}>
            Sectors where <span className="serif-i">international</span> structure shapes everything.
          </h1>
          <p style={{ marginTop: 36, color: 'var(--graphite)', fontSize: 19, maxWidth: 760, lineHeight: 1.5 }}>
            Five sector practices, defined less by industry vertical than by the recurring shape of the cross-border arrangements they engage. Each carries its own characteristic regulatory geometry — and a corresponding way the practice is brought to bear.
          </p>
        </div>
      </section>

      <section style={{ padding: '60px 0 130px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 }} className="ind-list">
            {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', border: '1px solid var(--hairline)', background: 'var(--paper)', transition: 'border-color .25s ease' }}
                  onMouseEnter={(ev) => ev.currentTarget.style.borderColor = 'var(--ink)'}
                  onMouseLeave={(ev) => ev.currentTarget.style.borderColor = 'var(--hairline)'}>
                  <div style={{ height: 280 }}>
                    <GridArt tone={i % 2 === 0 ? 'dark' : 'light'} label={it.title.toLowerCase()} code={`SEC // ${String(i + 1).padStart(2, '0')}`} />
                  </div>
                  <div style={{ padding: '32px 32px 36px' }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 14 }}>
                      <span className="num">{String(i + 1).padStart(2, '0')}</span>
                      <span className="eyebrow">Sector</span>
                    </div>
                    <h3 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(26px, 2.6vw, 36px)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>{it.title}</h3>
                    <p style={{ marginTop: 16, color: 'var(--graphite)', fontSize: 15, lineHeight: 1.6, maxWidth: 540 }}>{it.short}</p>
                    <div style={{ marginTop: 26, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--slate)', letterSpacing: '0.08em' }}>
                      VIEW SECTOR BRIEF →
                    </div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Footer navigate={navigate} />
      <style>{`
        @media (max-width: 820px) { .ind-list { grid-template-columns: 1fr !important; } }
      `}</style>
    </main>
  );
}

function IndustryDetail({ slug, navigate }) {
  const item = INDUSTRIES_LIST.find(i => i.slug === slug) || INDUSTRIES_LIST[0];
  const idx = INDUSTRIES_LIST.findIndex(i => i.slug === item.slug);
  const next = INDUSTRIES_LIST[(idx + 1) % INDUSTRIES_LIST.length];
  const num = String(idx + 1).padStart(3, '0');

  // Relevant practice areas — pick three by topic affinity
  const relevant = {
    'technology-saas': ['transfer-pricing', 'international-tax', 'gst-advisory'],
    'gccs-mnc-subsidiaries': ['transfer-pricing', 'audit-assurance', 'international-tax'],
    'cross-border-businesses': ['fema-cross-border', 'international-tax', 'transaction-support'],
    'founders-promoters': ['hni-uhni-advisory', 'fema-cross-border', 'transaction-support'],
    'professional-services': ['international-tax', 'gst-advisory', 'cfo-strategic-advisory'],
  }[item.slug] || [];

  return (
    <main className="page-enter">
      <section style={{ paddingTop: 130, paddingBottom: 30 }}>
        <div className="container">
          <a className="ulink" onClick={() => navigate({ name: 'industries' })} style={{ fontSize: 12.5, color: 'var(--graphite)', cursor: 'pointer' }}>
            ← Industries
          </a>
          <div className="num" style={{ marginTop: 30 }}>{num} / Sector</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'end', marginTop: 22 }} className="id-hero">
            <h1 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(48px, 7.4vw, 112px)', letterSpacing: '-0.035em', lineHeight: 0.94 }}>
              {item.title}.
            </h1>
            <p style={{ color: 'var(--graphite)', fontSize: 17, lineHeight: 1.55, maxWidth: 460 }}>{item.short}</p>
          </div>
        </div>
      </section>

      <section style={{ padding: '60px 0' }}>
        <div className="container">
          <div style={{ height: 480 }}>
            <GridArt tone="dark" code={`SECTOR / ${num}`} label={item.title.toLowerCase()} />
          </div>
        </div>
      </section>

      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }} className="id-grid">
            <div style={{ position: 'sticky', top: 110, alignSelf: 'start' }}>
              <div className="eyebrow">Sector overview</div>
              <div className="num" style={{ marginTop: 8 }}>002</div>
            </div>
            <div>
              <p style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(22px, 2.2vw, 32px)', letterSpacing: '-0.02em', lineHeight: 1.3, fontWeight: 300 }}>
                {item.summary}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '100px 0', background: 'var(--ivory-2)' }}>
        <div className="container">
          <SectionHead
            num="003"
            kicker="Cross-border context"
            title={<>The international dimensions <span className="serif-i">specific</span> to this sector.</>}
          />
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 80px' }} className="ctx-grid">
            {item.contexts.map((c, i) => (
              <div key={c} style={{
                display: 'grid', gridTemplateColumns: '50px 1fr',
                gap: 18, alignItems: 'baseline',
                padding: '22px 0', borderTop: '1px solid var(--hairline)',
                borderBottom: i >= item.contexts.length - 2 ? '1px solid var(--hairline)' : 'none'
              }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--slate)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: 16, lineHeight: 1.5 }}>{c}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <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 }} className="sec-head">
            <div>
              <div className="num" style={{ color: 'var(--slate)' }}>004</div>
              <div className="eyebrow" style={{ color: '#9A9CA0', marginTop: 10 }}>Risks observed</div>
            </div>
            <div>
              <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(34px, 4.4vw, 60px)', letterSpacing: '-0.025em', lineHeight: 1.04 }}>
                The recurring exposures in this sector — observed across <span className="serif-i" style={{ color: '#B0B2B6' }}>engagements.</span>
              </h2>
            </div>
          </div>
          <div style={{ marginTop: 70 }}>
            {item.risks.map((r, i) => (
              <div key={r} style={{
                display: 'grid', gridTemplateColumns: '70px 1fr',
                gap: 30, alignItems: 'start',
                padding: '26px 0', borderTop: '1px solid #2A2A2A',
                borderBottom: i === item.risks.length - 1 ? '1px solid #2A2A2A' : 'none'
              }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--slate)' }}>R-{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(18px, 1.6vw, 22px)', letterSpacing: '-0.015em', lineHeight: 1.35 }}>{r}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {relevant.length > 0 && (
        <section style={{ padding: '120px 0' }}>
          <div className="container">
            <SectionHead
              num="005"
              kicker="Practice areas engaged"
              title={<>Practice areas typically drawn on for {item.title.toLowerCase()} mandates.</>}
            />
            <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }} className="rel-grid">
              {relevant.map((s, i) => {
                const e = EXPERTISE_LIST.find(x => x.slug === s);
                if (!e) return null;
                return (
                  <a key={s} onClick={() => navigate({ name: 'expertise-detail', slug: e.slug })} style={{
                    padding: '34px 30px',
                    borderTop: '1px solid var(--hairline)',
                    borderRight: i < 2 ? '1px solid var(--hairline)' : 'none',
                    cursor: 'pointer',
                    transition: 'background .25s ease'
                  }}
                    onMouseEnter={(ev) => ev.currentTarget.style.background = 'var(--ivory-2)'}
                    onMouseLeave={(ev) => ev.currentTarget.style.background = 'transparent'}
                  >
                    <div className="num">{String(i + 1).padStart(2, '0')}</div>
                    <h3 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 22, letterSpacing: '-0.015em', marginTop: 14, lineHeight: 1.2 }}>{e.title}</h3>
                    <p style={{ marginTop: 14, color: 'var(--graphite)', fontSize: 14, lineHeight: 1.6 }}>{e.short}</p>
                    <div className="mono" style={{ marginTop: 20, fontSize: 11, color: 'var(--slate)', letterSpacing: '0.08em' }}>VIEW PRACTICE →</div>
                  </a>
                );
              })}
            </div>
          </div>
          <style>{`
            @media (max-width: 820px) {
              .rel-grid { grid-template-columns: 1fr !important; }
              .rel-grid > a { border-right: 0 !important; }
            }
          `}</style>
        </section>
      )}

      <section style={{ padding: '100px 0 130px', background: 'var(--ivory-2)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }} className="id-cta">
            <div>
              <div className="num">006</div>
              <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(34px, 4.4vw, 56px)', letterSpacing: '-0.025em', lineHeight: 1.04, marginTop: 16 }}>
                Discuss a {item.title.toLowerCase()} matter directly with the practice.
              </h2>
              <button className="btn" style={{ marginTop: 30 }} onClick={() => navigate({ name: 'contact' })}>
                Schedule consultation <span className="arrow">→</span>
              </button>
            </div>
            <div>
              <div className="num">007 / Next sector</div>
              <a onClick={() => navigate({ name: 'industry-detail', slug: next.slug })} style={{
                display: 'block', marginTop: 14, padding: '28px 0', cursor: 'pointer',
                borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)'
              }}>
                <h3 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(28px, 3.2vw, 42px)', letterSpacing: '-0.02em', lineHeight: 1.08 }}>
                  {next.title} →
                </h3>
                <p style={{ marginTop: 12, color: 'var(--graphite)', fontSize: 14.5, lineHeight: 1.6 }}>{next.short}</p>
              </a>
            </div>
          </div>
        </div>
      </section>

      <Footer navigate={navigate} />
      <style>{`
        @media (max-width: 920px) {
          .id-hero, .id-grid, .id-cta { grid-template-columns: 1fr !important; gap: 30px !important; }
          .ctx-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

Object.assign(window, { IndustriesPage, IndustryDetail });