import Counter from "@/components/Counter";
import KineticTitle from "@/components/KineticTitle";
import ParallaxImg from "@/components/ParallaxImg";
import Reveal from "@/components/Reveal";
import { STATS } from "@/lib/site";

/** 02 — The Prologue: split editorial bio with parallax portrait and stat counters. */
export default function Prologue() {
  return (
    <section id="prologue" className="relative bg-obsidian py-28 md:py-40">
      <div className="mx-auto grid max-w-[1440px] gap-16 px-6 md:grid-cols-12 md:px-10">
        {/* Portrait column */}
        <div className="md:col-span-5">
          <Reveal>
            <div className="relative">
              <ParallaxImg
                src="/images/damian-michael-ceo-boardroom-cape-town.webp"
                alt="Damian Michael in a charcoal suit at a boardroom window overlooking Cape Town at dusk"
                className="aspect-[3/4] w-full"
              />
              <div className="absolute -bottom-4 -right-4 hidden h-full w-full border border-gold/30 md:block" aria-hidden />
            </div>
            <div className="mt-6 flex items-center justify-between font-mono text-[0.6rem] uppercase tracking-[0.28em] text-warmgrey">
              <span>Cape Town — 18:42</span>
              <span>Golden hour</span>
            </div>
          </Reveal>
        </div>

        {/* Editorial column */}
        <div className="md:col-span-7 md:pl-8">
          <Reveal>
            <p className="kicker mb-6">01 — The Prologue</p>
          </Reveal>

          <KineticTitle
            as="h2"
            text="Twenty years building the networks Africa runs on."
            className="font-display max-w-2xl text-4xl font-black leading-[1.08] tracking-[-0.02em] text-ivory md:text-6xl"
          />

          <Reveal delay={0.15}>
            <p className="mt-10 max-w-xl font-editorial text-2xl italic leading-snug text-gold">
              “We don&apos;t sell technology. We build the backbone that lets African
              businesses compete with anyone on earth.”
            </p>
          </Reveal>

          <Reveal delay={0.2}>
            <div className="mt-10 max-w-xl space-y-6 text-ivory/80">
              <p>
                Damian Michael is the Managing Director and CEO of Innovo Networks
                (Pty) Ltd, a Cape Town-headquartered ICT company he founded to give
                South African SMEs and government institutions the communications,
                connectivity, cloud and cybersecurity muscle usually reserved for
                enterprises. Today the company operates across South Africa and
                Kenya under a simple creed: think, solve, connect.
              </p>
              <p>
                His track record runs from municipal networks in the Cape Winelands
                to the Pan African Parliament — and to Innovo&apos;s own proprietary
                Video PBX and omni-channel contact centre platform, which has held
                99.99% uptime on Huawei Cloud for more than eight years. In 2017,
                Innovo Networks was named FNB Business of the Year in the
                technology sector.
              </p>
              <p>
                Beyond the server room, Damian is a public speaker, mentor and
                board member, an entrepreneur with ventures spanning ICT and
                premium consumer brands like Marlowe — and a traveller who believes
                the best strategy sessions happen at 38,000 feet.
              </p>
            </div>
          </Reveal>

          <Reveal delay={0.25}>
            <div className="mt-14 grid grid-cols-2 gap-x-8 gap-y-10 border-t border-ivory/10 pt-10 lg:grid-cols-4">
              {STATS.map((s) => (
                <Counter
                  key={s.label}
                  value={s.value}
                  suffix={s.suffix}
                  decimals={"decimals" in s ? s.decimals : 0}
                  label={s.label}
                />
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}