// HomePlans — the "FEATURED PLANS" section: a light panel wrapping the REUSED
// <PlanCards/>. This is the single shared implementation used by the homepage,
// the Texas pillar and every city page, so the featured-plans sections stay
// visually identical. Its styles live in home.css under `.home-page .home-plans*`,
// so render <HomePlans/> inside a `.home-page` wrapper (the homepage root already
// is one) and load home.css on the page. PlanCards is rendered unchanged.
//
// The disclosure date is read from PlanCards' own `.plans-updated` value (kept in
// the DOM but hidden via CSS) so it stays connected rather than hardcoded.
//
// LOCATION AND PLAN DATA ARE SUPPLIED BY THE PAGE. The ZIP, the utility/TDU
// territory and the plan slate named in this section are page-level facts, not
// global ones: a Houston city page must show plans priced for a Houston ZIP in
// the CenterPoint Energy territory, a Dallas page plans priced for a Dallas ZIP
// in the Oncor territory, and so on. The defaults below are only correct for the
// statewide/homepage case.
//
// Props:
//   location      string  when provided, the H2 uses the shared featured-plans
//                         heading pattern: "Best {location} Electricity Plans"
//                         (e.g. location="Texas" -> "Best Texas Electricity
//                         Plans"). When omitted, the H2 keeps the homepage's
//                         current approved heading, so the homepage is unaffected.
//   zip           string  ZIP code the displayed plans are priced for. Defaults
//                         to the statewide/homepage default ZIP.
//   territory     string  utility/TDU service territory that ZIP sits in, named
//                         exactly as the page names it elsewhere (e.g.
//                         "CenterPoint Energy"). Defaults to the statewide value.
//   plans         array   page-supplied featured plans, forwarded to <PlanCards/>.
//                         A city page passes its own slate; the PlanCards default
//                         set is priced for the statewide/homepage territory and
//                         is not valid in another utility territory.
//   ratesUpdated  string  date the plan rates were refreshed, forwarded to
//                         <PlanCards/> and read back into the disclosure below.
//   heading       string  explicit H2 override, wins over `location`. Provider
//                         pages need it: `location` can only produce "Best {X}
//                         Electricity Plans", and Power Texas has no methodology
//                         for calling one provider's own plans the best of that
//                         provider's lineup.
//   showViewAll   bool    render the "View All Plans" footer link. Defaults true.
//                         Pass false where no plan-listing destination exists —
//                         the link is href="#", which the editorial standard
//                         forbids as a dead link.
function HomePlans({ location, zip = '75001', territory = 'Oncor', plans, ratesUpdated, heading: headingProp, showViewAll = true } = {}) {
  const heading = headingProp
    ? headingProp
    : location
    ? `Best ${location} Electricity Plans`
    : 'Compare popular Texas electricity plans.';
  const panelRef = React.useRef(null);
  const [rateDate, setRateDate] = React.useState('');
  React.useEffect(() => {
    const el = panelRef.current && panelRef.current.querySelector('.plans-updated');
    const m = el && el.textContent.match(/as of\s*(.+?)\s*$/i);
    if (m) setRateDate(m[1]);
  }, []);
  return (
    <section id="recommended-plans" className="home-plans">
      <div className="home-wrap home-wrap--wide">
        <div className="home-plans__panel">
          <div className="home-plans__glow-a" aria-hidden="true" />
          <div className="home-plans__glow-b" aria-hidden="true" />
          <div className="home-plans__panel-inner" ref={panelRef}>
            <p className="home-plans__eyebrow">FEATURED PLANS</p>
            <h2 className="home-plans__title">{heading}</h2>
            {/* The plan slate and its ZIP are forwarded ONLY when the page supplies
                its own plans, so the ZIP disclosed inside the cards always
                describes the plans actually rendered. Callers using the default
                slate keep the PlanCards defaults unchanged. */}
            <PlanCards
              showHeading={false}
              showRatesUpdated={true}
              allPlansLabel="View All Plans"
              allPlansProminent={true}
              {...(plans ? { plans, zip } : {})}
              {...(ratesUpdated ? { ratesUpdated } : {})}
            />
            <div className="home-plans__footrow">
              <p className="home-plans__disclosure">
                Featured plans shown for ZIP code <strong>{zip}</strong> &bull; {territory} Service Territory &bull; Rates updated as of <strong>{rateDate}</strong>
              </p>
              {showViewAll && <a className="home-plans__viewall" href="#">View All Plans &rarr;</a>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomePlans = HomePlans;