import { ArrowRight, Cpu, Shield, FileSearch, Zap, Activity, GraduationCap, Palette, ExternalLink, Droplets, Brain, Award } from 'lucide-react';
import ShareButton from '../components/ShareButton';

interface HomeProps {
  onNavigate: (tab: string, serviceIndex?: number, scrollToContactForm?: boolean, scrollToQuoteSection?: boolean) => void;
}

export default function Home({ onNavigate }: HomeProps) {
  const services = [
    {
      icon: <FileSearch className="w-10 h-10" />,
      title: 'Engineering, Reliability & Digital Readiness Diagnostics™',
      description: 'Independent assessments that reveal misalignment across engineering systems, reliability practices, data quality, digital tools, and decision processes.',
      code: 'SYS_001',
      status: 'ACTIVE'
    },
    {
      icon: <Shield className="w-10 h-10" />,
      title: 'Systems Assurance & Decision Support',
      description: 'Ongoing senior-level advisory support to help organisations interpret system signals, manage risk, and maintain alignment over time.',
      code: 'SYS_002',
      status: 'ACTIVE'
    },
    {
      icon: <Cpu className="w-10 h-10" />,
      title: 'Engineering AI & Decision-Support Solutions',
      description: 'AI-enabled tools that enhance engineering judgement and decision quality, applied responsibly and only where readiness exists.',
      code: 'SYS_003',
      status: 'ACTIVE'
    },
  ];

  return (
    <div className="bg-slate-950">
      <section className="relative pt-32 pb-24 overflow-hidden blueprint-grid" aria-label="Hero section" role="banner">
        <div className="absolute inset-0 opacity-10">
          <img
            src="/artificial-intelligence-ai-technology-construction-engineering.jpg"
            alt="Advanced engineering and AI technology"
            className="w-full h-full object-cover"
            fetchPriority="high"
            loading="eager"
          />
        </div>

        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-orange-500 to-transparent"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="max-w-5xl">
            <div className="mb-12 relative">
              <div className="inline-flex items-center gap-3 bg-slate-900/80 border border-orange-500/50 px-6 py-3 mb-8 backdrop-blur-sm">
                <Activity className="w-4 h-4 text-orange-500" />
                <span className="text-orange-500 font-mono text-xs uppercase tracking-widest">SYSTEM STATUS: OPERATIONAL</span>
              </div>

              <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight text-white break-words">
                STOP WASTING MONEY<br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-blue-400">ON THE WRONG SOLUTIONS</span>
              </h1>

              <div className="flex items-center gap-4 mb-8">
                <div className="h-px flex-1 bg-gradient-to-r from-orange-500/50 to-transparent"></div>
                <span className="text-orange-400 font-mono text-sm uppercase tracking-wider">DECISION_INTELLIGENCE</span>
                <div className="h-px flex-1 bg-gradient-to-l from-orange-500/50 to-transparent"></div>
              </div>

              <div className="space-y-4 mb-8">
                <div className="bg-slate-900/50 border-l-4 border-red-500 p-4">
                  <p className="text-gray-300 text-lg leading-relaxed font-mono">
                    Most infrastructure and engineering organisations solve the <span className="text-red-400 font-bold">wrong problem</span>. They invest in AI, digital systems, and new tools — then wonder why nothing improves.
                  </p>
                </div>

                <div className="bg-slate-900/50 border-l-4 border-orange-500 p-4">
                  <p className="text-gray-300 text-lg leading-relaxed font-mono">
                    <span className="text-orange-400 font-bold">The real issue?</span> They never defined the actual problem. Just the visible symptoms.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-slate-900/70 border border-orange-500/50 p-6 mb-8 backdrop-blur-sm tech-border">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4">
                  <Shield className="w-5 h-5 text-orange-500" />
                  <span className="font-mono text-xs text-orange-400 uppercase tracking-wider">CORE_PROPOSITION</span>
                </div>
                <p className="text-white text-base sm:text-lg md:text-xl leading-relaxed font-mono font-bold break-words">
                  We help infrastructure and engineering organisations make better decisions <span className="text-orange-400">before</span> they waste money.
                </p>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4">
              <button
                type="button"
                onClick={() => onNavigate('contact', undefined, true)}
                className="group relative bg-orange-500 text-white px-4 sm:px-6 md:px-8 py-3 sm:py-4 font-bold font-mono text-xs sm:text-sm uppercase tracking-wider hover:bg-orange-600 transition-all overflow-hidden"
              >
                <span className="relative z-10 flex items-center justify-center gap-2">
                  <Zap className="w-4 h-4" />
                  <span className="break-words">Book a Clarity Session</span>
                </span>
                <div className="absolute inset-0 bg-gradient-to-r from-orange-600 to-orange-500 transform translate-x-full group-hover:translate-x-0 transition-transform"></div>
              </button>
              <button
                type="button"
                onClick={() => onNavigate('about')}
                className="bg-transparent border-2 border-blue-500 text-blue-400 px-8 py-4 font-bold font-mono text-sm uppercase tracking-wider hover:bg-blue-500/10 transition-all"
              >
                SYSTEM OVERVIEW
              </button>
            </div>
          </div>
        </div>

        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
      </section>

      {/* Flagship Innovation — Water Treatment Expert AI */}
      <section className="py-20 bg-slate-900 relative overflow-hidden" aria-labelledby="flagship-heading">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_50%,rgba(6,182,212,0.08),transparent_50%)]"></div>
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 bg-slate-800/50 border border-cyan-500/50 px-4 py-2 mb-6">
              <Award className="w-3 h-3 text-cyan-400" />
              <span className="font-mono text-xs text-cyan-400 uppercase tracking-widest">OUR FLAGSHIP INNOVATION</span>
            </div>
            <h2 id="flagship-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-white font-mono uppercase">
              Water Treatment<br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">Expert AI™</span>
            </h2>
            <p className="text-cyan-300 font-mono text-base max-w-2xl mx-auto">
              The Future of Water &amp; Wastewater Operations Starts Here
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-10 items-center max-w-6xl mx-auto">
            <div className="space-y-4">
              <div className="bg-slate-800/50 border border-cyan-500/20 p-5 tech-border">
                <div className="schematic-corner top-left"></div>
                <div className="schematic-corner bottom-right"></div>
                <p className="text-gray-300 font-mono text-sm leading-relaxed relative z-10">
                  Water Treatment Expert AI™ is NICP's flagship AI-powered platform designed to support water and wastewater professionals, municipalities, utilities, consultants, operators, students, and engineers with instant access to technical knowledge, operational guidance, troubleshooting support, and industry best practices.
                </p>
              </div>
              <div className="bg-slate-800/30 border-l-4 border-blue-500 p-4">
                <p className="text-gray-300 font-mono text-sm leading-relaxed">
                  Developed by industry professionals with over a decade of experience in the water and sanitation sector, the platform helps bridge knowledge gaps, improve decision-making, support compliance, and strengthen operational performance.
                </p>
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2 mb-4">
                <Brain className="w-4 h-4 text-cyan-400" />
                <span className="font-mono text-xs text-cyan-400 uppercase tracking-wider">WHY IT MATTERS</span>
              </div>
              {[
                'Skills shortages and knowledge loss due to retirements',
                'Ageing infrastructure requiring expert guidance',
                'Increasing compliance pressures and regulatory complexity',
                'Rising operational costs with limited access to expertise',
                '24/7 intelligent support for operators and engineers',
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-3 bg-slate-800/30 border border-cyan-500/10 px-4 py-3">
                  <div className="w-2 h-2 rounded-full bg-cyan-400 mt-1.5 flex-shrink-0"></div>
                  <span className="text-gray-300 font-mono text-sm">{item}</span>
                </div>
              ))}

              <div className="pt-2">
                <button
                  type="button"
                  onClick={() => onNavigate('watertreatmentai')}
                  className="group inline-flex items-center gap-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-6 py-3 font-bold font-mono text-xs uppercase tracking-wider hover:from-blue-700 hover:to-cyan-700 transition-all shadow-lg shadow-blue-500/20"
                >
                  <Droplets className="w-4 h-4" />
                  Learn More
                  <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
                </button>
              </div>
            </div>
          </div>

          <div className="mt-10 text-center">
            <div className="inline-flex items-center gap-3 bg-slate-900/60 border border-yellow-500/30 px-6 py-3">
              <Award className="w-4 h-4 text-yellow-400" />
              <span className="font-mono text-xs text-yellow-300 uppercase tracking-wider">Top 3 South African Nominee — BRICS Young Innovator Prize 2025</span>
            </div>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent"></div>
      </section>

      <section className="py-20 bg-slate-900 relative overflow-hidden blueprint-grid" aria-labelledby="problem-first-heading">
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(59,130,246,0.15),transparent_50%)]"></div>
        </div>

        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-orange-500/50 to-transparent"></div>

        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 bg-slate-800/50 border border-orange-500/50 px-4 py-2 mb-8">
              <Shield className="w-3 h-3 text-orange-500" />
              <span className="font-mono text-xs text-orange-500 uppercase tracking-widest">DIAGNOSTIC_INSIGHT</span>
            </div>

            <h2 id="problem-first-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-12 text-white leading-tight font-mono uppercase break-words">
              Why 80% of Engineering<br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-400">Problems Are Misdiagnosed</span>
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto mb-12">
            <div className="relative bg-slate-800/50 border border-red-500/30 p-6 hover:border-red-500 transition-all tech-border group">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <span className="font-mono text-xs text-red-400 uppercase tracking-wider">ERROR_01</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-mono">Busy, Not Improving</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Teams work hard, budgets are spent, but performance never actually improves.
                </p>
              </div>
            </div>

            <div className="relative bg-slate-800/50 border border-red-500/30 p-6 hover:border-red-500 transition-all tech-border group">
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <span className="font-mono text-xs text-red-400 uppercase tracking-wider">ERROR_02</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-mono">Tools Without Clarity</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  New systems are implemented, but nobody is clear on what problem they're actually solving.
                </p>
              </div>
            </div>

            <div className="relative bg-slate-800/50 border border-red-500/30 p-6 hover:border-red-500 transition-all tech-border group">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <span className="font-mono text-xs text-red-400 uppercase tracking-wider">ERROR_03</span>
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-mono">Repeated Failures</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Projects fail, lessons are "learned," but the same mistakes happen again with different technology.
                </p>
              </div>
            </div>
          </div>

          <div className="max-w-3xl mx-auto">
            <div className="relative bg-slate-800/50 border border-orange-500/50 p-8 text-left tech-border group hover:border-orange-500 transition-all">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-6">
                  <div className="h-px flex-1 bg-orange-500/30"></div>
                  <span className="font-mono text-xs text-orange-400 uppercase tracking-wider">ROOT_CAUSE</span>
                  <div className="h-px flex-1 bg-orange-500/30"></div>
                </div>

                <p className="text-gray-300 text-base leading-relaxed mb-6 font-mono">
                  <span className="text-orange-400 font-bold">You don't have a technology problem.</span><br/>
                  You have a <span className="text-white font-bold">decision problem</span>.
                </p>

                <p className="text-gray-400 text-sm leading-relaxed mb-6 font-mono">
                  Most organisations invest in AI, digital systems, or new infrastructure without understanding how their current systems actually behave, where reliability is failing, or whether their data can be trusted.
                </p>

                <div className="bg-orange-500/10 border-l-4 border-orange-500 p-4">
                  <p className="text-orange-400 font-bold font-mono text-sm flex items-center gap-2">
                    <Activity className="w-4 h-4" />
                    NICP brings clarity before investment — so every decision is built on reality, not assumptions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
      </section>

      <section className="py-20 bg-slate-950 data-grid relative overflow-hidden" aria-labelledby="how-we-work-heading">
        <div className="absolute inset-0 opacity-5 bg-slate-950">
          <img
            src="/artificial-intelligence-ai-technology-construction-engineering copy copy.jpg"
            alt="Engineering Process Background"
            className="w-full h-full object-cover"
            loading="lazy"
            decoding="async"
          />
        </div>

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <div className="flex items-center gap-4 mb-6 justify-center">
              <div className="h-px w-24 bg-gradient-to-r from-transparent to-blue-500/50"></div>
              <div className="flex items-center gap-2 bg-slate-900/50 border border-blue-500/30 px-4 py-2">
                <Cpu className="w-3 h-3 text-blue-400" />
                <span className="font-mono text-xs text-blue-400 tracking-widest uppercase">PROCESS_FRAMEWORK</span>
              </div>
              <div className="h-px w-24 bg-gradient-to-l from-transparent to-blue-500/50"></div>
            </div>

            <h2 id="how-we-work-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white font-mono uppercase break-words">
              How We Help You Move From<br/>Confusion to Clarity
            </h2>

            <div className="flex items-center justify-center gap-8 mt-8 mb-8">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                <span className="font-mono text-xs text-blue-400 uppercase tracking-wider">PHASE_01</span>
              </div>
              <div className="h-px w-12 bg-gradient-to-r from-blue-500 to-orange-500"></div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-orange-500"></div>
                <span className="font-mono text-xs text-orange-400 uppercase tracking-wider">PHASE_02</span>
              </div>
              <div className="h-px w-12 bg-gradient-to-r from-orange-500 to-green-500"></div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                <span className="font-mono text-xs text-green-400 uppercase tracking-wider">PHASE_03</span>
              </div>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="relative bg-slate-900/50 border border-blue-500/30 p-8 hover:border-blue-500 transition-all group tech-border hover:shadow-2xl hover:shadow-blue-500/20">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-start justify-between mb-6">
                  <div className="bg-slate-800/50 border border-blue-500/30 w-14 h-14 flex items-center justify-center group-hover:border-blue-500 transition-colors group-hover:shadow-lg group-hover:shadow-blue-500/30">
                    <FileSearch className="w-8 h-8 text-blue-400" />
                  </div>
                  <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/50 px-3 py-1">
                    <span className="font-mono text-xs text-blue-400 uppercase">STEP_01</span>
                  </div>
                </div>

                <div className="h-px bg-gradient-to-r from-blue-500/50 to-transparent mb-4"></div>

                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 font-mono uppercase break-words">
                  Understand the<br/>Real Problem
                </h3>

                <p className="text-gray-400 leading-relaxed font-mono text-sm">
                  We analyse your situation to identify root causes, not symptoms.
                </p>

                <div className="mt-6 flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                  <div className="h-px flex-1 bg-blue-500/30"></div>
                  <span className="font-mono text-xs text-blue-500 uppercase">DIAGNOSTIC</span>
                </div>
              </div>
            </div>

            <div className="relative bg-slate-900/50 border border-orange-500/30 p-8 hover:border-orange-500 transition-all group tech-border hover:shadow-2xl hover:shadow-orange-500/20">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-start justify-between mb-6">
                  <div className="bg-slate-800/50 border border-orange-500/30 w-14 h-14 flex items-center justify-center group-hover:border-orange-500 transition-colors group-hover:shadow-lg group-hover:shadow-orange-500/30">
                    <Shield className="w-8 h-8 text-orange-400" />
                  </div>
                  <div className="inline-flex items-center gap-2 bg-orange-500/10 border border-orange-500/50 px-3 py-1">
                    <span className="font-mono text-xs text-orange-400 uppercase">STEP_02</span>
                  </div>
                </div>

                <div className="h-px bg-gradient-to-r from-orange-500/50 to-transparent mb-4"></div>

                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 font-mono uppercase break-words">
                  Define the<br/>Right Direction
                </h3>

                <p className="text-gray-400 leading-relaxed font-mono text-sm">
                  We guide you on what should be done — and what should not.
                </p>

                <div className="mt-6 flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-orange-500"></div>
                  <div className="h-px flex-1 bg-orange-500/30"></div>
                  <span className="font-mono text-xs text-orange-500 uppercase">STRATEGIC</span>
                </div>
              </div>
            </div>

            <div className="relative bg-slate-900/50 border border-green-500/30 p-8 hover:border-green-500 transition-all group tech-border hover:shadow-2xl hover:shadow-green-500/20">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-start justify-between mb-6">
                  <div className="bg-slate-800/50 border border-green-500/30 w-14 h-14 flex items-center justify-center group-hover:border-green-500 transition-colors group-hover:shadow-lg group-hover:shadow-green-500/30">
                    <Cpu className="w-8 h-8 text-green-400" />
                  </div>
                  <div className="inline-flex items-center gap-2 bg-green-500/10 border border-green-500/50 px-3 py-1">
                    <span className="font-mono text-xs text-green-400 uppercase">STEP_03</span>
                  </div>
                </div>

                <div className="h-px bg-gradient-to-r from-green-500/50 to-transparent mb-4"></div>

                <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 font-mono uppercase break-words">
                  Implement<br/>with Purpose
                </h3>

                <p className="text-gray-400 leading-relaxed font-mono text-sm">
                  Only after clarity, we support execution through engineering and digital solutions.
                </p>

                <div className="mt-6 flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <div className="h-px flex-1 bg-green-500/30"></div>
                  <span className="font-mono text-xs text-green-500 uppercase">EXECUTION</span>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-12 text-center">
            <div className="inline-flex items-center gap-2 bg-slate-800/50 border border-blue-500/30 px-4 py-2">
              <Activity className="w-3 h-3 text-green-400" />
              <span className="font-mono text-xs text-green-400 uppercase tracking-widest">METHODOLOGY_VERIFIED</span>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 bg-slate-900 relative overflow-hidden blueprint-grid" aria-labelledby="who-this-is-for-heading">
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(249,115,22,0.15),transparent_50%)]"></div>
        </div>

        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-orange-500/50 to-transparent"></div>

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <div className="flex items-center gap-4 mb-6 justify-center">
              <div className="h-px w-24 bg-gradient-to-r from-transparent to-orange-500/50"></div>
              <div className="flex items-center gap-2 bg-slate-800/50 border border-orange-500/50 px-4 py-2">
                <Activity className="w-3 h-3 text-orange-500" />
                <span className="font-mono text-xs text-orange-500 uppercase tracking-widest">TARGET_PROFILES</span>
              </div>
              <div className="h-px w-24 bg-gradient-to-l from-transparent to-orange-500/50"></div>
            </div>

            <h2 id="who-this-is-for-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white font-mono uppercase break-words">
              This Is For You If...
            </h2>

            <p className="text-gray-400 text-lg max-w-3xl mx-auto font-mono leading-relaxed">
              You manage critical infrastructure, engineering systems, or operations where <span className="text-orange-400 font-bold">failure is expensive</span> and decisions need to be <span className="text-orange-400 font-bold">defensible</span>.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-12">
            <div className="relative bg-slate-800/50 border border-blue-500/30 p-6 hover:border-blue-500 hover:bg-slate-800/70 transition-all group tech-border">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-2 h-2 rounded-full bg-blue-500"></div>
                  <span className="font-mono text-xs text-blue-400 uppercase tracking-wider">PROFILE_01</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-2 font-mono">Water & Wastewater Operations</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Managing aging infrastructure, reliability issues, and trying to adopt digital tools without clear direction.
                </p>
              </div>
            </div>

            <div className="relative bg-slate-800/50 border border-orange-500/30 p-6 hover:border-orange-500 hover:bg-slate-800/70 transition-all group tech-border">
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-2 h-2 rounded-full bg-orange-500"></div>
                  <span className="font-mono text-xs text-orange-400 uppercase tracking-wider">PROFILE_02</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-2 font-mono">Engineering Leadership</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Balancing operational demands with innovation, struggling to justify investments or assess true system health.
                </p>
              </div>
            </div>

            <div className="relative bg-slate-800/50 border border-green-500/30 p-6 hover:border-green-500 hover:bg-slate-800/70 transition-all group tech-border">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <span className="font-mono text-xs text-green-400 uppercase tracking-wider">PROFILE_03</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-2 font-mono">Municipal & Infrastructure Executives</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Responsible for service delivery, asset management, and resilience — needing confidence that investments will deliver.
                </p>
              </div>
            </div>

            <div className="relative bg-slate-800/50 border border-purple-500/30 p-6 hover:border-purple-500 hover:bg-slate-800/70 transition-all group tech-border">
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>

              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-2 h-2 rounded-full bg-purple-500"></div>
                  <span className="font-mono text-xs text-purple-400 uppercase tracking-wider">PROFILE_04</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-2 font-mono">Growing SMEs & Technical Businesses</h3>
                <p className="text-gray-400 text-sm font-mono leading-relaxed">
                  Looking to scale operations through AI or digital systems — but need direction before committing budget.
                </p>
              </div>
            </div>
          </div>

          <div className="relative max-w-2xl mx-auto">
            <div className="absolute -inset-4 bg-gradient-to-r from-orange-500/10 to-blue-500/10 blur-xl"></div>

            <div className="relative bg-slate-800/50 border border-orange-500/50 p-8 tech-border">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10 text-center">
                <div className="flex items-center justify-center gap-2 mb-6">
                  <div className="h-px flex-1 bg-orange-500/30 max-w-[100px]"></div>
                  <span className="font-mono text-xs text-orange-400 uppercase tracking-wider">NEXT_ACTION</span>
                  <div className="h-px flex-1 bg-orange-500/30 max-w-[100px]"></div>
                </div>

                <button
                  type="button"
                  onClick={() => onNavigate('contact', undefined, true)}
                  className="group relative bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 sm:px-6 md:px-10 py-3 sm:py-4 md:py-5 font-bold font-mono text-xs sm:text-sm uppercase tracking-wider hover:from-orange-600 hover:to-orange-700 transition-all shadow-lg shadow-orange-500/30 hover:shadow-orange-500/50 glow-orange-hover w-full sm:w-auto"
                >
                  <span className="relative z-10 flex items-center justify-center gap-3">
                    <Zap className="w-5 h-5" />
                    <span className="break-words text-center">Book a Decision Clarity Session</span>
                  </span>
                </button>

                <div className="mt-6 flex items-center justify-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <p className="text-gray-400 font-mono text-xs uppercase tracking-wider">
                    Get Direction Before You Invest
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
      </section>

      <section className="py-20 bg-slate-950 data-grid relative" aria-labelledby="services-heading">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-16">
            <div className="flex items-center gap-4 mb-6">
              <div className="h-px flex-1 bg-blue-500/30"></div>
              <div className="flex items-center gap-2 bg-slate-900/50 border border-blue-500/30 px-4 py-2">
                <span className="font-mono text-xs text-blue-400 tracking-widest">SERVICE_CATALOG</span>
              </div>
              <div className="h-px flex-1 bg-blue-500/30"></div>
            </div>

            <h2 id="services-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white text-center font-mono uppercase break-words">
              What Changes After Working With NICP
            </h2>
            <p className="text-gray-400 text-lg max-w-4xl mx-auto text-center font-mono leading-relaxed">
              <span className="text-orange-400 font-bold">Reduced risk.</span> <span className="text-blue-400 font-bold">Clear direction.</span> <span className="text-green-400 font-bold">Confident decisions.</span><br/>
              Every engagement delivers clarity you can act on — not just another report.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6" role="list">
            {services.map((service, index) => (
              <article
                key={index}
                className="relative bg-slate-900/50 border border-blue-500/30 p-8 hover:border-orange-500/50 transition-all duration-300 group tech-border"
                role="listitem"
              >
                <div className="schematic-corner top-left"></div>
                <div className="schematic-corner top-right"></div>
                <div className="schematic-corner bottom-left"></div>
                <div className="schematic-corner bottom-right"></div>

                <div className="flex flex-col h-full relative z-10">
                  <div className="flex items-start justify-between mb-6">
                    <div className="bg-slate-800/50 border border-blue-500/30 w-14 h-14 flex items-center justify-center group-hover:border-orange-500 transition-colors">
                      <div className="text-blue-400 group-hover:text-orange-500 transition-colors">
                        {service.icon}
                      </div>
                    </div>
                    <div className="text-right font-mono text-xs">
                      <div className="text-blue-400">{service.code}</div>
                      <div className="text-green-400 flex items-center gap-1 justify-end mt-1">
                        <div className="w-2 h-2 rounded-full bg-green-400"></div>
                        {service.status}
                      </div>
                    </div>
                  </div>

                  <h3 className="text-base sm:text-lg md:text-xl font-bold text-white mb-4 leading-tight font-mono uppercase tracking-wide break-words">
                    {service.title}
                  </h3>

                  <p className="text-gray-400 mb-6 leading-relaxed flex-grow text-sm font-mono">
                    {service.description}
                  </p>

                  <button
                    type="button"
                    onClick={() => onNavigate('services', index)}
                    className="flex items-center gap-3 bg-transparent border border-orange-500/50 text-orange-500 px-6 py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-500/10 transition-all w-fit group-hover:glow-orange"
                  >
                    <span>ACCESS MODULE</span>
                    <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="py-4 bg-slate-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="h-px bg-gradient-to-r from-transparent via-orange-500/50 to-transparent"></div>
        </div>
      </section>

      <section className="py-20 bg-slate-950 data-grid relative overflow-hidden" aria-labelledby="ecosystem-heading">
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(249,115,22,0.1),transparent_50%)]"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="mb-16 text-center">
            <div className="flex items-center gap-4 mb-6 justify-center">
              <div className="h-px w-24 bg-gradient-to-r from-transparent to-orange-500/50"></div>
              <div className="flex items-center gap-2 bg-slate-900/50 border border-orange-500/50 px-4 py-2">
                <span className="font-mono text-xs text-orange-500 tracking-widest uppercase">ECOSYSTEM_NETWORK</span>
              </div>
              <div className="h-px w-24 bg-gradient-to-l from-transparent to-orange-500/50"></div>
            </div>

            <h2 id="ecosystem-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white font-mono uppercase break-words">
              Explore the NICP Ecosystem
            </h2>
            <p className="text-gray-400 text-base md:text-lg max-w-4xl mx-auto font-mono leading-relaxed">
              Beyond engineering consulting, NICP is building platforms that combine engineering, digital innovation, and AI to help professionals and organisations grow.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <article className="group relative bg-slate-900/50 border border-orange-500/30 p-8 hover:border-orange-500 transition-all duration-500 hover:transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-orange-500/20 tech-border ecosystem-card">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/50 px-3 py-1 mb-4">
                  <span className="font-mono text-xs text-blue-400 uppercase tracking-wider">AI Education Platform</span>
                </div>

                <div className="bg-slate-800/50 border border-orange-500/30 w-16 h-16 flex items-center justify-center mb-6 group-hover:border-orange-500 transition-colors group-hover:shadow-lg group-hover:shadow-orange-500/30">
                  <GraduationCap className="w-10 h-10 text-orange-500 group-hover:scale-110 transition-transform" />
                </div>

                <h3 className="text-2xl font-bold text-white mb-4 leading-tight font-mono uppercase tracking-wide">
                  AI 101 Academy
                </h3>

                <p className="text-gray-400 mb-6 leading-relaxed text-sm font-mono min-h-[120px]">
                  AI 101 Academy is NICP's learning platform designed to make artificial intelligence simple, practical, and accessible. It helps beginners, professionals, and businesses understand AI concepts, learn how to use AI tools, and discover how AI can solve real-world problems across different industries.
                </p>

                <a
                  href="https://linktr.ee/AI.101.Academy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 sm:gap-3 bg-orange-500 text-white px-4 sm:px-6 py-2 sm:py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-600 transition-all group-hover:shadow-lg group-hover:shadow-orange-500/50 glow-orange-hover"
                >
                  <span className="break-words">Visit AI 101 Academy</span>
                  <ExternalLink size={16} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform flex-shrink-0" />
                </a>
              </div>

              <div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            </article>

            <article className="group relative bg-slate-900/50 border border-orange-500/30 p-8 hover:border-orange-500 transition-all duration-500 hover:transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-orange-500/20 tech-border ecosystem-card">
              <div className="schematic-corner top-left"></div>
              <div className="schematic-corner top-right"></div>
              <div className="schematic-corner bottom-left"></div>
              <div className="schematic-corner bottom-right"></div>

              <div className="relative z-10">
                <div className="inline-flex items-center gap-2 bg-purple-500/10 border border-purple-500/50 px-3 py-1 mb-4">
                  <span className="font-mono text-xs text-purple-400 uppercase tracking-wider">Creative Digital Services</span>
                </div>

                <div className="bg-slate-800/50 border border-orange-500/30 w-16 h-16 flex items-center justify-center mb-6 group-hover:border-orange-500 transition-colors group-hover:shadow-lg group-hover:shadow-orange-500/30">
                  <Palette className="w-10 h-10 text-orange-500 group-hover:scale-110 transition-transform" />
                </div>

                <h3 className="text-2xl font-bold text-white mb-4 leading-tight font-mono uppercase tracking-wide">
                  NICP Design Studio
                </h3>

                <p className="text-gray-400 mb-6 leading-relaxed text-sm font-mono min-h-[120px]">
                  NICP Design Studio provides creative digital solutions that help businesses build a strong online presence. Services include professional website development, branding, logos, posters, digital marketing visuals, and AI-powered video ads designed to help businesses stand out and grow.
                </p>

                <a
                  href="https://linktr.ee/NICP.DesignStudio"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 sm:gap-3 bg-orange-500 text-white px-4 sm:px-6 py-2 sm:py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-600 transition-all group-hover:shadow-lg group-hover:shadow-orange-500/50 glow-orange-hover"
                >
                  <span className="break-words">Visit NICP Design Studio</span>
                  <ExternalLink size={16} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform flex-shrink-0" />
                </a>
              </div>

              <div className="absolute inset-0 bg-gradient-to-br from-orange-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            </article>

            {/* Water Treatment Expert AI — flagship innovation */}
            <article className="group relative bg-slate-900/50 border border-cyan-500/30 p-8 hover:border-cyan-500 transition-all duration-500 hover:transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-cyan-500/20 tech-border ecosystem-card md:col-span-2 lg:col-span-1">
              <div className="schematic-corner top-left" style={{ borderColor: '#06b6d4' }}></div>
              <div className="schematic-corner top-right" style={{ borderColor: '#06b6d4' }}></div>
              <div className="schematic-corner bottom-left" style={{ borderColor: '#06b6d4' }}></div>
              <div className="schematic-corner bottom-right" style={{ borderColor: '#06b6d4' }}></div>

              <div className="relative z-10">
                <div className="flex items-center gap-2 mb-4 flex-wrap">
                  <div className="inline-flex items-center gap-2 bg-cyan-500/10 border border-cyan-500/50 px-3 py-1">
                    <span className="font-mono text-xs text-cyan-400 uppercase tracking-wider">Flagship Innovation</span>
                  </div>
                  <div className="inline-flex items-center gap-1 bg-yellow-500/10 border border-yellow-500/40 px-2 py-1">
                    <span className="font-mono text-xs text-yellow-400 uppercase">BRICS Award</span>
                  </div>
                </div>

                <div className="bg-slate-800/50 border border-cyan-500/30 w-16 h-16 flex items-center justify-center mb-6 group-hover:border-cyan-500 transition-colors group-hover:shadow-lg group-hover:shadow-cyan-500/30">
                  <Droplets className="w-10 h-10 text-cyan-400 group-hover:scale-110 transition-transform" />
                </div>

                <h3 className="text-2xl font-bold text-white mb-2 leading-tight font-mono uppercase tracking-wide">
                  Water Treatment<br />Expert AI™
                </h3>
                <p className="text-cyan-400 font-mono text-xs mb-4">AI-Powered Water & Wastewater Platform</p>

                <p className="text-gray-400 mb-6 leading-relaxed text-sm font-mono min-h-[120px]">
                  NICP's flagship AI-powered platform for water and wastewater professionals — providing instant access to technical knowledge, troubleshooting support, compliance guidance, and operational best practices. Built by industry professionals with 10+ years of sector experience.
                </p>

                <button
                  type="button"
                  onClick={() => onNavigate('watertreatmentai')}
                  className="inline-flex items-center gap-2 sm:gap-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-4 sm:px-6 py-2 sm:py-3 font-bold font-mono text-xs uppercase tracking-wider hover:from-blue-700 hover:to-cyan-700 transition-all group-hover:shadow-lg group-hover:shadow-cyan-500/50"
                >
                  <span className="break-words">Explore Water Treatment Expert AI™</span>
                  <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform flex-shrink-0" />
                </button>
              </div>

              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            </article>
          </div>
        </div>
      </section>

      {/* More Than a Service Provider */}
      <section className="py-20 bg-slate-900 relative overflow-hidden blueprint-grid" aria-labelledby="more-than-heading">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_50%,rgba(6,182,212,0.06),transparent_50%)]"></div>
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div>

        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="relative bg-slate-800/50 border border-cyan-500/30 p-10 tech-border">
            <div className="schematic-corner top-left"></div>
            <div className="schematic-corner top-right"></div>
            <div className="schematic-corner bottom-left"></div>
            <div className="schematic-corner bottom-right"></div>

            <div className="relative z-10 text-center">
              <div className="inline-flex items-center gap-2 bg-slate-900/50 border border-cyan-500/40 px-4 py-2 mb-6">
                <Droplets className="w-3 h-3 text-cyan-400" />
                <span className="font-mono text-xs text-cyan-400 uppercase tracking-widest">BEYOND_CONSULTING</span>
              </div>

              <h2 id="more-than-heading" className="text-2xl sm:text-3xl md:text-4xl font-bold mb-6 text-white font-mono uppercase">
                More Than a Service Provider
              </h2>

              <div className="max-w-3xl mx-auto space-y-4 mb-8">
                <p className="text-gray-300 font-mono text-sm sm:text-base leading-relaxed">
                  While we deliver engineering, AI, design, website and business solutions, NICP is also building innovative technologies that address real-world challenges.
                </p>
                <p className="text-gray-300 font-mono text-sm sm:text-base leading-relaxed">
                  Our flagship innovation, <span className="text-cyan-400 font-bold">Water Treatment Expert AI™</span>, demonstrates our commitment to creating solutions that improve industries, empower people and drive sustainable development.
                </p>
              </div>

              <div className="inline-flex items-center gap-3 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 border border-cyan-500/40 px-8 py-4 mb-8">
                <span className="text-white font-bold font-mono text-lg tracking-wider">Turning Innovation into Impact.</span>
              </div>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  type="button"
                  onClick={() => onNavigate('watertreatmentai')}
                  className="group inline-flex items-center justify-center gap-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-8 py-4 font-bold font-mono text-sm uppercase tracking-wider hover:from-blue-700 hover:to-cyan-700 transition-all shadow-lg shadow-blue-500/20"
                >
                  <Droplets className="w-4 h-4" />
                  Explore Water Treatment Expert AI™
                  <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/30 to-transparent"></div>
      </section>

      <section className="py-20 relative overflow-hidden bg-slate-900 blueprint-grid" aria-labelledby="challenges-heading">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-orange-500/20 to-blue-500/20 blur-xl"></div>
              <img
                src="/3333.PNG"
                alt="Engineering Innovation"
                className="relative border-2 border-blue-500/30 shadow-2xl"
                loading="lazy"
              />
              <div className="absolute top-0 left-0 w-8 h-8 sm:w-12 sm:h-12 border-t-2 border-l-2 border-orange-500"></div>
              <div className="absolute bottom-0 right-0 w-8 h-8 sm:w-12 sm:h-12 border-b-2 border-r-2 border-orange-500"></div>
            </div>
            <div>
              <div className="inline-flex items-center gap-2 bg-slate-800/50 border border-orange-500/50 px-4 py-2 mb-6">
                <span className="font-mono text-xs text-orange-500 uppercase tracking-widest">ANALYSIS_REPORT</span>
              </div>
              <h2 id="challenges-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white font-mono uppercase break-words">
                Your System Is Not Broken.<br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-400">Your Decisions Are.</span>
              </h2>
              <div className="space-y-4 text-gray-300 leading-relaxed font-mono text-sm">
                <div className="bg-slate-800/30 border-l-4 border-red-500 p-4">
                  <p className="text-base">
                    <span className="font-bold text-red-400">The Hidden Problem:</span> Most engineering failures aren't technical. They're strategic. Teams solve the wrong problem, invest in the wrong tools, and measure the wrong outcomes.
                  </p>
                </div>
                <div className="bg-slate-800/30 border-l-4 border-orange-500 p-4">
                  <p>
                    Your maintenance team isn't the problem. Your plant isn't failing. <span className="font-bold text-orange-400">Your decision process is failing.</span>
                  </p>
                </div>
                <div className="bg-slate-800/30 border-l-4 border-blue-500 p-4">
                  <p>
                    Engineering systems evolve. Reliability practices drift. Data quality degrades. Digital tools are layered on without integration. And decisions are made based on assumptions, not reality.
                  </p>
                </div>
                <div className="bg-slate-800/50 border-l-4 border-green-500 p-4">
                  <p className="font-bold text-green-400 text-base">
                    NICP identifies what's actually broken before you invest in fixing the wrong thing.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 bg-slate-950 relative overflow-hidden data-grid" aria-labelledby="approach-heading">
        <div className="absolute inset-0 opacity-5 bg-slate-950">
          <img
            src="/artificial-intelligence-ai-technology-construction-engineering copy copy copy.jpg"
            alt="Engineering Background"
            className="w-full h-full object-cover"
            loading="lazy"
            decoding="async"
          />
        </div>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 bg-slate-900/50 border border-orange-500/50 px-4 py-2 mb-6">
                <Activity className="w-3 h-3 text-orange-500" />
                <span className="font-mono text-xs text-orange-500 uppercase tracking-widest">CORE_PROTOCOL</span>
              </div>
              <h2 id="approach-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white font-mono uppercase break-words">
                Before You Implement AI,<br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-blue-400">Fix This First</span>
              </h2>
              <div className="space-y-4 leading-relaxed font-mono text-sm">
                <div className="bg-slate-900/30 border-l-4 border-red-500 p-4 text-gray-300">
                  <p className="text-base">
                    <span className="font-bold text-red-400">Most AI projects fail</span> — not because of the technology, but because of operational misalignment, poor data quality, and unclear decision processes.
                  </p>
                </div>
                <div className="bg-slate-900/30 border-l-4 border-orange-500 p-4 text-gray-300">
                  <p>
                    <span className="font-bold text-orange-400">NICP's Clarity Before Investment™ approach:</span> We start by understanding how your systems actually perform, how reliability is managed, whether your data can be trusted, and how decisions are actually made.
                  </p>
                </div>
                <div className="bg-slate-900/30 border-l-4 border-blue-500 p-4 text-gray-300">
                  <p>
                    We don't start with tools, platforms, or AI models. We start with <span className="font-bold text-blue-400">diagnostic clarity</span> — revealing what's working, what's not, and why.
                  </p>
                </div>
                <div className="bg-slate-900/50 border-l-4 border-green-500 p-4 text-gray-300">
                  <p className="font-bold text-green-400 text-base">
                    OUTCOME: Only after clarity is established do we support implementation. This ensures innovation strengthens your system rather than adding risk.
                  </p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => onNavigate('contact', undefined, true)}
                className="mt-8 bg-orange-500 border border-orange-500 text-white px-8 py-4 font-bold font-mono text-sm uppercase tracking-wider hover:bg-orange-600 transition-all glow-orange shadow-lg shadow-orange-500/30 hover:shadow-orange-500/50"
              >
                <span className="flex items-center gap-2">
                  <Zap className="w-4 h-4" />
                  Book Your Clarity Session
                </span>
              </button>
              <p className="mt-4 text-gray-400 font-mono text-xs uppercase tracking-wider">
                No Sales Pitch. Just Strategic Clarity.
              </p>
            </div>
            <div className="hidden md:block relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-orange-500/20 blur-xl"></div>
              <img
                src="/ai-robot-hand.jfif"
                alt="AI and Engineering"
                className="relative border-2 border-blue-500/30 shadow-2xl"
                loading="lazy"
              />
              <div className="absolute top-0 right-0 w-8 h-8 sm:w-12 sm:h-12 border-t-2 border-r-2 border-orange-500"></div>
              <div className="absolute bottom-0 left-0 w-8 h-8 sm:w-12 sm:h-12 border-b-2 border-l-2 border-orange-500"></div>
            </div>
          </div>
        </div>
      </section>

      <ShareButton
        variant="floating"
        title="NICP - Turning Innovation into Impact"
        text="Discover professional AI Solutions, Engineering Consulting & Digital Transformation. Award-winning expertise from NICP."
        section="home"
      />
    </div>
  );
}