<!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": "LocalBusiness",
    "name": "Floor It Hardwood Floors",
    "url": "{{canonical}}",
    "telephone": "+17166021429",
    "email": "floorithardwoods@gmail.com",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "{{city}}",
      "addressRegion": "{{state}}",
      "addressCountry": "US"
    },
    "areaServed": "{{schema_area}}",
    "openingHours": "Mo-Sa 08:00-17:00",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.9",
      "reviewCount": "50"
    }
  }
  </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="/locations/">Locations</a>
          <span class="breadcrumb-sep">/</span>
          <span>{{city}}, {{state}}</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">Request an Estimate</a>
          <a href="tel:+17166021429" class="btn btn--outline-light btn--lg">Call (716) 602-1429</a>
        </div>
      </div>
    </section>

    <!-- OVERVIEW -->
    <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">{{overview_eyebrow}}</span>
            <h2>{{overview_h2}}</h2>
            <div class="divider"></div>
            <p style="color:var(--smoke);">{{overview_body_1}}</p>
            <p style="margin-top:1rem;color:var(--smoke);">{{overview_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="display:flex;flex-direction:column;gap:1rem;">
              <div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
                <div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_1_num}}</div>
                <div>
                  <strong style="display:block;font-size:var(--text-sm);">{{stat_1_label}}</strong>
                  <span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_1_sub}}</span>
                </div>
              </div>
              <div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
                <div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_2_num}}</div>
                <div>
                  <strong style="display:block;font-size:var(--text-sm);">{{stat_2_label}}</strong>
                  <span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_2_sub}}</span>
                </div>
              </div>
              <div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
                <div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_3_num}}</div>
                <div>
                  <strong style="display:block;font-size:var(--text-sm);">{{stat_3_label}}</strong>
                  <span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_3_sub}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- SERVICES -->
    <section class="section section--alt">
      <div class="container">
        <div class="section-header section-header--center">
          <span class="eyebrow">{{city}} Services</span>
          <h2>Hardwood Floor Services in {{city}}, {{state}}</h2>
          <p>{{services_intro}}</p>
        </div>
        <div class="grid grid--auto-3">
          <div class="service-card" data-animate="up">
            <div class="service-card-body">
              <h3>{{service_1_title}}</h3>
              <p>{{service_1_body}}</p>
            </div>
            <div class="service-card-footer">
              <a href="/services/floor-refinishing/" class="service-card-link">Learn More</a>
              <a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
            </div>
          </div>
          <div class="service-card" data-animate="up" data-delay="2">
            <div class="service-card-body">
              <h3>{{service_2_title}}</h3>
              <p>{{service_2_body}}</p>
            </div>
            <div class="service-card-footer">
              <a href="/services/floor-restoration/" class="service-card-link">Learn More</a>
              <a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
            </div>
          </div>
          <div class="service-card" data-animate="up" data-delay="3">
            <div class="service-card-body">
              <h3>{{service_3_title}}</h3>
              <p>{{service_3_body}}</p>
            </div>
            <div class="service-card-footer">
              <a href="/services/floor-sanding/" class="service-card-link">Learn More</a>
              <a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
            </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">{{city}} FAQ</span>
            <h2>Common Questions from {{city}} Homeowners</h2>
            <div class="divider"></div>
            <p style="color:var(--ash);">Have a question specific to your {{city}} home? Call us at <a href="tel:+17166021429" style="color:var(--amber);font-weight:700;">(716) 602-1429</a></p>
          </div>
          <div class="faq-list" data-animate="up">
            {{faq_items}}
          </div>
        </div>
      </div>
    </section>

    <!-- ESTIMATE FORM -->
    <section class="section contact-section">
      <div class="container">
        <div class="contact-layout">
          <div>
            <span class="eyebrow">{{city}} 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="location" value="{{city}}, {{state}}">
              <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">{{form_address_label}} <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="service">Service Needed <span aria-hidden="true">*</span></label>
                <select id="service" name="service" required>
                  <option value="">Select a service</option>
                  <option value="refinishing">Floor Refinishing</option>
                  <option value="restoration">Floor Restoration</option>
                  <option value="sanding">Floor Sanding</option>
                  <option value="installation">Floor Installation</option>
                  <option value="unsure">Not Sure</option>
                </select>
                <span class="err-msg" role="alert"></span>
              </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>
