/* global React, Placeholder */

const Hero = () => {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero" style={{ padding: "0px" }}>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow">A Calaveras County Tradition</div>
            <h1>
              Built by hand,<br />
              built for <em>neighbors.</em>
            </h1>
            <p className="hero-lede">
              For nearly five decades, Fillmore Construction has been raising decks,
              setting foundations, and patching roofs across Murphys and the Highway 4 corridor.
              Same family. Same crew. Same handshake.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary" href="#assistant">
                <span className="btn-pulse" aria-hidden="true"><span></span></span>
                Talk to our assistant
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
                </svg>
              </a>
              <a className="btn btn-ghost" href="#quote">Request an estimate</a>
            </div>
            <div className="hero-meta">
              <div>
                <div className="num">47</div>
                <div className="lbl">Years in business</div>
              </div>
              <div>
                <div className="num">600+</div>
                <div className="lbl">Local projects</div>
              </div>
              <div>
                <div className="num">A+</div>
                <div className="lbl">BBB &amp; CSLB licensed</div>
              </div>
            </div>
          </div>

          <div className="hero-photo">
            <Placeholder kind="house" />
            <a href="#assistant" className="hero-assistant-card">
              <div className="hac-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
                  <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
                </svg>
                <span className="hac-pulse"></span>
              </div>
              <div className="hac-body">
                <div className="hac-tag">New · 24/7</div>
                <div className="hac-title">Talk to our assistant</div>
                <div className="hac-sub">Voice or chat — right here, no waiting</div>
              </div>
              <svg className="hac-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>);

};

window.Hero = Hero;