Offer banner

"use client";

import * as React from "react";
import { OfferBanner } from "@/components/facade/offer-banner";

/** End of the current month at 11:59 pm, so the demo countdown is always running. */
function endOfMonth() {
  const now = new Date();
  return new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 0);
}

export default function Demo() {
  const end = React.useMemo(endOfMonth, []);
  const day = end.toLocaleDateString("en-US", { month: "long", day: "numeric" });

  return (
    <OfferBanner
      eyebrow="This month only"
      title="Water heater flush and safety check"
      price="$89"
      regularPrice="$149"
      priceNote={`through ${day}`}
      description="Sediment shortens the life of a tank and raises your gas bill. We drain and flush it, test the relief valve and check the anode rod, in about an hour."
      includes={["Full tank drain and flush", "Relief valve and burner test", "Anode rod check", "Written report with photos"]}
      endsAt={end.toISOString()}
      finePrint="Tank water heaters up to 80 gallons within our service area. Parts and repairs are quoted before any work starts. One visit per address, not combinable with other offers."
      claimCta={{ label: "Book my $89 flush", href: "#book" }}
      secondaryCta={{ label: "Call (512) 555-0193", href: "tel:+15125550193" }}
      image={{
        src: "https://images.unsplash.com/photo-1620653713380-7a34b773fef8?auto=format&fit=crop&w=1000&q=70",
        alt: "Plumber tightening the supply line on a tank water heater",
        width: 1000,
        height: 900,
        focus: "50% 30%",
      }}
    />
  );
}