// Consulting — broad technology advisory section
// Sits between Approach and AI Capabilities, opens up the firm beyond delivery.
const { Compass: CConsCompass, Scale: CConsScale, Spark: CConsSpark, Shield: CConsShield, Brain: CConsBrain, Layers: CConsLayers, ArrowUpRight: CConsArrow } = window.Icons;

function ConsultingPillar({ idx, title, body, points }) {
  return (
    <article className="relative py-8 lg:py-10 first:pt-0 last:pb-0">
      <div className="grid grid-cols-12 gap-4 lg:gap-8 items-start">
        <div className="col-span-12 lg:col-span-2">
          <div className="font-mono text-[11px] uppercase tracking-[0.22em]" style={{color: 'var(--dim)'}}>
            /{idx}
          </div>
        </div>
        <div className="col-span-12 lg:col-span-4">
          <h3 className="font-display text-[24px] lg:text-[28px] font-semibold tracking-[-0.02em] leading-[1.1]"
              style={{color: 'var(--ink)'}}>
            {title}
          </h3>
        </div>
        <div className="col-span-12 lg:col-span-6">
          <p className="text-[15px] lg:text-[16px] leading-[1.6] mb-5"
             style={{color: 'var(--muted)'}}>
            {body}
          </p>
          <ul className="flex flex-wrap gap-x-5 gap-y-2.5">
            {points.map(p => (
              <li key={p} className="flex items-center gap-2 text-[13px]" style={{color: 'var(--ink)'}}>
                <span className="w-1 h-1 rounded-full" style={{background: 'var(--accent-warm)'}}></span>
                {p}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </article>
  );
}

function Consulting() {
  const pillars = [
    {
      idx: '01',
      title: 'Technology Strategy & Advisory',
      body:
        'A clear, prioritized view of where technology should take the business next — not a deck, a decision framework. We help leaders separate signal from noise, sequence investment, and align engineering with revenue.',
      points: ['Tech due diligence', 'Build vs. buy', 'Vendor selection', 'M&A integration'],
    },
    {
      idx: '02',
      title: 'Architecture & Platform Review',
      body:
        'Independent, hands-on audits of your stack — code, cloud, data, and security — with a written report your engineering team will actually use. Concrete remediations sequenced by impact and effort.',
      points: ['Code & arch review', 'Cloud cost audit', 'Reliability assessment', 'Tech debt mapping'],
    },
    {
      idx: '03',
      title: 'Fractional CTO & Engineering Leadership',
      body:
        'Senior engineering leadership embedded part-time — for growth-stage teams between hires, leadership transitions, or before a major bet. We run the org, hire the team, and step out cleanly.',
      points: ['Fractional CTO', 'VP Eng on demand', 'Hiring & calibration', 'Org design'],
    },
    {
      idx: '04',
      title: 'Security, Compliance & Governance',
      body:
        'SOC 2, HIPAA, ISO, and the practical work behind the certificates. Threat modeling, posture reviews, and incident readiness — engineered into how your team ships, not bolted on later.',
      points: ['SOC 2 / HIPAA / ISO', 'Threat modeling', 'IR playbooks', 'Policy as code'],
    },
    {
      idx: '05',
      title: 'AI & Data Readiness Assessment',
      body:
        'Before the agents, the foundation. We assess data quality, governance, and infrastructure readiness — then give you the honest answer on which AI initiatives will work this year and which need groundwork first.',
      points: ['Data maturity scan', 'AI opportunity map', 'Governance design', 'Roadmap shaping'],
    },
    {
      idx: '06',
      title: 'Team Augmentation & Training',
      body:
        'Senior engineers embedded alongside your team — pairing, code review, and structured upskilling on the modern stack. Your people stronger when we leave than when we arrived.',
      points: ['Embedded squads', 'Code review at scale', 'Workshops', 'Capability transfer'],
    },
  ];

  return (
    <section id="consulting" className="relative py-28 lg:py-36 overflow-hidden"
             style={{background: 'var(--surface-warm)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
      {/* Ambient warmth */}
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-0 right-[10%] w-[600px] h-[400px] rounded-full"
             style={{background: 'radial-gradient(ellipse at center, rgba(233,184,114,0.10), transparent 65%)', filter: 'blur(80px)'}}></div>
        <div className="absolute bottom-0 left-[5%] w-[500px] h-[400px] rounded-full"
             style={{background: 'radial-gradient(ellipse at center, rgba(139,92,246,0.07), transparent 65%)', filter: 'blur(70px)'}}></div>
      </div>

      <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10">
        {/* Header */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 lg:mb-20">
          <div className="lg:col-span-7">
            <div className="reveal eyebrow mb-5">Consulting &amp; advisory</div>
            <h2 className="reveal font-display text-[36px] sm:text-[44px] lg:text-[64px] leading-[1.0] tracking-[-0.04em] font-medium" data-delay="80">
              Senior counsel for
              <br />
              the <span className="serif-em" style={{color: 'var(--ink-warm)'}}>technology decisions</span>
              <br />
              that move the business.
            </h2>
          </div>
          <div className="lg:col-span-4 lg:col-start-9 lg:pt-3 reveal" data-delay="160">
            <p className="text-[15.5px] leading-[1.65] mb-6" style={{color: 'var(--muted)'}}>
              Sometimes the right next move isn&apos;t to build — it&apos;s to think harder, faster.
              When that&apos;s the case, we sit on your side of the table.
            </p>
            <div className="flex flex-wrap items-center gap-3 font-mono text-[10.5px] uppercase tracking-[0.18em]"
                 style={{color: 'var(--dim)'}}>
              <span className="flex items-center gap-1.5">
                <span className="w-1 h-1 rounded-full" style={{background: 'var(--accent-warm)'}}></span>
                Fixed-scope engagements
              </span>
              <span>·</span>
              <span>2 — 12 weeks</span>
            </div>
          </div>
        </div>

        {/* Pillars — editorial list */}
        <div className="rounded-3xl divide-y"
             style={{
               background: 'var(--surface-1)',
               border: '1px solid var(--border)',
               borderColor: 'var(--border)',
               padding: 'clamp(28px, 4vw, 56px)',
             }}>
          <style>{`
            #consulting .divide-y > article + article { border-top: 1px solid var(--border); }
          `}</style>
          {pillars.map((p, i) => (
            <div key={p.idx} className="reveal" data-delay={i * 90}>
              <ConsultingPillar {...p} />
            </div>
          ))}
        </div>

        {/* Footer note + CTA */}
        <div className="reveal mt-12 lg:mt-16 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6"
             data-delay="120">
          <p className="font-serif italic text-[20px] lg:text-[24px] leading-[1.35] max-w-[680px]"
             style={{color: 'var(--ink-warm)'}}>
            Engagements scoped weekly, billed on outcomes, and concluded — cleanly — when the
            decision is made.
          </p>
          <a href="#contact" className="inline-flex items-center gap-2 font-medium text-[14.5px] link-hover whitespace-nowrap"
             style={{color: 'var(--ink)'}}>
            Discuss a consulting engagement
            <CConsArrow size={15} />
          </a>
        </div>
      </div>
    </section>
  );
}

window.Consulting = Consulting;