function Hero({ onCTA, tweaks }) {
  const headline = tweaks.heroHeadline || "Get a Fast Level 2 EV Charger Installed at Your Sacramento Home — Free Estimate";
  const layout = tweaks.heroLayout || "split";

  const bullets = [
  { strong: "Works with every EV —", rest: "Tesla, Rivian, Ford, Hyundai, Kia, Chevy, BMW, and more." },
  { strong: "6 to 9x faster charging —", rest: "go from 3 to 5 miles per hour on a regular outlet to 25 to 40 miles per hour." },
  { strong: "We handle everything —", rest: "permits, panel check, install, cleanup. You just plug in and drive." }];


  const eyebrow =
  <div className="hero-eyebrow-row">
      <span className="rating-pill rating-pill--prominent">
        <span aria-hidden="true" style={{ display: 'inline-flex', gap: 1, fontSize: 13, lineHeight: 1, letterSpacing: '-0.5px' }}>⭐⭐⭐⭐⭐</span>
        <strong style={{ color: 'var(--ink)', fontWeight: 700 }}>Rated 5/5 Stars</strong>
        <span style={{ color: 'var(--ink-2)', fontWeight: 500 }}>by Sacramento homeowners</span>
      </span>
    </div>;


  const headlineEl =
  <h1 className="hero-headline" style={{ color: 'var(--ink)' }}>
      Get a <em>Fast Level 2 EV Charger</em> Installed at Your Home
    </h1>;


  const subhead =
  <p className="hero-sub" style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.55, maxWidth: '56ch', marginBottom: 28 }}>
      Stop hunting for public chargers and waiting days to top off at home. Plug in at night, wake up to a full battery, and skip the gas station for good.
    </p>;


  const bulletList =
  <ul className="hero-bullets">
      {bullets.map((b, i) =>
    <li key={i} className="hero-bullet">
          <span className="check"><Ic.check size={13} /></span>
          <span><strong>{b.strong}</strong> {b.rest}</span>
        </li>
    )}
    </ul>;


  const ctaRow =
  <>
      <div className="hero-cta-row">
        <button className="btn btn-primary btn-xl" onClick={onCTA}>
          Get My Free Estimate
          <Ic.arrow />
        </button>
        <div className="small" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Ic.clock size={15} /> Takes 60 seconds &middot; No obligation
        </div>
      </div>
      <div className="hero-trust-row">
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.clock size={18} /></span>
          <div>
            <strong>1 day</strong>
            <span>typical install</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.shield size={16} /></span>
          <div>
            <strong>Licensed,</strong>
            <span>bonded &amp; insured</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.check size={18} /></span>
          <div>
            <strong>Free check</strong>
            <span>panel capacity</span>
          </div>
        </div>
      </div>
    </>;


  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          {eyebrow}
          {headlineEl}
          {subhead}
          {bulletList}
          {ctaRow}
        </div>
        <div style={{ position: 'relative' }}>
          <div className="hero-visual">
            <img src="assets/hero-tesla.jpeg" alt="White Tesla charging at a Sacramento home with a wall-mounted Level 2 charger" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </div>
    </section>);

}
window.Hero = Hero;