import { Reveal, LineReveal } from "@/components/motion/Reveal";
import DataGlobe from "@/components/three/DataGlobe";
import type { ReactNode } from "react";

/** Shared inner-page hero: dark woven ground, data-globe scene, display title. */
export default function PageHero({
  eyebrow,
  titleLines,
  lede,
  children,
}: {
  eyebrow: string;
  titleLines: ReactNode[];
  lede?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <section className="weave-dark relative overflow-clip pb-14 pt-40 md:pb-20 md:pt-48">
      <div
        className="pointer-events-none absolute -right-[10%] -top-[25%] h-[55vw] max-h-[720px] w-[55vw] max-w-[720px] rounded-full opacity-30 blur-[90px]"
        style={{ background: "radial-gradient(circle, rgba(46,139,247,0.5), transparent 65%)" }}
        aria-hidden
      />
      <DataGlobe className="absolute -right-[8%] top-1/2 hidden h-[520px] w-[520px] -translate-y-1/2 opacity-80 lg:block xl:-right-[3%]" />
      <div
        className="pointer-events-none absolute inset-y-0 right-0 hidden w-[46%] bg-[linear-gradient(90deg,rgba(3,13,31,0.9),transparent_40%)] lg:block"
        aria-hidden
      />
      <div className="relative mx-auto w-full max-w-[1280px] px-5 md:px-10">
        <Reveal>
          <p className="eyebrow">{eyebrow}</p>
        </Reveal>
        <h1 className="mt-5 text-[clamp(2.6rem,5.6vw,4.6rem)] font-[650] leading-[1.03] tracking-[-0.02em]">
          <LineReveal lines={titleLines} />
        </h1>
        {lede ? (
          <Reveal delay={0.3}>
            <p className="mt-6 max-w-[62ch] text-[clamp(1.05rem,1.45vw,1.25rem)] leading-relaxed text-tmid">
              {lede}
            </p>
          </Reveal>
        ) : null}
        {children}
      </div>
      <div className="sadu-rule absolute inset-x-0 bottom-0" aria-hidden />
    </section>
  );
}