import {jsxs,jsx}from'react/jsx-runtime';import {HelpCenterSearch}from'./HelpCenterSearch.js';const HelpCenterHeader = ({
  onSearch,
  initialSearchQuery = ''
}) => {
  return jsxs("div", {
    className: "relative overflow-visible w-full",
    children: [jsx("div", {
      className: "absolute inset-0 bg-[#057d78]",
      children: jsx("div", {
        className: "absolute inset-0 opacity-20",
        style: {
          backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0)`,
          backgroundSize: '20px 20px'
        }
      })
    }), jsx("div", {
      className: "relative z-10 mx-auto flex min-h-[500px] max-w-7xl flex-col items-center justify-center px-6 pt-20 text-center lg:px-16",
      style: {
        overflow: 'visible'
      },
      children: jsxs("div", {
        className: "max-w-4xl w-full",
        style: {
          overflow: 'visible'
        },
        children: [jsx("h1", {
          className: "mb-6 text-5xl font-light leading-[1.1] tracking-tight text-white lg:text-7xl",
          children: "How can we help?"
        }), jsx("p", {
          className: "mb-12 text-xl font-normal text-white/80 lg:text-2xl",
          children: "Get answers to all things Clockbook."
        }), jsx(HelpCenterSearch, {
          onSearch: onSearch,
          initialSearchQuery: initialSearchQuery,
          showPopularSearches: true
        })]
      })
    })]
  });
};export{HelpCenterHeader};//# sourceMappingURL=HelpCenterHeader.js.map
