function Hero({ onCTA, tweaks }) {
  const headline = tweaks.heroHeadline || "Looking to remodel your kitchen? Get A Free Pot Filler Upgrade With Any New Kitchen Remodel.";
  const layout = tweaks.heroLayout || "split";

  const bullets = [
    { strong: "See your kitchen before we build it —", rest: "Free realistic 3D design rendering ($500 value) included." },
    { strong: "Our On-Time Guarantee —", rest: "If we miss your agreed completion date, we pay you $250 for every day we're late, up to $2,500." },
    { strong: "Fixed Price. No surprise change orders —", rest: "The Price You Sign Is the Price You Pay." },
  ];

  const eyebrow = (
    <div className="hero-eyebrow-row">
      <span className="rating-pill rating-pill--prominent">
        <Stars size={15} />
        <strong style={{color:'var(--ink)', fontWeight:700}}>5.0</strong>
        <span style={{color:'var(--ink-2)', fontWeight:500}}>Rated by 150+ Greater Seattle Homeowners</span>
      </span>
    </div>
  );

  const offerBanner = (
    <div className="offer-banner">
      <span className="offer-banner-ic" aria-hidden="true">🎁</span>
      <span className="offer-banner-text">
        <strong>$1,500 Value</strong>
        <span className="offer-banner-sep">—</span>
        <span>Included with the Next 10 Kitchen Remodels</span>
      </span>
    </div>
  );

  const ctaRow = (
    <>
      <div className="hero-cta-row">
        <button className="btn btn-primary btn-xl" onClick={onCTA}>
          Get Free Estimate &amp; Offer
          <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.award size={18} /></span>
          <div>
            <strong>21 yrs</strong>
            <span>in business</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.tools size={18} /></span>
          <div>
            <strong>250+</strong>
            <span>kitchens built</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.shield size={16} /></span>
          <div>
            <strong>Licensed &amp; Insured</strong>
            <span>Bonded · WA State</span>
          </div>
        </div>
      </div>
    </>
  );

  const headlineEl = (
    <h1 className="hero-headline" style={{color:'rgb(1, 1, 1)'}}>
      Looking to remodel your kitchen? Get A <em>Free Pot Filler Upgrade</em> With Any New Kitchen Remodel.
    </h1>
  );

  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>
  );

  // Centered layout
  if (layout === "centered") {
    return (
      <section className="hero">
        <div className="container" style={{textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center'}}>
          {eyebrow}
          <div style={{maxWidth: 900}}>{headlineEl}</div>
          <ul className="hero-bullets" style={{maxWidth: 680, margin:'0 auto 32px', textAlign:'left'}}>
            {bullets.slice(0,3).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>
          <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:12}}>
            <button className="btn btn-primary btn-xl" onClick={onCTA}>
              Get Free Estimate &amp; Offer <Ic.arrow />
            </button>
            <div className="small">Takes 60 seconds &middot; No obligation</div>
          </div>
          <div style={{marginTop:56, width:'100%', maxWidth: 1100, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
            <div style={{aspectRatio:'4/5', borderRadius:14, overflow:'hidden'}}><Ph label="Bellevue Transitional" variant="warmer" /></div>
            <div style={{aspectRatio:'4/5', borderRadius:14, overflow:'hidden', transform:'translateY(-24px)'}}><Ph label="Kirkland Modern" variant="sage" /></div>
            <div style={{aspectRatio:'4/5', borderRadius:14, overflow:'hidden'}}><Ph label="Mercer Island Classic" variant="cream" /></div>
          </div>
        </div>
      </section>
    );
  }

  // Full-bleed layout
  if (layout === "fullbleed") {
    return (
      <section className="hero" style={{padding:0}}>
        <div style={{position:'relative', minHeight:'82vh', display:'grid', alignItems:'center', overflow:'hidden'}}>
          <div style={{position:'absolute', inset:0}}><Ph label="hero kitchen photography — full bleed" variant="warmer" /></div>
          <div style={{position:'absolute', inset:0, background:'linear-gradient(95deg, rgba(21,25,21,0.82) 0%, rgba(21,25,21,0.45) 55%, transparent 85%)'}} />
          <div className="container" style={{position:'relative', zIndex:2, padding:'72px 24px', color:'#fff'}}>
            <div style={{maxWidth: 700}}>
              <div className="hero-eyebrow-row">
                <span className="eyebrow" style={{color:'var(--yellow)'}}>Bellevue &middot; Greater Seattle</span>
                <span className="rating-pill">
                  <Stars /> <span><strong style={{color:'var(--ink)'}}>5.0</strong> &middot; 150+ Reviews</span>
                </span>
              </div>
              <h1 className="hero-headline" style={{color:'#fff'}}>
                Get a <em style={{color:'var(--yellow)'}}>free pot filler</em> over your range
                <span className="value-chip">$1,500 value</span>
                {" "}— with any new kitchen remodel.
              </h1>
              <ul className="hero-bullets">
                {bullets.slice(0,3).map((b, i) => (
                  <li key={i} className="hero-bullet" style={{color:'rgba(255,255,255,0.85)'}}>
                    <span className="check" style={{background:'rgba(244,166,37,0.2)', color:'var(--yellow)'}}><Ic.check size={13} /></span>
                    <span><strong style={{color:'#fff'}}>{b.strong}</strong> {b.rest}</span>
                  </li>
                ))}
              </ul>
              <div className="hero-cta-row">
                <button className="btn btn-primary btn-xl" onClick={onCTA}>
                  Get Free Estimate &amp; Offer <Ic.arrow />
                </button>
                <div className="small" style={{color:'rgba(255,255,255,0.75)'}}>60 seconds &middot; No obligation</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Default: split
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          {eyebrow}
          {headlineEl}
          {offerBanner}
          {bulletList}
          {ctaRow}
        </div>
        <div style={{position:'relative'}}>
          <div className="hero-visual">
            <picture>
              <source media="(min-width: 721px)" srcSet="assets/hero-kitchen-desktop.jpg" />
              <img src="assets/hero-kitchen.jpg" alt="Kitchen remodel with pot filler over range — Bellevue, WA" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center center'}} />
            </picture>
          </div>
          <div className="float-card tl">
            <div className="fc-icon green"><Ic.shield size={18} /></div>
            <div>
              <strong>$250/day late guarantee</strong>
              <span>Up to $2,500 back</span>
            </div>
          </div>
          <div className="float-card br">
            <div className="fc-icon"><Ic.cube size={18} /></div>
            <div>
              <strong>Free 3D design rendering</strong>
              <span>See it before we build it</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;