// Hero — refactored to accept props for headline/subhead/etc.
// Defaults preserve the original homepage copy so existing pages keep working.
function Hero(props) {
  const {
    mood = 'civic',
    headline,        // string OR { a, b } where b is rendered inside .accent
    subhead,
    showSidebar = true,
    showTrustRow = true,
    style,
  } = props;

  const [zip, setZip] = React.useState('');

  // Default mood-based headlines used by homepage.
  const defaultHeadlines = {
    civic: { a: 'Compare Texas Electricity Rates ', b: 'in Seconds' },
    friendly: { a: 'Find your perfect ', b: 'Texas energy plan.' },
    bold: { a: 'Texas power.', b: 'Honest prices.' }
  };

  // Resolve headline: caller may pass a string, an {a,b} object, or nothing.
  let h;
  if (headline && typeof headline === 'object') {
    h = headline;
  } else if (typeof headline === 'string') {
    h = { a: headline, b: '' };
  } else {
    h = defaultHeadlines[mood] || defaultHeadlines.civic;
  }

  const sub = subhead != null ? subhead : "Texas' trusted electricity marketplace";

  return (
    <section className="hero" style={{ textAlign: "right", padding: "72px 0px 130px", ...style }}>
      <div className="container hero-inner">
        <div className="hero-main">
          <h1 style={{ color: "rgb(248, 248, 248)", width: "1200px", textAlign: "center", margin: "30px 0px 14px" }}>
            {h.a}
            {h.b && <span className="accent" style={{ color: "rgb(255, 255, 255)" }}>{h.b}</span>}
          </h1>
          <p className="sub" style={{ color: "rgb(255, 255, 255)" }}>{sub}</p>
          <form className="zip-form" onSubmit={(e) => e.preventDefault()}>
            <div className="zip-input-wrap">
              <I.Pin />
              <input type="text" inputMode="numeric" maxLength="5" placeholder="Enter ZIP code" value={zip} onChange={(e) => setZip(e.target.value.replace(/\D/g, ''))} />
            </div>
            <button type="submit">Compare Plans</button>
          </form>
          {showTrustRow && (
            <div className="trust-row">
              <span className="google-badge">
                <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                  <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34 5.1 29.3 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21 21-9.4 21-21c0-1.2-.1-2.4-.4-3.5z" />
                  <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34 5.1 29.3 3 24 3 16.3 3 9.7 7.6 6.3 14.7z" />
                  <path fill="#4CAF50" d="M24 45c5.2 0 9.9-2 13.5-5.2l-6.2-5.2c-2 1.5-4.5 2.4-7.3 2.4-5.2 0-9.7-3.3-11.3-8l-6.5 5C9.6 40.4 16.2 45 24 45z" />
                  <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.2 5.7l6.2 5.2C40.9 36 44 30.5 44 24c0-1.2-.1-2.4-.4-3.5z" />
                </svg>
                <span><b>4.8</b> <span className="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></span>
              </span>
              <span className="dot"></span>
              <span style={{ color: "rgb(255, 255, 255)" }}>2,300+ Google reviews</span>
              <span className="dot"></span>
              <span></span>
            </div>
          )}
        </div>
        {showSidebar && (
          <aside className="hero-side">
            <div className="hs-eyebrow">Today&rsquo;s lowest rate</div>
            <div className="hs-rate"><span className="big">9.8&cent;</span><span className="unit">per kWh</span></div>
            <div className="hs-row"><span>Provider</span><b>Gexa Energy</b></div>
            <div className="hs-row"><span>Term</span><b>12 months fixed</b></div>
            <div className="hs-row"><span>Available</span><b>Houston, Dallas +6</b></div>
            <div className="hs-foot">Updated 4 minutes ago</div>
          </aside>
        )}
      </div>
    </section>
  );
}

window.Hero = Hero;