import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal, RevealItem } from "@/components/motion/Reveal";
import { GlobeFallback } from "@/components/hero/GlobeFallback";
import { company, markets } from "@/content/company";

/**
 * Export reach. The same globe drawing from the hero returns here as a still,
 * which ties the two ends of the page together without a second WebGL context.
 */
export function GlobalReach() {
  return (
    <section className="section grain relative overflow-hidden bg-[var(--ink)]">
      <div className="shell grid gap-14 lg:grid-cols-12 lg:items-center">
        <div className="lg:col-span-6">
          <SectionHeading
            eyebrow="Where it ships"
            title="From Multan and Lahore to the world."
            lede={company.groupScale}
          />

          <Reveal stagger={0.07} className="mt-10 grid gap-px bg-[var(--rule)] sm:grid-cols-2">
            {markets.map((market) => (
              <RevealItem
                key={market.name}
                className="flex items-center justify-between gap-4 bg-[var(--ink)] px-5 py-4"
              >
                <span className="text-sm text-[var(--cotton)]">
                  {market.name}
                </span>
                <span
                  className={
                    market.status === "active"
                      ? "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--thread)]"
                      : "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--melange)]"
                  }
                >
                  {market.status === "active" ? "Shipping" : "Seeking agents"}
                </span>
              </RevealItem>
            ))}
          </Reveal>

          <Reveal delay={0.15}>
            <p className="mt-8 max-w-xl text-sm leading-relaxed text-[var(--melange)]">
              Agents and distributors are actively being appointed across South
              America and Latin America. If you represent buyers in those
              markets, we would like to hear from you.
            </p>
          </Reveal>
        </div>

        <div className="lg:col-span-6">
          <Reveal direction="left" duration={1}>
            <figure className="mx-auto max-w-[520px]">
              <div className="relative">
                <GlobeFallback className="h-auto w-full" />
                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[var(--ink)] via-transparent to-transparent" />
              </div>

              {/* The drawing carries two line colours and two marker colours and
                  says nowhere what they mean. Unlabelled it reads as decoration,
                  which is most obvious on a phone where it sits on its own. */}
              <figcaption className="mt-6 border-t border-[var(--rule)] pt-5">
                <ul className="grid gap-3 sm:grid-cols-3">
                  <Key swatch="line-thread" label="Shipping now" />
                  <Key swatch="line-melange" label="Seeking agents" />
                  <Key swatch="dot" label="Multan and Lahore" />
                </ul>
              </figcaption>
            </figure>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/** One row of the globe legend: a mark drawn like the globe draws it, then its meaning. */
function Key({
  swatch,
  label,
}: {
  swatch: "line-thread" | "line-melange" | "dot";
  label: string;
}) {
  return (
    <li className="flex items-center gap-2.5">
      <span aria-hidden="true" className="flex h-3 w-6 shrink-0 items-center justify-center">
        {swatch === "dot" ? (
          <span className="block h-1.5 w-1.5 rounded-full bg-[var(--thread)] ring-4 ring-[var(--thread)]/20" />
        ) : (
          <span
            className={
              swatch === "line-thread"
                ? "block h-px w-6 bg-[var(--thread)]"
                : "block h-px w-6 bg-[var(--melange)]/60"
            }
          />
        )}
      </span>
      <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--melange)]">
        {label}
      </span>
    </li>
  );
}