import * as React from "react";
import { BinaryTicker } from "@/src/components/bits/BinaryTicker";
import { BitSeam } from "@/src/components/bits/BitSeam";
import { BitWipe } from "@/src/components/bits/BitWipe";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { Reveal } from "@/src/components/Reveal";

interface BlockProps {
  /** Two-digit section index, shown with its binary form. */
  index: string;
  label: string;
  title: React.ReactNode;
  id?: string;
  /** `dark` turns the section into a dark stage. */
  tone?: "light" | "dark";
  children: React.ReactNode;
}

/**
 * Block: one section of the homepage. A single left axis, one kicker line,
 * one oversized headline, then the content. No sidebars.
 */
export const Block: React.FC<BlockProps> = ({
  index,
  label,
  title,
  id,
  tone = "light",
  children,
}) => {
  const dark = tone === "dark";
  return (
    <section
      id={id}
      className={`relative scroll-mt-24 border-t ${
        dark
          ? "overflow-clip border-slate-800 bg-slate-900"
          : "overflow-x-clip border-slate-200 bg-white"
      }`}
    >
      {dark && (
        <div
          className="pointer-events-none absolute inset-0 opacity-70"
          style={{
            backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
            backgroundSize: "20px 20px",
          }}
          aria-hidden="true"
        />
      )}
      {dark && <BitSeam />}
      <div className="relative mx-auto w-full max-w-[1400px] px-5 py-20 md:px-12 md:py-36">
        <Reveal>
          <div className="mb-8 flex items-center gap-4 md:mb-12">
            <span
              className={`font-mono text-[11px] font-bold tracking-[0.2em] ${dark ? "text-white" : "text-slate-900"}`}
            >
              {index}
            </span>
            <span
              className={`h-px w-10 ${dark ? "bg-slate-700" : "bg-slate-300"}`}
            />
            <DecodeText
              text={label}
              className={`font-mono text-[11px] uppercase tracking-[0.25em] ${dark ? "text-slate-400" : "text-slate-500"}`}
            />
            <BinaryTicker
              value={parseInt(index, 10)}
              alive
              className={`ml-auto hidden font-mono text-[10px] tracking-[0.3em] md:block ${dark ? "text-slate-600" : "text-slate-300"}`}
            />
          </div>
        </Reveal>
        <BitWipe delay={0.1} tone={dark ? "light" : "dark"}>
          <h2
            className={`m-0 max-w-6xl text-4xl font-bold leading-[0.95] tracking-tighter md:text-7xl lg:text-[6.5rem] ${dark ? "text-white" : "text-slate-900"}`}
          >
            {title}
          </h2>
        </BitWipe>
        <div className="mt-14 md:mt-24">{children}</div>
      </div>
    </section>
  );
};