/* Dexilion — services page. */

(function () {

const { Card } = window;
const { Eyebrow, Grain, Grid, Shell, tx, SiteHeader, PageHero,
  ConversionBand, SiteFooter } = window;

/* One section per practice — the deeper cut behind the home-page list, which
   deep-links here by slug. Alternating grounds; the row list reuses the case
   pages' ruled-row idiom. scrollMarginTop keeps anchored sections clear of
   the sticky header. */
function PracticeDetails() {
  return (
    <React.Fragment>
      {window.SITE.practices.map((p, i) => p.detail && (
        <section key={p.title} id={p.slug} style={{
          background: i % 2 ? 'var(--paper-50)' : 'var(--white)', padding: 'var(--section-y) 0',
          borderTop: '1px solid var(--paper-200)', position: 'relative', overflow: 'hidden',
          scrollMarginTop: '72px'
        }}>
          <Grain />
          <Shell>
            <div className="dx-split" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '340px 1fr', gap: '56px', alignItems: 'start' }}>
              <div>
                <Eyebrow>{'Practice ' + String(i + 1).padStart(2, '0')}</Eyebrow>
                <h2 style={{ font: 'var(--text-h2)', letterSpacing: 'var(--ls-heading)', margin: '18px 0 0', color: 'var(--text-strong)' }}>
                  {p.title}</h2>
                <div style={{ marginTop: '12px', fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-muted)' }}>
                  {p.meta}</div>
              </div>
              <div>
                {p.detail.body.map((par, j) => (
                  <p key={j} style={{
                    margin: j ? '18px 0 0' : 0, maxWidth: '62ch', fontSize: 'var(--fs-body-lg)',
                    lineHeight: 'var(--lh-body)', color: 'var(--text-body)', textWrap: 'pretty'
                  }}>{tx(par)}</p>))}
                <div style={{ marginTop: '30px', borderTop: '1px solid var(--paper-200)' }}>
                  {p.detail.points.map((pt, j) => (
                    <div key={j} className="dx-rule-row" style={{ padding: '16px 20px' }}>
                      <span className="dx-rule-num">{String(j + 1).padStart(2, '0')}</span>
                      <span style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-body)', color: 'var(--text-strong)' }}>
                        {tx(pt)}</span>
                    </div>))}
                </div>
                {p.detail.caseHref && (
                  <p style={{ margin: '24px 0 0', fontSize: 'var(--fs-body)' }}>
                    <a href={p.detail.caseHref}>{p.detail.caseLabel} →</a>
                  </p>)}
              </div>
            </div>
          </Shell>
        </section>
      ))}
    </React.Fragment>
  );
}

function Phases() {
  const s = window.SITE.services;
  return (
    <section style={{
      background: 'var(--white)', padding: 'var(--section-y) 0', borderTop: '1px solid var(--paper-200)',
      position: 'relative', overflow: 'hidden'
    }}>
      <Grid fade="linear-gradient(180deg,#000 0%,transparent 55%)" />
      <Shell>
        <div style={{ position: 'relative', maxWidth: '46ch' }}>
          <Eyebrow>{s.phasesEyebrow}</Eyebrow>
          <h2 style={{ font: 'var(--text-h1)', letterSpacing: 'var(--ls-heading)', margin: '18px 0 0', color: 'var(--text-strong)' }}>
            {s.phasesHeading}</h2>
          <p style={{ margin: '16px 0 0', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-body)', color: 'var(--text-muted)' }}>
            {tx(s.phasesLede)}</p>
        </div>
        <div className="dx-cards-3" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '24px', marginTop: '40px' }}>
          {window.SITE.phases.map((p, i) => (
            <Card key={p.value} padding="lg" accent={i === 0}
              eyebrow={window.SITE.ui.phaseLabel + ' ' + String(i + 1).padStart(2, '0')} title={p.label}>
              <p style={{ margin: 0, fontSize: 'var(--fs-body-sm)', lineHeight: 'var(--lh-body)', color: 'var(--text-body)' }}>{tx(p.body)}</p>
              <div style={{
                marginTop: '18px', paddingTop: '14px', borderTop: '1px solid var(--border-subtle)',
                fontFamily: 'var(--font-mono)', fontSize: '11px', lineHeight: 1.7, color: 'var(--text-muted)'
              }}>{window.SITE.ui.deliverableLabel}: {tx(p.deliverable)}</div>
            </Card>))}
        </div>
      </Shell>
    </section>
  );
}

function Page() {
  const s = window.SITE.services;
  return (
    <React.Fragment>
      <SiteHeader active="services" />
      <PageHero eyebrow={s.eyebrow} headline={s.headline} lede={s.lede} />
      <PracticeDetails />
      <Phases />
      <ConversionBand />
      <SiteFooter />
    </React.Fragment>
  );
}

mountPage(<Page />);

})();