// Portfolio page sections — "The Work"
// Anonymized examples of real engagements, organized into 3 categories that
// mirror Services' engagement types. Exports 4 components to window.*:
//   PortfolioIntro, CategoryIndex, PortfolioProjects, PortfolioCta
// Each is mounted independently in Portfolio.cshtml below the static PageHero.
// No dependency on tools-shared.jsx — all styles are inline or use utility classes
// already in tools.css (t-eyebrow, t-display, t-lead, t-body, t-small, btn, btn-primary, btn-ghost).

function PortfolioIntro() {
  return (
    <div style={{ padding: '0 clamp(16px, 4vw, 32px)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto', paddingTop: 'clamp(40px, 6vw, 72px)' }}>
        <p className="t-lead" style={{ margin: 0 }}>
          What follows is anonymized: no names, no numbers that could identify
          anyone. What is real is the shape of the problem and the shape of what
          I built. If you want more detail, or a reference call, just ask.
        </p>
      </div>
    </div>
  );
}

const CATEGORIES = [
  {
    id: 'recurring', n: '01', label: 'Goal Management Solutions',
    dek: 'Live systems that run automatically, on their own schedule for as long as the practice needs them.',
    count: '2 examples', critTag: 'CRITICAL THINKING, ONGOING', shortTag: 'ONGOING', critLine: 'Critical thinking, ongoing.',
  },
  {
    id: 'project-analysis', n: '02', label: 'Project-Based Analysis',
    dek: 'One-time analysis for a decision too big for a gut check: a build-out, a purchase, a question the practice has not had to answer before.',
    count: '3 examples', critTag: 'CRITICAL THINKING, ONCE', shortTag: 'PROJECT', critLine: 'Critical thinking, once.',
  },
  {
    id: 'team-productivity', n: '03', label: 'Team Productivity Tools',
    dek: 'Purpose-built tools that eliminate recurring busywork, handed over and left running.',
    count: '1 example', critTag: 'CRITICAL THINKING, BUILT INTO A TOOL', shortTag: 'TOOLS', critLine: 'Critical thinking, built into a tool.',
  },
];

function CategoryIndex() {
  return (
    <div style={{ padding: '0 clamp(16px, 4vw, 32px)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto', paddingTop: 'clamp(28px, 4vw, 40px)' }}>
        <div style={{
          display: 'grid', gap: 16,
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        }}>
          {CATEGORIES.map(c => (
            <div key={c.id} style={{
              display: 'block', padding: '20px 22px',
              border: '1px solid var(--pdt-line)', borderRadius: 12,
              background: 'var(--pdt-paper)',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
                <span style={{ fontFamily: 'var(--pdt-mono)', fontSize: 11, color: 'var(--pdt-mute)', letterSpacing: '0.08em' }}>{c.n}</span>
                <span style={{
                  fontFamily: 'var(--pdt-mono)', fontSize: 11, letterSpacing: '0.08em',
                  color: 'var(--pdt-forest)', background: 'var(--pdt-mint)',
                  padding: '3px 8px', borderRadius: 3, fontWeight: 500,
                }}>{c.shortTag}</span>
                <span style={{ fontFamily: 'var(--pdt-mono)', fontSize: 11, color: 'var(--pdt-mute)', letterSpacing: '0.04em', marginLeft: 'auto' }}>{c.count}</span>
              </div>
              <a href={`#${c.id}`} style={{ display: 'block', textDecoration: 'none' }}>
                <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--pdt-ink)', marginBottom: 6, letterSpacing: '-0.01em' }}>
                  {c.label} ↓
                </div>
              </a>
              <p style={{
                fontFamily: 'var(--pdt-serif)', fontStyle: 'italic', fontSize: 14.5,
                color: 'var(--pdt-ink-soft)', margin: '0 0 8px',
              }}>{c.critLine}</p>
              <p className="t-small" style={{ margin: '0 0 14px', color: 'var(--pdt-mute)' }}>{c.dek}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, borderTop: '1px solid var(--pdt-line-soft)', paddingTop: 12, paddingLeft: 12 }}>
                {PROJECTS.filter(p => p.category === c.id).map(p => (
                  <a key={p.anchor} href={`#${p.anchor}`} style={{
                    fontSize: 13, color: 'var(--pdt-mute)', textDecoration: 'none',
                  }}>
                    {p.n}. {p.title}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CategoryDivider({ n, label, dek, critTag }) {
  return (
    <div style={{ padding: '0 clamp(16px, 4vw, 32px)' }}>
      <div style={{ maxWidth: 960, margin: '0 auto', paddingTop: 'clamp(40px, 6vw, 64px)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <span style={{ fontFamily: 'var(--pdt-mono)', fontSize: 12, color: 'var(--pdt-forest)', letterSpacing: '0.08em' }}>{n}</span>
          <span style={{
            fontFamily: 'var(--pdt-mono)', fontSize: 11, letterSpacing: '0.08em',
            color: 'var(--pdt-forest)', background: 'var(--pdt-mint)',
            padding: '3px 8px', borderRadius: 3, fontWeight: 500,
          }}>{critTag}</span>
        </div>
        <h2 className="t-display" style={{ fontSize: 'clamp(32px, 5.5vw, 52px)', margin: '0 0 8px', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.1 }}>{label}</h2>
        <p className="t-small" style={{ margin: 0, color: 'var(--pdt-mute)', maxWidth: 620 }}>{dek}</p>
      </div>
    </div>
  );
}

function FlowRow({ stages }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'stretch', gap: 0, flexWrap: 'wrap',
    }}>
      {stages.map((s, i) => (
        <React.Fragment key={i}>
          <div style={{
            flex: '1 1 160px', minWidth: 140,
            padding: '18px 18px',
            background: i === stages.length - 1 ? 'var(--pdt-mint)' : 'var(--pdt-paper)',
            border: `1px solid ${i === stages.length - 1 ? 'var(--pdt-sage)' : 'var(--pdt-line)'}`,
            borderRadius: 10,
          }}>
            <div style={{
              fontFamily: 'var(--pdt-mono)', fontSize: 10,
              letterSpacing: '0.08em', color: 'var(--pdt-mute)', marginBottom: 8,
            }}>
              {s.eyebrow}
            </div>
            <div style={{ fontSize: 14.5, lineHeight: 1.4, color: 'var(--pdt-ink)', fontWeight: 500 }}>
              {s.label}
            </div>
          </div>
          {i < stages.length - 1 && (
            <div aria-hidden="true" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              width: 36, flex: '0 0 36px',
            }}>
              <svg width="28" height="16" viewBox="0 0 28 16" fill="none">
                <line x1="1" y1="8" x2="20" y2="8" stroke="var(--pdt-forest)" strokeWidth="1.5" />
                <path d="M 16 3 L 24 8 L 16 13" stroke="var(--pdt-forest)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

const PROJECTS = [
  {
    anchor: 'subscription-reporting',
    category: 'recurring',
    n: '01',
    tag: 'GOAL MANAGEMENT, RX',
    servicesHref: '/Home/Services#goal-management',
    title: 'Rx: custom KPI & growth reporting, fully recurring',
    practice: 'Multi-provider practice, working with an outside growth coach',
    problem: 'The business KPIs lived in scattered spreadsheets, each one edited by hand until it drifted from the others. The growth coach’s initiatives added a second set of numbers to chase. Every week, someone spent real time pulling all of it into one view, and it still might have been wrong by the time it was done.',
    built: 'A recurring reporting product built to this practice’s exact KPIs and visuals, specced to show exactly what they want, the way they want to see it, pulling automatically from source data instead of hand-maintained sheets. Useful for practices juggling reports from a few different vendors, none of which quite agree with each other or show things the way the practice actually thinks about them. Delivered as print-friendly PDFs straight to inboxes on the practice’s own rhythm (daily, weekly, monthly), plus a separate set of reports in an online interactive dashboard. No manual assembly, ever.',
    outcome: 'The old way cost the team about two hours a week and no guarantee it was right. Now it happens on its own, and it is right.',
    sample: {
      href: '/case-studies/sample-daily-report.html',
      caption: 'Sample daily summary, pulled from a real Pareto build and anonymized.',
      cadenceNote: 'This is one of five report cadences built the same way: daily huddle, weekly, monthly, quarterly, and annual, each shaped for who is actually reading it.',
    },
    flow: [
      { eyebrow: 'SOURCE', label: 'Practice business KPIs' },
      { eyebrow: 'SOURCE', label: 'Growth coach initiatives' },
      { eyebrow: 'DELIVERED', label: 'PDF to inbox + interactive dashboard' },
    ],
  },
  {
    anchor: 'signal-reporting',
    category: 'recurring',
    n: '02',
    tag: 'GOAL MANAGEMENT, SIGNAL',
    servicesHref: '/Home/Services#goal-management',
    title: 'Signal: the same reporting engine, ready to go',
    practice: 'Any practice that wants better numbers without a scoped project',
    problem: 'Not every practice needs, or wants to pay for, a KPI system built from scratch. But the alternative shouldn’t be a worse product.',
    built: 'The same underlying report, in the same five cadences, with no custom build behind it, so it’s ready faster and costs less. Still built to be better than a standard, out-of-the-box report, and it can evolve into the Rx tier whenever the practice is ready to customize it further.',
    outcome: null,
    sample: {
      href: '/case-studies/sample-daily-report.html',
      caption: 'Sample daily summary, same format as the Rx tier, anonymized.',
      cadenceNote: 'Same five cadences as Rx: daily huddle, weekly, monthly, quarterly, and annual.',
    },
    flow: [
      { eyebrow: 'SOURCE', label: 'Practice management system' },
      { eyebrow: 'SIGNAL', label: 'Ready to go, no build required' },
      { eyebrow: 'DELIVERED', label: 'PDF to inbox' },
    ],
  },
  {
    anchor: 'capacity-signal',
    category: 'project-analysis',
    n: '01',
    tag: 'PROJECT-BASED, LEAD INDICATOR',
    servicesHref: '/Home/Services#project-analysis',
    title: 'Knowing when it’s time for more space',
    practice: 'Established multi-op practice, production climbing steadily',
    problem: 'Most owners decide to expand by gut feel, usually around the point they’re already miserable and the schedule is already broken. By then they’re roughly two years behind, because that’s how long a new build actually takes from decision to opening.',
    built: 'A simple monthly signal: current production per operatory, a realistic ceiling, and the trailing growth rate, compounded forward to the month the ceiling gets hit. It turns “we’re getting busy” into an actual date on the calendar.',
    outcome: null,
    metricNote: 'The same formula behind the calculator on this site:',
    metricFormula: 'months to ceiling  =  -ln(current / ceiling) / ln(1 + growth / 12)',
    metricCaveat: 'Once that date lands inside the roughly two-year build window, the next step is the full financing and production model, shown below.',
    sample: {
      href: '/case-studies/capacity-ceiling-signal.html',
      caption: 'Sample model output, capacity signal & build-window timing, anonymized.',
      cadenceNote: 'Try the live version: the Capacity Ceiling calculator in Tools uses this exact formula.',
      cadenceHref: '/Tools/Ceiling',
    },
    flow: [
      { eyebrow: 'INPUT', label: 'Current production per op, by month' },
      { eyebrow: 'INPUT', label: 'Realistic ceiling & trailing growth' },
      { eyebrow: 'MODELED', label: 'Month the ceiling gets hit' },
      { eyebrow: 'DELIVERED', label: 'A planning date, not a gut feel' },
    ],
  },
  {
    anchor: 'new-practice-financial-plan',
    category: 'project-analysis',
    n: '02',
    tag: 'PROJECT-BASED, HIGH-STAKES',
    servicesHref: '/Home/Services#project-analysis',
    title: 'New office production and cost projections, from the ground up',
    practice: 'Doctor evaluating a specific building and lease for a brand-new practice',
    problem: 'A lender term sheet and a commercial lease do not tell a doctor whether the practice on paper can actually support the mortgage. There are no financial statements yet, because the business does not exist yet.',
    built: 'A full build-from-scratch model, in real dollars: expected practice size and growth curve, property costs (mortgage, tax, insurance), the monthly production required to cover all of it, the loan payoff timeline and total interest paid, the down payment amount, and the return that down payment is actually earning. Not a financial statement template. The numbers you would want before you sign.',
    outcome: null,
    metricNote: 'The core question this kind of model answers, before anything is signed:',
    metricFormula: 'monthly production needed  =  ( mortgage + property tax & insurance + staff & overhead )  ÷  target profit margin',
    metricCaveat: 'From there: when the loan is paid off, how much interest is paid along the way, and what the down payment is actually earning as an investment.',
    sample: {
      href: '/case-studies/practice-buildout-model.html',
      caption: 'Sample model output, staged buildout & financing, anonymized.',
      cadenceNote: 'This example covers a multi-stage construction, financed and built out over several years. The full model also covers staffing, overhead, and resulting valuation.',
    },
    flow: [
      { eyebrow: 'INPUT', label: 'Building cost, loan terms, down payment' },
      { eyebrow: 'MODELED', label: 'Practice size & growth curve' },
      { eyebrow: 'MODELED', label: 'Payoff timeline & total interest' },
      { eyebrow: 'DELIVERED', label: 'Go / no-go numbers, before signing' },
    ],
  },
  {
    anchor: 'associate-pay-tool',
    category: 'project-analysis',
    n: '03',
    tag: 'PROJECT-BASED, BUILT TO LAST',
    servicesHref: '/Home/Services#project-analysis',
    title: 'Associate pay & bonus calculator',
    practice: 'Multi-associate practice, several tiered comp plans running at once',
    problem: 'Each associate was on a different tiered draw-and-bonus structure. Every pay period, someone recalculated who owed what against which threshold, by hand, in a spreadsheet only the office manager really understood.',
    built: 'A calculator built to their exact comp plans, not a generic template. It kept running for the practice well past the initial build, three-plus months and counting across every associate, hosted so anyone could check their own numbers without asking the doctor to run the math.',
    outcome: 'Every associate can see, in real time, what they have earned and why. Disagreements about pay dropped to zero.',
    toolLink: { href: '/Tools/AssociatePay', label: 'Try the live calculator' },
    flow: [
      { eyebrow: 'INPUT', label: 'Production & collections, by associate' },
      { eyebrow: 'RULES', label: 'Each associate’s tiered comp plan' },
      { eyebrow: 'DELIVERED', label: 'Draw, bonus, running balance' },
    ],
  },
  {
    anchor: 'payroll-automation',
    category: 'team-productivity',
    n: '01',
    tag: 'TEAM PRODUCTIVITY TOOL',
    servicesHref: '/Home/Services#team-productivity',
    title: 'Time clock → payroll bridge',
    practice: 'Growing practice, multiple providers on the schedule',
    problem: 'Every pay period, someone in the front office re-typed clock hours from the practice management system into the payroll system by hand, then worked out regular vs. overtime themselves.',
    built: 'An automated bridge that pulls the hours, correctly applies overtime rules for hourly staff and handles salaried employees too, then generates one file with every employee’s pay information, properly calculated and ready to load straight into the practice’s payroll system. No re-keying, no manual math, no waiting on one person to be in the office to run payroll.',
    outcome: null,
    metricNote: 'The napkin math practices use to decide if a fix like this is worth it:',
    metricFormula: 'hours spent reconciling time, per pay period  ×  pay periods per year  ×  hourly rate of the person doing it',
    metricCaveat: 'That is the cost you can see. The one you usually cannot is the quiet overpayment: underpay someone and you hear about it immediately; overpay them and it almost never comes up. Caught by accident, it was hundreds of dollars, more than once, every few pay periods.',
    toolLink: { href: '/Tools/TaskCost', label: 'Try the napkin math yourself' },
    flow: [
      { eyebrow: 'SOURCE', label: 'Time-keeping system' },
      { eyebrow: 'ENGINE', label: 'Hourly & salaried pay calculated' },
      { eyebrow: 'DELIVERED', label: 'One file, ready to load' },
    ],
  },
];

function ProjectCard({ p }) {
  return (
    <section id={p.anchor} style={{
      padding: '0 clamp(16px, 4vw, 32px) clamp(48px, 8vw, 96px)',
    }}>
      <div style={{ maxWidth: 960, margin: '0 auto', borderTop: '1px solid var(--pdt-line)', paddingTop: 'clamp(48px, 8vw, 96px)' }}>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24,
        }}>
          <span style={{ fontFamily: 'var(--pdt-mono)', fontSize: 11, color: 'var(--pdt-forest)', letterSpacing: '0.08em' }}>{p.n}</span>
          <a href={p.servicesHref} style={{
            fontFamily: 'var(--pdt-mono)', fontSize: 11, letterSpacing: '0.08em',
            color: 'var(--pdt-forest)', background: 'var(--pdt-mint)',
            padding: '3px 8px', borderRadius: 3, fontWeight: 500,
            alignSelf: 'flex-start',
          }}>{p.tag} →</a>
        </div>

        <h2 className="t-display" style={{
          fontSize: 'clamp(28px, 5vw, 44px)', margin: '0 0 12px',
          letterSpacing: '-0.03em', fontWeight: 500, lineHeight: 1.1, maxWidth: 820,
        }}>
          {p.title}
        </h2>
        <div className="t-small" style={{
          fontFamily: 'var(--pdt-serif)', fontStyle: 'italic', fontSize: 15.5,
          color: 'var(--pdt-mute)', marginBottom: 32,
        }}>
          {p.practice}
        </div>

        <div style={{ display: 'grid', gap: 20, maxWidth: 780, marginBottom: 40 }}>
          <div>
            <div className="t-eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>THE PROBLEM</div>
            <p className="t-body" style={{ margin: 0 }}>{p.problem}</p>
          </div>
          <div>
            <div className="t-eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>WHAT I BUILT</div>
            <p className="t-body" style={{ margin: 0 }}>{p.built}</p>
          </div>
        </div>

        {p.outcome && (
          <div style={{
            padding: '18px 24px', background: 'var(--pdt-paper-deep)',
            border: '1px solid var(--pdt-line-soft)', borderRadius: 12,
            marginBottom: 40, maxWidth: 780,
          }}>
            <div style={{
              fontFamily: 'var(--pdt-serif)', fontStyle: 'italic', fontSize: 17,
              lineHeight: 1.55, color: 'var(--pdt-ink)',
            }}>
              &ldquo;{p.outcome}&rdquo;
            </div>
          </div>
        )}

        {p.sample && (
          <div style={{ marginBottom: 40, maxWidth: 780 }}>
            <div className="t-eyebrow" style={{ fontSize: 10, marginBottom: 12 }}>SAMPLE REPORT</div>
            <a href={p.sample.href} target="_blank" rel="noopener" style={{
              display: 'block', border: '1px solid var(--pdt-line)', borderRadius: 12,
              overflow: 'hidden', background: 'var(--pdt-paper-deep)', textDecoration: 'none',
            }}>
              <div style={{
                position: 'relative', width: '100%', paddingTop: `${(1100 / 850) * 100}%`,
                overflow: 'hidden', background: '#d7dad7',
              }}>
                <iframe src={p.sample.href} title="Sample report" tabIndex={-1} style={{
                  position: 'absolute', top: 0, left: 0, width: 850, height: 1100,
                  border: 0, transform: 'scale(var(--sample-scale, 1))', transformOrigin: 'top left',
                  pointerEvents: 'none',
                }} ref={(el) => {
                  if (!el) return;
                  const wrap = el.parentElement;
                  const set = () => { wrap.style.setProperty('--sample-scale', wrap.getBoundingClientRect().width / 850); };
                  set();
                  window.addEventListener('resize', set);
                }} />
              </div>
              <div style={{
                padding: '12px 16px', display: 'flex', justifyContent: 'space-between',
                alignItems: 'baseline', gap: 12, borderTop: '1px solid var(--pdt-line)',
              }}>
                <span className="t-small" style={{ margin: 0, color: 'var(--pdt-mute)' }}>{p.sample.caption}</span>
                <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--pdt-forest)', whiteSpace: 'nowrap' }}>View full size ↗</span>
              </div>
            </a>
            <p className="t-small" style={{ margin: '10px 0 0', color: 'var(--pdt-mute)', maxWidth: 620 }}>
              {p.sample.cadenceHref ? (
                <a href={p.sample.cadenceHref} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  fontFamily: 'var(--pdt-mono)', fontSize: 12, fontWeight: 500,
                  letterSpacing: '0.02em', color: 'var(--pdt-forest)',
                  background: 'var(--pdt-mint)', border: '1px solid var(--pdt-sage)',
                  borderRadius: 999, padding: '8px 16px', textDecoration: 'none',
                }}>
                  Try the live calculator →
                </a>
              ) : p.sample.cadenceNote}
            </p>
          </div>
        )}

        {p.toolLink && (
          <div style={{ marginBottom: 40 }}>
            <a href={p.toolLink.href} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--pdt-mono)', fontSize: 12, fontWeight: 500,
              letterSpacing: '0.02em', color: 'var(--pdt-forest)',
              background: 'var(--pdt-mint)', border: '1px solid var(--pdt-sage)',
              borderRadius: 999, padding: '8px 16px', textDecoration: 'none',
            }}>
              {p.toolLink.label} →
            </a>
          </div>
        )}

        {p.metricFormula && (
          <div style={{
            padding: 'clamp(20px, 3vw, 28px)', background: 'var(--pdt-ink)',
            borderRadius: 12, marginBottom: 40, maxWidth: 780,
          }}>
            <div className="t-eyebrow" style={{ color: 'var(--pdt-sage)', fontSize: 10, marginBottom: 12 }}>
              {p.metricNote}
            </div>
            <div style={{
              fontFamily: 'var(--pdt-mono)', fontSize: 14, lineHeight: 1.7,
              color: 'var(--pdt-paper)', marginBottom: 12,
            }}>
              {p.metricFormula}
            </div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: '#d4cfc4' }}>
              {p.metricCaveat}
            </p>
          </div>
        )}

        <div>
          <div className="t-eyebrow" style={{ fontSize: 10, marginBottom: 14 }}>HOW IT FLOWS</div>
          <FlowRow stages={p.flow} />
        </div>
      </div>
    </section>
  );
}

function PortfolioProjects() {
  return (
    <>
      <section id="recurring">
        <CategoryDivider {...CATEGORIES[0]} label={CATEGORIES[0].label} />
        {PROJECTS.filter(p => p.category === 'recurring').map(p => <ProjectCard key={p.anchor} p={p} />)}
      </section>
      <section id="project-analysis">
        <CategoryDivider {...CATEGORIES[1]} label={CATEGORIES[1].label} />
        {PROJECTS.filter(p => p.category === 'project-analysis').map(p => <ProjectCard key={p.anchor} p={p} />)}
      </section>
      <section id="team-productivity">
        <CategoryDivider {...CATEGORIES[2]} label={CATEGORIES[2].label} />
        {PROJECTS.filter(p => p.category === 'team-productivity').map(p => <ProjectCard key={p.anchor} p={p} />)}
      </section>
    </>
  );
}

function PortfolioCta() {
  return (
    <section style={{
      padding: 'clamp(56px, 10vw, 120px) clamp(16px, 4vw, 32px)',
      background: 'var(--pdt-mint)',
      borderTop: '1px solid var(--pdt-sage)',
    }}>
      <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
        <div className="t-eyebrow" style={{ marginBottom: 16 }}>NEXT</div>
        <h2 className="t-display" style={{
          fontSize: 'clamp(32px, 6vw, 64px)',
          margin: '0 0 24px', letterSpacing: '-0.03em', fontWeight: 500,
          lineHeight: 1.05,
        }}>
          Something like this<br/>for your practice?
        </h2>
        <p className="t-lead" style={{ margin: '0 0 36px', maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
          Every one of these started as a conversation about a specific, annoying problem. Yours is probably just as specific. Let&rsquo;s talk about it.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="/Home/Contact" className="btn btn-primary">
            Start a conversation
            <span>→</span>
          </a>
          <a href="/Home/Services" className="btn btn-ghost">
            See the engagement types
          </a>
        </div>
      </div>
    </section>
  );
}

window.PortfolioIntro    = PortfolioIntro;
window.CategoryIndex     = CategoryIndex;
window.PortfolioProjects = PortfolioProjects;
window.PortfolioCta      = PortfolioCta;