<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="site-root" content="/">
  <title>{{title}}</title>
  <meta name="description" content="{{meta_description}}">
  <link rel="canonical" href="{{canonical}}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/main.css">
  <link rel="stylesheet" href="/assets/css/components.css">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Service",
    "name": "{{service_name}}",
    "provider": {
      "@type": "LocalBusiness",
      "name": "Floor It Hardwood Floors",
      "telephone": "+17166021429",
      "email": "floorithardwoods@gmail.com",
      "url": "https://floorithardwoodfloors.com",
      "areaServed": "Erie County, NY"
    },
    "url": "{{canonical}}"
  }
  </script>
</head>
<body>

  <div id="site-header"></div>

  <main>

    <!-- HERO -->
    <section class="page-hero">
      <div class="container page-hero-inner">
        <nav class="breadcrumb" aria-label="Breadcrumb">
          <a href="/">Home</a>
          <span class="breadcrumb-sep">/</span>
          <a href="/services/">Services</a>
          <span class="breadcrumb-sep">/</span>
          <span>{{service_name}}</span>
        </nav>
        <span class="eyebrow">{{hero_eyebrow}}</span>
        <h1>{{hero_h1}}</h1>
        <p class="lead">{{hero_lead}}</p>
        <div class="cta-group" style="margin-top:2rem;">
          <a href="/contact/" class="btn btn--primary btn--lg">Get a Free Estimate</a>
          <a href="tel:+17166021429" class="btn btn--outline-light btn--lg">Call (716) 602-1429</a>
        </div>
      </div>
    </section>

    <!-- INTRO -->
    <section class="section section--light">
      <div class="container">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;">
          <div data-animate="left">
            <span class="eyebrow">What We Do</span>
            <h2>{{intro_h2}}</h2>
            <div class="divider"></div>
            <p style="color:var(--smoke);">{{intro_body_1}}</p>
            <p style="margin-top:1rem;color:var(--smoke);">{{intro_body_2}}</p>
            <div class="cta-group mt-8">
              <a href="/contact/" class="btn btn--primary">Request Estimate</a>
              <a href="tel:+17166021429" class="btn btn--outline-dark">(716) 602-1429</a>
            </div>
          </div>
          <div data-animate="right">
            <div style="border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;background:var(--grain);">
              <img src="{{hero_image}}" alt="{{service_name}} | Floor It Hardwood Floors" style="width:100%;height:100%;object-fit:cover;" loading="lazy">
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- PROCESS -->
    <section class="section section--dark">
      <div class="container">
        <div class="section-header section-header--center">
          <span class="eyebrow">How It Works</span>
          <h2>Our {{service_name}} Process</h2>
          <p>{{process_intro}}</p>
        </div>
        <div class="process-steps">
          <div class="process-step" data-animate="up">
            <div class="process-step-num">1</div>
            <h3>{{step_1_title}}</h3>
            <p>{{step_1_body}}</p>
          </div>
          <div class="process-step" data-animate="up" data-delay="2">
            <div class="process-step-num">2</div>
            <h3>{{step_2_title}}</h3>
            <p>{{step_2_body}}</p>
          </div>
          <div class="process-step" data-animate="up" data-delay="3">
            <div class="process-step-num">3</div>
            <h3>{{step_3_title}}</h3>
            <p>{{step_3_body}}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- BENEFITS -->
    <section class="section section--alt">
      <div class="container">
        <div class="section-header section-header--center">
          <span class="eyebrow">Why Choose Us</span>
          <h2>What Sets Our {{service_name}} Apart</h2>
        </div>
        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;">
          <div class="benefit-card" data-animate="left">
            <div class="benefit-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div class="benefit-body">
              <h4>{{benefit_1_title}}</h4>
              <p>{{benefit_1_body}}</p>
            </div>
          </div>
          <div class="benefit-card" data-animate="right">
            <div class="benefit-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 0 0 .95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 0 0-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 0 0-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 0 0-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 0 0 .951-.69l1.519-4.674z"/></svg>
            </div>
            <div class="benefit-body">
              <h4>{{benefit_2_title}}</h4>
              <p>{{benefit_2_body}}</p>
            </div>
          </div>
          <div class="benefit-card" data-animate="left" data-delay="2">
            <div class="benefit-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div class="benefit-body">
              <h4>{{benefit_3_title}}</h4>
              <p>{{benefit_3_body}}</p>
            </div>
          </div>
          <div class="benefit-card" data-animate="right" data-delay="2">
            <div class="benefit-icon">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div class="benefit-body">
              <h4>{{benefit_4_title}}</h4>
              <p>{{benefit_4_body}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ -->
    <section class="section section--dark">
      <div class="container">
        <div style="display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start;">
          <div data-animate="left">
            <span class="eyebrow">{{service_name}} FAQ</span>
            <h2>Common Questions</h2>
            <div class="divider"></div>
            <p style="color:var(--ash);">Have a question? Call us at <a href="tel:+17166021429" style="color:var(--amber);font-weight:700;">(716) 602-1429</a> and we will answer it directly.</p>
          </div>
          <div class="faq-list" data-animate="up">
            <div class="faq-item">
              <div class="faq-question">
                <h4>{{faq_1_q}}</h4>
                <div class="faq-icon" aria-hidden="true"></div>
              </div>
              <div class="faq-answer">
                <div class="faq-answer-inner">{{faq_1_a}}</div>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-question">
                <h4>{{faq_2_q}}</h4>
                <div class="faq-icon" aria-hidden="true"></div>
              </div>
              <div class="faq-answer">
                <div class="faq-answer-inner">{{faq_2_a}}</div>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-question">
                <h4>{{faq_3_q}}</h4>
                <div class="faq-icon" aria-hidden="true"></div>
              </div>
              <div class="faq-answer">
                <div class="faq-answer-inner">{{faq_3_a}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ESTIMATE FORM -->
    <section class="section contact-section">
      <div class="container">
        <div class="contact-layout">
          <div>
            <span class="eyebrow">Free Estimate</span>
            <h2>{{form_h2}}</h2>
            <div class="divider"></div>
            <p class="lead">Tell us about your floors and we will respond within 1 business hour.</p>
            <div class="contact-info-list" style="margin-top:2rem;">
              <div class="contact-info-item">
                <div class="contact-info-icon">
                  <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/></svg>
                </div>
                <div><h5>Phone</h5><a href="tel:+17166021429">(716) 602-1429</a></div>
              </div>
              <div class="contact-info-item">
                <div class="contact-info-icon">
                  <svg viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
                </div>
                <div><h5>Hours</h5><p>Monday to Saturday: 8:00 AM to 5:00 PM</p></div>
              </div>
            </div>
          </div>
          <div class="contact-form-wrap" data-animate="right">
            <h3 style="margin-bottom:1.5rem;font-size:var(--text-xl);">{{form_h2}}</h3>
            <form class="estimate-form" novalidate>
              <input type="hidden" name="service_page" value="{{service_name}}">
              <div class="form-grid form-grid--2">
                <div class="form-field">
                  <label for="name">Full Name <span aria-hidden="true">*</span></label>
                  <input type="text" id="name" name="name" autocomplete="name" required>
                  <span class="err-msg" role="alert"></span>
                </div>
                <div class="form-field">
                  <label for="phone">Phone Number <span aria-hidden="true">*</span></label>
                  <input type="tel" id="phone" name="phone" placeholder="(716) 000-0000" autocomplete="tel" required>
                  <span class="err-msg" role="alert"></span>
                </div>
                <div class="form-field">
                  <label for="email">Email Address <span aria-hidden="true">*</span></label>
                  <input type="email" id="email" name="email" autocomplete="email" required>
                  <span class="err-msg" role="alert"></span>
                </div>
                <div class="form-field">
                  <label for="address">Property Address <span aria-hidden="true">*</span></label>
                  <input type="text" id="address" name="address" autocomplete="street-address" required>
                  <span class="err-msg" role="alert"></span>
                </div>
              </div>
              <div class="form-field" style="margin-top:1.25rem;">
                <label for="message">Additional Details</label>
                <textarea id="message" name="message" placeholder="Describe your floors or the issue you are experiencing."></textarea>
              </div>
              <div class="form-trust">
                <div class="form-trust-item">1 business hour response</div>
                <div class="form-trust-item">No obligation</div>
                <div class="form-trust-item">Licensed &amp; insured</div>
              </div>
              <button type="submit" class="btn btn--primary btn--full btn--lg" style="margin-top:1.25rem;">{{form_submit}}</button>
              <div class="form-status" role="status" aria-live="polite"></div>
            </form>
          </div>
        </div>
      </div>
    </section>

  </main>

  <div id="site-footer"></div>

  <script src="/assets/js/components.js"></script>
  <script src="/assets/js/main.js"></script>
  <script src="/assets/js/form.js"></script>
</body>
</html>
