// Core Services — deep-indigo canvas, three white cards with gold top-accents.
const FS_SERVICE_CARDS = [
  {
    tag: 'I', icon: 'git-merge', accent: 'risk',
    title: 'Enterprise Turnarounds & M&A Restructuring',
    sub: 'For PE-backed companies, post-merger integrations, and distressed IT landscapes.',
    items: [
      { term: 'Enterprise IT Landscape Turnaround:', body: 'Systemic triage of underwater IT environments. I build the Application Rationalization "kill list" to eliminate redundant systems and reduce run-costs.' },
      { term: 'Post-Acquisition Architecture Debt Diagnostic:', body: 'A 14-to-21 day forensic audit of a newly acquired company to identify hidden legacy risks before they destroy exit multiples.' },
    ],
  },
  {
    tag: 'II', icon: 'siren', accent: 'risk',
    title: '"Red Project" Rescue & Risk Diagnostics',
    sub: 'For failing transformations, cloud migrations, and legacy system retirements.',
    items: [
      { term: '"Red Project" Architecture Rescue:', body: 'Emergency intervention for high-stakes projects that are over budget or technically gridlocked. I freeze the architecture, identify the fatal flaws, and enforce a remediation blueprint.' },
      { term: 'Legacy Logic Preservation (COBOL/Mainframe):', body: 'Before shutting down legacy mainframes, I assess the risk and design output-compatible modernization strategies to ensure decades of hidden business logic are not lost.' },
      { term: 'AI Architecture Risk Audit:', body: 'Identifying hallucination, data leakage, and compliance risks before AI initiatives are pushed into production in regulated environments.' },
    ],
  },
  {
    tag: 'III', icon: 'shield-check', accent: 'resolved',
    title: 'Architecture Foundations & Interim Leadership',
    sub: 'For organizations lacking enterprise-grade IT governance.',
    items: [
      { term: 'Interim Chief Architect:', body: 'I step in to lead your architecture practice, establishing strict governance and stabilizing inflight projects while you search for a full-time hire.' },
      { term: 'EA Repository & Governance Implementation:', body: 'Moving your organization from scattered diagrams to a single source of truth. I define the metamodel, establish the Architecture Review Board (ARB), and enforce stage-gates for all future IT spend.' },
    ],
  },
];

// accent → color tokens for icon chip, numeral, top-border, diamond bullets
const FS_SVC_ACCENT = {
  risk:     { color: 'var(--fs-red)',     tint: 'var(--fs-red-tint)' },
  resolved: { color: 'var(--fs-emerald)', tint: 'var(--fs-emerald-tint)' },
  governed: { color: 'var(--fs-gold-deep)', tint: 'var(--fs-gold-tint)' },
};

function Services() {
  return (
    <section id="services" className="site-deep section" style={{ position: 'relative' }}>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <Eyebrow dark>The Practice</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h2)',
            lineHeight: 1.18, letterSpacing: '-0.01em', color: 'var(--fs-gold)', margin: '18px 0 0', maxWidth: 720,
          }}>
            Intervention & Architecture Services
          </h2>
        </Reveal>

        <div className="grid-3up" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 56, alignItems: 'stretch' }}>
          {FS_SERVICE_CARDS.map((c, i) => {
            const ac = FS_SVC_ACCENT[c.accent] || FS_SVC_ACCENT.governed;
            return (
            <Reveal key={c.tag} delay={i * 90} style={{ display: 'flex' }}>
              <article className={`fs-card fs-card--${c.accent} fs-card--hover`} style={{
                display: 'flex', flexDirection: 'column', padding: 0, width: '100%',
                '--card-accent': ac.color, '--card-accent-tint': ac.tint,
              }}>
                <div style={{ padding: '26px 28px 22px', borderBottom: '1px solid var(--fs-border)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                    <span style={{
                      width: 44, height: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      border: `1px solid ${ac.color}`, borderRadius: 'var(--fs-radius-sm)',
                      color: ac.color, background: ac.tint,
                    }}><Icon name={c.icon} size={22} stroke={1.75} /></span>
                    <span style={{
                      fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 22,
                      color: ac.color, letterSpacing: '0.06em',
                    }}>{c.tag}</span>
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h4)',
                    lineHeight: 1.3, color: 'var(--fs-ink)', margin: '0 0 10px',
                  }}>{c.title}</h3>
                  <p style={{
                    fontFamily: 'var(--fs-font-body)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.55,
                    color: 'var(--fs-fg-soft)', margin: 0,
                  }}>{c.sub}</p>
                </div>
                <ul className="svc-list" style={{ padding: '24px 28px 28px', flex: 1, gap: 20 }}>
                  {c.items.map((it, j) => (
                    <li key={j} className="svc-item">
                      <p style={{ fontFamily: 'var(--fs-font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--fs-fg-muted)', margin: 0 }}>
                        <span className="svc-term">{it.term}</span> {it.body}
                      </p>
                    </li>
                  ))}
                </ul>
              </article>
            </Reveal>
          );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });