// ====== Service Areas Page ======
const CITIES = [
  "Southlake", "Grapevine", "Colleyville", "Keller", "Westlake", "Trophy Club",
  "Roanoke", "Fort Worth", "North Richland Hills", "Hurst", "Euless", "Bedford",
  "Haltom City", "Dallas", "Irving", "Coppell", "Lewisville", "Flower Mound",
  "Frisco", "Plano", "McKinney", "Allen", "Garland", "Arlington",
  "Grand Prairie", "Mansfield", "Burleson", "Denton",
];

function ServiceAreasPage() {
  return (
    <PageLayout activeSection="service-areas">

      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Where We Work</span>
          <h1>Serving Homeowners Across<br />the Dallas-Fort Worth Metroplex</h1>
          <p className="lede">
            From Southlake to Frisco, Fort Worth to McKinney — if you're in DFW,
            we'll come to you. Free estimates anywhere in our service area.
          </p>
          <div className="hero-cta">
            <button
              className="btn btn-primary"
              onClick={() => window.__openQuote && window.__openQuote()}
            >
              Get a Free Quote <span className="arr"><I.Arrow size={14} /></span>
            </button>
            <a className="btn btn-ghost" href="tel:9403264695">(940) 326-4695</a>
          </div>
        </div>
      </section>

      {/* Cities Grid */}
      <section className="page-section">
        <div className="container">
          <div className="section-head" style={{ textAlign: "center" }}>
            <span className="eyebrow">Communities We Serve</span>
            <h2>28+ Cities Across DFW</h2>
            <p style={{ color: "var(--muted)", maxWidth: 560, margin: "12px auto 0" }}>
              We serve homeowners throughout the Dallas-Fort Worth Metroplex. Don't see
              your city? Give us a call — we likely cover your area.
            </p>
          </div>
          <div className="city-grid">
            {CITIES.map((city, i) => (
              <div className="city-pill" key={i}>{city}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Why local matters */}
      <section className="page-section alt">
        <div className="container">
          <div className="content-grid">
            <div>
              <span className="eyebrow">Local Expertise</span>
              <h2>We Know DFW Homes</h2>
              <p>
                DFW homes have unique characteristics — Texas heat, clay soil
                expansion, and the region's building styles all affect how flooring,
                windows, and doors should be installed and finished. Our team has spent
                years working in this specific climate and knows exactly what materials
                and techniques hold up best here.
              </p>
              <p>
                We're not a national chain dispatching a crew from across the country.
                We live and work in this community, and our reputation depends on doing
                right by our neighbors.
              </p>
              <ul className="feature-list">
                <li>
                  <span className="ico"><I.Check size={18} /></span>
                  <div><strong>Fast response times</strong><p>Local presence means we can be at your home quickly for estimates and project starts.</p></div>
                </li>
                <li>
                  <span className="ico"><I.Check size={18} /></span>
                  <div><strong>No travel surcharges</strong><p>Free estimates anywhere within our standard DFW service area.</p></div>
                </li>
                <li>
                  <span className="ico"><I.Check size={18} /></span>
                  <div><strong>Local familiarity</strong><p>We plan projects around DFW homes, materials, weather, and scheduling realities.</p></div>
                </li>
              </ul>
            </div>
            <div>
              <img
                src="/images/proj-living-hardwood.jpg"
                alt="Hardwood flooring inspiration for a DFW home"
                width={1200}
                height={900}
                style={{ borderRadius: "12px", width: "100%" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Services we bring to you */}
      <section className="page-section">
        <div className="container" style={{ textAlign: "center" }}>
          <span className="eyebrow">What We Bring</span>
          <h2>Full-Service Home Improvement, Wherever You Are</h2>
          <p style={{ color: "var(--muted)", maxWidth: 580, margin: "12px auto 32px" }}>
            Every service we offer is available throughout our DFW service area.
          </p>
          <div className="services">
            {SERVICES.map((s) => {
              const Icon = I[s.icon];
              const slug = s.id === "home" ? "home-improvement" : s.id;
              return (
                <a key={s.id} className="service-card-link" href={`/services/${slug}/`}>
                  <div className="svc-icon"><Icon size={26} /></div>
                  <h3>{s.name}</h3>
                  <p>{s.desc}</p>
                  <span className="more">Learn More <I.Arrow size={13} /></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <div className="cta-band">
        <div className="container">
          <h2>In Our Service Area? Let's Talk.</h2>
          <p>Call us at (940) 326-4695 or request a free estimate online.</p>
          <button
            className="btn-white"
            onClick={() => window.__openQuote && window.__openQuote()}
          >
            Request a Free Estimate <I.Arrow size={14} />
          </button>
        </div>
      </div>

    </PageLayout>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServiceAreasPage />);