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

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

const portfolio = [
  { number: '01', title: 'NICP Engineering & Innovation', tagline: 'Engineering-Led AI & Digital Advisory', description: 'Helping engineering, infrastructure and industrial organisations assess readiness, identify operational and digital gaps, evaluate AI opportunities and develop practical strategies before significant technology investments.', icon: <Layers className="w-7 h-7" />, tab: 'engineering', color: 'orange' },
  { number: '02', title: 'Water Treatment Expert AI™', tagline: 'Flagship Water-Sector Innovation', description: 'An AI-powered technical knowledge and decision-support innovation for water and wastewater professionals. The MVP is developed and the next stage is focused on funding, partnerships and structured pilot validation.', icon: <Droplets className="w-7 h-7" />, tab: 'watertreatmentai', color: 'cyan' },
  { number: '03', title: 'NICP Design Studio', tagline: 'Websites, Branding & Digital Solutions', description: 'Professional website development, brand identity and digital solutions that help businesses strengthen their online presence and communicate their value across South Africa and internationally.', href: 'https://www.nicpdesign.com', icon: <Palette className="w-7 h-7" />, color: 'blue' },
  { number: '04', title: 'AI 101 Academy | Commercial', tagline: 'Commercial AI Education & Training', description: 'Practical AI education and professional development programmes that help individuals, businesses and organisations understand and apply artificial intelligence.', href: 'https://ai101academy.co.za/', icon: <GraduationCap className="w-7 h-7" />, color: 'green' },
  { number: '05', title: 'NICP TalentAI', tagline: 'AI Careers, Global Opportunities & AI/Data Partnerships', description: 'Connecting skilled professionals with selected AI, remote-work and specialist career opportunities, while facilitating access to selected AI and data partnership opportunities.', tab: 'talentai', icon: <Users className="w-7 h-7" />, color: 'blue' },
];

const supportGroups = [
  ['Engineering & Infrastructure Organisations', 'Seeking to understand operational challenges and evaluate AI or digital transformation opportunities.'],
  ['Water & Wastewater Sector', 'Exploring technical knowledge accessibility, operational decision support and responsible water-sector AI innovation.'],
  ['Businesses & SMEs', 'Seeking professional digital solutions, stronger online visibility and appropriate technology adoption.'],
  ['Professionals & Corporate Teams', 'Developing practical AI knowledge and digital capabilities for an evolving workplace.'],
  ['Technology & Innovation Partners', 'Exploring opportunities to collaborate on AI development, research, innovation projects and strategic partnerships.'],
];

const approach = [
  ['01', 'Understand the Challenge', 'Begin with the organisational need, operational context, objectives and constraints rather than assuming technology is the answer.', <FileSearch className="w-6 h-6" />],
  ['02', 'Assess Readiness & Opportunities', 'Where relevant to the engagement, evaluate capabilities, processes, systems, data and potential solutions to identify gaps and opportunities.', <Shield className="w-6 h-6" />],
  ['03', 'Recommend a Practical Direction', 'Develop recommendations or defined solutions appropriate to the client’s needs, with attention to feasibility, priorities and risks.', <Target className="w-6 h-6" />],
];

export default function Home({ onNavigate }: HomeProps) {
  return (
    <div className="bg-slate-950">
      <section className="relative pt-32 pb-24 overflow-hidden blueprint-grid" aria-label="NICP introduction" role="banner">
        <div className="absolute inset-0 opacity-10"><img src="/artificial-intelligence-ai-technology-construction-engineering.jpg" alt="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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div className="max-w-5xl">
          <div className="inline-flex items-center gap-3 bg-slate-900/80 border border-orange-500/50 px-5 py-3 mb-8"><Cpu className="w-4 h-4 text-orange-500" /><span className="text-orange-500 font-mono text-xs uppercase tracking-widest">SOUTH_AFRICAN_INNOVATION_COMPANY</span></div>
          <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight text-white font-mono">Engineering-Led AI &amp;<br /><span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-blue-400">Digital Innovation</span></h1>
          <p className="text-gray-300 text-lg sm:text-xl md:text-2xl leading-relaxed font-mono mb-6">New Innovations Consulting and Projects - NICP (Pty) Ltd is a South African engineering-led AI and digital innovation company combining specialist advisory, artificial intelligence, digital solutions, skills development and strategic opportunities.</p>
          <p className="text-gray-400 font-mono leading-relaxed max-w-4xl mb-7">We help organisations understand challenges, make informed technology decisions and access practical solutions that support growth and transformation.</p>
          <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" /><span className="text-orange-400 font-mono text-sm uppercase tracking-wider">CLARITY_BEFORE_INVESTMENT™</span><div className="h-px flex-1 bg-gradient-to-l from-orange-500/50 to-transparent" /></div>
          <p className="text-white text-base sm:text-lg leading-relaxed font-mono font-bold mb-8">Before you invest in AI or digital technology, understand what your organisation actually needs.</p>
          <div className="flex flex-col sm:flex-row gap-4"><button type="button" onClick={() => onNavigate('services')} className="inline-flex items-center justify-center gap-2 bg-orange-500 text-white px-6 py-4 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-600 transition-colors"><Zap className="w-4 h-4" /> Explore Our Services</button><button type="button" onClick={() => onNavigate('contact', undefined, true)} className="inline-flex items-center justify-center gap-2 border-2 border-blue-500 text-blue-400 px-6 py-4 font-bold font-mono text-xs uppercase tracking-wider hover:bg-blue-500/10 transition-colors">Book a Discovery Consultation <ArrowRight className="w-4 h-4" /></button></div>
        </div></div>
      </section>

      <section className="py-20 bg-slate-900 blueprint-grid" aria-labelledby="portfolio-heading"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div className="text-center mb-12"><p className="text-orange-400 font-mono text-xs uppercase tracking-widest mb-4">OUR_PORTFOLIO</p><h2 id="portfolio-heading" className="text-2xl sm:text-4xl md:text-5xl font-bold text-white font-mono mb-5">Five Specialised Offerings. One Connected Ecosystem.</h2><p className="text-gray-400 font-mono max-w-3xl mx-auto leading-relaxed">NICP brings together five complementary commercial offerings, each addressing different organisational and professional needs.</p></div><div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">{portfolio.map((item) => <article key={item.title} className="bg-slate-950/70 border border-blue-500/30 p-6 flex flex-col hover:border-orange-500/60 transition-colors"><div className="flex justify-between items-start mb-5"><div className="w-12 h-12 flex items-center justify-center border border-blue-500/40 text-blue-400">{item.icon}</div><span className="text-gray-500 font-mono text-xs">{item.number}</span></div><h3 className="text-white font-bold font-mono text-lg mb-2">{item.title}</h3><p className="text-orange-400 font-mono text-xs mb-4">{item.tagline}</p><p className="text-gray-400 font-mono text-sm leading-relaxed flex-1">{item.description}</p>{item.tab ? <button type="button" onClick={() => onNavigate(item.tab!)} className="inline-flex items-center gap-2 text-cyan-400 font-mono text-xs uppercase tracking-wider mt-6 text-left">Explore {item.title} <ArrowRight className="w-4 h-4" /></button> : <a href={item.href} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-cyan-400 font-mono text-xs uppercase tracking-wider mt-6">Visit offering <ExternalLink className="w-4 h-4" /></a>}</article>)}</div><p className="text-gray-500 font-mono text-xs text-center mt-8">AI 101 Academy NPC is a separately registered nonprofit organisation and is not a commercial NICP division.</p></div></section>

      <section className="py-20 bg-slate-950" aria-labelledby="engineering-heading"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-[1.05fr_.95fr] gap-10 items-center"><div><p className="text-orange-400 font-mono text-xs uppercase tracking-widest mb-4">NICP_ENGINEERING_AND_INNOVATION</p><h2 id="engineering-heading" className="text-2xl sm:text-4xl font-bold text-white font-mono mb-5">Before You Invest in AI, Understand Your Readiness.</h2><p className="text-gray-300 font-mono leading-relaxed mb-4">New technology does not automatically solve existing operational problems. For engineering, infrastructure and asset-intensive organisations, digital transformation requires an understanding of operational realities, organisational capabilities, data quality and investment priorities.</p><p className="text-gray-400 font-mono text-sm leading-relaxed">NICP Engineering &amp; Innovation provides diagnostic and strategic advisory services to help organisations make better-informed decisions.</p><div className="grid sm:grid-cols-3 gap-4 mt-8">{[['Readiness & Gap Assessments', 'Evaluate readiness, capabilities, skills and existing gaps.'], ['AI Opportunity & Data Advisory', 'Identify practical use cases and assess data quality.'], ['Strategy & Decision Support', 'Develop prioritised recommendations and roadmaps.']].map(([title, text]) => <div key={title} className="border border-blue-500/30 bg-slate-900/60 p-5"><h3 className="text-white font-bold font-mono text-sm mb-3">{title}</h3><p className="text-gray-400 font-mono text-xs leading-relaxed">{text}</p></div>)}</div><button type="button" onClick={() => onNavigate('engineering')} className="inline-flex items-center gap-2 bg-orange-500 text-white px-6 py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-600 transition-colors mt-8">Explore Engineering &amp; Innovation <ArrowRight className="w-4 h-4" /></button></div><div className="border border-blue-500/30 bg-slate-900/60 p-7"><h3 className="text-blue-400 font-mono text-xs uppercase tracking-widest mb-5">WHAT_YOU_GAIN</h3><ul className="space-y-4">{['Greater clarity on organisational readiness.', 'Better understanding of operational and digital gaps.', 'Prioritised AI and technology opportunities.', 'Practical recommendations and decision support.', 'A clearer basis for investment planning.'].map((item) => <li key={item} className="flex items-start gap-3 text-gray-300 font-mono text-sm"><CheckCircle className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" />{item}</li>)}</ul><p className="text-orange-400 font-mono text-sm mt-8">Clarity Before Investment™</p></div></div></section>

      <section className="py-20 bg-slate-900 relative overflow-hidden" aria-labelledby="wte-heading"><div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_50%,rgba(6,182,212,0.08),transparent_55%)]" /><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div className="grid lg:grid-cols-2 gap-10 items-center"><div><p className="text-cyan-400 font-mono text-xs uppercase tracking-widest mb-4">OUR_FLAGSHIP_INNOVATION</p><h2 id="wte-heading" className="text-2xl sm:text-4xl font-bold text-white font-mono mb-5">Water Treatment Expert AI™</h2><p className="text-cyan-300 font-mono mb-5">Making specialised water treatment knowledge more accessible through AI.</p><p className="text-gray-300 font-mono text-sm leading-relaxed mb-4">Water Treatment Expert AI™ is NICP’s flagship artificial intelligence innovation, designed to support technical learning, operational troubleshooting and informed decision-making in water and wastewater treatment.</p><p className="text-gray-400 font-mono text-sm leading-relaxed">Our initial MVP has been developed. We are seeking funding, technology partners and strategic collaborators to support transition towards a scalable SaaS platform and structured real-world validation.</p><div className="flex flex-wrap gap-4 mt-8"><button type="button" onClick={() => onNavigate('watertreatmentai')} className="inline-flex items-center gap-2 bg-cyan-600 text-white px-5 py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-cyan-700 transition-colors">Explore WTE AI™ <ArrowRight className="w-4 h-4" /></button><button type="button" onClick={() => onNavigate('contact')} className="inline-flex items-center gap-2 border border-cyan-500/50 text-cyan-400 px-5 py-3 font-bold font-mono text-xs uppercase tracking-wider hover:bg-cyan-500/10 transition-colors">Funding &amp; Pilot Enquiries <ArrowRight className="w-4 h-4" /></button></div></div><div className="space-y-5"><div className="bg-slate-950/70 border border-cyan-500/30 p-6"><div className="flex items-center gap-3 mb-4"><Brain className="w-5 h-5 text-cyan-400" /><h3 className="text-white font-bold font-mono">From MVP to SaaS</h3></div><p className="text-gray-400 font-mono text-sm leading-relaxed">The next phase focuses on funding, strategic partnerships and preparation for structured pilot validation. Pilot consideration will depend on technical suitability and programme readiness.</p></div><div className="flex items-center gap-3 bg-yellow-500/10 border border-yellow-500/30 p-4"><Award className="w-5 h-5 text-yellow-400 flex-shrink-0" /><p className="text-yellow-300 font-mono text-xs">BRICS Young Innovator Prize 2025 — South Africa Top 3 Nominee, AI for Public Services.</p></div></div></div></div></section>

      <section className="py-20 bg-slate-950" aria-labelledby="support-heading"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div className="text-center mb-12"><p className="text-blue-400 font-mono text-xs uppercase tracking-widest mb-4">WHO_WE_SUPPORT</p><h2 id="support-heading" className="text-2xl sm:text-4xl font-bold text-white font-mono mb-5">Supporting Organisations at Different Stages of Innovation</h2></div><div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">{supportGroups.map(([title, text]) => <article key={title} className="border border-blue-500/30 bg-slate-900/60 p-6"><h3 className="text-white font-bold font-mono mb-3">{title}</h3><p className="text-gray-400 font-mono text-sm leading-relaxed">{text}</p></article>)}</div></div></section>

      <section className="py-20 bg-slate-900 blueprint-grid" aria-labelledby="approach-heading"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div className="text-center mb-12"><p className="text-orange-400 font-mono text-xs uppercase tracking-widest mb-4">OUR_APPROACH</p><h2 id="approach-heading" className="text-2xl sm:text-4xl font-bold text-white font-mono">From Understanding to Informed Action</h2></div><div className="grid md:grid-cols-3 gap-6">{approach.map(([number, title, text, icon]) => <article key={title} className="bg-slate-950/70 border border-blue-500/30 p-7"><div className="flex items-center justify-between mb-5"><div className="w-12 h-12 flex items-center justify-center border border-blue-500/40 text-blue-400">{icon}</div><span className="text-orange-400 font-mono text-xs">{number}</span></div><h3 className="text-white font-bold font-mono mb-3">{title}</h3><p className="text-gray-400 font-mono text-sm leading-relaxed">{text}</p></article>)}</div><p className="text-center text-orange-400 font-mono text-sm mt-8">Our Principle: Clarity Before Investment™</p></div></section>

      <section className="py-20 bg-slate-950" aria-labelledby="credentials-heading"><div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center"><Award className="w-8 h-8 text-yellow-400 mx-auto mb-5" /><h2 id="credentials-heading" className="text-2xl sm:text-4xl font-bold text-white font-mono mb-5">Experience, Credentials &amp; Recognition</h2><p className="text-gray-300 font-mono leading-relaxed max-w-3xl mx-auto mb-8">NICP’s strategic direction is informed by the qualifications, industry experience and innovation achievements of founder and CEO Unathi Pretty Mbengwana.</p><div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 text-left mb-8">{['2026 | Forty Under 40 South Africa — Winner, Innovation Category', '2026 | Womandla Women in STEAM Awards — Winner, Engineering Category', '2025 | BRICS Young Innovator Prize — South Africa Top 3 Nominee', '2025 | WRC Young Engineers Changemaker Programme — Top 20 Participant'].map((item) => <div key={item} className="border border-yellow-500/25 bg-slate-900/60 p-4 text-yellow-300 font-mono text-xs leading-relaxed">{item}</div>)}</div><button type="button" onClick={() => onNavigate('credentials')} className="inline-flex items-center gap-2 text-cyan-400 font-mono text-xs uppercase tracking-wider">View Credentials &amp; Recognition <ArrowRight className="w-4 h-4" /></button></div></section>

      <section className="py-20 bg-slate-900 blueprint-grid"><div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"><h2 className="text-2xl sm:text-4xl font-bold text-white font-mono mb-5">Have a Challenge, Project or Innovation Opportunity?</h2><p className="text-gray-300 font-mono leading-relaxed mb-8">Whether you need engineering-led advisory, professional digital solutions, AI skills development or an innovation partnership, NICP offers specialised pathways to explore your requirements.</p><div className="flex flex-col sm:flex-row gap-4 justify-center"><button type="button" onClick={() => onNavigate('services')} className="inline-flex items-center justify-center gap-2 bg-orange-500 text-white px-6 py-4 font-bold font-mono text-xs uppercase tracking-wider hover:bg-orange-600 transition-colors">Explore Our Services <ArrowRight className="w-4 h-4" /></button><button type="button" onClick={() => onNavigate('contact', undefined, true)} className="inline-flex items-center justify-center gap-2 border border-blue-500/50 text-blue-400 px-6 py-4 font-bold font-mono text-xs uppercase tracking-wider hover:bg-blue-500/10 transition-colors">Request a Consultation <ArrowRight className="w-4 h-4" /></button></div><p className="text-orange-400 font-mono text-sm mt-8">New Innovations Consulting and Projects - NICP (Pty) Ltd</p><p className="text-gray-500 font-mono text-xs mt-2">Engineering-Led AI &amp; Digital Innovation · Turning Innovation into Impact.</p></div></section>

      <ShareButton variant="floating" title="NICP - Engineering-Led AI & Digital Innovation" text="Explore NICP’s engineering-led AI advisory, water treatment innovation and digital solutions." section="home" />
    </div>
  );
}