function Hero({ onConsult, onEstimate, headline }) {
  // headline: string with \n for break. Supports *italic* emphasis wrap.
  const parts = (headline || 'Your home,\nrebuilt the right way.').split('\n');
  return (
    <section className="hero" id="top">
      <div className="hero-image">
        <img src={window.HERO_IMAGE} alt="Luxury renovation by Worldliness Construction" />
        <div className="gradient" />
      </div>

      {/* Measurement decorations */}
      <svg className="measure" style={{ top: '12%', right: '12%', width: 180, height: 60, animationDelay: '1.6s' }} viewBox="0 0 180 60">
        <line className="ln" x1="5" y1="30" x2="175" y2="30" />
        <line className="ln" x1="5" y1="20" x2="5" y2="40" />
        <line className="ln" x1="175" y1="20" x2="175" y2="40" />
        <text className="tx" x="90" y="22" textAnchor="middle">12'-6"</text>
      </svg>

      {/* Spec cards */}
      <div className="spec-card spec-card-1">
        <span className="lbl">Project Spec</span>
        <div className="val">Full Gut Reno</div>
        <div className="sub">Permits · Plans · Finish</div>
      </div>
      <div className="spec-card spec-card-2">
        <span className="lbl">Timeline</span>
        <div className="val">6 Weeks</div>
        <div className="sub">Delivered on schedule</div>
      </div>
      <div className="spec-card spec-card-3">
        <span className="lbl">Trades Managed</span>
        <div className="val">9 In-House</div>
        <div className="sub">One point of contact</div>
      </div>

      <div className="hero-content">
        <div className="hero-body">
          <div className="hero-badge" style={{opacity:0, animation:'specIn 0.8s var(--ease-out) 0.1s forwards'}}>
            <span className="dot" />
            <span>Vancouver's Premier Renovation Team</span>
          </div>
          <h1 style={{opacity:0, animation:'specIn 0.9s var(--ease-out) 0.25s forwards'}}>
            {parts[0]}<br />
            {parts[1] && <em>{parts[1]}</em>}
          </h1>
          <p className="sub" style={{opacity:0, animation:'specIn 0.9s var(--ease-out) 0.45s forwards'}}>
            From full home renovations to custom new builds, Worldliness delivers expert craftsmanship on every project. One call. Nine trades. Zero runaround.
          </p>
          <div className="hero-ctas" style={{opacity:0, animation:'specIn 0.9s var(--ease-out) 0.6s forwards'}}>
            <button className="btn btn-secondary" onClick={onConsult}>
              Book Free Consultation
              <Icon name="arrow" size={14} className="arrow" />
            </button>
            <button className="btn btn-primary" onClick={onEstimate}>
              Send Us Your Problem
              <Icon name="arrow" size={14} className="arrow" />
            </button>
            <a href={window.CONTACT.phoneHref} className="btn btn-outline">
              <Icon name="phone" size={14} />
              {window.CONTACT.phone}
            </a>
          </div>
          <p className="hero-meta" style={{opacity:0, animation:'specIn 0.9s var(--ease-out) 0.75s forwards'}}>
            Licensed · Insured · Vancouver & Lower Mainland
          </p>
        </div>
      </div>

      <div className="hero-scroll-hint">
        <span>Scroll</span>
        <span className="bar" />
      </div>
    </section>
  );
}
window.Hero = Hero;