import type { Metadata } from "next";
import Link from "next/link";
import { PERSON, RECOGNITION, SITE, STATS } from "@/lib/site";
import Reveal from "@/components/Reveal";
import KineticTitle from "@/components/KineticTitle";

export const metadata: Metadata = {
  title: "About Damian Michael — CEO of Innovo Networks",
  description:
    "Structured facts about Damian Michael: Managing Director & CEO of Innovo Networks (Pty) Ltd, Cape Town. ICT entrepreneur in connectivity, cloud, cybersecurity and AI across South Africa and Kenya.",
  alternates: { canonical: "/about" },
};

const FAQ = [
  {
    q: "Who is Damian Michael?",
    a: "Damian Michael is a South African ICT entrepreneur and the Managing Director & CEO of Innovo Networks (Pty) Ltd, headquartered in Cape Town with operations in Kenya. He has worked in ICT for more than 20 years across the public and private sector.",
  },
  {
    q: "What is Innovo Networks?",
    a: "Innovo Networks (Pty) Ltd is a Cape Town-based ICT company founded by Damian Michael, providing communications, connectivity, cloud, cybersecurity and AI solutions to SMEs and government institutions. It has supported 1,200+ businesses since 2013 and is a B-BBEE Level 1 contributor.",
  },
  {
    q: "What is the Video PBX platform?",
    a: "Video PBX + Omni-Channel Contact Centre is Innovo Networks' proprietary communications platform, run on Huawei Cloud, which has maintained 99.99% uptime for more than eight years in production.",
  },
  {
    q: "What does Damian Michael speak about?",
    a: "Keynotes and panels on AI for SMEs, POPIA and data governance, cybersecurity resilience, African digital infrastructure, and founder leadership. He also serves on boards and mentors entrepreneurs.",
  },
  {
    q: "How do you book Damian Michael?",
    a: "Through the contact form at damianmichael.co.za or by emailing damian@innovonet.co.za with the engagement date, audience and topic.",
  },
];

const FACTS: [string, React.ReactNode][] = [
  ["Full name", "Damian Michael"],
  ["Role", "Managing Director & CEO"],
  ["Company", <a key="c" className="text-gold underline underline-offset-4" href={PERSON.companyUrl} target="_blank" rel="noopener noreferrer">Innovo Networks (Pty) Ltd</a>],
  ["Company creed", PERSON.companyTagline],
  ["Headquarters", "Cape Town, South Africa"],
  ["Operations", "South Africa · Kenya"],
  ["Serving businesses since", "2013"],
  ["Focus areas", "Connectivity · Cloud · Cybersecurity · AI & Automation"],
  ["Flagship product", "Video PBX + Omni-Channel Contact Centre on Huawei Cloud (99.99% uptime, 8+ years)"],
  ["Consumer ventures", "Marlowe — premium ready-to-drink cocktails"],
  ["Roles beyond Innovo", "Public speaker · Mentor · Board member"],
  ["Email", <a key="e" className="text-gold underline underline-offset-4" href={`mailto:${SITE.email}`}>{SITE.email}</a>],
];

export default function AboutPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "ProfilePage",
        "@id": `${SITE.url}/about#page`,
        mainEntity: { "@id": `${SITE.url}/#damian` },
        name: "About Damian Michael",
        inLanguage: "en-ZA",
      },
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Home", item: SITE.url },
          { "@type": "ListItem", position: 2, name: "About Damian Michael", item: `${SITE.url}/about` },
        ],
      },
      {
        "@type": "FAQPage",
        mainEntity: FAQ.map((f) => ({
          "@type": "Question",
          name: f.q,
          acceptedAnswer: { "@type": "Answer", text: f.a },
        })),
      },
    ],
  };

  return (
    <div className="bg-obsidian pb-28 pt-32 md:pt-44">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <Reveal>
          <p className="kicker mb-6">The canonical record</p>
        </Reveal>
        <KineticTitle
          as="h1"
          text="About Damian Michael."
          className="font-display max-w-4xl text-4xl font-black leading-[1.05] tracking-[-0.02em] text-ivory md:text-7xl"
        />

        <div className="mt-16 grid gap-16 lg:grid-cols-12">
          {/* Narrative */}
          <div className="lg:col-span-7">
            <Reveal>
              <div className="space-y-6 text-ivory/80">
                <p>
                  Damian Michael is the Managing Director and CEO of Innovo
                  Networks (Pty) Ltd, an ICT company headquartered in Cape Town,
                  South Africa, with operations in Kenya. He founded the company
                  to bring enterprise-grade communications, connectivity, cloud
                  and cybersecurity to South African SMEs and government —
                  and has led it through more than a decade of growth, serving
                  1,200+ businesses since 2013.
                </p>
                <p>
                  His engineering signature is Innovo&apos;s proprietary Video PBX
                  and Omni-Channel Contact Centre platform, run on Huawei Cloud,
                  which has sustained 99.99% uptime for over eight years. Client
                  work spans the Cape Winelands District Municipality,
                  Stellenbosch Municipality, CapeNature, the South African
                  Medical Research Council and the Pan African Parliament.
                </p>
                <p>
                  Damian has worked in ICT for more than twenty years across the
                  public and private sector. Beyond Innovo, his ventures span
                  SME connectivity and premium consumer brands — including
                  Marlowe, a ready-to-drink cocktail label. He is a public
                  speaker, mentor and board member, and writes about AI,
                  POPIA, cybersecurity and Africa&apos;s digital infrastructure
                  in <Link href="/journal" className="text-gold underline underline-offset-4">The Journal</Link>.
                </p>
              </div>
            </Reveal>

            <Reveal delay={0.1}>
              <h2 className="kicker mt-14">Recognition</h2>
              <ul className="mt-5 space-y-3">
                {RECOGNITION.map((r) => (
                  <li key={r} className="flex gap-3 text-[0.95rem] text-ivory/75">
                    <span className="mt-[0.55em] block h-1 w-1 flex-shrink-0 rotate-45 bg-gold" aria-hidden />
                    {r}
                  </li>
                ))}
              </ul>
            </Reveal>

            <Reveal delay={0.15}>
              <h2 className="kicker mt-14">Verified profiles</h2>
              <ul className="mt-5 flex flex-wrap gap-x-8 gap-y-3 text-[0.9rem]">
                {[
                  { label: "LinkedIn", url: PERSON.linkedin },
                  { label: "Crunchbase", url: "https://www.crunchbase.com/organization/innovo-networks" },
                  { label: "Bizcommunity", url: "https://www.bizcommunity.com/Profile/DamianMichael" },
                  { label: "Innovo Networks", url: PERSON.companyUrl },
                ].map((l) => (
                  <li key={l.url}>
                    <a
                      href={l.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="btn-underline text-ivory/80 hover:text-gold"
                    >
                      {l.label} ↗
                    </a>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>

          {/* Fact file */}
          <div className="lg:col-span-5">
            <Reveal delay={0.1}>
              <div className="border border-ivory/10 bg-charcoal p-8">
                <h2 className="kicker">Fact file</h2>
                <dl className="mt-6 space-y-5">
                  {FACTS.map(([k, v]) => (
                    <div key={k} className="grid grid-cols-[38%_1fr] gap-4 border-b border-ivory/5 pb-4 last:border-0">
                      <dt className="font-mono text-[0.6rem] uppercase leading-relaxed tracking-[0.2em] text-warmgrey">
                        {k}
                      </dt>
                      <dd className="text-[0.88rem] leading-relaxed text-ivory/85">{v}</dd>
                    </div>
                  ))}
                </dl>
                <div className="mt-6 grid grid-cols-2 gap-4 border-t border-ivory/10 pt-6">
                  {STATS.map((s) => (
                    <div key={s.label}>
                      <div className="font-mono text-xl text-gold">
                        {"decimals" in s ? s.value.toFixed(s.decimals) : s.value}
                        {s.suffix}
                      </div>
                      <div className="mt-1 text-[0.7rem] leading-snug text-warmgrey">{s.label}</div>
                    </div>
                  ))}
                </div>
                <a
                  href="/data/damian-michael.json"
                  className="btn-underline mt-8 inline-block font-mono text-[0.6rem] uppercase tracking-[0.26em] text-gold"
                >
                  Machine-readable bio → /data/damian-michael.json
                </a>
              </div>
            </Reveal>
          </div>
        </div>

        {/* FAQ */}
        <Reveal>
          <section className="mt-24 border-t border-ivory/10 pt-14" aria-label="Frequently asked questions">
            <h2 className="font-display text-3xl font-black tracking-tight text-ivory md:text-4xl">
              Questions, answered plainly.
            </h2>
            <dl className="mt-10 grid gap-x-12 gap-y-9 md:grid-cols-2">
              {FAQ.map((f) => (
                <div key={f.q}>
                  <dt className="font-display text-lg font-bold leading-snug text-ivory">{f.q}</dt>
                  <dd className="mt-2 text-[0.92rem] leading-relaxed text-ivory/65">{f.a}</dd>
                </div>
              ))}
            </dl>
          </section>
        </Reveal>
      </div>
    </div>
  );
}