import type { Metadata } from "next";
import Image from "next/image";
import { ShieldCheck, Wrench, Clock3, KeyRound } from "lucide-react";
import { Reveal } from "@/components/ui/reveal";
import { GradientBlobs } from "@/components/ui/gradient-blobs";
import { CodeDoodles } from "@/components/illustrations/code-doodles";

export const metadata: Metadata = {
  title: "About",
  description:
    "Soodogrowth Technologies is a remote-first software and growth company anchored in Manitoba, Canada.",
};

const VALUES = [
  {
    icon: ShieldCheck,
    title: "Transparency",
    description: "Fixed pricing and clear scope, agreed before work starts.",
  },
  {
    icon: Wrench,
    title: "Craftsmanship",
    description: "Senior engineers on every build, not junior hand-offs.",
  },
  {
    icon: Clock3,
    title: "Reliability",
    description: "Milestones you can check in on, delivered on schedule.",
  },
  {
    icon: KeyRound,
    title: "Ownership",
    description: "You own the code, assets, and infrastructure at delivery.",
  },
];

export default function AboutPage() {
  return (
    <div>
      <section className="relative overflow-hidden border-b border-line">
        <GradientBlobs variant="mixed" className="opacity-40" />
        <CodeDoodles />
        <div className="relative mx-auto max-w-shell px-6 py-16 lg:px-8 lg:py-20">
          <Reveal>
            <p className="font-mono text-[13px] text-signal">About</p>
            <h1 className="mt-3 max-w-2xl font-display text-3xl font-semibold text-paper lg:text-4xl">
              Manitoba-anchored, remote-first by design.
            </h1>
            <p className="mt-5 max-w-2xl text-paper-2">
              Soodogrowth Technologies Inc. pairs a Canadian business anchor
              with globally distributed senior engineering — built so
              clients get local accountability and world-class delivery,
              without paying for either compromise.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="border-b border-line">
        <div className="mx-auto max-w-shell px-6 py-16 lg:px-8 lg:py-20">
          <Reveal>
            <p className="font-mono text-[13px] text-signal">Founders</p>
            <h2 className="mt-3 font-display text-2xl font-semibold text-paper">
              Co-founders
            </h2>
          </Reveal>

          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
            <Reveal delay={0.06}>
              <div className="rounded-lg border border-line bg-ink-2 p-7">
                <div className="h-14 w-14 rounded-full bg-gradient-to-br from-signal/40 to-signal/10" />
                <p className="mt-5 font-mono text-[11px] text-pulse">
                  Confirm bio before publishing
                </p>
                <h3 className="mt-1.5 font-display text-lg font-semibold text-paper">
                  Soweto — CEO & Co-Founder
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-paper-2">
                  Leads client acquisition, branding, and Canadian business
                  operations from Winnipeg, Manitoba.
                </p>
              </div>
            </Reveal>

            <Reveal delay={0.12}>
              <div className="rounded-lg border border-line bg-ink-2 p-7">
                <div className="relative h-14 w-14 overflow-hidden rounded-full">
                  <Image
                    src="/images/team/kenneth-nweke.png"
                    alt="Kenneth Nweke"
                    fill
                    sizes="56px"
                    className="object-cover"
                  />
                </div>
                <h3 className="mt-5 font-display text-lg font-semibold text-paper">
                  Kenneth Nweke — CTO & Co-Founder
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-paper-2">
                  Systems architect and full-stack engineer specializing in
                  the MERN stack, Flutter, and Next.js. Founder of Morning
                  Stack ICT Club and President of FIDAPS (NYSC). Based in
                  Umuahia North, Abia State, Nigeria — leads all technical
                  delivery for Soodogrowth as remote CTO.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section>
        <div className="mx-auto max-w-shell px-6 py-16 lg:px-8 lg:py-20">
          <Reveal>
            <p className="font-mono text-[13px] text-signal">Values</p>
            <h2 className="mt-3 font-display text-2xl font-semibold text-paper">
              What guides how we work.
            </h2>
          </Reveal>

          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {VALUES.map(({ icon: Icon, title, description }, i) => (
              <Reveal key={title} delay={i * 0.06}>
                <div className="h-full rounded-lg border border-line bg-ink-2 p-6">
                  <div className="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-signal/25 to-signal/5">
                    <Icon size={20} className="text-signal" strokeWidth={1.75} />
                  </div>
                  <h3 className="mt-4 font-display text-base font-semibold text-paper">
                    {title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-paper-2">
                    {description}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}