"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { fadeUp, fadeLeft, fadeRight } from "@/lib/variants";
import { Button } from "@/components/ui/button";

/* ── Data ── */
const ACCOLADES = [
  {
    num: "№ 01",
    title: "Internet Hall of Fame",
    body: "Inducted as a Global Connector — recognised for catalysing the spread of the internet across the African continent.",
  },
  {
    num: "№ 02",
    title: "Jonathan B. Postel Service Award",
    body: "Awarded by the Internet Society for outstanding contributions to the data communications community.",
  },
  {
    num: "№ 03",
    title: "The First PhD",
    body: "The first Ghanaian to receive a PhD in Computer Science — a record that opened the door for generations of African computer scientists.",
  },
  {
    num: "№ 04",
    title: "The Cape Coast Department",
    body: "Founder of the Computer Science Department at the University of Cape Coast — a foundational institution for Ghana's tech ecosystem.",
  },
];

/* ── Card components ── */
type AccoladeCardProps = typeof ACCOLADES[number] & { index: number };
function AccoladeCard({ num, title, body, index }: AccoladeCardProps) {
  return (
    <motion.div
      className="bg-indigo-brand p-10"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.1}
    >
      <span className="font-mono text-[11px] tracking-[0.2em] uppercase text-ochre mb-4 block">{num}</span>
      <h3 className="text-[30px] mb-3 text-cream">{title}</h3>
      <p className="text-[14px] m-0" style={{ color: "rgba(245,237,224,0.7)" }}>{body}</p>
    </motion.div>
  );
}

/* ── Page ── */
export default function HeroPage() {
  return (
    <>
      {/* HERO */}
      <section className="bg-paper py-20 border-b border-rule">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" animate="show" custom={0.1}>
            <div className="eyebrow">The Inaugural Honouree</div>
            <h1
              className="leading-[0.95] my-3 mb-6"
              style={{ fontSize: "clamp(54px, 7vw, 110px)" }}
            >
              Prof. Nii Narku <em className="italic text-terracotta">Quaynor.</em>
            </h1>
            <p className="lede">
              A dedicated profile of the <em>Architect of the African Internet</em> — a son of Osu, a builder
              of continents, a carrier of the Samai into the age of the network.
            </p>
            <div className="flex flex-wrap gap-2 mt-6">
              <span className="tag tag--ochre">Architect of the African Internet</span>
              <span className="tag tag--indigo">Internet Hall of Fame</span>
              <span className="tag tag--terracotta">Jonathan B. Postel Award</span>
            </div>
          </motion.div>
          <motion.div variants={fadeRight} initial="hidden" animate="show" custom={0.2}>
            <div
              className="w-full bg-cream-deep flex flex-col items-center justify-center gap-3"
              style={{ aspectRatio: "4/5", border: "1px solid var(--rule-color)", boxShadow: "24px 24px 0 -12px #C8842B" }}
            >
              <svg viewBox="0 0 80 80" fill="none" className="w-16 h-16 opacity-20" aria-hidden="true">
                <circle cx="40" cy="30" r="16" stroke="currentColor" strokeWidth="2" />
                <path d="M10 72 C10 52 70 52 70 72" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Portrait · Coming Soon</span>
            </div>
          </motion.div>
        </div>
      </section>

      {/* BIO */}
      <section className="py-[110px]">
        <div className="wrap grid grid-cols-1 gap-8 lg:grid-cols-[1fr_2fr] lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">I — Biography</div>
            <h2>From Osu<br />to the world.</h2>
          </motion.div>
          <motion.div variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            <p className="dropcap">
              The first Ghanaian to receive a PhD in Computer Science. Founder of the Computer Science Department
              at the University of Cape Coast, and pioneer of Internet development across the African continent.
            </p>
            <p>
              Where others saw a continent waiting to be wired, Prof. Quaynor saw a continent waiting to be connected
              to itself — to its diaspora, its institutions, and its future. He built the on-ramps of Africa&apos;s
              Information Superhighway not as imports, but as extensions of an existing tradition of mastery.
            </p>
            <p>
              His career has not been a departure from Osu Alata. It has been a deepening of it — the same instinct
              for invisible currents, applied to packets instead of fish.
            </p>
          </motion.div>
        </div>
      </section>

      {/* ACCOLADES */}
      <section className="bg-indigo-brand text-cream py-[110px]">
        <div className="wrap">
          <div className="eyebrow text-ochre">II — Accolades</div>
          <h2 className="text-cream">A record of recognition.</h2>
          <p className="max-w-[60ch]" style={{ color: "rgba(245,237,224,0.78)" }}>
            A small selection of the honours that frame a long career — alongside the Pioneer Shield he will
            receive at the Grand Durbar.
          </p>
          <div
            className="grid grid-cols-1 sm:grid-cols-2 mt-12"
            style={{ gap: "1px", background: "rgba(245,237,224,0.18)", border: "1px solid rgba(245,237,224,0.18)" }}
          >
            {ACCOLADES.map((acc, i) => (
              <AccoladeCard key={i} {...acc} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* LECTURE */}
      <section className="py-[110px] bg-cream-deep">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">III — The Hero&apos;s Lecture</div>
            <p
              className="font-heading leading-[1.05] m-0 mb-8"
              style={{ fontSize: "clamp(34px, 4.4vw, 54px)" }}
            >
              &ldquo;Leveraging <em className="text-terracotta italic">heritage</em><br />for the future.&rdquo;
            </p>
            <p>
              The keynote address of Day Two — Prof. Quaynor&apos;s reflection on what the Osu Alata tradition has
              to teach the next generation of African builders, technologists, and connectors.
            </p>
            <Button variant="secondary" asChild>
              <Link href="/events#day-two">View Day Two Programme →</Link>
            </Button>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              style={{ aspectRatio: "4/3" }}
              src="https://images.unsplash.com/photo-1591115765373-5207764f72e7?auto=format&fit=crop&w=900&q=70"
              alt="A lecture hall"
            />
            <figcaption className="figure__cap">
              <span>The Hero&apos;s Lecture · Day Two · 15:30</span>
              <span>Mantse&apos;s Palace</span>
            </figcaption>
          </motion.figure>
        </div>
      </section>

      {/* ROOTS */}
      <section className="py-[110px]">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-[2fr_1fr] lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">IV — Local Roots</div>
            <h2>From the shores of Osu, to a global tech titan.</h2>
            <p>
              Prof. Quaynor&apos;s journey is the proof of concept for the Alata Kakalɔi Award — the demonstration that
              Osu Alata&apos;s resourcefulness, applied with discipline, can scale from a coastal community to a continental network.
            </p>
            <p>
              It is also a reminder: every global figure begins as a local one. The community that produces the hero
              deserves to recognise them — in their own time, at their own table.
            </p>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              src="https://images.unsplash.com/photo-1508739773434-c26b3d09e071?auto=format&fit=crop&w=900&q=70"
              alt="Osu coastline"
            />
            <figcaption className="figure__cap">
              <span>Osu shoreline · The home harvest</span>
            </figcaption>
          </motion.figure>
        </div>
      </section>
    </>
  );
}