// Expertise DETAIL page only — list page lives in pages-main.jsx
// Detail page: rich, editorial, sectioned

function ExpertiseDetailPage({ slug, navigate }) {
  const idx = EXPERTISE_LIST.findIndex(e => e.slug === slug);
  const item = idx >= 0 ? EXPERTISE_LIST[idx] : EXPERTISE_LIST[0];
  const next = EXPERTISE_LIST[(idx + 1) % EXPERTISE_LIST.length];
  const num = String(Math.max(idx, 0) + 1).padStart(3, '0');

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 130, paddingBottom: 30 }}>
        <div className="container">
          <a className="ulink" onClick={() => navigate({ name: 'expertise' })} style={{ fontSize: 12.5, color: 'var(--graphite)', cursor: 'pointer' }}>
            ← Back to expertise
          </a>
          <div className="num" style={{ marginTop: 36 }}>EXP // {num} — Practice area</div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'end', marginTop: 20 }} className="ed-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: 18, lineHeight: 1.55, maxWidth: 460 }}>{item.short}</p>
          </div>
        </div>
      </section>

      <section style={{ padding: '60px 0' }}>
        <div className="container">
          <div style={{ height: 440 }}>
            <GridArt tone="dark" code={`PRACTICE / ${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="ed-grid">
            <div style={{ position: 'sticky', top: 110, alignSelf: 'start' }}>
              <div className="num">A.01</div>
              <div className="eyebrow" style={{ marginTop: 10 }}>Strategic overview</div>
            </div>
            <div>
              <p style={{ fontFamily: 'var(--sans)', fontSize: 'clamp(22px, 2.4vw, 34px)', letterSpacing: '-0.02em', lineHeight: 1.28, fontWeight: 300 }}>
                {item.summary}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '110px 0', background: 'var(--ivory-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
        <div className="container">
          <SectionHead num="A.02" kicker="Capabilities" title={<>Where the practice <span className="serif-i">concentrates</span>.</>} />
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 80px' }} className="cap-grid">
            {item.capabilities.map((c, i) => {
              const isLastRow = i >= item.capabilities.length - 2;
              return (
                <div key={c} style={{
                  display: 'grid', gridTemplateColumns: '54px 1fr', gap: 18,
                  padding: '24px 0', borderTop: '1px solid var(--hairline-strong)',
                  borderBottom: isLastRow ? '1px solid var(--hairline-strong)' : 'none'
                }}>
                  <span className="mono" style={{ fontSize: 11.5, color: 'var(--slate)' }}>—{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontSize: 16.5, lineHeight: 1.5 }}>{c}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0' }}>
        <div className="container">
          <SectionHead
            num="A.03"
            kicker="Business implications"
            title={<>The questions this practice is most often asked to <span className="serif-i">resolve</span>.</>}
            lede="Each is a position rather than a problem — held by the practice across years rather than reopened from scratch with each engagement."
          />
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }} className="impl-grid">
            {item.implications.map((c, i) => (
              <div key={c} style={{
                padding: '36px 32px',
                borderTop: '1px solid var(--hairline-strong)',
                borderRight: i < 2 ? '1px solid var(--hairline)' : 'none'
              }}>
                <div className="num">{String(i + 1).padStart(2, '0')}</div>
                <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.45, fontFamily: 'var(--sans)', fontWeight: 400, letterSpacing: '-0.01em' }}>
                  {c}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0', background: 'var(--ink)', color: 'var(--ivory)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="ed-cta">
            <div>
              <div className="num" style={{ color: '#8A9099' }}>A.04 / Engage</div>
              <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(34px, 4.6vw, 64px)', letterSpacing: '-0.025em', lineHeight: 1.04, marginTop: 18 }}>
                Discuss a {item.title.toLowerCase()} <span className="serif-i" style={{ color: '#A0A4AB' }}>matter</span> directly with the practice.
              </h2>
              <p style={{ marginTop: 22, color: '#B0B4BB', fontSize: 16, maxWidth: 520, lineHeight: 1.6 }}>
                Senior-led conversations, conducted under confidentiality. Engagement letters issued where appropriate.
              </p>
              <button onClick={() => navigate({ name: 'contact' })}
                style={{
                  marginTop: 36, padding: '16px 22px',
                  background: 'var(--ivory)', color: 'var(--ink)',
                  border: '1px solid var(--ivory)', cursor: 'pointer',
                  fontFamily: 'var(--body)', fontSize: 13.5,
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  transition: 'background .25s, color .25s'
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ivory)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--ivory)'; e.currentTarget.style.color = 'var(--ink)'; }}
              >
                Schedule consultation <span className="arrow">→</span>
              </button>
            </div>
            <div>
              <div className="num" style={{ color: '#8A9099' }}>A.05 / Next practice area</div>
              <a onClick={() => navigate({ name: 'expertise-detail', slug: next.slug })}
                style={{ display: 'block', marginTop: 18, padding: '32px 0', cursor: 'pointer', borderTop: '1px solid #2A2A2A', borderBottom: '1px solid #2A2A2A' }}
                onMouseEnter={(e) => { e.currentTarget.style.paddingLeft = '12px'; }}
                onMouseLeave={(e) => { e.currentTarget.style.paddingLeft = '0'; }}
              >
                <h3 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(28px, 3.4vw, 46px)', letterSpacing: '-0.02em', lineHeight: 1.05, transition: 'transform .35s' }}>
                  {next.title} →
                </h3>
                <p style={{ marginTop: 14, color: '#9A9CA0', fontSize: 14.5, lineHeight: 1.6 }}>{next.short}</p>
              </a>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 920px) {
          .ed-hero, .ed-grid, .ed-cta { grid-template-columns: 1fr !important; gap: 30px !important; }
          .cap-grid, .impl-grid { grid-template-columns: 1fr !important; }
          .impl-grid > div { border-right: 0 !important; }
        }
      `}</style>
    </div>
  );
}

function NotFound({ navigate }) {
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 200, paddingBottom: 200 }}>
        <div className="container">
          <div className="num">404 / Not found</div>
          <h1 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(48px, 6vw, 80px)', letterSpacing: '-0.03em', marginTop: 16 }}>
            That page is not here.
          </h1>
          <button className="btn" style={{ marginTop: 30 }} onClick={() => navigate({ name: 'home' })}>
            Return to home <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ExpertiseDetailPage, NotFound });