const { Button, Input } = window.GDVExpressDesignSystem_766357;

/* Full-bleed photo hero with the member-rate promise and a single search field. */
function SiteHero({ onSearch }) {
  const [q, setQ] = React.useState("");
  return (
    <section style={{
      position: "relative",
      padding: "84px 30px 92px",
      textAlign: "center",
      backgroundImage: "linear-gradient(180deg, rgba(33,58,110,.34), rgba(33,58,110,.52)), url('../../assets/photos/beach-hero.jpg')",
      backgroundSize: "cover",
      backgroundPosition: "center 60%",
    }}>
      <div style={{
        fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase",
        color: "#fff", fontWeight: 700, marginBottom: "12px", textShadow: "0 1px 6px rgba(0,0,0,.4)",
      }}>Members travel for less</div>
      <h1 style={{
        margin: "0 0 12px", fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: "46px", letterSpacing: "-0.02em", color: "#fff", lineHeight: 1.06,
        textShadow: "0 2px 14px rgba(0,0,0,.35)",
      }}>Your getaways, made personal</h1>
      <p style={{
        margin: "0 auto 26px", color: "rgba(255,255,255,.95)", fontSize: "16px",
        maxWidth: "500px", lineHeight: 1.5, textShadow: "0 1px 8px rgba(0,0,0,.4)",
      }}>
        Condos, cruises, tours, hotels, cars &amp; flights — all at member rates.
        The price you see is the price you pay.
      </p>
      <form onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(q); }}
        style={{ maxWidth: "520px", margin: "0 auto", display: "flex", gap: "10px" }}>
        <Input pill placeholder="Where do you want to go?" value={q}
          onChange={(e) => setQ(e.target.value)} style={{ flex: 1 }}
          iconLeft={<span style={{ color: "var(--muted-2)", fontSize: "15px" }}>⌕</span>} />
        <Button variant="primary" type="submit">Search stays</Button>
      </form>
    </section>
  );
}
window.SiteHero = SiteHero;