"use client";

import React from "react";
import Link from "next/link";
import { ArrowRight, Bot, Code2, Megaphone, Workflow } from "lucide-react";
import { PROJECTS } from "@/app/lib/data/projects";
import { UniNetLogo, CraftWave, TaskFlowLogo, MeliorateCRMLogo, Human2HumanLogo } from "@/app/lib/icons";
import { FadeUp, Stagger, StaggerItem } from "@/app/components/Motion/Motion";
import styles from "./about.module.css";

import type { ProjectIcon } from "@/app/lib/data/projects";

const productIconMap = {
  UniNetLogo,
  CraftWave,
  TaskFlowLogo,
  MeliorateCRMLogo,
  Human2HumanLogo,
} satisfies Partial<Record<ProjectIcon, React.ComponentType<{ size?: number }>>>;

const CUSTOM_SOLUTIONS = [
  {
    title: "Custom Software",
    description:
      "Business-specific platforms, dashboards, and internal tools designed around your process instead of generic templates.",
    icon: Code2,
  },
  {
    title: "AI Agents",
    description:
      "Practical AI agents for research, support, recruiting, and operations with clear prompts, controls, and accountability.",
    icon: Bot,
  },
  {
    title: "Automation Systems",
    description:
      "Event-driven workflows that remove repetitive manual work and keep teams synchronized across every handoff.",
    icon: Workflow,
  },
  {
    title: "Marketing Systems",
    description:
      "Lead capture, nurture, campaign operations, and reporting architecture built for measurable growth.",
    icon: Megaphone,
  },
];

const DELIVERY_STACK = [
  "Next.js + React",
  "TypeScript",
  "API and workflow integrations",
  "CRM and sales automation",
  "AI orchestration",
  "Recruiting intelligence",
  "Analytics dashboards",
  "Lifecycle marketing",
  "Operational reporting",
  "Brand and UX systems",
];

export function AboutContent() {
  return (
    <>
      <header className={styles.hero}>
        <FadeUp>
          <span className={styles.eyebrow}>About Meliorate</span>
          <h1 className={styles.title}>We compound business performance.</h1>
          <p className={styles.lead}>
            Meliorate is an execution-focused studio combining product engineering, AI automation,
            and growth infrastructure. We build our own products and deliver custom solutions for
            teams that need speed, clarity, and measurable outcomes.
          </p>
        </FadeUp>

        <Stagger className={styles.kpiGrid} stagger={0.1}>
          <StaggerItem className={styles.kpiCard} as="article">
            <p className={styles.kpiValue}>{PROJECTS.length}</p>
            <p className={styles.kpiLabel}>Flagship Products</p>
            <p className={styles.kpiNote}>Built to solve CRM, hiring, network operations, task execution, and AI education.</p>
          </StaggerItem>
          <StaggerItem className={styles.kpiCard} as="article">
            <p className={styles.kpiValue}>{CUSTOM_SOLUTIONS.length}</p>
            <p className={styles.kpiLabel}>Custom Solution Tracks</p>
            <p className={styles.kpiNote}>Software, AI agents, automation systems, and marketing systems.</p>
          </StaggerItem>
          <StaggerItem className={styles.kpiCard} as="article">
            <p className={styles.kpiValue}>End-to-End</p>
            <p className={styles.kpiLabel}>Delivery Ownership</p>
            <p className={styles.kpiNote}>From strategy and architecture to build, launch, and optimization.</p>
          </StaggerItem>
        </Stagger>
      </header>

      <FadeUp as="section" className={styles.meaningBlock}>
        <span className={styles.eyebrow}>What Meliorate Means</span>
        <h2 className={styles.meaningTitle}>Our name is a verb: to make better.</h2>
        <p className={styles.meaningText}>
          To <em>meliorate</em> is to make better — from the Latin <em>melior</em>, &quot;better.&quot; It
          shares a root with <em>meliorism</em>: the view, coined by the novelist George Eliot and developed
          by the philosopher William James, that the world is neither guaranteed to improve nor impossible to
          improve, but can be made better through deliberate human effort.
        </p>
        <blockquote className={styles.meaningQuote}>
          &quot;…a possibility, which becomes more and more of a probability the more numerous the actual
          conditions of it become.&quot;
          <cite>— William James, <i>Pragmatism</i>, 1907</cite>
        </blockquote>
        <p className={styles.meaningText}>
          That is exactly how we see engineering. No system arrives reliable; every one we ship — every
          grounded agent, every automated workflow — turns a possibility into a probability. We don&apos;t
          wait for progress. We make it, one working system at a time.
        </p>
      </FadeUp>

      <FadeUp as="section" className={styles.sectionBlock}>
        <div className={styles.sectionHeader}>
          <h2 className={styles.sectionTitle}>Our Products Ecosystem</h2>
          <p className={styles.sectionDescription}>
            We build focused products that solve high-impact workflow bottlenecks across revenue,
            hiring, operations, and execution.
          </p>
        </div>

        <Stagger className={styles.productGrid} stagger={0.08}>
          {PROJECTS.map((project) => {
            const Icon = productIconMap[project.icon];
            return (
              <StaggerItem key={project.slug}>
                <Link href={project.visitLink} target="_blank">
                  <article className={styles.productCard}>
                    <div className={`${styles.iconInner} ${styles[project.accent]}`}>
                      <Icon />
                    </div>
                    <div className={styles.productContent}>
                      <h3 className={styles.productName}>{project.name}</h3>
                    </div>
                  </article>
                </Link>
              </StaggerItem>
            );
          })}
        </Stagger>
      </FadeUp>

      <FadeUp as="section" className={styles.sectionBlock}>
        <div className={styles.sectionHeader}>
          <h2 className={styles.sectionTitle}>Custom Services We Deliver</h2>
          <p className={styles.sectionDescription}>
            When products are not enough, we design and build bespoke systems aligned with your exact business model.
          </p>
        </div>

        <Stagger className={styles.serviceGrid} stagger={0.1}>
          {CUSTOM_SOLUTIONS.map((solution) => {
            const Icon = solution.icon;
            return (
              <StaggerItem key={solution.title} className={styles.serviceCard} as="article">
                <div className={styles.serviceIcon}>
                  <Icon size={20} />
                </div>
                <h3 className={styles.serviceTitle}>{solution.title}</h3>
                <p className={styles.serviceText}>{solution.description}</p>
              </StaggerItem>
            );
          })}
        </Stagger>
      </FadeUp>

      <FadeUp as="section" className={styles.sectionBlock}>
        <div className={styles.sectionHeader}>
          <h2 className={styles.sectionTitle}>Technology + Delivery Stack</h2>
          <p className={styles.sectionDescription}>
            We choose tools based on reliability, speed of iteration, and long-term maintainability.
          </p>
        </div>

        <Stagger className={styles.stackGrid} stagger={0.04}>
          {DELIVERY_STACK.map((item) => (
            <StaggerItem key={item} as="span" className={styles.stackTag} variant="scaleIn">
              {item}
            </StaggerItem>
          ))}
        </Stagger>
      </FadeUp>

      <FadeUp as="section" className={styles.ctaBand}>
        <div className={styles.ctaCopy}>
          <p className={styles.ctaEyebrow}>Execution Partner</p>
          <h2>Need a team that can design, build, and operationalize your next system?</h2>
          <p>
            If you are planning a new product, AI workflow, or custom growth infrastructure,
            we can scope the fastest high-confidence path with you.
          </p>
        </div>
        <div className={styles.ctaActions}>
          <Link href="/contact" className={styles.primaryButton}>
            Start a Project <ArrowRight size={16} />
          </Link>
          <Link href="/#services" className={styles.secondaryButton}>
            View Products
          </Link>
        </div>
      </FadeUp>
    </>
  );
}