import { GlobeCanvasClient } from "@/components/hero/GlobeCanvasClient";
import { HeroCopy } from "./HeroCopy";
import { company, heroStats, markets } from "@/content/company";

/**
 * The hero.
 *
 * The globe sits behind live DOM text, so the headline, the stats and the calls
 * to action are all in the server rendered HTML. Nothing a crawler or a reader
 * needs is trapped inside the canvas.
 */
export function Hero() {
  return (
    <section className="relative isolate min-h-[100svh] overflow-hidden bg-[var(--ink)]">
      {/* The globe sits beside the headline on wide screens. On a phone there
          is no room beside anything, so it drops back to an atmospheric
          presence behind the type rather than competing with it. */}
      <div className="pointer-events-none absolute inset-0 opacity-35 sm:opacity-50 lg:left-[26%] lg:opacity-100">
        <div className="pointer-events-auto absolute inset-0">
          <GlobeCanvasClient />
        </div>
      </div>

      {/* Keeps the headline readable wherever the globe happens to be. */}
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[var(--ink)] via-[var(--ink)]/70 to-transparent lg:via-[var(--ink)]/40" />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-[var(--ink)] to-transparent" />

      <div className="shell relative flex min-h-[100svh] flex-col justify-end pb-14 pt-32 md:justify-center md:pb-24">
        <HeroCopy
          tagline={company.tagline}
          positioning={company.positioning}
          founded={company.founded}
          markets={markets.filter((m) => m.status === "active").map((m) => m.name)}
          stats={heroStats.map((s) => ({ ...s }))}
        />
      </div>

      {/* Scroll cue, drawn as a thread being paid out. */}
      <div className="pointer-events-none absolute inset-x-0 bottom-6 hidden justify-center md:flex">
        <div className="flex flex-col items-center gap-2">
          <span className="font-mono text-[10px] uppercase tracking-[0.3em] text-[var(--melange)]">
            Scroll
          </span>
          <span className="relative block h-10 w-px overflow-hidden bg-[var(--rule)]">
            <span className="absolute inset-x-0 top-0 block h-4 animate-[thread-drop_2.6s_cubic-bezier(0.76,0,0.24,1)_infinite] bg-[var(--thread)]" />
          </span>
        </div>
      </div>
    </section>
  );
}