import KineticTitle from "@/components/KineticTitle";
import Reveal from "@/components/Reveal";
import { TRAVEL } from "@/lib/site";

/** 08 — The Traveller: photo wall that humanises the brand. */
export default function Traveller() {
  return (
    <section id="traveller" className="relative bg-obsidian py-28 md:py-40">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <Reveal>
          <p className="kicker mb-6">07 — The Traveller</p>
        </Reveal>
        <div className="flex flex-wrap items-end justify-between gap-8">
          <KineticTitle
            as="h2"
            text="The world is the boardroom."
            className="font-display max-w-2xl text-4xl font-black leading-[1.06] tracking-[-0.02em] text-ivory md:text-6xl"
          />
          <Reveal>
            <p className="mb-2 max-w-sm font-editorial text-xl italic leading-snug text-warmgrey">
              Cape Town to Nairobi, Dubai to Phuket — the best strategy sessions
              happen at 38,000 feet.
            </p>
          </Reveal>
        </div>

        <div className="mt-16 grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-4">
          {TRAVEL.map((t, i) => (
            <Reveal key={t.image} delay={i * 0.05}>
              <figure className="group relative overflow-hidden">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={t.image}
                  alt={t.alt}
                  loading="lazy"
                  decoding="async"
                  className="aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.06]"
                />
                <figcaption className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-obsidian/85 via-transparent to-transparent p-5 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
                  <span className="font-display text-lg font-black text-ivory">{t.place}</span>
                  <span className="mt-1 font-mono text-[0.58rem] uppercase tracking-[0.26em] text-gold">
                    {t.coords}
                  </span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}