/**
 * Hero structure adapted from OnCo home: section.hero, kicker, display heading, lede, action.
 * Copyright (c) 2026 OnCo for the adapted pattern. MIT License. See ui/NOTICE.
 * The heading and lede are Content Explorer copy.
 */
export function Hero({ dataspace, description }: { dataspace: string; description: string }) {
  return (
    <section className="hero border-b border-border">
      <div className="mx-auto max-w-7xl px-4 pt-14 pb-10 sm:px-6 sm:pt-20 sm:pb-12">
        <div className="max-w-3xl">
          <p className="kicker">{dataspace}</p>
          <h1 className="display mt-4">Explore a field of knowledge.</h1>
          <p className="mt-6 max-w-2xl text-[17px] leading-relaxed text-foreground/85 sm:text-xl">{description}</p>
          <div className="mt-8">
            <a href="#records" className="btn btn-primary">
              Browse records
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}